/* ── design tokens (spec §6) ───────────────────────────── */
:root{
  --ink:#0b0f17;
  --panel:#111826;
  --panel2:#0e141f;
  --line:#1e2836;
  --txt:#dfe6f0;
  --dim:#8a97ab;
  --gold:#e6b455;
  --long:#3fb95a;
  --short:#f0553f;
  --info:#58a6ff;

  --display:'Space Grotesk','Noto Sans TC',system-ui,sans-serif;
  --body:'Noto Sans TC',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --r:10px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  min-height:100vh;
  background:var(--ink);
  color:var(--txt);
  font-family:var(--body);
  font-size:15px;
  line-height:1.75;
  overflow-x:hidden;
}

/* background glows */
.glow{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;}
.glow-a{width:60vw;height:60vw;top:-22vw;left:-14vw;background:radial-gradient(circle,#3b46a8 0%,transparent 68%);opacity:.16;}
.glow-b{width:52vw;height:52vw;bottom:-24vw;right:-16vw;background:radial-gradient(circle,var(--gold) 0%,transparent 68%);opacity:.09;}

main{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:26px 20px 90px;}

code{font-family:var(--mono);font-size:.88em;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--gold);}
b,strong{color:#fff;font-weight:700;}
.dim{color:var(--dim);}
.tiny{font-size:12.5px;}
.err{color:var(--short);font-size:13px;min-height:1em;margin:0;}
.moon{color:var(--gold);}

/* ── 通行碼閘門 ───────────────────────────── */
.gate{position:fixed;inset:0;z-index:50;background:rgba(11,15,23,.94);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;}
.gate[hidden]{display:none;}
.gate-box{width:min(360px,100%);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:32px 26px;text-align:center;}
.gate-mark{font-size:34px;color:var(--gold);line-height:1;}
.gate-box h1{font-family:var(--display);font-size:20px;letter-spacing:.04em;margin:10px 0 4px;}
.gate-box p{margin:0 0 18px;font-size:13.5px;}
.gate-box input{width:100%;margin-bottom:12px;}
.gate-box .btn{width:100%;}
.gate-box .err{margin-top:12px;}

/* ── 頂欄 ─────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 20px;
  background:rgba(11,15,23,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{font-family:var(--display);font-size:14px;letter-spacing:.06em;color:var(--txt);white-space:nowrap;}
.viewnav{display:flex;gap:6px;margin-left:auto;}
.viewnav button{
  font-family:var(--display);font-size:13px;letter-spacing:.03em;
  background:transparent;color:var(--dim);
  border:1px solid transparent;border-radius:999px;padding:6px 16px;cursor:pointer;
}
.viewnav button:hover{color:var(--txt);}
.viewnav button.active{color:var(--gold);border-color:rgba(230,180,85,.4);background:rgba(230,180,85,.08);}

/* ── 通用元件 ─────────────────────────────── */
.hero{padding:30px 4px 10px;}
.hero h1{font-family:var(--display);font-size:30px;margin:0 0 6px;letter-spacing:.02em;}
.hero p{margin:0;font-size:14px;}

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:22px 24px;
  margin:16px 0;
}
.card.accent{border-color:rgba(230,180,85,.32);background:linear-gradient(180deg,rgba(230,180,85,.05),transparent 55%),var(--panel);}
.card.dev{border-color:rgba(88,166,255,.3);}

.card h2{
  font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:.03em;
  margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
}
.card h3{font-family:var(--display);font-size:14px;letter-spacing:.03em;color:var(--gold);margin:22px 0 8px;display:flex;align-items:baseline;gap:8px;}
.card h3:first-child{margin-top:0;}
.sub{font-family:var(--body);font-size:12px;font-weight:400;color:var(--dim);letter-spacing:0;}

.badge{
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;
  color:var(--info);border:1px solid rgba(88,166,255,.45);background:rgba(88,166,255,.1);
  border-radius:999px;padding:2px 9px;
}
.badge.small{font-size:9.5px;padding:1px 7px;}

.card ul,.card ol{margin:0;padding-left:1.3em;}
.card li{margin:7px 0;}
.card li ul{margin-top:5px;}
.lede li{margin:12px 0;}
.mtf{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin:0 0 14px;font-size:14px;}

blockquote{
  margin:0 0 14px;padding:12px 18px;
  border-left:3px solid var(--gold);background:rgba(230,180,85,.06);border-radius:0 8px 8px 0;
  font-family:var(--display);font-size:16px;color:#fff;
}
.notice{background:rgba(88,166,255,.07);border:1px solid rgba(88,166,255,.25);border-radius:8px;padding:11px 15px;margin:0 0 16px;font-size:13.5px;}
.note{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:11px 15px;margin:14px 0 0;font-size:13.5px;color:var(--dim);}
.warn{background:rgba(240,85,63,.08);border:1px solid rgba(240,85,63,.3);border-radius:8px;padding:11px 15px;margin:14px 0 0;font-size:13.5px;color:#f6b3a7;}
.q{margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--line);font-size:13.5px;color:var(--dim);}

.tag{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.05em;border-radius:5px;padding:2px 8px;white-space:nowrap;}
.tag.long{color:var(--long);background:rgba(63,185,90,.12);border:1px solid rgba(63,185,90,.4);}
.tag.short{color:var(--short);background:rgba(240,85,63,.12);border:1px solid rgba(240,85,63,.4);}

.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.col{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:14px 18px;}
.col h3{margin-top:0;}
.long-col{border-top:2px solid var(--long);}
.long-col h3{color:var(--long);}
.short-col{border-top:2px solid var(--short);}
.short-col h3{color:var(--short);}
.col p{margin:0 0 8px;font-size:13px;}

.exits li{margin:10px 0;}
.ob{list-style:none;padding:0;}
.ob li{padding:10px 14px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);}
.good{color:var(--long);}
.bad{color:var(--short);}
.ob li.good{border-left:3px solid var(--long);}
.ob li.bad{border-left:3px solid var(--short);}

