/* Golda — operator control platform */ :root { --font-sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Cascadia Code", "Consolas", monospace; /* surfaces */ --bg-app: #F3F4F6; --bg-canvas: #FFFFFF; --bg-sunken: #F7F8FA; --bg-hover: #F0F2F5; --bg-selected: #E5F0FA; /* text */ --text-primary: #1A1B1F; --text-secondary: #4B5563; --text-tertiary: #6B7280; --text-muted: #8A8886; --text-on-accent: #FFFFFF; /* lines */ --border: #E4E6EB; --border-strong: #D0D4DA; --border-subtle: #EDEEF1; /* brand */ --accent: #0067C5; --accent-hover: #005AAB; --accent-active: #004F94; --accent-bg: #E8F1FB; --accent-bg-strong: #D2E3F7; /* status colors */ --status-new: #0067C5; --status-progress: #6B2D8B; --status-wait-customer: #B45309; --status-wait-carrier: #D83B01; --status-wait-internal: #4DA3FF; --status-blocked: #C4314B; --status-resolved: #107C10; --status-closed: #6B7280; --warning: #FFB900; --danger: #C4314B; --success: #107C10; /* shadows */ --shadow-card: 0 1px 0 rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); --shadow-pop: 0 8px 24px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06); --radius-sm: 4px; --radius: 6px; --radius-md: 8px; --radius-lg: 12px; /* extra accent tints */ --accent-bg-subtle: #F4F8FD; --accent-border: #B7D4F0; --danger-bg-soft: #FCEBEE; --warn-text: #B45309; /* sidebar — a dark surface even in the light theme */ --sidebar-bg: #0F1419; --sidebar-fg: #D4D6DB; --sidebar-fg-strong: #F5F6F8; --sidebar-fg-hover: #F2F4F7; --sidebar-fg-muted: #7C8593; --sidebar-section-fg: #6B7280; --sidebar-border: #1F242C; --sidebar-nav-fg: #C9CDD3; --sidebar-nav-hover-bg: #1A2028; --sidebar-nav-active-bg: #1F2A36; --sidebar-icon: #8A93A0; --sidebar-accent: #4DA3FF; --sidebar-count-bg: #2A3441; --brand-gradient: linear-gradient(135deg, #0067C5 0%, #4DA3FF 100%); /* raised-surface gradient + chrome */ --card-grad-top: #FBFCFE; --scrollbar-thumb: #D0D4DA; --scrollbar-thumb-hover: #B0B5BD; --overlay: rgba(15, 20, 25, 0.4); --shadow-modal: 0 24px 60px rgba(0,0,0,0.25); /* status — the shared color language, as fg/bg/border triples (badges, dots, banners) */ --st-info-fg: #0058A8; --st-info-bg: #E8F1FB; --st-info-border: #C9DEF3; --st-progress-fg: #5B2078; --st-progress-bg: #F1E7F6; --st-progress-border: #DCC8E6; --st-warn-fg: #92400E; --st-warn-bg: #FEF3C7; --st-warn-border: #FCD78A; --st-carrier-fg: #9A2900; --st-carrier-bg: #FEE6D4; --st-carrier-border: #FBC79C; --st-internal-fg: #1B5DAA; --st-internal-bg: #E1EEFA; --st-internal-border: #B7D4F0; --st-danger-fg: #911B2D; --st-danger-bg: #FBE3E7; --st-danger-border: #F1B9C2; --st-success-fg: #0B5E0B; --st-success-bg: #E0F1E0; --st-success-border: #B6DDB6; --st-muted-fg: #4B5563; --st-muted-bg: #EEF0F3; --st-muted-border: #D6DAE0; } /* ------------ DARK THEME ------------ */ /* Overrides only the token values; every rule below already reads these vars, so the whole UI re-themes from here. Toggled by `.dark` on (see app.jsx + index.ts). */ html.dark { /* surfaces */ --bg-app: #0C0F14; --bg-canvas: #161A21; --bg-sunken: #1B2027; --bg-hover: #222831; --bg-selected: #18293B; /* text */ --text-primary: #E7E9ED; --text-secondary: #B2B8C2; --text-tertiary: #8A919C; --text-muted: #6E747E; --text-on-accent: #FFFFFF; /* lines */ --border: #2A2F39; --border-strong: #3A414D; --border-subtle: #21262F; /* brand */ --accent: #3D8BEF; --accent-hover: #5AA0F5; --accent-active: #2E7AD9; --accent-bg: #17273C; --accent-bg-strong: #1F3A58; --accent-bg-subtle: #131C29; --accent-border: #335E8C; /* semantic singles */ --warning: #FFC53D; --danger: #F0556E; --success: #3FB950; --warn-text: #E0973A; --danger-bg-soft: rgba(240,85,110,.14); /* raised-surface gradient + chrome */ --card-grad-top: #1A1F28; --scrollbar-thumb: #3A414D; --scrollbar-thumb-hover: #4A5160; --overlay: rgba(0,0,0,.6); --shadow-card: 0 1px 0 rgba(0,0,0,.20), 0 1px 3px rgba(0,0,0,.30); --shadow-pop: 0 8px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30); --shadow-modal: 0 24px 60px rgba(0,0,0,.55); /* status — tinted fills + bright text for dark surfaces (doc §2.2 dark mappings) */ --st-info-fg: #6FB2FF; --st-info-bg: rgba(61,139,239,.15); --st-info-border: rgba(61,139,239,.32); --st-progress-fg: #C99BE6; --st-progress-bg: rgba(154,86,200,.16); --st-progress-border: rgba(154,86,200,.34); --st-warn-fg: #F0B45E; --st-warn-bg: rgba(217,138,11,.16); --st-warn-border: rgba(217,138,11,.34); --st-carrier-fg: #F0945E; --st-carrier-bg: rgba(216,80,1,.18); --st-carrier-border: rgba(216,80,1,.36); --st-internal-fg: #8FC2FF; --st-internal-bg: rgba(77,163,255,.15); --st-internal-border: rgba(77,163,255,.32); --st-danger-fg: #F08597; --st-danger-bg: rgba(196,49,75,.20); --st-danger-border: rgba(196,49,75,.40); --st-success-fg: #5FD06A; --st-success-bg: rgba(16,124,16,.22); --st-success-border: rgba(63,185,80,.36); --st-muted-fg: #9AA1AC; --st-muted-bg: rgba(138,138,134,.16); --st-muted-border: rgba(138,138,134,.30); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: 13px; line-height: 1.45; color: var(--text-primary); background: var(--bg-app); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; font-size: inherit; color: var(--text-primary); background-color: var(--bg-canvas); } /* ------------ APP SHELL ------------ */ .app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; } .sidebar { background: var(--sidebar-bg); color: var(--sidebar-fg); display: flex; flex-direction: column; border-right: 1px solid var(--sidebar-border); position: sticky; top: 0; height: 100vh; } .sidebar-brand { padding: 16px 18px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--sidebar-border); } .brand-mark { width: 28px; height: 28px; border-radius: 6px; background: var(--brand-gradient); display: grid; place-items: center; color: var(--text-on-accent); font-weight: 700; font-size: 14px; letter-spacing: -.02em; } .brand-name { font-weight: 600; color: var(--sidebar-fg-strong); font-size: 14px; letter-spacing: -.01em; } .brand-sub { font-size: 11px; color: var(--sidebar-fg-muted); margin-left: auto; font-variant-numeric: tabular-nums; } .sidebar-section { padding: 14px 12px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sidebar-section-fg); } .sidebar nav { padding: 4px 8px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 1px 0; border-radius: 5px; font-size: 13px; color: var(--sidebar-nav-fg); cursor: pointer; user-select: none; border: 0; background: transparent; width: 100%; text-align: left; } .nav-item:hover { background: var(--sidebar-nav-hover-bg); color: var(--sidebar-fg-hover); } .nav-item.active { background: var(--sidebar-nav-active-bg); color: var(--text-on-accent); } .nav-item .nav-icon { width: 16px; height: 16px; display: grid; place-items: center; color: var(--sidebar-icon); } .nav-item.active .nav-icon { color: var(--sidebar-accent); } .nav-item .nav-count { margin-left: auto; font-size: 11px; background: var(--sidebar-count-bg); color: var(--sidebar-nav-fg); padding: 1px 6px; border-radius: 8px; font-variant-numeric: tabular-nums; } .nav-item.active .nav-count { background: var(--accent); color: var(--text-on-accent); } .sidebar-footer { margin-top: auto; padding: 12px; border-top: 1px solid var(--sidebar-border); display: flex; align-items: center; gap: 10px; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-bg-strong); color: var(--accent); display: grid; place-items: center; font-weight: 600; font-size: 12px; } .user-name { font-size: 12.5px; color: var(--sidebar-fg-hover); font-weight: 500; } .user-role { font-size: 11px; color: var(--sidebar-fg-muted); } .main { display: flex; flex-direction: column; min-width: 0; } .topbar { background: var(--bg-canvas); border-bottom: 1px solid var(--border); padding: 0 24px; height: 52px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 10; } .topbar h1 { font-size: 15px; font-weight: 600; margin: 0; letter-spacing: -.01em; } .topbar .topbar-sub { color: var(--text-tertiary); font-size: 12.5px; } .search { margin-left: auto; display: flex; align-items: center; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; width: 280px; gap: 8px; color: var(--text-tertiary); } .search input { border: 0; background: transparent; outline: none; flex: 1; font-size: 12.5px; color: var(--text-primary); } .topbar-actions { display: flex; gap: 6px; align-items: center; } .icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: transparent; border-radius: 5px; color: var(--text-secondary); } .icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .icon-btn.has-badge { position: relative; } .icon-btn .dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); border: 2px solid var(--bg-canvas); } .content { flex: 1; padding: 20px 24px 40px; min-width: 0; } /* ------------ PRIMITIVES ------------ */ .card { background: var(--bg-canvas); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .card-header { padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 12px; } .card-title { font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; margin: 0; } .card-sub { color: var(--text-tertiary); font-size: 12px; } .card-body { padding: 16px 18px; } /* Buttons for features not enabled in this preview are disabled + dimmed (with a tooltip). */ .btn:disabled, .icon-btn:disabled, .chip:disabled, button:disabled { opacity: .42; cursor: not-allowed; } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12.5px; font-weight: 500; border-radius: 5px; border: 1px solid var(--border-strong); background: var(--bg-canvas); color: var(--text-primary); line-height: 1.2; white-space: nowrap; } .btn:hover { background: var(--bg-hover); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-danger { background: var(--bg-canvas); border-color: var(--border-strong); color: var(--danger); } .btn-danger:hover { background: var(--danger-bg-soft); } .btn-ghost { border-color: transparent; background: transparent; } .btn-ghost:hover { background: var(--bg-hover); } .btn-sm { padding: 4px 9px; font-size: 12px; } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; font-size: 11px; font-weight: 600; border-radius: 10px; letter-spacing: .01em; line-height: 1.4; white-space: nowrap; border: 1px solid transparent; } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .b-new { color: var(--st-info-fg); background: var(--st-info-bg); border-color: var(--st-info-border); } .b-progress { color: var(--st-progress-fg); background: var(--st-progress-bg); border-color: var(--st-progress-border); } .b-wait-customer { color: var(--st-warn-fg); background: var(--st-warn-bg); border-color: var(--st-warn-border); } .b-wait-carrier { color: var(--st-carrier-fg); background: var(--st-carrier-bg); border-color: var(--st-carrier-border); } .b-wait-internal { color: var(--st-internal-fg); background: var(--st-internal-bg); border-color: var(--st-internal-border); } .b-blocked { color: var(--st-danger-fg); background: var(--st-danger-bg); border-color: var(--st-danger-border); } .b-resolved { color: var(--st-success-fg); background: var(--st-success-bg); border-color: var(--st-success-border); } .b-closed { color: var(--st-muted-fg); background: var(--st-muted-bg); border-color: var(--st-muted-border); } .b-critical { color: var(--st-danger-fg); background: var(--st-danger-bg); border-color: var(--st-danger-border); } .b-high { color: var(--st-carrier-fg); background: var(--st-carrier-bg); border-color: var(--st-carrier-border); } .b-normal { color: var(--st-info-fg); background: var(--st-info-bg); border-color: var(--st-info-border); } .b-low { color: var(--st-muted-fg); background: var(--st-muted-bg); border-color: var(--st-muted-border); } .b-soft { color: var(--text-secondary); background: var(--bg-sunken); border-color: var(--border); } .tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font-size: 11px; font-weight: 500; color: var(--text-secondary); background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 4px; font-variant-numeric: tabular-nums; } /* ------------ TABLE ------------ */ .tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; } .tbl thead th { text-align: left; font-weight: 600; color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 12px; background: var(--bg-sunken); border-bottom: 1px solid var(--border); position: sticky; top: 0; } .tbl tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; } .tbl tbody tr.sub td { background: var(--bg-sunken); color: var(--text-tertiary); padding-top: 0; padding-bottom: 10px; font-size: 11.5px; border-bottom: 1px solid var(--border); } .tbl tbody tr:hover td:not(.sub-cell) { background: var(--bg-hover); cursor: pointer; } .tbl tbody tr.row-with-sub:hover + tr.sub td { background: var(--bg-hover); } .tbl .mono { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; } .tbl .lane { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); } .tbl .num { font-variant-numeric: tabular-nums; } .col-shrink { width: 1%; white-space: nowrap; } .muted { color: var(--text-tertiary); } .danger { color: var(--danger); } .success { color: var(--success); } .warn { color: var(--warn-text); } /* ------------ FILTERS BAR ------------ */ .filterbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-canvas); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font-size: 12px; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg-canvas); color: var(--text-secondary); cursor: pointer; } .chip:hover { background: var(--bg-hover); } .chip.active { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent); } .chip .chip-count { font-variant-numeric: tabular-nums; font-size: 11px; padding: 0 5px; background: var(--bg-sunken); border-radius: 8px; color: var(--text-tertiary); } .chip.active .chip-count { background: var(--bg-canvas); color: var(--accent); } /* ------------ QUICK-REPLY CARDS ------------ */ .qr-stack { display: flex; flex-direction: column; gap: 10px; } .qr-card { background: var(--bg-canvas); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 12px 14px 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; } .qr-card.urgent { border-left-color: var(--danger); } .qr-card.warn { border-left-color: var(--warning); } .qr-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .qr-title { font-weight: 600; font-size: 13px; margin-top: 4px; } .qr-body { color: var(--text-secondary); font-size: 12.5px; margin-top: 2px; } .qr-actions { display: flex; gap: 6px; } /* ------------ TIMELINE ------------ */ .progress-bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; position: relative; } .step { position: relative; padding: 10px 6px 8px; text-align: center; font-size: 11.5px; border-top: 3px solid var(--border-strong); color: var(--text-tertiary); } .step.done { border-top-color: var(--success); color: var(--text-primary); } .step.current { border-top-color: var(--accent); color: var(--accent); font-weight: 600; } .step.blocked { border-top-color: var(--danger); color: var(--danger); font-weight: 600; } .step .step-name { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } .step .step-date { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; font-variant-numeric: tabular-nums;} .step::before { content: ""; width: 10px; height: 10px; background: var(--bg-canvas); border: 2px solid var(--border-strong); border-radius: 50%; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); } .step.done::before { background: var(--success); border-color: var(--success); } .step.current::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); } .step.blocked::before { background: var(--danger); border-color: var(--danger); } /* ------------ EMAIL TIMELINE ------------ */ .thread { padding: 0; } .email { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-subtle); } .email:last-child { border-bottom: 0; } .email .em-rail { display: flex; flex-direction: column; align-items: center; position: relative; } .email .em-rail::before { content: ""; width: 1px; background: var(--border); position: absolute; top: 26px; bottom: -12px; left: 50%; } .email:last-child .em-rail::before { display: none; } .em-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-sunken); border: 1px solid var(--border-strong); display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--text-secondary); z-index: 1; } .em-dot.golda { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); } .em-dot.vendor { background: var(--st-carrier-bg); border-color: var(--st-carrier-border); color: var(--st-carrier-fg); } .em-dot.customer { background: var(--st-warn-bg); border-color: var(--st-warn-border); color: var(--st-warn-fg); } .em-dot.internal { background: var(--st-progress-bg); border-color: var(--st-progress-border); color: var(--st-progress-fg); } .em-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; } .em-from { font-weight: 600; } .em-time { color: var(--text-tertiary); font-size: 11.5px; font-variant-numeric: tabular-nums;} .em-subject { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; } .em-extract { margin-top: 6px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 5px; padding: 8px 10px; font-size: 12px; } .em-extract-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); font-weight: 600; margin-bottom: 4px; } .em-extract .kv { display: grid; grid-template-columns: 130px 1fr; gap: 4px 10px; } .em-extract .kv .k { color: var(--text-tertiary); } .em-action { margin-top: 6px; font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; } /* ------------ FIELD COMPLETENESS ------------ */ .fields-list { display: flex; flex-direction: column; } .field-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border-subtle); font-size: 12.5px; align-items: center; } .field-row:last-child { border-bottom: 0; } .f-name { color: var(--text-primary); } .f-meta { color: var(--text-tertiary); font-size: 11.5px; } .f-icon { width: 16px; height: 16px; display: grid; place-items: center; } .completeness-bar { height: 6px; background: var(--bg-sunken); border-radius: 999px; overflow: hidden; margin-bottom: 12px; } .completeness-bar .fill { height: 100%; background: var(--success); border-radius: 999px; } /* ------------ NEXT ACTION ------------ */ .action-card { background: linear-gradient(180deg, var(--card-grad-top) 0%, var(--bg-canvas) 100%); border: 1px solid var(--border); border-radius: var(--radius-md); } .action-head { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 10px; } .golda-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-gradient); color: var(--text-on-accent); display: grid; place-items: center; font-weight: 600; font-size: 11px; } .draft { margin: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-canvas); font-size: 12.5px; } .draft .draft-head { border-bottom: 1px solid var(--border-subtle); padding: 8px 12px; background: var(--bg-sunken); } .draft .draft-head .row { display: grid; grid-template-columns: 50px 1fr; gap: 8px; padding: 2px 0; } .draft .draft-head .k { color: var(--text-tertiary); font-size: 11.5px; } .draft .draft-body { padding: 12px; white-space: pre-wrap; font-size: 12.5px; line-height: 1.55; color: var(--text-primary); } .evidence { margin: 0 16px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-sunken); padding: 10px 12px; font-size: 12px; } .evidence-head { display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; color: var(--text-tertiary); margin-bottom: 6px; } .evidence ul { margin: 0; padding-left: 18px; color: var(--text-secondary); } .evidence li { margin: 2px 0; } .guard-strip { display: flex; gap: 6px; margin: 0 16px 12px; flex-wrap: wrap; } .guard-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; font-size: 11.5px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-canvas); font-variant-numeric: tabular-nums; } .guard-chip.pass { color: var(--st-success-fg); background: var(--st-success-bg); border-color: var(--st-success-border); } .guard-chip.warn { color: var(--st-warn-fg); background: var(--st-warn-bg); border-color: var(--st-warn-border); } .guard-chip.fail { color: var(--st-danger-fg); background: var(--st-danger-bg); border-color: var(--st-danger-border); } .action-footer { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--border-subtle); background: var(--bg-sunken); border-radius: 0 0 var(--radius-md) var(--radius-md); } .action-footer .spacer { flex: 1; } .confidence { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); } .confidence .conf-track { width: 80px; height: 5px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; } .confidence .conf-fill { height: 100%; background: var(--accent); } /* ------------ TWO-COLUMN PAGE ------------ */ .split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; } .split-3 { display: grid; grid-template-columns: 360px minmax(0,1fr); gap: 16px; } /* ------------ HEADER METADATA ------------ */ .sho-head { background: var(--bg-canvas); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 16px; } .sho-head .row1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sho-head h2 { font-size: 16px; margin: 0; font-weight: 600; letter-spacing: -.01em; } .sho-head .row2 { margin-top: 10px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; } .sho-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sho-meta .k { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; } .sho-meta .v { font-size: 12.5px; color: var(--text-primary); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} /* ------------ DECISION REVIEW ------------ */ .dec-card { background: var(--bg-canvas); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 14px; box-shadow: var(--shadow-card); } .dec-head { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dec-title { font-weight: 600; font-size: 13px; margin: 0; } .dec-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0; } .dec-left { padding: 14px 16px; border-right: 1px solid var(--border-subtle); } .dec-right { padding: 14px 16px; background: var(--bg-sunken); } .dec-foot { padding: 12px 16px; border-top: 1px solid var(--border-subtle); display: flex; gap: 8px; align-items: center; } /* ------------ GUARD PANEL ------------ */ .guard-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .guard-table th, .guard-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); } .guard-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); font-weight: 600; background: var(--bg-sunken); } .guard-table td.layer-name { font-weight: 600; } .guard-table .reason { color: var(--text-secondary); } .verdict { padding: 14px 16px; border-radius: var(--radius-md); display: flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 600; border: 1px solid; margin-bottom: 14px; } .verdict.hold { background: var(--st-warn-bg); border-color: var(--st-warn-border); color: var(--st-warn-fg); } .verdict.send { background: var(--st-success-bg); border-color: var(--st-success-border); color: var(--st-success-fg); } .verdict.block { background: var(--st-danger-bg); border-color: var(--st-danger-border); color: var(--st-danger-fg); } .verdict .verdict-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-canvas); display: grid; place-items: center; } .verdict .verdict-sub { font-weight: 400; font-size: 12px; opacity: .8; margin-top: 2px; } /* ------------ SOP ------------ */ .lane-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 16px; background: var(--bg-canvas); border-radius: var(--radius-md) var(--radius-md) 0 0; border: 1px solid var(--border); border-bottom: 0; } .lane-tab { padding: 10px 14px; font-size: 12.5px; color: var(--text-secondary); border: 0; background: transparent; border-bottom: 2px solid transparent; margin-bottom: -1px; } .lane-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } .lane-tab:hover { color: var(--text-primary); } .cell-select { border: 1px solid transparent; background: transparent; color: var(--text-primary); padding: 3px 6px; border-radius: 4px; font-size: 12.5px; width: 100%; } .cell-select::placeholder { color: var(--text-tertiary); } .cell-select:hover, .cell-select:focus { border-color: var(--border-strong); background: var(--bg-canvas); outline: none; } .suggest-card { border: 1px solid var(--st-info-border); background: var(--accent-bg-subtle); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; } .suggest-card .sg-title { font-weight: 600; font-size: 13px; } .suggest-card .sg-meta { color: var(--text-tertiary); font-size: 12px; margin-top: 2px; } .suggest-card .sg-scope { display: flex; gap: 4px; margin-top: 8px; } /* ------------ INSIGHTS ------------ */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; } .stat { background: var(--bg-canvas); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; } .stat .stat-label { color: var(--text-tertiary); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .stat .stat-value { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; font-variant-numeric: tabular-nums; } .stat .stat-trend { font-size: 11.5px; color: var(--success); margin-top: 4px; font-variant-numeric: tabular-nums; } .stat .stat-trend.bad { color: var(--danger); } .bar-row { display: grid; grid-template-columns: 130px 1fr 50px; gap: 12px; align-items: center; padding: 6px 0; font-size: 12.5px; } .bar-track { height: 14px; background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: 3px; overflow: hidden; } .bar-fill { height: 100%; background: var(--accent); } .bar-fill.warn { background: var(--warning); } .bar-fill.success { background: var(--success); } .bar-fill.danger { background: var(--danger); } .bar-num { font-variant-numeric: tabular-nums; color: var(--text-secondary); text-align: right; font-size: 12px;} /* ------------ EMPTY/PLACEHOLDER ------------ */ .empty { text-align: center; padding: 60px 24px; color: var(--text-tertiary); } .empty-art { width: 120px; height: 80px; margin: 0 auto 14px; background: repeating-linear-gradient(45deg, var(--bg-app) 0 8px, var(--border) 8px 16px); border: 1px dashed var(--border-strong); border-radius: 8px; } .empty h3 { margin: 0 0 6px; font-size: 14px; color: var(--text-primary); } /* ------------ SECTION HEAD ------------ */ .sec-head { display: flex; align-items: center; gap: 10px; margin: 18px 4px 10px; } .sec-head h2 { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: -.005em; } .sec-head .sec-count { color: var(--text-tertiary); font-size: 12px; font-variant-numeric: tabular-nums; } .sec-head .sec-actions { margin-left: auto; display: flex; gap: 6px; } /* ------------ AI REQUIREMENTS CONCLUSIONS ------------ */ .conclusions-page { display: grid; gap: 16px; } .conclusion-hero { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: stretch; background: var(--bg-canvas); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 24px; } .conclusion-hero .eyebrow { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; } .conclusion-hero h2 { font-size: 24px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 10px; max-width: 760px; } .conclusion-hero p { margin: 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.65; max-width: 820px; } .conclusion-sample { border: 1px solid var(--border); background: var(--bg-sunken); border-radius: var(--radius-md); padding: 18px; display: grid; align-content: center; } .sample-number { font-size: 38px; line-height: 1; font-weight: 700; letter-spacing: -.03em; color: var(--accent); } .sample-label { margin-top: 8px; font-weight: 600; } .sample-meta { margin-top: 6px; color: var(--text-tertiary); font-size: 12.5px; line-height: 1.45; } .conclusion-stats { margin-bottom: 0; } .conclusion-split { align-items: start; } .conclusion-rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .conclusion-rule h3 { margin: 0 0 8px; font-size: 13.5px; } .conclusion-rule p, .conclusion-final p { margin: 0; color: var(--text-secondary); line-height: 1.6; } .conclusion-card { margin-bottom: 14px; } .conclusion-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); } .conclusion-row:last-child { border-bottom: 0; padding-bottom: 0; } .conclusion-row strong { display: block; font-size: 12.5px; margin-bottom: 3px; } .conclusion-row span { display: block; color: var(--text-tertiary); font-size: 12px; line-height: 1.4; } .conclusion-row b { color: var(--accent); font-variant-numeric: tabular-nums; } .field-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; } .mode-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); } .mode-row:last-child { border-bottom: 0; } .mode-row span { color: var(--accent); font-weight: 700; } .mode-row p { margin: 0; color: var(--text-secondary); line-height: 1.55; } .guard-list { margin: 0; padding-left: 18px; color: var(--text-secondary); line-height: 1.65; } .guard-list li { margin: 3px 0; } .banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--st-danger-bg); border: 1px solid var(--st-danger-border); color: var(--st-danger-fg); border-radius: var(--radius-md); font-size: 12.5px; font-weight: 500; margin-bottom: 12px; } .banner.warn { background: var(--st-warn-bg); border-color: var(--st-warn-border); color: var(--st-warn-fg); } .banner.info { background: var(--accent-bg); border-color: var(--st-info-border); color: var(--accent); } .kbd { display: inline-block; font-family: var(--font-mono); font-size: 11px; background: var(--bg-sunken); border: 1px solid var(--border-strong); border-radius: 3px; padding: 1px 5px; color: var(--text-secondary); } /* ------------ MODAL ------------ */ .modal-overlay { position: fixed; inset: 0; background: var(--overlay); display: grid; place-items: center; z-index: 100; padding: 24px; overflow: auto; } .modal { background: var(--bg-canvas); border-radius: var(--radius-lg); width: min(880px, 100%); box-shadow: var(--shadow-modal); max-height: 90vh; display: flex; flex-direction: column; } .modal-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .modal-head h2 { font-size: 15px; font-weight: 600; margin: 0; } .modal-body { padding: 18px 20px; overflow: auto; } .modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; } /* ------------ Misc ------------ */ .divider { height: 1px; background: var(--border-subtle); margin: 12px 0; } .row { display: flex; align-items: center; gap: 8px; } .spacer { flex: 1; } .right { margin-left: auto; } /* Scrollbar polish */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 6px; border: 2px solid var(--bg-canvas); } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ------------ EXPLICIT EMAIL DECISION COPY ------------ */ .decision-copy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .decision-copy-grid.compact { grid-template-columns: repeat(3, minmax(160px, 1fr)); margin-top: 10px; } .decision-copy-grid > div { border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--bg-sunken); padding: 10px 12px; } .decision-copy-grid p { margin: 4px 0 0; color: var(--text-primary); line-height: 1.45; font-size: 12.5px; } .copy-k { display: block; color: var(--text-tertiary); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .next-action-label { display: grid; gap: 6px; margin-top: 12px; color: var(--text-secondary); font-size: 12px; font-weight: 600; } .next-action-input { width: 100%; resize: vertical; min-height: 42px; border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; background: var(--bg-canvas); color: var(--text-primary); font-size: 12.5px; font-weight: 400; } .next-action-input:focus { outline: 2px solid var(--accent-border); border-color: var(--accent); } .decision-actions { min-width: 190px; flex-direction: column; align-items: stretch; } .qr-card { align-items: stretch; } @media (max-width: 1100px) { .decision-copy-grid, .decision-copy-grid.compact { grid-template-columns: 1fr; } .qr-card { grid-template-columns: 1fr; } .decision-actions { min-width: 0; flex-direction: row; flex-wrap: wrap; } }