:root {
  --bg: #0d1117; --surface: #161b22; --raised: #1c2333; --border: #30363d;
  --pri: #00d4aa; --pri-dim: rgba(0, 212, 170, .15); --pri-glow: rgba(0, 212, 170, .3);
  --acc: #f0883e; --acc-dim: rgba(240, 136, 62, .15);
  --txt: #e6edf3; --t2: #8b949e; --t3: #5b636d;
  --grn: #3fb950; --red: #f85149; --yel: #d29922; --purple: #a371f7;
  --push: #7c8aff; --pull: #ff7eb3; --legs: #ffd166; --trainer: #a371f7; --other: #8b949e;
  --font: 'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--txt); font-family: var(--font); }
body { display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; color: inherit; }
#app {
  flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  padding: calc(12px + var(--sat)) 16px calc(84px + var(--sab));
}
#app > * { max-width: 520px; margin-left: auto; margin-right: auto; }

/* ── nav ── */
nav {
  position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: center;
  background: rgba(22, 27, 34, .96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--border); padding-bottom: var(--sab); z-index: 100;
}
nav button {
  position: relative; flex: 1; max-width: 130px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 0 8px; border: none; background: none; color: var(--t3); font: 600 11px var(--font); cursor: pointer;
}
nav button.active { color: var(--pri); }
nav button svg { width: 22px; height: 22px; }
nav button .dot-live { position: absolute; top: 8px; left: calc(50% + 9px); width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }

/* ── type ── */
h1 { font-weight: 800; font-size: 28px; letter-spacing: -.5px; }
h2 { font-weight: 700; font-size: 20px; }
h3 { font-weight: 600; font-size: 16px; }
.label { font: 700 12px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--t2); }
.t2 { color: var(--t2); } .t3 { color: var(--t3); } .sm { font-size: 13px; } .xs { font-size: 12px; }
.pri { color: var(--pri); } .acc { color: var(--acc); } .grn { color: var(--grn); } .yel { color: var(--yel); } .red { color: var(--red); }
.c { text-align: center; }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; }
.mb4 { margin-bottom: 4px; } .mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* ── cards ── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; margin-bottom: 12px; }
.card.tight { padding: 14px 16px; }
.card.glow { border-color: rgba(0, 212, 170, .3); box-shadow: 0 0 24px var(--pri-dim); }
.card.warn { border-color: rgba(240, 136, 62, .4); }

/* ── buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 24px;
  border: none; border-radius: 14px; font: 700 16px var(--font); cursor: pointer; transition: transform .1s, background .15s;
  -webkit-user-select: none; user-select: none; text-decoration: none;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn-pri { background: var(--pri); color: #0d1117; }
.btn-acc { background: var(--acc); color: #0d1117; }
.btn-purple { background: var(--purple); color: #0d1117; }
.btn-ghost { background: var(--pri-dim); color: var(--pri); }
.btn-soft { background: var(--raised); color: var(--txt); border: 1px solid var(--border); }
.btn-quiet { background: transparent; color: var(--t2); }
.btn-danger { background: rgba(248, 81, 73, .12); color: var(--red); }
.btn-full { width: 100%; }
.btn-sm { padding: 10px 16px; font-size: 14px; border-radius: 11px; }
.btn-xs { padding: 6px 12px; font-size: 13px; border-radius: 9px; }
.btn-big { padding: 20px 24px; font-size: 18px; border-radius: 16px; }
.btn-row { display: flex; gap: 8px; }
.btn-row > .btn { flex: 1; }
.pulse { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 170, .5); } 50% { box-shadow: 0 0 0 10px rgba(0, 212, 170, 0); } }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--raised);
  font: 600 13px var(--font); color: var(--t2); cursor: pointer;
}
.chip.on { background: var(--pri-dim); border-color: var(--pri); color: var(--pri); }
.seg { display: inline-flex; background: var(--raised); border: 1px solid var(--border); border-radius: 10px; padding: 2px; }
.seg button { border: none; background: none; padding: 5px 12px; border-radius: 8px; font: 700 13px var(--font); color: var(--t2); cursor: pointer; }
.seg button.on { background: var(--pri); color: #0d1117; }

/* ── day header ── */
.dayhead { text-align: center; padding: 8px 0 14px; }
.dayhead .dt { font: 800 34px var(--font); letter-spacing: -1px; text-transform: uppercase; line-height: 1.05; }
.dayhead .ds { font: 400 14px var(--font); color: var(--t2); margin-top: 4px; }
.dayhead.small .dt { font-size: 18px; letter-spacing: 0; }
.c-push { color: var(--push); } .c-pull { color: var(--pull); } .c-legs { color: var(--legs); } .c-trainer { color: var(--trainer); } .c-other { color: var(--other); }

