/* PANSHI 總入口 — 共用 tokens 與元件
   2026-09-03：深色底 ＋ 淺灰面板。底色、頂欄、標題走深色系；
   所有「有字的框」（模塊、卡片、表格、對話框、登入框）在自己身上把整組變數換成淺色系。 */
:root{
  /* 底（深） */
  --bg:#0C1014; --panel:#111820; --panel-2:#161F28; --sunk:#0A0E12;
  --line:#1E2A34; --line-2:#273542;
  --txt:#DCE5EC; --txt-2:#9DB0BE; --txt-3:#6E8290;
  --sig:#E0A458; --sig-dim:#8A6430; --on-sig:#0C1014;
  --grid:rgba(140,180,210,.05);
  --glow:0 0 0 1px rgba(224,164,88,.25), 0 0 18px -6px rgba(224,164,88,.45);
  --c-grey:#8E9CA8; --c-slate:#6FA6FF; --c-indigo:#9A9CF4; --c-plum:#CC93E0;
  --c-amber:#E6AE63; --c-teal:#4FC0C0; --c-olive:#A8C65E; --c-brown:#C9956C;
  --c-blue:#6BC0E8; --c-green:#4CC095; --c-red:#EA7466;
  /* 面板（淺灰） */
  --pl-bg:#EEF1F4; --pl-bg-2:#E4E9EE; --pl-sunk:#DDE3EA; --pl-line:#CBD4DD; --pl-line-2:#B3BFCB;
  --pl-txt:#1A2230; --pl-txt-2:#465262; --pl-txt-3:#6F7D8B;
  --pl-sig:#A8660E; --pl-on-sig:#FFFFFF;
  --pl-c-grey:#5E6E7B; --pl-c-slate:#1F5FC4; --pl-c-indigo:#4A4FC0; --pl-c-plum:#8B3FA8;
  --pl-c-amber:#9A6410; --pl-c-teal:#0F7676; --pl-c-olive:#5A7318; --pl-c-brown:#8A5A2E;
  --pl-c-blue:#1A7398; --pl-c-green:#12795A; --pl-c-red:#BE3D31;
  --sans:"IBM Plex Sans","Noto Sans TC",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
  /* 字級階梯 */
  --fs-0:13px; --fs-1:14.5px; --fs-2:17px; --fs-3:19.5px; --fs-4:24px; --fs-5:34px;
}
/* 全淺色（☀）：底也變淺，面板變白 */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#E6EBF0; --panel:#FFFFFF; --panel-2:#F4F7F9; --sunk:#DDE3EA;
    --line:#CBD4DD; --line-2:#B3BFCB;
    --txt:#0E1720; --txt-2:#465262; --txt-3:#6F7D8B;
    --sig:#A8660E; --sig-dim:#C89A55; --on-sig:#FFFFFF;
    --grid:rgba(20,60,90,.06);
    --glow:0 0 0 1px rgba(168,102,14,.22), 0 6px 18px -10px rgba(168,102,14,.4);
    --c-grey:#5E6E7B; --c-slate:#1F5FC4; --c-indigo:#4A4FC0; --c-plum:#8B3FA8;
    --c-amber:#9A6410; --c-teal:#0F7676; --c-olive:#5A7318; --c-brown:#8A5A2E;
    --c-blue:#1A7398; --c-green:#12795A; --c-red:#BE3D31;
    --pl-bg:#FFFFFF; --pl-bg-2:#F4F7F9; --pl-sunk:#E6EBF0; --pl-line:#D3DCE4; --pl-line-2:#C2CDD7;
  }
}
:root[data-theme="light"]{
  --bg:#E6EBF0; --panel:#FFFFFF; --panel-2:#F4F7F9; --sunk:#DDE3EA;
  --line:#CBD4DD; --line-2:#B3BFCB;
  --txt:#0E1720; --txt-2:#465262; --txt-3:#6F7D8B;
  --sig:#A8660E; --sig-dim:#C89A55; --on-sig:#FFFFFF;
  --grid:rgba(20,60,90,.06);
  --glow:0 0 0 1px rgba(168,102,14,.22), 0 6px 18px -10px rgba(168,102,14,.4);
  --c-grey:#5E6E7B; --c-slate:#1F5FC4; --c-indigo:#4A4FC0; --c-plum:#8B3FA8;
  --c-amber:#9A6410; --c-teal:#0F7676; --c-olive:#5A7318; --c-brown:#8A5A2E;
  --c-blue:#1A7398; --c-green:#12795A; --c-red:#BE3D31;
  --pl-bg:#FFFFFF; --pl-bg-2:#F4F7F9; --pl-sunk:#E6EBF0; --pl-line:#D3DCE4; --pl-line-2:#C2CDD7;
}

