:root{
  color-scheme: dark;
  --bg:#070a0f;
  --bg2:#0b0f14;
  --panel:#0e141c;
  --panel-soft:rgba(14,20,28,.72);
  --panel-alt:rgba(11,16,23,.48);
  --text:#e6edf6;
  --muted:#a3b0c2;
  --line:rgba(230,237,246,.12);
  --ember:#c1773a;
  --amber:#f0a010;
  --btn:#2b1d12;
  --btn2:#3a2617;
  --shadow:0 14px 40px rgba(0,0,0,.25);
  --focus:0 0 0 3px rgba(240,160,16,.25);
}

.site-header,
.topbar,
.nav{
  position:sticky;
  top:14px;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel-soft);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow);
}

.brand{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--text)}
.mark{width:34px;height:34px;border-radius:12px;border:1px solid rgba(230,237,246,.10);background:rgba(11,16,23,.6);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.mark img{width:26px;height:26px;object-fit:contain;display:block}
.brand small{display:block;font-size:12px;color:var(--muted);font-weight:800}

.navRight{display:flex;align-items:center;gap:12px;flex:1;justify-content:flex-end}
.navlinks{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-wrap:wrap;gap:8px}
.navlinks a{padding:10px 14px;border-radius:999px;font-size:14px;font-weight:700;color:var(--muted)}
.navlinks a:hover,.navlinks a.active{background:rgba(255,255,255,.08);color:var(--text)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:var(--text);font-weight:700;font-size:14px;cursor:pointer}

[data-theme-toggle],#themeToggle{display:none !important}
.theme-icon{width:1.1em;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.theme-label{white-space:nowrap}
[data-theme-toggle]:focus-visible,#themeToggle:focus-visible{outline:none;box-shadow:var(--focus)}

.section p,
.card p,
.sub,
ul,
li,
.meta-list,
.badge,
.footer,
.footer a{color:var(--muted)}

.section h2,
.card h3,
h1,
h2,
h3,
.btn,
.navlinks a,
.brand{color:var(--text)}

@media (max-width:980px){
  .site-header,
  .topbar,
  .nav{border-radius:16px}
  .navlinks{position:static;transform:none;justify-content:flex-start;flex:1}
  .navRight{width:100%;justify-content:space-between;flex-wrap:wrap}
}