.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; min-height: 34px; }
.streak-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--acc-dim); color: var(--acc); font: 700 14px var(--font); }
.streak-pill.cold { background: var(--raised); color: var(--t2); }

/* ── week dots ── */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.week .d { display: flex; flex-direction: column; align-items: center; gap: 5px; font: 600 11px var(--font); color: var(--t3); }
.week .b { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 13px; }
.week .d.done .b { border-color: transparent; color: #0d1117; font-weight: 800; }
.week .d.today { color: var(--txt); }
.week .d.today .b { border-color: var(--pri); }
.week .d.plan-rest .b { border-style: dashed; }

/* ── lists ── */
.li { display: flex; align-items: center; gap: 10px; padding: 9px 0; font: 400 15px var(--font); border-bottom: 1px solid rgba(48, 54, 61, .6); }
.li:last-child { border-bottom: none; }
.li .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t3); flex-shrink: 0; }
.li .sub { font-size: 13px; color: var(--t2); }
.li.done { color: var(--t3); } .li.done .dot { background: var(--grn); }
.li.cur { color: var(--pri); font-weight: 600; } .li.cur .dot { background: var(--pri); width: 9px; height: 9px; }
.li.deferred { color: var(--yel); } .li.deferred .dot { background: var(--yel); }
.li.skipped { color: var(--t3); text-decoration: line-through; }
.tag { font: 700 11px var(--font); text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 6px; background: var(--raised); color: var(--t2); }
.tag.push { background: rgba(124, 138, 255, .14); color: var(--push); }
.tag.pull { background: rgba(255, 126, 179, .14); color: var(--pull); }
.tag.legs { background: rgba(255, 209, 102, .14); color: var(--legs); }
.tag.trainer { background: rgba(163, 113, 247, .16); color: var(--trainer); }
.tag.other { background: rgba(139, 148, 158, .14); color: var(--other); }

