/* Middle Splits: all colour and size values come from tokens.css. */
@font-face {
  font-family: Archivo; src: url("./fonts/Archivo-Variable.woff2") format("woff2");
  font-weight: 400 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
:root {
  --safe-top: max(var(--pad-top), calc(env(safe-area-inset-top) + 8px));
  --safe-bottom: max(var(--pad-bottom), calc(env(safe-area-inset-bottom) + 12px));
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; transition: background .3s ease; }
html.flash, html.flash body { background: var(--surface); }
body { min-height: 100dvh; transition: background .3s ease; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; touch-action: manipulation; overscroll-behavior-y: none; }
button, input { font-family: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: var(--text); }
:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
button:disabled { opacity: .45; cursor: default; }
.sr-only { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.screen { width: 100%; max-width: 480px; min-height: 100dvh; margin: 0 auto; padding: var(--safe-top) max(var(--pad-x), env(safe-area-inset-right)) var(--safe-bottom) max(var(--pad-x), env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 16px; justify-content: space-between; }
.screen--long { justify-content: flex-start; gap: 24px; }
.screen--long > .btn-primary { margin-top: auto; }
.p-screen { justify-content: flex-start; gap: 10px; }

/* layout */
.col { display: flex; flex-direction: column; } .row { display: flex; align-items: center; }
.grow { flex: 1; min-width: 0; } .jsb { justify-content: space-between; } .base { align-items: baseline; } .top { align-items: flex-start; } .endflex { align-items: flex-end; }
.center { align-items: center; justify-content: center; text-align: center; } .end { align-items: flex-end; text-align: right; } .shrink { flex: 0 1 38%; text-align: right; } .rowf { display: flex; align-items: center; gap: 5px; }
.g1 { gap: 1px; } .g2 { gap: 2px; } .g3 { gap: 3px; } .g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; } .g10 { gap: 10px; } .g12 { gap: 12px; } .g14 { gap: 14px; } .g16 { gap: 16px; } .g20 { gap: 20px; }
.grid2, .grid3, .grid4 { display: grid; gap: 8px; } .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .nowrap { white-space: nowrap; }

/* type */
.t-head { font-size: 17px; line-height: 21px; font-weight: 800; } .t-head17 { font-size: 17px; line-height: 22px; font-weight: 700; font-stretch: 88%; white-space: nowrap; }
.t-sub { font-size: 13px; line-height: 16px; color: var(--text-muted); } .t-12 { font-size: 12px; line-height: 14px; }
.t-14 { font-size: 14px; line-height: 19px; } .t-14m { font-size: 14px; line-height: 17px; font-weight: 500; } .t-15 { font-size: var(--fs-body); line-height: 21px; }
.t-b13 { font-size: 13px; line-height: 16px; font-weight: 700; } .t-b14 { font-size: 14px; line-height: 17px; font-weight: 700; flex: none; } .t-b15 { font-size: 15px; line-height: 19px; font-weight: 800; } .t-b16 { font-size: 16px; line-height: 20px; font-weight: 800; }
.t-18 { font-size: 18px; line-height: 22px; font-weight: 800; } .t-19 { font-size: 19px; line-height: 24px; font-weight: 800; } p.t-19.muted { font-weight: 500; }
.t-28 { font-size: var(--fs-drill); line-height: 32px; font-weight: 800; letter-spacing: -.01em; } .t-34 { font-size: 34px; line-height: 38px; font-weight: 800; letter-spacing: -.02em; font-stretch: 105%; } .t-46 { font-size: var(--fs-title); line-height: 46px; font-weight: 800; letter-spacing: -.02em; font-stretch: 108%; }
.t-num22 { font-size: 22px; line-height: 24px; font-weight: 800; } .t-num28 { font-size: 28px; line-height: 32px; font-weight: 800; } .t-num30 { font-size: 30px; line-height: 34px; font-weight: 800; font-stretch: 112%; } .t-num38 { font-size: 38px; line-height: 40px; font-weight: 800; font-stretch: 115%; } .t-num64 { font-size: 64px; line-height: 64px; font-weight: 800; letter-spacing: -.02em; font-stretch: 108%; }
.eyebrow { font-size: var(--fs-eyebrow); line-height: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.eyebrow-lime { font-size: 13px; line-height: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.t-eyebrow13 { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.muted { color: var(--text-muted); } .soft { color: var(--text-body); } .faint { color: var(--text-faint); } .dusk { color: var(--dusk); } .alert { color: var(--alert); } .steel { color: var(--done-light); } .w5 { font-weight: 500; }

/* header + buttons */
.topbar, .p-head { min-height: 44px; display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--r-chip); border: 1.5px solid var(--line); background: transparent; color: var(--text); text-decoration: none; }
.icon-btn.strong { border-color: var(--line-strong); }
.btn-outline { min-height: 44px; flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: var(--r-chip); border: 1.5px solid var(--line-strong); background: transparent; font-size: 15px; font-weight: 700; color: var(--text); }
.btn-primary { min-height: 64px; width: 100%; flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; border: none; border-radius: var(--r-bar); background: var(--accent); color: var(--on-accent); font-size: 20px; line-height: 24px; font-weight: 800; text-decoration: none; }
.btn-ghost, .btn-light { min-height: 56px; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: var(--r-card); font-size: 17px; line-height: 22px; font-weight: 800; text-decoration: none; text-align: center; }
.btn-ghost { border: 1.5px solid var(--line-strong); background: transparent; color: var(--text); } .btn-light { border: none; background: var(--text); color: var(--on-accent); }
.btn-lime { height: 48px; flex: none; padding: 0 18px; border: none; border-radius: var(--r-chip); background: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: 800; }
.btn-apply, .btn-out { height: 48px; border-radius: var(--r-chip); font-size: 16px; font-weight: 800; } .btn-apply { border: none; background: var(--accent); color: var(--on-accent); } .btn-apply.is-applied { background: var(--done-light); } .btn-out { border: 1.5px solid var(--line-strong); background: transparent; color: var(--text); }
.btn-danger { min-height: 56px; border: 2px solid var(--alert); border-radius: var(--r-card); background: var(--alert-tint); color: var(--alert); font-size: 17px; font-weight: 800; }

/* Today */
.today { gap: 22px; }
.chip { height: 64px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; padding: 0 12px; border-radius: var(--r-chip); border: 2px solid var(--line); background: transparent; color: var(--text); text-align: left; }
.chip__t { display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 18px; font-weight: 800; } .chip__s { font-size: 13px; line-height: 16px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.chip.is-cur { border-color: var(--accent); background: var(--surface); } .chip.is-cur .chip__t { color: var(--accent); } .chip.is-cur .chip__s { color: var(--text-body); }
.chip.is-done { border-color: var(--done); background: var(--done); opacity: 1; } .chip.is-done .chip__t, .chip.is-done .chip__s { color: #fff; }
.chip.is-chosen:not(.is-cur):not(.is-done) { border-color: var(--text-faint); } .chip:disabled { opacity: 1; }
.dial { position: relative; flex: none; } .dial svg { display: block; } .dial__mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.dial__n { font-size: 40px; line-height: 42px; font-weight: 800; font-stretch: 115%; } .dial__mid .t-sub { font-weight: 600; max-width: 84px; font-size: 12px; line-height: 14px; }
.drills { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .drills li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 18px; font-stretch: 90%; }
.drills__c { width: 20px; flex: none; font-weight: 800; color: var(--text-muted); } .drills__c.is-now { color: var(--accent); } .drills__n { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; } .drills__d { flex: none; font-weight: 700; }
.card-row { min-height: 60px; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; }
.card-row.is-deload { border: 1.5px solid var(--done-light); }
.disc { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 20px; } .disc--lime { background: var(--accent); color: var(--on-accent); } .disc--steel { background: var(--done-light); color: var(--on-accent); } .disc--raised { background: var(--surface-raised); color: var(--text); } .disc--alert { background: var(--alert); color: var(--on-accent); }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.day { height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--surface); }
.day.is-rest { border-color: var(--line-faint); background: transparent; } .day.is-today { border: 2px solid var(--accent); } .day__dow { font-size: 12px; line-height: 14px; font-weight: 600; color: var(--text-muted); } .day__n { font-size: 18px; line-height: 20px; font-weight: 800; } .day__t { font-size: 12px; line-height: 14px; font-weight: 800; } .day.is-today .day__t { color: var(--accent); } .day.is-rest .day__t { color: var(--text-faint); }
.dots { height: 6px; display: flex; gap: 3px; } .dot { width: 6px; height: 6px; border-radius: 3px; } .dot--done { background: var(--done-light); } .dot--now { background: var(--accent); } .dot--todo { border: 1.5px solid var(--text-faint); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 44px; gap: 8px; }
.tile { height: 64px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 0 8px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; font-size: 13px; line-height: 16px; font-weight: 700; font-stretch: 92%; }
.tile--icon { align-items: center; padding: 0; }
.cta { width: 100%; min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px 0 22px; border: none; border-radius: var(--r-cta); background: var(--accent); color: var(--on-accent); text-align: left; }
.cta.is-off { background: var(--surface); color: var(--text); border: 1px solid var(--line); } .cta__t { font-size: 22px; line-height: 26px; font-weight: 800; letter-spacing: -.01em; } .cta__s { font-size: 14px; line-height: 18px; font-weight: 600; } .cta__go { width: 48px; height: 48px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 24px; background: var(--on-accent); color: var(--accent); }

/* Player */
.progress { height: 16px; display: flex; align-items: center; gap: 10px; flex: none; } .progress__track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: var(--progress-track); overflow: hidden; } .progress__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--done); } .progress__cur { position: absolute; top: 0; bottom: 0; background: var(--accent); opacity: .55; } .progress__cur.is-dusk { background: var(--dusk); }
.progress__label { flex: none; font-size: 14px; line-height: 16px; font-weight: 800; } .progress__label span { font-weight: 500; color: var(--text-muted); }
.p-title { height: 52px; flex: none; display: flex; align-items: center; gap: 12px; } .t-drill { font-size: 26px; line-height: 28px; font-weight: 800; letter-spacing: -.01em; font-stretch: 92%; }
.is-stand .t-drill { font-size: 24px; font-stretch: 90%; }
.demo { height: 44px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: var(--r-chip); border: 1.5px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; font-size: 14px; font-weight: 700; }
.ring { position: relative; width: min(var(--ring-floor), 100%); aspect-ratio: 1; flex: none; align-self: center; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--text); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.ring.is-stand { width: min(var(--ring-standing), 100%); } .ring svg { display: block; width: 100%; height: 100%; } html.flash .ring svg { filter: brightness(1.35); }
.ring__mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; pointer-events: none; }
.ring__word { font-size: var(--fs-phase-word); line-height: 24px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .ring__sub { font-size: 20px; line-height: 24px; font-weight: 600; color: var(--text-body); } .ring__hint { min-height: 18px; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--text-faint); }
.is-stand .ring__word { font-size: 18px; line-height: 22px; letter-spacing: .16em; } .is-stand .ring__sub { font-size: 18px; line-height: 22px; } .is-stand .ring__hint { font-size: 13px; line-height: 16px; }
.num-clock, .num-phase, .num-breath { font-weight: 800; letter-spacing: -.02em; font-stretch: 105%; font-variant-numeric: tabular-nums; } .num-clock { font-size: var(--fs-countdown); line-height: 106px; } .num-phase { font-size: var(--fs-phase-num); line-height: 114px; } .num-breath { font-size: 112px; line-height: 108px; }
.is-stand .num-phase { line-height: 112px; } .is-stand .num-clock { font-size: 84px; line-height: 88px; }
.disc-breath { position: absolute; left: 16%; top: 16%; width: 68%; height: 68%; border-radius: 50%; border: 2px solid rgba(159, 182, 255, .55); background: rgba(159, 182, 255, .14); pointer-events: none; }
.legend { min-height: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--text-body); } .legend span { display: flex; align-items: center; gap: 6px; } .legend i { width: 14px; height: 6px; border-radius: 3px; }
.cue { min-height: 26px; font-size: var(--fs-cue); line-height: 26px; font-weight: 800; text-wrap: balance; text-align: center; } .is-stand .cue { font-size: 15px; line-height: 19px; font-weight: 600; color: var(--text-body); min-height: 19px; }
.band { min-height: 72px; display: flex; align-items: center; gap: 14px; } .band__big { flex: none; font-size: var(--fs-intensity); line-height: 64px; font-weight: 800; font-stretch: 108%; } .band__tail { font-size: 28px; color: var(--text-muted); } .band__lead { font-size: 17px; line-height: 21px; font-weight: 800; } .band__lead:empty { display: none; } .band__words { font-size: 15px; line-height: 19px; font-weight: 600; color: var(--text-muted); }
.band.is-stand { min-height: 44px; gap: 12px; } .band.is-stand .band__big { font-size: 36px; line-height: 40px; } .band.is-stand .band__tail { font-size: 20px; } .band.is-stand .band__lead { display: none; } .band.is-stand .band__words { color: var(--text-body); }
.ticks { display: flex; flex-direction: column; gap: 6px; } .ticks__row { display: flex; gap: 8px; } .ticks__row.is-dense { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.tick { flex: 1 1 0; min-width: 0; height: 56px; display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: var(--r-card); border: 2px solid var(--line); background: transparent; color: var(--text-muted); font-size: 17px; font-weight: 800; pointer-events: none; }
.tick.is-done { border-color: var(--done); background: var(--done); color: #fff; pointer-events: auto; } .tick.is-next { border-color: var(--accent); background: var(--surface); color: var(--accent); } .is-dense .tick { height: 44px; font-size: 14px; }
.log-row { min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 3px 0 14px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); flex: none; }
.stepper-btn { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 11px; border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--text); } .stepper-btn.big { width: 48px; height: 48px; border-radius: 12px; }
.stepper-value { display: flex; align-items: baseline; gap: 4px; } .stepper-num { min-width: 50px; text-align: right; font-size: 26px; line-height: 30px; font-weight: 800; font-stretch: 110%; } .stepper-unit { font-size: 14px; line-height: 17px; font-weight: 600; color: var(--text-muted); }
.stepper-value input { width: 70px; height: 40px; padding: 0; border: none; border-bottom: 1.5px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--text); text-align: right; font-size: 28px; font-weight: 800; font-stretch: 110%; font-variant-numeric: tabular-nums; }
.backoff { width: 100%; min-height: var(--backoff-h); flex: none; margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 14px; border-radius: var(--r-cta); border: 2px solid var(--alert); background: var(--alert-tint); color: var(--alert); text-align: left; }
.backoff.is-short { min-height: 56px; gap: 10px; border-radius: var(--r-bar); } .backoff__t { font-size: 22px; line-height: 26px; font-weight: 800; } .is-short .backoff__t { font-size: 18px; line-height: 22px; } .backoff__s { font-size: 14px; line-height: 17px; font-weight: 600; color: var(--text-body); }
.evchips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .evchip { height: 48px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 0 4px; border-radius: var(--r-chip); border: 2px solid var(--line); color: var(--text-muted); font-size: 14px; line-height: 16px; font-weight: 800; } .evchip.is-done { border-color: var(--done); background: var(--done); color: #fff; } .evchip.is-cur { border-color: var(--dusk); background: var(--surface); color: var(--dusk); }
.sore-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .sore-btn { height: var(--target-floor); border-radius: var(--r-card); border: 2px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 30px; font-weight: 800; }

/* sheets */
.scrim { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; justify-content: flex-end; background: var(--overlay); }
.sheet { width: 100%; max-width: 480px; margin: 0 auto; max-height: 92dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 24px 20px var(--safe-bottom); border-radius: var(--r-sheet) var(--r-sheet) 0 0; border-top: 1px solid var(--line-strong); background: var(--surface); }
.sheet.is-alert { border-top: 2px solid var(--alert); } .alert-line { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 16px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--alert); }
.where { height: 64px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 0 14px; border-radius: var(--r-card); border: 2px solid var(--line-strong); background: transparent; color: var(--text); text-align: left; } .where.is-on { border-color: var(--accent); background: var(--surface-raised); }
.fix { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--r-card); background: var(--bg); }

