/* === Design System === */
:root{
  color-scheme: dark light;
  --brand: #0aa66e;
  --brand-ink: #0a7;
  --bg: #0b0b0c;          /* dark */
  --surface: #131416;
  --elev: #1a1b1e;
  --text: #f3f4f6;
  --muted: #c7cad1;
  --border: #282a30;
  --danger: #ff6b6b;
  --focus: #94c6ff;
  --radius: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --space: clamp(12px, 1.5vw, 20px);
  --font-size: clamp(14px, 1.2vw, 16px);
  --h1: clamp(24px, 3.2vw, 34px);
  --h2: clamp(18px, 2.2vw, 24px);
  --h3: clamp(15px, 1.6vw, 18px);
}
@media (prefers-color-scheme: light) {
  :root{ --bg:#f8fafc; --surface:#ffffff; --elev:#ffffff; --text:#0b1020; --muted:#4b5563; --border:#e5e7eb; --shadow:0 8px 24px rgba(0,0,0,.06); }
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font: 400 var(--font-size)/1.5 system-ui,Segoe UI,Roboto,Arial;
  background:var(--bg); color:var(--text);
  -webkit-tap-highlight-color: transparent;
}

/* Accessibility */
:focus{ outline: none; }
:focus-visible{ outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }

/* Layout */
.container{ max-width: 1100px; margin: 0 auto; padding: calc(var(--space) * 1.2); }
.topbar{ position: sticky; top: 0; z-index: 10; display:flex; align-items:center; justify-content:space-between; padding: var(--space); background: color-mix(in hsl, var(--surface) 86%, transparent); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--border); }
.brand{ font-weight: 700; letter-spacing:.2px; }

.grid-cards{ display:grid; gap: var(--space); grid-template-columns: repeat(12, 1fr); }
.stat{ grid-column: span 12; }
@media (min-width: 640px){ .stat{ grid-column: span 6; } }
@media (min-width: 960px){ .stat{ grid-column: span 4; } }

.card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: calc(var(--space) * 1.1); }
.card-head{ display:flex; gap: var(--space); align-items:center; justify-content:space-between; margin-bottom: var(--space); }
.stat-title{ font-size: var(--h3); color: var(--muted); margin:0 0 4px; }
.stat-value{ font-size: var(--h1); font-weight: 700; letter-spacing: -0.5px; margin:0; }

/* Table -> Cards on mobile */
.table-wrap{ width: 100%; overflow-x: auto; }
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ padding: 12px 14px; border-bottom: 1px solid var(--border); text-align:left; }
.table th{ font-size: var(--h3); color: var(--muted); font-weight:600; }
.list-mobile{ display:grid; gap:12px; list-style:none; padding:0; margin:0; }
.list-mobile li{ background: var(--elev); border:1px solid var(--border); border-radius: var(--radius); padding: 12px; display:grid; gap:6px; }
.list-mobile .row{ display:flex; justify-content:space-between; gap:8px; }
@media (max-width: 640px){
  .table{ display:none; }
  .list-mobile[hidden]{ display:none; } /* keep hidden */
}
@media (min-width: 641px){ .list-mobile{ display:none; } }

/* Controls */
.input{ width: min(320px, 100%); padding: 10px 12px; background: var(--elev); color: var(--text); border:1px solid var(--border); border-radius: 12px; }
.input::placeholder{ color: var(--muted); }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius: 12px; border:1px solid transparent; cursor:pointer; transition: transform .12s ease, box-shadow .2s ease; }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-ghost{ background: transparent; border-color: var(--border); color: var(--text); }
.btn-primary{ background: var(--brand); color: #fff; box-shadow: 0 6px 18px rgba(10,166,110,.35); }
.btn.primary:disabled{ opacity:.6; }
.full{ width: 100%; }

/* Auth */
.centered{ display:grid; place-items:center; min-height:100dvh; padding: var(--space); }
.auth-card{ width:min(420px, 100%); background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 6vw, 32px); }
.field{ display:grid; gap:8px; margin: 10px 0 14px; }
.field input{ padding: 12px 14px; border-radius: 12px; border:1px solid var(--border); background: var(--elev); color: var(--text); }
.hint{ color: var(--muted); }
.error{ color: var(--danger); min-height: 1.2rem; margin-top: 6px; }

/* Motion & skeleton */
@media (prefers-reduced-motion:no-preference){
  .card, .btn { transition: transform .15s ease, box-shadow .2s ease; }
}
.skeleton{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); background-size: 200% 100%; animation: shine 1.2s linear infinite; border-radius: 8px; }
@keyframes shine{ from{ background-position: 200% 0; } to{ background-position: -200% 0; } }