/* 《舟小蟹执法训练营》设计系统 — 视觉令牌与组件复用原型 v0.2（用户已手机走查确认） */
:root{
  --bg:#F2F6F6; --surface:#FFFFFF; --surface-2:#E9F0F1; --ink:#17262E; --muted:#5B6E78;
  --line:#D5E0E4; --accent:#0F7A78; --accent-ink:#0B5D5B; --accent-soft:#E1F0EF;
  --ok:#2E7D5B; --ok-soft:#E3F1E9; --warn:#96591A; --warn-soft:#F6EDDC; --danger:#A63B2E; --danger-soft:#F7E7E4;
  --scrim:rgba(16,30,34,.42);
  --tv-bg:#0E1A20; --tv-ink:#E9F1F3; --tv-muted:#8FA6AE; --tv-line:#243642;
  --shadow:0 1px 2px rgba(23,38,46,.06),0 10px 28px rgba(23,38,46,.09);
  --on-accent:#FFFFFF;
  --serif:'Noto Serif SC','Songti SC',serif;
  --sans:'Noto Sans SC',-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0F1518; --surface:#182127; --surface-2:#1F2B32; --ink:#E8EFF2; --muted:#97A9B2;
  --line:#2A3941; --accent:#48BDB7; --accent-ink:#8AD6D1; --accent-soft:#15302F;
  --ok:#7CC49E; --ok-soft:#1B2F25; --warn:#DAA45E; --warn-soft:#322817; --danger:#E08A7D; --danger-soft:#3A211D;
  --scrim:rgba(0,0,0,.55);
  --tv-bg:#0B141A; --tv-ink:#E9F1F3; --tv-muted:#8FA6AE; --tv-line:#22333E;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 12px 32px rgba(0,0,0,.4);
  --on-accent:#05312F;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0F1518; --surface:#182127; --surface-2:#1F2B32; --ink:#E8EFF2; --muted:#97A9B2;
  --line:#2A3941; --accent:#48BDB7; --accent-ink:#8AD6D1; --accent-soft:#15302F;
  --ok:#7CC49E; --ok-soft:#1B2F25; --warn:#DAA45E; --warn-soft:#322817; --danger:#E08A7D; --danger-soft:#3A211D;
  --scrim:rgba(0,0,0,.55);
  --tv-bg:#0B141A; --tv-ink:#E9F1F3; --tv-muted:#8FA6AE; --tv-line:#22333E;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 12px 32px rgba(0,0,0,.4);
  --on-accent:#05312F;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6;
  padding-block:12px 32px;padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));
}
a{color:var(--accent-ink)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
h1,h2,h3{text-wrap:balance;margin:0}
.wrap{max-width:1060px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.app{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:12px;min-height:calc(100dvh - 60px)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.small{font-size:12.5px;color:var(--muted)}
.k{font-size:12px;color:var(--muted)}
.brand h1{font-family:var(--serif);font-size:22px;letter-spacing:.02em}
.brand .sub{color:var(--muted);font-size:12.5px;margin-top:4px}
.top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between}

/* 控件 */
.btn{padding:8px 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-weight:500;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.dangerb{border-color:var(--danger);color:var(--danger)}
.btn.block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btnrow{display:flex;flex-wrap:wrap;gap:6px}
.btnrow .btn{padding:6px 12px;font-size:12.5px}
.seg{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:4px}
.seg button{padding:7px 16px;border-radius:9px;font-weight:500;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

/* 卡片与列表 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.card h3{font-size:13.5px}
.note{font-size:12.5px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:8px 12px}
.banner{border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px}
.banner.info{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
.banner.warnb{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.banner.okb{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.banner.dangerb{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.rowitem{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:8px 2px;border-bottom:1px dashed var(--line);font-size:13px;text-align:left;width:100%}
.rowitem:last-child{border-bottom:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:11.5px;padding:2.5px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-weight:500;white-space:nowrap;display:inline-block}
.chip.teal{background:var(--accent-soft);color:var(--accent-ink)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.danger{background:var(--danger-soft);color:var(--danger)}

/* 顶栏与阶段条 */
.topbar{position:sticky;top:0;z-index:6;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow)}
.topbar .line1{display:flex;align-items:center;justify-content:space-between;gap:8px}
.topbar .case{font-family:var(--serif);font-weight:700;font-size:14.5px}
.stagebar{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--surface-2);border-radius:10px;flex-wrap:wrap}
.stagebar .lab{font-size:12.5px;color:var(--muted)}
.dots{display:flex;gap:4px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.dots i.done{background:var(--accent);opacity:.45}
.dots i.cur{background:var(--accent)}
.timer{font-family:var(--mono);font-size:20px;font-variant-numeric:tabular-nums}
.timer.warnv{color:var(--warn)}
.timer.dangerv{color:var(--danger)}

/* 入口网格 */
.entry{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.entry button{padding:12px 8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);display:flex;flex-direction:column;gap:4px;align-items:flex-start;font-weight:500}
.entry button .b{font-family:var(--mono);font-size:12px;color:var(--accent-ink)}

/* 表单 */
.form{display:flex;flex-direction:column;gap:8px}
.form label{font-size:12.5px;color:var(--muted)}
.form input,.form textarea,.form select{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--ink);padding:8px 10px;font:inherit}
.form textarea{resize:vertical;min-height:44px}
.opt{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:13px}
.opt input{accent-color:var(--accent);width:auto}
.evchips{display:flex;flex-wrap:wrap;gap:6px}
.evchips button{padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:12.5px}
.evchips button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);font-weight:600}