/* cards */
.note { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); text-align: left; color: var(--text); width: 100%; } .note.is-alert { border: 1.5px solid var(--alert); background: var(--alert-tint); } .suggest .note { align-items: flex-start; border-color: var(--line-strong); }
.suggest { display: flex; flex-direction: column; gap: 8px; } .gate { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-card); border: 1.5px solid var(--line-strong); background: var(--surface); }
.bar { height: 8px; border-radius: 4px; background: var(--ring-track); overflow: hidden; } .bar__fill { height: 100%; background: var(--accent); }
.endbar { position: relative; height: 12px; border-radius: 6px; background: var(--ring-track); overflow: hidden; } .endbar__fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--accent); } .endbar__band { position: absolute; top: 0; bottom: 0; background: rgba(238, 242, 248, .16); border-left: 2px solid var(--text); border-right: 2px solid var(--text); }
.donering { position: relative; width: 120px; height: 120px; flex: none; }
.log-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 18px; table-layout: auto; } .log-table thead th { padding: 0 0 8px; font-size: 12px; line-height: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); text-align: right; } .log-table thead th:first-child { text-align: left; } .log-table tbody tr { height: 44px; border-top: 1px solid var(--line); } .log-table tbody th { padding: 0; text-align: left; font-weight: 600; max-width: 190px; } .log-table th .ellipsis { display: block; } .log-table td { padding: 0; text-align: right; white-space: nowrap; } .today-cell, .log-table .today { font-size: 17px; font-weight: 800; } .log-table .last { font-weight: 600; color: var(--text-muted); } .code { font-weight: 800; color: var(--text-muted); margin-right: 8px; }
.sorecell { height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--surface); }
.flagbtn { min-height: 48px; padding: 0 8px; border-radius: var(--r-chip); border: 2px solid var(--line-strong); background: transparent; color: var(--text-body); font-size: 14px; line-height: 16px; font-weight: 800; } .flagbtn.is-on { border-color: var(--accent); background: var(--surface-raised); color: var(--text); }

