/* ───────────────────────────────────────────────────────────────────────── APE — base styles. Theme tokens live as CSS custom properties on :root; themes.jsx swaps the [data-theme] attribute on which re-points the tokens (light / dark / studio). All component styles read from tokens so the same DOM works across all three variations. ───────────────────────────────────────────────────────────────────────── */ :root, [data-theme="editorial"] { --bg: #f6f3ed; --bg-2: #ede8dc; --surface: #fbf8f2; --surface-2: #f1ebe0; --ink: #1a1814; --ink-2: #46423a; --ink-3: #7a7367; --ink-4: #b4ac9d; --line: #d9d2c2; --line-2: #e8e2d3; --accent: oklch(48% 0.07 240); --accent-soft: oklch(94% 0.02 240); --critical: oklch(48% 0.13 25); --major: oklch(60% 0.13 50); --minor: oklch(60% 0.10 95); --ok: oklch(50% 0.10 150); --font-sans: "Inter", system-ui, sans-serif; --font-serif: "Newsreader", Georgia, serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --rad: 4px; --rad-lg: 8px; --shadow: 0 1px 0 rgba(0,0,0,0.04), 0 1px 3px rgba(34,28,16,0.04); --shadow-lg: 0 10px 32px rgba(34,28,16,0.10), 0 2px 6px rgba(34,28,16,0.06); --display-font: var(--font-serif); --display-weight: 500; --display-style: normal; } [data-theme="lab"] { --bg: #0c0d10; --bg-2: #15171c; --surface: #15171c; --surface-2: #1d2027; --ink: #e9ecf1; --ink-2: #b6bcc7; --ink-3: #7c8493; --ink-4: #4d5460; --line: #262932; --line-2: #1c1f26; --accent: oklch(72% 0.13 200); --accent-soft: oklch(28% 0.05 200); --critical: oklch(68% 0.20 25); --major: oklch(74% 0.17 60); --minor: oklch(76% 0.13 95); --ok: oklch(70% 0.15 155); --rad: 3px; --rad-lg: 6px; --shadow: 0 0 0 1px rgba(255,255,255,0.02); --shadow-lg: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04); --display-font: var(--font-mono); --display-weight: 500; --display-style: normal; } [data-theme="studio"] { --bg: #ffffff; --bg-2: #f6f7f9; --surface: #ffffff; --surface-2: #f4f5f7; --ink: #0f1115; --ink-2: #41464f; --ink-3: #6c727c; --ink-4: #b4b8c0; --line: #e4e6ea; --line-2: #eef0f3; --accent: oklch(50% 0.18 260); --accent-soft: oklch(96% 0.02 260); --critical: oklch(58% 0.20 25); --major: oklch(68% 0.15 60); --minor: oklch(72% 0.12 95); --ok: oklch(60% 0.15 155); --rad: 10px; --rad-lg: 16px; --shadow: 0 1px 2px rgba(15,17,21,0.04); --shadow-lg: 0 20px 50px rgba(15,17,21,0.10), 0 4px 12px rgba(15,17,21,0.05); --display-font: var(--font-sans); --display-weight: 600; --display-style: normal; } [data-density="compact"] { --pad: 10px; --pad-2: 14px; --pad-3: 18px; --row-h: 28px; } [data-density="regular"] { --pad: 14px; --pad-2: 20px; --pad-3: 28px; --row-h: 34px; } [data-density="roomy"] { --pad: 20px; --pad-2: 28px; --pad-3: 40px; --row-h: 42px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button { font: inherit; color: inherit; } input, textarea, select { font: inherit; color: inherit; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } ::selection { background: var(--accent); color: var(--bg); } /* ── App shell ───────────────────────────────────────────────────────────── */ .app { min-height: 100vh; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px var(--pad-3); border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 10; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--display-font); font-style: var(--display-style); font-weight: var(--display-weight); font-size: 18px; line-height: 1.15; letter-spacing: -0.01em; } .brand > span { display: inline-block; white-space: nowrap; } .btn { white-space: nowrap; } .brand-mark { width: 26px; height: 26px; border: 1.25px solid var(--ink); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: 0; color: var(--ink); border-radius: 3px; } [data-theme="studio"] .brand-mark { border-radius: 7px; } [data-theme="lab"] .brand-mark { border-color: var(--accent); color: var(--accent); } .topbar-meta { display: flex; align-items: center; gap: 18px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); } .topbar-meta .user { color: var(--ink-2); } .topbar-meta .logout { background: none; border: 0; padding: 2px 6px; cursor: pointer; color: var(--ink-3); border: 1px solid var(--line); border-radius: var(--rad); } .topbar-meta .logout:hover { color: var(--ink); border-color: var(--ink-3); } .main { flex: 1; padding: var(--pad-3); max-width: 1400px; width: 100%; margin: 0 auto; } /* ── Login ───────────────────────────────────────────────────────────────── */ .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px; background: var(--bg); } .login-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-lg); padding: var(--pad-3); box-shadow: var(--shadow-lg); } .login-card .brand { font-size: 20px; margin-bottom: 10px; line-height: 1.2; } .login-card .brand-mark { width: 30px; height: 30px; font-size: 12px; } .login-card .tagline { color: var(--ink-3); font-size: 12px; margin-bottom: var(--pad-3); font-family: var(--font-mono); letter-spacing: 0; line-height: 1.5; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 500; } .field input { background: var(--bg); border: 1px solid var(--line); border-radius: var(--rad); padding: 10px 12px; color: var(--ink); transition: border-color 0.12s; } .field input:focus { outline: none; border-color: var(--accent); } .btn { appearance: none; border: 0; cursor: pointer; padding: 10px 16px; background: var(--ink); color: var(--bg); border-radius: var(--rad); font-weight: 500; font-size: 13px; transition: opacity 0.12s; } .btn:hover { opacity: 0.88; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn.secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn.secondary:hover { border-color: var(--ink-3); opacity: 1; } .btn.accent { background: var(--accent); color: white; } .btn.danger { background: transparent; color: var(--critical); border: 1px solid var(--critical); } .btn.sm { padding: 6px 10px; font-size: 12px; } .btn.lg { padding: 14px 22px; font-size: 14px; } .btn.block { width: 100%; } .login-error { color: var(--critical); font-size: 12px; margin-top: 8px; font-family: var(--font-mono); } .login-footnote { margin-top: var(--pad-3); padding-top: var(--pad); border-top: 1px dashed var(--line); font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); line-height: 1.6; } /* ── Dashboard ───────────────────────────────────────────────────────────── */ .page-h { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--pad-3); padding-bottom: var(--pad); border-bottom: 1px solid var(--line); } .page-title { font-family: var(--display-font); font-style: var(--display-style); font-weight: var(--display-weight); font-size: 32px; line-height: 1.1; letter-spacing: -0.015em; margin: 0; } .page-sub { color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; margin-top: 4px; } .page-actions { display: flex; gap: 10px; align-items: center; } .history-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-lg); overflow: hidden; box-shadow: var(--shadow); } .history-table th, .history-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line-2); font-size: 13px; } .history-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 500; background: var(--surface-2); border-bottom: 1px solid var(--line); } .history-table tr:last-child td { border-bottom: 0; } .history-table tr.clickable { cursor: pointer; } .history-table tr.clickable:hover { background: var(--surface-2); } .history-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .history-table .qs-col { color: var(--ink-2); font-weight: 500; } .empty { padding: var(--pad-3); text-align: center; color: var(--ink-3); font-family: var(--font-mono); font-size: 13px; border: 1px dashed var(--line); border-radius: var(--rad-lg); } /* ── Upload ──────────────────────────────────────────────────────────────── */ .upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad-2); margin-bottom: var(--pad-2); } @media (max-width: 860px) { .upload-grid { grid-template-columns: 1fr; } } .dropzone { background: var(--surface); border: 1.5px dashed var(--line); border-radius: var(--rad-lg); padding: var(--pad-3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 200px; transition: border-color 0.12s, background 0.12s; cursor: pointer; position: relative; } .dropzone:hover, .dropzone.hover { border-color: var(--accent); background: var(--accent-soft); } .dropzone.filled { border-style: solid; border-color: var(--line); cursor: default; align-items: flex-start; text-align: left; } .dropzone-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); position: absolute; top: 12px; left: 16px; } .dropzone-hint { color: var(--ink-3); font-size: 12px; font-family: var(--font-mono); } .dropzone-icon { width: 40px; height: 40px; border: 1.25px solid var(--ink-3); border-radius: 50%; display: grid; place-items: center; color: var(--ink-3); } [data-theme="studio"] .dropzone-icon { border-radius: 12px; } .file-card { width: 100%; margin-top: 24px; } .file-card .filename { font-weight: 500; word-break: break-all; line-height: 1.3; margin-bottom: 2px; } .file-card .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); display: flex; gap: 12px; flex-wrap: wrap; } .file-card .preview { margin-top: 12px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--rad); font-size: 12px; color: var(--ink-2); max-height: 120px; overflow: hidden; position: relative; font-family: var(--font-mono); line-height: 1.5; } .file-card .preview::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, var(--bg)); } .file-card .clear { position: absolute; top: 10px; right: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-3); cursor: pointer; width: 24px; height: 24px; border-radius: var(--rad); display: grid; place-items: center; font-size: 14px; } .file-card .clear:hover { color: var(--critical); border-color: var(--critical); } .advanced { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-lg); padding: var(--pad-2); margin-bottom: var(--pad-2); } .advanced summary { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink-2); } .advanced summary::-webkit-details-marker { display: none; } .advanced summary::before { content: '+'; display: inline-block; width: 14px; font-family: var(--font-mono); color: var(--ink-3); } .advanced[open] summary::before { content: '\2212'; } .advanced-body { margin-top: var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad); } @media (max-width: 760px) { .advanced-body { grid-template-columns: 1fr; } } .advanced .field { margin-bottom: 0; } .run-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: var(--pad-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-lg); } .run-row .summary { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); display: flex; gap: 16px; flex-wrap: wrap; } .run-row .summary b { color: var(--ink); font-weight: 500; } /* ── Processing ──────────────────────────────────────────────────────────── */ .proc-wrap { display: grid; gap: var(--pad-2); max-width: 720px; margin: 60px auto; } .proc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-lg); padding: var(--pad-3); box-shadow: var(--shadow); } .proc-title { font-family: var(--display-font); font-weight: var(--display-weight); font-size: 22px; margin: 0 0 4px; letter-spacing: -0.01em; } .proc-sub { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); } .proc-steps { margin-top: var(--pad-2); display: flex; flex-direction: column; gap: 10px; } .proc-step { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--rad); background: var(--bg); } .proc-step .dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ink-4); margin-top: 3px; flex-shrink: 0; position: relative; } .proc-step.active .dot { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 30%, transparent 32%); animation: pulse 1.4s ease-in-out infinite; } .proc-step.done .dot { border-color: var(--ok); background: var(--ok); } .proc-step.done .dot::after { content: ''; position: absolute; inset: 2px; background: url("data:image/svg+xml;utf8,") center/contain no-repeat; } .proc-step .step-body { flex: 1; } .proc-step .step-name { font-weight: 500; color: var(--ink); } .proc-step .step-detail { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 2px; } @keyframes pulse { 50% { opacity: 0.4; } } .proc-log { margin-top: var(--pad-2); background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--rad); padding: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); max-height: 160px; overflow-y: auto; line-height: 1.7; } .proc-log .log-time { color: var(--ink-4); margin-right: 8px; } /* ── Results ─────────────────────────────────────────────────────────────── */ .results-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--pad-2); margin-bottom: var(--pad-2); } .results-h .meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; } .results-h .meta b { color: var(--ink-2); font-weight: 500; } .score-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--pad-2); margin-bottom: var(--pad-2); } @media (max-width: 860px) { .score-grid { grid-template-columns: 1fr; } } .score-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-lg); padding: var(--pad-2); box-shadow: var(--shadow); } .score-card .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 12px; font-weight: 500; } .score-big { font-family: var(--display-font); font-weight: var(--display-weight); font-size: 64px; line-height: 1; letter-spacing: -0.025em; color: var(--ink); font-variant-numeric: tabular-nums; } [data-theme="lab"] .score-big { color: var(--accent); } .score-big .pct { font-size: 28px; color: var(--ink-3); margin-left: 4px; vertical-align: top; } .score-band { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .score-bar { margin-top: 6px; height: 6px; background: var(--bg-2); border-radius: 3px; overflow: hidden; position: relative; } .score-bar .fill { height: 100%; background: var(--ok); transition: width 0.5s; } .score-bar .fill.warn { background: var(--major); } .score-bar .fill.bad { background: var(--critical); } .sev-list { display: flex; flex-direction: column; gap: 8px; } .sev-row { display: grid; grid-template-columns: 80px 1fr 36px; align-items: center; gap: 10px; font-size: 13px; } .sev-row .lbl { font-family: var(--font-mono); font-size: 11px; } .sev-row .lbl .tag { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 1px; } .sev-row .count { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); } .sev-bar { height: 4px; background: var(--bg-2); border-radius: 2px; overflow: hidden; } .sev-bar .fill { height: 100%; } .sev-bar .fill.critical { background: var(--critical); } .sev-bar .fill.major { background: var(--major); } .sev-bar .fill.minor { background: var(--minor); } .tag-critical { color: var(--critical); } .tag-major { color: var(--major); } .tag-minor { color: var(--minor); } .tag-critical .tag, .tag-critical.tag { background: var(--critical); } .tag-major .tag, .tag-major.tag { background: var(--major); } .tag-minor .tag, .tag-minor.tag { background: var(--minor); } .dims-grid { display: grid; grid-template-columns: 1fr; gap: 8px; } .dim-row { display: grid; grid-template-columns: 110px 1fr 28px; gap: 10px; align-items: center; font-size: 13px; } .dim-row .lbl { color: var(--ink-2); } .dim-row .count { font-family: var(--font-mono); text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; } .dim-bar { height: 4px; background: var(--bg-2); border-radius: 2px; overflow: hidden; } .dim-bar .fill { height: 100%; background: var(--accent); opacity: 0.8; } .verdict { margin-top: var(--pad-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-lg); padding: var(--pad-2) var(--pad-3); box-shadow: var(--shadow); } .verdict-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 10px; font-weight: 500; } .verdict p { font-family: var(--display-font); font-style: var(--display-style); font-size: 17px; line-height: 1.5; margin: 0; color: var(--ink); text-wrap: pretty; } [data-theme="lab"] .verdict p { font-style: normal; } /* ── Tabs ────────────────────────────────────────────────────────────────── */ .tabs { display: flex; gap: 0; margin: var(--pad-2) 0 0; border-bottom: 1px solid var(--line); } .tabs button { appearance: none; background: transparent; border: 0; padding: 12px 18px; cursor: pointer; font-weight: 500; color: var(--ink-3); position: relative; font-size: 13px; white-space: nowrap; } .tabs button:hover { color: var(--ink); } .tabs button.active { color: var(--ink); } .tabs button.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); } [data-theme="lab"] .tabs button.active::after { background: var(--accent); } .tabs .count { display: inline-block; margin-left: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .tab-panel { padding-top: var(--pad-2); } /* ── Errors table ────────────────────────────────────────────────────────── */ .errors-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-lg); overflow: hidden; box-shadow: var(--shadow); } .errors-table th, .errors-table td { text-align: left; padding: 12px 14px; font-size: 13px; border-bottom: 1px solid var(--line-2); vertical-align: top; } .errors-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 500; background: var(--surface-2); border-bottom: 1px solid var(--line); position: sticky; top: 0; } .errors-table tr:last-child td { border-bottom: 0; } .errors-table tr:hover td { background: var(--surface-2); } .errors-table .seg-id { font-family: var(--font-mono); color: var(--ink-3); font-size: 12px; white-space: nowrap; } .errors-table .cat { font-family: var(--font-mono); font-size: 11px; white-space: nowrap; color: var(--ink-2); } .errors-table .sev { font-family: var(--font-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; white-space: nowrap; } .errors-table .pen { text-align: right; font-family: var(--font-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; } .errors-table .desc { color: var(--ink-2); line-height: 1.5; } .errors-table .desc .src { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 4px; display: block; } /* ── Segments table ──────────────────────────────────────────────────────── */ .segments-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-lg); overflow: hidden; box-shadow: var(--shadow); table-layout: fixed; } .segments-table th, .segments-table td { padding: 12px 14px; font-size: 13px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; } .segments-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 500; background: var(--surface-2); border-bottom: 1px solid var(--line); } .segments-table tr:last-child td { border-bottom: 0; } .segments-table tr:hover td { background: var(--surface-2); } .segments-table .seg-id { font-family: var(--font-mono); color: var(--ink-3); width: 64px; } .segments-table .section { font-family: var(--font-mono); color: var(--ink-2); font-size: 11px; width: 110px; } .segments-table .src, .segments-table .tgt { line-height: 1.55; color: var(--ink); } .segments-table .has-err::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--major); margin-right: 6px; vertical-align: 1px; } .segments-table .actions { text-align: right; width: 40px; } .segments-table .chk { width: 16px; height: 16px; border: 1.25px solid var(--ink-4); border-radius: 3px; cursor: pointer; background: transparent; display: grid; place-items: center; } .segments-table .chk.on { background: var(--accent); border-color: var(--accent); color: white; } .rerun-bar { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent); border-radius: var(--rad-lg); padding: 10px 14px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; } [data-theme="lab"] .rerun-bar { background: var(--accent-soft); color: var(--ink); } /* ── Diff view ───────────────────────────────────────────────────────────── */ .diff-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-lg); overflow: hidden; box-shadow: var(--shadow); table-layout: fixed; } .diff-table th, .diff-table td { padding: 12px 14px; font-size: 13px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; line-height: 1.55; } .diff-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 500; background: var(--surface-2); border-bottom: 1px solid var(--line); } .diff-table tr:last-child td { border-bottom: 0; } .diff-table .seg-id { font-family: var(--font-mono); color: var(--ink-3); width: 64px; } .diff-table .dist { font-family: var(--font-mono); color: var(--ink-3); width: 90px; font-variant-numeric: tabular-nums; } .diff-ins { background: oklch(95% 0.08 150 / 0.5); color: oklch(35% 0.12 150); padding: 0 2px; border-radius: 2px; } .diff-del { background: oklch(94% 0.06 25 / 0.5); color: oklch(40% 0.13 25); padding: 0 2px; border-radius: 2px; text-decoration: line-through; text-decoration-color: oklch(40% 0.13 25 / 0.5); } [data-theme="lab"] .diff-ins { background: oklch(30% 0.10 150 / 0.6); color: oklch(85% 0.12 150); } [data-theme="lab"] .diff-del { background: oklch(30% 0.12 25 / 0.6); color: oklch(80% 0.12 25); } /* ── Misc ────────────────────────────────────────────────────────────────── */ .muted { color: var(--ink-3); } .kbd { display: inline-block; font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; color: var(--ink-2); } .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: var(--rad); font-size: 13px; box-shadow: var(--shadow-lg); z-index: 9999; font-family: var(--font-mono); } .spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin 0.8s linear infinite; display: inline-block; vertical-align: -2px; } @keyframes spin { to { transform: rotate(360deg); } } /* ── API hint card ───────────────────────────────────────────────────────── */ .api-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--rad-lg); padding: var(--pad-2); margin-top: var(--pad-2); } .api-card h4 { margin: 0 0 8px; font-size: 13px; font-weight: 500; font-family: var(--display-font); } .api-card pre { margin: 0; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--rad); font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); overflow-x: auto; line-height: 1.5; } [data-theme="lab"] .api-card pre { background: #000; }