/* upticc workbench theme — "financial terminal" (v2 direction). Fraunces (serif) / Hanken Grotesk (body) / JetBrains Mono (mono), signal-lime on near-black, with a light theme. Fonts are loaded via in base.html . */ :root{ --ink:#0a0e0b; --panel:#121813; --panel-2:#0e130f; --panel-raise:#161d17; --bone:#f3f0e6; --bone-dim:rgba(243,240,230,.62); --bone-faint:rgba(243,240,230,.34); --signal:#b6ff3a; --signal-deep:#8be000; --amber:#ecc14b; --red:#ff6a6a; --grey:#8a8f86; --hairline:rgba(243,240,230,.11); --hairline-2:rgba(243,240,230,.06); --serif:"Fraunces",Georgia,serif; --body:"Hanken Grotesk",sans-serif; --mono:"JetBrains Mono",monospace; /* legacy aliases (older templates) */ --bg:var(--ink); --bg-2:var(--panel-raise); --pnl:var(--panel); --pnl-2:var(--panel-raise); --tx:var(--bone); --tx-dim:var(--bone-dim); --tx-faint:var(--bone-faint); --bd:var(--hairline); --bd-2:var(--hairline-2); --line:var(--hairline); --line-2:var(--hairline-2); } [data-theme="light"]{ --ink:#f3f0e6; --panel:#fffdf7; --panel-2:#eae6d8; --panel-raise:#f6f2e7; --bone:#0a0e0b; --bone-dim:rgba(10,14,11,.62); --bone-faint:rgba(10,14,11,.42); --signal:#6fae00; --signal-deep:#5c9200; --amber:#b8860b; --red:#c0392b; --grey:#6b6f68; --hairline:rgba(10,14,11,.14); --hairline-2:rgba(10,14,11,.07); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--ink);color:var(--bone);font-family:var(--body); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} .fr{font-family:var(--serif);font-style:normal} .mono{font-family:var(--mono)} a{color:var(--signal-deep)} .accent,.hero-title em{font-style:normal;color:var(--signal-deep)} /* ===== App shell (grid: brand+topbar / sidebar+main) ===== */ .app{display:grid;grid-template-columns:264px 1fr;grid-template-rows:56px 1fr; grid-template-areas:"brand topbar" "side main";min-height:100vh;max-width:1480px;margin:0 auto} .app.bare{grid-template-columns:1fr;grid-template-areas:"brand" "main"} /* brand cell (top-left) */ .brandcell{grid-area:brand;display:flex;align-items:center;gap:11px;padding:0 22px; border-bottom:1px solid var(--hairline);border-right:1px solid var(--hairline);background:var(--panel-2)} .app.bare .brandcell{border-right:0;justify-content:center} .brand-icon{width:28px;height:28px;border-radius:8px;background:var(--signal);display:grid;place-items:center; box-shadow:0 0 0 1px rgba(182,255,58,.35),0 4px 14px -6px rgba(182,255,58,.5);flex:none} .brand-icon svg{display:block} .brand-lockup{display:inline-flex;align-items:center;gap:11px;text-decoration:none} .wordmark{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:-.02em;line-height:1;color:var(--bone)} /* top bar */ .topbar{grid-area:topbar;display:flex;align-items:center;justify-content:space-between;padding:0 28px; border-bottom:1px solid var(--hairline);background:var(--panel-2)} .topbar-meta{display:flex;align-items:center;gap:18px;font-family:var(--mono);font-size:11px; letter-spacing:.04em;color:var(--bone-faint);text-transform:uppercase} .topbar-meta .live{display:inline-flex;align-items:center;gap:7px;color:var(--bone-dim)} .dot{width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px 1px rgba(182,255,58,.6)} .theme-toggle{width:36px;height:36px;border-radius:9px;border:1px solid var(--hairline);background:transparent; color:var(--bone-dim);display:grid;place-items:center;cursor:pointer;transition:border-color .15s,color .15s,background .15s} .theme-toggle:hover{color:var(--bone);border-color:rgba(243,240,230,.22);background:var(--panel-raise)} .theme-toggle .i-sun{display:none}.theme-toggle .i-moon{display:block} [data-theme="light"] .theme-toggle .i-sun{display:block}[data-theme="light"] .theme-toggle .i-moon{display:none} /* sidebar — sticky full-height so nav + the user card (sign-out) stay in view without scrolling, even on long pages. Its own scroll only if the nav itself overflows. */ .sidebar{grid-area:side;background:var(--panel-2);border-right:1px solid var(--hairline); display:flex;flex-direction:column;padding:18px 14px 16px; position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto} .new-cert{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:12px 14px; border-radius:11px;border:1px solid var(--signal-deep);background:linear-gradient(180deg,var(--signal),var(--signal-deep)); color:#0a1400;font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:-.01em;text-decoration:none;cursor:pointer; box-shadow:0 6px 20px -8px rgba(182,255,58,.55),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .12s,box-shadow .12s} .new-cert:hover{transform:translateY(-1px);box-shadow:0 10px 26px -8px rgba(182,255,58,.7),inset 0 1px 0 rgba(255,255,255,.35)} .new-cert svg{flex:none} .nav-label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-faint);padding:22px 10px 9px} .nav{display:flex;flex-direction:column;gap:2px} .nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:var(--bone-dim); text-decoration:none;font-size:14px;font-weight:500;letter-spacing:-.005em;position:relative;transition:background .14s,color .14s} .nav a svg{flex:none;opacity:.8} .nav a:hover{background:var(--panel-raise);color:var(--bone)} .nav a.on{background:var(--panel-raise);color:var(--bone)} .nav a.on::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:3px;height:20px; border-radius:0 3px 3px 0;background:var(--signal);box-shadow:0 0 10px 0 rgba(182,255,58,.7)} .nav a.on svg{opacity:1;color:var(--signal)} .side-spacer{flex:1} .user-card{border-top:1px solid var(--hairline);padding-top:14px;margin-top:14px;display:flex;align-items:center;gap:11px} .avatar{width:34px;height:34px;border-radius:9px;background:var(--panel-raise);border:1px solid var(--hairline); display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--bone-dim);flex:none;text-transform:uppercase} .user-meta{min-width:0;flex:1} .user-email{font-size:13px;font-weight:500;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .signout{display:inline-block;background:none;border:none;color:var(--bone-faint);font-family:var(--mono);font-size:11px; letter-spacing:.03em;cursor:pointer;padding:2px 0;text-transform:uppercase;text-decoration:none;transition:color .14s} .signout:hover{color:var(--red)} /* main */ .main{grid-area:main;padding:34px 40px 48px;overflow:auto;min-width:0} .app.bare .main{max-width:520px;margin:0 auto;padding-top:48px} .page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px} .page-head h1,.page-title{font-family:var(--serif);font-weight:600;font-size:34px;letter-spacing:-.02em;line-height:1.05;color:var(--bone)} .page-head .sub,.page-sub{margin-top:7px;font-size:14.5px;color:var(--bone-dim)} @media(max-width:820px){ .app,.app.bare{grid-template-columns:1fr;grid-template-rows:56px auto 1fr;grid-template-areas:"brand" "topbar" "main"} .sidebar{display:none}.main{padding:22px 18px 40px}.brandcell{border-right:0} } /* ===== stat cards ===== */ .stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hairline);border-radius:14px; overflow:hidden;background:var(--panel);margin-bottom:30px} .stats.s4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.stats.s4{grid-template-columns:repeat(2,1fr)}} .stat{padding:20px 24px 22px;position:relative} .stat+.stat{border-left:1px solid var(--hairline)} .stat-k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-faint); display:flex;align-items:center;gap:7px} .stat-v{font-family:var(--serif);font-weight:600;font-size:42px;line-height:1;letter-spacing:-.02em;margin-top:14px;font-variant-numeric:tabular-nums} .stat-v.lime{color:var(--signal)}.stat-v.amber{color:var(--amber)} .stat-foot{margin-top:11px;font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--bone-faint)} .tick{width:6px;height:6px;border-radius:1px;display:inline-block} .tick.lime{background:var(--signal)}.tick.amber{background:var(--amber)}.tick.bone{background:var(--bone-faint)} @media(max-width:680px){.stats{grid-template-columns:1fr}.stat+.stat{border-left:0;border-top:1px solid var(--hairline)}} /* ===== panel card + table ===== */ .panel-card{border:1px solid var(--hairline);border-radius:14px;background:var(--panel);overflow:hidden;margin-bottom:22px} .panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px; border-bottom:1px solid var(--hairline);background:var(--panel-2)} .panel-head h2{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--bone)} .panel-head .count{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-faint)} table{width:100%;border-collapse:collapse} thead th{text-align:left;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:var(--bone-faint);padding:11px 22px;border-bottom:1px solid var(--hairline);background:var(--panel-2)} thead th.r,tbody td.r{text-align:right}thead th.c,tbody td.c{text-align:center} tbody tr{transition:background .12s} tbody tr+tr td{border-top:1px solid var(--hairline)} tbody tr.clickable:hover{background:var(--panel-raise);cursor:pointer} tbody td{padding:14px 22px;vertical-align:middle} .job-name{font-size:14px;font-weight:600;color:var(--bone);letter-spacing:-.005em} .job-id,.fn{font-family:var(--mono);font-size:11px;color:var(--bone-faint);margin-top:3px;letter-spacing:.02em} td.files,td.mono{font-family:var(--mono);font-size:13px;color:var(--bone-dim);font-variant-numeric:tabular-nums} td.date{font-family:var(--mono);font-size:12px;color:var(--bone-faint);font-variant-numeric:tabular-nums} /* ===== status pills ===== */ .pill{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 9px;border-radius:100px;font-family:var(--mono); font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;border:1px solid transparent} .pill .pdot{width:6px;height:6px;border-radius:50%;flex:none} .pill.done{color:var(--signal);background:rgba(182,255,58,.08);border-color:rgba(182,255,58,.22)} .pill.done .pdot{background:var(--signal);box-shadow:0 0 6px rgba(182,255,58,.8)} .pill.processing{color:var(--amber);background:rgba(236,193,75,.1);border-color:rgba(236,193,75,.28)} .pill.processing .pdot{background:var(--amber)} .pill.queued,.pill.planning{color:var(--bone-dim);background:rgba(138,143,134,.08);border-color:rgba(138,143,134,.2)} .pill.queued .pdot,.pill.planning .pdot{background:var(--grey)} .pill.waiting{color:var(--amber);background:rgba(236,193,75,.08);border-color:rgba(236,193,75,.24)} .pill.waiting .pdot{background:var(--amber)} .pill.error{color:var(--red);background:rgba(255,106,106,.08);border-color:rgba(255,106,106,.24)} .pill.error .pdot{background:var(--red)} .pill.cancelled{color:var(--grey);background:rgba(138,143,134,.08);border-color:rgba(138,143,134,.2)} .pill.cancelled .pdot{background:var(--grey)} /* ===== generic panel (plan/job/account/credits) ===== */ .panel{background:var(--panel);border:1px solid var(--hairline);border-radius:14px;padding:24px;margin-bottom:22px} .panel h2{font-family:var(--serif);font-weight:600;margin:0 0 4px;font-size:20px} .panel .hint{color:var(--bone-dim);font-size:13.5px;margin:0 0 16px;line-height:1.5} .empty{color:var(--bone-dim);font-size:14px;padding:8px 0}.empty a{color:var(--signal-deep)} .muted{color:var(--bone-faint);font-size:12px} .note{color:var(--bone-faint);font-size:11px;margin-top:10px;line-height:1.5} /* forms / buttons */ .field{display:block;margin:0 0 14px} .field span{display:block;font-family:var(--mono);font-size:11px;color:var(--bone-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px} .field input[type=text]{width:100%;padding:11px 13px;border-radius:9px;border:1px solid var(--hairline);background:var(--ink);color:var(--bone);font-family:var(--mono);font-size:13px} .field input[type=text]:focus{outline:none;border-color:var(--signal-deep)} .btn{cursor:pointer;font-family:var(--body);font-size:14px;font-weight:700;letter-spacing:-.01em;border:1px solid var(--signal-deep); background:linear-gradient(180deg,var(--signal),var(--signal-deep));color:#0a1400;border-radius:10px;padding:12px 20px;margin-top:16px; box-shadow:0 6px 20px -8px rgba(182,255,58,.55),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .12s,box-shadow .12s} .btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px -8px rgba(182,255,58,.7),inset 0 1px 0 rgba(255,255,255,.35)} .btn.ghost{background:none;color:var(--bone);border-color:var(--hairline);box-shadow:none;font-weight:500} .btn.ghost:hover{transform:none;border-color:rgba(243,240,230,.24);background:var(--panel-raise);box-shadow:none} .btn.danger{background:linear-gradient(180deg,#ff7a7a,#e04545);border-color:#c0392b;color:#240000;box-shadow:none} .btn.danger:hover{filter:brightness(1.06);transform:translateY(-1px)} .danger-zone{border-color:rgba(255,106,106,.3)} .danger-zone h2{color:var(--red)} .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px} /* upload dropzone */ .drop{position:relative;border:1.5px dashed var(--hairline);border-radius:14px;padding:34px 24px;text-align:center; background:var(--ink);cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s;outline:none} .drop:hover{border-color:var(--bone-dim);background:var(--panel-raise)} .drop:focus-visible{border-color:var(--signal)} .drop.drag{border-color:var(--signal);background:rgba(182,255,58,.06);box-shadow:0 0 0 3px rgba(182,255,58,.12) inset} .drop.has-files{border-style:solid;border-color:var(--signal-deep)} .drop-ico{width:34px;height:34px;color:var(--bone-dim);margin-bottom:8px} .drop.drag .drop-ico,.drop.has-files .drop-ico{color:var(--signal-deep)} .drop-title{font-size:15px;color:var(--bone)} .drop-link{color:var(--signal-deep);text-decoration:underline;text-underline-offset:2px} .drop-sub{font-size:11px;color:var(--bone-faint);margin-top:4px} .filelist{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:6px} .file-chip{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px;background:var(--panel-raise);border:1px solid var(--hairline);border-radius:8px;text-align:left} .fc-name{font-size:13px;color:var(--bone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fc-size{font-size:11px;color:var(--bone-dim);flex:none} /* cost bar (job page) */ .costbar{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin:18px 0;padding:16px 20px;background:var(--panel-raise);border:1px solid var(--hairline);border-radius:10px} .costnum{display:block;font-family:var(--mono);font-size:22px;font-weight:700;color:var(--signal-deep)} .costlbl{font-size:10px;color:var(--bone-dim);text-transform:uppercase;letter-spacing:.07em} .costmeta{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--bone-faint)} .spin{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--amber);margin-right:6px;animation:p 1s infinite} @keyframes p{50%{opacity:.25}} /* ===== standalone auth screen (login / verify) ===== */ .auth-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:var(--ink)} .auth-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;margin-bottom:22px} .auth-card{width:100%;max-width:412px;background:var(--panel);border:1px solid var(--hairline);border-radius:16px;padding:30px 30px 32px} .auth-card h1{font-family:var(--serif);font-weight:600;font-size:26px;letter-spacing:-.01em;margin:0 0 6px} .auth-sub{color:var(--bone-dim);font-size:13.5px;line-height:1.5;margin:0 0 22px} .auth-sub strong{color:var(--bone)} .auth-field{margin-bottom:18px} .auth-field label{display:block;font-family:var(--mono);font-size:10px;color:var(--bone-dim);text-transform:uppercase;letter-spacing:.12em;margin-bottom:7px} .auth-field input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--hairline);background:var(--ink);color:var(--bone);font-family:var(--mono);font-size:14px;outline:none} .auth-field input.code{font-size:22px;letter-spacing:6px;text-align:center} .auth-field input:focus{border-color:var(--signal-deep)} .auth-err{background:rgba(255,106,106,.1);color:var(--red);border:1px solid rgba(255,106,106,.26);border-radius:9px;padding:10px 14px;font-size:13px;margin-bottom:16px} .dev-code{background:rgba(182,255,58,.1);color:var(--signal-deep);border:1px solid rgba(182,255,58,.28);border-radius:9px;padding:12px 16px;font-size:13px;margin-bottom:20px} .dev-code strong{font-family:var(--mono);font-size:24px;letter-spacing:5px;display:block;margin-top:6px} .auth-back{display:block;font-size:12px;color:var(--bone-faint);margin-top:16px} .auth-back a{color:var(--bone-faint)} /* ===== per-file report ===== */ .rep-back{display:block;font-family:var(--mono);font-size:12px;color:var(--bone-dim);text-decoration:none;padding:6px 12px;margin-bottom:6px} .rep-back:hover{color:var(--bone)} .rep-nav .nav-badge{margin-left:auto;font-family:var(--mono);font-size:10px;background:rgba(255,106,106,.12);color:var(--red);border:1px solid rgba(255,106,106,.26);border-radius:20px;padding:1px 7px} .rsec{display:none}.rsec.on{display:block} .rcols{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:900px){.rcols{grid-template-columns:1fr}} .kv{display:grid;grid-template-columns:120px 1fr;gap:9px 14px;margin:0} .kv dt{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--bone-faint)} .kv dd{margin:0;font-size:14px;color:var(--bone)} .checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .checks li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--bone-dim)} .checks li .cm{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:11px;flex:none} .checks li.ok .cm{background:rgba(182,255,58,.12);color:var(--signal);border:1px solid rgba(182,255,58,.28)} .checks li.no .cm{background:rgba(255,106,106,.1);color:var(--red);border:1px solid rgba(255,106,106,.26)} .checks li.ok{color:var(--bone)} .recon{padding:13px 22px;font-size:13px;color:var(--bone-dim);border-bottom:1px solid var(--hairline)} .recon b{color:var(--bone);font-family:var(--mono)} .recon.ok{background:rgba(182,255,58,.05)}.recon.warn{background:rgba(236,193,75,.07)} tr.row-flag td{background:rgba(255,106,106,.05)} .why{color:var(--red);font-family:var(--mono);font-size:12px} /* general discrepancies (cross-document congruence) */ .panel-card.disc{margin-top:22px} .disc-list{list-style:none;margin:0;padding:0} .disc-item{padding:14px 22px;border-bottom:1px solid var(--hairline);border-left:3px solid var(--amber);background:rgba(236,193,75,.05)} .disc-item.fail{border-left-color:var(--red);background:rgba(255,106,106,.06)} .disc-item:last-child{border-bottom:0} .disc-head{display:flex;align-items:center;gap:10px;margin-bottom:5px} .disc-title{font-size:14px;font-weight:600;color:var(--bone)} .disc-cat{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--bone-faint)} .disc-sev{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:20px} .disc-sev.sev-high{color:var(--red);background:rgba(255,106,106,.12);border:1px solid rgba(255,106,106,.26)} .disc-sev.sev-med{color:var(--amber);background:rgba(236,193,75,.12);border:1px solid rgba(236,193,75,.28)} .disc-sev.sev-low{color:var(--bone-dim);background:rgba(138,143,134,.12);border:1px solid rgba(138,143,134,.22)} .disc-detail{font-family:var(--mono);font-size:12.5px;color:var(--bone-dim);line-height:1.5} .disc-docs{margin-top:7px;display:flex;flex-wrap:wrap;gap:6px} .disc-doc{font-family:var(--mono);font-size:10.5px;color:var(--bone-faint);background:var(--panel-2);border:1px solid var(--hairline);border-radius:6px;padding:2px 8px} .disc-foot{padding:11px 22px;font-size:13px;color:var(--signal);border-top:1px solid var(--hairline);background:rgba(182,255,58,.04)} .disc-na{padding:11px 22px;border-top:1px solid var(--hairline)} .disc-na summary{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--bone-faint);cursor:pointer} .disc-na ul{list-style:none;margin:10px 0 2px;padding:0} .disc-na li{padding:5px 0;font-size:13px;color:var(--bone-dim);border-top:1px solid var(--hairline-2)} /* source-page viewer */ .page-strip{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px} .ps-chip{font-family:var(--mono);font-size:12px;color:var(--bone-dim);background:var(--panel-2);border:1px solid var(--hairline);border-radius:8px;padding:6px 11px;cursor:pointer;transition:color .12s,border-color .12s} .ps-chip:hover{color:var(--bone)} .ps-chip.on{color:#0a1400;background:var(--signal);border-color:var(--signal-deep);font-weight:600} .src-viewer{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px} @media(max-width:1000px){.src-viewer{grid-template-columns:1fr}} .sv-col{background:var(--panel);border:1px solid var(--hairline);border-radius:12px;overflow:hidden;display:flex;flex-direction:column} .sv-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-faint);padding:12px 16px;border-bottom:1px solid var(--hairline);background:var(--panel-2)} .sv-img{padding:14px;min-height:200px;display:grid;place-items:center} .sv-img img{max-width:100%;border-radius:6px;border:1px solid var(--hairline)} .noimg{text-align:center;color:var(--bone-faint);font-size:13px;padding:30px 14px} .noimg span{display:block;margin-top:6px;font-size:11px;color:var(--bone-faint)} .sv-text{margin:0;padding:16px;font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--bone-dim);white-space:pre-wrap;word-break:break-word;overflow:auto;max-height:560px} .sv-norm{padding:14px 16px;overflow:auto;max-height:560px} .nf{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--hairline-2)} .nf span{font-family:var(--mono);font-size:11px;color:var(--bone-faint);text-transform:uppercase;letter-spacing:.04em} .nf b{font-size:13px;color:var(--bone);text-align:right;font-weight:500} a.src{font-family:var(--mono);font-size:11px;color:var(--bone-dim);text-decoration:none;border:1px solid var(--hairline);padding:2px 7px;border-radius:6px} a.src:hover{color:var(--signal);border-color:rgba(182,255,58,.35)} /* Task 2: honest-quality + low-confidence flags in the source-page viewer */ .qbadge{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;letter-spacing:.02em} .qbadge.ok{color:var(--signal);border:1px solid rgba(111,174,0,.4)} .qbadge.warn{color:var(--amber);border:1px solid color-mix(in srgb,var(--amber) 45%,transparent)} .qbadge.bad{color:var(--red);border:1px solid color-mix(in srgb,var(--red) 50%,transparent)} .qwarn{margin:10px 0 4px;padding:10px 12px;border-radius:8px;border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);background:color-mix(in srgb,var(--amber) 9%,transparent)} .qwarn.bad{border-color:color-mix(in srgb,var(--red) 45%,transparent);background:color-mix(in srgb,var(--red) 9%,transparent)} .qwarn-h{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin:0 0 6px;font-weight:700} .qwarn.bad .qwarn-h{color:var(--red)} .qflags{list-style:none;margin:0;padding:0} .qflags li{font-size:12px;color:var(--bone-dim);padding:4px 0;display:flex;gap:7px;align-items:baseline} .qflags li::before{content:"!";font-family:var(--mono);font-weight:700;color:var(--amber);flex:none} .qflags li.bad::before{color:var(--red)} .oriented{font-family:var(--mono);font-size:10px;color:var(--signal);letter-spacing:.02em} /* GPU-missing banner */ .demobar{background:rgba(236,193,75,.14);color:var(--amber);border:1px solid rgba(236,193,75,.35);border-radius:10px;padding:11px 16px;font-size:13px;margin-bottom:20px} .demobar b{color:var(--amber)}