/* Measure */
.kindtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; } .kindtabs a { flex: none; height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: var(--r-chip); border: 1.5px solid var(--line); color: var(--text-body); font-size: 14px; font-weight: 700; text-decoration: none; } .kindtabs a.is-on { background: var(--text); border-color: var(--text); color: var(--on-accent); }
.tabs { height: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 3px; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--surface); } .tabs button { height: 36px; border: none; border-radius: 9px; background: transparent; color: var(--text-body); font-size: 15px; font-weight: 800; } .tabs .is-on { background: var(--text); color: var(--on-accent); }
.diagram { display: block; width: 100%; height: auto; } .diagram text { font-family: var(--font); }
.hrow { min-height: 64px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 14px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); }
.legbox { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-card); border: 2px dashed var(--accent); background: var(--surface); } .fieldbox { flex: 1; display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 12px; border-radius: var(--r-chip); border: 1.5px solid var(--line-strong); background: var(--bg); } .fieldbox input { flex: 1; min-width: 0; height: 44px; padding: 0; border: none; background: transparent; font-size: 24px; font-weight: 800; }
.field { width: 100%; min-height: 48px; padding: 0 12px; border-radius: var(--r-chip); border: 1.5px solid var(--line-strong); background: var(--bg); color: var(--text); font-size: 16px; }
.result { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--r-bar); border: 2px solid var(--accent); background: var(--surface); }
.scale { position: relative; height: 8px; margin-top: 8px; border-radius: 4px; background: var(--ring-track); } .scale__fill { height: 100%; border-radius: 4px; background: var(--accent); } .scale i { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--text); } .scale__labels { position: relative; height: 18px; font-size: 12px; line-height: 14px; font-weight: 700; color: var(--text-muted); } .scale__labels span { position: absolute; top: 4px; white-space: nowrap; } .scale__labels span:nth-child(2) { transform: translateX(-50%); }
.tile-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); min-width: 0; }

