:root{ --radius:12px; --focus:2px solid #94a3b8; }
:root,[data-theme="light"]{
  --bg:#f6f7f9; --card:#fff; --surface:#eef1f5; --txt:#111827; --muted:#6b7280;
  --line:#e5e7eb; --accent:#0ea5e9; --ok:#16a34a; --warn:#ca8a04; --err:#ef4444;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115; --card:#151821; --surface:#0d1016; --txt:#e5e7eb; --muted:#9aa3af;
    --line:#1f2430; --accent:#22d3ee; --ok:#22c55e; --warn:#eab308; --err:#ef4444;
  }
}
[data-theme="dark"]{
  --bg:#0f1115; --card:#151821; --surface:#0d1016; --txt:#e5e7eb; --muted:#9aa3af;
  --line:#1f2430; --accent:#22d3ee; --ok:#22c55e; --warn:#eab308; --err:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:16px/1.625 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans Thai', sans-serif;
  letter-spacing:.2px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{margin:0 0 10px} p{margin:0 0 10px}

.app-header{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:color-mix(in oklab, var(--bg) 92%, black 8%);
  border-bottom:1px solid var(--line); backdrop-filter:blur(6px) saturate(1.05);
}
.app-shell{ padding:18px 16px 80px; max-width:980px; margin:0 auto }

.card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:14px; }
.row{display:flex; gap:10px; flex-wrap:wrap}
.col{flex:1 1 260px; min-width:240px}

.btn{
  appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--txt);
  padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:600;
}
.btn.ghost{background:transparent}
.btn.primary{
  background:color-mix(in oklab, var(--surface) 40%, var(--accent) 60%);
  border-color:color-mix(in oklab, var(--accent) 40%, var(--line) 60%);
}
.btn.full{width:100%}

input[type="range"], input[type="number"], select, input[type='text']{
  width:100%; background:var(--surface); border:1px solid var(--line); color:var(--txt);
  padding:8px 10px; border-radius:10px
}

.kpi{font-size:28px; font-weight:800; letter-spacing:.3px}
.muted{color:var(--muted)}

.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  background:color-mix(in oklab, var(--bg) 92%, black 8%);
}
.tabbar a{ text-decoration:none; color:var(--muted); text-align:center; padding:10px 6px; font-weight:700 }
.tabbar a.active{color:var(--txt); border-top:2px solid var(--txt)}

.grid{ display:grid; gap:8px; grid-template-columns:repeat(3,1fr) }
.cell{
  aspect-ratio:1/1; background:var(--surface); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:22px; border:1px solid var(--line);
}
.cell.flash{ outline:3px solid color-mix(in oklab, var(--accent) 70%, transparent) }

.center{ display:flex; align-items:center; justify-content:center }
.timer{ font-size:40px; font-weight:900; text-align:center; padding:8px 0; letter-spacing:1px; }

hr{ border:0; border-top:1px solid var(--line); margin:12px 0 }
small{color:var(--muted)}

.list{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)) }
.test-item{ padding:12px; border:1px solid var(--line); background:var(--card); border-radius:12px }
.test-item h3{margin-bottom:6px}
.test-item p{margin-bottom:8px}
.test-item .meta{font-size:12px;color:var(--muted)}

.challenge-bar{
  position:sticky; top:48px; z-index:45; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 14px; margin:8px 0; background:color-mix(in oklab, var(--bg) 92%, black 8%);
  border:1px solid var(--line); border-radius:12px
}
.countdown{font-weight:800; letter-spacing:.5px}