/* 标博士 · 组件样式 v0.1 * 依赖 tokens.css。规范见 docs/design/design-system.md §7;组件预览 components.html 和原型 docs/prototype/ 共用本文件。 * 原型阶段的参考实现:技术架构选定组件库后,按这里的视觉去配置组件库主题,不必照搬选择器。 */ /* ---- 基础 ---- */ *{box-sizing:border-box} body{margin:0;background:var(--bg-page);color:var(--text-primary);font:var(--fs-body)/var(--lh-body) var(--font-sans);-webkit-font-smoothing:antialiased} :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px} .card{background:var(--bg-surface);border:var(--line) solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--sp-5) var(--sp-6)} .row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)} .fig{font-family:var(--font-figures);font-variant-numeric:tabular-nums;font-weight:600} .note{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary);margin:var(--sp-3) 0 0} /* ---- 级别标签 ---- */ .sev{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--radius-sm);font:var(--fw-bold) var(--fs-caption)/1 var(--font-sans);white-space:nowrap} .sev .fig{margin-left:4px;font-size:13px} .sev.fatal{background:var(--sev-fatal);color:var(--text-on-dark)} .sev.major{border:var(--line-sev) solid var(--sev-major);color:var(--sev-major-text)} .sev.hint{background:var(--sev-hint-soft);color:var(--sev-hint)} .tag{display:inline-flex;align-items:center;height:20px;padding:0 6px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-size:var(--fs-caption);color:var(--text-secondary);white-space:nowrap} .tag.status{border-color:var(--border-control);color:var(--text-primary)} .tag.ai{border-color:var(--ai);color:var(--ai)} .flag{font-size:var(--fs-caption);color:var(--text-secondary)} /* ---- 按钮 ---- */ .btn{display:inline-flex;align-items:center;gap:6px;height:var(--control-h);padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--border-control);background:var(--bg-surface);color:var(--text-primary);font:var(--fs-body)/1 var(--font-sans);cursor:pointer;transition:background var(--dur-fast) var(--ease)} a.btn{text-decoration:none} [hidden]{display:none!important} .btn:hover{background:var(--bg-hover)} .btn.primary{background:var(--c-ink);border-color:var(--c-ink);color:var(--text-on-dark)} .btn.primary:hover{background:#34404D} .btn.text{border-color:transparent;background:none} .btn.text:hover{background:var(--bg-hover)} .btn.sm{height:var(--control-h-sm);padding:0 8px} .btn.lg{height:var(--control-h-lg);padding:0 16px} .btn[disabled]{color:var(--text-disabled);background:var(--bg-sunken);border-color:var(--bg-sunken);cursor:not-allowed} .cost{font-size:var(--fs-caption);color:var(--text-secondary)} .cost .fig{font-weight:500;font-size:13px} a.plain{color:var(--text-primary);text-underline-offset:3px} /* ---- 问题行 + 页边批注 ---- */ .results{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm)} .results-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-3);padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--border-subtle)} .results-head h3{font:var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-serif);margin:0} .results-head .proj{color:var(--text-secondary)} .results-head .counts{margin-left:auto;display:flex;gap:var(--sp-2)} .finding{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--margin-note-w);gap:var(--sp-8);padding:var(--sp-5) var(--sp-6);border-top:1px solid var(--border-subtle)} .finding:first-of-type{border-top:0} .finding.is-fatal::before{content:"";position:absolute;left:0;top:var(--sp-5);bottom:var(--sp-5);width:3px;background:var(--sev-fatal)} .f-head{display:flex;align-items:center;gap:var(--sp-2)} .f-title{font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans)} .f-head .flag{margin-left:var(--sp-1);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:0 5px;line-height:18px} .f-text{margin:var(--sp-2) 0 0;color:var(--text-primary)} .f-text + .f-text{margin-top:0} .f-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-top:var(--sp-3)} .f-actions .feedback{margin-left:auto;font-size:var(--fs-caption)} .sign{margin-top:var(--sp-3);font-size:var(--fs-body);color:var(--confirmed);display:flex;gap:var(--sp-2);align-items:baseline;flex-wrap:wrap} .sign b{font-weight:var(--fw-bold)} .sign .fig{font-weight:500} .sign .undo{color:var(--text-secondary);font-size:var(--fs-caption);margin-left:var(--sp-2)} .cite{position:relative;border-left:2px solid var(--ai);padding:2px 0 2px var(--sp-3)} .cite + .cite{margin-top:var(--sp-3)} .finding .cite:first-child::before{content:"";position:absolute;left:calc(-1 * var(--sp-8) - 2px);top:11px;width:calc(var(--sp-8) - 4px);border-top:1.5px dashed var(--ai)} .cite-src{display:block;color:var(--ai);font-size:var(--fs-caption);line-height:var(--lh-caption);text-decoration:none} .cite-src:hover{color:var(--ai-strong);text-decoration:underline;text-underline-offset:3px} .cite-src .fig{font-size:13px;font-weight:600} .cite q{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;quotes:none;margin-top:2px;line-height:var(--lh-read);color:var(--text-primary)} .cite.on{border-left-width:4px;padding-left:calc(var(--sp-3) - 2px)} .cite q mark{background:var(--ai-soft);color:inherit;padding:0 1px} .cite.missing{border-left-style:dashed} .cite.missing p{margin:2px 0 0;color:var(--text-secondary);font-size:var(--fs-caption);line-height:var(--lh-caption)} .ocr{font:600 11px/1 var(--font-figures);color:var(--text-secondary);border:1px solid var(--border-subtle);padding:1px 3px;border-radius:2px;margin-left:4px;vertical-align:1px} .folded{padding:var(--sp-3) var(--sp-6);border-top:1px solid var(--border-subtle);background:var(--bg-sunken);color:var(--text-secondary);font-size:var(--fs-body)} /* ---- 清单与待确认 ---- */ .pending{border:1.5px dashed var(--ai);border-radius:var(--radius-sm);background:var(--bg-surface);padding:var(--sp-4) var(--sp-5)} .pending h4{margin:0;font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans);color:var(--ai)} .pending > p{margin:var(--sp-1) 0 var(--sp-3);color:var(--text-secondary)} .item{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:var(--sp-3);padding:var(--sp-3) 0;border-top:1px solid var(--border-subtle);align-items:start} .item:first-of-type{border-top:0} .imp{font-size:var(--fs-title);line-height:var(--lh-body);text-align:center} .item .t{font-weight:var(--fw-bold)} .item .meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px} .item .side{text-align:right;font-size:var(--fs-caption);line-height:var(--lh-caption)} .src-ai{color:var(--ai)} .old{text-decoration:line-through;color:var(--text-secondary)} .list-head{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-3)} .list-head h4{margin:0;font:var(--fw-bold) var(--fs-title)/var(--lh-title) var(--font-sans)} /* ---- 参数对照表 ---- */ table.data{width:100%;border-collapse:collapse;background:var(--bg-surface);border:1px solid var(--border-subtle)} table.data th{background:var(--bg-sunken);text-align:left;font-weight:var(--fw-bold);font-size:var(--fs-caption);color:var(--text-secondary);padding:var(--sp-2) var(--sp-3);border-bottom:2px solid var(--border-strong);white-space:nowrap} table.data td:first-child{white-space:nowrap} table.data td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-subtle);vertical-align:top;height:40px} table.data tr:last-child td{border-bottom:0} table.data .num{font-family:var(--font-figures);font-variant-numeric:tabular-nums;font-weight:500;font-size:15px;white-space:nowrap} table.data .r{text-align:right} table.data a{color:var(--ai);text-decoration:none;font-size:var(--fs-caption);white-space:nowrap} table.data a .fig{font-size:13px} .verdict{font-weight:var(--fw-bold);white-space:nowrap} .verdict.fatal{color:var(--sev-fatal)} .verdict.major{color:var(--sev-major-text)} .verdict.manual{color:var(--text-secondary);font-weight:var(--fw-regular)} /* ---- 原文查看器 ---- */ .viewer{background:var(--bg-sunken);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);display:flex;flex-direction:column} .viewer-bar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);font-size:var(--fs-caption)} .viewer-bar b{font-size:var(--fs-body)} .viewer-bar .pager{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center} .sheet{margin:var(--sp-4) auto;width:86%;background:#fff;box-shadow:0 1px 2px rgba(29,39,51,.12);padding:28px 32px;font:13px/1.9 "Songti SC","SimSun",var(--font-serif);color:#222} .sheet p{margin:0 0 6px} .sheet .hl{background:var(--ai-soft);outline:1px solid var(--ai);outline-offset:1px} .sheet .hl.on{outline-width:2px} .sheet .faint{color:#888} /* ---- 工作台 ---- */ .proj-name{font-weight:var(--fw-bold);font-size:var(--fs-title);line-height:var(--lh-title)} .proj-sub{font-size:var(--fs-caption);color:var(--text-secondary)} .due-soon{color:var(--warn-text)} .due-today{color:var(--warn-text);font-weight:var(--fw-bold)} .due-past{color:var(--text-secondary)} .ready{display:flex;gap:6px;align-items:center;flex-wrap:wrap} /* ---- 额度 ---- */ .quota .big{font:600 var(--fs-figure)/var(--lh-figure) var(--font-figures);font-variant-numeric:tabular-nums} .quota .unit{color:var(--text-secondary);margin-left:4px} .bar{height:6px;background:var(--bg-sunken);border-radius:1px;overflow:hidden;margin:var(--sp-2) 0} .bar i{display:block;height:100%;background:var(--c-ink)} .bar.warn i{background:var(--warn)} .flow td.plus{color:var(--confirmed)} /* ---- 提醒 ---- */ .alert{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-left:3px solid var(--c-ink);background:var(--bg-surface);border-radius:0 var(--radius-sm) var(--radius-sm) 0} .alert + .alert{margin-top:var(--sp-3)} .alert.warn{border-left-color:var(--warn);background:var(--warn-soft)} .alert.warn b{color:var(--warn-text)} .alert.done{border-left-color:var(--confirmed)} .alert p{margin:0} .ico{flex:none;width:18px;height:18px;border-radius:50%;display:inline-grid;place-items:center;font:700 12px/1 var(--font-sans);margin-top:2px} .ico.i{border:1.5px solid var(--c-ink)} .ico.w{border:1.5px solid var(--warn);color:var(--warn-text)} .ico.ok{background:var(--confirmed);color:#fff} /* ---- 表单 ---- */ .field{display:flex;flex-direction:column;gap:6px;max-width:360px} .field + .field{margin-top:var(--sp-4)} .field label{font-weight:var(--fw-bold)} .field label small{font-weight:var(--fw-regular);color:var(--text-secondary)} .input{height:var(--control-h);border:1px solid var(--border-control);border-radius:var(--radius-sm);padding:0 10px;font:var(--fs-body) var(--font-sans);color:var(--text-primary);background:var(--bg-surface)} .input::placeholder{color:var(--text-secondary)} .field.err .input{border-color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn)} .field .msg{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--text-secondary)} .field.err .msg{color:var(--warn-text);display:flex;gap:6px;align-items:center} .field.err .msg .ico{width:14px;height:14px;font-size:10px;margin:0} .chips{display:flex;gap:6px;flex-wrap:wrap} .chips .btn{height:24px;padding:0 8px;font-size:var(--fs-caption)} /* ---- 进度 ---- */ .steps{list-style:none;margin:0;padding:0} .steps li{display:flex;gap:var(--sp-3);align-items:center;padding:6px 0} .steps .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-control);flex:none;display:grid;place-items:center;font-size:11px} .steps .done .dot{background:var(--c-ink);border-color:var(--c-ink);color:#fff} .steps .now .dot{border-color:var(--c-ink);border-width:2px} .steps .now{font-weight:var(--fw-bold)} .steps .todo{color:var(--text-secondary)} /* ---- 报告页眉 ---- */ .report{background:#fff;border:1px solid var(--border-subtle);max-width:620px;padding:28px 36px;font-size:13px;line-height:1.6} .report-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--c-ink);padding-bottom:10px} .report-head img{height:26px} .report-head span{font-size:11px;color:var(--text-secondary)} .report h3{font:600 22px/1.4 var(--font-serif);margin:22px 0 4px} .report dl{display:grid;grid-template-columns:96px 1fr;gap:4px 12px;margin:14px 0} .report dt{color:var(--text-secondary)} .report dd{margin:0} .scope{border:1px solid var(--border-subtle);padding:10px 14px;margin-top:10px} .scope b{display:block;margin-bottom:2px} .report-foot{margin-top:18px;padding-top:8px;border-top:1px solid var(--border-subtle);display:flex;justify-content:space-between;font-size:11px;color:var(--text-secondary)} @media (max-width:1100px){ .finding{grid-template-columns:1fr;gap:var(--sp-3)} .finding .cite:first-child::before{display:none} }