:root{
  --bg: #0f1115;
  --surface: #151923;
  --surface-2:#1b2130;
  --text:#e6e6e6;
  --muted:#9aa4b2;
  --brand:#5aa2ff;
  --brand-2:#7bc6ff;
  --border:#242b3d;
  --radius:16px;
  --w:1120px;
}
html.theme-light{
  --bg:#f7f8fb; --surface:#ffffff; --surface-2:#f2f4f8; --text:#0f1320; --muted:#596275; --brand:#2d7bff; --brand-2:#79afff; --border:#e4e7ee;
}
*{box-sizing:border-box} body{margin:0; font:16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial; color:var(--text); background:var(--bg)}
.container{max-width:var(--w); margin:0 auto; padding:0 18px}
.site-header{position:sticky; top:0; z-index:10; background:rgba(21,25,35,.8); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.navbar{display:flex; align-items:center; padding:14px 0}
.brand{display:flex; gap:10px; color:var(--text); text-decoration:none; font-weight:700}
.brand .dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.nav-toggle{margin-left:auto; border:1px solid var(--border); background:transparent; color:var(--text); border-radius:10px; padding:10px 12px; display:inline-flex}
.nav{display:flex; gap:6px; padding:8px 0}
.nav a{color:var(--text); text-decoration:none; padding:8px 12px; border-radius:10px}
.nav a:hover{background:var(--surface-2)}
.nav .right{margin-left:auto}
@media (max-width:860px){ .nav{display:none} .nav.open{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); padding:8px; border-radius:12px} }
main{padding:24px 0 40px}
.card{background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--border); border-radius:var(--radius); padding:18px}
.small{font-size:13px}.muted{color:var(--muted)}
.site-footer{border-top:1px solid var(--border); background:var(--surface); color:var(--muted); padding:18px 0 28px}
.site-footer .footer-nav{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:8px}
.btn{display:inline-flex; gap:8px; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:#1c2435; color:#e9f1ff; text-decoration:none}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2)); border:none; color:#0b1220; font-weight:700}
/* Print */
@media print{
  body{background:#fff; color:#000}
  .site-header,.nav,.site-footer{display:none}
  .card{border:none; box-shadow:none; padding:0}
}