* { box-sizing: border-box; margin: 0; padding: 0; }

  /* Light mode (default) */
  :root{
    color-scheme: light dark;
    --bg:#ffffff; --surface:#ffffff;
    --text:#1a1a1a; --muted:#666666;
    --line:#e3e3e3; --track:#eaeaea;
    --accent:#2563eb;   /* get-ready / rest */
    --go:#16a34a;       /* working phase */
    --primary:#1a1a1a; --primary-fg:#ffffff;
    --active:#f5f5f5;
    /* progress-bar stage colours */
    --s-prep:#2563eb; --s-warm:#f59e0b; --s-main:#16a34a; --s-cool:#7c3aed;
  }
  /* Dark mode */
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#141414; --surface:#1e1e1e;
      --text:#f0f0f0; --muted:#a2a2a2;
      --line:#333333; --track:#2c2c2c;
      --accent:#6ea8ff; --go:#4ade80;
      --primary:#f0f0f0; --primary-fg:#141414;
      --active:#262626;
      --s-prep:#6ea8ff; --s-warm:#fbbf24; --s-main:#4ade80; --s-cool:#a78bfa;
    }
  }

  html,body{ height:100%; }
  body{
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color:var(--text); background:var(--bg);
    display:flex; justify-content:center;
    -webkit-tap-highlight-color:transparent;
  }
  .wrap{
    width:100%; max-width:460px;
    padding:20px 18px calc(20px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; min-height:100dvh;
  }

  h1{ font-size:22px; font-weight:600; }
  .sub{ color:var(--muted); font-size:14px; margin-top:4px; }
  .field{ margin:16px 0 0; }
  .field > label{ font-size:13px; color:var(--muted); display:block; margin-bottom:8px; }
  .hint{ font-size:12px; color:var(--muted); margin-top:8px; line-height:1.45; }
  .link{ background:none; border:none; color:var(--accent); font-size:13px; cursor:pointer; padding:6px; }

  /* segmented + chips */
  .seg{ display:inline-flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
  .seg button{ border:none; background:var(--surface); padding:8px 14px; font-size:14px; cursor:pointer; color:var(--text); border-left:1px solid var(--line); }
  .seg button:first-child{ border-left:none; }
  .seg button[aria-pressed="true"]{ background:var(--primary); color:var(--primary-fg); }
  .seg button:disabled{ opacity:.4; cursor:default; }

  .chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .chips button{ border:1px solid var(--line); background:var(--surface); color:var(--text); padding:8px 14px; border-radius:20px; font-size:13px; cursor:pointer; }
  .chips button[aria-pressed="true"]{ background:var(--primary); color:var(--primary-fg); border-color:var(--primary); }

  .prow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0; font-size:14px; }
  .prow > span{ color:var(--muted); }
  .params{ display:none; }
  .params.on{ display:block; }

  /* collapsible sections */
  .sec{ border:1px solid var(--line); border-radius:10px; margin-top:12px; overflow:hidden; background:var(--surface); }
  .sechead{ display:flex; align-items:center; justify-content:space-between; padding:14px; cursor:pointer; user-select:none; }
  .sechead .t{ font-weight:600; font-size:15px; }
  .sechead .r{ display:flex; align-items:center; gap:10px; }
  .sechead .c{ font-size:12px; color:var(--muted); }
  .sechead .chev{ color:var(--muted); transition:transform .2s; }
  .sec.open .sechead .chev{ transform:rotate(90deg); }
  .secbody{ display:none; padding:2px 14px 14px; }
  .sec.open .secbody{ display:block; }
  .tools{ display:flex; gap:8px; justify-content:flex-end; }

  .item{ display:flex; align-items:center; gap:12px; padding:11px 2px; border-top:1px solid var(--line); cursor:pointer; user-select:none; }
  .item input{ width:18px; height:18px; accent-color:var(--accent); flex:none; }
  .item .info{ flex:1; min-width:0; }
  .item .nm{ font-size:15px; }
  .item .meta{ font-size:12px; color:var(--muted); margin-top:2px; }
  /* per-card variant picker (default + up to two modifiers) */
  .optseg{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
  .optseg button{ border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:11.5px; padding:3px 9px; border-radius:12px; cursor:pointer; line-height:1.3; }
  .optseg button[aria-pressed="true"]{ background:var(--primary); color:var(--primary-fg); border-color:var(--primary); }
  .item .fav{ flex:none; background:none; border:none; cursor:pointer; font-size:19px; line-height:1; padding:4px; color:var(--line); transition:color .15s, transform .1s; }
  .item .fav:active{ transform:scale(1.25); }
  .item .fav.on{ color:#f5b301; }
  .item .exinfo{ flex:none; background:none; border:none; cursor:pointer; font-size:17px; line-height:1; padding:4px 6px; color:var(--muted); border-radius:50%; transition:color .15s; }
  .item .exinfo:active{ color:var(--accent); }
  .item .exinfo.on{ color:var(--accent); }
  @media (hover:hover){ .item .exinfo:hover{ color:var(--accent); } }

  /* floating exercise-info tooltip (fixed, so section overflow can't clip it) */
  .tip{ position:fixed; z-index:50; max-width:min(260px,80vw); display:none;
    background:var(--primary); color:var(--primary-fg);
    font-size:12.5px; line-height:1.45; padding:9px 11px; border-radius:8px;
    box-shadow:0 6px 22px rgba(0,0,0,.22); pointer-events:none; }
  .tip.on{ display:block; }

  .est{ text-align:center; font-size:13px; color:var(--muted); margin-top:16px; font-variant-numeric:tabular-nums; }
  .est:empty{ display:none; }
  .start{ margin-top:12px; width:100%; padding:15px; border:none; border-radius:10px; background:var(--primary); color:var(--primary-fg); font-size:16px; font-weight:600; cursor:pointer; }
  .start:disabled{ background:var(--line); color:var(--muted); cursor:default; }

  /* ---------- home (first screen) ---------- */
  #home{ flex:1; display:flex; flex-direction:column; justify-content:center; }
  #home.off{ display:none; }
  .home-actions{ display:flex; flex-direction:column; gap:12px; margin-top:24px; }
  .home-sub{ display:block; font-weight:400; font-size:13px; opacity:.85; margin-top:5px; }
  .home-cfg{ width:100%; padding:15px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); font-size:16px; font-weight:600; cursor:pointer; }
  .home-cfg:active{ background:var(--active); }

  /* ---------- setup header with top-right Start ---------- */
  .setup-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    position:sticky; top:0; z-index:5; background:var(--bg);
    padding:8px 0 10px; border-bottom:1px solid var(--line); }
  .setup-head-r{ display:flex; flex-direction:column; align-items:flex-end; flex:none; }
  .start.start-top{ width:auto; margin-top:0; padding:11px 22px; font-size:15px; }
  .setup-head .est{ margin-top:8px; display:flex; flex-wrap:wrap; gap:3px 10px; justify-content:flex-end; align-items:center; max-width:230px; }
  .est .est-ph{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .est .est-ph i.d{ width:7px; height:7px; border-radius:50%; flex:none; }
  .est .est-ph i.prep{ background:var(--s-prep); }
  .est .est-ph i.warm{ background:var(--s-warm); }
  .est .est-ph i.main{ background:var(--s-main); }
  .est .est-ph i.cool{ background:var(--s-cool); }
  .est .est-total{ font-size:12.5px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }

  /* ---------- session (unchanged face) ---------- */
  #session{ display:none; flex:1; flex-direction:column; }
  #session.on{ display:flex; }
  #setup.off{ display:none; }

  /* segmented progress: one block per stage (prep / warm-up / main), sized by step count */
  .bar{ display:flex; gap:4px; height:6px; }
  .stg{ background:var(--track); border-radius:3px; overflow:hidden; min-width:0; }
  .stg > i{ display:block; height:100%; width:0; border-radius:3px; background:var(--muted); transition:width .3s ease; }
  .stg.prep > i{ background:var(--s-prep); }
  .stg.warm > i{ background:var(--s-warm); }
  .stg.main > i{ background:var(--s-main); }
  .stg.cool > i{ background:var(--s-cool); }
  .stage{ display:flex; align-items:baseline; gap:8px; margin-top:10px; flex-wrap:wrap; }
  .dot{ width:9px; height:9px; border-radius:50%; flex:none; align-self:center; background:var(--muted); }
  .dot.prep{ background:var(--s-prep); }
  .dot.warm{ background:var(--s-warm); }
  .dot.main{ background:var(--s-main); }
  .dot.cool{ background:var(--s-cool); }
  .stage-name{ font-size:14px; font-weight:600; }
  .stage-meta{ font-size:12px; color:var(--muted); }
  .setind{ font-size:12px; font-weight:600; color:var(--text); background:var(--active); border:1px solid var(--line); border-radius:10px; padding:2px 9px; align-self:center; }
  .setind:empty{ display:none; }
  .count{ font-size:13px; color:var(--muted); margin-left:auto; }

  .card{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; touch-action:pan-y; }
  .phase{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--accent); }
  .phase.go{ color:var(--go); }
  .phase.rest{ color:var(--accent); }
  .name{ font-size:34px; font-weight:700; line-height:1.05; margin:2px 0; }
  .reps{ font-size:17px; color:var(--muted); }
  .how{ font-size:14px; line-height:1.45; color:var(--muted); max-width:32ch; margin-top:4px; }

  .ring{ position:relative; width:190px; height:190px; margin:16px 0 6px; }
  .ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
  .ring .tk{ fill:none; stroke:var(--track); stroke-width:8; }
  .ring .pg{ fill:none; stroke:var(--accent); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset 1s linear, stroke .3s; }
  .ring.go .pg{ stroke:var(--go); }
  .ring.rest .pg{ stroke:var(--accent); }
  .ring .num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:48px; font-weight:700; font-variant-numeric:tabular-nums; }

  .controls{ display:flex; gap:10px; margin-top:8px; }
  .ctl{ flex:1; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); font-size:15px; cursor:pointer; color:var(--text); }
  .ctl.pause{ flex:1.4; font-weight:600; }
  .ctl:active{ background:var(--active); }
  .quit{ margin-top:10px; text-align:center; }

  #done{ display:none; flex:1; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:8px; }
  #done.on{ display:flex; }
  #done h2{ font-size:30px; font-weight:700; }
  #done .total{ font-size:20px; color:var(--muted); font-variant-numeric:tabular-nums; }
  #done .again{ margin-top:20px; padding:14px 28px; border:1px solid var(--line); border-radius:10px; background:var(--surface); color:var(--text); font-size:15px; cursor:pointer; }

  @media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

  /* ---------- large screens ---------- */
  @media (min-width:700px){
    body{ align-items:flex-start; }
    .wrap{ max-width:680px; padding:32px 32px calc(32px + env(safe-area-inset-bottom)); }
    h1{ font-size:26px; }
    .sub{ font-size:15px; }
    /* two-column checklists so long lists don't scroll forever */
    #list_prep, #list_warmup, #list_main, #list_cooldown{
      display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px;
    }
    /* keep the running session comfortably sized & centred */
    #session, #done{ max-width:560px; width:100%; margin:0 auto; }
    .ring{ width:240px; height:240px; }
    .ring .num{ font-size:60px; }
    .name{ font-size:44px; }
    .reps{ font-size:19px; }
    .how{ font-size:15px; max-width:46ch; }
  }
  @media (min-width:1100px){
    .wrap{ max-width:820px; }
    #list_prep, #list_warmup, #list_main, #list_cooldown{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  }