/* ===== Design tokens (light theme) ===== */
:root{
  --bg: #f8fafc;           /* page background */
  --panel: #ffffff;         /* cards/nav */
  --text: #0f172a;          /* main text */
  --muted: #475569;         /* secondary text */
  --brand: #5b7cfa;         /* primary brand */
  --brand-2: #22c55e;       /* accent (success) */
  --warn: #f59e0b;          /* warning */
  --danger: #ef4444;        /* danger */
  --border: #e2e8f0;        /* borders */
  --radius: 12px;           /* corner radius */
  --shadow: 0 10px 25px rgba(15,23,42,.08);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 Inter, system-ui, Segoe UI, Roboto, Arial}
a{color:var(--brand);text-decoration:none}
.container{max-width:1200px;margin:24px auto;padding:0 16px}

/* ===== Layout ===== */
.header{background:var(--panel);border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.main{padding:16px}

/* ===== Components ===== */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.card h1,.card h2{margin:0 0 10px 0}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width: 900px){ .grid-2,.grid-3{grid-template-columns:1fr} }

.input, select, textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);
  border-radius:10px;background:#fff;color:var(--text)
}

.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;
  padding:10px 14px;background:var(--brand);color:#fff;cursor:pointer}
.btn.secondary{background:#fff;color:var(--text);border:1px solid var(--border)}
.btn.ghost{background:transparent;border:1px dashed var(--border);color:var(--muted)}
.btn.danger{background:var(--danger)}

.badge{display:inline-block;border:1px solid var(--border);padding:2px 8px;border-radius:999px;font-size:.8rem;color:var(--muted)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top}
.table th{text-align:left;background:#f1f5f9}

.muted{color:var(--muted)}
.hr{height:1px;background:var(--border);margin:12px 0}

/* ===== Flash / Alerts ===== */
.alert{border-radius:10px;padding:10px 12px;border:1px solid var(--border);background:#fff}
.alert.success{border-color:#c6f6d5;background:#ecfdf5}
.alert.warn{border-color:#fde68a;background:#fffbeb}
.alert.error{border-color:#fecaca;background:#fef2f2}

/* ===== Small utilities ===== */
.stack{display:grid;gap:12px}
.right{display:flex;justify-content:flex-end}