/* Progress */
.chart { display: block; width: 100%; height: auto; font-family: var(--font); } .chartkey { display: flex; gap: 16px; font-size: 13px; font-weight: 600; color: var(--text-body); } .chartkey span { display: flex; align-items: center; gap: 6px; } .chartkey i { width: 16px; height: 3px; border-radius: 2px; }
.sore14 { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; align-items: end; height: 96px; } .sore14 li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; } .sbar { width: 70%; border-radius: 2px 2px 0 0; background: var(--done-light); }

/* Program */
.wks { display: grid; gap: 3px; grid-template-columns: repeat(12, minmax(0, 1fr)); } .wk { height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 5px; border: 1px solid var(--line); font-size: 12px; font-weight: 800; color: var(--text-muted); } .wk.is-past { background: var(--done); border-color: var(--done); color: #fff; } .wk.is-now { border: 2px solid var(--accent); color: var(--accent); }
.wk.is-deload { border: 1.5px solid var(--done-light); background: repeating-linear-gradient(135deg, rgba(130, 150, 174, .55) 0 3px, transparent 3px 7px); }
.phasebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); } .legendrow { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; font-weight: 600; color: var(--text-body); } .legendrow span { display: flex; align-items: center; gap: 6px; } .k { width: 12px; height: 12px; border-radius: 3px; } .k-done { background: var(--done); } .k-now { border: 2px solid var(--accent); } .k-del { border: 1.5px solid var(--done-light); background: repeating-linear-gradient(135deg, rgba(130, 150, 174, .55) 0 2px, transparent 2px 5px); }
.librow { min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; } .assume summary { min-height: 44px; display: flex; align-items: center; font-size: 15px; font-weight: 800; }