/* ── exercise / logging ── */
.exname { font: 700 22px var(--font); line-height: 1.2; }
.exmeta { font: 400 14px var(--font); color: var(--t2); margin-top: 3px; }
.exnote { font: 500 13px var(--font); color: var(--acc); margin-top: 6px; }
.exlast { font: 400 13px var(--font); color: var(--t3); margin-top: 3px; }
.sets { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.setb { flex: 1; min-width: 60px; padding: 8px 6px; border-radius: 10px; background: var(--raised); text-align: center; font: 600 13px var(--font); color: var(--t3); border: 1px solid transparent; }
.setb.hit { color: var(--grn); background: rgba(63, 185, 80, .1); }
.setb.miss { color: var(--yel); background: rgba(210, 153, 34, .1); }
.setb.cur { border-color: var(--pri); color: var(--pri); }

.inputs { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ig { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ig .sl { font: 500 13px var(--font); color: var(--t2); display: flex; align-items: center; gap: 8px; min-height: 28px; }
.stepper { display: flex; align-items: center; }
.stepper button {
  width: 52px; height: 56px; border: 1px solid var(--border); background: var(--raised); color: var(--txt);
  font: 600 26px var(--font); border-radius: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  touch-action: manipulation;
}
.stepper button:active { background: var(--pri-dim); border-color: var(--pri); }
.stepper .sv { min-width: 78px; text-align: center; font: 700 28px var(--font); padding: 0 4px; background: none; border: none; cursor: pointer; }
.stepper input.sv { width: 84px; min-width: 0; color: var(--txt); text-align: center; -moz-appearance: textfield; appearance: textfield; border-radius: 10px; }
.stepper input.sv:focus { outline: none; background: var(--raised); }
.stepper input.sv::-webkit-outer-spin-button, .stepper input.sv::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .sv small { font-size: 13px; color: var(--t2); font-weight: 500; margin-left: 2px; }

/* ── timers ── */
.ring { position: relative; margin: 0 auto; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .bg { fill: none; stroke: var(--raised); stroke-width: 7; }
.ring .fg { fill: none; stroke: var(--pri); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.ring.acc .fg { stroke: var(--acc); } .ring.purple .fg { stroke: var(--purple); }
.ring .tt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 44px var(--font); letter-spacing: -1px; font-variant-numeric: tabular-nums; }

.resthead { display: flex; align-items: center; gap: 14px; }
.resthead .ring { width: 92px; height: 92px; margin: 0; flex-shrink: 0; }
.resthead .ring .tt { font-size: 24px; letter-spacing: 0; }
.resthead .next { font: 600 15px var(--font); }
.resthead .nextsub { font: 400 13px var(--font); color: var(--t2); margin-top: 2px; }
.restcard.over .ring .fg { stroke: var(--acc); }
.restcard.over .ring .tt { color: var(--acc); }
.restcard .when-over { display: none; }
.restcard.over .when-over { display: block; }
.restcard.over .when-resting { display: none; }
.rest-status { font: 700 12px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--pri); margin-bottom: 2px; }
.restcard.over .rest-status { color: var(--acc); }

/* ── progress bars / stats ── */
.bar { height: 8px; background: var(--raised); border-radius: 4px; overflow: hidden; }
.bar .fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--pri), #00f0c0); transition: width .5s ease; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stats.three { grid-template-columns: 1fr 1fr 1fr; }
.stat { background: var(--raised); border-radius: 12px; padding: 12px; text-align: center; }
.stat .v { font: 700 24px var(--font); line-height: 1.1; }
.stat .v small { font-size: 13px; color: var(--t2); font-weight: 500; }
.stat .k { font: 400 12px var(--font); color: var(--t2); margin-top: 3px; }
.bignum { font: 800 76px var(--font); color: var(--pri); line-height: 1; letter-spacing: -3px; }

/* ── challenge grid ── */
.cgrid { display: grid; grid-template-columns: 28px repeat(7, 1fr) 34px; gap: 5px; align-items: center; }
.cgrid .wl { font: 600 11px var(--font); color: var(--t3); }
.cgrid .wh { font: 600 10px var(--font); color: var(--t3); text-align: center; }
.cgrid .cell { aspect-ratio: 1; border-radius: 7px; background: var(--raised); }
.cgrid .cell.future { background: transparent; border: 1px dashed var(--border); }
.cgrid .cell.today { box-shadow: inset 0 0 0 2px var(--pri); }
.cgrid .cell.off { background: rgba(48, 54, 61, .55); }
.cgrid .wr { font: 700 12px var(--font); text-align: right; color: var(--t3); }
.cgrid .wr.hit { color: var(--grn); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font: 400 12px var(--font); color: var(--t2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }

/* ── forms / settings ── */
.setr { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.setr:last-child { border-bottom: none; }
.setr .k { font: 400 15px var(--font); }
.setr .k small { display: block; font-size: 12px; color: var(--t2); margin-top: 2px; }
.field { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--raised); font: 500 15px var(--font); }
.field:focus { outline: none; border-color: var(--pri); }
input.num { width: 76px; padding: 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--raised); font: 600 15px var(--font); text-align: center; }
input.num:focus { outline: none; border-color: var(--pri); }
select.sel { padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--raised); font: 600 14px var(--font); }
.toggle { position: relative; width: 50px; height: 30px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle span { position: absolute; inset: 0; background: var(--raised); border: 1px solid var(--border); border-radius: 15px; transition: .2s; cursor: pointer; }
.toggle span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--t2); transition: .2s; }
.toggle input:checked + span { background: var(--pri-dim); border-color: var(--pri); }
.toggle input:checked + span::after { left: 23px; background: var(--pri); }
details.card > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: '›'; color: var(--t3); font-size: 22px; transition: transform .2s; }
details.card[open] > summary::after { transform: rotate(90deg); }
.pex { padding: 10px 0; border-bottom: 1px solid var(--border); }
.pex:last-child { border-bottom: none; }
.pex .nm { font: 600 15px var(--font); }
.pex .ctl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.pex .ctl label { font-size: 12px; color: var(--t2); display: flex; align-items: center; gap: 4px; }
.pex .ctl input.num { width: 58px; padding: 6px; font-size: 14px; }
.icon-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--raised); color: var(--t2); font-size: 15px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

/* ── sheet (bottom modal) ── */
.sheet-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 200; display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
.sheet { width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--border); border-bottom: none; border-radius: 20px 20px 0 0; padding: 20px 18px calc(20px + var(--sab)); max-height: 88vh; overflow-y: auto; animation: up .25s ease; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.toast { position: fixed; left: 50%; bottom: calc(92px + var(--sab)); transform: translateX(-50%); background: var(--raised); border: 1px solid var(--border); padding: 10px 16px; border-radius: 12px; font: 500 14px var(--font); z-index: 300; animation: fade .2s; max-width: 90vw; text-align: center; }

