:root {
  --text: #182033;
  --muted: #64748b;
  --paper: #fffdf9;
  --line: rgba(71,85,105,.16);
  --accent: #e4473d;
  --accent-dark: #b72f2a;
  --accent-soft: #fff0ed;
  --gold: #c7892f;
  --shadow: 0 18px 52px rgba(71,55,40,.10);
}
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:var(--text); font:14px/1.6 "PingFang SC","Microsoft YaHei",sans-serif; }
a { color:inherit; }
.side-nav { position:fixed; z-index:90; inset:16px auto 16px 16px; display:flex; flex-direction:column; gap:7px; width:204px; padding:14px 12px; border:1px solid var(--line); border-radius:18px; background:rgba(255,253,249,.94); box-shadow:var(--shadow); backdrop-filter:blur(18px); overflow-y:auto; }
.side-brand { display:flex; align-items:center; gap:9px; padding:5px 6px 14px; margin-bottom:4px; border-bottom:1px solid var(--line); font-size:15px; font-weight:950; letter-spacing:.04em; }
.brand-mark { display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:9px; color:#fff; background:linear-gradient(145deg,var(--accent),#f07a4f); box-shadow:0 8px 18px rgba(228,71,61,.22); }
.side-nav-link { display:flex; align-items:center; gap:9px; min-height:40px; padding:9px 10px; border-radius:12px; color:#526077; text-decoration:none; font-size:.86rem; font-weight:850; white-space:nowrap; transition:background .16s ease,color .16s ease; }
.side-nav-link:hover { color:var(--text); background:#f2eee7; }
.side-nav-link.active { color:var(--accent-dark); background:var(--accent-soft); box-shadow:inset 0 0 0 1px rgba(228,71,61,.18); }
.side-nav-icon { flex:0 0 20px; width:20px; text-align:center; font-size:1rem; }
.mobile-nav-toggle { display:none; }
main { width:min(1480px,calc(100% - 48px)); margin:0 auto; padding:28px 0 44px; min-width:0; }
.admin-tabs { display:flex; flex-wrap:wrap; gap:6px; width:fit-content; margin-bottom:22px; padding:5px; border:1px solid var(--line); border-radius:12px; background:rgba(255,253,249,.85); }
.admin-tabs a { min-height:34px; padding:6px 14px; border-radius:8px; color:#66758a; font-size:13px; font-weight:800; text-decoration:none; }
.admin-tabs a.active { color:var(--accent-dark); background:var(--accent-soft); }
.admin-tabs a:hover { color:var(--accent-dark); }
.page-head,.section-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.page-head { margin-bottom:20px; }
h1 { margin:0 0 6px; font-size:clamp(26px,3vw,32px); font-weight:950; letter-spacing:-.035em; }
h2 { margin:0; font-size:17px; font-weight:850; letter-spacing:-.02em; }
p { margin:5px 0; }
.muted,.basis { color:var(--muted); font-size:12px; line-height:1.7; }
.basis { margin:10px 2px 18px; overflow-wrap:anywhere; }
button,select { min-height:38px; padding:8px 12px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:#344158; font:inherit; font-size:13px; font-weight:750; }
button { cursor:pointer; }
button:hover { border-color:rgba(228,71,61,.35); }
button.primary { padding:0 16px; color:#fff; border-color:transparent; background:linear-gradient(135deg,var(--accent),var(--gold)); box-shadow:0 8px 18px rgba(199,83,53,.18); }
button:disabled { opacity:.55; cursor:wait; }
button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
select:focus { border-color:rgba(228,71,61,.5); }
.metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:0 0 12px; }
.metric { padding:18px; min-width:0; min-height:112px; border:1px solid var(--line); border-radius:16px; background:rgba(255,253,249,.95); box-shadow:0 10px 30px rgba(71,55,40,.055); }
.metric span { display:block; min-height:36px; color:var(--muted); font-size:12px; font-weight:750; }
.metric strong { display:block; font-size:30px; line-height:1.3; font-weight:900; font-variant-numeric:tabular-nums; }
.metric:nth-child(1) strong { color:#95601a; }
.metric:nth-child(2) strong { color:#6d846b; }
.filters { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:18px 0; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,253,249,.87); }
.filters label { display:flex; align-items:center; gap:8px; min-width:0; color:#526077; font-size:13px; font-weight:750; }
select { max-width:230px; }
#selection { margin-left:auto; }
.band { min-width:0; margin:0 0 18px; padding:22px; border:1px solid var(--line); border-radius:18px; background:rgba(255,253,249,.93); box-shadow:var(--shadow); }
.section-head { flex-wrap:wrap; margin-bottom:16px; }
.chart-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
.chart { width:100%; height:300px; }
.matrix { height:460px; }
.legend { display:flex; flex-wrap:wrap; gap:10px 16px; margin-bottom:10px; color:#76695c; font-size:12px; }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:3px; }
.table-wrap { max-width:100%; max-height:460px; overflow:auto; border:1px solid var(--line); border-radius:12px; background:var(--paper); -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
table { width:100%; min-width:1080px; border-collapse:separate; border-spacing:0; font-size:12px; }
th,td { padding:12px; border-bottom:1px solid #eee5db; text-align:left; vertical-align:top; overflow-wrap:anywhere; line-height:1.6; }
th { position:sticky; z-index:1; top:0; white-space:nowrap; color:#66758a; background:#f6f0e7; font-weight:850; }
td { max-width:390px; color:#475569; }
td.numeric { text-align:right; font-variant-numeric:tabular-nums; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#fff5ec; }
.stage { font-weight:750; }
#notice:empty { display:none; }
#notice:not(:empty) { margin:0 0 18px; padding:13px 16px; border:1px solid rgba(199,137,47,.24); border-radius:12px; color:#805514; background:#fffbeb; font-size:13px; }
#notice.error { color:#a62f2b; border-color:rgba(228,71,61,.22); background:var(--accent-soft); }
.empty { padding:24px; text-align:center; color:var(--muted); }
.workflow-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.workflow-stage { --stage-color:#a78765; min-width:0; padding:16px; border:1px solid #eee5db; border-radius:12px; background:#fffcf8; }
.workflow-stage h3 { margin:0 0 9px; color:#344158; font-size:13px; font-weight:800; }
.workflow-value { margin-bottom:10px; color:var(--text); font-size:28px; line-height:1.2; font-weight:900; font-variant-numeric:tabular-nums; }
.workflow-detail { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.workflow-stage[data-stage=inspection] { --stage-color:#b58e61; }
.workflow-stage[data-stage=download] { --stage-color:#dc9a6b; }
.workflow-stage[data-stage=verification] { --stage-color:#c7892f; }
.workflow-stage[data-stage=repair] { --stage-color:#79917b; }
progress { display:block; width:100%; height:7px; appearance:none; border:0; border-radius:4px; overflow:hidden; background:#eee5db; accent-color:var(--stage-color,#c7892f); }
progress::-webkit-progress-bar { background:#eee5db; }
progress::-webkit-progress-value { background:var(--stage-color,#c7892f); border-radius:4px; }
progress::-moz-progress-bar { background:var(--stage-color,#c7892f); }
.workflow-details { margin-top:18px; }
.workflow-details summary { padding:10px 0; margin-bottom:8px; color:#344158; cursor:pointer; font-size:13px; font-weight:800; }
.workflow-table { min-width:1220px; }
.workflow-table td { width:170px; }
.workflow-table .workflow-cell strong { font-size:13px; font-variant-numeric:tabular-nums; }
.workflow-cell .workflow-detail { font-size:11px; line-height:1.5; }
.workflow-cell.blocked strong { color:#b72f2a; }
.workflow-cell progress { margin-top:7px; }
.workflow-cell.unknown { color:var(--muted); }
.file-controls { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:10px 0 14px; }
.file-controls label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
.file-controls input { min-height:38px; width:300px; max-width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--text); font:inherit; }
.file-pager { display:flex; align-items:center; gap:10px; margin-left:auto; }
.file-pager button { width:38px; min-width:38px; padding:0; border-radius:4px; }
.file-task-table { min-width:1960px; table-layout:fixed; }
.file-task-table th,.file-task-table td { width:150px; letter-spacing:0; }
.file-task-table th:nth-child(2),.file-task-table td:nth-child(2) { width:110px; }
.file-task-table th:first-child,.file-task-table td.file-name { width:330px; }
.file-name strong,.file-name span { display:block; overflow-wrap:anywhere; word-break:break-word; }
.file-name strong { font-size:13px; color:var(--text); }
.file-name span { margin-top:5px; color:var(--muted); font-size:11px; }
@media(max-width:560px) { .file-controls label { width:100%; justify-content:space-between; } .file-controls input,.file-controls select { width:calc(100% - 65px); } .file-pager { margin-left:0; } .file-task-table th:first-child,.file-task-table td.file-name { width:270px; } }
@media(min-width:1020px) { body { padding-left:236px; } }
@media(max-width:1199px) { .metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } .chart-grid { grid-template-columns:minmax(0,1fr); gap:0; } }
@media(max-width:1019px) {
  body { padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
  main { width:calc(100% - 32px); padding-top:20px; }
  .mobile-nav-toggle { position:fixed; z-index:130; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); display:inline-flex; align-items:center; justify-content:center; min-width:76px; min-height:44px; padding:0 14px; border:1px solid rgba(228,71,61,.27); border-radius:999px; color:var(--accent-dark); background:rgba(255,250,247,.96); box-shadow:0 16px 40px rgba(32,40,57,.18); font-weight:900; }
  .side-nav { display:none; inset:auto 14px calc(72px + env(safe-area-inset-bottom)) auto; width:min(250px,calc(100vw - 28px)); max-height:70vh; }
  .side-nav.mobile-open { display:flex; }
}
@media(max-width:900px) { .workflow-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .matrix { height:480px; } }
@media(max-width:560px) {
  main { width:calc(100% - 28px); padding-top:18px; }
  .page-head { align-items:flex-start; }
  h1 { font-size:26px; }
  .page-head .muted { font-size:11px; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .metric { min-height:100px; padding:14px; }
  .metric:last-child { grid-column:1/-1; }
  .metric strong { font-size:27px; }
  .metric span { min-height:30px; }
  .filters { gap:12px; padding:14px; }
  .filters label { flex:1 1 100%; justify-content:space-between; }
  .filters select { width:calc(100% - 44px); max-width:none; }
  #selection { width:100%; margin-left:0; }
  .band { padding:16px; border-radius:16px; }
  .section-head { align-items:flex-start; gap:6px; margin-bottom:14px; }
  .section-head .muted { font-size:11px; }
  .workflow-stage { padding:12px; }
  .workflow-value { font-size:24px; }
  .workflow-stage h3 { font-size:12px; }
  .workflow-detail { font-size:11px; }
  .matrix { height:520px; }
  .legend { gap:8px 12px; font-size:11px; }
  button { white-space:nowrap; }
}
@media(prefers-reduced-motion:reduce) { .side-nav-link { transition:none; } }
