styles.css

:root{
    --bg: #ffffff;
    --fg: #1f2328;
    --muted:#6a6f76;
    --card:#f6f8fa;
    --border:#d0d7de;
    --primary:#2563eb;
}
@media (prefers-color-scheme: dark){
    :root{ --bg:#0b0f14; --fg:#e6edf3; --muted:#9aa4af; --card:#0f141a; --border:#22303a; --primary:#3b82f6; }
}
html[data-theme="dark"]{ --bg:#0b0f14; --fg:#e6edf3; --muted:#9aa4af; --card:#0f141a; --border:#22303a; --primary:#3b82f6; }
html[data-theme="light"]{ /* 使用默认 */ }

*{ box-sizing: border-box; }
body{ margin:0; font:14px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue"; background:var(--bg); color:var(--fg);}
.topbar{ display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:10;}
.topbar h1{ font-size:16px; margin:0; }
.spacer{ flex:1; }
.theme-switcher select{ padding:6px 8px; }

.container{ max-width:1100px; margin:18px auto; padding:0 16px; }

.dropzone{ border:2px dashed var(--border); border-radius:12px; padding:20px; background:var(--card); }
.dz-hint{ color:var(--muted); text-align:center; }
.dz-actions{ display:flex; gap:10px; justify-content:center; margin-top:12px; }
button{ padding:8px 12px; border:1px solid var(--border); background:var(--bg); color:var(--fg); border-radius:10px; cursor:pointer; }
button.primary{ background:var(--primary); color:white; border-color:transparent; }
button:disabled{ opacity:.5; cursor:not-allowed; }

.controls{ display:grid; gap:12px; grid-template-columns: 1fr; margin:18px 0; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--card);}
.controls .row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.controls .grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.controls input[type="number"], .controls input[type="text"], .controls select{ padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--fg); width:180px; }

.progress{ margin:16px 0; }
.meters{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; color:var(--muted); }
.bar{ height:10px; background:var(--border); border-radius:999px; overflow:hidden; margin-top:8px;}
#barInner{ height:100%; width:0%; background:var(--primary); transition:width .2s ease; }

.list{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:12px; }
.card{ border:1px solid var(--border); background:var(--card); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.card .thumb{ aspect-ratio: 4/3; background:#0001; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.card img{ max-width:100%; max-height:100%; object-fit:contain; }
.card .meta{ padding:10px; display:grid; gap:6px; }
.card .meta .name{ font-weight:600; word-break:break-all; }
.card .meta .small{ color:var(--muted); font-size:12px; }
.card .actions{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--border); }
.badge{ font-size:12px; background:var(--bg); border:1px solid var(--border); padding:2px 6px; border-radius:999px; color:var(--muted); }

dialog{ border:none; border-radius:12px; padding:0; width:min(1000px,95vw); }
dialog::backdrop{ background: rgba(0,0,0,.4); }
.compare-wrap, .report-content{ background:var(--bg); color:var(--fg); border-radius:12px; }
.compare-toolbar, .report-toolbar{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid var(--border); background:var(--card); border-top-left-radius:12px; border-top-right-radius:12px; }
.slider{ position:relative; height:60vh; min-height:320px; overflow:hidden; }
.before, .after{ position:absolute; inset:0; background:#000; display:flex; align-items:center; justify-content:center; }
.before img, .after img{ max-width:100%; max-height:100%; }
.handle{ position:absolute; top:0; bottom:0; width:3px; background:var(--primary); left:50%; cursor:col-resize; }
.hintline{ position:absolute; top:0; bottom:0; width:1px; background:#fff8; left:50%; pointer-events:none; }

.magnifier-wrap{ display:flex; gap:10px; padding:10px; }
.magnifier{ position:relative; width:48%; border:1px solid var(--border); overflow:hidden; border-radius:12px; background:var(--card); }
.magnifier canvas{ display:block; width:100%; height:auto; }
.magnifier .label{ position:absolute; left:8px; top:8px; padding:2px 6px; background:var(--bg); border:1px solid var(--border); border-radius:6px; font-size:12px; }

.table{ width:100%; border-collapse:collapse; margin-top:10px; }
.table th, .table td{ border:1px solid var(--border); padding:6px 8px; text-align:left; }
.kpis{ display:flex; gap:14px; flex-wrap:wrap; padding:10px; }
.kpi{ background:var(--card); border:1px solid var(--border); border-radius:12px; padding:10px 12px; }
.chart-row{ display:flex; gap:10px; padding:10px; }
.chart{ flex:1; border:1px solid var(--border); border-radius:12px; background:var(--card); padding:6px; }