/* ── history ── */
.hitem { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.hd { min-width: 40px; text-align: center; }
.hd .dy { font: 700 19px var(--font); line-height: 1; }
.hd .mn { font: 500 11px var(--font); color: var(--t2); text-transform: uppercase; margin-top: 2px; }
.hsum { font: 400 13px var(--font); color: var(--t2); flex: 1; min-width: 0; }
.hdet { padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--border); }
.hex { padding: 5px 0; font: 400 13px var(--font); color: var(--t2); }
.hex b { color: var(--txt); font-weight: 600; }

/* ── chart ── */
.chart { width: 100%; height: 190px; display: block; }
.chart text { font: 500 10px var(--font); fill: var(--t3); }

.fi { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.shake { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ════ brain games ════ */
.game { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-top: 12px; position: relative; }
.game-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.game-title { font: 700 15px var(--font); }
.game-title span { font-weight: 400; color: var(--t2); font-size: 13px; margin-left: 6px; }
.game-score { font: 700 15px var(--font); color: var(--pri); font-variant-numeric: tabular-nums; }
.game-over { text-align: center; padding: 6px 0 2px; }
.game-over .big { font: 800 40px var(--font); color: var(--pri); line-height: 1.1; }
.game-actions { display: flex; justify-content: space-between; margin-top: 10px; }

/* word grid */
.wg-word { height: 34px; text-align: center; font: 700 24px var(--font); letter-spacing: 3px; text-transform: uppercase; color: var(--txt); }
.wg-word.good { color: var(--grn); } .wg-word.dupe { color: var(--yel); } .wg-word.bad { color: var(--red); }
.wg-board { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; touch-action: none; user-select: none; -webkit-user-select: none; max-width: 320px; margin: 6px auto 0; }
.wg-tile { aspect-ratio: 1; border-radius: 12px; background: var(--raised); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font: 800 30px var(--font); text-transform: uppercase; color: var(--txt); position: relative; z-index: 1; }
.wg-tile.qu { font-size: 24px; text-transform: none; }
.wg-tile.sel { background: var(--pri); color: #0d1117; border-color: var(--pri); }
.wg-board svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.wg-board polyline { fill: none; stroke: rgba(0, 212, 170, .55); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.wg-found { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; min-height: 26px; }
.wg-found span { padding: 3px 9px; border-radius: 8px; background: var(--raised); font: 600 13px var(--font); text-transform: uppercase; letter-spacing: .5px; }
.wg-found span.new { background: rgba(63, 185, 80, .2); color: var(--grn); }
.wg-found span.missed { color: var(--t2); background: transparent; border: 1px dashed var(--border); }

/* keypad games */
.prompt { text-align: center; font: 800 40px var(--font); padding: 8px 0 2px; font-variant-numeric: tabular-nums; min-height: 64px; letter-spacing: 1px; }
.answer { text-align: center; font: 700 28px var(--font); min-height: 40px; color: var(--pri); font-variant-numeric: tabular-nums; letter-spacing: 2px; }
.answer.bad { color: var(--red); } .answer.good { color: var(--grn); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; touch-action: manipulation; }
.keypad button { height: 54px; border-radius: 12px; border: 1px solid var(--border); background: var(--raised); font: 700 22px var(--font); cursor: pointer; }
.keypad button:active { background: var(--pri-dim); border-color: var(--pri); }
.keypad button.fn { font-size: 15px; color: var(--t2); }
.keypad button.go { background: var(--pri); color: #0d1117; border-color: var(--pri); }
.memo-bar { height: 4px; border-radius: 2px; background: var(--raised); overflow: hidden; margin: 2px 40px 0; }
.memo-bar div { height: 100%; background: var(--pri); }

/* color clash */
.cc-rule { text-align: center; font: 700 13px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--t2); }
.cc-rule b { color: var(--txt); }
.cc-rule.flip { color: var(--acc); }
.cc-word { text-align: center; font: 900 52px var(--font); letter-spacing: 1px; padding: 14px 0 10px; text-transform: uppercase; }
.cc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-btns button { height: 58px; border-radius: 12px; border: none; font: 800 17px var(--font); color: #0d1117; cursor: pointer; text-transform: uppercase; letter-spacing: .5px; }
.cc-btns button:active { transform: scale(.97); }