/* ===== tokens ======================================================= */
:root{
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  --radius: 12px;
  --gap-1: .25rem; --gap-2: .5rem; --gap-3: .75rem; --gap-4: 1rem; --gap-6: 1.5rem; --gap-8: 2rem;
  --fg: #0f172a; --muted:#475569; --bg:#ffffff; --card:#ffffff; --border:#e5e7eb;
  --brand:#2563eb; --brand-600:#1d4ed8; --success:#16a34a; --warn:#d97706; --danger:#dc2626;
}
@media (prefers-color-scheme: dark){
  :root{ --fg:#e5e7eb; --muted:#94a3b8; --bg:#0b1020; --card:#0f172a; --border:#1f2937; --brand:#60a5fa; --brand-600:#3b82f6; }
}

/* ===== reset-ish ==================================================== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font:16px/1.6 var(--font-sans);
  color:var(--fg); background:var(--bg);
}
img,video{ max-width:100%; height:auto; display:block }
a{ color:var(--brand); text-decoration:none }
a:hover{ text-decoration:underline }

/* ===== layout ======================================================= */
.container{ width:min(1100px, 100% - 2*var(--gap-8)); margin-inline:auto }
.stack>*{ margin-block:0 }
.stack>* + *{ margin-top:var(--gap-6) }
.cluster{ list-style-type:none; padding:14px; display:flex; flex-wrap:wrap; gap:var(--gap-4); align-items:center }
.grid{ display:grid; gap:var(--gap-6) }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)) }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)) }
@media (max-width:720px){ .grid[class*="cols-"]{ grid-template-columns:1fr } }

/* spacing utilities */
.mt-0{ margin-top:0 } .mt-2{ margin-top:var(--gap-2) } .mt-4{ margin-top:var(--gap-4) } .mt-6{ margin-top:var(--gap-6) }
.p-4{ padding:var(--gap-4) } .p-6{ padding:var(--gap-6) } .px-4{ padding-inline:var(--gap-4) } .py-4{ padding-block:var(--gap-4) }

/* ===== typography =================================================== */
h1,h2,h3{ line-height:1.2; margin:.2em 0 .4em }
h1{ font-size:clamp(1.75rem, 3vw, 2.25rem) }
h2{ font-size:clamp(1.35rem, 2.2vw, 1.75rem) }
h3{ font-size:1.2rem; color:var(--muted) }
p.lead{ font-size:1.1rem; color:var(--muted) }

/* ===== components =================================================== */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--gap-6); box-shadow:0 1px 2px rgba(0,0,0,.05)
}

/* buttons */
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem 1rem; border:1px solid transparent; border-radius:999px;
  background:var(--brand); color:white; font-weight:600; cursor:pointer;
  transition:transform .05s ease, filter .2s ease, background .2s ease;
}
.button:hover{ filter:brightness(1.05) }
.button:active{ transform:translateY(1px) }
.button.outline{ background:transparent; color:var(--brand); border-color:var(--brand) }
.button.ghost{ background:transparent; color:var(--fg); border-color:var(--border) }
.button.success{ background:var(--success) } .button.warn{ background:var(--warn) } .button.danger{ background:var(--danger) }

/* forms */
input,select,textarea{
  width:100%; padding:.6rem .8rem; border:1px solid var(--border); border-radius:10px;
  background:transparent; color:var(--fg); outline:none;
}
input:focus,select:focus,textarea:focus{ border-color:var(--brand-600); box-shadow:0 0 0 3px color-mix(in oklab, var(--brand) 25%, transparent) }

/* badges */
.badge{ display:inline-block; padding:.2rem .5rem; border-radius:999px; font-size:.75rem; background:var(--border); color:var(--muted) }

/* tables */
.table{ width:100%; border-collapse:collapse; font-size:.95rem }
.table th,.table td{ padding:.6rem .8rem; border-bottom:1px solid var(--border) }
.table thead th{ text-align:left; color:var(--muted); font-weight:600 }

/* ===== helpers ====================================================== */
.center{ margin-inline:auto; text-align:center }
.right{ margin-left:auto }
.hide{ display:none !important }