Spaces:
Sleeping
Sleeping
| .app { | |
| max-width: 1040px; | |
| margin: 0 auto; | |
| padding: 40px 20px 90px; | |
| } | |
| /* ---------------------------------------------------------------- header --- */ | |
| .app-header { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 20px; | |
| flex-wrap: wrap; | |
| } | |
| .brand { | |
| display: flex; | |
| gap: 14px; | |
| align-items: flex-start; | |
| } | |
| .brand-mark { | |
| flex-shrink: 0; | |
| font-size: 1.9rem; | |
| line-height: 1; | |
| margin-top: 2px; | |
| } | |
| .brand-title { | |
| margin: 0; | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| font-size: 1.6rem; | |
| letter-spacing: -0.01em; | |
| line-height: 1.15; | |
| } | |
| .subtitle { | |
| margin: 6px 0 0; | |
| color: var(--muted); | |
| font-size: 0.92rem; | |
| } | |
| .header-right { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-end; | |
| gap: 8px; | |
| } | |
| .fast-demo-link { | |
| font-size: 0.85rem; | |
| color: var(--accent, #2f6feb); | |
| text-decoration: none; | |
| } | |
| .fast-demo-link:hover { | |
| text-decoration: underline; | |
| } | |
| .status-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-family: var(--font-mono); | |
| font-size: 0.75rem; | |
| padding: 7px 13px; | |
| border-radius: 999px; | |
| border: 1px solid var(--rule); | |
| background: var(--surface); | |
| color: var(--muted); | |
| white-space: nowrap; | |
| height: fit-content; | |
| } | |
| .status-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: var(--muted); | |
| } | |
| .status-pill.is-ready { | |
| color: var(--ink); | |
| border-color: var(--accent-soft); | |
| background: var(--accent-soft); | |
| } | |
| .status-pill.is-ready .status-dot { | |
| background: var(--accent); | |
| } | |
| /* ---------------------------------------------------------------- tabs ---- */ | |
| .tabs { | |
| display: flex; | |
| margin: 32px 0 22px; | |
| border-bottom: 1px solid var(--rule); | |
| } | |
| .tab { | |
| font-family: var(--font-mono); | |
| font-size: 0.8rem; | |
| letter-spacing: 0.07em; | |
| text-transform: uppercase; | |
| padding: 10px 2px; | |
| margin-right: 26px; | |
| background: none; | |
| border: none; | |
| border-bottom: 2px solid transparent; | |
| color: var(--muted); | |
| cursor: pointer; | |
| position: relative; | |
| top: 1px; | |
| } | |
| .tab:hover { | |
| color: var(--ink); | |
| } | |
| .tab.active { | |
| color: var(--ink); | |
| border-bottom-color: var(--ink); | |
| } | |
| /* ---------------------------------------------------------------- panels -- */ | |
| .tab-panel { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 18px; | |
| } | |
| .tab-caption { | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 0.88rem; | |
| } | |
| .panel-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |
| gap: 16px; | |
| } | |
| .card { | |
| background: var(--surface); | |
| border: 1px solid var(--rule); | |
| border-radius: var(--radius); | |
| padding: 18px 20px; | |
| box-shadow: var(--shadow); | |
| } | |
| .card-title { | |
| margin: 0 0 14px; | |
| font-family: var(--font-display); | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| letter-spacing: 0.01em; | |
| } | |
| /* ---------------------------------------------------------------- inputs -- */ | |
| .field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .field-label { | |
| font-family: var(--font-mono); | |
| font-size: 0.7rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--muted); | |
| } | |
| .field-hint { | |
| font-size: 0.72rem; | |
| color: var(--muted); | |
| } | |
| select, | |
| input[type='color'], | |
| textarea { | |
| font-family: var(--font-body); | |
| font-size: 0.88rem; | |
| border: 1px solid var(--rule); | |
| border-radius: var(--radius-sm); | |
| background: var(--surface-sunken); | |
| color: var(--ink); | |
| padding: 8px 10px; | |
| } | |
| input[type='color'] { | |
| padding: 3px 4px; | |
| height: 34px; | |
| width: 56px; | |
| } | |
| select:focus, | |
| textarea:focus { | |
| border-color: var(--accent); | |
| } | |
| select:disabled, | |
| input:disabled { | |
| opacity: 0.5; | |
| } | |
| .controls-row { | |
| display: flex; | |
| gap: 24px; | |
| align-items: flex-end; | |
| } | |
| .samples-row { | |
| display: flex; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| } | |
| .sample-thumb { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 6px; | |
| background: var(--surface-sunken); | |
| border: 1px solid var(--rule); | |
| border-radius: var(--radius-sm); | |
| padding: 6px; | |
| cursor: pointer; | |
| font-family: var(--font-mono); | |
| font-size: 0.68rem; | |
| color: var(--muted); | |
| } | |
| .sample-thumb:hover:not(:disabled) { | |
| border-color: var(--accent); | |
| color: var(--ink); | |
| } | |
| .sample-thumb:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .sample-thumb img { | |
| width: 64px; | |
| height: 64px; | |
| object-fit: cover; | |
| border-radius: 4px; | |
| } | |
| .primary-btn, | |
| .btn-secondary, | |
| .upload-btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| font-family: var(--font-body); | |
| font-weight: 500; | |
| font-size: 0.85rem; | |
| padding: 10px 18px; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| text-decoration: none; | |
| border: 1px solid transparent; | |
| width: fit-content; | |
| } | |
| .primary-btn { | |
| background: var(--ink); | |
| color: var(--paper); | |
| align-self: flex-start; | |
| } | |
| .primary-btn:hover:not(:disabled) { | |
| background: var(--accent); | |
| } | |
| .primary-btn:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| .btn-secondary, | |
| .upload-btn { | |
| background: var(--surface); | |
| border-color: var(--rule); | |
| color: var(--ink); | |
| } | |
| .btn-secondary:hover, | |
| .upload-btn:hover { | |
| border-color: var(--accent); | |
| color: var(--accent); | |
| } | |
| .download-btn { | |
| margin-top: 12px; | |
| } | |
| .exclude-panel { | |
| border: 1px solid var(--rule); | |
| border-radius: var(--radius-sm); | |
| padding: 10px 14px; | |
| background: var(--surface-sunken); | |
| margin-top: 16px; | |
| } | |
| .exclude-panel summary { | |
| cursor: pointer; | |
| font-family: var(--font-mono); | |
| font-size: 0.76rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| color: var(--muted); | |
| } | |
| .select-buttons { | |
| display: flex; | |
| gap: 8px; | |
| margin-top: 10px; | |
| } | |
| .btn-small { | |
| padding: 5px 12px; | |
| font-size: 0.78rem; | |
| } | |
| .exclude-columns { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); | |
| gap: 16px; | |
| margin-top: 10px; | |
| max-height: 240px; | |
| overflow-y: auto; | |
| } | |
| .exclude-heading { | |
| font-family: var(--font-mono); | |
| font-size: 0.68rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--muted); | |
| margin: 8px 0 4px; | |
| } | |
| .checkbox-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-family: var(--font-mono); | |
| font-size: 0.78rem; | |
| padding: 2px 0; | |
| } | |
| .error-banner { | |
| background: var(--danger-soft); | |
| color: var(--danger); | |
| padding: 10px 14px; | |
| border-radius: var(--radius-sm); | |
| font-size: 0.85rem; | |
| } | |
| /* ---------------------------------------------------------------- legend -- */ | |
| .legend { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| margin: 4px 0 12px; | |
| } | |
| .legend-chip { | |
| font-family: var(--font-mono); | |
| font-size: 0.66rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.03em; | |
| color: #fff; | |
| padding: 3px 8px; | |
| border-radius: 2px; | |
| } | |
| /* ---------------------------------------------------------------- results - */ | |
| .results-row { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 16px; | |
| } | |
| .result-image { | |
| display: block; | |
| max-width: 100%; | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--rule); | |
| } | |
| .text-input { | |
| width: 100%; | |
| min-height: 200px; | |
| resize: vertical; | |
| margin-bottom: 14px; | |
| } | |
| .highlighted-text { | |
| white-space: pre-wrap; | |
| line-height: 2; | |
| font-size: 0.95rem; | |
| } | |
| .output-text { | |
| white-space: pre-wrap; | |
| line-height: 1.8; | |
| font-size: 0.95rem; | |
| background: var(--surface-sunken); | |
| border: 1px solid var(--rule); | |
| border-radius: var(--radius-sm); | |
| padding: 12px; | |
| } | |
| .action-hint { | |
| margin-top: 10px; | |
| } | |
| .controls-row .primary-btn { | |
| align-self: flex-end; | |
| } | |
| .pii-mark { | |
| display: inline; | |
| color: var(--ink); | |
| border: 1.5px solid; | |
| border-radius: 6px; | |
| padding: 1px 6px; | |
| margin: 0 1px; | |
| white-space: pre-wrap; | |
| } | |
| .pii-tag { | |
| font-family: var(--font-mono); | |
| font-size: 0.62rem; | |
| font-weight: 700; | |
| letter-spacing: 0.01em; | |
| margin-left: 3px; | |
| white-space: nowrap; | |
| } | |
| .table-scroll { | |
| overflow-x: auto; | |
| } | |
| .entity-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-family: var(--font-mono); | |
| font-size: 0.78rem; | |
| } | |
| .entity-table th { | |
| text-align: left; | |
| padding: 8px 10px; | |
| border-bottom: 1px solid var(--rule); | |
| color: var(--muted); | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| font-size: 0.66rem; | |
| letter-spacing: 0.05em; | |
| white-space: nowrap; | |
| } | |
| .entity-table td { | |
| padding: 7px 10px; | |
| border-bottom: 1px solid var(--rule); | |
| white-space: nowrap; | |
| } | |
| .l1-dot { | |
| display: inline-block; | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| margin-right: 6px; | |
| } | |