/* 表格与时间线 */
.mtable{width:100%;border-collapse:collapse;font-size:12.5px}
.mtable th,.mtable td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
.mtable th{color:var(--muted);font-weight:500}
.mtable .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.mtable tr.hl td{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.timeline{display:flex;flex-direction:column;gap:6px}
.timeline .t{display:flex;gap:8px;font-size:12.5px;align-items:baseline}
.timeline .t b{font-weight:600;white-space:nowrap}

/* 弹层（底部抽屉与居中模态） */
.layer{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:flex-end;justify-content:center;z-index:40}
.layer .sheet{width:100%;max-width:560px;max-height:86dvh;overflow-y:auto;background:var(--surface);border-radius:18px 18px 0 0;padding:14px;display:flex;flex-direction:column;gap:10px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.layer .sheet h3{font-size:14.5px}
.sheet-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
@media (min-width:640px){ .layer{align-items:center} .layer .sheet{border-radius:18px;max-height:80vh} }
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:999px;font-size:13px;z-index:60;box-shadow:var(--shadow);max-width:88vw}
.fab{position:fixed;right:14px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:8;background:var(--surface);box-shadow:var(--shadow)}

/* 进度与得分 */
.progress{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.progress i{display:block;height:100%;background:var(--accent);transition:width .3s linear}
.scorebar{display:flex;flex-direction:column;gap:6px}
.scorebar .row{display:grid;grid-template-columns:88px 1fr 52px;gap:8px;align-items:center;font-size:12.5px}
.scorebar .bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.scorebar .bar i{display:block;height:100%;background:var(--accent)}
.scoretotal{font-family:var(--mono);font-size:34px;line-height:1}
.itemscore{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:3px 0;border-bottom:1px dashed var(--line)}
.itemscore:last-child{border-bottom:0}

/* 主持端 */
.hostgrid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:12px;align-items:start}
@media (max-width:860px){ .hostgrid{grid-template-columns:1fr} }
.team{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--surface);display:flex;flex-direction:column;gap:8px}
.team .h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.kpis{display:flex;gap:14px;flex-wrap:wrap}
.kpi .v{font-family:var(--mono);font-size:17px}
.teamgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.hostcols{display:flex;flex-direction:column;gap:12px}

/* 大屏 */
.bigscreen{background:var(--tv-bg);color:var(--tv-ink);border-radius:16px;padding:26px clamp(16px,4vw,44px);aspect-ratio:16/9;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.tvline{height:8px;border-radius:999px;background:var(--tv-line);overflow:hidden}
.tvline i{display:block;height:100%;background:var(--accent);transition:width .6s}
.tvfocus{background:rgba(255,255,255,.06);border-radius:12px;padding:10px 14px;font-size:13px;display:flex;flex-direction:column;gap:4px}

/* 登录/管理 */
.centerbox{max-width:420px;margin:8vh auto 0;display:flex;flex-direction:column;gap:12px}
.adminwrap{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.mono.code{letter-spacing:.14em;font-size:15px}

@media (max-width:560px){
  body{font-size:13.5px}
  .entry button{padding:10px 6px}
  .form input,.form textarea,.form select{font-size:16px}
  .mtable th,.mtable td{padding:5px 6px;font-size:12px}
  .timer{font-size:18px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}