@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#fff;--ink:#0f172a;--muted:#64748b;--line:#e2e8f0;--soft:#f8fafc;--chip:#f1f5f9;
  --brand:#6C50A0;--brand-soft:#f3eefc;--brand2:#91C73E;
  --hot:#dc2626;--warm:#f59e0b;--cool:#0ea5e9;--prog:#16a34a;--up:#6366f1;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}

/* shared top bar */
.topbar{display:flex;align-items:center;gap:14px;padding:12px 22px;border-bottom:1px solid var(--line);
  border-top:3px solid var(--brand);position:sticky;top:0;background:#fff;z-index:30}
.topbar img{height:30px}
.topbar .bn{font-size:12px;font-weight:800;color:var(--brand);letter-spacing:.04em;text-transform:uppercase;line-height:1.15}
.topbar .bn small{display:block;color:var(--muted);font-weight:600;text-transform:none;letter-spacing:0;font-size:11px}
.topbar nav{display:flex;gap:6px;margin-left:18px}
.topbar nav a{font-size:13px;font-weight:600;color:#334155;text-decoration:none;padding:7px 12px;border-radius:9px}
.topbar nav a:hover{background:var(--soft)}
.topbar nav a.active{background:var(--brand-soft);color:var(--brand)}
.topbar .who{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.topbar .who b{color:var(--ink);font-weight:600}
.btn{font:inherit;font-size:12.5px;font-weight:700;border:1px solid var(--line);background:#fff;
  color:#334155;border-radius:9px;padding:7px 12px;cursor:pointer}
.btn:hover{background:var(--soft)}
.btn.brand{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.brand:hover{filter:brightness(1.08)}