/* Kwetu dark navy theme */
:root{
  --top-a:#0f172a; --top-b:#1e293b; --accent:#38bdf8;
  --surface:#0b1220; --surface2:#0f1b2d;
  --border:#1f2937; --text:#e2e8f0; --muted:#94a3b8;
  --success:#16a34a; --info:#1d4ed8; --danger:#dc2626;
}
*{box-sizing:border-box}
body{
  margin:0; background:linear-gradient(180deg,var(--surface),var(--surface2) 40%);
  color:var(--text); font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
.container{max-width:1200px;margin:0 auto;padding:16px}
.topbar{
  background:linear-gradient(90deg,var(--top-a),var(--top-b));
  position:sticky; top:0; z-index:10; box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.brand{font-weight:700; letter-spacing:.3px}
.nav a{color:var(--text); text-decoration:none; margin:0 8px; opacity:.9}
.nav a:hover{opacity:1; border-bottom:2px solid var(--accent)}
.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:16px 0}
.card{background:#0f1b2d; border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:0 6px 18px rgba(0,0,0,.25)}
.metric{font-size:32px; font-weight:800}
.label{color:var(--muted); margin-top:6px}
.table{width:100%; border-collapse:collapse; background:#0f1b2d; border:1px solid var(--border); border-radius:12px; overflow:hidden}
.table th,.table td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left}
.table th{font-weight:600; color:#cbd5e1; background:#0d1626}
.actions .btn{margin-bottom:12px}
.btn{
  display:inline-block; padding:8px 12px; border-radius:12px; border:1px solid var(--border);
  background:#12253b; color:var(--text); text-decoration:none; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.25)
}
.btn:hover{filter:brightness(1.1)}
.btn.secondary{background:#0d1626}
.btn.danger{background:#2b0c0c; border-color:#3d0f0f}
.form label{display:block; margin:10px 0}
.form input,.form select,.form textarea{
  width:100%; padding:10px; border-radius:10px; border:1px solid var(--border);
  background:#0d1626; color:var(--text)
}
.form-actions{margin-top:12px}
.flash .alert{padding:10px 12px; border-left:4px solid var(--info); margin:8px 0; background:#0d1626}
.alert.success{border-color:var(--success)}
.alert.info{border-color:var(--info)}
.alert.warning{border-color:#f59e0b}
.footer{padding:16px; text-align:center; color:var(--muted)}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid{grid-template-columns:1fr} .nav{display:flex; flex-wrap:wrap} .nav a{margin:4px 8px}}