:root{
    color-scheme: light;
    /* light theme (default) */
    --bg:#f2f2f7; --bg2:#e9ebf1; --card:#ffffff; --row:#f4f4f8; --field:#eff0f5;
    --ink:#1c1c1e; --l2:#6e6e73; --l3:#a6a6ac;
    --sep:rgba(60,60,67,.11);
    --accent:#e8551c; --accent-soft:rgba(232,85,28,.10);
    --grad:linear-gradient(135deg,#ff7a18 0%,#ff2f3d 100%);
    --segtrack:#e8e8ee; --segthumb:#ffffff;
    --track:#e6e6eb; --grabber:#c7c7cc; --sheetbg:#ffffff; --chartbg:#f4f4f8;
    --shadow:0 1px 2px rgba(17,17,26,.04), 0 8px 24px -16px rgba(17,17,26,.16);
    --line:rgba(17,17,26,.045);
    --hi:rgba(255,255,255,.65);
    --accent-glow:rgba(255,90,40,.40);
    --red:#ff3b30;
    --warntx:#9a6a00;   /* "ease off" caution note on the workout card */
    --sevok:#2f9e44; --sev1:#f0b400; --sev2:#f0820c; --sev3:#e03131;   /* injury intensity: green→yellow→orange→red */
    /* fading gradients (same idea as the main --grad) — green all-clear, then mild→severe */
    --grad-ok:linear-gradient(135deg,#51cf66 0%,#2f9e44 100%);
    --grad-s1:linear-gradient(135deg,#ffd43b 0%,#f59f00 100%);
    --grad-s2:linear-gradient(135deg,#ff922b 0%,#ef5f12 100%);
    --grad-s3:linear-gradient(135deg,#ff6b6b 0%,#e03131 100%);
    --r-lg:22px; --r-md:14px; --r-sm:10px;
  }
  html.dark{
    color-scheme: dark;
    --bg:#000000; --bg2:#0a0a0c; --card:#1c1c1e; --row:#2a2a2c; --field:#2c2c2e;
    --ink:#ffffff; --l2:#98989e; --l3:#636366;
    --sep:rgba(84,84,88,.45);
    --accent:#ff7a3a; --accent-soft:rgba(255,122,58,.16);
    --grad:linear-gradient(135deg,#ff7a18 0%,#ff3450 100%);
    --segtrack:#0e0e10; --segthumb:#3a3a3c;
    --track:#0e0e10; --grabber:#48484a; --sheetbg:#1c1c1e; --chartbg:#222226;
    --shadow:0 1px 1px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.85);
    --line:rgba(255,255,255,.06);
    --hi:rgba(255,255,255,.055);
    --accent-glow:rgba(255,122,58,.38);
    --red:#ff453a;
    --warntx:#ffc566;
    --r-lg:22px; --r-md:14px; --r-sm:10px;
  }
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
  html,body{ touch-action:manipulation; }
  html,body{ color:var(--ink);
    font-family:-apple-system,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;
    font-variant-numeric:tabular-nums; }
  html{ background:var(--bg); transition:background .25s ease; }
 body{ max-width:540px; margin:0 auto; padding:0 16px calc(80px + env(safe-area-inset-bottom)); min-height:100vh; }
  /* native feel: a long-press never selects/highlights the UI or pops the iOS callout — except real inputs */
  html, body{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
  input, textarea, select, [contenteditable]{ -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
  /* Full-window app background. Use top:0 + height:100vh (NOT inset:0) — inset:0's bottom anchors to the
     DYNAMIC viewport, which is briefly short on a standalone cold launch, so the bg would flash short for a
     frame before settling. 100vh (static large viewport) covers the full height from the very first paint. */
  body::before{ content:""; position:fixed; top:0; left:0; right:0; height:100vh; z-index:-1; pointer-events:none;
    background:
      radial-gradient(140% 60% at 50% 42%, var(--accent-soft) 0%, transparent 68%),
      var(--bg);
    transition:background .25s ease; }

  /* LAUNCH SPLASH — brand gradient + flame logo over the whole window during cold start.
     Covers the dynamic-viewport blank strip (100vh static) and sits above everything. */
  .splash{ position:fixed; top:0; left:0; right:0; height:100vh; z-index:9999; pointer-events:none;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(160deg,#ff7a18 0%,#ff2f3d 100%);
    opacity:1; transition:opacity .42s ease; }
  .splash.gone{ opacity:0; }
  .splashInner{ display:flex; flex-direction:column; align-items:center; gap:18px;
    transform:translateY(-4%); animation:splashRise .5s ease both; }
  .splashLogo{ filter:drop-shadow(0 6px 18px rgba(0,0,0,.18)); }
  .splashWord{ color:#fff; font-size:30px; font-weight:800; letter-spacing:.5px; text-transform:lowercase; }
  .splashWord::after{ content:"."; opacity:.85; }
  @keyframes splashRise{ from{ opacity:0; transform:translateY(2%) scale(.96); } to{ opacity:1; transform:translateY(-4%) scale(1); } }

  .wordmark{ font-size:17px; font-weight:800; letter-spacing:.5px; text-transform:lowercase;
    background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text; display:inline-block; }
  .wordmark::after{ content:"."; color:var(--accent); -webkit-text-fill-color:var(--accent); }
 .nav{ padding: calc(6px + env(safe-area-inset-top)) 16px 4px; display:flex; align-items:center; justify-content:flex-end;
    position:sticky; top:0; z-index:30; margin:0 -16px;
    background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
  .navleft,.navright{ display:flex; align-items:center; gap:2px; }
  .iconbtn{ background:none; border:none; color:var(--accent); cursor:pointer; padding:12px; display:flex; align-items:center; transition:transform .12s, opacity .12s; }
  .iconbtn:active{ transform:scale(.86); opacity:.7; }
  .iconbtn svg{ width:25px; height:25px; }
  .merow{ display:flex; align-items:center; justify-content:space-between; padding:12px 2px; border-top:.5px solid var(--sep); }
  .merow:first-of-type{ border-top:none; }
  .merow label{ font-size:15px; }
  .meinput{ display:flex; align-items:center; gap:6px; }
  .meinput input{ width:88px; text-align:right; }
  .meinput .unit{ font-size:14px; color:var(--l2); width:22px; }
  .calc{ display:flex; flex-direction:column; }
  .sexseg{ display:flex; background:var(--segtrack); border-radius:8px; padding:2px; }
  .sexseg .s{ padding:8px 16px; font-size:13px; font-weight:600; color:var(--l2); border-radius:8px; cursor:pointer; transition:background .15s,color .15s; }
  .sexseg .s.active{ background:var(--segthumb); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12); }
  #expSeg .s{ padding:8px 12px; }   /* three segments — a touch tighter so New/Some/Years fit the row */
  .calcnote{ font-size:12px; color:var(--l2); line-height:1.5; padding:12px 2px 2px; }
  .calcap{ font-size:12px; color:var(--l2); line-height:1.45; margin:2px 0 12px; }
  .caldow{ display:grid; grid-template-columns:repeat(7,30px); gap:6px; justify-content:center; margin-bottom:8px; }
  .caldow span{ text-align:center; font-size:11px; font-weight:700; color:var(--l3); }
  .calgrid{ display:grid; grid-template-columns:repeat(7,30px); gap:6px; justify-content:center; }
  .calcell{ width:30px; height:30px; border-radius:8px; background:var(--row); }
  .calcell.on{ background:var(--accent); }
  .calcell.today{ box-shadow:0 0 0 2px var(--accent) inset; }
  .calcell.future{ opacity:.3; }
  .calcrow{ display:flex; align-items:baseline; justify-content:space-between; padding:12px 2px; border-top:.5px solid var(--sep); }
  .calcrow:first-child{ border-top:none; }
  .calcrow .ck{ font-size:15px; color:var(--ink); }
  .calcrow .cv{ font-size:16px; font-weight:600; }
  .calcrow .cv small{ font-size:13px; font-weight:500; color:var(--l2); margin-left:8px; }
  .calc .empty{ font-size:13px; color:var(--l2); padding:8px 2px; line-height:1.45; }
  .titleBtn{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
  /* session + rest timers pin to the top of the workout page once a session is underway. .stick (JS,
     when active) makes it a sticky, full-bleed frosted bar matching the status/tab bars — applied
     unconditionally so the background can never flicker to transparent over content scrolling under. */
  .timersbar{ margin:-2px 0 16px; }
  .timersbar.stick{ position:sticky; top:env(safe-area-inset-top); z-index:25; margin:-2px -16px 16px; padding:6px 16px; background:color-mix(in srgb, var(--bg) 88%, transparent); box-shadow:0 .5px 0 var(--sep); }
  .timerbar{ display:flex; align-items:center; gap:10px; padding:2px 2px; margin:0; background:transparent; border:none; box-shadow:none; }
  .tmrbtn{ width:40px; height:40px; flex:0 0 auto; border-radius:50%; border:none; cursor:pointer; background:var(--accent-soft); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; transition:transform .12s; }
  .tmrbtn svg{ width:18px; height:18px; }
  .tmrtime{ font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.5px; min-width:52px; }
  .timerbar.run .tmrtime{ color:var(--accent); }
  .tmrlbl{ font-size:12px; color:var(--l3); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* idle (not yet started): hide the 0:00 + reset so it reads as a single small "Start" affordance */
  .timerbar.idle .tmrtime{ display:none; }
  .timerbar.idle .tmrreset{ display:none; }
  .timerbar.idle .tmrlbl{ font-size:13px; font-weight:500; color:var(--l2); }
  .tmrreset{ background:none; border:none; color:var(--l3); font-size:13px; font-weight:600; cursor:pointer; padding:12px 8px; margin:-4px -4px; }
  .tmrrepeat{ background:var(--accent-soft); border:none; color:var(--accent); font-size:13px; font-weight:600; cursor:pointer; padding:8px 12px; border-radius:16px; flex:0 0 auto; }
  .tmrrepeat:active{ opacity:.6; }
  .restbar{ display:none; position:relative; align-items:center; gap:9px; padding:12px 16px; margin:6px 0 0; border-radius:14px; overflow:hidden;
    background:var(--accent-soft); border:.5px solid var(--accent-soft); }
  .restbar.show{ display:flex; }
  .restbar.done{ animation:restpulse .6s ease; }
  @keyframes restpulse{ 0%,100%{ background:var(--accent-soft);} 50%{ background:var(--accent); } }
  .restprog{ position:absolute; left:0; top:0; bottom:0; width:100%; background:var(--accent); opacity:.16; transition:width 1s linear; }
  .restbar > *{ position:relative; z-index:1; }
  .restx{ width:36px; height:36px; flex:0 0 auto; border-radius:50%; border:none; background:transparent; color:var(--accent); font-size:16px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; margin:-8px -4px -8px -8px; }
  .restlbl{ font-size:13px; font-weight:600; color:var(--accent); }
  .resttime{ font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--accent); flex:1; cursor:pointer; }
  .resttime:active{ opacity:.6; }
  input.restedit{ -webkit-appearance:none; appearance:none; flex:1; min-width:0; width:74px; padding:3px 8px; border:1.5px solid var(--accent); border-radius:9px;
    background:transparent; color:var(--accent); font-size:17px; font-weight:700; font-variant-numeric:tabular-nums; outline:none; }
  .restadj{ display:inline-flex; gap:6px; }
  .restadj button{ background:var(--card); border:.5px solid var(--line); color:var(--ink); border-radius:8px; padding:12px 16px; font-size:13px; font-weight:600; cursor:pointer; transition:transform .12s; }
  /* Social: one two-people icon on the timer bar → dropdown to pick Share live / Train together */
  .tmrsocial{ position:relative; display:inline-flex; align-items:center; flex:0 0 auto; margin-right:-3px; }
  .tsoc-btn{ display:inline-flex; align-items:center; gap:4px; background:none; border:none; cursor:pointer; color:var(--l2); padding:6px 5px; border-radius:10px; line-height:1; -webkit-tap-highlight-color:transparent; }
  .tsoc-btn:active{ opacity:.5; }
  .socialic, .socialic2, .liveic{ flex:0 0 auto; width:21px; height:21px; color:var(--l2); transition:color .15s; }
  #socialBtn{ position:relative; }
  #socialBtn.gym .socialic{ color:#0a84ff; }                                          /* checked in → blue */
  #socialBtn.live .socialic{ color:var(--red); }                                      /* live → red icon … */
  #socialBtn.live::after{ content:""; position:absolute; top:3px; right:3px; width:8px; height:8px; border-radius:50%; background:var(--red); animation:livepulse 1.6s infinite; }  /* …with the glimmer halo */
  /* dropdown menu */
  .socialmenu{ position:absolute; top:100%; right:0; margin-top:8px; z-index:30; min-width:184px; padding:6px; display:flex; flex-direction:column; gap:2px;
    background:var(--card); border:.5px solid var(--line); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.20); }
  .socialmenu[hidden]{ display:none; }
  .socialmenu-item{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; background:none; border:none; cursor:pointer; color:var(--ink); font:inherit; font-size:15px; font-weight:600; text-align:left; -webkit-tap-highlight-color:transparent; }
  .socialmenu-item:active{ background:var(--row); }
  .socialmenu-item .liveic, .socialmenu-item .socialic2{ width:20px; height:20px; }
  .socialmenu-item.on .liveic{ color:var(--red); }
  .socialmenu-item.on .socialic2{ color:#0a84ff; }
  /* Share live panel — broadcast toggle + choose-who chips */
  /* dismissable panel card (shared by live + gym) */
  .spanel{ position:relative; margin:8px 0 16px; padding:14px 14px 16px; background:var(--row); border:.5px solid var(--line); border-radius:16px; animation:spanelIn .2s cubic-bezier(.2,1,.4,1); }
  .spanel[hidden]{ display:none; }
  @keyframes spanelIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
  .spanel-x{ position:absolute; top:8px; right:9px; background:none; border:none; color:var(--l3); font-size:14px; line-height:1; cursor:pointer; padding:6px; }
  .spanel-x:active{ opacity:.5; }
  .spanel-title{ font-weight:700; font-size:15px; color:var(--ink); margin:0 0 6px; }
  .livestart{ display:flex; align-items:center; gap:10px; padding:2px 28px 8px 2px; cursor:pointer; }
  .livestart>span:first-child{ flex:1; min-width:0; font-weight:700; font-size:15px; color:var(--ink); }
  .livesw{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
  .liveswui{ position:relative; flex:0 0 auto; box-sizing:border-box; width:44px; height:26px; border-radius:13px; background:var(--line); transition:background .2s; }
  .liveswui::after{ content:""; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
  .livesw:checked + .liveswui{ background:var(--red); }
  .livesw:checked + .liveswui::after{ transform:translateX(18px); }
  .livepick{ display:flex; flex-wrap:wrap; gap:8px; padding:6px 4px 2px; }
  .livepick[hidden]{ display:none; }
  .livechip{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; padding:4px 12px 4px 4px; border-radius:18px; border:.5px solid var(--line); background:var(--row); color:var(--ink); cursor:pointer; transition:background .12s, border-color .12s, color .12s; }
  .livechip .avatar{ box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18); }
  .livechip .lcname{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .livechip.on{ background:rgba(255,59,48,.12); border-color:rgba(255,59,48,.45); color:var(--red); }
  .livechip.always{ background:rgba(255,59,48,.12); border-color:rgba(255,59,48,.45); color:var(--red); opacity:.72; cursor:default; }
  /* a live session reads as a feed row (flat, hairline divider) so Live now + Friends are one set;
     the live ring on the avatar + accent "Watch ›" carry the live cue */
  .livecard{ display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:.5px solid var(--line); cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .livecard:active{ opacity:.6; }
  .livedot{ width:10px; height:10px; border-radius:50%; background:var(--red); flex:0 0 auto; animation:livepulse 1.6s infinite; }
  .livego{ color:var(--accent); font-weight:600; flex:0 0 auto; font-size:14px; }
  @keyframes livepulse{ 0%{ box-shadow:0 0 0 0 rgba(255,55,95,.5);} 70%{ box-shadow:0 0 0 8px rgba(255,55,95,0);} 100%{ box-shadow:0 0 0 0 rgba(255,55,95,0);} }
  /* Train together — bar icon + a face-pile of who's checked in; panel holds the gym-code entry */
  .tsoc .gym-faces{ display:inline-flex; flex:0 0 auto; min-width:0; }
  .tsoc .gym-faces .avatar{ margin-left:-7px; box-shadow:0 0 0 2px var(--bg); }
  .tsoc .gym-faces .avatar:first-child{ margin-left:0; }
  .gymhint{ font-size:12px; color:var(--l2); margin:0 0 10px; line-height:1.4; padding-right:20px; }
  .gympanel-row{ display:flex; gap:8px; align-items:center; margin-bottom:10px; }
  .gympanel-row input{ flex:1; min-width:0; height:44px; text-align:center; letter-spacing:3px; font-weight:700; font-size:17px; text-transform:uppercase; }
  .gymnew{ flex:0 0 auto; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; border:.5px solid var(--line); background:var(--card); color:var(--accent); cursor:pointer; }
  .gymnew svg{ width:18px; height:18px; }
  .gymnew:active{ transform:scale(.92); }
  /* the plan name reads as a quiet title, not a picker: no dropdown chevron. Tapping it still opens
     Plans — switching programs is a rare, deliberate act that doesn't need a permanent invitation. */
  .titleBtn .tchev{ display:none; }
  /* compact training-mode toggle in the title (replaces the full-width Strength/Cardio segment) */
  /* header controls: uniform, quiet icon buttons (no pill, no label) — one visual language */
  .modebtn{ flex:0 0 auto; align-self:center; display:inline-flex; align-items:center; justify-content:center; gap:0; background:none; color:var(--l2); border:none; font-family:inherit; padding:4px; border-radius:10px; cursor:pointer; line-height:1; transition:transform .12s; -webkit-tap-highlight-color:transparent; }
  .modebtn:active{ transform:scale(.9); }
  .modebtn .mic{ width:22px; height:22px; flex:0 0 auto; }
  #trainModeLbl{ display:none; }
  .modebtn.travelbtn.on{ background:none; color:var(--accent); }
  .modebtn .mic-car{ display:none; }
  .modebtn.cardio .mic-str{ display:none; }
  .modebtn.cardio .mic-car{ display:inline; }
  .modebtn .mic-act{ display:none; }
  .modebtn.activity .mic-str{ display:none; }
  .modebtn.activity .mic-act{ display:inline; }
  .ic{ width:16px; height:16px; vertical-align:-3px; }
  .btn .ic{ margin-right:8px; }
  .swapnote .ic{ width:13px; height:13px; vertical-align:-2px; margin-right:4px; }
  .addset .ic, .seg .ic{ width:13px; height:13px; vertical-align:-2px; margin-right:4px; }
  .segabout svg{ width:14px; height:14px; vertical-align:-2px; margin-right:4px; }
  .segabout{ color:var(--accent) !important; }
 .largeTitle{ font-size:29px; font-weight:700; letter-spacing:-1px; padding: calc(env(safe-area-inset-top) + 12px) 0 16px; }
  .largeTitle .ltmain{ display:flex; align-items:center; gap:12px; }
  .largeTitle .ltmain .titleBtn{ flex:1; min-width:0; line-height:1.08; }
  /* Workout is a working screen — the training leads, not the program name. Demote the plan title to a
     quiet label (still tappable to open Plans) and tighten the header so the first set sits higher. */
  /* the current session lives in the day toggle below, so the top needs no title: a slim bar of just
     the travel + mode controls, right-aligned. */
  /* the session is the title (fills the top-left); mins·moves the subtitle; controls sit on the right */
  #largeTitle{ font-size:25px; letter-spacing:-.6px; padding: calc(env(safe-area-inset-top) + 14px) 0 14px; }
  #largeTitle .wktitle{ display:block; font-weight:750; color:var(--ink); }
  #largeTitle small{ display:block; font-size:13px; margin-top:4px; }
  #largeTitle .ltmain{ gap:12px; align-items:center; }
  .largeTitle .ltmain .wktitle{ flex:1; min-width:0; line-height:1.12; }
  #strengthWrap > #seg{ margin:2px 0 14px; }
  /* Two ways to start the workout, as a pair: Suggest (primary) + Choose a plan (secondary) */
  .startrow{ display:flex; gap:10px; margin:0 0 16px; }
  .startrow .btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; font-size:15px; font-weight:650; padding-left:10px; padding-right:10px; min-width:0; }
  .startrow .btn svg{ width:18px; height:18px; flex:0 0 auto; }
  /* Set up → Train: once a session is underway, the setup chrome recedes and training fills the screen.
     Keep #largeTitle for its safe-area top inset, just empty it. */
  body.training #largeTitle{ padding-bottom:0; }
  body.training #largeTitle .ltmain{ display:none; }
  body.training #pageWorkout .startrow,
  body.training #pageWorkout #wkMode,
  body.training #pageWorkout #startAction,
  body.training #pageWorkout #seg{ display:none; }
  /* segmented Plan/Surprise switch — the one loud control at the top */
  .wkseg{ margin:4px 0 16px; padding:4px; border-radius:13px; }
  .wkseg .s{ flex:1 0 0; padding:10px 0; font-size:15px; font-weight:650; letter-spacing:-.2px; border-radius:10px; }
  #startAction{ margin:0; }
  #startAction .btn{ display:flex; align-items:center; justify-content:center; gap:8px; font-weight:650; margin:2px 0 14px; }
  #startAction .btn svg{ width:18px; height:18px; flex:0 0 auto; }
  #sponLen2{ margin:2px 0 14px; }
  /* plan mode's secondary action, kept as light as surprise mode's controls */
  .planlink{ display:inline-flex; align-items:center; gap:7px; background:none; border:none; font:inherit; font-size:14px; font-weight:600; color:var(--accent); padding:10px 2px 4px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .planlink svg{ width:16px; height:16px; flex:0 0 auto; }
  .planlink:active{ opacity:.55; }
  /* the surprise session reads as a plain headline + one small shuffle — no box */
  .sesshead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:16px 2px 8px; }
  .surpname{ font-size:22px; font-weight:750; letter-spacing:-.5px; color:var(--ink); line-height:1.15; }
  .surpsub{ font-size:13px; color:var(--l2); margin-top:3px; font-variant-numeric:tabular-nums; }
  .shuf{ flex:0 0 auto; width:38px; height:38px; border-radius:11px; border:1px solid var(--line); background:transparent; color:var(--accent); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .shuf:active{ opacity:.55; }
  .shuf svg{ width:19px; height:19px; }
  /* day tabs share the underline-tab language of the mode toggle (was a filled segmented control) */
  #seg{ background:none; border:none; padding:0; gap:20px; border-radius:0; overflow-x:auto; scrollbar-width:none; }
  #seg::-webkit-scrollbar{ display:none; }
  #seg .s{ flex:0 0 auto; padding:1px 0 6px; border-radius:0; font-size:13px; font-weight:600; color:var(--l3); background:none; box-shadow:none; position:relative; }
  #seg .s.active{ background:none; box-shadow:none; color:var(--ink); }
  #seg .s.active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--accent); }
  html.dark #seg .s.active{ border:none; box-shadow:none; }
  /* discard the in-progress session — only offered once you're training */
  #abortBtn{ display:none; margin-top:8px; color:var(--red); font-weight:600; }
  body.training #abortBtn{ display:block; }
  .largeTitle .ltmain .iconbtn{ flex:0 0 auto; align-self:flex-start; margin-top:2px; }
  .largeTitle small{ display:block; font-size:15px; font-weight:500; color:var(--l2); letter-spacing:0; margin-top:8px; }
  /* Overview header → Friends destination: a tappable people chip with a request badge */
  .friendschip{ flex:0 0 auto; align-self:flex-start; margin-top:2px; position:relative; background:var(--row); border:none; color:var(--accent); cursor:pointer; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .12s, opacity .12s; }
  .friendschip:active{ transform:scale(.86); opacity:.7; }
  .friendschip svg{ width:22px; height:22px; }
  .fbadge{ position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--red); color:#fff; font-size:11px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; box-sizing:border-box; border:2px solid var(--bg); }
  .fbadge[hidden]{ display:none; }   /* [hidden] alone can't beat display:flex above */
  /* a row that navigates somewhere (Friends sheet ⇄ Settings) */
  .navlink{ display:flex; align-items:center; justify-content:space-between; width:100%; background:var(--row); border:none; color:var(--ink); cursor:pointer; padding:14px 16px; border-radius:12px; font-size:16px; font-weight:600; transition:opacity .12s; }
  .navlink:active{ opacity:.6; }
  .navlink .nlsub{ color:var(--l2); font-weight:500; font-size:14px; margin-left:8px; }
  .navlink .ovchev{ color:var(--l3); }
  /* ===== social layer: avatars, presence rail, profiles ===== */
  .avatar{ position:relative; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; overflow:hidden; color:#fff; font-weight:700; line-height:1; letter-spacing:.3px; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22); user-select:none; }
  .avatar svg{ display:block; }
  .avatar.live{ box-shadow:0 0 0 2.5px var(--bg), 0 0 0 5px var(--accent); }
  .avatar.r-ring::after{ content:""; position:absolute; inset:3px; border-radius:50%; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); pointer-events:none; }
  .prail{ display:flex; gap:14px; overflow-x:auto; padding:2px 0 18px; scrollbar-width:none; -ms-overflow-style:none; }
  .prail::-webkit-scrollbar{ width:0; height:0; display:none; }
  .pr-item{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:7px; width:62px; cursor:pointer; position:relative; -webkit-tap-highlight-color:transparent; transition:transform .12s, opacity .12s; }
  .pr-item:active{ transform:scale(.92); opacity:.7; }
  .pr-name{ font-size:11px; color:var(--l2); max-width:62px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pr-live{ font-size:10px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.4px; }
  .pr-add .avatar{ background:var(--row); color:var(--accent); box-shadow:inset 0 0 0 1.5px var(--line); }
  .pr-add .avatar svg{ width:24px; height:24px; }
  /* presence-first rail: header + status dots */
  .railhdr{ display:flex; justify-content:space-between; align-items:center; margin:2px 4px 10px; }
  .railall{ font-size:13px; font-weight:600; color:var(--accent); cursor:pointer; position:relative; padding-right:14px; -webkit-tap-highlight-color:transparent; }
  .railall .ovchev{ color:var(--accent); }
  .railall:active{ opacity:.6; }
  .railcta{ display:inline-flex; align-items:center; gap:4px; position:relative; font-size:15px; font-weight:600; color:var(--accent); cursor:pointer; padding:6px 4px 16px; }
  .pr-av, .av-st{ position:relative; display:inline-flex; flex:0 0 auto; }
  .pr-dot{ position:absolute; right:2px; bottom:2px; width:14px; height:14px; border-radius:50%; border:2.5px solid var(--bg); box-sizing:border-box; }
  .pr-dot.online{ background:#34c759; }
  .av-st .pr-dot{ right:0; bottom:0; width:12px; height:12px; border-width:2px; border-color:var(--card); }
  .pr-badge{ position:absolute; top:-2px; right:4px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--red); color:#fff; font-size:11px; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center; box-sizing:border-box; border:2px solid var(--bg); }
  .pr-badge[hidden]{ display:none; }
  .frow{ display:flex; align-items:center; gap:12px; }
  .frow .fname{ font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* friends hub — one grouped-list system shared by requests / friends / suggested / live-grants */
  #friendsPeople .ed-label, #liveGrantList .ed-label{ margin:22px 2px 8px; }
  .flist{ background:var(--row); border-radius:14px; overflow:hidden; }
  .fitem{ display:flex; align-items:center; gap:12px; padding:10px 14px; min-height:46px; }
  .fitem + .fitem{ border-top:.5px solid var(--line); }
  .fitem .fmain{ flex:1; min-width:0; }
  .fitem .fnm{ font-weight:600; font-size:15px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fitem .fsub{ font-size:12.5px; color:var(--l2); line-height:1.3; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fitem .fsub.on{ color:#34c759; }
  .fitem .factions{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }
  .fitem.tap{ cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .12s; }
  .fitem.tap:active{ background:var(--field); }
  .btn.pill{ padding:7px 15px; font-size:14px; border-radius:999px; box-shadow:none; }
  .fsettings{ margin-top:26px; display:flex; flex-direction:column; gap:8px; }
  /* Me profile card */
  .profcard{ display:flex; align-items:center; gap:14px; padding:16px; background:var(--card); border:.5px solid var(--line); border-radius:var(--r-lg); margin-bottom:18px; box-shadow:var(--shadow), inset 0 .5px 0 var(--hi); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:opacity .12s; }
  .profcard:active{ opacity:.7; }
  .profcard .pcname{ font-size:19px; font-weight:700; letter-spacing:-.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .profcard .pccounts{ display:flex; gap:20px; margin-top:7px; }
  .profcard .pccount b{ font-size:17px; font-weight:700; }
  .profcard .pccount span{ font-size:12px; color:var(--l2); margin-left:4px; }
  .profcard .pchint{ font-size:13px; color:var(--l2); margin-top:5px; }
  /* friend profile sheet */
  .profhdr{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:6px 0 2px; }
  .profhdr .pname{ font-size:23px; font-weight:700; letter-spacing:-.4px; }
  .profmeta{ font-size:13px; color:var(--l2); margin-top:-4px; }
  /* code-first sharing: your follow code as the hero */
  .codecard{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--row); border:1px dashed var(--line); border-radius:14px; padding:14px 16px; }
  .codeval{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:25px; font-weight:700; letter-spacing:4px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; }
  /* editable own-avatar: a little pencil overlay */
  .avwrap{ position:relative; flex:0 0 auto; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .avwrap .avedit{ position:absolute; right:-2px; bottom:-2px; width:20px; height:20px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--card); }
  .avwrap .avedit svg{ width:11px; height:11px; }
  /* avatar editor */
  .avpreview{ display:flex; justify-content:center; padding:6px 0 14px; }
  .swatches{ display:flex; flex-wrap:wrap; gap:12px; }
  .swatch{ width:36px; height:36px; border-radius:50%; cursor:pointer; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22); transition:transform .12s; }
  .swatch:active{ transform:scale(.88); }
  .swatch.sel{ box-shadow:0 0 0 2.5px var(--card), 0 0 0 5px var(--accent); }
  .emojigrid{ display:flex; flex-wrap:wrap; gap:10px; }
  .emojibtn{ width:42px; height:42px; border-radius:12px; border:none; background:var(--row); font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .12s; }
  .emojibtn:active{ transform:scale(.9); }
  .emojibtn.sel{ box-shadow:inset 0 0 0 2px var(--accent); }
  /* generative-art thumbnails */
  .artbtn{ width:46px; height:46px; border-radius:50%; border:none; background:none; padding:0; cursor:pointer; transition:transform .12s; }
  .artbtn:active{ transform:scale(.9); }
  .artbtn .avatar{ box-shadow:none; }
  .artbtn.sel{ border-radius:50%; box-shadow:0 0 0 2.5px var(--card), 0 0 0 5px var(--accent); }
  /* backdrop behind the status-bar clock — slightly translucent (no blur, to match the tab bar and avoid scroll flicker) */
 .statusbar-bg{ position:fixed; top:0; left:0; right:0; height:env(safe-area-inset-top); z-index:40; pointer-events:none;
    background:color-mix(in srgb, var(--bg) 88%, transparent); }
  /* ===== pages + bottom tab bar ===== */
  .page{ display:none; }
  .page.active{ display:block; animation:pagein .26s ease; }
  @keyframes pagein{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
  /* horizontal pager: three panels side-by-side that follow the finger, each scrolling vertically on its own */
  /* Fixed app shell, full window height. USE 100vh — NOT 100dvh and NOT a JS innerHeight override.
     The iOS standalone cold-launch "blank strip" bug: the DYNAMIC viewport (100dvh, window.innerHeight,
     visualViewport) is not initialized until a geometry change (device rotation), so on a cold launch it
     reports ~62px short and the shell ends above the screen bottom. 100vh is the STATIC large viewport and
     is correct from cold start; in standalone there's no browser toolbar, so 100vh == the real window height
     in both states. (We previously cascaded 100vh → 100dvh → var(--appH), which meant the broken dynamic
     values always won and 100vh never actually applied — that was the bug. See memory yalla-ios-bottom-blank-space.) */
  #shell{ position:fixed; top:0; left:0; right:0; height:100vh; max-width:540px; margin:0 auto; overflow:hidden; z-index:1; }
  #pager{ position:absolute; inset:0; overflow:hidden; }
  #track{ display:flex; height:100%; }
  #track.anim{ transition:transform .3s cubic-bezier(.22,.61,.36,1); }
  #pager .page, #pager .page.active{ display:block; animation:none; flex:0 0 100%; width:100%; height:100%;
 overflow-y:auto; overflow-x:hidden; overscroll-behavior-y:contain; padding:0 16px calc(72px + env(safe-area-inset-bottom)); }
  /* hide the scrollbar (still scrollable) */
  #pager .page, .sheetbody{ scrollbar-width:none; -ms-overflow-style:none; }
  #pager .page::-webkit-scrollbar, .sheetbody::-webkit-scrollbar{ width:0; height:0; display:none; }
  /* Tab bar anchored to the SHELL bottom (position:absolute inside #shell), not the fixed viewport.
     Why: a position:fixed bottom:0 element lives in iOS's SMALL/layout viewport, whose bottom sits ABOVE
     the physical screen edge — so a fixed bar can never reach into the home-indicator zone, leaving the
     bare "blank space" below it (and JS can't even measure it). #shell is height:100vh, which DOES reach
     the physical bottom from cold start, so an absolute bar at its bottom touches the real edge. Translucent like the top,
     overlaying the pager so content scrolls under it. */
  .tabbar{ position:absolute; left:0; right:0; bottom:0; z-index:50; display:flex; align-items:center;
    /* ~56px content row (12 + 32px icon + 12, centered) + the home-indicator safe area reserved BELOW it
       (iOS HIG pattern). Pre-cold-launch-fix the shell didn't reach the screen bottom so the inset read 0;
       now it reports the real ~34px and the icons clear the home indicator instead of crowding it. */
    padding:12px 8px calc(12px + env(safe-area-inset-bottom)); border-top:.5px solid var(--sep);
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    transition:transform .3s cubic-bezier(.4,0,.2,1); will-change:transform; }
  /* hide/show is scroll-linked from JS (inline transform); see the scroll-linked tab bar IIFE */
  .tabitem{ flex:1; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer;
    color:var(--l3); transition:color .15s; -webkit-tap-highlight-color:transparent; }
  .tabitem svg{ width:32px; height:32px; transition:transform .12s; }
  .tabitem span{ display:none; }                 /* icons only — labels hidden (kept as aria-label) */
  .tabitem.active{ color:var(--accent); }
  .tabitem:active svg{ transform:scale(.86); }
  body.kb .tabbar{ display:none; }   /* keyboard up → hide the bar so it can't ride up above it (standalone PWA shrinks the viewport) */
  /* overview / coach cards */
  .ovk{ font-size:12px; color:var(--l3); font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
  .ovbig{ font-size:24px; font-weight:750; letter-spacing:-.4px; margin-top:4px; line-height:1.1; }
  .ovmeta{ font-size:14px; color:var(--l2); margin-top:8px; font-weight:500; }
  .ovp{ font-size:14px; color:var(--l2); line-height:1.5; margin:0; }
  .ovobj{ font-size:12px; color:var(--l2); margin:-2px 0 8px; }
  .ovobj b{ color:var(--accent); font-weight:600; }
  .ovtodo{ margin:0; padding-left:20px; }
  .ovtodo li{ font-size:14px; color:var(--l2); line-height:1.5; margin:8px 0; }
  .ovtodo li::marker{ color:var(--accent); }
  .ovtodo li.ovmore{ list-style:none; color:var(--l3); font-size:13px; margin-left:-20px; }
  .ovtap{ cursor:pointer; transition:opacity .12s; }
  .ovtap:active{ opacity:.55; }
  /* compact "next session" / "suggest a session" cards — the whole card navigates, so a chevron replaces the big button */
  .ovstartpad{ display:flex; align-items:center; gap:12px; padding:13px 16px; }
  .ovstart .ovbig, .ovspon .ovbig{ font-size:18px; margin-top:2px; }
  .ovstart .ovmeta, .ovspon .ovmeta{ margin-top:3px; font-size:13px; }
  .ovstarttext{ flex:1; min-width:0; }
  .ovgo{ flex:0 0 auto; font-size:26px; line-height:1; color:var(--l3); margin-left:0; }
  .ovtodo li.ovtap{ padding-right:16px; position:relative; }
  .ovchev{ color:var(--l3); font-weight:600; margin-left:8px; }
  .ovtodo li.ovtap .ovchev{ position:absolute; right:0; }
  .ovnudge{ background:var(--accent-soft); border:.5px solid transparent; box-shadow:0 0 0 1px var(--accent-soft) inset; }
  /* friend activity arrives from the network after the home renders — ease it in instead of a hard pop */
  @keyframes ovfriendin{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
  .ovfriend{ animation:ovfriendin .45s cubic-bezier(.2,.8,.2,1) both; }
  @media (prefers-reduced-motion: reduce){ .ovfriend{ animation:none; } }
  /* overview snapshot — this-week strip */
  /* collapsible Me sections — keep the page sleek; expand on demand */
  .mefold{ border-top:.5px solid var(--line); }
  .mefold > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
    font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--l3); padding:16px 2px 16px; }
  .mefold > summary::-webkit-details-marker{ display:none; }
  .mefold > summary::after{ content:"⌄"; font-size:17px; line-height:1; color:var(--l3); transform:translateY(-3px); transition:transform .2s; }
  .mefold[open] > summary::after{ transform:translateY(1px) rotate(180deg); }
  /* collapsible setting cards (Settings sheet) */
  .setcard{ background:var(--row); border:.5px solid var(--line); border-radius:14px; margin:0 0 12px; overflow:hidden; }
  .setcard > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:15px 16px; font-size:16px; font-weight:600; color:var(--ink); }
  .setcard > summary::-webkit-details-marker{ display:none; }
  .setcard > summary:active{ background:var(--sep); }
  .setcard > summary .scicon{ width:21px; height:21px; flex:0 0 auto; color:var(--accent); }
  .setcard > summary .sctitle{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .setcard > summary .scsub{ font-size:13px; font-weight:500; color:var(--l3); }
  .setcard > summary::after{ content:"⌄"; font-size:18px; line-height:1; color:var(--l3); flex:0 0 auto; transition:transform .2s; }
  .setcard[open] > summary{ border-bottom:.5px solid var(--sep); }
  .setcard[open] > summary::after{ transform:rotate(180deg); }
  .setcard .scbody{ padding:2px 16px 16px; }
  .setcard .scbody > .ed-label:first-child{ margin-top:14px; }
  .travelbar{ display:flex; align-items:center; gap:10px; margin:6px 0 14px; padding:11px 14px; border-radius:12px; background:var(--accent-soft); color:var(--accent); font-size:14px; font-weight:600; }
  .travelbar .tvx{ margin-left:auto; flex:0 0 auto; background:transparent; border:.5px solid currentColor; color:inherit; font:inherit; font-size:13px; padding:4px 10px; border-radius:9px; cursor:pointer; opacity:.85; }
  .tvbreak{ display:flex; flex-direction:column; gap:7px; margin:10px 0 2px; }
  .tvrow{ display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--l2); }
  .tvrow b{ color:var(--ink); font-weight:600; }
  .rglgwrap{ display:flex; flex-direction:column; gap:7px; }
  /* This-week rings detail sheet */
  .ringrow{ padding:13px 0; border-bottom:.5px solid var(--sep); }
  .ringrow:last-of-type{ border-bottom:none; }
  .ringrowhd{ display:flex; align-items:center; gap:8px; }
  .rrdot{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
  .rrlbl{ font-weight:600; font-size:15px; }
  .rrval{ margin-left:auto; font-weight:600; font-size:15px; }
  .rrval small{ color:var(--l2); font-weight:500; }
  .rrbar{ height:6px; border-radius:3px; background:var(--sep); overflow:hidden; margin-top:8px; }
  .rrbar i{ display:block; height:100%; border-radius:3px; }
  .rrdesc{ font-size:13px; color:var(--l2); line-height:1.45; margin:7px 0 0; }
  .muschips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
  .muschip{ font-size:12px; font-weight:600; padding:4px 9px; border-radius:8px; background:var(--sep); color:var(--l2); }
  .muschip.on{ background:rgba(81,207,102,.16); color:#2f9e44; }
  html.dark .muschip.on{ color:#69db7c; }
  .rglg{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--l2); }
  .rglg i{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
  .rglg b{ color:var(--ink); font-weight:700; margin-left:auto; }
  .ovdelta{ font-size:13px; font-weight:600; margin-top:12px; }
  .ovdelta.up{ color:#37b24d; } .ovdelta.down{ color:var(--l2); }
  .ovgoaltop{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:var(--l2); margin-bottom:8px; }
  .ovgoaltop b{ font-size:18px; color:var(--ink); font-weight:750; }
  .ovgoalbar{ height:10px; border-radius:6px; background:var(--track); overflow:hidden; }
  .ovgoalbar i{ display:block; height:100%; border-radius:6px; background:var(--grad); transition:width .45s ease; }
  /* muscle-balance coach suggestions */
  .sgcard{ background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent-soft) inset; }
  .sgopts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .sgbtn{ background:var(--card); border:.5px solid var(--line); color:var(--ink); border-radius:12px; padding:12px 16px; font-size:13px; font-weight:600; cursor:pointer; transition:transform .1s; }
  .sgbtn:active{ transform:scale(.95); }
  .sgbtn.rm{ color:var(--red); }
  .ovweek{ display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }
  .ovd{ text-align:center; font-size:11px; font-weight:700; color:var(--l3); }
  .ovd i{ display:block; height:28px; border-radius:8px; background:var(--row); margin-top:8px; }
  .ovd.on i{ background:var(--accent); }
  .ovd.today i{ box-shadow:0 0 0 2px var(--accent) inset; }
  /* friends feed — cheer + comment */
  .feedbar{ display:flex; gap:8px; margin-top:12px; }
  .feedbar button{ display:inline-flex; align-items:center; gap:5px; background:var(--row); border:.5px solid var(--line); border-radius:20px; padding:8px 12px; font-size:13px; font-weight:600; color:var(--l2); cursor:pointer; transition:transform .1s, background .15s; }
  .feedbar button svg{ width:15px; height:15px; }
  .feedbar button:active{ transform:scale(.94); }
  .feedbar .cheerbtn.on{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent-soft); }
  .feedbar button[disabled]{ opacity:.45; cursor:default; }
  .commpanel{ margin-top:12px; }
  .commrow{ font-size:14px; color:var(--ink); line-height:1.45; margin:8px 0; }
  .commrow b{ color:var(--l2); font-weight:600; margin-right:4px; }
  .commadd{ display:flex; gap:8px; margin-top:8px; }
  .comminput{ flex:1; }
  /* ===== end-to-end encrypted direct messages ===== */
  .msgbadge{ background:var(--red); color:#fff; font-size:12px; font-weight:700; min-width:20px; height:20px; padding:0 6px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; }
  .msg-convo{ display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:.5px solid var(--line); cursor:pointer; }
  .msg-convo:active{ opacity:.6; }
  .msg-convo-main{ flex:1; min-width:0; }
  .msg-convo-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
  .msg-convo-nm{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .msg-convo-time{ font-size:12px; color:var(--l3); flex:0 0 auto; }
  .msg-convo-prev{ font-size:14px; color:var(--l2); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .msg-convo-prev.unread{ color:var(--ink); font-weight:600; }
  .msg-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); flex:0 0 auto; }
  /* thread: a scrollable bubble list above a fixed compose row */
  .msg-thread{ display:flex; flex-direction:column; gap:7px; max-height:56vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 2px 8px; animation:threadIn .3s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes threadIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
  .msg-row{ display:flex; flex-direction:column; max-width:100%; }
  .msg-row.mine{ align-items:flex-end; }
  .msg-row.theirs{ align-items:flex-start; }
  .msg-bubble{ max-width:78%; padding:9px 13px; border-radius:18px; font-size:15px; line-height:1.4; word-wrap:break-word; position:relative; user-select:none; -webkit-user-select:none; touch-action:manipulation; }
  .msg-row.mine .msg-bubble{ background:var(--accent); color:#fff; border-bottom-right-radius:5px; }
  .msg-row.theirs .msg-bubble{ background:var(--row); color:var(--ink); border-bottom-left-radius:5px; }
  .msg-time{ display:block; font-size:10px; margin-top:3px; opacity:.65; text-align:right; }
  .msg-row.theirs .msg-time{ text-align:left; }
  .msg-locked{ font-style:italic; opacity:.75; }
  /* emoji reactions: chips under a bubble + the long-press picker bar */
  .react-chips{ display:flex; flex-wrap:wrap; gap:4px; margin:3px 3px 0; }
  .react-chip{ font-size:13px; line-height:1.6; background:var(--row); border:.5px solid var(--line); border-radius:12px; padding:0 7px; }
  .react-chip.mine{ background:var(--accent-soft); border-color:transparent; cursor:pointer; }
  .react-bar{ position:fixed; z-index:210; display:flex; flex-direction:column; gap:3px; background:var(--card); border:.5px solid var(--line); border-radius:20px; padding:6px; box-shadow:0 10px 34px rgba(0,0,0,.24); }
  .react-row{ display:flex; gap:2px; padding:0 2px; }
  .react-pick{ background:none; border:none; font-size:25px; line-height:1; cursor:pointer; padding:4px 5px; border-radius:50%; transition:transform .1s; }
  .react-pick:active{ transform:scale(1.35); }
  .react-more{ display:inline-flex; align-items:center; justify-content:center; color:var(--l2); border-left:.5px solid var(--line); margin-left:2px; padding-left:8px; }
  .react-menu{ display:flex; flex-direction:column; border-top:.5px solid var(--line); margin-top:1px; padding-top:3px; }
  .ract{ background:none; border:none; color:var(--ink); font-size:15px; font-weight:500; text-align:left; padding:9px 12px; border-radius:10px; cursor:pointer; }
  .ract:active{ background:var(--row); }
  .ract.del{ color:var(--red); }
  .msg-editbar{ display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--l2); padding:6px 4px 2px; }
  .react-more .ic{ width:20px; height:20px; }
  /* full emoji picker — scrollable, categorised grid */
  .emoji-picker{ position:fixed; z-index:215; left:50%; transform:translateX(-50%); bottom:14px; width:min(360px,92vw); max-height:46vh; overflow-y:auto; -webkit-overflow-scrolling:touch; background:var(--card); border:.5px solid var(--line); border-radius:18px; padding:8px 12px 12px; box-shadow:0 12px 40px rgba(0,0,0,.3); }
  .emoji-cat{ font-size:11px; font-weight:700; color:var(--l3); text-transform:uppercase; letter-spacing:.4px; margin:10px 2px 5px; }
  .emoji-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:1px; }
  .emoji-cell{ background:none; border:none; font-size:23px; line-height:1; cursor:pointer; padding:5px 0; border-radius:8px; }
  .emoji-cell:active{ background:var(--row); transform:scale(1.2); }
  .sheethdr .t.tappable{ cursor:pointer; }
  #ovMessages{ position:relative; padding:8px; margin-top:8px; color:var(--l2); }   /* neutral by default; nudged down so its tap target clears the status-bar clock */
  #ovMessages.has-unread{ color:var(--accent); }                   /* …accent only when there's an unread message */
  #ovMessages .railnotch{ position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; font-size:10px; }
  .msgbadge[hidden]{ display:none; }   /* guard: the .msgbadge display rule otherwise overrides the hidden attribute */
  .msg-compose{ display:flex; gap:8px; align-items:center; padding-top:10px; margin-top:6px; border-top:.5px solid var(--line); }
  .msg-compose .comminput{ flex:1; font-size:16px; padding:11px 14px; }   /* 16px = iOS no-zoom floor, but smaller than the 17px default */
  .msg-empty{ text-align:center; color:var(--l2); padding:32px 16px; line-height:1.5; }
  .msg-empty-ic{ font-size:40px; margin-bottom:8px; }
  .msg-foot{ font-size:12px; color:var(--l3); line-height:1.5; margin:18px 4px 4px; }
  .msg-link{ color:var(--accent); font-weight:600; cursor:pointer; }
  .msg-notif{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--accent-soft); border:.5px solid var(--accent-soft); border-radius:14px; padding:10px 12px; margin-bottom:12px; font-size:14px; color:var(--ink); }
  .msg-notif-act{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
  .msg-notif-x{ background:none; border:none; color:var(--l2); font-size:20px; line-height:1; cursor:pointer; padding:2px 6px; }
  /* monochrome icons inside the messaging UI (replace the old emoji) */
  .msg-empty-ic{ color:var(--l3); line-height:0; }
  .msg-empty-ic svg{ width:38px; height:38px; }
  .msg-foot svg, .msg-convo-prev svg, .msg-locked svg{ width:13px; height:13px; vertical-align:-2px; }
  .msg-notif svg{ color:var(--accent); width:17px; height:17px; vertical-align:-4px; }
  /* swipeable discover deck — cards snap, the next one peeks so it reads as swipeable */
  .discwrap{ display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; margin:0 -16px; padding:2px 16px; }
  .discwrap::-webkit-scrollbar{ display:none; }
  .disccard{ scroll-snap-align:center; flex:0 0 87%; margin:0; position:relative; }
  .discx{ position:absolute; top:8px; right:8px; width:26px; height:26px; border:none; border-radius:50%; background:transparent; color:var(--l3); font-size:13px; cursor:pointer; z-index:2; }
  .discx:active{ transform:scale(.85); }
  .discdots{ display:flex; gap:6px; justify-content:center; margin-top:12px; }
  .discdot{ width:6px; height:6px; border-radius:50%; background:var(--l3); opacity:.35; transition:opacity .2s, transform .2s, background .2s; }
  .discdot.on{ opacity:1; background:var(--accent); transform:scale(1.25); }
  /* onboarding objective picker */
  #onboardWrap, #nameWrap{ position:fixed; inset:0; z-index:320; display:none; align-items:center; justify-content:center; padding:24px;
    background:rgba(0,0,0,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  #onboardWrap.show, #nameWrap.show{ display:flex; }
  .obcard{ background:var(--sheetbg); border-radius:22px; max-width:380px; width:100%; padding:24px 24px; box-shadow:0 20px 60px rgba(0,0,0,.45); }
  .obbrand{ font-size:24px; margin-bottom:8px; }
  .obbrand .wordmark{ font-size:24px; }
  .obtag{ font-size:15px; color:var(--l2); line-height:1.45; margin:0 0 20px; }
  .oblabel{ font-size:13px; font-weight:700; color:var(--l2); text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
  #obName{ width:100%; }
  .obtitle{ font-size:24px; font-weight:750; letter-spacing:-.4px; }
  .obp{ font-size:14px; color:var(--l2); line-height:1.5; margin:8px 0 20px; }
  .obopts{ display:flex; flex-direction:column; gap:10px; }
  .obopt{ text-align:left; background:var(--row); border:.5px solid var(--line); border-radius:14px; padding:16px 16px; cursor:pointer; color:var(--ink); transition:transform .1s, background .15s; }
  .obopt:active{ transform:scale(.98); background:var(--accent-soft); }
  .obopt b{ display:block; font-size:16px; font-weight:650; }
  .obopt span{ display:block; font-size:13px; color:var(--l2); margin-top:2px; }
  /* progress chart — a 5-page metric carousel (Volume/Sets/Sessions/Weight/PRs) the finger drags & snaps.
     Viewport stretches to the panel edges; each page re-insets the chart by 16px so charts keep a gutter. */
  .progswipe{ margin:12px 0 6px; overflow:hidden; }
  .progtrack{ display:block; }
  .progpage{ display:none; box-sizing:border-box; }
  .progpage.on{ display:block; }
  .progpage canvas{ display:block; width:100%; height:auto; aspect-ratio:11/3; outline:none; -webkit-tap-highlight-color:transparent; }
  .progchart{ width:100%; height:auto; aspect-ratio:11/3; display:block; }
  .progcap{ font-size:13px; color:var(--l3); margin:8px 0 2px; line-height:1.4; }
  .proglegend{ display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:8px; }
  .pglg{ display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--l2); }
  .pglg i{ width:9px; height:9px; border-radius:3px; flex:0 0 auto; }
  .progcap b{ color:var(--ink); font-weight:700; }
  .progverd{ display:flex; align-items:center; gap:9px; margin:12px 0 2px; padding:12px 16px; border-radius:12px;
    background:var(--card); border:.5px solid var(--line); border-left-width:3px; font-size:14px; font-weight:600; line-height:1.4; }
  .progverd .pvdot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
  .progverd.v-good{ border-left-color:#51cf66; } .progverd.v-good .pvdot{ background:#51cf66; }
  .progverd.v-watch{ border-left-color:#f59f00; } .progverd.v-watch .pvdot{ background:#f59f00; }
  .progverd.v-bad{ border-left-color:var(--red); } .progverd.v-bad .pvdot{ background:var(--red); }
  .progverd.v-more{ border-left-color:var(--line); } .progverd.v-more .pvdot{ background:var(--l3); }
  .progverd.v-grow{ border-left-color:#51cf66; } .progverd.v-grow .pvdot{ background:#51cf66; }
  .progverd.v-maintain{ border-left-color:#4dabf7; } .progverd.v-maintain .pvdot{ background:#4dabf7; }
  .progverd.v-reduce{ border-left-color:var(--red); } .progverd.v-reduce .pvdot{ background:var(--red); }

  .group{ background:var(--card); border:.5px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-bottom:20px; box-shadow:var(--shadow), inset 0 .5px 0 var(--hi); }
  /* one tile per exercise — softer: rounder corners, a lighter edge, a gentle shadow, slightly translucent */
  #exlist .group{ margin-bottom:14px; border-radius:20px; border:.5px solid var(--sep); box-shadow:0 1px 2px rgba(0,0,0,.045), 0 12px 28px -18px rgba(0,0,0,.22); background:color-mix(in srgb, var(--card) 90%, transparent); }
  .pad{ padding:20px; }
  .row{ display:flex; gap:10px; }

  .bwnum{ font-size:24px; font-weight:700; letter-spacing:-.5px; line-height:1; }
  .bwnum.empty{ color:var(--l3); }
  .bwnum small{ font-size:15px; font-weight:600; color:var(--l2); margin-left:4px; letter-spacing:0; }
  .bwgoal{ text-align:right; font-size:15px; color:var(--l2); line-height:1.55; }
  .bwgoal b{ color:var(--ink); }
  .bar{ height:5px; background:var(--track); border-radius:10px; overflow:hidden; margin:12px 0 2px; }
  .bar > i{ display:block; height:100%; background:var(--grad); border-radius:10px; transition:width .6s cubic-bezier(.2,.8,.2,1); }
  canvas{ width:100%; height:46px; display:block; margin-top:12px; }

  input{ background:var(--field); border:none; color:var(--ink); border-radius:12px;
    padding:16px 16px; font-size:17px; font-weight:500; width:100%; outline:none; font-family:inherit;
    transition:box-shadow .15s; }
  input::placeholder{ color:var(--l3); font-weight:400; }
  input:focus{ box-shadow:0 0 0 2px var(--accent) inset; }

  .btn{ background:var(--grad); color:#fff; border:none; border-radius:var(--r-md); padding:16px 20px;
    font-size:17px; font-weight:600; cursor:pointer; font-family:inherit;
    box-shadow:0 6px 18px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.22);
    transition:transform .18s cubic-bezier(.34,1.5,.6,1), filter .15s, box-shadow .2s; }
  .btn:active{ transform:scale(.93); filter:brightness(.96); box-shadow:0 2px 8px -4px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.22); }
  .btn.sm{ padding:12px 16px; font-size:16px; }
  .btn.tinted{ background:var(--accent-soft); color:var(--accent); box-shadow:none; }
  .btn.plain{ background:transparent; color:var(--l2); font-weight:500; box-shadow:none; }
  .btn.red{ background:transparent; color:var(--red); box-shadow:none; }
  .btn.wide{ width:100%; }

  .stats{ display:flex; border-top:.5px solid var(--sep); }
  .stat{ flex:1; padding:16px 8px; text-align:center; border-right:.5px solid var(--sep); }
  .stat:last-child{ border-right:none; }
  .stat .n{ font-size:24px; font-weight:700; letter-spacing:-.4px; }
  .stat .n.due{ color:var(--red); }
  .stat .k{ font-size:12px; color:var(--l2); margin-top:4px; font-weight:500; }
  .achcap{ font-size:14px; color:var(--l2); margin:2px 0 12px; }
  .pscores{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
  .psc{ font-size:13px; color:var(--l2); background:var(--row); border:.5px solid var(--line); border-radius:8px; padding:8px 12px; }
  .psc b{ color:var(--ink); font-weight:600; margin-right:4px; }
  .psc small{ color:var(--l3); }
  .pscbtn{ cursor:pointer; transition:transform .12s, border-color .15s; }
  .pscbtn:active{ transform:scale(.96); }
  .pscbtn{ border-color:color-mix(in srgb, var(--accent) 40%, var(--line)); }
  /* forward growth-stimulus forecast chart */
  /* growth-forecast internals (the card itself uses the shared .panel look) */
  .fcsub{ display:block; font-size:12px; font-weight:500; color:var(--l3); margin-top:2px; }
  #fcChart, #fcMuscles, #fcTornado{ width:100%; height:auto; display:block; margin:12px 0 10px; }
  .fclegend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; font-size:12.5px; color:var(--l3); }
  .fclg{ display:inline-flex; align-items:center; gap:6px; }
  .fclg i{ width:11px; height:3px; border-radius:2px; display:inline-block; }
  .fclg .fcbandi{ height:10px; border-radius:2px; background:var(--l3); opacity:.28; }
  .fchd2{ font-size:12px; font-weight:700; color:var(--l3); text-transform:uppercase; letter-spacing:.6px; margin:26px 0 10px; }
  .fcnote{ font-size:12px; color:var(--l3); line-height:1.45; margin:8px 0 0; }
  /* strength-forecast ledger card rows */
  .slrow{ font-size:14px; color:var(--ink); padding:5px 0; border-bottom:.5px solid var(--sep); }
  .slrow:last-of-type{ border-bottom:none; }
  .slband{ font-size:12px; color:var(--l3); }
  /* strength-progress tile: headline trend + across-exercises rows (each taps through to the full chart) */
  .exprogsum{ font-size:14px; color:var(--l2); font-weight:600; margin:2px 0 6px; }
  .exprogsub{ font-weight:500; color:var(--l3); font-size:12px; }
  #exProgChart{ display:block; width:100%; height:auto; margin:12px 0 10px; }
  #slML, #slPA{ display:block; width:100%; height:auto; margin:12px 0 10px; }
  .exprow{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; padding:9px 0; border-bottom:.5px solid var(--sep); cursor:pointer; text-align:left; -webkit-tap-highlight-color:transparent; }
  .exprow:last-of-type{ border-bottom:none; }
  .exprow:active{ opacity:.6; }
  .exdot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
  .exnm{ flex:1 1 auto; font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .exprow .spark{ flex:0 0 auto; opacity:.9; }
  .extr{ flex:0 0 auto; font-size:12.5px; font-weight:700; min-width:58px; text-align:right; }
  .sheetlead .lh .extr{ font-size:inherit; font-weight:inherit; min-width:0; text-align:left; }
  .extr.grow{ color:#2b8a3e; } .extr.hold{ color:var(--l3); } .extr.shrink{ color:#c92a2a; }
  .exfc{ flex:0 0 auto; font-size:11px; font-weight:600; opacity:.85; min-width:56px; text-align:right; }
  .exfc.grow{ color:#2b8a3e; } .exfc.hold{ color:var(--l3); } .exfc.shrink{ color:#c92a2a; }
  .fcconn{ font-size:12px; color:var(--l3); line-height:1.45; margin:8px 0 2px; }
  /* collapsed-by-default secondary detail inside the forecast card */
  /* foldable detail sections (manual disclosure — no native <details>, which some webviews wouldn't close) */
  .fcfold{ margin-top:10px; border-top:.5px solid var(--sep); padding-top:8px; }
  .fcfoldhd{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; background:none; border:none; padding:6px 0; margin:0; font-size:12px; font-weight:700; color:var(--l3); text-transform:uppercase; letter-spacing:.6px; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .fcfoldhd::after{ content:"›"; color:var(--l3); font-size:17px; line-height:1; transition:transform .2s; }
  .fcfold.open .fcfoldhd::after{ transform:rotate(90deg); }
  .fcfoldbody{ display:none; }
  .fcfold.open .fcfoldbody{ display:block; }
  .insight{ border:.5px solid var(--line); border-left-width:3px; border-radius:12px; padding:16px 16px; background:var(--card); margin:0 0 18px; }
  .insight .ititle{ font-size:15px; font-weight:700; letter-spacing:-.2px; }
  .insight .itext{ font-size:15px; color:var(--l2); line-height:1.5; margin-top:8px; }
  .insight.v-nutrition{ border-left-color:#f59f00; }
  .insight.v-training{ border-left-color:#4dabf7; }
  .insight.v-ontrack{ border-left-color:#51cf66; }
  .insight.v-more{ border-left-color:var(--line); }
  .insight.v-grow{ border-left-color:#51cf66; }
  .insight.v-maintenance{ border-left-color:#868e96; }
  .achcap b{ color:var(--accent); font-weight:700; }
  .achgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .ach{ background:var(--row); border:.5px solid var(--line); border-radius:var(--r-md); padding:16px 8px 12px; text-align:center; opacity:.5; transition:opacity .2s, transform .12s; }
  .ach:active{ transform:scale(.95); }
  .ach.on{ opacity:1; border-color:var(--accent-soft); }
  .ach .achi{ font-size:24px; line-height:1; }
  .ach .achlock{ display:inline-flex; color:var(--l3); }
  .ach .achlock svg{ width:22px; height:22px; }
  .ach .acht{ font-size:13px; font-weight:700; margin-top:8px; letter-spacing:-.1px; }
  .ach .achd{ font-size:11px; color:var(--l2); margin-top:4px; line-height:1.3; }

  .deload{ display:none; padding:16px 16px; border-top:.5px solid var(--sep); }
  .deload.show{ display:block; }
  .deload b{ color:var(--red); font-weight:600; }
  .deload p{ font-size:15px; color:var(--l2); margin:8px 0 12px; line-height:1.45; }

  .seg{ display:flex; background:var(--segtrack); border:.5px solid var(--line); border-radius:12px; padding:4px; overflow-x:auto; scrollbar-width:none; margin-bottom:20px; }
  .seg::-webkit-scrollbar{ display:none; }
  .seg .s{ flex:1 0 auto; text-align:center; padding:16px 20px; font-size:16px; font-weight:600; color:var(--l2);
    border-radius:8px; cursor:pointer; white-space:nowrap; transition:background .15s,color .15s; }
  .seg .s.active{ background:var(--segthumb); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.16); }
  html.dark .seg .s.active, html.dark .sexseg .s.active{ box-shadow:none; border:.5px solid rgba(255,255,255,.08); }
  .seg .s .ndot{ width:6px; height:6px; border-radius:50%; background:var(--grad); display:inline-block; margin-right:8px; vertical-align:middle; }
  .seg .s .wm{ display:block; font-size:12px; font-weight:600; color:var(--l3); margin-top:2px; letter-spacing:0; }
  .seg .s.active .wm{ color:var(--accent); }
  .wkmeta{ display:flex; align-items:center; gap:8px; font-size:14px; color:var(--l2); font-weight:500; margin:-4px 0 16px; }
  .wkmeta svg{ width:16px; height:16px; color:var(--l3); flex:0 0 auto; }
  .wkmeta b{ color:var(--ink); font-weight:700; }
  .sslabel{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--accent); margin:2px 0 8px; }
  .sslabel svg{ width:13px; height:13px; }
  .group.ss{ border-left:3px solid var(--accent); }
  .group.ss-cont{ margin-top:-12px; }
  .sharepreview{ display:flex; justify-content:center; }
  .sharepreview canvas{ width:100%; max-width:300px; height:auto; border-radius:18px; box-shadow:0 18px 50px -18px var(--accent-glow,rgba(201,104,16,.55)); display:block; }
  .seg.appearance{ margin:8px 0 4px; }
  .seg.appearance .s{ flex:1; }

  .exhead{ display:flex; align-items:center; gap:8px; padding:2px 0 8px; }
  .exhead .nm{ font-size:20px; font-weight:650; letter-spacing:-.3px; flex:1; min-width:0; }
  .exhead .eqic{ color:var(--l3); display:inline-flex; align-items:center; flex:0 0 auto; }
  .exhead .eqic svg{ width:20px; height:20px; }
  .exhead .eqic.tinted{ width:30px; height:30px; border-radius:9px; justify-content:center; font-size:15px; }
  .exhead .eqic.tinted svg{ width:16px; height:16px; }
  .swapcheck{ color:var(--accent); font-weight:800; flex:0 0 auto; font-size:15px; }
  .exmeta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; color:var(--l2); font-weight:500; padding:0 0 12px; }
  .exmeta .tg{ font-weight:600; font-size:15px; }
  /* the target tag edits sets × reps — kept subtle: reads as plain meta text with a faint pencil hint */
  .exmeta button.tg{ background:none; color:var(--l2); border:none; font-family:inherit;
    display:inline-flex; align-items:center; gap:5px; padding:2px 0; cursor:pointer; line-height:1.2;
    transition:opacity .12s; }
  .exmeta button.tg:active{ opacity:.5; }
  .exmeta button.tg .pen{ width:11px; height:11px; opacity:.4; }
  .exmeta .dot{ color:var(--l3); }
  .exmeta .fillast{ background:none; border:none; font:inherit; font-size:14px; font-weight:600; color:var(--accent); padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .exmeta .fillast:active{ opacity:.55; }
  /* sets × reps editor popover */
  .tgpop-scrim{ position:fixed; inset:0; z-index:400; background:rgba(0,0,0,.4); display:flex; align-items:flex-end; justify-content:center;
    opacity:0; transition:opacity .18s; padding:0 0 env(safe-area-inset-bottom); }
  .tgpop-scrim.in{ opacity:1; }
  .tgpop{ width:100%; max-width:440px; background:var(--card); border-radius:22px 22px 0 0; padding:22px 22px calc(22px + env(safe-area-inset-bottom));
    transform:translateY(24px); transition:transform .22s cubic-bezier(.2,1,.4,1); }
  .tgpop-scrim.in .tgpop{ transform:translateY(0); }
  .tgpop-h{ font-weight:700; font-size:18px; margin-bottom:14px; }
  .tgpop-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; }
  .tgpop-row>span{ color:var(--l2); font-weight:600; font-size:16px; }
  .tgstep{ display:flex; align-items:center; gap:14px; }
  .tgstep b{ min-width:24px; text-align:center; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
  .tgs{ width:40px; height:40px; border-radius:50%; border:none; background:var(--row); color:var(--ink); font-size:22px; font-weight:600; cursor:pointer; line-height:1; transition:transform .12s; }
  .tgs:active{ transform:scale(.88); }
  .tgreps{ display:flex; align-items:center; gap:10px; }
  .tgreps input{ width:64px; text-align:center; background:var(--row); border:none; border-radius:12px; padding:12px 6px; font-size:18px; font-weight:700; color:var(--ink); font-family:inherit; }
  .tgreps span{ color:var(--l3); font-weight:600; }
  .tgpop-btns{ display:flex; gap:12px; margin-top:18px; }
  .tgpop-btns .btn{ flex:1; }
  .scoretag{ display:inline-flex; align-items:center; gap:3px; color:var(--accent); font-weight:700; font-size:14px; white-space:nowrap; }
  .scoretag svg{ width:11px; height:11px; }
  .planrow .scoretag{ margin-left:8px; flex:0 0 auto; }
  .addhdr{ font-size:13px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--l3); margin:16px 0 8px; }
  .addhdr:first-child{ margin-top:2px; }
  .chips{ display:flex; gap:7px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:12px 2px 4px; margin:0 -2px; scrollbar-width:none; }
  .chips.wrap{ flex-wrap:wrap; overflow-x:visible; margin:0; padding:8px 0 2px; }
  .subhint{ font-weight:500; color:var(--l3); }
  .otherprev{ text-align:center; font-size:14px; color:var(--ink); padding:16px 4px 2px; }
  .otherprev b{ color:var(--accent); font-size:17px; }
  /* "why these numbers" — evidence for the picked sport's cardio/muscle proxies */
  .actcite{ margin:8px 4px 2px; padding:10px 12px; border-radius:var(--r-md); background:var(--accent-soft);
    font-size:11.5px; color:var(--l2); line-height:1.5; display:flex; flex-direction:column; gap:3px; }
  .actcitehd{ font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--l3); margin-bottom:1px; }
  .actcite b{ color:var(--accent); }
  .runrow{ display:flex; gap:8px; }
  .runrow .rfield{ flex:1; display:flex; align-items:center; gap:3px; background:var(--field); border-radius:10px; padding:0 12px; }
  .runrow .rfield input{ flex:1; min-width:0; background:none; border:none; padding:12px 0; text-align:center; font-size:16px; color:var(--ink); }
  .runrow .rfield span{ color:var(--l3); font-size:13px; flex:0 0 auto; }
  .btn.dim{ opacity:.45; }
  #addLevelSeg .s{ padding:12px 8px; font-size:13px; }
  .levelcap{ font-size:12px; color:var(--l3); line-height:1.4; margin:8px 0 0; }
  .sortbar{ display:flex; justify-content:flex-end; padding:8px 2px 2px; }
  .sortbtn{ display:inline-flex; align-items:center; gap:5px; background:none; border:none; cursor:pointer; color:var(--l2); font-size:13px; font-weight:600; padding:12px 8px; margin:-4px -8px; }
  .sortbtn svg{ width:15px; height:15px; }
  .sortbtn.on{ color:var(--accent); }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; padding:12px 16px; border-radius:20px; font-size:13px; font-weight:600;
    background:var(--row); color:var(--ink); border:.5px solid var(--line); cursor:pointer; white-space:nowrap;
    transition:transform .12s cubic-bezier(.34,1.4,.6,1), background .15s, color .15s, border-color .15s; }
  .chip:active{ transform:scale(.94); }
  .chip.on{ background:var(--accent); color:#fff; border-color:var(--accent); }
  .cdot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
  .exrow .eqic.sm{ color:var(--l3); display:inline-flex; align-items:center; flex:0 0 auto; }
  .exrow .eqic.sm svg{ width:17px; height:17px; }
  .exrow .info .nm{ display:flex; align-items:center; }
  .exrow .lnkic.inspect{ min-width:34px; min-height:34px; margin:-8px 0; color:var(--l2); }
  .exrow .lnkic.inspect svg{ width:19px; height:19px; }
  #confirmWrap{ position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; padding:28px; }
  #confirmWrap.show{ display:flex; }
  #confirmWrap .cscrim{ position:absolute; inset:0; background:rgba(0,0,0,.5); }
  #confirmWrap .cbox{ position:relative; background:var(--sheetbg); border-radius:18px; max-width:320px; width:100%; padding:24px 20px 16px; box-shadow:0 12px 44px rgba(0,0,0,.34); }
  .cbox .cmsg{ font-size:17px; line-height:1.5; color:var(--ink); margin-bottom:24px; text-align:center; }
  .cbox .cbtns{ display:flex; gap:10px; }
  .cbox .cbtns button{ flex:1; padding:16px; border-radius:12px; font-size:15px; font-weight:600; cursor:pointer; border:none; }
  .cbox .cancel{ background:var(--row); color:var(--ink); }
  .cbox .danger{ background:var(--red); color:#fff; }
  .cbox .go{ background:var(--accent); color:#fff; }
  .cue{ font-size:14px; color:var(--accent); font-weight:500; padding:0 0 16px; line-height:1.45; }
  .cue.soft{ color:var(--l2); font-weight:400; }
  .sessrose-pad{ text-align:center; }
  .sessrose-pad .ed-label{ text-align:left; }
  .sessrose-pad canvas{ width:180px; height:180px; display:inline-block; }
  /* color-dot legend mapping rose wedges → muscles (feed cards + workout-detail sheet) */
  .roselegend{ display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center; }
  .roselegend .rl-item{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
  .roselegend .rl-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; display:inline-block; }
  .roselegend .rl-more{ color:var(--l3); }
  .levelcap .roselegend{ justify-content:flex-start; }
  .cueact{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
  .cuebtn{ font-family:inherit; font-size:13px; font-weight:700; color:var(--accent); background:var(--accent-soft);
    border:none; border-radius:9px; padding:8px 12px; cursor:pointer; line-height:1; transition:transform .12s, filter .12s; }
  .cuebtn:active{ transform:scale(.94); filter:brightness(.97); }
  /* exercise info sheet */
  .infoarea{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--l2); font-weight:600; padding:2px 2px 16px; }
  .infoarea .eqbadge{ display:inline-flex; align-items:center; gap:6px; }
  .infoarea .eqbadge svg{ width:16px; height:16px; color:var(--accent); }
  .infoarea .eqmus{ color:var(--l3); font-weight:500; }
  .infoarea .eqmus .mdot{ width:8px; height:8px; margin-right:8px; }
  .infoarea .muskey{ flex-basis:100%; font-size:12px; font-weight:500; color:var(--l3); }
  .infodiff{ display:flex; align-items:center; gap:8px; padding:0 2px 12px; font-size:13px; }
  .infodiff .dlabel{ color:var(--l2); font-weight:600; }
  .infodiff .ddots{ display:inline-flex; gap:3px; }
  .infodiff .ddot{ width:8px; height:8px; border-radius:50%; background:var(--line); border:.5px solid var(--sep); }
  .infodiff .ddot.on{ background:var(--accent); border-color:var(--accent); }
  .infodiff .dtxt{ color:var(--l2); font-weight:600; }
  .infocues.donts li::before{ content:"✕"; color:var(--red); font-size:12px; top:9px; }
  .infowhy{ font-size:15px; color:var(--ink); line-height:1.5; padding:0 2px 2px; }
  .hrate{ background:var(--row); border-radius:12px; padding:12px 16px; margin:2px 0 16px; }
  .hlabel{ font-size:11px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--l2); }
  .hrow{ display:flex; align-items:center; gap:10px; margin:8px 0 8px; }
  .hstars{ display:inline-flex; gap:2px; color:var(--accent); }
  .hstars .star{ width:17px; height:17px; }
  .hnum{ font-size:16px; font-weight:700; }
  .hnum small{ color:var(--l2); font-weight:600; }
  .hwhy{ font-size:13px; color:var(--ink); line-height:1.45; }
  .hmeta{ font-size:12px; color:var(--l3); line-height:1.45; margin-top:8px; }
  .hsrc{ margin:-8px 0 16px; }
  .hsrc summary{ font-size:13px; font-weight:600; color:var(--accent); cursor:pointer; padding:8px 2px; list-style:none; }
  .hsrc summary::-webkit-details-marker{ display:none; }
  .hsrc summary::before{ content:"›"; display:inline-block; margin-right:8px; transition:transform .2s; }
  .hsrc[open] summary::before{ transform:rotate(90deg); }
  .hsrc ul{ list-style:none; padding:2px 2px 4px; margin:0; }
  .hsrc li{ font-size:12px; color:var(--l2); line-height:1.5; padding:8px 0; border-top:.5px solid var(--sep); }
  .hsrc li:first-child{ border-top:none; }
  .infocues{ list-style:none; padding:0 2px; margin:4px 0 16px; }
  .infocues li{ position:relative; font-size:14px; color:var(--l2); line-height:1.5; padding:8px 0 8px 20px; border-top:.5px solid var(--sep); }
  .infocues li:first-child{ border-top:none; }
  .infocues li::before{ content:"›"; position:absolute; left:2px; top:7px; color:var(--accent); font-weight:700; }
  a.btn{ text-decoration:none; text-align:center; display:block; }
  /* free-mode muscle sections */
  .mgsec{ margin-bottom:4px; }
  .mglabel{ font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--l2); padding:2px 4px 12px; }
  .beat{ font-size:13px; font-weight:600; }
  .beat.has{ color:var(--accent); }
  .beat.none{ color:var(--l3); }
  .demo{ font-size:13px; color:var(--accent); text-decoration:none; }
  .demo.prog,.demo.swap{ cursor:pointer; display:inline-flex; align-items:center; padding:8px 4px; margin:-8px 12px -8px -4px; }
  .swapnote{ font-size:12px; color:var(--accent); font-weight:600; padding:0 8px 8px; }
  .swapnote.warn{ color:var(--warntx); }
  .swapnote.rot.muted{ color:var(--l2); }
  .rotlnk{ background:none; border:none; padding:0; margin:0 2px; font:inherit; font-weight:700; color:var(--accent); text-decoration:underline; cursor:pointer; }
  .injbanner{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; background:var(--accent-soft); color:var(--accent); font-size:13px; font-weight:600; line-height:1.35; padding:11px 14px; border-radius:14px; margin:0 0 12px; cursor:pointer; }
  .injbanner b{ font-weight:700; }
  .injbanner .injmanage{ margin-left:auto; font-weight:700; white-space:nowrap; }
  /* Me-page status row: same colour scale as the intensity picker, on a soft fading gradient (like --grad) */
  .injrow{ display:flex; align-items:center; justify-content:space-between; gap:8px; border:none; transition:filter .2s ease; }
  .injrow .injchev{ opacity:.7; font-size:17px; line-height:1; }
  .injrow.ok{ background:var(--grad-ok); color:#fff; box-shadow:none; }   /* all-clear — calm green */
  .injrow.s1{ background:var(--grad-s1); color:#3a2c00; box-shadow:none; }
  .injrow.s2{ background:var(--grad-s2); color:#fff; box-shadow:none; }
  .injrow.s3{ background:var(--grad-s3); color:#fff; box-shadow:none; }
  /* per-injury intensity segment: muted tint when idle; the picked option takes its fading gradient */
  .injsev{ margin-bottom:8px; }
  .injsev .s[data-sev="1"]{ color:#b8890a; } .injsev .s[data-sev="2"]{ color:#cf6f0a; } .injsev .s[data-sev="3"]{ color:#d63a3a; }
  .injsev .s[data-sev="1"].active{ background:var(--grad-s1); color:#3a2c00; box-shadow:none; }
  .injsev .s[data-sev="2"].active{ background:var(--grad-s2); color:#fff; box-shadow:none; }
  .injsev .s[data-sev="3"].active{ background:var(--grad-s3); color:#fff; box-shadow:none; }
  /* accept button: all-clear green, or the chosen intensity's gradient — matches the row + segment */
  .btn.injaccept{ box-shadow:none; }
  .btn.injaccept.ok{ background:var(--grad-ok); color:#fff; }
  .btn.injaccept.s1{ background:var(--grad-s1); color:#3a2c00; }
  .btn.injaccept.s2{ background:var(--grad-s2); color:#fff; }
  .btn.injaccept.s3{ background:var(--grad-s3); color:#fff; }
  /* per-injury detail: each flagged injury gets its own intensity picker + research-backed advice */
  #injuryDetail{ margin-top:14px; }
  .injdetail{ margin-bottom:18px; }
  .injdetail .ed-label{ margin-top:0; }
  .injadvice{ background:var(--row); border-radius:var(--r-md); padding:14px 16px; margin-bottom:10px; }
  .injadv-h{ font-size:14px; font-weight:700; margin-bottom:6px; }
  .injadvice p{ font-size:13px; color:var(--l2); line-height:1.5; margin:0 0 9px; }
  .injadvice .srclink{ display:block; font-size:11.5px; color:var(--l3); line-height:1.45; }
  .injadvice.redflag{ border-left:3px solid var(--sev3); }   /* severe — possible fracture/tear */
  .injdisc{ font-size:11px; color:var(--l3); line-height:1.45; font-style:italic; margin:2px 4px 0; }
  /* "train these instead" suggestions when an injury rests part of a session */
  .injfill-h{ font-size:14px; font-weight:700; line-height:1.4; }
  .injfill-sub{ font-size:12.5px; color:var(--l2); line-height:1.5; margin:6px 0 12px; }
  .injfill-list{ display:flex; flex-direction:column; gap:8px; }
  .injfill-add{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--row); border:.5px solid var(--sep); border-radius:var(--r-md); padding:12px 14px; font-family:inherit; font-size:15px; font-weight:600; color:var(--ink); cursor:pointer; }
  .injfill-add svg{ width:18px; height:18px; color:var(--accent); flex:0 0 auto; }
  .injfill-add small{ margin-left:auto; font-size:12px; font-weight:600; color:var(--l3); }
  .injfill-add:active{ filter:brightness(.97); }

  .setrow{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-top:.5px solid var(--sep); }
  .setrow:first-of-type{ border-top:none; }
  .setrow .sn{ font-size:15px; color:var(--l3); font-weight:600; width:22px; flex:0 0 auto; text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent; border-radius:6px; padding:3px 0; }
  .setrow.warm .sn{ color:var(--accent); font-size:12px; letter-spacing:.3px; }
  .setrow.warm .w, .setrow.warm .r{ opacity:.7; }
  .setrow.warm .vol{ color:var(--l3); font-style:italic; font-size:12px; }
  .setrow input{ text-align:center; padding:16px 4px; }
  .setrow .x{ color:var(--l3); flex:0 0 auto; font-weight:600; }
  /* hold timer for timed/isometric moves — tap to count up, tap to log the seconds into the row */
  .setrow .holdbtn{ flex:0 0 auto; min-width:50px; height:34px; padding:0 9px; border:none; border-radius:9px;
    background:var(--accent-soft); color:var(--accent); font-weight:700; font-size:13px; font-variant-numeric:tabular-nums;
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .12s; }
  .setrow .holdbtn svg{ width:16px; height:16px; }
  .setrow .holdbtn:active{ transform:scale(.9); }
  .setrow .holdbtn.running{ background:var(--accent); color:#fff; box-shadow:0 0 0 4px var(--accent-soft); }
  .setrow.timed .w{ max-width:66px; }
  .setrow .eq{ color:var(--l3); flex:0 0 auto; font-weight:600; font-size:13px; }
  .setrow .vol{ font-size:18px; color:var(--l2); font-weight:700; min-width:56px; flex:0 0 auto; text-align:right; line-height:1; font-variant-numeric:tabular-nums; }
  .setrow.novol .eq, .setrow.novol .vol{ visibility:hidden; }   /* no number yet → hide the "= —" noise, keep column alignment */
  /* focus: completed sets recede so the set you're on leads the eye (visual only; PRs stay bright) */
  .setrow{ transition:opacity .25s ease; }
  .setrow.done:not(.pr){ opacity:.42; }
  .setrow.done:focus-within{ opacity:1; }   /* tapping a completed set to edit brings it back */
  .setrow .vol.live{ color:var(--ink); cursor:pointer; }
  .setrow .vol.live:active{ transform:scale(.9); opacity:.6; }
  /* previous-session volume doubles as a "tap to copy last time" target */
  .setrow .vol.fillable{ cursor:pointer; color:var(--accent); text-decoration:underline dotted var(--accent-soft); text-underline-offset:3px; transition:transform .12s, opacity .12s; }
  .setrow .vol.fillable:active{ transform:scale(.9); opacity:.6; }
  /* a new best lights up the whole row, not just the number */
  .setrow.pr{ background:linear-gradient(90deg, var(--accent-soft) 0%, transparent 78%); box-shadow:inset 3px 0 0 var(--accent); border-radius:10px; animation:prrow .55s cubic-bezier(.2,1,.4,1) both; }
  .setrow.pr .sn, .setrow.pr .x, .setrow.pr .eq{ color:var(--accent); }
  .setrow.pr .vol{ color:var(--accent); }
  .setrow.pr input:not(:placeholder-shown){ color:var(--accent); }
  @keyframes prrow{ 0%{ box-shadow:inset 0 0 0 var(--accent); background-color:transparent; } 35%{ box-shadow:inset 220px 0 0 var(--accent-soft), inset 3px 0 0 var(--accent); } 100%{ box-shadow:inset 3px 0 0 var(--accent); } }
  .setrow .setdel{ flex:0 0 auto; width:40px; height:40px; margin:-8px -12px -8px -4px; border:none; background:none; color:var(--l3);
    cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; border-radius:50%; transition:color .15s, background .15s; }
  .setrow .setdel svg{ width:19px; height:19px; }
  .setrow .setdel:active{ color:var(--red); background:var(--accent-soft); }
  .setrow .prtag{ display:none; flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:.4px; color:#fff; background:var(--accent); padding:2px 8px; border-radius:6px; line-height:1; }
  .setrow.pr .prtag{ display:inline-flex; animation:prpop .5s cubic-bezier(.2,1.3,.5,1) both; }
  @keyframes prpop{ 0%{transform:scale(0);opacity:0;} 55%{transform:scale(1.3);} 100%{transform:scale(1);opacity:1;} }
  .prspark{ position:fixed; inset:0; pointer-events:none; z-index:250; }
  .prspark i{ position:absolute; width:6px; height:6px; border-radius:50%; transform:translate(-50%,-50%); animation:prspark .65s ease-out forwards; }
 @keyframes prspark{ 0%{transform:translate(-50%,-50%) scale(1);opacity:1;} 100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.3);opacity:0;} }
  .lnks{ display:flex; align-items:center; flex:0 0 auto; gap:6px; }
  .menubtn{ background:none; border:none; padding:0; }
  /* single body-level popover (the card clips overflow, so it can't live inside) */
  .exmenu-pop{ position:fixed; z-index:200; min-width:184px; padding:8px; display:none; flex-direction:column;
    background:var(--card); border:.5px solid var(--line); border-radius:16px; box-shadow:0 14px 38px rgba(0,0,0,.24); }
  .exmenu-pop.show{ display:flex; animation:menupop .14s cubic-bezier(.2,.8,.2,1); transform-origin:top right; }
  @keyframes menupop{ from{ opacity:0; transform:translateY(-5px) scale(.97); } to{ opacity:1; transform:none; } }
  .exmenu-pop .mi{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; cursor:pointer;
    font-size:15px; font-weight:500; color:var(--ink); white-space:nowrap; }
  .exmenu-pop .mi svg{ width:19px; height:19px; flex:0 0 auto; color:var(--l2); }
  .exmenu-pop .mi:active{ background:var(--accent-soft); }
  .exmenu-pop .mi.danger{ color:var(--red); } .exmenu-pop .mi.danger svg{ color:var(--red); }
  .lnkic{ color:var(--l2); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; margin:-8px 0; }
  .lnkic svg{ width:18px; height:18px; }
  .lnkic:active{ color:var(--accent); }
  .lnk{ font-size:13px; color:var(--l2); text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; padding:8px 8px; margin:-8px -2px; }
  .lnk:active{ color:var(--accent); }
  .dot{ color:var(--l3); font-style:normal; margin:0 8px; font-size:11px; }

  .savebar{ position:fixed; left:0; right:0; bottom:0; max-width:540px; margin:0 auto;
 padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:linear-gradient(0deg, var(--bg) 62%, transparent);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }

  .toast{ position:fixed; left:50%; bottom:92px; transform:translate(-50%,16px); z-index:120;
    background:rgba(28,28,30,.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    color:#fff; font-size:14px; font-weight:600; padding:12px 20px; border-radius:30px;
    opacity:0; pointer-events:none; transition:all .3s; max-width:90%; text-align:center;
    box-shadow:0 8px 30px rgba(0,0,0,.35); }
  .toast.show{ opacity:1; transform:translate(-50%,0); }
  /* sleek in-app message banner — slides down from the top, avatar + name + preview, tap to open */
  .notif{ position:fixed; top:calc(env(safe-area-inset-top) + 8px); left:50%; width:min(440px, calc(100vw - 20px));
    transform:translate(-50%,-150%); z-index:135; display:flex; align-items:center; gap:12px;
    padding:11px 14px; border-radius:20px; cursor:pointer; -webkit-tap-highlight-color:transparent;
    background:color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5);
    border:.5px solid var(--line); box-shadow:0 14px 44px rgba(0,0,0,.26);
    opacity:0; pointer-events:none; transition:transform .44s cubic-bezier(.2,.9,.25,1.15), opacity .28s; }
  .notif.show{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }
  .notif .notif-main{ flex:1; min-width:0; }
  .notif .notif-nm{ font-weight:700; font-size:14.5px; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .notif .notif-tx{ font-size:13px; color:var(--l2); line-height:1.3; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .notif:active{ transform:translate(-50%,0) scale(.985); }
  /* first-open coachmark — a one-time hint that waits to be dismissed */
 .coach{ position:fixed; left:50%; bottom:calc(64px + env(safe-area-inset-bottom)); transform:translate(-50%,16px); z-index:120;
 width:calc(100% - 32px); max-width:380px; display:none; align-items:center; gap:10px;
    background:rgba(28,28,30,.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); color:#fff;
    padding:12px 12px 12px 16px; border-radius:16px; box-shadow:0 10px 36px rgba(0,0,0,.4); opacity:0; transition:opacity .3s, transform .3s; }
  .coach.show{ display:flex; opacity:1; transform:translate(-50%,0); }
  .coachbody{ flex:1; font-size:14px; line-height:1.4; }
  .coachx{ flex:0 0 auto; background:var(--accent); color:#fff; border:none; border-radius:10px; padding:8px 12px; font-size:13px; font-weight:700; cursor:pointer; }
  /* inline confirm — appears right under the control you edited; commits only on Confirm */
  .inlineconfirm{ display:none; align-items:center; gap:8px; margin:12px 0 0;
    background:var(--accent-soft); border-radius:12px; padding:12px 12px 12px 16px;
    opacity:0; transform:translateY(-4px); transition:opacity .2s, transform .2s; }
  .inlineconfirm.show{ display:flex; opacity:1; transform:none; }
  .icmsg{ flex:1; font-size:14px; color:var(--ink); line-height:1.35; }
  .icbtns{ flex:0 0 auto; display:flex; align-items:center; gap:4px; }
  .iccancel{ background:none; border:none; color:var(--l2); font-size:13px; font-weight:600; padding:8px 8px; cursor:pointer; }
  .icok{ background:var(--accent); color:#fff; border:none; border-radius:10px; padding:8px 16px; font-size:13px; font-weight:700; cursor:pointer; }
  .icok:active,.iccancel:active{ opacity:.7; }
  .chip.pending{ box-shadow:0 0 0 2px var(--accent); }

  .foot{ text-align:center; font-size:13px; color:var(--l3); margin:8px 0 4px; line-height:1.5; }

  .scrim{ position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .3s; z-index:90; }
  .scrim.show{ opacity:1; pointer-events:auto; }
  .sheet{ position:fixed; left:0; right:0; bottom:0; max-width:540px; margin:0 auto; z-index:100;
    background:var(--sheetbg); border-radius:22px 22px 0 0; transform:translateY(102%);
    transition:transform .34s cubic-bezier(.2,.8,.2,1); max-height:92vh; display:flex; flex-direction:column; }
  .sheet.show{ transform:translateY(0); box-shadow:0 -1px 0 var(--hi), 0 -20px 50px -20px rgba(0,0,0,.4); }
  .sheet{ overflow:hidden; }
  .grabber{ width:36px; height:5px; background:var(--grabber); border-radius:3px; margin:8px auto 2px; flex:0 0 auto; }
  .sheethdr{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px 8px; flex:0 0 auto; }
  .sheethdr .t{ font-size:20px; font-weight:650; letter-spacing:-.5px; }
 .sheetbody{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:8px 16px calc(28px + env(safe-area-inset-bottom)); }
  /* in-app white-paper viewer: near-full-height sheet, pages rendered as a scrollable image column
     (iOS won't render a multi-page PDF in an iframe — it shows only page 1 and zooms oddly) */
  .pdfsheet{ height:94vh; }
  .pdfsheet .pdfbody{ padding:0; background:var(--sep); }
  .pdfpg{ display:block; width:100%; height:auto; margin:0 0 6px; background:#fff; }
  .pdffallback{ text-align:center; padding:14px 16px calc(18px + env(safe-area-inset-bottom)); margin:0; }

  .planrow{ display:flex; align-items:center; gap:12px; padding:16px 16px; background:var(--row); border-radius:var(--r-md); margin-bottom:8px;
    border:.5px solid var(--line); transition:transform .14s cubic-bezier(.34,1.4,.6,1); }
  .planrow:active{ transform:scale(.985); }
  .planrow .check{ width:22px; color:var(--accent); font-size:18px; flex:0 0 auto; text-align:center; }
  .planrow .info{ flex:1; min-width:0; cursor:pointer; }
  .planrow .info .nm{ font-size:16px; font-weight:600; }
  .planrow .info .meta{ font-size:13px; color:var(--l2); margin-top:2px; }
  .planrow .edit{ color:var(--accent); font-size:14px; background:none; border:none; cursor:pointer; flex:0 0 auto; }

  .ed-label{ font-size:12px; color:var(--l3); font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin:20px 0 8px; }
  /* Me-page zone header — stronger than .ed-label, with a hairline, to delineate the page's sections */
  .mezone{ font-size:12px; font-weight:700; color:var(--l3); text-transform:uppercase; letter-spacing:.6px; margin:26px 2px 12px; padding-bottom:8px; border-bottom:.5px solid var(--line); }
  .mezone:first-child{ margin-top:4px; }
  .ed-wk{ background:var(--row); border-radius:12px; padding:12px; margin-bottom:12px; }
  .ed-wk .wkhead{ display:flex; gap:8px; margin-bottom:8px; }
  .ed-ex{ display:block; margin-bottom:12px; padding-left:12px; }
  .ed-ex.ss-on{ box-shadow:inset 3px 0 0 var(--accent); }
  .ed-ex-l1{ display:flex; gap:6px; align-items:center; margin-bottom:8px; }
  .ed-ex .exa{ font-size:14px; }
  .ed-ex input.exn{ flex:2; } .ed-ex input.ext{ flex:1.3; } .ed-ex input.exs{ flex:0 0 50px; text-align:center; }
  .ed-ex .del,.ed-wk .del{ color:var(--red); background:none; border:none; font-size:20px; cursor:pointer; flex:0 0 auto; width:30px; height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .exgrip{ flex:0 0 auto; width:28px; height:44px; padding:0; background:none; border:none; cursor:grab; color:var(--l3); font-size:17px; line-height:1; touch-action:none; letter-spacing:-1px; display:inline-flex; align-items:center; justify-content:center; }
  .exgrip:active{ cursor:grabbing; }
  .ed-ex.dragging{ opacity:.5; }
  .exlink{ flex:0 0 auto; width:30px; height:44px; padding:0; background:none; border:none; cursor:pointer; color:var(--l3); display:inline-flex; align-items:center; justify-content:center; }
  .exlink svg{ width:15px; height:15px; }
  .exlink.on{ color:var(--accent); }
  .exlink-sp{ flex:0 0 auto; width:30px; }
  .ed-wk .wkn{ flex:2; } .ed-wk .wks{ flex:1; }
  .miniadd{ font-size:14px; color:var(--accent); background:none; border:none; cursor:pointer; padding:12px 8px; margin:-4px -8px; font-weight:500; }
  .rotwrap{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--l2); margin-top:4px; }
  .rotwrap input{ width:auto; }
  .gset{ display:flex; gap:8px; align-items:center; }
  .gset input{ text-align:center; }
  .codebox{ width:100%; min-height:88px; background:var(--field); border:none; border-radius:10px;
    padding:12px 12px; font-size:12px; font-family:ui-monospace,Menlo,monospace; color:var(--ink); resize:vertical; outline:none; }
  .codebox:focus{ box-shadow:0 0 0 2px var(--accent) inset; }
  .planrow .edit.share{ color:var(--accent); }
  .wkpick{ display:flex; align-items:center; gap:10px; padding:12px 12px; background:var(--row); border-radius:12px; margin-bottom:8px; font-size:14px; font-weight:600; cursor:pointer; }
  .wkpick input{ width:auto; }
  .wkpick .wsub{ color:var(--l2); font-weight:500; }
  .mrow{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .mlab{ width:90px; flex:0 0 auto; font-size:13px; font-weight:600; }
  .mbarwrap{ flex:1; background:var(--track); border-radius:6px; height:11px; overflow:hidden; }
  .mbar{ height:100%; border-radius:8px; transition:width .5s cubic-bezier(.2,.8,.2,1); }
  .mval{ width:48px; flex:0 0 auto; text-align:right; font-size:13px; font-weight:700; }
  .mrow.under .mval{ color:#e8590c; }
  .mrow.under .mbar{ opacity:.5; }
  .hsrc li span{ color:var(--l3); }
  .mdot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; vertical-align:middle; }
  /* growth signal — per-muscle grow/hold/shrink estimate */
  .growth{ border:.5px solid var(--line); border-left-width:3px; border-radius:14px; padding:14px 16px; background:var(--card); margin:0 4px 16px; }
  .growth .ghead{ display:flex; align-items:center; gap:9px; }
  .growth .gdot{ width:11px; height:11px; border-radius:50%; flex:0 0 auto; }
  .growth .gtitle{ font-size:15px; font-weight:700; letter-spacing:-.2px; }
  .growth .gsub{ font-size:14px; color:var(--l2); line-height:1.5; margin:8px 0 0; }
  .growth .grid{ display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
  .gchip{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:999px; border:.5px solid var(--line); background:var(--row); }
  .gchip .garrow{ font-weight:800; font-size:13px; }
  .gchip.grow{ color:#2b8a3e; border-color:#51cf6655; background:#51cf6618; }
  .gchip.hold{ color:#9c6500; border-color:#f59f0055; background:#f59f0018; }
  .gchip.shrink{ color:#c92a2a; border-color:#ff6b6b55; background:#ff6b6b18; }
  .gchip.bord{ border-style:dashed; }   /* borderline: within input-noise of a decision boundary */
  .gchip.over{ color:var(--l2); border-color:var(--line); background:var(--row); }  /* past the productive range */
  .gchip .gq{ font-weight:800; opacity:.6; margin-left:-1px; }
  /* ===== calm-pass: summary card (one glanceable line) → opens a detail sheet on tap ===== */
  .tsum{ display:flex; align-items:center; gap:14px; width:100%; padding:2px 0 2px; }
  .tsum-mini{ flex:0 0 auto; width:78px; height:52px; }
  .tsum-mini.radar{ width:60px; height:60px; }
  .tsum-main{ flex:1 1 auto; min-width:0; }
  .tsum-stat{ font-size:24px; font-weight:700; letter-spacing:-.5px; color:var(--ink); line-height:1.1; display:flex; align-items:baseline; gap:8px; flex-wrap:nowrap; min-width:0; }
  .tsum-stat .u{ font-size:13px; font-weight:600; color:var(--l3); letter-spacing:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tsum-stat .up{ color:#2b8a3e; } .tsum-stat .down{ color:#c92a2a; }
  .tsum-cap{ font-size:12.5px; color:var(--l3); margin-top:3px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tsum-chev{ flex:0 0 auto; color:var(--l3); font-size:22px; font-weight:400; margin-left:2px; }
  .metile.tap:active .tsum-chev{ color:var(--accent); }
  /* detail sheets that host the moved-in charts/folds */
  .detailsheet{ height:92vh; }
  .detailsheet .sheetbody .fchd2:first-child{ margin-top:2px; }
  /* one shared lead for every detail sheet: big headline + caption + hairline, echoing the summary card */
  .sheetlead{ margin:2px 2px 16px; padding-bottom:14px; border-bottom:.5px solid var(--sep); }
  .sheetlead:empty{ display:none; border:none; margin:0; padding:0; }
  .sheetlead .lh{ font-size:21px; font-weight:750; letter-spacing:-.5px; color:var(--ink); line-height:1.2; }
  .sheetlead .lh .exprogsub{ display:block; margin-top:5px; font-size:13px; font-weight:500; color:var(--l2); letter-spacing:0; }
  .sheetlead .lh.good{ color:#2b8a3e; } .sheetlead .lh.under{ color:#c92a2a; }
  .sheetlead .lc{ font-size:13px; color:var(--l3); line-height:1.42; margin-top:6px; }
  /* home spotlight: one importance-picked card with a real graph — celebrate a win or flag a gap */
  .ovspot{ overflow:hidden; }
  .ovspot .pad{ position:relative; }
  .ovspot.win{ box-shadow:inset 3px 0 0 #2b8a3e; }
  .ovspot.watch{ box-shadow:inset 3px 0 0 #e8890c; }
  .ovspot.info{ box-shadow:inset 3px 0 0 var(--accent); }
  .ovspot.info .spotk{ color:var(--accent); }
  .ovspot{ animation:rise .44s cubic-bezier(.2,.8,.2,1) both; }
  @media (prefers-reduced-motion: reduce){ .ovspot{ animation:none; } }
  .spothd{ display:flex; align-items:center; gap:7px; margin-bottom:6px; }
  .spotico{ font-size:17px; line-height:1; }
  .spotk{ font-size:11px; font-weight:750; letter-spacing:.6px; text-transform:uppercase; color:var(--l3); }
  .ovspot.win .spotk{ color:#2b8a3e; } .ovspot.watch .spotk{ color:#e8890c; }
  .spotbig{ font-size:18px; font-weight:700; letter-spacing:-.3px; color:var(--ink); line-height:1.25; padding-right:20px; }
  .spotcap{ font-size:13px; color:var(--l2); line-height:1.45; margin-top:6px; }
  #ovSpotC{ width:100%; height:auto; aspect-ratio:640/150; display:block; margin:12px 0 0; }
  .ovspot .ovchev{ position:absolute; top:14px; right:2px; }
  /* one toggle style across every detail sheet: the balance sheet's segmented controls
     render as the same underline tabs used by the Strength & Volume sheets */
  .detailsheet .seg{ background:none; border:none; padding:0; margin:12px 0 6px; gap:20px; border-radius:0; flex-wrap:wrap; overflow:visible; }
  /* consistent figure rhythm across every detail sheet: same chart margins, same section spacing */
  .detailsheet .sheetbody{ overflow-x:hidden; }
  .detailsheet .sheetbody canvas{ margin:12px 0 10px; }
  /* section headers in a detail sheet get a touch more breathing room than the app default */
  .detailsheet .ed-label{ margin:26px 0 10px; }
  .detailsheet .fcnote{ margin:9px 0 0; }
  .detailsheet .fcconn{ margin:10px 0 2px; }
  .detailsheet .seg .s{ flex:0 0 auto; padding:1px 0 6px; border-radius:0; font-size:13px; font-weight:600; color:var(--l3); background:none; box-shadow:none; position:relative; }
  .detailsheet .seg .s.active{ background:none; box-shadow:none; color:var(--ink); }
  .detailsheet .seg .s.active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--accent); }
  html.dark .detailsheet .seg .s.active{ border:none; box-shadow:none; }
  /* per-plan balance rose, revealed inline under a plan in the Plans list */
  .psccar{ display:inline-block; transition:transform .2s; color:var(--l3); }
  .planbal{ padding:2px 0 6px; animation:spanelIn .18s ease; }
  .planbalc{ width:100%; max-width:250px; height:auto; aspect-ratio:1/1; display:block; margin:2px auto 2px; }
  .planbalcap{ font-size:12px; color:var(--l2); text-align:center; margin:0 8px 6px; line-height:1.4; }
  #musSrcList{ list-style:none; padding:2px 2px 4px; margin:0; }
  #musSrcList li{ font-size:12px; color:var(--l2); line-height:1.5; padding:8px 0; border-top:.5px solid var(--sep); }
  #musSrcList li:first-child{ border-top:none; }
  #musSrcList li span{ color:var(--l3); }
  /* spontaneous-session sheet */
  .sponpick{ display:flex; flex-direction:column; gap:8px; }
  .sponcard{ display:flex; flex-direction:column; gap:2px; text-align:left; width:100%; padding:12px 14px; border-radius:12px; border:.5px solid var(--line); background:var(--row); cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .sponcard.on{ border-color:var(--accent); box-shadow:0 0 0 1.5px var(--accent) inset; }
  .sponcard .spname{ font-size:15px; font-weight:700; color:var(--ink); }
  .sponcard .spwhy{ font-size:12.5px; color:var(--l2); }
  .sponex{ display:flex; flex-direction:column; }
  .sponrow{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:.5px solid var(--sep); }
  .sponrow:last-child{ border-bottom:none; }
  .sponrow .cdot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
  .sponrow .sptext{ display:flex; flex-direction:column; flex:1; min-width:0; }
  .sponrow .spx{ font-size:14px; font-weight:600; color:var(--ink); }
  .sponrow .spmeta{ font-size:12px; color:var(--l3); }
  .spswap{ flex:0 0 auto; width:34px; height:34px; border-radius:9px; border:.5px solid var(--line); background:var(--row); color:var(--l2); font-size:16px; cursor:pointer; }
  .spswap:active{ background:var(--sep); }
  .sponexhd{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
  .spshuffle{ flex:0 0 auto; border:none; background:none; color:var(--accent); font-size:12.5px; font-weight:650; cursor:pointer; padding:2px 4px; -webkit-tap-highlight-color:transparent; }
  .spshuffle:active{ opacity:.6; }
  /* per-muscle plan outlook (inside the plan-outlook insight card) */
  .pmgrid{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
  .pmcap{ font-size:12px; color:var(--l3); line-height:1.45; margin:9px 0 0; }
  /* reorderable Me tiles */
  .mezone.rowzone{ display:flex; align-items:baseline; justify-content:space-between; }
  .tilebtns{ display:inline-flex; gap:14px; align-items:baseline; }
  .tilereset,.tileedit{ background:none; border:none; cursor:pointer; color:var(--accent); font-size:11px; font-weight:700; text-transform:none; letter-spacing:0; padding:0; }
  .metile.panel{ position:relative; }
  .panelhd{ align-items:center; }
  /* grip + hide toggle live in the header but only appear in edit mode */
  .tilegrip{ display:none; margin-left:auto; align-self:center; color:var(--l3); font-size:17px; line-height:1; padding:2px 4px; cursor:grab; touch-action:none; -webkit-tap-highlight-color:transparent; user-select:none; }
  .tilehide{ display:none; align-items:center; justify-content:center; background:none; border:none; color:var(--l3); padding:2px 4px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .editing .tilegrip{ display:inline-flex; }
  .editing .tilehide{ display:inline-flex; }
  /* edit-mode chrome: make every tile read as a movable card, and stop touch-scroll while dragging */
  .editing .metile{ touch-action:none; outline:1.5px dashed var(--line); outline-offset:-2px; }
  .editing .metile.tap{ cursor:grab; }
  /* !important so a user-hidden tile stays hidden even over the forecast/ledger tiles' inline display */
  .metile.tile-off{ display:none !important; }
  .editing .metile.tile-off{ display:block !important; opacity:.4; outline-style:dotted; }
  /* the lifted tile follows the finger (fixed), the placeholder shows the drop slot */
  .metile.dragging{ position:fixed; z-index:200; margin:0; opacity:.97; box-shadow:0 18px 44px rgba(0,0,0,.30); transform:scale(1.03); }
  .tileph{ border:2px dashed var(--accent); border-radius:16px; background:var(--accent-soft); opacity:.55; margin:0 0 18px; box-sizing:border-box; }
  /* objective-adherence line moved onto the Progress tile */
  .progobj{ font-size:13px; font-weight:600; color:var(--l2); margin:2px 0 8px; }
  .progobj.good{ color:#2b8a3e; } .progobj.under{ color:#c92a2a; }
  /* growth signal folded into the forecast tile — strip its standalone-card chrome */
  .metile .growth{ border:none; background:none; padding:0; margin:8px 0 0; border-radius:0; }
  .growth.grow{ border-left-color:#51cf66; } .growth .gdot.grow{ background:#51cf66; }
  .growth.hold{ border-left-color:#f59f00; } .growth .gdot.hold{ background:#f59f00; }
  .growth.shrink{ border-left-color:var(--red); } .growth .gdot.shrink{ background:var(--red); }
  .growth.more{ border-left-color:var(--line); } .growth .gdot.more{ background:var(--l3); }
  #musRadar, #buildRadar{ width:100%; max-width:320px; height:auto; aspect-ratio:1/1; display:block; margin:16px auto 16px; }
  /* Unified card for the two homogenised panels (Muscle balance + Progress):
     title → underline tab bar → swipe carousel → footer. `.tap` adds the press affordance (balance only). */
  .panel{ display:block; box-sizing:border-box; width:100%; padding:16px 16px 14px; margin-bottom:18px; text-align:left;
    background:var(--card); border:.5px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow), inset 0 .5px 0 var(--hi);
    color:inherit; -webkit-appearance:none; appearance:none; font:inherit; }
  .panel.tap{ cursor:pointer; -webkit-tap-highlight-color:transparent; transition:opacity .12s; }
  .panel.tap:active{ opacity:.7; }
  .panel:focus, .panel:focus-visible{ outline:none; }
  .panelhd{ display:flex; align-items:center; gap:8px; }
  .panelt{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--l3); }
  .panelt svg{ width:15px; height:15px; flex:0 0 auto; }
  /* underline tab bar — window/metric switch + swipe state indicator, left-aligned under the title */
  .mewintabs{ display:flex; flex-wrap:wrap; gap:18px; }
  .paneltabs{ margin:9px 0 2px; }
  .mewintab{ position:relative; padding:1px 0 5px; background:none; border:none; font:inherit; font-size:13px; font-weight:600; color:var(--l3); cursor:pointer; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; transition:color .15s; }
  .mewintab.active{ color:var(--ink); }
  .mewintab.active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--accent); }
  /* swipe carousels — clip viewport bleeds to the card edges (negative side margins cancel the padding) */
  .meRing{ margin:10px -16px 8px; overflow:hidden; touch-action:pan-y;
    -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
  .meRingTrack{ display:flex; width:200%; will-change:transform; }
  .meRingPage{ flex:0 0 50%; width:50%; display:flex; align-items:center; justify-content:center; }
  #meRadar, #meRadar2{ display:block; width:100%; max-width:300px; aspect-ratio:1/1; height:auto; outline:none; -webkit-tap-highlight-color:transparent; }
  /* panel footer — balance: stat | cta (row); progress: caption + verdict (stacked via .stack) */
  .panelfoot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:4px; }
  .panelfoot.stack{ display:block; }
  .mebalstat{ font-size:13px; font-weight:600; color:var(--l2); }
  .mebalstat.under{ color:var(--red); }
  .mebalstat.good{ color:#2fb463; }
  .mebalcta{ font-size:12px; color:var(--l3); flex:0 0 auto; }
  .emphradar{ max-width:300px!important; margin:8px auto 12px!important; touch-action:none; cursor:grab; -webkit-user-select:none; user-select:none; }
  .emphradar:active{ cursor:grabbing; }
  .prevhdr{ display:flex; align-items:center; justify-content:space-between; margin:20px 0 0; font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--l2); }

  #exChart{ width:100%; height:210px; background:var(--chartbg); border-radius:14px; display:block; }
  .cmeta{ display:flex; gap:10px; margin:16px 0 8px; }
  .cmeta > div{ flex:1; background:var(--row); border-radius:12px; padding:12px 12px; }
  .cmeta .k{ display:block; font-size:11px; color:var(--l2); }
  .cmeta .v{ display:block; font-size:16px; font-weight:700; margin-top:4px; }
  .crow{ display:flex; justify-content:space-between; padding:12px 4px; border-top:.5px solid var(--sep); font-size:14px; }
  .crow span:last-child{ color:var(--l2); }
  .freehint{ font-size:13px; color:var(--l2); padding:0 4px 16px; line-height:1.45; }
  .tipsrc{ font-size:11px; color:var(--l3); margin-top:11px; font-style:italic; }
  .tipcard{ display:block; text-decoration:none; color:inherit; -webkit-tap-highlight-color:transparent; }
  .tipcard:active{ opacity:.82; }
  .tiplink{ font-size:12px; font-weight:700; color:var(--accent); margin-top:12px; }
  .srclink{ color:inherit; text-decoration:none; }
  .srcarrow{ color:var(--accent)!important; font-weight:700; white-space:nowrap; }
  /* GRADE-style evidence rating chip on a citation */
  .egrade{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.02em; padding:1px 6px; border-radius:5px; vertical-align:1px; }
  .eg-high{ background:rgba(47,143,78,.16); color:#2f8f4e; }
  .eg-moderate{ background:rgba(185,130,26,.16); color:#b9821a; }
  .eg-low{ background:rgba(127,127,127,.16); color:var(--l3); }
  /* Learn / coaching library */
  .libteaser{ font-size:13px; font-weight:700; color:var(--accent); margin:10px 4px 0; cursor:pointer; }
  .libteaser:active{ opacity:.7; }
  .libcard{ display:block; text-decoration:none; color:inherit; margin-bottom:10px; -webkit-tap-highlight-color:transparent; }
  .libcard:active{ opacity:.85; }
  .libcard .libtext{ font-size:15px; line-height:1.45; margin:9px 0 0; color:var(--ink); }
  .libtop{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .libev{ font-size:11px; font-weight:700; letter-spacing:.2px; padding:3px 9px; border-radius:999px; border:.5px solid var(--line); }
  .libev.ev-do{ color:#2b8a3e; background:#51cf6618; border-color:#51cf6655; }
  .libev.ev-linked{ color:#9c6500; background:#f59f0018; border-color:#f59f0055; }
  .libev.ev-marker{ color:var(--l2); background:var(--row); }
  .libweak{ font-size:11px; font-weight:600; color:#c92a2a; background:#ff6b6b18; border:.5px solid #ff6b6b55; padding:3px 9px; border-radius:999px; }
  #libChips .s{ padding:7px 13px; border-radius:999px; font-size:13px; }
  /* per-exercise effort picker (proximity to failure) — one tap, remembered from last time */
  .efbar{ display:flex; align-items:center; gap:8px; padding:12px 20px; border-top:.5px solid var(--sep); }
  .efbar .eflbl{ font-size:13px; color:var(--l3); font-weight:600; flex:0 0 auto; margin-right:auto; }
  .efseg{ flex:0 0 auto; border:.5px solid var(--line); background:var(--card); color:var(--l2);
    font-size:13px; font-weight:650; padding:7px 12px; border-radius:9px; cursor:pointer; transition:transform .12s, background .15s, color .15s, border-color .15s; }
  .efseg:active{ transform:scale(.93); }
  .efseg.on{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
  .freeadd{ padding:12px 16px 16px; border-top:.5px solid var(--sep); }
  .addset{ cursor:pointer; font-weight:600; display:inline-flex; align-items:center; gap:3px; padding:8px 8px; margin:-8px -8px; min-height:24px; }
  .exhead .freedel{ color:var(--red); background:none; border:none; font-size:24px; line-height:1; cursor:pointer; padding:8px; margin:-8px -4px; }

  /* --- polish pass --- */
  body{ animation:appfade .4s ease both; }
  @keyframes appfade{ from{opacity:0;} to{opacity:1;} }
  .sheetbody{ overscroll-behavior:contain; }
  .setrow input:not(:placeholder-shown):not(:focus){ color:var(--ink); font-weight:700; box-shadow:inset 0 0 0 1.5px var(--accent-soft); }
  #exlist .group:nth-of-type(2){ animation-delay:.05s; }
  #exlist .group:nth-of-type(3){ animation-delay:.10s; }
  #exlist .group:nth-of-type(4){ animation-delay:.15s; }
  #exlist .group:nth-of-type(5){ animation-delay:.20s; }
  #exlist .group:nth-of-type(6){ animation-delay:.25s; }

  /* playful motion */
  @keyframes rise{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
  #exlist .group{ animation:rise .42s cubic-bezier(.2,.8,.2,1) backwards; }
  @keyframes popin{ 0%{ transform:translate(-50%,0) scale(.82);} 55%{ transform:translate(-50%,0) scale(1.08);} 100%{ transform:translate(-50%,0) scale(1);} }
  .toast.big{ font-size:15px; padding:16px 24px; font-weight:700; animation:popin .45s cubic-bezier(.34,1.56,.64,1); }
  .confetti{ position:fixed; inset:0; pointer-events:none; z-index:200; overflow:hidden; }
  .confetti i{ position:absolute; top:-14px; width:calc(9px*var(--sz,1)); height:calc(14px*var(--sz,1)); border-radius:2px; opacity:.95;
    animation:fall var(--dur,1.5s) cubic-bezier(.18,.7,.4,1) forwards; }
  @keyframes fall{ to{ transform:translate(var(--dx,0), 110vh) rotate(620deg); opacity:.85; } }

  /* --- tap & feel pass: bigger checkboxes + tactile press feedback --- */
  input[type=checkbox]{ width:22px; height:22px; min-width:22px; flex:0 0 auto; accent-color:var(--accent); cursor:pointer; }
  .btn{ transition:transform .12s ease, opacity .12s ease, box-shadow .2s; }
  .btn:active{ transform:scale(.975); opacity:.94; }
  .tmrbtn:active,.restadj button:active{ transform:scale(.9); }
  .tmrreset:active,.sortbtn:active,.lnk:active,.demo:active{ opacity:.55; }
  .setrow .setdel:active{ transform:scale(.86); }
  .titleBtn:active{ opacity:.6; }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation-duration:.001s!important; transition-duration:.05s!important; }
    .confetti{ display:none!important; }
  }

  /* workout-detail sheet — stat grid, muscle-split bars, grouped exercise list */
  .wo-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
  .wo-stat{ background:var(--row); border-radius:14px; padding:12px 4px; text-align:center; }
  .wo-stat b{ display:block; font-size:18px; font-weight:700; color:var(--ink); }
  .wo-stat span{ display:block; margin-top:2px; font-size:12px; color:var(--l2); }
  .wo-mus{ display:flex; flex-direction:column; gap:11px; }
  .wo-mrow{ display:flex; align-items:center; gap:12px; }
  .wo-mlab{ display:flex; align-items:center; gap:8px; width:74px; flex:0 0 auto; font-size:14px; font-weight:600; color:var(--ink); }
  .wo-mdot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
  .wo-mtrack{ flex:1 1 auto; height:10px; border-radius:6px; background:var(--row); overflow:hidden; }
  .wo-mbar{ display:block; height:100%; border-radius:6px; }
  .wo-exlist{ background:var(--card); border-radius:16px; overflow:hidden; }
  .wo-ex{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-bottom:.5px solid var(--line); }
  .wo-ex:last-child{ border-bottom:none; }
  .wo-exdot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
  .wo-exn{ font-weight:600; font-size:15px; color:var(--ink); }
  .wo-exs{ margin-top:2px; font-size:13px; color:var(--l2); }

  /* Portrait-only guard. Visibility is driven by JS (updateRotateGuard) which sets inline display —
     the element ships inline display:none so a stale/missing stylesheet can't expose it. These rules
     only style it for when JS does show it (landscape on a phone-sized screen). */
  .rotateGuard{ position:fixed; inset:0; z-index:500; flex-direction:column;
    align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px;
    background:var(--bg); color:var(--ink); }
  .rotateGuard svg{ width:46px; height:46px; color:var(--accent); animation:rgturn 2.4s ease-in-out infinite; }
  .rotateGuard .rgmsg{ font-size:18px; font-weight:700; letter-spacing:-.3px; }
  .rotateGuard .rgsub{ font-size:14px; color:var(--l2); }
  @keyframes rgturn{ 0%,55%,100%{ transform:rotate(0deg); } 75%,90%{ transform:rotate(-90deg); } }