/* ── 淺灰面板：把整組變數換掉，裡面的字、線、識別色全部跟著變 ── */
.mod, .card, .modal, .tbl, .box, .panel-lt{
  background:var(--pl-bg);
  --panel:var(--pl-bg); --panel-2:var(--pl-bg-2); --sunk:var(--pl-sunk);
  --line:var(--pl-line); --line-2:var(--pl-line-2);
  --txt:var(--pl-txt); --txt-2:var(--pl-txt-2); --txt-3:var(--pl-txt-3);
  --sig:var(--pl-sig); --on-sig:var(--pl-on-sig); --sig-dim:#C89A55;
  --glow:0 0 0 1px rgba(168,102,14,.22), 0 6px 18px -10px rgba(168,102,14,.4);
  --c-grey:var(--pl-c-grey); --c-slate:var(--pl-c-slate); --c-indigo:var(--pl-c-indigo); --c-plum:var(--pl-c-plum);
  --c-amber:var(--pl-c-amber); --c-teal:var(--pl-c-teal); --c-olive:var(--pl-c-olive); --c-brown:var(--pl-c-brown);
  --c-blue:var(--pl-c-blue); --c-green:var(--pl-c-green); --c-red:var(--pl-c-red);
  color:var(--txt);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:var(--fs-2);line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:56px 56px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
.m{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lbl{font-family:var(--mono);font-size:var(--fs-0);letter-spacing:.14em;text-transform:uppercase;font-weight:500}

/* 頂欄（深） */
.top{position:sticky;top:0;z-index:20;min-height:64px;display:flex;align-items:center;gap:18px;padding:8px 28px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.top img{height:32px}
.top .brand{display:flex;align-items:center;gap:12px}
.top .brand b{font-family:var(--mono);font-size:var(--fs-1);font-weight:600;display:block}
.top .brand span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3)}
.top nav{display:flex;gap:4px;margin-left:14px}
.top nav a{font-size:var(--fs-2);color:var(--txt-2);text-decoration:none;padding:7px 14px;border-bottom:2px solid transparent;white-space:nowrap}
.top nav a:hover{color:var(--txt)}
.top nav a[aria-current="page"]{color:var(--txt);border-bottom-color:var(--sig)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.me{display:flex;align-items:center;gap:9px;font-size:var(--fs-1);color:var(--txt-2)}
.av{width:28px;height:28px;display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--on-sig);background:var(--sig);flex:none}
.out{font-family:var(--mono);font-size:var(--fs-0);text-decoration:none;color:var(--txt-2);border:1px solid var(--line-2);padding:6px 12px;white-space:nowrap;background:none;cursor:pointer}
.out:hover{border-color:var(--sig);color:var(--sig)}
.uictl .uiseg button{font-size:var(--fs-0);padding:5px 11px}
.uictl .uiseg button .ic{font-size:15px}

/* 滿版 */
.wrap{position:relative;z-index:1;padding:32px clamp(20px,3vw,56px) 72px}
.sec{display:flex;align-items:center;gap:14px;margin:32px 0 16px}
.sec:first-child{margin-top:0}
.sec .lbl{color:var(--txt-3);white-space:nowrap}
.sec .rule{flex:1;height:1px;background:var(--line-2)}
.sec .cnt{font-family:var(--mono);font-size:var(--fs-1);color:var(--txt-3)}

.card{border:1px solid var(--line);padding:20px 22px;position:relative}
.card::before{content:"";position:absolute;left:-1px;top:-1px;width:12px;height:1px;background:var(--c,var(--sig))}
.card::after{content:"";position:absolute;left:-1px;top:-1px;width:1px;height:12px;background:var(--c,var(--sig))}
.pill{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;white-space:nowrap;color:var(--p);
  border:1px solid color-mix(in srgb,var(--p) 42%,transparent);background:color-mix(in srgb,var(--p) 10%,transparent);display:inline-flex;align-items:center;gap:7px}
.pill .led{width:6px;height:6px;background:var(--p);box-shadow:0 0 6px -1px var(--p)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.04em;border:1px solid var(--line-2);color:var(--txt-2);background:var(--panel);cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--sig);color:var(--txt)}
.btn.pri{background:var(--sig);color:var(--on-sig);border-color:var(--sig)}
.btn.pri:hover{box-shadow:var(--glow)}
.btn[disabled]{opacity:.5;cursor:default}
.in{background:var(--sunk);border:1px solid var(--line);padding:9px 12px;font-size:var(--fs-2);width:100%;color:var(--txt)}
.in:focus{border-color:var(--sig);outline:none}
.msg{font-size:var(--fs-1)}.msg.ok{color:var(--c-green)}.msg.err{color:var(--c-red)}
.banner{border:1px solid color-mix(in srgb,var(--c-amber) 55%,transparent);background:color-mix(in srgb,var(--c-amber) 14%,transparent);padding:14px 18px;font-size:var(--fs-2);margin-bottom:20px;color:var(--txt);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.banner b{color:var(--txt)}

/* modal（淺） */
.scrim{position:fixed;inset:0;background:rgba(4,7,10,.66);z-index:40;display:none}
.scrim.on{display:block}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(640px,94vw);max-height:90vh;overflow:auto;border:1px solid var(--line-2);z-index:50;padding:24px 28px 26px;display:none;box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.modal.on{display:block}
.modal h3{margin:0 0 18px;font-size:var(--fs-4);font-weight:500}
.f{display:grid;grid-template-columns:150px 1fr;gap:10px 14px;align-items:center;font-size:var(--fs-2);margin-bottom:12px}
.f label{color:var(--txt-3);font-size:var(--fs-1)}
.row-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}

@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.rise{animation:rise .28s cubic-bezier(.22,.8,.3,1) both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:700px){
  :root{--fs-2:16px;--fs-3:18px;--fs-4:21px;--fs-5:28px}
  .top{padding:6px 14px;gap:10px}.top .brand span{display:none}.me span:last-child{display:none}
  .wrap{padding:20px 14px 48px}
}