/* 全站：色彩 token、版面、導覽列、表單、表格。技能樹元件在 tree.css */
:root{
  --bg:#0b1016; --surface:#121a23; --surface-2:#19232f; --line:#27343f;
  --fg:#e9eef3; --muted:#92a1b1; --faint:#5e6c7a;
  --lit:#f2c14e; --lit-soft:rgba(242,193,78,.14); --lit-glow:rgba(242,193,78,.38);
  --weak:#f0923b; --weak-soft:rgba(240,146,59,.14);
  --open:#5ec3d2; --open-soft:rgba(94,195,210,.12);
  --lock:#6b7684; --block:#e4657e; --dem:#8fb3ff; --good:#5fc48a;
  --font-display:"Chakra Petch","Noto Sans TC",system-ui,"Microsoft JhengHei",sans-serif;
  --font-body:"Noto Sans TC",system-ui,"Microsoft JhengHei","PingFang TC",sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f3f5f8; --surface:#ffffff; --surface-2:#eef1f5; --line:#d5dce4;
    --fg:#182230; --muted:#5a6878; --faint:#8a97a6;
    --lit:#b9850f; --lit-soft:rgba(185,133,15,.12); --lit-glow:rgba(185,133,15,.28);
    --weak:#c75f12; --weak-soft:rgba(199,95,18,.12);
    --open:#177f8e; --open-soft:rgba(23,127,142,.1);
    --lock:#98a3b0; --block:#c43d5c; --dem:#3b6fd6; --good:#1f9a57;
    color-scheme:light;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:14px;line-height:1.55}
h1,h2,h3{text-wrap:balance;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--open)}
.wrap{max-width:1360px;margin:0 auto;padding-inline:16px;padding-block:20px 48px}
.narrow{max-width:860px}
.eyebrow{font-family:var(--font-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.btn{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 14px;cursor:pointer;color:var(--fg);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--open);border-color:var(--open);color:#06161a;font-weight:700}
.btn.primary:hover{filter:brightness(1.08)}
.btn.warn{border-color:var(--block);color:var(--block)}
.btn.small{padding:4px 10px;font-size:12.5px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn:focus-visible,.node:focus-visible,.lv button:focus-visible,.link:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--open);outline-offset:2px}
input[type=text],input[type=password],select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:7px 10px;min-width:0}
.link{background:none;border:0;padding:0;cursor:pointer;color:var(--open);text-decoration:underline;text-underline-offset:2px}

/* 導覽列 */
.nav{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line)}
.nav .in{max-width:1360px;margin:0 auto;padding:8px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.nav .brand{font-family:var(--font-display);font-weight:700;letter-spacing:.04em;margin-right:6px}
.nav a.tab{color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:8px;font-size:13.5px}
.nav a.tab:hover{background:var(--surface-2);color:var(--fg)}
.nav a.tab.active{color:var(--fg);background:var(--surface-2);font-weight:600}
.nav .me{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.nav .me b{color:var(--fg)}
.badge{display:inline-block;border:1px solid currentColor;border-radius:999px;padding:1px 9px;font-size:11.5px;font-family:var(--font-display);letter-spacing:.04em}
.badge.admin{color:#c99bff} .badge.leader{color:var(--open)} .badge.member{color:var(--good)} .badge.viewer{color:var(--muted)}
.pwpanel{max-width:1360px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px dashed var(--line);font-size:13px}

/* 頁首與分頁 */
.pagehead{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.pagehead h1{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:.02em;line-height:1.1;margin-top:6px}
.pagehead .lede{color:var(--muted);max-width:68ch;margin:8px 0 0}
.steps{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--muted);margin:4px 0 0}
.steps span{border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.steps span.on{border-color:var(--open);color:var(--open)}
.pager{display:flex;justify-content:space-between;gap:10px;margin-top:28px;border-top:1px solid var(--line);padding-top:16px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;margin-bottom:14px}
.toolbar label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.status{font-size:12.5px;color:var(--muted)}
.status.err{color:var(--block)}
.status.ok{color:var(--good)}

/* 內容卡 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;min-width:0}
.card h2{font-size:17px;margin-bottom:8px}
.card h3{font-size:14px;margin:12px 0 4px}
.card p{margin:0 0 8px}
.card ul,.card ol{margin:0 0 8px;padding-left:20px}
.card li{margin:2px 0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.prose{max-width:72ch}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px}
.kv b{color:var(--muted);font-weight:500}
.lvbox{border-left:3px solid var(--lit);padding-left:10px;margin:6px 0}

/* 表格 */
table.tbl{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl th{color:var(--muted);font-weight:500;font-size:12px;letter-spacing:.04em}
.tbl tr.off td{opacity:.45}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--surface-2)}
.tbl .num{text-align:right}
.tblwrap{overflow-x:auto}
.mini{display:inline-block;width:60px;height:6px;border-radius:3px;background:var(--surface-2);position:relative;vertical-align:middle;margin-right:6px;overflow:hidden}
.mini::after{content:"";position:absolute;inset:0;width:var(--w,0%);background:var(--lit);border-radius:3px}
.mini.dem::after{background:var(--dem)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot.on{background:var(--good)} .dot.off{background:var(--lock)}

/* 表單 */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;align-items:end}
.form label{display:grid;gap:3px;font-size:12px;color:var(--muted)}
.form input,.form select{width:100%}
.inline{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}

/* 登入 */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.login .card{width:min(420px,100%)}
.login h1{font-family:var(--font-display);font-size:24px;margin-bottom:4px}
.login .form{grid-template-columns:1fr}
.login .hint{font-size:12.5px;color:var(--muted);margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}

/* 側欄打開時把內容往左讓開，被側欄蓋住的節點仍點得到 */
@media (min-width:981px){
  body.st-drawer-open .wrap{padding-right:436px;transition:padding-right .15s}
}
@media (max-width:980px){
  .grid2,.grid3{grid-template-columns:1fr}
  .pagehead h1{font-size:24px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }