:root{
  /* base palette = design C · Ro (standard). A and B override below. Text colours ≥4.5:1 (UX review §9) */
  --bg:#f2eee7; --card:#fbf9f5; --card2:#ece6dc; --line:#e2dbcf; --text:#1f2d26; --muted:#5c625c;
  --accent:#004225; --accent-ink:#f6f1e7; --work:#9b4933; --rest:#3b6680; --reps:#7a5a2a; --prep:#7a5c1c; --ok:#2f6b4f;
  --ctrl-ink:var(--accent); --ctrl-bg:#00422512;
  --input:#f4f0e9; --border:transparent; --tabbg:#fbf9f5f2; --tabline:#e6dfd3; --sheet:#fbf9f5; --switch-off:#d6cfc3; --scrim:#2e3a3355;
  --tint:#2e3a330d; --tint-strong:#2e3a3314; --run-work:#f6d9cf; --run-rest:#d8e6ef; --run-prep:#f1e5c9;
  --accent-bg:var(--accent); --soft:color-mix(in srgb,var(--accent) 12%,transparent);
  --danger-bg:#f6ded6; --danger-fg:#9b4933; --danger:#9b4933; --notice-bg:#f4ecd8; --notice-line:#e2cf9f; --notice-fg:#6b5524;
  --toast-bg:#2e3a33; --toast-fg:#fbf9f5; --radius:26px; --shadow:0 6px 20px #6b5a3f14; --card-line:transparent;
  --chip-r:999px; --h1:20px; --display-w:500; --tabs-h:64px;
  --font:"Nunito","Quicksand","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px}
body{min-height:100dvh;overscroll-behavior-y:contain}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input{font:inherit;color:var(--text)}
.hidden{display:none!important}
.view{min-height:100dvh;display:flex;flex-direction:column;padding-bottom:calc(var(--tabs-h) + 96px + env(safe-area-inset-bottom))}
header.top{position:sticky;top:0;z-index:5;background:var(--bg);display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;border-bottom:1px solid var(--border)}
header.top h1{flex:1;font-size:var(--h1);font-weight:600;margin:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:22px;flex:none}
.iconbtn:active{background:var(--tint-strong)}
.iconbtn.accent{background:var(--accent-bg);color:var(--accent-ink)}
.pill{background:var(--accent-bg);color:var(--accent-ink);font-weight:600;border-radius:999px;padding:11px 20px;font-size:16px;display:inline-flex;align-items:center;gap:6px;justify-content:center}
.pill:active{filter:brightness(.9)}
.pill.ghost{background:var(--card2);color:var(--text)}
.pill.danger{background:var(--danger-bg);color:var(--danger-fg)}
.pill:disabled{opacity:.4}
main{padding:12px;display:flex;flex-direction:column;gap:12px}
.card{background:var(--card);border-radius:var(--radius);padding:14px 16px 18px;position:relative;box-shadow:var(--shadow);border:1px solid var(--card-line)}
.pcard{display:block;width:100%;text-align:left}
.pcard:active{background:var(--card2)}
.pcard .time{color:var(--accent);font-size:14px;font-variant-numeric:tabular-nums}
.pcard .name{font-size:28px;font-weight:var(--display-w);margin-top:8px;padding-right:40px;word-break:break-word}
.pcard .meta{color:var(--muted);font-size:14px;margin-top:4px}
.pcard .rounds{position:absolute;top:12px;right:52px;font-size:16px;color:var(--text)}
.pcard .more{position:absolute;top:2px;right:2px}
.empty{color:var(--muted);text-align:center;padding:40px 20px;line-height:1.5}
.bottombar{position:fixed;left:0;right:0;bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom));z-index:6;display:flex;gap:10px;padding:12px 12px 10px;background:linear-gradient(transparent,var(--bg) 30%)}
.bottombar .pill{flex:1;padding:15px}
.summary{display:flex;gap:18px;color:var(--muted);font-size:14px;flex-wrap:wrap}
.summary b{color:var(--accent);font-weight:500;font-variant-numeric:tabular-nums}
.exlist .ex{padding:12px 0;border-bottom:1px solid var(--line)}
.exlist .ex:last-child{border-bottom:0}
.ex .exname{font-size:19px;line-height:1.3}
.ex .times{display:flex;gap:14px;align-items:center;margin-top:6px;font-size:18px;font-variant-numeric:tabular-nums}
.c-reps{color:var(--reps)} .c-work{color:var(--work)} .c-rest{color:var(--rest)} .c-muted{color:var(--muted)}
/* editor */
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.text{background:var(--input);border:1px solid var(--line);border-radius:10px;padding:11px 12px;width:100%;font-size:17px}
.text:focus,.num:focus{outline:2px solid var(--accent);border-color:transparent}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.stepper{display:flex;align-items:center;background:var(--input);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stepper button{width:40px;height:42px;font-size:20px;color:var(--accent)}
.stepper button:active{background:var(--tint)}
.stepper input{width:42px;text-align:center;background:none;border:0;font-size:17px;-moz-appearance:textfield}
.timein{display:flex;align-items:center;background:var(--input);border:1px solid var(--line);border-radius:10px;padding:0 6px;height:44px}
.num{width:38px;background:none;border:0;text-align:center;font-size:17px;-moz-appearance:textfield;border-radius:6px;font-variant-numeric:tabular-nums}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.timein.work .num{color:var(--work)} .timein.rest .num{color:var(--rest)} .stepper.reps input{color:var(--reps)}
.exedit{background:var(--card);border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;gap:10px}
.exedit .head{display:flex;gap:6px;align-items:center}
.exedit .idx{color:var(--muted);font-size:14px;width:22px;flex:none}
.exedit .acts{display:flex;gap:4px;justify-content:flex-end}
.exedit .acts .iconbtn{width:40px;height:40px;font-size:18px;background:var(--input)}
.exedit .acts .iconbtn:disabled{opacity:.3}
/* settings */
.setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.setting:last-child{border-bottom:0}
.setting small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.switch{position:relative;width:52px;height:30px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--switch-off);border-radius:999px;transition:.2s}
.switch span:before{content:"";position:absolute;width:24px;height:24px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span:before{transform:translateX(22px)}
h2.sec{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:8px 4px -4px;font-weight:600}
/* run */
.run{min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:calc(14px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));transition:background .3s;--ph:var(--prep)}
/* stage 1 step 4: the phase is a solid colour field you can read from across the room */
.run.work{--ph:var(--work);background:var(--run-work)}
.run.rest{--ph:var(--rest);background:var(--run-rest)}
.run.prep{--ph:var(--prep);background:var(--run-prep)}
.run .topline{width:100%;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px}
.run .phase{margin-top:8px;font-size:22px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--phase-ink,#fff);background:var(--ph);padding:8px 26px;border-radius:999px;min-width:60%;text-align:center}
.run .exname{font-size:32px;font-weight:600;text-align:center;margin:6px 0 0;min-height:2.6em;display:flex;align-items:center;line-height:1.25}
.run .excue{font-size:15px;line-height:1.3;text-align:center;color:var(--muted);max-width:30em;min-height:1.3em;margin-top:2px}
.run .excue:empty{display:none}
.run .repinfo{color:var(--reps);font-size:16px;min-height:1.3em}
.ringwrap{position:relative;width:min(78vw,340px);cursor:pointer;-webkit-tap-highlight-color:transparent;aspect-ratio:1;margin:10px 0}
.ringwrap svg{width:100%;height:100%;transform:rotate(-90deg)}
.ringwrap .bgc{stroke:var(--tint-strong)} .ringwrap .fgc{stroke:var(--ph);transition:stroke .3s}
.ringwrap .count{position:absolute;inset:0;display:grid;place-items:center;font-size:max(96px,min(28vw,128px));font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.run .next{color:var(--text);font-size:20px;text-align:center;min-height:1.3em}
.run .next b{color:var(--text);font-weight:500}
.chips{display:flex;gap:8px;margin:14px 0 4px;flex-wrap:wrap;justify-content:center}
.chip{background:var(--tint);border-radius:var(--chip-r);padding:7px 12px;font-size:14px;font-variant-numeric:tabular-nums}
.chip b{font-weight:600}
.controls{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:22px;padding-top:16px}
.controls .iconbtn{width:60px;height:60px;font-size:26px;background:var(--ctrl-bg,var(--tint));color:var(--ctrl-ink,var(--text))}
.controls .play{width:84px;height:84px;font-size:36px;background:var(--accent-bg);color:var(--accent-ink)}
.controls .play .ic{margin-left:var(--play-nudge,0)}
.ic{display:block;flex:none}
.pill .ic{display:inline-block;width:.95em;height:.95em}
.stopbtn .ic{width:.8em;height:.8em}
.stopbtn{margin-top:14px}
.done{text-align:center;margin:auto 0;display:flex;flex-direction:column;gap:14px;align-items:center}
.done .big{font-size:42px}
/* sheet + toast */
.sheet{position:fixed;inset:0;z-index:20;background:var(--scrim);display:flex;align-items:flex-end}
.sheet-panel{width:100%;background:var(--sheet);border-radius:18px 18px 0 0;padding:8px 8px calc(12px + env(safe-area-inset-bottom))}
.sheet-panel .title{padding:12px 14px;color:var(--muted);font-size:14px}
.sheet-panel button{display:flex;width:100%;padding:15px 14px;font-size:17px;border-radius:10px;gap:14px}
.sheet-panel button:active{background:var(--tint)}
.sheet-panel button.danger{color:var(--danger)}
.toast{position:fixed;left:max(12px, env(safe-area-inset-left));right:max(12px, env(safe-area-inset-right));bottom:calc(var(--tabs-h) + 18px + env(safe-area-inset-bottom));z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 8px 8px 16px;border-radius:16px;
  background:var(--toast-bg);color:var(--toast-fg);font-size:16px;line-height:1.35;text-align:left;box-shadow:0 10px 28px #0000002e;animation:toastin .16s ease-out}
.toast .toastmsg{flex:1;min-width:0;padding:6px 0}
.toast.toast--high{bottom:calc(var(--tabs-h) + 94px + env(safe-area-inset-bottom))}
body.running .toast,body.notabs .toast{bottom:calc(16px + env(safe-area-inset-bottom))}
@keyframes toastin{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.toast{animation:none}}
.notice{background:var(--notice-bg);border:1px solid var(--notice-line);color:var(--notice-fg);border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.4}

/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:8;display:flex;background:var(--tabbg);border-top:1px solid var(--tabline);padding:6px 4px calc(6px + env(safe-area-inset-bottom));height:calc(var(--tabs-h) + env(safe-area-inset-bottom))}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);text-decoration:none;font-size:12px}
.tabs svg{width:42px;height:26px;padding:2px 9px;border-radius:999px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;box-sizing:border-box;overflow:visible}
.tabs a.on{color:var(--text)} .tabs a.on svg{background:var(--accent-bg);stroke:var(--accent-ink);width:56px}
body.running .tabs{display:none}
/* thumbs + images */
.thumb{width:64px;height:64px;border-radius:12px;background:var(--input);display:grid;place-items:center;flex:none;overflow:hidden;font-size:26px;opacity:.9}
.thumb.sm{width:52px;height:52px;font-size:22px}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.has span{display:none}
.exlist .ex{display:flex;gap:12px;align-items:center}
.exbody{flex:1;min-width:0}
.imgrow{display:flex;gap:8px;align-items:center}
.pill.sm{padding:8px 12px;font-size:14px}
.grow{flex:1}
.run .runimg{width:min(70vw,300px);height:min(19vh,170px);border-radius:16px;overflow:hidden;margin-top:10px;background:var(--tint)}
.run .runimg img{width:100%;height:100%;object-fit:contain}
.run .runimg.upcoming{opacity:.6;height:min(15vh,130px)}
.run.withimg .ringwrap{width:min(60vw,250px);margin:6px 0}
.run.withimg .exname{min-height:0;margin-bottom:2px}
.run.withimg .ringwrap .count{font-size:96px}   /* the image shrinks, the number does not */
/* catalog */
.search{display:flex;align-items:center;gap:8px;position:sticky;top:64px;z-index:4;background:var(--bg);padding:2px 0 6px}
.search span{color:var(--accent);font-size:18px}
.catlist{display:flex;flex-direction:column;gap:10px}
.catitem{display:flex;gap:12px;align-items:center;padding:12px}
.catbody{flex:1;min-width:0}
.catitem .exname{font-size:17px;font-weight:500}
.catitem .desc{font-size:13.5px;line-height:1.35;margin:3px 0 4px}
.catitem .cue{font-size:13px;line-height:1.35;margin:0 0 4px;color:var(--text);opacity:.85}
.quietbadges{font-size:13px;margin:10px 2px 0;line-height:1.6}
.quietbadges .qb{white-space:nowrap}
.times.sm{font-size:14px;margin-top:2px;gap:8px}
.catitem .add{font-size:24px}
/* week card / stats */
.weekcard{display:flex;gap:14px;align-items:center;color:inherit;text-decoration:none;padding:12px 16px}
.wc-title{font-weight:500;margin-bottom:2px}
.weekcard .c-muted{font-size:14px}
.wring{position:relative;flex:none}
.wring svg{width:100%;height:100%;display:block}
.wring b{position:absolute;inset:0;display:grid;place-items:center;font-weight:600;font-variant-numeric:tabular-nums}
.statcard{display:flex;gap:16px;align-items:center}
.stats{flex:1;display:flex;flex-direction:column;gap:10px}
.stats span{display:block;color:var(--muted);font-size:12.5px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.grid3 b{font-size:18px}
.cal .calhead{display:flex;align-items:center;justify-content:space-between;margin:-6px -6px 6px}
.cal .calhead b{font-size:18px;text-transform:capitalize}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.calgrid.wd span{font-size:12px;color:var(--muted);padding:4px 0}
.day{aspect-ratio:1;border-radius:50%;font-size:15px;position:relative;font-variant-numeric:tabular-nums}
.day.today{box-shadow:inset 0 0 0 1.5px var(--muted)}
.day.done{background:var(--accent-bg);color:var(--accent-ink);font-weight:600}
.day.part{box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent)}
.day.sel{outline:2px solid var(--text);outline-offset:1px}
.day small{position:absolute;top:-2px;right:-2px;background:var(--work);color:#fff;font-size:10px;border-radius:999px;min-width:16px;line-height:16px}
.legend{display:flex;gap:16px;justify-content:center;font-size:12.5px;color:var(--muted);margin-top:10px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.dot.done{background:var(--accent)} .dot.part{box-shadow:inset 0 0 0 2px var(--accent)}
.sess{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.sess:last-child{border-bottom:0}
.sess .c-muted{font-size:14px;margin-top:2px}
.tag{font-size:12px;background:var(--soft);color:var(--accent);border-radius:999px;padding:2px 8px;margin-left:4px}
.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.badge{background:var(--card);border-radius:12px;padding:10px 6px;text-align:center;display:flex;flex-direction:column;gap:3px;opacity:.38;filter:grayscale(1)}
.badge.on{opacity:1;filter:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
.badge span{font-size:28px} .badge b{font-size:13px;font-weight:600} .badge small{font-size:11px;color:var(--muted);line-height:1.25}
.weekdone{display:flex;gap:14px;align-items:center;text-align:left;background:var(--tint);border-radius:14px;padding:10px 16px}
.newbadge{display:flex;gap:12px;align-items:center;background:var(--soft);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:14px;padding:8px 16px;text-align:left;animation:pop .5s ease-out}
.newbadge span{font-size:30px} .newbadge small{display:block;color:var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{top:105vh;transform:rotate(540deg) translateX(30px)}}
.sheet-panel .si{width:26px;text-align:center}
.sheet-panel{max-height:75vh;overflow:auto}
.catitem .times{display:flex;align-items:center;font-variant-numeric:tabular-nums}
/* catalog tags + filter chips */
.tagfilter{display:flex;flex-direction:column;gap:8px}
.taggroup{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tglabel{width:100%;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.tagchip{border:1px solid var(--line);border-radius:var(--chip-r);padding:6px 12px;font-size:14px;color:var(--text);background:transparent;line-height:1.2}
.tagchip.on{background:var(--accent-bg);color:var(--accent-ink);border-color:transparent;font-weight:600}
.tagchip.kind.on{background:var(--rest);color:#10131f}
.tagchip.on:before{content:"✓ "}
.tagclear{align-self:flex-start;color:var(--accent);font-size:14px;padding:2px 0;text-decoration:underline}
.catcount{font-size:13px;margin:-4px 2px -4px}
.catitem .tags{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 5px}
.catitem .tags .tag{margin:0;font-size:11.5px;padding:2px 8px}
.catitem .tags .tag.kind{background:color-mix(in srgb,var(--rest) 18%,transparent);color:var(--rest)}
.catitem .thumb,.exlist .thumb.has{background:#fdf6eb}
/* design picker */
h2.sec .beta{font-size:10px;background:var(--soft);padding:2px 6px;border-radius:999px;margin-left:6px;vertical-align:1px}
.themepick{display:flex;flex-direction:column;gap:8px;padding:10px}
.themeopt{display:flex;gap:12px;align-items:center;text-align:left;padding:10px;border-radius:12px;border:1px solid var(--line)}
.themeopt.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.themeopt small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.swatch{display:flex;flex:none}
.swatch i{width:20px;height:34px;display:block;border:1px solid #8884}
.swatch i:first-child{border-radius:8px 0 0 8px} .swatch i:last-child{border-radius:0 8px 8px 0}

/* ============ Design A · Klar — light minimal, one strong accent, big type ============ */
[data-theme=a]{
  /* text colours darkened to ≥4.5:1 (UX review §9) */
  --ctrl-ink:var(--text); --ctrl-bg:#0000000d;
  --bg:#f7f7f4; --card:#ffffff; --card2:#efefea; --line:#e2e2dc; --text:#111111; --muted:#5e5e59;
  --accent:#bf360c; --accent-ink:#ffffff; --work:#bf360c; --rest:#1f55d6; --reps:#111111; --prep:#8f5400; --ok:#0b7a50;
  --input:#f2f2ee; --border:transparent; --tabbg:#ffffffee; --tabline:#e7e7e2; --sheet:#ffffff; --switch-off:#cfcfca; --scrim:#0005;
  --tint:#0000000a; --tint-strong:#0000000f; --run-work:#ffe3da; --run-rest:#dde7ff; --run-prep:#fff0d6;
  --danger-bg:#ffe5e0; --danger-fg:#bb3210; --danger:#bb3210; --notice-bg:#fff4dc; --notice-line:#f1d18a; --notice-fg:#6b4a00;
  --toast-bg:#111; --toast-fg:#fff; --radius:18px; --shadow:0 1px 2px #0000000d; --h1:30px; --display-w:800;
  --font:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
}
[data-theme=a] header.top{padding-top:calc(18px + env(safe-area-inset-top))}
[data-theme=a] header.top h1{font-weight:800;letter-spacing:-.03em}
[data-theme=a] .pcard .name{font-size:34px;letter-spacing:-.03em;line-height:1.05}
[data-theme=a] .pcard .time{font-weight:700;font-size:15px}
[data-theme=a] h2.sec{color:var(--text);letter-spacing:.12em}
[data-theme=a] .run .exname{font-size:34px;font-weight:800;letter-spacing:-.03em}
[data-theme=a] .run .phase{letter-spacing:.24em}
[data-theme=a] .ringwrap .count{font-weight:800;letter-spacing:-.05em}
[data-theme=a] .tabs a.on svg{background:var(--text);stroke:#fff}
[data-theme=a] .tagchip.kind.on{background:var(--text);color:#fff}
[data-theme=a] .catitem .tags .tag.kind{background:#0000000d;color:var(--text)}
[data-theme=a] .chip{background:#fff;box-shadow:0 1px 2px #0000001a}

/* ============ Design B · Neon — dark modern, vivid gradient accent, glassy cards ============ */
[data-theme=b]{
  --ctrl-ink:#d6ccff; --ctrl-bg:#ffffff12;
  --bg:#0b0c16; --card:#ffffff0d; --card2:#ffffff17; --line:#ffffff1f; --text:#f4f5ff; --muted:#9aa0c3;
  --accent:#9b87ff; --accent-ink:#ffffff; --accent-bg:linear-gradient(135deg,#7c5cff 0%,#c056ff 50%,#22d3ee 100%);
  --work:#ff4d8d; --rest:#22d3ee; --reps:#c4b5fd; --prep:#fbbf24; --ok:#34d399;
  --input:#ffffff0f; --border:#ffffff12; --tabbg:#0f1020cc; --tabline:#ffffff14; --sheet:#171a2e; --switch-off:#ffffff2a;
  --run-work:#4a1430; --run-rest:#0b3646; --run-prep:#3d2f0a; --soft:#9b87ff26;
  --danger-bg:#ff4d8d26; --danger-fg:#ff9cbf; --notice-bg:#fbbf2414; --notice-line:#fbbf2455; --notice-fg:#fde68a;
  --card-line:#ffffff17; --radius:20px; --shadow:0 8px 30px #0000004d; --display-w:600;
  --tint:#ffffff14; --tint-strong:#ffffff1a; --scrim:#0009; --danger:#ff8a8a; --toast-bg:#eee; --toast-fg:#222;
  --font:Roboto,"Segoe UI",system-ui,-apple-system,sans-serif;
}
[data-theme=b] body{background:radial-gradient(60% 40% at 0% 0%,#3b1d8f66,transparent),radial-gradient(50% 35% at 100% 15%,#0e749055,transparent),var(--bg) fixed}
[data-theme=b] .card,[data-theme=b] .exedit{backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
[data-theme=b] header.top,[data-theme=b] .search{background:#0b0c16b3;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
[data-theme=b] .tabs{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
[data-theme=b] .pcard .time,[data-theme=b] h2.sec,[data-theme=b] .summary b{background:linear-gradient(90deg,#a78bfa,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme=b] .pill,[data-theme=b] .controls .play{box-shadow:0 6px 24px #7c5cff59}
[data-theme=b] .pill.ghost{background:#ffffff12;box-shadow:none;border:1px solid #ffffff1a}
[data-theme=b] .ringwrap .fgc{stroke-width:6}
[data-theme=b] .run{--phase-ink:#0b0c16}
[data-theme=b] .run .phase{box-shadow:0 0 22px var(--ph)}
[data-theme=b] .tagchip{background:#ffffff08;border-color:#ffffff24}
[data-theme=b] .tagchip.kind.on{background:linear-gradient(135deg,#06b6d4,#22d3ee);color:#05202a}
[data-theme=b] .catitem .thumb{box-shadow:0 0 0 1px #ffffff1f}

/* ============ Design C · Ro — calm wellness palette, soft rounded shapes (variables in :root) ============ */
[data-theme=c] header.top h1{font-weight:600}
[data-theme=c] .pcard .name{font-size:26px}
[data-theme=c] .pill{padding:13px 22px}
[data-theme=c] .iconbtn.accent,[data-theme=c] .controls .play{box-shadow:0 8px 20px #0042253d}
[data-theme=c] .thumb,[data-theme=c] .run .runimg{border-radius:20px}
[data-theme=c] .tabs{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));border-radius:26px;border:1px solid var(--tabline);box-shadow:0 8px 24px #6b5a3f1f;height:var(--tabs-h);padding:6px 4px}
[data-theme=c] .bottombar{bottom:calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom))}
[data-theme=c] .tagchip{background:var(--card);border-color:transparent;box-shadow:0 1px 3px #6b5a3f1a}
[data-theme=c] .tagchip.kind.on{background:var(--rest);color:#fff}
[data-theme=c] h2.sec{text-transform:none;letter-spacing:0;font-size:15px;color:var(--muted)}
[data-theme=c] .ringwrap .fgc{stroke-linecap:round}
/* catalog illustrations share the warm off-white background, so letterboxing blends in */
.run .runimg{background:#fdf6eb}
[data-theme=b] .tagchip.on,[data-theme=c] .tagchip.on{background:var(--accent-bg);color:var(--accent-ink);border-color:transparent}
[data-theme=b] .tagchip.kind.on{background:linear-gradient(135deg,#06b6d4,#22d3ee);color:#05202a}
[data-theme=c] .tagchip.kind.on{background:var(--rest);color:#fff}

[data-theme=b] .controls .iconbtn:not(.play){border:1px solid #ffffff1f}
[data-theme=c] .controls .iconbtn:not(.play){box-shadow:inset 0 0 0 1px #00422526}
/* program editor: training days */
.daypick{display:flex;gap:6px;margin-top:2px}
.daypick .tagchip{flex:1;min-width:0;padding:9px 0;text-align:center;font-size:14px}
.daypick .tagchip.on:before{content:none}
/* end screen: rating = save (stage 1, step 2) */
.endview .done{width:100%;max-width:440px;gap:12px}
.endview .phase{background:none;padding:0;min-width:0;box-shadow:none}
.endmeta{font-size:15px}
.rate{display:flex;flex-direction:column;gap:12px;align-items:stretch;width:100%}
.rateq{font-size:20px;font-weight:600;text-align:center;margin-top:6px}
.ratebtns{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ratebtn{background:var(--accent-bg);color:var(--accent-ink);border-radius:var(--radius);min-height:84px;font-size:18px;font-weight:700;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.ratebtn span{font-size:24px;line-height:1}
.ratebtn:active{filter:brightness(.9)}
.ratelink{color:var(--muted);font-size:15px;text-decoration:underline;min-height:44px;padding:0 14px;align-self:center}
.ratelink.ouch{color:var(--danger);font-weight:600}
.rate .weekdone,.rate .newbadge{align-self:center}
.saved{font-weight:700;color:var(--ok);font-size:18px;text-align:center}
.notice.pain{text-align:left;display:flex;flex-direction:column;gap:6px}
.ratecard{display:flex;flex-direction:column;gap:10px}
.ratecard .rateq{font-size:17px;text-align:left;margin:0}
.ratecard .ratebtn{min-height:64px;font-size:16px}
.sheet-panel button.primary{background:var(--soft);font-weight:600}
.sheet-panel button .ic{width:1em;height:1em;margin:0 auto}
.appver{text-align:center;font-size:13px;color:var(--muted);padding:4px 0 8px}

/* stage 1 step 4: respect 'reduce motion' (no confetti, no pops, no transitions) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .confetti{display:none!important}
}

/* stage 1 step 5: trainer start screen */
.trainer .tdate{font-size:14px;white-space:nowrap}
.coach{display:flex;gap:12px;align-items:flex-start}
.coach.rate{align-items:flex-start}
.coach.rate .ratecard{flex:1;min-width:0}
.coachav{flex:none;width:42px;height:42px;border-radius:50%;background:var(--accent-bg,var(--accent));color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:14px;letter-spacing:.04em}
.coachtxt{font-size:18px;line-height:1.45;padding-top:2px}
.coach.care{border-color:var(--notice-line);background:var(--notice-bg);color:var(--notice-fg)}
.today{display:flex;flex-direction:column;gap:6px}
.today .tlabel{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.today .tname{font-size:30px;font-weight:var(--display-w,600);line-height:1.15;word-break:break-word}
.today .tmeta{font-size:15px}
.bigstart{width:100%;min-height:64px;font-size:20px;margin-top:10px}
.bigstart svg{width:22px;height:22px}
.trow{display:flex;gap:18px;justify-content:center;margin-top:4px}
.trow.center{margin:14px 0 6px}
.tlist{padding:4px 16px}
.tprog{display:flex;justify-content:space-between;gap:12px;padding:13px 0;color:inherit;text-decoration:none;border-bottom:1px solid var(--border)}
.tprog:last-child{border-bottom:0}
.tprog span:first-child{font-size:17px}
.trow .ratelink{display:inline-flex;align-items:center}
.today{padding-bottom:6px}
a.pill{text-decoration:none}
img.coachav{width:48px;height:48px;padding:0;object-fit:cover;background:#fff5e9;box-shadow:0 0 0 2px var(--accent)}
.coachname{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--muted);margin-bottom:2px}
/* trin 6: rating = colour + letter */
.rl{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-style:normal;font-size:11px;font-weight:800;line-height:1;color:var(--rate-ink,#fff);vertical-align:-3px;flex:none}
.rl.r-let{background:var(--rest)} .rl.r-passende{background:var(--ok)} .rl.r-hard{background:var(--reps)} .rl.r-ondt{background:var(--danger)}
.rl.r-none{background:var(--tint-strong);color:var(--muted)}
[data-theme=b]{--rate-ink:#0b0c16}
.day .rl.dayr{position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;font-size:10px;box-shadow:0 0 0 2px var(--card)}
.rlegend{flex-wrap:wrap;gap:6px 14px;margin-top:6px} .rlegend .rl{margin-right:5px}
.sesswrap{border-bottom:1px solid var(--line)} .sesswrap:last-child{border-bottom:0}
.sesswrap .sess{width:100%;text-align:left;border-bottom:0;min-height:56px;color:inherit;font:inherit;background:none}
.sessr{display:flex;align-items:center;gap:8px} .sessr .rl{width:24px;height:24px;font-size:13px}
.chev{font-size:22px;color:var(--muted);transition:transform .15s} .sesswrap.open .chev{transform:rotate(90deg)}
.sessdet{padding:0 0 14px;display:flex;flex-direction:column;gap:10px}
.sessrate{display:flex;align-items:center;gap:6px}
.sessex{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.sessex li{display:flex;justify-content:space-between;gap:10px;font-size:15px} .sessex li .c-muted{white-space:nowrap;font-size:14px}
.sessdet .pill.danger{align-self:flex-start}
.pstats{display:flex;flex-direction:column;gap:12px}
.pstat{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:15px}
.pstat>div{grid-column:1/-1} .pstat .pprog{color:var(--ok);font-weight:600}
/* v13: Kinlie's photo big, above the message (Træner screen) */
.coach.big{flex-direction:column;align-items:center;gap:10px;text-align:center}
.coachhead{display:flex;flex-direction:column;align-items:center;gap:8px}
.coach.big img.coachav{width:132px;height:132px;border-radius:50%;object-fit:cover;background:#0d2a1f;box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--accent),var(--shadow)}
.coach.big .coachname{margin:0;font-size:14px}
.coach.big .coachtxt{padding:0 2px;text-wrap:pretty}
.coach.big .trow{margin-top:12px;align-items:center}
/* trin 8/9: questionnaire */
.quiz main{display:flex;flex-direction:column;gap:12px}
.qhead{display:flex;align-items:center;gap:10px;font-size:14px}
.qhead img.coachav{width:56px;height:56px;border-radius:50%}
.qprog{font-size:14px;margin-top:4px}
.qbar{height:6px;border-radius:999px;background:var(--tint-strong);overflow:hidden}
.qbar i{display:block;height:100%;background:var(--accent);border-radius:inherit}
.qq{font-size:24px;font-weight:var(--display-w,600);line-height:1.25;margin:6px 0 0}
.qhint{font-size:15px;line-height:1.45}
.qopts{display:flex;flex-direction:column;gap:10px}
.qopt{min-height:58px;border-radius:calc(var(--radius) * .6);background:var(--card);border:2px solid var(--line);box-shadow:var(--shadow);font-size:18px;text-align:left;padding:12px 18px;color:var(--text)}
.qopt.on{border-color:var(--accent);background:var(--soft);font-weight:700}
.qopt:active{filter:brightness(.95)}
.qres{display:flex;flex-direction:column;gap:4px}
.qres.rec{box-shadow:0 0 0 2px var(--accent),var(--shadow)}
.qres .tlabel{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.qname{font-size:22px;font-weight:var(--display-w,600)}
.qex{font-size:14px;line-height:1.45;color:var(--muted)}
/* v13: Kinlie is "alive" – tilt from the phone's orientation, glow follows, breathing when idle */
.coachhead{perspective:600px}
.kinlietilt{position:relative;border-radius:50%;transform:translate3d(var(--tx,0),var(--ty,0),0) rotateX(var(--rx,0)) rotateY(var(--ry,0));transform-style:preserve-3d;will-change:transform}
.kinlietilt .mglow{position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,40%),#ffffff38 0,#ffffff00 55%);mix-blend-mode:soft-light}
.kinlietilt.idle{animation:kinliebreathe 6s ease-in-out infinite}
@keyframes kinliebreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025) translateY(-1px)}}
@media (prefers-reduced-motion: reduce){.kinlietilt{transform:none!important;will-change:auto}.kinlietilt .mglow{display:none}}
/* v14: Kinlie's suggestions (progression) */
.coach .sugrow{justify-content:center;gap:16px;margin-top:12px;flex-wrap:wrap}
.coach .sugrow .pill.sm{min-height:48px;padding:0 22px}

/* v15: 'Anbefalet af Kinlie' on recommended programs; questionnaire row at the top of Indstillinger */
.pcard .recbadge{display:inline-block;margin:8px 0 -2px;padding:3px 10px;border-radius:999px;background:var(--accent-bg);color:var(--accent-ink);font-size:12px;font-weight:700;letter-spacing:.04em}
.quizrow{padding-bottom:16px}
.quizrow .setting{border:0}
.quizrow .bigstart{display:flex;width:auto;text-align:center;margin:4px 16px 0;text-decoration:none}
/* v16: Katalog segments, program tags/sort, intensity */
.catseg{display:flex;background:var(--card2);border-radius:999px;padding:4px;gap:4px}
.catseg button{flex:1;padding:10px 12px;border-radius:999px;font-size:16px;font-weight:600;color:var(--muted)}
.catseg button.on{background:var(--accent-bg);color:var(--accent-ink)}
.sortrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pcard .pgoal{font-size:14px;margin-top:2px}
.pcard .tags{margin-top:8px}
.pgoal{font-size:15px}
.tag.side{background:var(--card2);color:var(--text)}
.levelbox{display:flex;flex-direction:column;gap:8px}
.levelbox .lvtitle{font-size:17px}
.levelbox .lvtitle b,.lvline b{color:var(--accent)}
.levelbox .lvwhy,.levelbox .lvhint{font-size:13px}
.lvseg{display:flex;gap:6px}
.lvseg .tagchip{flex:1;justify-content:center;text-align:center;padding:9px 6px;font-size:15px}
.levelbox .ratelink{align-self:flex-start}
.lvline{font-size:14px;margin:6px 0 2px;color:var(--muted)}
.ratelink.inl{padding:0;margin:0;display:inline}
.lvnote{font-size:13px;margin:0 4px}
.sidechk{display:flex;align-items:center;gap:8px;font-size:14px}
.sidechk input{width:20px;height:20px;accent-color:var(--accent)}
.pcard .tags{display:flex;flex-wrap:wrap;gap:4px}
.pcard .tags .tag{margin:0;font-size:11.5px;padding:2px 8px}
.pcard .tags .tag.kind{background:color-mix(in srgb,var(--rest) 18%,transparent);color:var(--rest)}
.sortrow .tagchip.on:before,.lvseg .tagchip.on:before{content:""}
/* v18: Kinlie's welcome – build yourself or get help */
.coach.big .trow.wbtns{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;max-width:340px;margin:14px auto 0}
.wbtns .pill{min-height:50px;font-size:17px}
.wbtns .ratelink{align-self:center}
.kinlietilt[role=button]{cursor:pointer;border-radius:50%}
.kinlietilt[role=button]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.ownex{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;margin-top:12px;padding:12px 14px;border:1.5px dashed var(--line,currentColor);border-radius:12px;color:var(--text);background:transparent;font-size:16px;text-decoration:none}
.ownex b{color:var(--accent)}
.ownex small{color:var(--muted);font-size:13px}
.catlist + .ownex,.catcount + .ownex{margin:0 0 10px}
.ownrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 2px}
.ownrow small{flex:1;min-width:160px;font-size:13px}
.coach.selfhello{align-items:center;padding:12px 14px}
.coach.selfhello .coachtxt{font-size:16px;padding:0}
.qmine{font-size:17px;margin-bottom:6px}
.quizrow #selfBuild{display:flex;width:auto;margin:8px 16px 0}
/* v19: equipment */
.tag.equip{background:color-mix(in srgb,var(--work) 16%,transparent);color:var(--work)}
.tag.noequip{background:var(--card2);color:var(--muted)}
.tag.adapted{background:var(--notice-bg);color:var(--notice-fg)}
.ptags{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 6px}
.ptags .tag{margin:0}
.altline{font-size:12.5px;margin-top:2px}
.swapped{font-size:12.5px}
.equipcard{display:flex;flex-direction:column;gap:10px}
.eqchips{display:flex;flex-wrap:wrap;gap:6px}
.eqhint,.eqnow{font-size:13.5px}
/* v21: questionnaire v2 */
.qage{display:flex;align-items:center;gap:10px}
.qage input{font-size:28px;font-weight:700;width:130px;min-height:58px;border-radius:calc(var(--radius) * .6);border:2px solid var(--line);background:var(--card);color:var(--text);padding:8px 14px;text-align:center}
.qage input:focus{outline:none;border-color:var(--accent)}
.qopt.qskip{min-height:48px;font-size:16px;text-align:center;box-shadow:none}
.qsafety{display:flex;gap:10px;align-items:flex-start;background:var(--soft);border-radius:calc(var(--radius) * .6);padding:12px 14px;font-size:15px;line-height:1.45}
.qsafety .coachav{width:34px!important;height:34px!important;flex:none;border-radius:50%;margin:0}

/* v26: shared filter sheet (trin 8) */
.fxrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.fxopen{border:1px solid var(--line);border-radius:var(--chip-r);padding:6px 12px;font-size:14px;color:var(--text);background:transparent;font-weight:600}
.fxopen.on{border-color:var(--accent);color:var(--accent)}
.fxactive{display:contents}
.xchip:before{content:none!important}
.fsheet{position:fixed;inset:0;z-index:25;background:var(--scrim);display:flex;align-items:flex-end}
.fsheet[hidden]{display:none}
.fpanel{width:100%;max-width:640px;margin:0 auto;background:var(--sheet);color:var(--text);border-radius:18px 18px 0 0;padding:6px 16px calc(12px + env(safe-area-inset-bottom));max-height:85vh;overflow:auto;display:flex;flex-direction:column;gap:14px}
.fhead{display:flex;align-items:center;gap:10px;position:sticky;top:0;background:var(--sheet);padding:10px 0 4px;z-index:1}
.fhead b{font-size:18px}.fhead .c-muted{flex:1;font-size:14px}
.flink{font-size:13px;color:var(--accent);margin-left:4px}
.ffoot{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;bottom:0;background:var(--sheet);padding:10px 0 2px}
.ffoot .pill{flex:1;max-width:260px}
.fxundo{margin-top:12px}
/* v27: the week plan – 'Din uge' strip on Træner, the Ugeplan screen, plan line on a workout, toast button */
.weekplan{padding:12px 12px 14px}
.wphead{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 8px}
.wstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.wday{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 6px;border-radius:14px;min-height:64px;color:var(--text);background:transparent}
.wday:active{background:var(--tint)}
.wday .wdn{font-size:12px;color:var(--muted)}
.wday .wdd{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3}
.wday .wdots{display:flex;gap:3px;height:6px}
.wday .wdots i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.wday.isnow{box-shadow:inset 0 0 0 2px var(--accent)}
.wday.done .wdd{color:var(--ok)}
.wday.has:not(.done){background:var(--soft)}
.wphint{font-size:14px;padding:8px 4px 0}
.week main{gap:10px}
.wkintro{font-size:14px;line-height:1.45;padding:0 4px}
.wkday{padding:10px 12px 8px}
.wkday.isnow{box-shadow:var(--shadow),inset 0 0 0 2px var(--accent)}
.wkhead{padding:2px 4px 6px;font-size:16px}
.wkslot{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;width:100%;text-align:left;padding:10px 12px;margin:2px 0;border-radius:14px;background:var(--soft);color:var(--text);column-gap:10px}
.wkslot .wkname{font-weight:600;font-size:16px}
.wkslot .c-muted{font-size:13.5px;grid-row:2}
.wkslot .wkmore{grid-row:1/3;grid-column:2;align-self:center;font-size:20px;color:var(--muted)}
.wkslot:active{background:var(--tint-strong)}
.wkrest{font-size:14px;padding:4px 4px 2px}
.wkadd{margin:4px 0 0 2px}
.wksum{text-align:center;font-size:14px;padding:6px 8px 4px;line-height:1.45}
.planline{font-size:14.5px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px}
.planline b{color:var(--text);font-weight:600}
.toast .toastbtn{flex:none;color:inherit;font-weight:800;font-size:15px;min-height:44px;padding:0 16px;border-radius:12px;background:#ffffff1f;border:1px solid #ffffff40;text-decoration:none}
.toast .toastbtn:active{background:#ffffff33}
/* v28: Kinlie's suggestion for the week on Træner */
.proposal{display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow),inset 0 0 0 2px var(--accent)}
.proposal .tlabel{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.prows{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.prow{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:10px 12px;border-radius:14px;background:var(--soft);color:var(--text);text-decoration:none}
.prow .pday{grid-row:1/3;align-self:center;font-size:15px;color:var(--accent)}
.prow .pname{font-weight:600;font-size:16px;line-height:1.25}
.prow .pmeta{font-size:13.5px}
.prest,.pextra,.preplace{font-size:14px;line-height:1.45;padding:0 2px}
.pfys{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:14px;background:var(--tint)}
.pfys .pill{align-self:flex-start}
.proposal .bigstart{margin-top:4px}
.proposal .trow{align-items:center}
#wkAsk{align-self:center;gap:10px}
#wkAsk img.coachav{width:28px;height:28px;border-radius:50%;box-shadow:none}
/* v30: a day in 'Din uge' – read only */
.dayview{display:flex;flex-direction:column;gap:12px;padding:0 14px 8px}
.dvw{display:flex;flex-direction:column;gap:6px}
.dvhead{display:flex;flex-direction:column}
.dvhead b{font-size:18px}
.dvhead .c-muted{font-size:14px}
.dvex{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:6px}
.dvex li{display:flex;flex-direction:column;font-size:15.5px;line-height:1.3}
.dvex li .c-muted{font-size:13.5px}
.dvrest{font-size:15.5px;padding:4px 0 8px}
/* v31: Plan tab – Uge | Workouts | Øvelser, Mine / Kinlies */
.planseg{margin-bottom:2px}
.pplan{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;margin-top:6px;font-size:14px}
.pplan .pdays{color:var(--accent);font-weight:600}
.pplan .ratelink{font-size:14px;min-height:0;padding:0;margin:0;align-self:baseline}
.minehint{font-size:14px;padding:4px 4px 6px;line-height:1.45}
/* v32: today's date centred in the calendar circle; own exercises */
.day{display:flex;align-items:center;justify-content:center;padding:0}
.catitem.own .desc{font-size:13.5px}
/* v33: the plan is the goal – score in 'Din uge', streak and progress on Resultater */
.wphead > div{display:flex;flex-direction:column;gap:2px}
.wpscore{font-size:14px;color:var(--accent);font-weight:600}
.statcard.v33{display:flex;flex-direction:column;gap:14px}
.statcard.v33 .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.statcard.v33 .grid3 b{font-size:22px;display:block}
.statcard.v33 .grid3 span{font-size:12.5px;color:var(--muted);line-height:1.3;display:block}
.progbox{display:flex;flex-direction:column;gap:4px;font-size:15px;border-top:1px solid var(--line);padding-top:12px}
.progbox .pprog{color:var(--accent)}
/* v34: Resultater – Sådan går det, sessions sheet */
.howgoes{display:flex;flex-direction:column;gap:0;padding:6px 8px}
.hgrow{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 8px;border-radius:14px;color:var(--text);width:100%}
.hgrow + .hgrow{border-top:1px solid var(--line);border-radius:0}
.hgrow:active{background:var(--tint)}
.hghead{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.hghead b{font-size:16.5px}
.hgfeel{font-size:15px}
.hgrow .pprog{color:var(--accent);font-size:15px}
.hgrow .c-muted{font-size:14px}
.hgkinlie{font-size:14px;color:var(--accent);font-weight:600}
.dayview .sessrate{font-size:15px}
.dayview .delsess{align-self:flex-start;padding:0;min-height:36px;color:var(--danger)}
/* v35: Kinlie's workouts are locked */
.lockline{font-size:14.5px;line-height:1.45;color:var(--muted);background:var(--tint);border-radius:14px;padding:10px 12px}
.exfixed{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.exfixed b{font-size:17px}
.exfixed small{font-size:12.5px}
.tag.lock{font-size:12px;vertical-align:middle}
/* v36: questionnaire – age slider */
.qslider{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:18px 4px 8px}
.qagenum{text-align:center;font-size:56px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.1}
.qslider input[type=range]{width:100%;height:44px;accent-color:var(--accent)}
.qscale{display:flex;justify-content:space-between;font-size:13px}
.qskipage{align-self:center}
.qslider input[type=range]{-webkit-appearance:none;appearance:none;background:transparent}
.qslider input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:var(--card2)}
.qslider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:36px;height:36px;margin-top:-14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--card),var(--shadow)}
.qslider input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--card2)}
.qslider input[type=range]::-moz-range-thumb{width:36px;height:36px;border:0;border-radius:50%;background:var(--accent)}
/* v37: ＋ on workout cards = put it on a day */
.pcard .padd{position:absolute;right:14px;bottom:14px;font-size:24px}
.pcard .tags,.pcard .pplan,.pcard .meta{padding-right:60px}
/* v38: exercise page, how-to on the run screen, voice modes */
.exhero .thumb.hero{width:100%;height:240px;border-radius:var(--radius);font-size:64px}
.exhero .thumb.hero img{object-fit:contain;background:var(--card)}
.exhow{display:flex;flex-direction:column;gap:6px}
.exhow p{margin:0 0 6px;font-size:16px;line-height:1.5}
.exvar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.exvarl{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;background:var(--soft);color:var(--text);text-decoration:none}
.exlist .ex[data-goex]{cursor:pointer}
.exlist .exmore{color:var(--muted);font-weight:400}
.catitem[data-ex]{cursor:pointer}
.exta{resize:vertical;min-height:60px;font:inherit}
.run .exrow{display:flex;align-items:center;justify-content:center;gap:6px;max-width:100%}
.run .exinfo{width:36px;height:36px;font-size:20px;color:var(--muted);flex:none}
.run .exdesc{font-size:15px;line-height:1.4;text-align:center;color:var(--text);max-width:30em;margin-top:4px;padding:0 8px}
.run .exdesc:empty{display:none}
.run .tlbtns{display:flex;align-items:center;gap:6px}
.vbtn{font-size:13px;padding:6px 10px;border-radius:999px;background:var(--tint);color:var(--muted)}
.vbtn.on{background:var(--accent-bg);color:var(--accent-ink)}
.vmode{padding:0 14px 12px}
/* v39: browse (› = show) and pick (tap = add ✓, ⓘ = peek) */
.cardgo{color:var(--muted);font-size:26px;flex:none;align-self:center;padding:0 2px 0 6px;line-height:1}
.pcard .cardgo{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
.pcard .pinfo{position:absolute;right:10px;top:10px}
.pinfo{flex:none;align-self:center;font-size:20px;color:var(--muted)}
.pickok{display:none;position:absolute;right:14px;bottom:12px;width:30px;height:30px;border-radius:50%;background:var(--ok);color:#fff;font-weight:700;place-items:center}
.catitem.added .pickok,.pcard .pickok{display:grid}
.catitem{position:relative}
.catitem.added{box-shadow:var(--shadow),inset 0 0 0 2px var(--ok)}
.useline{font-size:13.5px;color:var(--accent);font-weight:600;margin-top:4px}
.pickhint{font-size:14px;padding:0 4px}
.planline{justify-content:space-between}
/* v40: simpler – merged Træner card, chips, folded editor rows, settings groups, empty states */
.coach.merged{display:flex;flex-direction:column;gap:14px;padding:18px}
.coach.merged .cmrow{display:flex;gap:14px;align-items:center}
.coach.merged .kinlietilt.sm img.coachav{width:64px;height:64px;box-shadow:0 0 0 2px var(--accent)}
.coach.merged .coachtxt{font-size:17px;line-height:1.4;text-align:left}
.coach.merged .trow{justify-content:flex-start}
.todayrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:16px;background:var(--soft);color:var(--text);text-decoration:none}
.todayrow .trtext{display:flex;flex-direction:column;gap:2px}
.todayrow .tname{font-size:22px;line-height:1.2}
.todayrow .tmeta{font-size:14px}
.todayrow .tlabel{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.coach.merged .bigstart{width:100%}
.coach.merged > .ratelink{align-self:center}
.wbtns{flex-direction:column;align-items:stretch;gap:6px}
.wbtns .pill{justify-content:center}
.wsum{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:16px;padding:0 4px}
.lvchip{border-radius:999px;background:var(--soft);color:var(--accent);font-weight:700;font-size:15px;padding:6px 12px}
.card.planline{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;font-size:15px;color:var(--text)}
.exdose{font-size:14px}
.sheet-panel .levelbox{box-shadow:none;margin:0 6px 6px}
.wcard{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--text);text-decoration:none;padding:14px 16px}
.wctext{display:flex;flex-direction:column;gap:2px;min-width:0}
.wctext b{font-size:19px}
.wctext .c-muted{font-size:14px}
.wcdays{font-size:14px;color:var(--accent);font-weight:700}
.findmore{display:flex;gap:12px;align-items:center;color:var(--text);text-decoration:none;background:transparent;box-shadow:none;border:2px dashed var(--line)}
.findmore svg{color:var(--accent);flex:none}
.taggroup{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.taggroup::-webkit-scrollbar{display:none}
.taggroup .tagchip{flex:none}
.exhead{display:flex;align-items:center;gap:10px;width:100%;text-align:left;color:var(--text);padding:4px 0}
.exhead .idx{color:var(--muted);width:20px;flex:none}
.exsum{display:flex;flex-direction:column;flex:1;min-width:0}
.exsum b{font-size:17px}
.exsum small{font-size:14px}
.exhead .chev{color:var(--muted);font-size:20px}
.exedit:not(.open){padding-top:10px;padding-bottom:10px}
.exfold{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.exfold[hidden]{display:none}
.addex{width:100%;border:2px dashed var(--line);background:transparent}
.settings .sgroup{padding:4px 16px;display:flex;flex-direction:column}
.settings .srow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 0;color:var(--text);text-decoration:none;list-style:none;cursor:pointer}
.settings .srow::-webkit-details-marker{display:none}
.settings .srow span{display:flex;flex-direction:column;gap:2px}
.settings .srow small{color:var(--muted);font-size:14px}
.settings .sgroup > * + *{border-top:1px solid var(--line)}
.settings .sdet[open] .cardgo{transform:rotate(90deg)}
.settings .sdet{padding-bottom:6px}
.settings .sdet .setting{padding-left:0;padding-right:0}
.settings .vset,.settings .vmode{border-top:0!important}
.settings .vmode{padding:0 0 14px}
.settings .sbtns{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 8px}
.emptyhelp{display:flex;flex-direction:column;gap:14px}
.emptyhelp .cmrow{display:flex;gap:14px;align-items:center}
.emptyhelp p{margin:0;font-size:16px;line-height:1.45}
.emptyhelp .pill{justify-content:center}
.coach.merged .todayrow{align-self:stretch}
.exfold .head .idx{display:none}
.settings .setting{border-bottom:0}
/* v41: the exercise picture on its page is shown whole (in a grid, height:100% did not apply, so the picture was cropped at the bottom) */
.exhero .thumb.hero{display:block;position:relative}
.exhero .thumb.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.exhero .thumb.hero span{position:absolute;inset:0;display:grid;place-items:center}
.exhero .thumb.hero,.exhero .thumb.hero img{background:#fdf4e7}
/* v42: lock icon (svg) for Kinlie's workouts */
.lockline{display:flex;gap:8px;align-items:flex-start}
.lockline .lockic{flex:none;margin-top:3px;color:var(--accent)}
.tag.lock{display:inline-flex;align-items:center;gap:4px}
.tag.lock .lockic{width:12px;height:12px}
/* v43: Kinlie big again in the merged card (photo, name, text under it), the workout and Start below */
.coach.big.merged{align-items:stretch;gap:12px}
.coach.big.merged .coachhead,.coach.big.merged .coachtxt{align-self:center;text-align:center}
.coach.big.merged .coachtxt{font-size:19px;line-height:1.45}
.coach.big.merged .sugrow,.coach.big.merged .trow{justify-content:center}
.coach.big.merged .todayrow{text-align:left}
/* v44: Ugeplan – summary on top, rest days as one line, drag and drop, time of day */
.view.week .wksum{display:flex;flex-direction:column;gap:2px;text-align:left;padding:2px 4px 0;font-size:15px}
.view.week .wksum .wkintro{font-size:13.5px;padding:0}
.wkdays{display:flex;flex-direction:column;gap:10px}
.wkday.rest{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px 4px 14px;border-radius:16px;border:1px dashed var(--line, #e2dbcf);min-height:48px}
.wkday.rest.isnow{border:2px solid var(--accent)}
.wkday.rest .wkhead{display:block}
.wkday.rest .wkrest{padding:0;font-size:14px}
.wkplus{border:0;background:transparent;color:var(--accent);font:inherit;font-size:22px;width:44px;height:44px;border-radius:50%;cursor:pointer}
.wkplus:active{background:var(--soft)}
.wkslot{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.wkslot.dragging{opacity:.35}
.wkghost{position:fixed;z-index:50;pointer-events:none;margin:0;box-shadow:0 12px 30px #0003;transform:rotate(-1.5deg) scale(1.02);opacity:.95}
body.wkdragging{-webkit-user-select:none;user-select:none;cursor:grabbing}
.wkday.dropok{outline:3px solid var(--accent);outline-offset:2px;background:var(--tint, var(--soft))}
.wktime{color:var(--accent);font-weight:700}
/* v44: Forløb */
.card.course{display:flex;flex-direction:column;gap:8px;padding:14px 16px}
.course .crhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.course .crhead b{font-size:17px}
.course .crpos{font-weight:700;color:var(--accent);font-size:14px}
.course .crtxt{margin:0;font-size:14px;line-height:1.45}
.course .pill.sm{align-self:flex-start}
.course .trow{display:flex;gap:18px;flex-wrap:wrap}
.crdots{display:flex;gap:6px}
.crdots i{flex:1;height:6px;border-radius:3px;background:var(--soft)}
.crdots i.past{background:var(--accent);opacity:.45}
.crdots i.now{background:var(--accent)}
.crsheet{display:flex;flex-direction:column;gap:10px;padding:0 4px 4px}
.crsheet p{margin:0;font-size:14px;line-height:1.45}
.crweeks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.crweeks li{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;background:var(--soft);border-radius:14px;padding:10px 12px}
.crweeks .crlv{justify-self:end;font-size:13px;font-weight:700;color:var(--accent)}
.crweeks .c-muted,.crweeks .crw{grid-column:1/3;font-size:13.5px}
.crweeks .crw{font-weight:600}
.crsheet .bigstart{width:100%}
.wpcourse{font-size:13.5px;margin-top:8px;font-weight:600}
body.notabs .tabs{display:none}
body.notabs .view{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
/* v45: own sheets instead of the browser's dialogs */
.sheetform{display:flex;flex-direction:column;gap:12px;padding:4px 4px 8px}
.sheetform .bigstart{width:100%}
.armed{width:auto!important;min-width:0;padding:0 12px!important;border-radius:999px!important;font-size:13.5px!important;font-weight:700;white-space:nowrap;color:var(--danger, #a33a2a)!important;background:var(--danger-bg, #f6e1dc)!important}
/* v45: results – no duplicate numbers, the next badge, the rest folded; SVG icons */
.ic{vertical-align:-0.15em}
.ic.big{width:72px;height:72px;color:var(--accent)}
.grid3.two{grid-template-columns:1fr 1fr}
.badge.next{opacity:1;border-style:dashed}
.badge.next .nextlbl{font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.morebadges{margin-top:4px}
.morebadges summary{cursor:pointer;color:var(--muted);font-weight:600;padding:10px 4px;list-style:none}
.morebadges summary::before{content:'› ';display:inline-block;transition:transform .2s}
.morebadges[open] summary::before{transform:rotate(90deg)}
.ratebtn small{display:block;font-size:12.5px;font-weight:600;opacity:.8;margin-top:2px}
/* v45: editor – Færdig at the end (not over the fields), 5-second steps on the times */
.editdone{display:flex;padding:8px 12px 0}
.editdone .pill{flex:1}
.timein + .tstep,.tstep{display:flex;gap:6px;margin-top:6px}
.tstep button{flex:1;height:34px;border-radius:10px;background:var(--card2, #ece6dc);color:var(--text);font-weight:700;font-size:14px}
.lvchip .lvk{font-weight:600;color:var(--muted);margin-right:2px}
/* v45: exercise page – Godt for, facts with labels, one-or-two variants, image without an extra flat area */
.exhero .thumb.hero,.exhero .thumb.hero img{background:#fef7ec}
.exneed{display:flex;flex-direction:column;gap:8px}
.tag.need{text-decoration:none;color:var(--text);background:var(--soft)}
.tag.need.fit{background:var(--accent-bg, #dde8e1);color:var(--accent-ink, #004225);font-weight:700}
.fitnote{font-size:13.5px}
.exfacts dl{margin:0;display:flex;flex-direction:column;gap:8px}
.exfacts dl div{display:grid;grid-template-columns:76px 1fr;gap:8px}
.exfacts dt{color:var(--muted);font-size:14px}
.exfacts dd{margin:0;font-size:15px}
.exvar.one{grid-template-columns:1fr}
.fitline{font-size:13px;font-weight:700;color:var(--accent);margin-top:4px}
/* v48: badge line icons; the new badge is a quiet line on the end screen */
.badge span{display:flex;justify-content:center;color:var(--muted)}
.badge.on span{color:var(--accent)}
.badge .bic{width:32px;height:32px}
.newbadge{gap:10px;padding:8px 14px;border-color:transparent;font-size:15px}
.newbadge .bic{width:24px;height:24px;color:var(--accent);flex:none}
.newbadge span{font-size:15px}
/* v48: Prøv 20 sek, Mærk det i / Typisk fejl / Stop hvis */
.exhero{position:relative}
.exhero .trybtn{position:absolute;right:12px;bottom:12px;min-height:44px;padding:0 16px;font-size:15px;box-shadow:0 6px 16px #0000002a}
.exhow .exstop{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--notice-bg);color:var(--notice-fg);font-size:14px;line-height:1.4}
.tryview{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));overflow:auto}
.tryview .trytop{align-self:stretch;display:flex;justify-content:space-between;align-items:center}
.tryview .phase{min-width:200px;text-align:center}
.tryview .phase.prep{background:var(--card2);color:var(--text)}
.tryview .phase.done{background:var(--accent);color:#fff}
.tryview .tryname{font-size:30px;font-weight:800;text-align:center;text-wrap:balance}
.tryview .tryimg{width:min(70vw,260px);height:min(70vw,260px);border-radius:var(--radius);background:#fef7ec}
.tryview .tryimg img{object-fit:contain}
.tryview .trycount{font-size:112px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.tryview .trycue{text-align:center;max-width:34ch}
.tryview .trybtns{display:flex;flex-direction:column;gap:10px;align-self:stretch;max-width:420px;margin:auto auto 0;width:100%}
.tryview .trybtns .pill{width:100%}
.tryview .phase{font-size:20px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:8px 26px;border-radius:999px;color:#fff;background:var(--work)}
.wpscore .wpstreak{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;margin-left:6px}
.wpscore .wpstreak::before{content:"·";margin-right:3px}
.thumb .phic{width:46%;height:46%;color:var(--muted);opacity:.7}
/* v52: Test lyden – signals and voice side by side; a plain message when the phone's voice does not answer */
.setting.soundtest{flex-wrap:wrap;gap:10px}
.soundtest .tbtns{display:flex;gap:8px}
.vtestmsg{margin:4px 0 6px;font-size:14px;line-height:1.45}