/* Exercise + Settings */
.iscale { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; } .iscale span { height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--ring-track); font-size: 13px; font-weight: 800; color: var(--text-muted); } .iscale .is-now { background: var(--accent); color: var(--on-accent); } .iscale .is-dusk { background: var(--dusk); color: var(--on-accent); } .iscale .is-over { background: var(--alert-tint); color: var(--alert); }
.thumb { height: 180px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-bar); border: 1px solid var(--line); background: var(--surface); } .thumb__play { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 32px; background: var(--text); color: var(--on-accent); }
.howto { display: flex; flex-direction: column; gap: 10px; } .howto li { display: flex; gap: 10px; } .howto__n { width: 24px; height: 24px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--surface-raised); font-size: 13px; font-weight: 800; }
.switchrow { min-height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); color: var(--text); } .switch { width: 52px; height: 32px; padding: 3px; border-radius: 16px; background: var(--line); } .switch i { display: block; width: 26px; height: 26px; border-radius: 13px; background: var(--text); } .switch.is-on { background: var(--accent); } .switch.is-on i { margin-left: 20px; background: var(--on-accent); } .range { width: 100%; height: 44px; accent-color: var(--accent); }

.toast { position: fixed; left: 50%; top: max(8px, env(safe-area-inset-top)); z-index: 20; transform: translateX(-50%); width: calc(100% - 40px); max-width: 440px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 6px 16px; border-radius: var(--r-card); border: 1px solid var(--line-strong); background: var(--surface-raised); font-size: 15px; font-weight: 700; } .toast button { min-height: 44px; padding: 0 14px; border: none; border-radius: 11px; background: var(--text); color: var(--on-accent); font-size: 15px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { html, body { transition: none; } }