/* ── 表格 ─────────────────────────────────── */
.tablewrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th,td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
thead th{
  font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.08em;
  color:var(--dim);text-transform:uppercase;white-space:nowrap;
  border-bottom:1px solid var(--line);
}
tbody tr:last-child td{border-bottom:none;}
.sessions .prime td{background:rgba(230,180,85,.05);}

/* ── 按鈕與表單 ───────────────────────────── */
.btn{
  font-family:var(--display);font-size:13px;letter-spacing:.03em;
  border-radius:8px;padding:9px 20px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel2);color:var(--txt);
}
.btn:hover{border-color:var(--dim);}
.btn.primary{background:var(--gold);color:#1a1206;border-color:var(--gold);font-weight:700;}
.btn.primary:hover{filter:brightness(1.08);}
.btn.ghost{background:transparent;color:var(--dim);}
.btn.tiny{font-size:11.5px;padding:5px 12px;}
.btn.danger{color:var(--short);border-color:rgba(240,85,63,.35);}
.btn.danger:hover{background:rgba(240,85,63,.1);border-color:var(--short);}
.btn:disabled{opacity:.5;cursor:not-allowed;}

input,select,textarea{
  width:100%;
  font-family:var(--body);font-size:14px;color:var(--txt);
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:8px 11px;
}
input[type=number],input[type=date],input[type=url]{font-family:var(--mono);font-size:13.5px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px rgba(230,180,85,.14);}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 15px) 51%,calc(100% - 10px) 51%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px;}
textarea{resize:vertical;line-height:1.6;}
::placeholder{color:#5a6678;}

.fields{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;}
.fields label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--dim);letter-spacing:.02em;}
.fields label small{font-family:var(--mono);font-size:11px;color:var(--gold);letter-spacing:0;}
.fields .span2{grid-column:span 2;}
.fields .span-all{grid-column:1/-1;}
.fields .hl input{border-color:rgba(230,180,85,.4);background:rgba(230,180,85,.05);}
.formbar{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap;}
#formCard.editing{border-color:var(--gold);}

/* ── KPI 卡 ───────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:6px;}
.kpi{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:14px 16px;}
.kpi .k{font-size:11px;letter-spacing:.06em;color:var(--dim);}
.kpi .v{font-family:var(--mono);font-size:26px;font-weight:600;line-height:1.3;}
.kpi .h{font-size:11.5px;color:var(--dim);}
.kpi.hero-kpi{border-color:rgba(230,180,85,.4);background:linear-gradient(180deg,rgba(230,180,85,.07),var(--panel2));}

.pos{color:var(--long);}
.neg{color:var(--short);}
.be{color:var(--gold);}
.mono{font-family:var(--mono);}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.stats td.num,.stats th.num{text-align:right;font-family:var(--mono);white-space:nowrap;}
.stats tr.empty td{color:#4d5768;}

.diag{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.dcard{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:13px 15px;}
.dcard .k{font-size:11.5px;color:var(--dim);letter-spacing:.03em;}
.dcard .v{font-family:var(--mono);font-size:19px;font-weight:600;}
.dcard .h{font-size:11.5px;color:var(--dim);}
.dcard.alert{border-color:rgba(240,85,63,.35);}

/* ── 紀錄表 ───────────────────────────────── */
.trades td{white-space:nowrap;}
.trades td.note-cell{white-space:normal;min-width:190px;max-width:290px;color:var(--dim);font-size:12.5px;}
.trades tbody tr:hover td{background:rgba(255,255,255,.022);}
.trades tbody tr.is-editing td{background:rgba(230,180,85,.08);}
.trades .r{font-family:var(--mono);font-weight:600;}
.trades .m{font-family:var(--mono);font-size:12.5px;color:var(--dim);}
.trades .acts{display:flex;gap:6px;}
.flag{font-family:var(--mono);font-size:10.5px;border-radius:4px;padding:1px 6px;border:1px solid var(--line);color:var(--dim);}
.flag.warn-flag{color:var(--short);border-color:rgba(240,85,63,.4);background:rgba(240,85,63,.08);}

.empty{text-align:center;padding:46px 20px;color:var(--dim);}
.empty .m{font-size:32px;color:var(--gold);line-height:1;}
.empty p{margin:10px 0 0;font-size:14px;}

/* ── RWD ──────────────────────────────────── */
@media (max-width:900px){
  .fields{grid-template-columns:repeat(2,1fr);}
  .kpis{grid-template-columns:repeat(2,1fr);}
  .grid2,.split{grid-template-columns:1fr;}
  .diag{grid-template-columns:1fr;}
}
@media (max-width:560px){
  main{padding:18px 13px 70px;}
  .card{padding:18px 15px;}
  .fields{grid-template-columns:1fr;}
  .fields .span2,.fields .span-all{grid-column:1/-1;}
  .kpis{grid-template-columns:1fr 1fr;}
  .brand{font-size:12px;}
  .hero h1{font-size:24px;}
}