:root{
  --bg:#eef1f5; --panel:rgba(255,255,255,.92); --panel-solid:#fff; --ink:#1d2430; --ink-2:#5b6573;
  --line:#d9dee6; --accent:#1f6feb; --accent-soft:#e3edff; --good:#1a8f4c; --warn:#c77700; --bad:#d1352b;
  --radius:12px; --shadow:0 6px 24px rgba(20,30,50,.10);
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
a{color:var(--accent)}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:10px 18px;
  background:#121822;color:#fff}
.topbar .brand{font-weight:700;letter-spacing:.5px;white-space:nowrap}
.topbar .brand small{font-weight:400;opacity:.65;margin-left:8px}
.topbar nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.topbar nav a{color:#cfd7e3;text-decoration:none;padding:6px 12px;border-radius:8px;font-size:14px}
.topbar nav a:hover{background:#243042;color:#fff}
.topbar nav a.active{background:var(--accent);color:#fff}
@media (max-width:640px){.topbar{padding:8px 10px;gap:8px}.topbar .brand{font-size:14px}.topbar .brand small{display:none}
  .topbar nav{flex-wrap:nowrap;gap:2px}.topbar nav a{padding:5px 7px;font-size:12.5px;white-space:nowrap}}