:root{
  color-scheme:light;
  --s1:#fcfcfb; --pl:#f9f9f7; --tp:#0b0b0b; --ts:#52514e; --tm:#898781;
  --gr:#e1e0d9; --bl:#c3c2b7; --b1:#2a78d6; --b2:#86b6ef; --b3:#cde2fb;
  --bd:rgba(11,11,11,.10); --ch:#eef4fd;
  --gd:#0ca30c; --cr:#d03b3b; --wr:#fab219;
}
@media (prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --s1:#1a1a19; --pl:#0d0d0d; --tp:#fff; --ts:#c3c2b7; --tm:#898781;
  --gr:#2c2c2a; --bl:#383835; --b1:#3987e5; --b2:#256abf; --b3:#16283f;
  --bd:rgba(255,255,255,.10); --ch:#16283f;
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--pl);color:var(--tp);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px}
a{color:inherit;text-decoration:none}
main{max-width:940px;margin:0 auto;padding:14px 14px 40px}

.top{position:sticky;top:0;z-index:5;background:var(--s1);
  border-bottom:1px solid var(--bd);padding:10px 14px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{font-weight:700;font-size:15px}
.top nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.top nav a{font-size:13px;padding:6px 11px;border-radius:16px;color:var(--ts)}
.top nav a.on{background:var(--b1);color:#fff;font-weight:600}
.ft{max-width:940px;margin:0 auto;padding:14px;display:flex;gap:16px;
  font-size:12px;color:var(--tm);border-top:1px solid var(--bd)}

.card{background:var(--s1);border:1px solid var(--bd);border-radius:12px;
  padding:14px;margin-bottom:12px}
.lbl{font-size:11px;color:var(--tm);letter-spacing:.4px;text-transform:uppercase;
  margin:0 0 8px}
.big{font-size:30px;font-weight:650;line-height:1.05;letter-spacing:-.5px}
.sub{font-size:12px;color:var(--ts);margin-top:4px}
.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.grid2{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.muted{color:var(--tm)}
.warn{border-left:3px solid var(--wr);background:var(--pl);padding:10px 12px;
  border-radius:8px;font-size:12.5px;color:var(--ts);line-height:1.55;margin-top:10px}
.info{background:var(--ch);padding:10px 12px;border-radius:8px;font-size:12.5px;
  color:var(--ts);line-height:1.55;margin-top:10px}
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;
  background:var(--gr);color:var(--ts)}
.tag.me{background:var(--b1);color:#fff;font-weight:600}
.tag.coach{background:var(--b3);color:var(--tp)}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;color:var(--tm);text-transform:uppercase;
  letter-spacing:.4px;padding:6px 8px;font-weight:600}
td{padding:8px;border-top:1px solid var(--gr);vertical-align:top}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}

input,select,textarea{font:inherit;padding:9px 10px;border:1px solid var(--bd);
  border-radius:8px;background:var(--s1);color:var(--tp);width:100%}
label{display:block;font-size:12px;color:var(--ts);margin:0 0 4px}
.f{margin-bottom:10px}
.btn{display:inline-block;padding:11px 16px;border-radius:9px;background:var(--b1);
  color:#fff;font-weight:650;font-size:14px;border:0;cursor:pointer;text-align:center}
.btn.wide{width:100%}
.btn.ghost{background:transparent;color:var(--b1);border:1px solid var(--b1)}
.btn.dark{background:var(--tp);color:var(--s1)}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12.5px;padding:7px 12px;border-radius:15px;border:1px solid var(--bd);
  color:var(--ts);cursor:pointer;user-select:none}
.chip.on{background:var(--b1);color:#fff;border-color:var(--b1);font-weight:600}

/* ---- layar Run: tombol besar, dipakai dengan tangan basah ---- */
.run{max-width:420px;margin:0 auto}
.timer{font-size:52px;font-weight:650;text-align:center;
  font-variant-numeric:tabular-nums;letter-spacing:-2px;margin:6px 0}
.dots{display:flex;gap:6px;justify-content:center;margin:8px 0}
.dot{width:11px;height:11px;border-radius:50%;background:var(--gr)}
.dot.dn{background:var(--b1)}
.dot.cu{background:transparent;border:3px solid var(--b1)}
.cups{display:flex;gap:9px;margin:14px 0 10px}
.cup{flex:1;aspect-ratio:1/1.1;border:2px solid var(--bd);border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-size:34px;
  font-weight:650;cursor:pointer;background:var(--s1)}
.cup.sel{border-color:var(--b1);background:var(--ch)}
.conf{display:flex;gap:8px;margin-bottom:12px}
.conf div{flex:1;text-align:center;font-size:13px;padding:12px 4px;border-radius:9px;
  border:1px solid var(--bd);color:var(--ts);cursor:pointer}
.conf div.on{background:var(--b1);color:#fff;border-color:var(--b1);font-weight:600}
.gsc{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:10px 0}
.sc{aspect-ratio:1;border-radius:5px;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;color:#fff}
.sc.v{background:var(--gd)} .sc.x{background:var(--cr)}
.rw{display:flex;justify-content:space-between;gap:10px;font-size:13px;
  color:var(--ts);padding:8px 0;border-top:1px solid var(--gr)}
.rw b{color:var(--tp);font-variant-numeric:tabular-nums}
svg{display:block;max-width:100%;height:auto}