:root{--bg:#f7f7f8;--card:#fff;--fg:#111;--muted:#666;--accent:#0b63b8}
.dark { --bg:#071427; --card:#0b1220; --fg:#e6eef8; --muted:#9fb0c8; --accent:#38bdf8 }
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg);color:var(--fg)}
.container{max-width:1100px;margin:0 auto;padding:16px}
.site-header{background:var(--card);border-bottom:1px solid rgba(0,0,0,0.06)}
.header-row{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px}
.brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.15rem}
.main-nav a{margin-right:12px;color:var(--fg);text-decoration:none}
.controls{display:flex;align-items:center;gap:8px}
.controls select, .controls button{padding:6px 8px;border-radius:6px;border:1px solid rgba(0,0,0,0.08);background:transparent}
.header-sub{background:transparent;padding:6px 0;color:var(--muted);font-size:0.95rem}
.main-content{padding:20px 0}
.grid{display:flex;gap:20px;align-items:flex-start}
.sidebar{width:220px}
.content-card{flex:1;background:var(--card);padding:18px;border-radius:10px}
.cards{display:flex;gap:12px}
.card{padding:12px;border-radius:8px}
@media (max-width:900px){
  .grid{flex-direction:column}
  .sidebar{width:100%}
  .main-nav{width:100%;display:flex;gap:12px;flex-wrap:wrap}
}