:root{
  --bg:#0f1724; /* dark navy */
  --card:#0b1220;
  --muted:#9aa4b2;
  --accent:#3b82f6;
  --glass: rgba(255,255,255,0.03);
  --radius:12px;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial}
body{background:linear-gradient(180deg,var(--bg),#071021);color:#e6eef8}
.container{max-width:1100px;margin:0 auto;padding:20px}
.site-header{background:transparent;padding:18px 0}
.site-header h1{margin:0;font-size:20px}
.site-header input{margin-top:8px;padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:var(--glass);color:inherit;width:100%;max-width:380px}

.main-grid{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
.sidebar{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:16px;border-radius:var(--radius);box-shadow:0 6px 20px rgba(2,6,23,0.6)}
.sidebar ul{list-style:none;padding:0;margin:0}
.sidebar li{margin-bottom:8px}
.sidebar a{color:var(--muted);text-decoration:none;display:block;padding:8px;border-radius:8px}
.sidebar a:hover{background:rgba(59,130,246,0.08);color:var(--accent)}
#new-topic{margin-top:12px;padding:10px;border-radius:8px;width:100%;border:none;background:rgba(59,130,246,0.15);color:var(--accent);cursor:pointer}

.content{background:var(--card);padding:22px;border-radius:var(--radius);min-height:360px}
.content h2{margin-top:0}
.tips ul{margin:0;padding-left:18px}

.site-footer{padding:16px 0;text-align:center;color:var(--muted)}

/* Responsive */
@media (max-width:880px){
  .main-grid{grid-template-columns:1fr;}
  .sidebar{order:2}
  .content{order:1}
}

/* Utilities for math content */
.kv{display:flex;gap:12px;align-items:center}
.math-box{background:rgba(255,255,255,0.02);padding:12px;border-radius:10px}
.form-row{display:flex;gap:8px;flex-wrap:wrap}
input[type="number"], input[type="text"]{padding:8px;border-radius:6px;border:1px solid rgba(255,255,255,0.05);background:transparent;color:inherit}
button.primary{padding:8px 12px;border-radius:6px;border:none;background:var(--accent);color:#07203a;cursor:pointer}
.result{margin-top:12px;padding:10px;border-radius:8px;background:rgba(0,0,0,0.25)}

code{background:rgba(255,255,255,0.03);padding:2px 6px;border-radius:6px}