/* ===== block 1 of 10, moved verbatim from index.html ===== */
  :root{
    --blue:#ff6b6b;--blue-d:#e85555;--dark:#0B2545;--ink:#1a2230;--grey:#6b7685;--line:#e7ebf0;--bg:#f4f6f9;
    --card:#fff;--green:#22a565;--amber:#f0a53a;--pink:#e85d75;--violet:#7c5cff;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;height:100%;overflow-x:hidden}
  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);overscroll-behavior:none}
  /* app-like touch behaviour: snappy taps, no accidental text-selection, no sideways drift */
  a,button,[onclick]{touch-action:manipulation}
  body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  /* while the exercise demo sheet is open, the page background matches it so the iOS status-bar strip (home-screen app) blends in */
  html.dark-top,html.dark-top body{background:#3f5169}
  html.navy-top,html.navy-top body{background:#0B2545}   /* Today hero panel on screen (status-bar strip on the home-screen app) */
  input,textarea,select,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
  .app{max-width:480px;margin:0 auto;min-height:100%;background:var(--bg);position:relative;display:flex;flex-direction:column;box-shadow:0 0 40px rgba(11,37,69,.08)}
  header{background:rgba(244,246,249,.72);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);border-bottom:1px solid rgba(255,255,255,.45);padding:calc(env(safe-area-inset-top) + 14px) 18px 10px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}
  .brand{display:flex;align-items:center;gap:9px}
  .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--violet));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
  .brand b{font-size:15px;color:var(--dark)}.brand span{display:block;font-size:11px;color:var(--grey)}
  .logo img{width:100%;height:100%;object-fit:contain;border-radius:10px;display:block}
  .avatar{width:36px;height:36px;border-radius:50%;background:#ffd7c2;display:flex;align-items:center;justify-content:center;font-weight:700;color:#b25b34;font-size:13px;cursor:pointer}
  main{flex:1;overflow-y:auto;padding:4px 16px 140px;-webkit-overflow-scrolling:touch}
  .view{display:none}.view.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  h2.big{font-size:23px;margin:6px 0 2px;color:var(--dark)}
  .muted{color:var(--grey);font-size:13px}
  .sec-t{font-size:12px;font-weight:700;color:var(--grey);text-transform:uppercase;letter-spacing:.6px;margin:18px 2px 2px}
  .card{background:var(--card);border-radius:18px;padding:16px;margin:12px 0;box-shadow:0 2px 10px rgba(11,37,69,.05);border:1px solid #eef1f5}
  .banner{background:linear-gradient(120deg,var(--blue),var(--violet));color:#fff;border-radius:18px;padding:15px 16px;margin:12px 0;display:flex;align-items:center;gap:12px;cursor:pointer;box-shadow:0 8px 20px rgba(255,107,107,.30)}
  .banner .ic{font-size:22px}.banner b{font-size:14px}.banner p{margin:2px 0 0;font-size:12px;opacity:.9}.banner .go{margin-left:auto;font-size:20px}
  .assigned{background:#ffece9;border:1px dashed #ffc7c2;border-radius:12px;padding:8px 12px;font-size:11.5px;color:#b23b3b;margin:6px 0 0;font-weight:600}
  .card.assigned-top{border:1.5px solid #ffd0ca;background:linear-gradient(180deg,#fff6f4,#ffffff);box-shadow:0 6px 18px rgba(232,90,48,.14)}
  .card.assigned-top .tx b{color:var(--dark)}
  .rings{display:flex;justify-content:space-around;align-items:center;text-align:center}
  .ring{position:relative;width:76px;height:76px}.ring svg{transform:rotate(-90deg)}
  .ring .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .ring .val b{font-size:15px;color:var(--dark)}.ring .val s{font-size:9px;color:var(--grey);text-decoration:none}
  .rlabel{font-size:11px;color:var(--grey);margin-top:6px;font-weight:600}
  .row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
  .row:last-child{border-bottom:none}
  .row .ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
  .row .tx{flex:1;min-width:0}.row .tx b{font-size:14px;display:block}.row .tx span{font-size:12px;color:var(--grey)}
  .row .rt{font-size:13px;font-weight:700;color:var(--dark)}
  .del{color:#c3ccd8;font-size:18px;padding:4px 6px;cursor:pointer}
  .pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px}
  .pill.done{background:#e4f6ec;color:var(--green)}.pill.due{background:#fdeede;color:var(--amber)}
  /* programme → workout cards: bigger 📅 plan and Start buttons (owner: too small to tap) */
  .wo-sched{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:#eef2f8;display:flex;align-items:center;justify-content:center;font-size:21px;margin-right:8px;cursor:pointer}
  .pill.wo-start{flex:0 0 auto;font-size:14.5px;font-weight:800;padding:10px 16px;white-space:nowrap}
  .btn{display:block;width:100%;text-align:center;background:var(--blue);color:#fff;border:none;padding:13px;border-radius:14px;font-size:14px;font-weight:700;margin-top:10px;cursor:pointer}
  .btn:active{background:var(--blue-d)}.btn.sm{width:auto;margin:0;padding:9px 15px;font-size:13px}
  .btn.ghost{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.6);color:var(--blue)}
  /* tactile press feedback across all interactive surfaces */
  .btn,button,.pill,.fstab,.efmeal,.cal-nav,.sbtn,.fs-go,.stepper button,.fd-meals button{transition:transform .14s cubic-bezier(.22,1,.36,1),background .18s ease,box-shadow .18s ease,border-color .18s ease}
  .btn:active,button:active,.fstab:active,.efmeal:active,.cal-nav:active,.sbtn:active,.fs-go:active,.stepper button:active,.fd-meals button:active{transform:scale(.95)}
  .fscard,.off-item{transition:transform .14s cubic-bezier(.22,1,.36,1)}.fscard:active,.off-item:active{transform:scale(.98)}
  @media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
  .macro{margin:10px 0}.macro .lab{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px}
  .macro .lab b{color:var(--dark)}.macro .lab span{color:var(--grey)}
  .bar{height:8px;background:#eef1f5;border-radius:8px;overflow:hidden}.bar i{display:block;height:100%;border-radius:8px;transition:width .4s ease}
  .exh{display:flex;align-items:center;gap:12px;margin-bottom:8px}
  .exh .thumb{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,#dfe7f7,#eef1fb);display:flex;align-items:center;justify-content:center;font-size:22px}
  .exh .thumb{overflow:hidden;flex:0 0 auto}
  .exh .thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .exh b{font-size:15px}.exh span{font-size:12px;color:var(--grey)}
  .sets{display:flex;flex-direction:column;gap:7px;margin-top:6px}
  .set{display:flex;align-items:center;gap:10px;background:#f7f9fc;border-radius:11px;padding:9px 12px;cursor:pointer;transition:.15s}
  .set .n{font-size:12px;color:var(--grey);width:40px}.set .d{flex:1;font-size:13px;font-weight:600}
  .set .chk{width:24px;height:24px;border-radius:50%;border:2px solid #cdd6e2;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;transition:.15s}
  .set.done{background:#e9f7ef}.set.done .chk{background:var(--green);border-color:var(--green)}.set.done .d{color:var(--green)}
  .ssblock{position:relative;border:2px solid var(--violet);background:linear-gradient(180deg,#f3f0ff,#faf9ff);border-radius:18px;padding:14px 12px 10px;margin:18px 0;box-shadow:0 6px 20px rgba(124,92,255,.18)}
  .ssblock::before{content:"";position:absolute;left:14px;top:44px;bottom:16px;width:3px;border-radius:3px;background:var(--violet);opacity:.35}
  .sslab{display:inline-flex;align-items:center;gap:6px;background:var(--violet);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.7px;padding:5px 12px;border-radius:20px;margin:0 0 10px;box-shadow:0 3px 10px rgba(124,92,255,.35)}
  .sslab small{color:rgba(255,255,255,.9);font-weight:700;letter-spacing:0}
  .ssblock .exwrap{border:1px solid #e7e2fb}
  .exwrap{margin:8px 0}
  .glabel{font-size:11px;font-weight:800;color:var(--violet);background:#efeaff;border-radius:7px;padding:2px 6px;margin-right:6px}
  /* superset shown as rounds (ssRoundsHtml): Round 1 = set 1 of each exercise in turn, then Round 2… */
  .ssrounds::before{display:none}
  .ssorder{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:0 2px 8px;font-size:11.5px;color:#6c5bd4;font-weight:700}
  .ssorder .glabel{margin:0}
  .ssorder i{font-style:normal;opacity:.6}
  .ssorder-rest{background:#fff;border:1px solid #e0d9fb;border-radius:7px;padding:1px 6px;color:#6c5bd4}
  .ssround{background:rgba(255,255,255,.55);border:1px solid #e7e2fb;border-radius:14px;padding:8px 8px 6px;margin:8px 0;transition:border-color .2s,background .2s}
  .ssround.cur{background:#fff;border-color:var(--violet);box-shadow:0 4px 14px rgba(124,92,255,.14)}
  .ssround.done{background:#f1faf4;border-color:#cdebd8}
  .ssround-h{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 2px}
  .ssround-h b{font-size:13.5px;color:var(--dark)}
  .ssround-h b small{font-size:11.5px;color:var(--grey);font-weight:600}
  .ssround-h span{font-size:11.5px;font-weight:800;color:var(--green)}
  .ssround-h span.now{color:var(--violet)}
  .ssround .ssx.exwrap{margin:6px 0;padding:12px}
  .ssrounds .setr .n{width:auto;min-width:30px;font-weight:800;color:var(--violet)}
  .ssrest{font-size:12px;font-weight:700;color:#6c5bd4;text-align:center;padding:6px 0 2px}
  .meta{font-size:12px;color:var(--grey);margin-top:2px}
  .lastw{font-size:11px;color:var(--blue);font-weight:600;margin:6px 0 2px}
  .swap{display:flex;align-items:center;gap:8px;margin:8px 0 4px;font-size:12px;color:var(--grey)}
  .swap select{flex:1;border:1px solid var(--line);border-radius:9px;padding:7px;font-size:12.5px;background:#fff;color:var(--ink)}
  .setr{display:flex;align-items:center;gap:7px;background:#f7f9fc;border-radius:11px;padding:8px 9px;margin-top:7px}
  .setr .n{font-size:12px;color:var(--grey);width:30px;flex-shrink:0}
  .setr .fw{flex:1;min-width:0}
  .setr .fw label{font-size:9px;color:var(--grey);display:block;margin-bottom:1px}
  .setr input{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 4px;font-size:13px;background:#fff;text-align:center}
  .setr .chk{width:26px;height:26px;border-radius:50%;border:2px solid #cdd6e2;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;flex-shrink:0;cursor:pointer;transition:.15s}
  .setr.done{background:#e9f7ef}.setr.done .chk{background:var(--green);border-color:var(--green)}
  .setr .tgt{flex:1;font-size:13px;font-weight:600;text-align:center}
  .setr.timed .tmr-wrap{flex:1;display:flex;align-items:center;gap:9px;min-width:0}
  .tmr-tgt{font-size:12.5px;font-weight:600;color:#6b7480;margin-right:auto;white-space:nowrap}
  .tmr-disp{font-variant-numeric:tabular-nums;font-size:16px;font-weight:800;color:var(--dark);min-width:40px;text-align:right}
  .tmr-disp.tmr-done{color:var(--green);font-size:13px}
  .setr.running{background:#eaf4ff;box-shadow:inset 0 0 0 1.5px #bcdcff}
  .setr.running .tmr-disp{color:var(--blue)}
  .tmr-btn{background:var(--dark);color:#fff;border:none;border-radius:9px;padding:7px 13px;font-size:12.5px;font-weight:800;cursor:pointer;flex:0 0 auto}
  .tmr-btn:active{opacity:.85}
  .tmr-step{width:30px;height:30px;border-radius:9px;border:1.5px solid #d7deea;background:#fff;color:var(--dark);font-size:18px;font-weight:800;line-height:1;cursor:pointer;flex:0 0 auto}
  .tmr-step:active{background:#eef2f7}
  .tmr-cur{font-size:13.5px;font-weight:800;color:var(--dark);min-width:56px;text-align:center;white-space:nowrap}
  .setr.timed .tmr-wrap{flex-wrap:wrap}
  /* optional weight box on timed sets (weighted planks, carries, wall sits...) — compact so the timer row still fits on a phone */
  .setr.timed .tmr-w{flex:0 0 54px;min-width:0}
  .setr.timed .tmr-w label{text-align:center}
  .setr .prev{font-size:10px;color:var(--grey);width:52px;text-align:center;line-height:1.15}
  .woprog{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;background:var(--bg);padding:8px 0 12px}
  .woprog-bar{flex:1;height:12px;background:rgba(120,140,170,.15);border-radius:9px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(11,37,69,.14), inset 0 -1px 0 rgba(255,255,255,.5)}
  .woprog-bar i{position:relative;display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--violet));border-radius:9px;overflow:hidden;transition:width .45s cubic-bezier(.22,1,.36,1);box-shadow:0 1px 5px rgba(11,37,69,.22)}
  .woprog-bar i::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.12) 40%,rgba(255,255,255,0) 56%,rgba(0,0,0,.12))}
  .woprog-bar i::before{content:"";position:absolute;top:0;bottom:0;left:0;width:42%;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.42),rgba(255,255,255,0));transform:translateX(-130%);animation:rsheen 3.4s ease-in-out infinite}
  .woprog span{font-size:12px;font-weight:800;color:var(--dark);min-width:42px;text-align:right}
  .wodone{text-align:center;padding:26px 16px}
  .wodone-emoji{font-size:52px;line-height:1}
  .wodone b{display:block;font-size:21px;color:var(--dark);margin-top:8px}
  .wostats{display:flex;justify-content:center;gap:24px;margin:18px 0 14px}
  .wostats div{display:flex;flex-direction:column}
  .wo-animal{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff4f2;border:1px solid #ffd9d3;border-radius:18px;padding:18px 16px 16px;margin:0 auto 16px;max-width:340px}
  .wo-animal-e{font-size:72px;line-height:1;margin-bottom:8px}
  .wo-animal-lead{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
  .wo-animal b{display:block;font-size:26px;font-weight:800;color:var(--dark);margin-top:2px}
  .lifted{display:flex;align-items:center;gap:12px}
  .lifted-e{font-size:36px;line-height:1}
  .lifted-tx b{display:block;font-size:15px;color:var(--dark)}
  .lifted-tx span{font-size:12.5px;color:var(--grey)}
  .wostats b{font-size:24px;color:var(--blue)}
  .wostats span{font-size:11px;color:var(--grey);font-weight:600}
  .restbar{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 74px);left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:448px;background:var(--dark);color:#fff;border-radius:14px;padding:11px 16px;display:none;align-items:center;gap:10px;z-index:45;box-shadow:0 12px 30px rgba(11,37,69,.35)}
  .restbar.show{display:flex}
  .restbar .rt-ic{font-size:17px}
  .restbar b{font-size:19px;font-variant-numeric:tabular-nums;min-width:46px;letter-spacing:.5px}
  .restbar .lbl{font-size:13px;color:#aebbd0}
  .restbar .skip{margin-left:auto;color:#8fb6ff;font-weight:700;cursor:pointer;font-size:13px}
  /* rest just ended: the bar stays up in coral for a few seconds so a glance at the screen shows it's time to go */
  .restbar.done{background:linear-gradient(135deg,var(--blue),var(--blue-d));box-shadow:0 12px 30px rgba(232,85,85,.45);animation:restGo .5s cubic-bezier(.22,1,.36,1) 3}
  .restbar.done .lbl{color:#fff;font-weight:700}
  .restbar.done .skip{color:#fff}
  @keyframes restGo{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.04)}}
  .chart{height:140px;margin:6px 0 2px;width:100%}
  .measure{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
  .measure:last-child{border:none}.measure b{color:var(--dark)}
  .prog-head{font-size:13px;color:var(--ink);margin:0 0 10px}.prog-head b{font-weight:800}
  .range-chips{display:flex;gap:5px;flex-wrap:nowrap;margin:0 0 14px}
  .range-chip{flex:1;min-width:0;text-align:center;background:#f0f2f6;color:var(--grey);border-radius:10px;padding:9px 2px;font-size:12.5px;font-weight:800;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;transition:background .12s,color .12s}
  .range-chip.on{background:var(--ink,#1f2733);color:#fff;box-shadow:0 2px 8px rgba(11,37,69,.18)}
  #progToggle span{-webkit-tap-highlight-color:transparent;user-select:none}
  .meas-chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
  .meas-chip{background:#f0f2f6;color:var(--grey);border-radius:20px;padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer}
  .meas-chip small{opacity:.7;font-weight:600}
  .meas-chip.on{background:#7c5cff;color:#fff}
  .meas-chip.add{background:#fff;border:1px dashed #c4ccd6;color:#5b6674}
  .photos{display:flex;gap:8px}
  .photo{flex:1;aspect-ratio:3/4;border-radius:12px;background:linear-gradient(160deg,#e6ebf3,#d7deea);display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;font-size:10px;color:#8792a3;font-weight:600}
  .phentry{border-top:1px solid var(--line);padding:12px 0}
  .phentry:first-child{border-top:0;padding-top:0}
  .phentry .phhd{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
  .phentry .phhd b{font-size:14px}
  .phentry .phhd .del{color:#c0483f;font-size:12px;font-weight:700;cursor:pointer}
  .phthumb{position:relative;flex:1;min-width:0;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:linear-gradient(160deg,#e6ebf3,#d7deea);cursor:pointer}
  .phthumb img{width:100%;height:100%;object-fit:cover;display:block}
  .phthumb .lbl{position:absolute;left:6px;bottom:6px;font-size:10px;font-weight:700;color:#fff;background:rgba(11,37,69,.55);padding:2px 6px;border-radius:8px}
  #photoModal .fld{box-sizing:border-box;width:100%;min-width:0;max-width:100%;display:block}   /* iOS date field overflowed the card */
  #photoModal input[type=date].fld{-webkit-appearance:none;appearance:none;text-align:left}
  .phthumb.none{background:#eef1f5;border:1.5px dashed #d5dce6}
  .phthumb.none .lbl{background:transparent;color:#8a94a3}
  .pshead{display:flex;gap:10px;margin-bottom:10px}
  .pshead>div{flex:1;min-width:0}
  .pshead small{display:block;text-align:center;font-size:11px;color:var(--grey);margin-top:4px;font-weight:700}
  .pspick{display:flex;align-items:center;gap:6px}
  .pspick .harr{background:#eef2f8;color:var(--dark);width:28px;height:28px}
  .pspick select{flex:1;min-width:0;padding:7px 8px;font-size:12.5px;font-weight:700}
  .pscmp{display:flex;gap:10px;margin-top:10px}
  .pscmp .phthumb{flex:1}
  #photoSheet .dv-nav b.on{background:#fff;color:var(--dark)}
  .phslot{flex:1;aspect-ratio:3/4;border-radius:12px;border:2px dashed #c7d0dd;background:#f6f8fb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;font-size:12px;color:#8792a3;font-weight:600;overflow:hidden;position:relative}
  .phslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .phslot .big{font-size:20px}
  .phviewer{position:fixed;inset:0;z-index:10000;background:rgba(11,20,33,.93);display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px}
  .phviewer.open{display:flex}
  .phviewer img{max-width:94%;max-height:82%;border-radius:12px}
  .phviewer .x{position:absolute;top:14px;right:14px;color:#fff;font-size:34px;cursor:pointer;width:50px;height:50px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.16)}
  .tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 0 2px}.tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap;font-size:12px;font-weight:600;padding:8px 14px;border-radius:20px;background:#eef2f8;color:var(--grey);cursor:pointer}
  .tab.on{background:var(--dark);color:#fff}
  .post{background:#fff;border-radius:16px;padding:14px;margin:11px 0;border:1px solid #eef1f5}
  .post .ph{display:flex;align-items:center;gap:10px;margin-bottom:9px}
  .post .pa{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:13px}
  .post .ph b{font-size:13px;display:block}.post .ph span{font-size:11px;color:var(--grey)}
  .post .txt{font-size:13.5px;line-height:1.5}
  .post .act{display:flex;gap:18px;margin-top:11px;font-size:12px;color:var(--grey);font-weight:600}.post .act span{cursor:pointer}
  .ann{border:1px solid #ffe2b8;background:#fffaf1}
  .badge{font-size:10px;font-weight:700;color:var(--amber);background:#fdeede;padding:2px 7px;border-radius:6px;margin-left:auto}
  .lock{font-size:11px;color:var(--amber);margin-top:9px;font-weight:600}
  .q{margin:14px 0}.q label{font-size:13px;font-weight:600;display:block;margin-bottom:6px;color:var(--dark)}
  .q textarea,.q input,.fld{width:100%;border:1px solid var(--line);border-radius:12px;padding:11px;font-size:14px;font-family:inherit;resize:none;background:#fbfcfe;color:var(--ink)}
  .q textarea:focus,.q input:focus,.fld:focus{outline:none;border-color:var(--blue)}
  .scale{display:flex;gap:6px}
  .scale b{flex:1;text-align:center;padding:9px 0;border-radius:10px;background:#f1f4f9;font-size:13px;cursor:pointer;font-weight:600;color:var(--grey)}
  .scale b.sel{background:var(--blue);color:#fff}
  .scale.wrap{flex-wrap:wrap}.scale.wrap b{flex:0 0 auto;min-width:38px;padding:9px 8px}
  .frm{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.frm .fld{flex:1;min-width:0}
  .off-item{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);cursor:pointer}
  .off-item:active{background:#f7f9fc}
  .off-item .off-info{flex:1;min-width:0}.off-item .off-info b{font-size:13px;display:block}.off-item .off-info span{font-size:11px;color:var(--grey)}
  .off-thumb{width:42px;height:42px;border-radius:9px;object-fit:cover;background:#eef1f5;flex:0 0 auto}
  .foodimg{width:38px;height:38px;border-radius:11px;object-fit:cover;background:#eef1f5;flex-shrink:0}
  /* NutraCheck-style diary */
  .sumtab{width:100%;border-collapse:collapse}
  .sumtab td{padding:5px 2px;font-size:15px}
  .sumtab .lab{font-weight:800}
  .sumtab .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
  .sumtab .hd td{font-size:11px;color:var(--grey);font-weight:700;border-bottom:1px solid var(--line);padding-bottom:6px}
  .diaryhd{display:flex;padding:2px 14px 4px;font-size:10px;color:var(--grey);font-weight:700;letter-spacing:.4px}
  .diaryhd .h1{flex:1}.diaryhd .h2,.diaryhd .h3{width:58px;text-align:right}
  .mealsec{background:#fff;border:1px solid #eef1f5;border-radius:14px;margin:10px 0;overflow:hidden;box-shadow:0 2px 10px rgba(11,37,69,.04)}
  .mealsec .mh{display:flex;align-items:center;gap:9px;padding:11px 14px;background:#f7f9fc;cursor:pointer}
  .mealsec .mh .plus{width:22px;height:22px;border-radius:50%;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;line-height:1;flex-shrink:0}
  .mealsec .mh .mname{font-weight:800;font-size:12.5px;letter-spacing:.5px;flex:1}
  .mealsec .mh .mk,.mealsec .mh .mp{font-size:14.5px;font-weight:800;color:var(--dark);width:58px;text-align:right;font-variant-numeric:tabular-nums}
  .msave{padding:6px 12px 12px}
  .msave button{width:100%;background:#fff1ee;color:#e85555;border:1.5px solid #ffd4cc;border-radius:12px;padding:11px;font-size:13.5px;font-weight:800;cursor:pointer}
  .msave button:active{background:#ffe4de}
  .mb-grp{font-size:11px;font-weight:800;letter-spacing:.6px;color:#8a94a3;margin:14px 0 4px;text-transform:uppercase}
  .fitem{display:flex;align-items:center;gap:10px;padding:9px 14px;border-top:1px solid var(--line)}
  .fitem img,.fitem .fic{width:34px;height:34px;border-radius:8px;object-fit:cover;background:#eef1f5;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:16px}
  .fitem .fn{flex:1;min-width:0}.fitem .fn b{font-size:14.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dark)}.fitem .fn span{font-size:11.5px;color:var(--grey)}
  .fitem .fk,.fitem .fp{width:58px;text-align:right;font-size:14.5px;font-weight:700;color:var(--dark);font-variant-numeric:tabular-nums}
  .fitem .fdel{color:#cbd2dc;font-size:16px;padding-left:2px;cursor:pointer}
  /* food detail full screen */
  .fooddetail{position:fixed;inset:0;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);z-index:9998;display:none;flex-direction:column;max-width:480px;margin:0 auto}
  .fooddetail.open{display:flex}
  /* correction / report / weekly / coach-note pop-ups open ON TOP of the food detail, so they need a higher stack level */
  #fixFood.open,#flagFood.open,#weeklyModal.open,#coachNoteModal.open,#editFood.open,#mealBuilder.open{z-index:10000}
  @keyframes sheetUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
  .fooddetail.open,.foodsearch.open,.videomodal.open,.scanner.open{animation:sheetUp .30s cubic-bezier(.22,1,.36,1)}
  .fd-top{display:flex;justify-content:flex-end;padding:calc(env(safe-area-inset-top) + 10px) 18px 4px}
  .fd-x{width:46px;height:46px;display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--dark);cursor:pointer;line-height:1;border-radius:50%;background:rgba(120,140,170,.14);flex:0 0 auto}
  .fd-scroll{flex:1;overflow-y:auto;padding:4px 18px calc(env(safe-area-inset-bottom) + 30px)}
  .fd-img{display:block;width:112px;height:112px;object-fit:cover;border-radius:18px;margin:0 auto 12px;background:#eef1f5}
  .fd-name{text-align:center;font-size:19px;font-weight:800;color:var(--dark);line-height:1.25;margin-bottom:4px}
  .fd-sec{font-size:11px;font-weight:800;color:var(--grey);letter-spacing:.6px;margin:18px 0 8px;text-transform:uppercase}
  .serv{display:flex;align-items:center;gap:10px;background:#f7f9fc;border-radius:12px;padding:12px 14px;margin-bottom:8px;cursor:pointer;border:2px solid transparent}
  .serv.on{border-color:var(--blue);background:#fff}
  .serv .sn{flex:1;font-size:14px;font-weight:600;color:var(--dark)}
  .serv .sk,.serv .sp{width:52px;text-align:right;font-size:13px;font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums}
  .serv .rad{width:22px;height:22px;border-radius:50%;border:2px solid #cdd6e2;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px}
  .serv.on .rad{background:var(--blue);border-color:var(--blue)}
  /* compact glass amount + unit selector */
  .fd-unitrow{display:flex;gap:9px;align-items:center;margin:2px 0 4px}
  .fd-amount{flex:0 0 104px;width:104px;padding:12px;font-size:16px;font-weight:700;color:var(--dark);border-radius:13px;border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.6);transition:border-color .2s,box-shadow .2s}
  .fd-amount:focus{border-color:#ff6b6b;box-shadow:0 0 0 4px rgba(255,107,107,.15)}
  .fd-unitsel{flex:1;padding:12px 40px 12px 14px;font-size:15px;font-weight:700;color:var(--dark);border-radius:13px;border:1px solid rgba(255,255,255,.65);cursor:pointer;outline:none;
    background:rgba(255,255,255,.72) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238792a3' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat right 14px center;
    -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
    box-shadow:0 6px 18px rgba(11,37,69,.08), inset 0 1px 0 rgba(255,255,255,.6);appearance:none;-webkit-appearance:none;transition:border-color .2s,box-shadow .2s}
  .fd-unitsel:focus{border-color:#ff6b6b;box-shadow:0 0 0 4px rgba(255,107,107,.15)}
  .fd-qty{display:flex;align-items:center;justify-content:space-between;margin-top:6px;font-size:14px;font-weight:800;color:var(--dark)}
  .stepper{display:flex;align-items:center;gap:16px}
  .stepper button{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:#f1f4f9;font-size:22px;font-weight:700;color:var(--blue);cursor:pointer;line-height:1}
  .stepper b{font-size:17px;min-width:26px;text-align:center}
  .fd-total{text-align:center;font-size:16px;font-weight:800;color:var(--dark);margin:14px 0 2px}
  .fd-meals{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}
  .fd-meals button{background:#f7f9fc;border:1px solid var(--line);border-radius:13px;padding:11px 4px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--dark)}
  .fd-meals button .mi{font-size:22px}.fd-meals button .pl{color:var(--blue);font-weight:800;font-size:14px}
  .fd-meals button.fd-add-one{grid-column:1/-1;flex-direction:row;justify-content:center;gap:10px;padding:16px 12px;font-size:16px;color:#fff;background:linear-gradient(135deg,#ff7a6b,#e85555);border-color:transparent;box-shadow:0 8px 20px rgba(232,85,85,.30)}
  .fd-meals button.fd-add-one .mi{font-size:22px}
  .prep{display:flex;flex-wrap:wrap;gap:8px}
  .prep b{font-size:13px;font-weight:700;padding:9px 13px;border-radius:11px;background:#f1f4f9;color:var(--grey);cursor:pointer;border:2px solid transparent}
  .prep b.on{background:#fff;border-color:var(--blue);color:var(--blue)}
  .cfbadge{font-size:9px;font-weight:800;color:#1aa39a;background:#e3f6f3;padding:2px 6px;border-radius:6px;letter-spacing:.4px;vertical-align:1px}
  .reslabel{font-size:10px;font-weight:800;color:var(--grey);letter-spacing:.5px;text-transform:uppercase;margin:12px 2px 2px}
  /* range targets */
  .rtitle{display:flex;justify-content:space-between;align-items:baseline}
  .rtitle b{font-size:14px;color:var(--dark)}.rtitle .rv{font-size:15px;font-weight:800;color:var(--dark)}
  /* liquid-glass progress bars */
  .rbar{position:relative;height:14px;background:rgba(120,140,170,.15);border-radius:9px;margin:8px 0 2px;
    box-shadow:inset 0 1px 2px rgba(11,37,69,.14), inset 0 -1px 0 rgba(255,255,255,.55)}
  .rfill{position:relative;height:100%;border-radius:9px;overflow:hidden;transition:width .55s cubic-bezier(.22,1,.36,1);
    box-shadow:0 1px 5px rgba(11,37,69,.22)}
  .rfill::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.15) 40%,rgba(255,255,255,0) 56%,rgba(0,0,0,.12))}
  .rfill::before{content:"";position:absolute;top:0;bottom:0;left:0;width:42%;border-radius:inherit;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.42),rgba(255,255,255,0));
    transform:translateX(-130%);animation:rsheen 3.4s ease-in-out infinite}
  @keyframes rsheen{0%{transform:translateX(-130%)}55%,100%{transform:translateX(300%)}}
  .rmk{position:absolute;top:-2px;height:18px;width:2px;border-radius:2px;z-index:2;box-shadow:0 0 3px rgba(255,255,255,.6)}
  .rmk.opt{background:#22a565}.rmk.non{background:#0B2545;opacity:.6}
  .rstat{display:flex;justify-content:space-between;align-items:center;margin-top:5px;font-size:11px}
  .rstat b{font-weight:800}.rstat .rr{color:var(--grey)}
  .wkavg{font-size:11px;color:var(--grey);margin:-2px 0 12px}
  /* winning-zone target (non-negotiable → optimal reads as a win, never a fail) */
  .wzrow{margin:12px 0 6px}
  .wzhd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
  .wzname{font-size:15px;font-weight:800;color:#0B2545}
  .wzchip{display:inline-flex;align-items:center;font-size:12px;font-weight:800;padding:4px 11px;border-radius:20px;white-space:nowrap;line-height:1.2}
  .wzchip.win{background:#E4F6EC;color:#0F6E56}
  .wzchip.below{background:#FBF1DE;color:#8a5a12}
  .wzchip.over{background:#FBE7CE;color:#9a5512}
  .wzval{font-size:26px;font-weight:800;color:#0B2545;line-height:1;margin-bottom:12px}
  .wzval span{font-size:13px;font-weight:600;color:var(--grey)}
  .wzbar{position:relative}
  .wztrack{position:relative;height:16px;border-radius:9px;background:#eef1f5;overflow:hidden;box-shadow:inset 0 1px 2px rgba(11,37,69,.10)}
  .wz-band{position:absolute;top:0;bottom:0}
  .wzdot{position:absolute;top:8px;width:15px;height:15px;border-radius:50%;background:#ff6b6b;border:3px solid #fff;box-sizing:border-box;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(11,37,69,.14);transition:left .55s cubic-bezier(.22,1,.36,1)}
  .wzleg{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font-size:11px;color:#5F6B7A;font-weight:700}
  .wzleg .wz-lg{display:inline-flex;align-items:center;gap:5px}
  .wzleg .wz-lg i{width:10px;height:10px;border-radius:3px;display:inline-block;flex:0 0 auto}
  .tgtoggle{display:inline-flex;background:#eef2f8;border-radius:20px;padding:3px;margin:0 0 12px;font-size:12px;font-weight:700}
  .tgtoggle span{padding:5px 13px;border-radius:16px;color:var(--grey);cursor:pointer;transition:background .18s,color .18s}
  .tgtoggle span.on{background:#fff;color:var(--blue);box-shadow:0 1px 3px rgba(11,37,69,.12)}
  /* check-in auto averages */
  .ci-auto{background:#f4f9f5;border:1px solid #d7ebdd;border-radius:14px;padding:12px;margin:2px 0 14px}
  .ci-auto-title{font-size:13px;font-weight:800;color:#16794a;margin-bottom:10px}
  .ci-auto-title span{display:block;font-size:11px;font-weight:600;color:#5b7a67;margin-top:2px}
  .ci-auto-card{background:#fff;border:1px solid #e3eee6;border-radius:11px;padding:10px 11px;margin-bottom:8px}
  .ci-auto-card:last-child{margin-bottom:0}
  .ci-auto-hd{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;gap:8px}
  .ci-auto-hd b{font-size:13.5px;color:var(--dark)}
  .ci-auto-hd span{font-size:10.5px;color:#8a94a3;text-align:right}
  .ci-auto-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ci-auto-row label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:#5b7a67}
  .ci-auto-row input{padding:9px;font-size:15px;font-weight:700;color:var(--dark)}
  /* nutrition header + track-mode toggle */
  .nut-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .nut-toggle{display:flex;background:#eef1f5;border-radius:20px;padding:3px;gap:2px}
  .nut-toggle b{font-size:12px;font-weight:700;color:#6b7480;padding:6px 12px;border-radius:18px;cursor:pointer;white-space:nowrap}
  .nut-toggle b.on{background:#fff;color:var(--dark);box-shadow:0 1px 3px rgba(11,37,69,.14)}
  /* floating glass + to log other activities */
  .actfab{position:fixed;right:18px;bottom:calc(90px + env(safe-area-inset-bottom));z-index:45;width:58px;height:58px;border-radius:50%;
    border:1px solid rgba(255,255,255,.55);background:linear-gradient(135deg,rgba(255,107,107,.94),rgba(232,85,85,.94));
    -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
    color:#fff;font-size:32px;font-weight:300;line-height:1;display:none;align-items:center;justify-content:center;
    box-shadow:0 12px 30px rgba(232,90,48,.42), inset 0 1px 0 rgba(255,255,255,.4);cursor:pointer}
  .actfab:active{transform:scale(.93)}
  .actgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 2px}
  .actchip{display:flex;align-items:center;gap:8px;border:1.5px solid #e2e7ee;border-radius:12px;padding:11px 12px;background:#fff;font-size:13.5px;font-weight:700;color:var(--dark);cursor:pointer;text-align:left}
  .actchip .ae{font-size:18px;flex:0 0 auto}
  .actchip.on{border-color:var(--blue);background:#eef5ff;box-shadow:0 0 0 2px rgba(55,138,221,.15)}
  /* AI photo meal */
  .photo-snap{background:linear-gradient(135deg,#7c5cff,#5b53d6);border:none;font-size:13.5px}
  .pai-items{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:2px}
  .pai-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--dark)}
  .pai-item:last-child{border-bottom:none}
  .pai-item small{color:var(--grey);font-size:11.5px;white-space:nowrap}
  .pai-totals{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
  .pai-totals .totlbl{margin:0}
  /* totals-from-another-app modal */
  .totcard{max-width:360px;max-height:88vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
  .totx{background:#e7ebf1;border:none;width:46px;height:46px;border-radius:50%;font-size:22px;color:#4a5460;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0}
  .totx:active{background:#d3d9e1}
  .totseg{display:flex;background:#eef1f5;border-radius:13px;padding:4px;gap:4px;margin-bottom:4px}
  .totseg b{flex:1;text-align:center;font-size:14px;font-weight:700;color:#6b7480;padding:11px 6px;border-radius:10px;cursor:pointer}
  .totseg b.on{background:#fff;color:var(--dark);box-shadow:0 1px 4px rgba(11,37,69,.14)}
  .totfields{display:flex;flex-direction:column}
  .totlbl{display:block;font-size:12.5px;font-weight:800;color:#7a8494;margin:14px 0 6px}
  .totlbl span{font-weight:600;color:#a7b0bd}
  .totinput{display:block;width:100%;max-width:100%;min-width:0;box-sizing:border-box;-webkit-appearance:none;appearance:none;border:1.5px solid #e2e7ee;border-radius:12px;padding:14px;font-size:16px;color:var(--dark);background:#fff;outline:none;font-family:inherit}
  .totinput::-webkit-date-and-time-value{text-align:left;margin:0}
  .totinput:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(55,138,221,.12)}
  .tothint{font-size:12px;color:#8a94a3;margin:14px 0 0;line-height:1.45}
  .totsave{width:100%;margin-top:10px;padding:15px;font-size:16px;border-radius:13px}
  .totsave.warn{background:#c9302c;box-shadow:none}   /* check-in submit asking for a second tap (unanswered questions) */
  .totcancel{width:100%;margin-top:8px;background:none;border:none;color:#6b7480;font-size:16px;font-weight:700;padding:13px;cursor:pointer}
  .manual-tot .mtot{display:flex;align-items:center;gap:11px;padding:12px 14px;background:#eef5ff;border:1px solid #d5e4fb;border-radius:12px;cursor:pointer}
  .manual-tot .mtot-ic{font-size:20px}
  .manual-tot .mtot-tx{flex:1;min-width:0}
  .manual-tot .mtot-tx b{display:block;font-size:13.5px;color:var(--dark)}
  .manual-tot .mtot-tx span{font-size:11.5px;color:#5b6b82}
  .manual-tot .fdel{color:#9fb4d4;font-size:20px;cursor:pointer;padding:0 3px}
  /* prominent check-in banner */
  /* Check-in banner — the app's own palette says WHO needs to act:
     white = nothing to do · coral = you · navy = your coach has done something */
  .cibanner{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;margin:2px 0 14px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#ff6b6b,#f0575f);box-shadow:0 10px 26px rgba(255,107,107,.32)}
  .cibanner.over{background:linear-gradient(135deg,#0B2545,#3b2a5a);box-shadow:0 10px 26px rgba(11,37,69,.35);outline:2px solid var(--blue);outline-offset:-2px;animation:cipulse 1.7s ease-in-out infinite}
  .cibanner.done,.cibanner.next{background:#fff;color:var(--dark);border:1px solid #e3e8f0;box-shadow:0 6px 18px rgba(11,37,69,.06);cursor:default}
  .cibanner.reply{background:linear-gradient(135deg,#123262,#0B2545);box-shadow:0 10px 26px rgba(11,37,69,.35);animation:cipulse-green 1.7s ease-in-out infinite;cursor:pointer}
  .cibanner .ci-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto;background:rgba(255,255,255,.2)}
  .cibanner.next .ci-ic{background:#eef1fb}
  .cibanner.done .ci-ic{background:#e7f6ee}
  .cibanner.over .ci-ic{background:var(--blue)}
  .cibanner.reply .ci-ic{background:rgba(255,255,255,.14)}
  .cibanner .ci-tx{flex:1;display:flex;flex-direction:column;line-height:1.25;min-width:0}
  .cibanner .ci-tx b{font-size:15px}
  .cibanner .ci-tx span{font-size:12px;opacity:.9}
  .cibanner.done .ci-tx span,.cibanner.next .ci-tx span{color:var(--grey);opacity:1}
  .cibanner .ci-go{flex:0 0 auto;font-size:11.5px;font-weight:800;padding:7px 12px;border-radius:999px;background:#fff;color:#c0392b;white-space:nowrap}
  .cibanner.over .ci-go,.cibanner.reply .ci-go{background:var(--blue);color:#fff}
  .cibanner.done .ci-go{background:#e7f6ee;color:var(--green)}
  /* coach chat */
  .chatbtn{position:relative;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;box-shadow:0 4px 12px rgba(11,37,69,.1)}
  .chatbadge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#e5484d;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center}
  .chatview{position:fixed;inset:0;z-index:9996;display:none;flex-direction:column;max-width:480px;margin:0 auto;
    background:linear-gradient(180deg,rgba(255,240,237,.94),rgba(244,246,249,.94));
    -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%)}
  .chatview.open{display:flex;animation:sheetUp .3s cubic-bezier(.22,1,.36,1)}
  .chat-top{display:flex;align-items:center;gap:11px;margin:calc(env(safe-area-inset-top) + 8px) 10px 2px;padding:9px 13px;border-radius:22px;
    background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
    border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 28px rgba(11,37,69,.16)}
  .chat-x{width:46px;height:46px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;color:#e85555;cursor:pointer;
    background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.65);box-shadow:0 3px 10px rgba(11,37,69,.1);transition:transform .12s}
  .chat-x:active{transform:scale(.9)}
  .chat-brand{display:flex;align-items:center;gap:11px;min-width:0}
  .chat-brand img{width:38px;height:38px;border-radius:12px;object-fit:cover;box-shadow:0 5px 14px rgba(232,85,85,.32)}
  .chat-brand b{display:block;font-size:15px;color:var(--dark);line-height:1.15;letter-spacing:-.2px}
  .chat-brand span{display:block;font-size:11px;color:var(--grey);font-weight:600}
  .chat-body{flex:1;overflow-y:auto;padding:12px 14px 12px;display:flex;flex-direction:column;gap:8px}
  .chat-day{align-self:center;margin:10px 0 4px}
  .chat-day span{font-size:11px;font-weight:700;color:#6b7685;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.5);padding:4px 13px;border-radius:20px}
  .msg{display:flex;flex-direction:column;max-width:82%;position:relative}
  .msg.justnew{animation:msgIn .22s ease}
  @keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .msg.me{align-self:flex-end;align-items:flex-end}.msg.them{align-self:flex-start;align-items:flex-start}
  .msg .bub{padding:10px 14px;border-radius:20px;font-size:14px;line-height:1.42;word-break:break-word}
  .msg .bub .mbody{white-space:pre-wrap}   /* show the coach's line breaks / paragraphs */
  .msg.me .bub{background:linear-gradient(135deg,#ff7a6b,#e85555);color:#fff;border-bottom-right-radius:6px;box-shadow:0 6px 16px rgba(232,85,85,.28)}
  .msg.them .bub{background:rgba(255,255,255,.85);color:var(--ink);border:1px solid rgba(255,255,255,.7);border-bottom-left-radius:6px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 5px 16px rgba(11,37,69,.09)}
  .msg .mt{font-size:10px;color:#9aa5b3;margin:3px 7px 0;font-weight:600}
  /* chat reactions */
  .msg .bub{position:relative}
  .msg .rxn{position:absolute;bottom:-11px;font-size:15px;background:#fff;border:1px solid #e6ebf2;border-radius:12px;padding:0 5px;line-height:20px;height:22px;box-shadow:0 3px 8px rgba(11,37,69,.14)}
  .msg.them .rxn{left:8px}.msg.me .rxn{right:8px}      /* chip on the opposite side to the react button */
  .msg.hasrxn{margin-bottom:12px}
  .rxn-btn{position:absolute;right:-6px;bottom:4px;width:26px;height:26px;border-radius:50%;border:1px solid #e6ebf2;background:#fff;cursor:pointer;font-size:13px;line-height:1;padding:0;opacity:.9;box-shadow:0 3px 8px rgba(11,37,69,.14)}
  .rxn-btn:active{transform:scale(.92)}
  .reactpop{position:fixed;z-index:9999;display:none;gap:2px;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid #e6ebf2;border-radius:24px;padding:5px 8px;box-shadow:0 12px 32px rgba(11,37,69,.24)}
  .reactpop button{background:none;border:none;cursor:pointer;font-size:24px;padding:3px 4px;border-radius:50%;line-height:1;transition:transform .1s}
  .reactpop button:active{transform:scale(1.25)}
  .msg .ci-quote{background:rgba(124,92,255,.09);border-left:3px solid #7c5cff;border-radius:10px;padding:8px 10px;margin-bottom:8px;font-size:12px;color:#4a5361;line-height:1.45}
  .msg.me .ci-quote{background:rgba(255,255,255,.2);border-left-color:rgba(255,255,255,.75);color:#fff}
  .msg .ci-quote .qh{font-weight:800;font-size:11px;margin-bottom:7px}
  .msg .ci-quote{margin-bottom:10px;font-size:12.5px}
  .msg .ci-quote .qa{margin:0 0 9px}
  .msg .ci-quote .qa:last-child{margin-bottom:0}
  .msg .ci-quote .qq{font-weight:800;margin-bottom:1px}
  .msg .ci-quote .qav{white-space:pre-wrap}
  .msg .ci-replylead{font-size:11px;font-weight:800;color:#7c5cff;letter-spacing:.02em;margin:0 0 5px}
  .msg.me .ci-replylead{color:rgba(255,255,255,.92)}
  .chat-empty{text-align:center;color:var(--grey);font-size:14px;padding:52px 26px;line-height:1.6}
  .chat-empty-ic{font-size:42px;margin-bottom:10px}
  .chat-compose{display:flex;gap:9px;align-items:flex-end;margin:2px 10px calc(env(safe-area-inset-bottom) + 10px);padding:7px;border-radius:28px;
    background:rgba(255,255,255,.64);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
    border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 26px rgba(11,37,69,.14)}
  .chat-compose input,.chat-compose textarea{flex:1;padding:11px 17px;border:none;border-radius:22px;font-size:15px;outline:none;background:rgba(255,255,255,.86);color:var(--ink)}
  .chat-compose textarea{resize:none;line-height:1.35;max-height:120px;overflow-y:auto;font-family:inherit;height:auto}
  .chat-send{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#ff7a6b,#e85555);box-shadow:0 6px 16px rgba(232,85,85,.42);transition:transform .12s}
  .chat-send:active{transform:scale(.9)}
  .chat-send svg{width:20px;height:20px;fill:#fff;margin-left:1px}
  @keyframes cipulse{0%,100%{box-shadow:0 10px 26px rgba(255,107,107,.35)}50%{box-shadow:0 12px 36px rgba(255,107,107,.65)}}
  @keyframes cipulse-green{0%,100%{box-shadow:0 10px 26px rgba(11,37,69,.35)}50%{box-shadow:0 12px 36px rgba(11,37,69,.6)}}
  .msg.ci-reply .bub{transition:box-shadow .3s,transform .3s}
  .msg.ci-reply-flash .bub{box-shadow:0 0 0 3px rgba(34,165,101,.55);transform:scale(1.015)}
  .rrow{margin:10px 0 4px}
  .off-sel{background:#ffece9;border:1px solid #ffd4cf;border-radius:12px;padding:11px 12px;margin:8px 0}
  .off-sel b{font-size:14px;color:var(--dark)}
  .off-loading{display:flex;align-items:center;gap:10px;padding:12px 6px;color:var(--grey);font-size:13px}
  .spin{width:18px;height:18px;border:3px solid #e7ebf0;border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;flex:0 0 auto;will-change:transform;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
  @keyframes spin{from{transform:translateZ(0) rotate(0)}to{transform:translateZ(0) rotate(360deg)}}
  .mealseg{display:flex;gap:6px;margin-bottom:10px}
  .mealseg b{flex:1;text-align:center;padding:8px 4px;border-radius:9px;background:#f1f4f9;font-size:11.5px;font-weight:600;color:var(--grey);cursor:pointer}
  .mealseg b.on{background:var(--blue);color:#fff}
  .mealgrp{margin-bottom:8px}
  .mealhd{display:flex;justify-content:space-between;align-items:center;padding:9px 0 4px}
  .mealhd b{font-size:13px;color:var(--dark)}.mealhd span{font-size:12px;color:var(--grey);font-weight:600}
  .scanbtn{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--dark);color:#fff;border:none;border-radius:11px;padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;flex:0 0 auto}
  .fs-scan{display:flex;align-items:center;gap:6px;background:var(--dark);color:#fff;border:none;border-radius:9px;padding:6px 11px;font-size:12.5px;font-weight:700;cursor:pointer;flex:0 0 auto}
  .fs-scan:active{opacity:.85}
  .scanner{position:fixed;inset:0;background:rgba(6,14,28,.66);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:10001;padding:20px}
  .scanner.open{display:flex}
  .scanner video{width:100%;max-width:420px;border-radius:16px;background:#000;aspect-ratio:4/3;object-fit:cover}
  .scanner .frame{position:relative;width:100%;max-width:420px}
  .scanner .frame::after{content:"";position:absolute;left:8%;right:8%;top:50%;height:2px;background:#ff6b6b;box-shadow:0 0 12px #ff6b6b}
  .scanner p{color:#fff;margin:16px 0 12px;font-size:14px}
  .scanner .sbtn{background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;border:1px solid rgba(255,255,255,.35);padding:12px 26px;border-radius:14px;font-weight:700;cursor:pointer}
  /* floating "liquid glass" bottom nav */
  /* fade content into the background behind the floating nav so nothing shows crisply below it */
  .navscrim{position:fixed;left:0;right:0;bottom:0;height:calc(env(safe-area-inset-bottom) + 86px);z-index:28;pointer-events:none;
    background:linear-gradient(to top, var(--bg) 34%, rgba(244,246,249,0))}
  nav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 12px);
    width:calc(100% - 28px);max-width:452px;display:flex;justify-content:space-around;gap:4px;padding:7px 8px;
    background:rgba(255,255,255,.60);
    -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
    border:1px solid rgba(255,255,255,.55);border-radius:26px;
    box-shadow:0 10px 34px rgba(11,37,69,.20), inset 0 1px 0 rgba(255,255,255,.7);z-index:30}
  nav::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 55%)}
  nav a{position:relative;z-index:1;flex:1;text-align:center;color:var(--grey);text-decoration:none;font-size:10px;font-weight:600;cursor:pointer;padding:7px 0 6px;border-radius:18px;transition:background .18s,color .18s}
  nav a .i{font-size:20px;display:block;margin-bottom:2px;filter:grayscale(1);opacity:.55;transition:.18s}
  nav a.on{color:var(--blue)}nav a.on .i{filter:none;opacity:1}
  .navpill{position:absolute;top:6px;bottom:6px;left:0;width:0;z-index:1;border-radius:18px;pointer-events:none;
    background:rgba(255,107,107,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
    transition:transform .34s cubic-bezier(.22,1,.36,1),width .34s cubic-bezier(.22,1,.36,1)}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ nav{background:rgba(255,255,255,.94)} header{background:rgba(244,246,249,.96)} .foodsearch{background:#f4f6f9} .fooddetail{background:#fff} }
  /* Native app: while the keyboard is open, hide the floating tab bar / rest bar so they don't sit on top of the keys */
  body.kb-open nav,body.kb-open .navscrim,body.kb-open .restbar{opacity:0 !important;pointer-events:none !important;transition:opacity .12s}
  /* Keyboard slides OVER the app (resize:none). Only the chat compose is bottom-anchored, so lift it above the keyboard. */
  .chatview{transition:padding-bottom .25s cubic-bezier(.22,1,.36,1)}
  body.kb-open .chatview{padding-bottom:var(--kb,0px)}
  /* ---- Community ---- */
  /* pull-to-refresh indicator (community) */
  #ptr{position:fixed;top:calc(env(safe-area-inset-top) + 58px);left:50%;transform:translateX(-50%) translateY(0);z-index:30;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 5px 16px rgba(11,37,69,.16);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none}
  #ptr .ptr-spin{width:22px;height:22px;border-radius:50%;border:3px solid #e7ebf0;border-top-color:#ff6b6b;will-change:transform;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
  #ptr.spin .ptr-spin{animation:spin .7s linear infinite}
  /* community-first: put Community first in the bottom nav (reversible, remove body.commfirst to restore) */
  body.commfirst nav a{order:5}
  body.commfirst #n-community{order:1}
  body.commfirst #n-today{order:2}
  body.commfirst #n-nutrition{order:3}
  body.commfirst #n-workouts{order:4}
  body.commfirst #n-progress{order:5}
  /* "your day" strip on the community screen */
  .yourday{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;-webkit-overflow-scrolling:touch}
  .yourday::-webkit-scrollbar{display:none}
  .yd-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;background:#eef2f8;color:#3b4655;border:1px solid var(--line);border-radius:20px;padding:8px 13px;font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap}
  .yd-chip:active{transform:scale(.96)}
  .yd-chip.due{background:#fff1ee;color:#e85555;border-color:#ffd4cc}
  .comm-tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:2px 2px 12px}
  .comm-tabs4{gap:6px;justify-content:space-between;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:smooth;margin:2px 0 16px}
  .comm-tabs4::-webkit-scrollbar{display:none}
  .comm-tabs4 b{font-size:15px;white-space:nowrap;flex:0 0 auto;padding:13px 6px}
  .comm-tabs b{font-size:15px;font-weight:800;color:var(--grey);padding:11px 4px;cursor:pointer;position:relative;border-bottom:2.5px solid transparent;margin-bottom:-1px;letter-spacing:-.1px}
  .comm-tabs b.on{color:var(--dark);border-bottom-color:#ff6b6b}
  /* ---- Learn academy ---- */
  .learn-prog{height:5px;border-radius:5px;background:rgba(11,37,69,.09);overflow:hidden}
  .learn-prog i{display:block;height:5px;border-radius:5px;background:linear-gradient(90deg,#ff7a6b,#e85555)}
  .learn-tick{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:#22a565;color:#fff;font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.25)}
  /* course grid (Learn home) */
  .learn-courses{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:2px}
  .learn-cc{cursor:pointer;background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.7);border-radius:16px;overflow:hidden;box-shadow:0 6px 18px rgba(11,37,69,.09);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column}
  .learn-cc-cover{position:relative;width:100%;aspect-ratio:16/10;background:#e9eef5}
  .learn-cc-cover img{width:100%;height:100%;object-fit:cover}
  .learn-cc-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:42px;background:linear-gradient(135deg,#fff2ef,#ffe4de)}
  .learn-cc-b{padding:10px 12px 12px;flex:1 1 auto;display:flex;flex-direction:column}
  .learn-cc-b>b{font-size:15px;font-weight:800;color:var(--dark);line-height:1.28;display:block}
  .learn-cc-sub{display:block;font-size:12px;color:var(--grey);margin-top:2px;line-height:1.35}
  .learn-cc-meta{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:#8a94a3;margin:8px 0 6px;margin-top:auto}
  /* lessons list (inside a course) */
  .learn-csub{font-size:13.5px;color:var(--grey);margin:0 2px 6px;line-height:1.5}
  .learn-cmeta{font-size:12px;font-weight:700;color:#8a94a3;margin:0 2px 8px}
  .learn-llist{display:flex;flex-direction:column;gap:10px}
  .learn-lr{display:flex;align-items:center;gap:12px;cursor:pointer;background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.7);border-radius:14px;padding:9px;box-shadow:0 4px 12px rgba(11,37,69,.07);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .learn-lr.done{background:rgba(231,246,238,.72)}
  .learn-lr-th{position:relative;flex:0 0 auto;width:74px;height:52px;border-radius:10px;overflow:hidden;background:#e9eef5}
  .learn-lr-th img{width:100%;height:100%;object-fit:cover}
  .learn-lr-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:22px;background:linear-gradient(135deg,#fff2ef,#ffe4de)}
  .learn-lr-tk{position:absolute;top:3px;right:3px;width:19px;height:19px;border-radius:50%;background:#22a565;color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center}
  .learn-lr-b{flex:1;min-width:0}
  .learn-lr-b>b{font-size:14.5px;font-weight:700;color:var(--dark);line-height:1.3;display:block}
  .learn-lr-m{font-size:11.5px;color:#8a94a3;font-weight:600}
  .learn-view{padding:2px}
  /* ---- Live sessions (community events, 'lev-' prefix avoids clashing with the live-workout grid) ---- */
  .lev-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e5484d;margin-left:2px;vertical-align:middle;animation:livePulse 1.6s ease-in-out infinite}
  @keyframes livePulse{0%,100%{opacity:1}50%{opacity:.35}}
  .lev-wrap{margin-top:2px}
  .lev-day{font-size:12px;font-weight:800;color:#8a94a3;text-transform:uppercase;letter-spacing:.5px;margin:14px 2px 8px}
  .lev-day:first-child{margin-top:2px}
  .lev-card{background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.7);border-radius:15px;padding:13px;margin-bottom:10px;box-shadow:0 5px 14px rgba(11,37,69,.08);-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px)}
  .lev-card.islive{border-color:rgba(229,72,77,.5);box-shadow:0 6px 18px rgba(229,72,77,.18)}
  .lev-top{display:flex;align-items:center;gap:11px;margin-bottom:11px}
  .lev-ic{font-size:26px;flex:0 0 auto;width:30px;text-align:center}
  .lev-b{flex:1;min-width:0}
  .lev-b>b{font-size:15.5px;font-weight:800;color:var(--dark);display:block;line-height:1.28}
  .lev-meta{font-size:12.5px;color:var(--grey);font-weight:600;margin-top:2px}
  .lev-badge{color:#e5484d;font-weight:900;font-size:11px;letter-spacing:.4px}
  .lev-join{width:100%;padding:13px;border:none;border-radius:12px;font-size:15px;font-weight:800;color:#fff;background:linear-gradient(135deg,#ff7a6b,#e85555);box-shadow:0 6px 16px rgba(232,85,85,.28);cursor:pointer}
  .lev-join.now{background:linear-gradient(135deg,#f0575b,#e5484d);box-shadow:0 6px 18px rgba(229,72,77,.4)}
  .lev-plan{width:100%;margin-top:8px;padding:11px;border:1.5px solid rgba(11,37,69,.14);border-radius:12px;background:#fff;font-size:14px;font-weight:800;color:var(--dark);cursor:pointer;font-family:inherit}
  .lev-plan.on{background:#e7f6ee;border-color:rgba(34,165,101,.35);color:var(--green)}
  .sessrow .pill{white-space:nowrap;cursor:pointer}
  .sessrow .pill+.pill{margin-left:6px}
  .lev-nolink{text-align:center;font-size:13px;color:#8a94a3;font-weight:600;padding:11px;background:rgba(11,37,69,.04);border-radius:12px}
  /* home "next live session" banner */
  .livebanner{display:flex;align-items:center;gap:12px;padding:13px 15px;margin:10px 0 0;border-radius:16px;cursor:pointer;background:linear-gradient(135deg,#eef3fb,#e7eefb);border:1px solid #dbe6f7}
  .livebanner.now{background:linear-gradient(135deg,#fdecec,#fbe3e4);border-color:#f4cdd0}
  .livebanner .lb-ic{font-size:26px;flex:0 0 auto}
  .livebanner .lb-tx{flex:1;min-width:0;display:flex;flex-direction:column}
  .livebanner .lb-k{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#3f70c9}
  .livebanner.now .lb-k{color:#e5484d}
  .livebanner .lb-tx b{font-size:15px;color:var(--dark);line-height:1.25;margin:1px 0}
  .livebanner .lb-sub{font-size:12.5px;color:#6b7480;font-weight:600}
  .livebanner .lb-join{flex:0 0 auto;padding:9px 18px;border:none;border-radius:11px;font-size:14px;font-weight:800;color:#fff;background:linear-gradient(135deg,#ff7a6b,#e85555);box-shadow:0 5px 14px rgba(232,85,85,.3);cursor:pointer}
  .livebanner .lb-join.now{background:linear-gradient(135deg,#f0575b,#e5484d)}
  .learn-vtitle{font-size:19px;font-weight:800;color:var(--dark);margin:14px 2px 8px}
  .learn-notes{font-size:14.5px;line-height:1.6;color:#3a4453;white-space:pre-wrap;margin:0 2px 16px}
  .learn-atts{display:flex;flex-direction:column;gap:8px;margin:0 2px 16px}
  .learn-att{display:flex;align-items:center;gap:11px;padding:13px 14px;background:rgba(255,255,255,.7);border:1px solid rgba(11,37,69,.09);border-radius:13px;text-decoration:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .learn-att-ic{font-size:22px;flex:0 0 auto}
  .learn-att-n{flex:1;min-width:0;font-size:14.5px;font-weight:700;color:var(--dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .learn-att-dl{flex:0 0 auto;font-size:13px;font-weight:800;color:#ff6b6b}
  .learn-play.doc{background:rgba(11,37,69,.55)}
  .learn-complete{width:100%;padding:15px;border:none;border-radius:15px;font-size:16px;font-weight:800;color:#fff;background:linear-gradient(135deg,#ff7a6b,#e85555);box-shadow:0 8px 20px rgba(232,85,85,.3);cursor:pointer}
  .learn-complete.done{background:#e7f6ee;color:#1c8f57;box-shadow:none}
  .learn-next{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:14px;padding:13px 15px;background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.7);border-radius:14px;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .learn-next .learn-next-l{display:block;font-size:11px;font-weight:800;color:#ff6b6b;text-transform:uppercase;letter-spacing:.4px}
  .learn-next b{font-size:14.5px;color:var(--dark)}
  .comm-fitem{margin-bottom:14px}
  .comm-fchip{display:inline-flex;align-items:center;gap:6px;background:#f1f4f9;color:#5b6674;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:20px;margin:0 0 6px;cursor:pointer}
  .comm-fchip span{font-size:13px}
  .comm-grp{font-size:11px;font-weight:800;color:var(--grey);text-transform:uppercase;letter-spacing:.04em;margin:16px 2px 6px}
  .comm-srow{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 14px;margin-bottom:8px;cursor:pointer;transition:transform .08s}
  .comm-srow:active{transform:scale(.99)}
  .comm-emoji{font-size:22px;flex:0 0 auto}
  .comm-circle{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#123262,#0B2545);color:#fff;border-radius:16px;padding:14px 14px;margin:0 0 14px;box-shadow:0 10px 26px rgba(11,37,69,.28)}
  .comm-circle>div{flex:1;min-width:0}.comm-circle b{display:block;font-size:14px}.comm-circle>div>span{display:block;font-size:12px;opacity:.8;margin-top:2px}
  .comm-circle .comm-arrow{color:#fff;font-size:12px;font-weight:800;background:var(--coral);padding:6px 11px;border-radius:999px;white-space:nowrap}
  .comm-srow b{flex:1;font-size:14.5px;color:var(--dark)}
  .comm-arrow{color:var(--grey);font-size:18px;font-weight:700}
  .comm-composer{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 12px 10px;margin-bottom:16px;box-shadow:0 2px 10px rgba(11,37,69,.05)}
  .comm-composer textarea{width:100%;box-sizing:border-box;border:none;outline:none;background:transparent;resize:none;font-family:inherit;font-size:15px;line-height:1.45;color:var(--ink);padding:4px 4px 0;min-height:46px}
  .comm-composer textarea::placeholder{color:#9aa4b2}
  .comm-linkrow{margin:8px 0 2px}
  .comm-linkrow input{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13.5px;background:#f7f9fc;outline:none;color:var(--ink)}
  .comm-attach{margin:8px 0 2px}
  .comm-thumb{position:relative;display:inline-block;border-radius:12px;overflow:hidden}
  .comm-thumb img,.comm-thumb video{max-height:150px;max-width:100%;display:block;border-radius:12px;background:#000}
  .comm-thumb-x{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer}
  .comm-thumb-badge{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.6);color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:20px}
  .comm-videowrap{margin:8px 0;border-radius:12px;overflow:hidden;background:#000}
  .comm-videowrap video{width:100%;display:block;max-height:74vh}
  .comm-toolbar{display:flex;align-items:center;justify-content:space-between;margin-top:8px;border-top:1px solid var(--line);padding-top:8px}
  .comm-tools{display:flex;gap:2px}
  .comm-tbtn{width:42px;height:42px;border-radius:50%;border:none;background:transparent;color:#6b7480;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
  .comm-tbtn:active{background:rgba(120,140,170,.16)}
  .comm-tbtn.on{color:#ff6b6b;background:#fff1ee}
  .comm-postbtn{border:none;background:#ff6b6b;color:#fff;font-weight:800;font-size:14px;padding:10px 22px;border-radius:22px;cursor:pointer;box-shadow:0 5px 14px rgba(232,85,85,.30)}
  .comm-postbtn:active{transform:scale(.96)}
  .comm-postbtn:disabled{opacity:.5;box-shadow:none}
  .comm-post{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px}
  .comm-ph{display:flex;align-items:center;gap:10px;margin-bottom:8px}
  .comm-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ff6b6b,#ff8f6b);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:0 0 auto}
  .comm-ph b{font-size:14px;color:var(--dark)}
  .comm-badge{display:inline-block;background:#eef2ff;color:#4b64c8;font-size:10px;font-weight:800;padding:1px 7px;border-radius:20px;margin-left:6px;vertical-align:middle}
  .comm-time{font-size:11px;color:var(--grey)}
  .comm-del{color:#c9ccd2;cursor:pointer;font-size:20px;line-height:1;padding:0 2px}
  .comm-more{font-weight:800;color:#9aa5b3}
  .comm-menu{position:fixed;z-index:9999;background:#fff;border:1px solid #e6ebf2;border-radius:14px;box-shadow:0 14px 34px rgba(11,37,69,.22);min-width:210px;overflow:hidden}
  .comm-menu>div{padding:12px 14px;font-size:14px;font-weight:600;color:#1f2733;cursor:pointer;border-top:1px solid #f0f2f6}
  .comm-menu>div:first-child{border-top:0}.comm-menu>div.cancel{color:#8a94a3;text-align:center}
  .comm-sheet{left:12px;right:12px;top:auto;bottom:calc(env(safe-area-inset-bottom) + 96px);padding:6px 12px 12px;max-height:60vh;overflow-y:auto}
  .comm-sheet .hd{display:flex;justify-content:space-between;align-items:center;padding:8px 2px 10px;border-top:0!important;cursor:default}
  .comm-sheet .hd b{font-size:15px;color:var(--dark)}.comm-sheet .x{cursor:pointer;color:#8a94a3;font-size:16px}
  .comm-sheet .comm-srow{padding:10px 12px;margin:0 0 8px;border-top:0!important}
  .comm-body{font-size:14px;color:var(--ink);line-height:1.5;white-space:pre-wrap;word-break:break-word}
  .comm-body a{color:var(--blue);font-weight:600}
  .comm-img{width:100%;border-radius:12px;margin:8px 0;display:block}
  .comm-actions{display:flex;gap:18px;margin-top:10px;border-top:1px solid var(--line);padding-top:9px}
  .comm-act{font-size:13px;font-weight:700;color:var(--grey);cursor:pointer;user-select:none}
  .comm-act.on{color:#e5484d}
  .commcards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .commcard{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer}
  .commcard .cc-img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#eef2f7;display:block}
  .commcard .cc-b{padding:9px 11px}.commcard b{font-size:13px;color:var(--dark)}
  .commlist .comm-srow{margin-bottom:6px}
  /* ---- liquid glass: match the frosted look used across the rest of the app ---- */
  .comm-srow,.comm-composer,.comm-post,.commcard{
    background:rgba(255,255,255,.58);
    -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
    border:1px solid rgba(255,255,255,.6);
    box-shadow:0 8px 22px rgba(11,37,69,.07)}
  .comm-fchip{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.55);color:#5b6674}
  .comm-linkrow input{background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);border:1px solid rgba(255,255,255,.6)}
  .comm-tabs{border-bottom-color:rgba(255,255,255,.5)}
  .comm-actions{border-top-color:rgba(120,140,170,.18)}
  .comm-toolbar{border-top-color:rgba(120,140,170,.18)}
  .commthread{background:linear-gradient(180deg,rgba(255,241,238,.92),rgba(244,246,249,.94));-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%)}
  .commthread{position:fixed;inset:0;z-index:9996;background:var(--bg);display:none;flex-direction:column;max-width:520px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 8px) 0 0}
  .commthread.open{display:flex;animation:sheetUp .3s cubic-bezier(.22,1,.36,1)}
  .commthread-inner{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 14px calc(env(safe-area-inset-bottom) + 14px)}
  /* --- iOS smoothness: instant tap feedback, no double-tap delay, momentum scroll --- */
  a,button,.btn,[onclick],label,select,input,textarea{touch-action:manipulation}
  [onclick]{transition:opacity .1s ease}
  [onclick]:active{opacity:.72}
  .btn{transition:transform .09s ease,box-shadow .15s ease,background .15s ease,opacity .12s ease}
  .btn:active{transform:scale(.97)}
  nav a{transition:transform .12s ease}
  nav a:active{transform:scale(.92)}
  .toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--dark);color:#fff;padding:11px 18px;border-radius:24px;font-size:13px;font-weight:600;opacity:0;transition:.3s;z-index:50;pointer-events:none;white-space:nowrap;max-width:90%}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .empty{text-align:center;color:var(--grey);font-size:13px;padding:14px 0}
  .cal-head{display:flex;align-items:center;justify-content:space-between;margin:6px 0 12px}
  .cal-head b{font-size:16px;color:var(--dark)}
  .cal-nav{width:44px;height:44px;border-radius:12px;background:#e7edf6;display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:24px;cursor:pointer;font-weight:800}
  .comm-back{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;background:#e7edf6;color:var(--blue);font-size:28px;font-weight:800;cursor:pointer;flex:0 0 auto;text-decoration:none;line-height:1}
  .cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:5px}
  .cal-dow span{text-align:center;font-size:10px;font-weight:700;color:var(--grey)}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
  .cal-cell{aspect-ratio:1;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;color:var(--ink);position:relative;cursor:pointer;background:#f5f7fa}
  .cal-cell.blank{background:transparent;cursor:default}
  .cal-cell.has{background:#ffe0da;color:#b23b3b;font-weight:700}
  .cal-cell.today{outline:2px solid var(--blue);outline-offset:-2px}
  .cal-cell.sel{background:var(--blue);color:#fff}
  .cal-cell .dot{width:5px;height:5px;border-radius:50%;background:var(--green);position:absolute;bottom:6px}
  .cal-cell.has .dot{background:var(--green)}.cal-cell.sel .dot{background:#fff}
  .cal-cell.has{background:#e9f7ef;color:#1c7a4d;font-weight:700}
  .cal-cell.plan{outline:1.5px dashed var(--blue);outline-offset:-2px;color:var(--blue);font-weight:700}
  .cal-cell.sel.plan{color:#fff}
  /* Home "Your week" strip: green tick = trained, coral dashed = planned, dark ring = today */
  .wk-row{display:flex;justify-content:space-between;align-items:center}
  .wk-day{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;color:var(--grey);cursor:pointer;flex:1}
  .wk-c{width:27px;height:27px;border-radius:50%;background:#eef2f8;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:var(--grey)}
  .wk-c.done{background:var(--green);color:#fff}
  .wk-c.plan{background:#fff;border:2px dashed var(--blue);color:var(--blue)}
  /* ---- Today hero panel (body.homepanel — the navy design, on by default) ---- */
  body.homepanel .hero-swap{display:none}
  body.homepanel header{background:var(--dark);border-bottom:0}
  body.homepanel header .brand b{color:#fff}
  body.homepanel header #tabname{color:rgba(255,255,255,.7)}
  body.homepanel header .chatbtn{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.18);box-shadow:none}
  html.navy-top{background:#0B2545}
  .hero{background:linear-gradient(172deg,#0B2545 0%,#0B2545 14%,#123262 58%,#3b2a5a 100%);color:#fff;border-radius:0 0 34px 34px;padding:8px 20px 22px;margin:-4px -16px 4px;position:relative;overflow:hidden}
  .hero:before{content:"";position:absolute;right:-90px;top:36px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,107,.5),rgba(255,107,107,0) 65%);pointer-events:none}
  .hero .hello{margin:10px 0 2px;font-size:22px;font-weight:800;letter-spacing:-.01em;position:relative}
  .hero .hdate{font-size:13px;opacity:.75;position:relative}
  .hweek{display:flex;justify-content:space-between;gap:4px;margin:16px 0 18px;position:relative}
  .hday{flex:1;height:54px;border-radius:14px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-weight:700;font-size:14px;cursor:pointer}
  .hday small{font-size:10px;opacity:.7;font-weight:600}
  .hday i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.3);display:block}
  .hday i.done{background:var(--green)}
  .hday i.plan{background:transparent;border:1.5px dashed rgba(255,255,255,.8);width:6px;height:6px}
  .hday.today{background:#fff;color:var(--dark);border-color:#fff}
  .hday.today i{background:var(--blue)}
  .hday.today i.done{background:var(--green)}
  /* week strip v2: swipe header, three-colour dots */
  .hwkhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 6px;font-size:11px;font-weight:700;opacity:.9}
  .hwklbl{flex:1;text-align:center;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .harr{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;flex:0 0 auto}
  .harr.off{opacity:.25;pointer-events:none}
  .hchip{background:#fff;color:var(--dark);border-radius:999px;padding:4px 10px;font-size:10.5px;font-weight:800;cursor:pointer}
  .hwscroll{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 0 18px;position:relative;overscroll-behavior-x:contain}
  .hwscroll::-webkit-scrollbar{display:none}
  .hwscroll .hweek{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;margin:0;box-sizing:border-box}
  .hdots{display:flex;gap:3px;height:6px;align-items:center}
  .hday i.w{background:var(--green)}
  .hday i.s{background:#7cc6ff}
  .hday i.c{background:var(--blue)}
  .hday i.p{background:transparent;border:1.5px dashed rgba(255,255,255,.8);width:6px;height:6px}
  .hday.today i.p{border-color:var(--blue)}
  /* a scheduled workout still to do on this day: coral badge in the tile's corner (tap opens the day's "To complete") */
  .hday{position:relative}
  .hday.hasplan::after{content:'';position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 2px rgba(11,37,69,.85)}
  .hday.today.hasplan::after{box-shadow:0 0 0 2px #fff}
  #dvBody .sec-t{margin:4px 2px 6px}
  /* history grid dots */
  .cal-cell .cdots{position:absolute;bottom:5px;display:flex;gap:2px}
  .cal-cell .cdots i{width:4px;height:4px;border-radius:50%;display:block}
  .cal-cell .cdots i.w{background:var(--green)}.cal-cell .cdots i.s{background:#7cc6ff}.cal-cell .cdots i.c{background:var(--blue)}
  /* day view sheet */
  #dayView{background:var(--bg)}
  .dv-head{background:linear-gradient(172deg,#0B2545 0%,#0B2545 22%,#123262 62%,#3b2a5a 100%);color:#fff;padding:calc(env(safe-area-inset-top) + 10px) 18px 16px;border-radius:0 0 28px 28px;flex:0 0 auto}
  .dv-top{display:flex;align-items:center;justify-content:space-between}
  .dv-x{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}
  .dv-kind{font-size:12px;opacity:.75;font-weight:700}
  .dv-title{font-size:21px;font-weight:800;margin-top:12px}
  .dv-sub{font-size:12.5px;opacity:.75;margin-top:2px}
  .dv-nav{display:flex;gap:8px;margin-top:12px}
  .dv-nav b{background:rgba(255,255,255,.12);border-radius:999px;padding:6px 12px;font-size:11.5px;font-weight:800;cursor:pointer}
  #dvBody{padding-top:12px}
  #dvBody .row .pill{margin-left:8px;cursor:pointer;white-space:nowrap}
  .dv-val{margin-left:auto;font-size:14px;color:var(--dark);white-space:nowrap}
  #dvBody .card{margin:0 0 12px}
  .hkcal{display:flex;align-items:flex-end;gap:10px;position:relative}   /* big number: Nutrition panel */
  .hkcal b{font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1}
  .hkcal span{font-size:14px;opacity:.8;padding-bottom:8px}
  .hgoal{font-size:12.5px;opacity:.7;margin-top:6px;letter-spacing:.02em;position:relative}
  .htiles{display:flex;gap:10px;margin-top:16px;position:relative}
  .htile{flex:1;min-width:0;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:16px;padding:10px 12px;cursor:pointer}
  .htile small{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;font-weight:700}
  .htile b{display:block;font-size:17px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .htile b em{font-style:normal;font-size:11px;opacity:.65;font-weight:600}
  .hbar{height:4px;border-radius:2px;background:rgba(255,255,255,.18);margin-top:8px;overflow:hidden}
  .hbar i{display:block;height:100%;border-radius:2px;background:var(--blue)}
  .htile.p .hbar i{background:var(--green)}
  .htile.s .hbar i{background:#7cc6ff}
  .hcta{display:flex;align-items:center;gap:14px;margin-top:18px;position:relative}
  .hpill{background:#fff;color:var(--dark);font-weight:800;font-size:14px;padding:12px 20px;border-radius:999px;border:0;box-shadow:0 8px 20px rgba(0,0,0,.25);font-family:inherit}
  .hlink{font-size:13px;font-weight:700;opacity:.9;cursor:pointer}
  .htile .hsub{font-size:10.5px;opacity:.7;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .htile b{font-size:18px}
  /* ---- check-in banner INSIDE the navy panel: frosted = nothing to do · coral = you · white = late / coach replied ---- */
  .hero .cibanner{margin:14px 0 0;padding:12px 13px;box-shadow:none;animation:none}
  .hero .cibanner.next,.hero .cibanner.done{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:#fff;box-shadow:none}
  .hero .cibanner.next .ci-tx span,.hero .cibanner.done .ci-tx span{color:rgba(255,255,255,.75)}
  .hero .cibanner.next .ci-ic{background:rgba(255,255,255,.14)}
  .hero .cibanner.done .ci-ic{background:rgba(34,165,101,.4)}
  .hero .cibanner.done .ci-go{background:rgba(255,255,255,.14);color:#fff}
  .hero .cibanner:not(.next):not(.done):not(.over):not(.reply){background:var(--blue);box-shadow:0 10px 24px rgba(255,107,107,.35)}
  .hero .cibanner.over{background:#fff;color:var(--dark);outline:2px solid var(--blue);outline-offset:-2px;box-shadow:0 10px 24px rgba(0,0,0,.25);animation:none}
  .hero .cibanner.over .ci-tx span{color:var(--grey);opacity:1}
  .hero .cibanner.over .ci-ic{background:var(--blue);color:#fff}
  .hero .cibanner.reply{background:#fff;color:var(--dark);box-shadow:0 10px 24px rgba(0,0,0,.25);animation:none}
  .hero .cibanner.reply .ci-tx span{color:var(--grey);opacity:1}
  .hero .cibanner.reply .ci-ic{background:var(--dark);color:#fff}
  .hero .cibanner.reply .ci-go,.hero .cibanner.over .ci-go{background:var(--blue);color:#fff}
  body.homepanel #checkinBanner{margin-top:10px}
  /* ---- navy panel on the other pages (body.homepanel only; .pagehero is a plain div otherwise) ---- */
  body.homepanel .pagehero{background:linear-gradient(172deg,#0B2545 0%,#0B2545 22%,#123262 62%,#3b2a5a 100%);color:#fff;border-radius:0 0 34px 34px;padding:10px 20px 18px;margin:-4px -16px 12px;position:relative;overflow:hidden}
  body.homepanel .pagehero:before{content:"";position:absolute;right:-90px;top:36px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,107,.5),rgba(255,107,107,0) 65%);pointer-events:none}
  body.homepanel .pagehero>*{position:relative}
  body.homepanel .pagehero h2.big{color:#fff;margin:6px 0 2px}
  body.homepanel .pagehero .muted,body.homepanel .pagehero p.muted{color:rgba(255,255,255,.75)}
  /* toggles / tabs / chips inside a panel */
  body.homepanel .pagehero .tgtoggle,body.homepanel .pagehero .nut-toggle{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14)}
  body.homepanel .pagehero .tgtoggle span,body.homepanel .pagehero .nut-toggle b{color:rgba(255,255,255,.75)}
  body.homepanel .pagehero .tgtoggle span.on,body.homepanel .pagehero .nut-toggle b.on{background:#fff;color:var(--dark)}
  body.homepanel .pagehero .tgtoggle.wo-toggle{margin:12px 0 0}
  body.homepanel .pagehero .comm-tabs{border-bottom-color:rgba(255,255,255,.18);margin-bottom:4px}
  body.homepanel .pagehero .comm-tabs b{color:rgba(255,255,255,.65)}
  body.homepanel .pagehero .comm-tabs b.on{color:#fff;border-bottom-color:var(--blue)}
  body.homepanel .pagehero #progToggle{margin-top:12px}
  body.homepanel .pagehero #progToggle span{color:rgba(255,255,255,.75)}
  body.homepanel .pagehero #progToggle span.on{background:#fff;color:var(--dark)}
  body.homepanel .pagehero .range-chips{margin-top:10px}
  body.homepanel .pagehero .range-chip{background:rgba(255,255,255,.12);color:rgba(255,255,255,.8)}
  body.homepanel .pagehero .range-chip.on{background:#fff;color:var(--dark);box-shadow:none}
  /* nutrition date bar inside the panel */
  body.homepanel .pagehero .nutdate{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14);margin:12px 0 4px}
  body.homepanel .pagehero .ndbtn{background:rgba(255,255,255,.14);color:#fff}
  body.homepanel .pagehero .ndlbl b{color:#fff}
  body.homepanel .pagehero .ndlbl span{color:rgba(255,255,255,.6)}
  body.homepanel .pagehero .ndweekly{background:#fff;color:var(--dark)}
  body.homepanel #nutHeroStats .hkcal{margin-top:12px}
  body.homepanel #nutHeroStats .htile.f .hbar{display:none}
  body.homepanel #summaryCard{display:none}   /* its numbers now live in the panel */
  body.homepanel .pagehero .nut-head h2.big{margin:6px 0}
  body.homepanel #woHero p.muted{margin-bottom:0}
  body.homepanel #progHero p.muted{margin-bottom:0}
  body.homepanel #v-community .comm-ci{margin-top:0}
  /* light glass sheets: nearly opaque while the chrome is navy, so the header doesn't show through as a dark band */
  body.homepanel .fooddetail,body.homepanel .foodsearch{background:rgba(244,246,249,.97)}
  .wk-day.today .wk-c{outline:2px solid var(--dark);outline-offset:1.5px}
  .cal-legend{display:flex;gap:14px;align-items:center;font-size:11px;color:var(--grey);margin-top:12px}
  .cal-legend i{width:12px;height:12px;border-radius:4px;background:#ffe0da;display:inline-block;margin-right:5px;vertical-align:-2px}
/* ===== block 2 of 10, moved verbatim from index.html ===== */
  /* Login + set-password screens — Liquid Glass (docs/reference/design-system.md): the coral backdrop continues
     from the loading screen, the card is frosted white glass, and it enters with sheetUp. */
  .lh-login{position:fixed;inset:0;z-index:9999;background:linear-gradient(160deg,#ff6b6b,#ff8f6b);display:none;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top) + 24px) 20px calc(env(safe-area-inset-bottom) + 24px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .lh-login::before,.lh-login::after{content:"";position:fixed;border-radius:50%;pointer-events:none;filter:blur(8px)}
  .lh-login::before{width:320px;height:320px;top:-90px;right:-110px;background:radial-gradient(circle,rgba(255,255,255,.34),rgba(255,255,255,0) 70%)}
  .lh-login::after{width:380px;height:380px;bottom:-150px;left:-140px;background:radial-gradient(circle,rgba(124,92,255,.30),rgba(124,92,255,0) 70%)}
  .lh-login-card{position:relative;z-index:1;margin:auto;width:100%;max-width:370px;padding:30px 24px 24px;border-radius:26px;text-align:center;
    background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
    border:1px solid rgba(255,255,255,.6);box-shadow:0 20px 50px rgba(11,37,69,.22),inset 0 1px 0 rgba(255,255,255,.8);
    animation:sheetUp .30s cubic-bezier(.22,1,.36,1)}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .lh-login-card{background:#fff} }
  .lh-login-card img{width:60px;height:60px;object-fit:contain;margin:0 auto 16px;display:block;border-radius:18px!important;box-shadow:0 8px 20px rgba(232,85,85,.35)}
  .lh-login-card h1{font-size:24px;font-weight:800;letter-spacing:-.3px;margin:0 0 4px;color:var(--dark)}
  .lh-login-card p{margin:0 0 20px;color:var(--grey);font-size:14px;line-height:1.45}
  .lh-login-card input{display:block;width:100%;box-sizing:border-box;padding:14px 15px;margin:0 0 10px;border:1.5px solid var(--line);border-radius:14px;
    font-size:16px;font-family:inherit;color:var(--dark);background:rgba(255,255,255,.9);outline:none;-webkit-appearance:none;appearance:none;
    transition:border-color .14s ease,box-shadow .14s ease}
  .lh-login-card input::placeholder{color:#9aa4b2}
  .lh-login-card input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(255,107,107,.16);background:#fff}
  /* password field with a show/hide eye (added by lhPwEyes) */
  .lh-pw{position:relative;margin:0 0 10px}
  .lh-pw input{margin:0;padding-right:50px}
  .lh-pw-eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:11px;background:transparent;color:#8a94a3;
    display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:color .14s ease,background .14s ease}
  .lh-pw-eye:hover{color:var(--dark)}
  .lh-pw-eye:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
  .lh-pw-eye[aria-pressed="true"]{color:var(--blue);background:rgba(255,107,107,.12)}
  .lh-pw-eye svg{width:21px;height:21px;display:block}
  .lh-login-btn{position:relative;width:100%;padding:15px;margin-top:8px;border:none;border-radius:14px;font-size:16px;font-weight:800;font-family:inherit;color:#fff;cursor:pointer;
    background:linear-gradient(135deg,var(--blue),var(--blue-d));box-shadow:0 10px 22px rgba(232,85,85,.32);
    display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .14s cubic-bezier(.22,1,.36,1),box-shadow .14s ease,opacity .14s ease}
  .lh-login-btn:active:not(:disabled){transform:scale(.97);box-shadow:0 5px 14px rgba(232,85,85,.30)}
  .lh-login-btn:disabled{opacity:.85;cursor:default}
  .lh-login-btn.busy::before{content:"";width:17px;height:17px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:lhspin .8s linear infinite}
  .lh-login-err{color:#d64545;font-size:13px;line-height:1.45;min-height:18px;margin:2px 0 4px}
  .lh-login-err:empty{min-height:8px}
  .lh-login-forgot{margin-top:14px}
  .lh-login-forgot a{color:var(--blue-d);font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none}
  .lh-login-forgot a:hover{text-decoration:underline}
  .lh-login-foot{margin-top:16px;padding-top:14px;border-top:1px solid rgba(11,37,69,.07);color:var(--grey);font-size:12px;line-height:1.45}
/* ===== block 3 of 10, moved verbatim from index.html ===== */
    .scanner .frame{position:relative;overflow:hidden}
    .scanbox{position:absolute;left:8%;right:8%;top:18%;bottom:18%;border:2px solid rgba(255,255,255,.6);border-radius:14px;box-shadow:0 0 0 2000px rgba(0,0,0,.28)}
    .scanline{position:absolute;left:10%;right:10%;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#ff6b6b,transparent);box-shadow:0 0 10px 2px rgba(255,107,107,.8);z-index:2;animation:scanmove 1.5s ease-in-out infinite}
    @keyframes scanmove{0%{top:20%}50%{top:78%}100%{top:20%}}
    .scan-lookup{position:fixed;inset:0;z-index:10000;background:rgba(11,37,69,.9);display:none;align-items:center;justify-content:center;flex-direction:column;color:#fff;gap:16px;text-align:center;padding:24px}
    .scan-lookup.open{display:flex}
    .lh-spin{width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,255,255,.25);border-top-color:#ff6b6b;animation:lhspin .8s linear infinite;will-change:transform;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
    .lhld-spin{width:42px;height:42px;border-radius:50%;border:4px solid rgba(255,255,255,.35);border-top-color:#fff;animation:lhspin .8s linear infinite;will-change:transform;transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
    @keyframes lhspin{from{transform:translateZ(0) rotate(0)}to{transform:translateZ(0) rotate(360deg)}}
    .searchbar{flex:2;display:flex;align-items:center;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;color:#9aa4b2;font-size:15px;cursor:pointer;background:#fff}
    .foodsearch{position:fixed;inset:0;z-index:9997;background:rgba(244,246,249,.80);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);display:none;flex-direction:column}
    .foodsearch.open{display:flex}
    .fs-head{position:relative;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 20px) 16px 4px}
    .fs-back{width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 5px 16px rgba(11,37,69,.14);display:flex;align-items:center;justify-content:center;color:#ff6b6b;font-size:30px;font-weight:800;line-height:1;cursor:pointer;flex:0 0 auto;padding-bottom:3px}
    .fs-back:active{transform:scale(.93)}
    .fs-title{position:absolute;left:0;right:0;text-align:center;font-size:19px;font-weight:800;color:var(--dark);pointer-events:none}
    .fs-head-sp{width:46px;height:46px;flex:0 0 auto}
    .fs-searchrow{display:flex;align-items:center;gap:10px;padding:12px 16px 14px}
    .fs-inwrap{flex:1;position:relative;display:flex;align-items:center;min-width:0}
    .fs-mag{position:absolute;left:15px;width:20px;height:20px;color:#9aa4b2;pointer-events:none}
    .fs-input{flex:1;width:100%;box-sizing:border-box;padding:15px 44px 15px 44px;border:1px solid var(--line);border-radius:16px;font-size:16px;outline:none;background:#fff;box-shadow:0 2px 12px rgba(11,37,69,.06);transition:border-color .2s,box-shadow .2s}
    .fs-input:focus{border-color:#ff6b6b;box-shadow:0 0 0 4px rgba(255,107,107,.15)}
    .fs-clear{position:absolute;right:12px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:#9aa4b2;font-size:16px;cursor:pointer;border-radius:50%;flex:0 0 auto}
    .fs-clear:active{background:rgba(120,140,170,.16)}
    .fs-scanbtn{width:54px;height:54px;flex:0 0 auto;border-radius:16px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#ff6b6b;cursor:pointer;box-shadow:0 2px 12px rgba(11,37,69,.06)}
    .fs-scanbtn:active{background:#fff1ee;transform:scale(.95)}
    .fs-body{flex:1;overflow:auto;padding:8px 12px 60px;-webkit-overflow-scrolling:touch}
    .efmeals{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
    .efmeal{padding:11px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-weight:600;cursor:pointer;font-size:14px}
    .efmeal.on{border-color:#ff6b6b;background:#ffece9;color:#b23b3b}
    .efunit{align-self:center;color:#8792a3;font-weight:700}
    .fs-tabs{display:flex;gap:4px;padding:8px 10px;background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);border-bottom:1px solid rgba(255,255,255,.45);overflow-x:auto}
    .fs-outbtn{width:100%;text-align:left;background:#fff4ef;border:1px solid #ffd8c9;color:#c2410c;font-weight:700;font-size:13px;padding:10px 14px;border-radius:12px;cursor:pointer}
    .fs-outbtn:active{transform:scale(.99)}
    .fstab{flex:1;min-width:74px;text-align:center;padding:9px 6px;border-radius:10px;font-size:12.5px;font-weight:700;color:#8792a3;cursor:pointer;white-space:nowrap}
    .fstab.on{background:#ffece9;color:#b23b3b}
    .fscard.est{border:1px dashed #d7ccff;background:linear-gradient(180deg,#faf8ff,#fff)}
    .estbadge{display:inline-block;font-size:11px;font-weight:800;color:#7c5cff;background:#efeaff;border-radius:20px;padding:3px 10px;margin:2px 0 10px}
    .estmac{font-size:15px;color:var(--ink);margin:10px 0 2px}.estmac b{color:var(--dark)}
    .estlbl{font-size:12px;font-weight:700;color:var(--dark);display:block;margin:12px 0 5px}
    .efmeals{display:flex;flex-wrap:wrap;gap:6px}
    .esttag{font-size:9.5px;font-weight:800;color:#7c5cff;background:#efeaff;border-radius:20px;padding:1px 6px;vertical-align:middle;margin-left:2px}
    .fsgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:6px}
    .fscard{background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.6);border-radius:16px;padding:10px 8px 12px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 6px 18px rgba(11,37,69,.08), inset 0 1px 0 rgba(255,255,255,.6);animation:fsIn .34s cubic-bezier(.22,1,.36,1) backwards}
    .fscard:active{transform:scale(.97)}
    @keyframes fsIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
    .fscard img,.fscard .fsimg{width:88px;height:88px;object-fit:contain;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:40px;background:rgba(244,246,249,.7)}
    .fsload{display:flex;flex-direction:column;align-items:center;gap:12px;padding:36px 10px;color:var(--grey);font-size:13px;font-weight:600}
    .fsload-logo{width:52px;height:52px;border-radius:14px;box-shadow:0 8px 22px rgba(232,90,48,.28);animation:fspulse 1.15s ease-in-out infinite}
    @keyframes fspulse{0%,100%{transform:scale(.84);opacity:.55}50%{transform:scale(1.06);opacity:1}}
    .fscard b{font-size:13px;line-height:1.25;color:#1f2733;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .fscard span{font-size:11px;color:#8792a3}
    .fscard .fsbrand{font-size:11px;color:#b23b3b;font-weight:700;line-height:1.1}
    .fscard .favstar{position:absolute;top:6px;right:8px}
    /* chart polish: draw-in animations, y-axis labels, brand watermark (screenshot-friendly) */
    @keyframes ppLineDraw{to{stroke-dashoffset:0}}
    @keyframes ppFadeIn{to{opacity:1}}
    @keyframes ppDotPop{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.35)}100%{opacity:1;transform:scale(1)}}
    .pp-line{stroke-dasharray:4000;stroke-dashoffset:4000;animation:ppLineDraw 1.1s ease forwards;filter:drop-shadow(0 1.5px 2.5px rgba(11,37,69,.16))}
    .pp-area{opacity:0;animation:ppFadeIn .8s ease .35s forwards}
    .pp-dot{transform-box:fill-box;transform-origin:center;opacity:0;animation:ppDotPop .32s ease backwards;animation-delay:.5s}
    .pp-ylab{position:absolute;left:2px;transform:translateY(-115%);font-size:9.5px;font-weight:700;color:#a8b1c2;background:rgba(255,255,255,.78);padding:0 4px;border-radius:4px;line-height:1.35;pointer-events:none;z-index:2}
    .pp-wm{position:absolute;right:6px;top:5px;font-size:9px;font-weight:800;letter-spacing:1.4px;color:#ccd4de;pointer-events:none;z-index:2;user-select:none}
    @media (prefers-reduced-motion:reduce){ .pp-line,.pp-area,.pp-dot{animation:none !important;opacity:1 !important;transform:none !important;stroke-dashoffset:0 !important} }
    .mb-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
    /* ---- recipe book (Recipes tab) ---- */
    .rcats{display:flex;gap:7px;padding:6px 2px 10px;overflow-x:auto}
    .rcat{flex:0 0 auto;font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:18px;background:#fff;color:#5b6674;border:1px solid var(--line);white-space:nowrap;cursor:pointer}
    .rcat.on{background:var(--dark);color:#fff;border-color:var(--dark)}
    .rgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding-bottom:14px}
    .rcard{position:relative;background:#fff;border:1px solid #eef1f5;border-radius:16px;overflow:hidden;box-shadow:0 6px 16px rgba(11,37,69,.07);cursor:pointer;display:flex;flex-direction:column}
    .rcard:active{transform:scale(.98)}
    .rcard .radd{position:absolute;top:8px;right:8px;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#ff7a6b,#e85555);color:#fff;font-size:25px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;z-index:2;cursor:pointer;box-shadow:0 5px 14px rgba(232,85,85,.42)}
    .rcard .redit{position:absolute;top:8px;left:8px;font-size:18px;z-index:2;cursor:pointer;background:rgba(255,255,255,.92);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#e85555;box-shadow:0 3px 10px rgba(11,37,69,.16)}
    .rcard .rimg{height:96px;display:flex;align-items:center;justify-content:center;font-size:44px;background-size:cover;background-position:center;color:#fff}
    .rcard .rimg.emo{background:#f4f6f9;margin:10px 10px 0;border-radius:12px;height:86px;color:inherit}
    .rcard .rimg.ph{position:relative}
    .rbadge{position:absolute;left:7px;bottom:7px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 2px 6px rgba(11,37,69,.22)}
    .rcard .rbody{padding:9px 11px 12px}
    .rcard .rnm{font-size:13.5px;font-weight:800;line-height:1.25;color:#1f2733;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
    .rcard .rmac{font-size:11.5px;color:#8792a3;margin-top:3px;font-weight:600}
    .rtag{display:inline-block;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:14px;margin-top:7px}
    .t-bfast{background:#fff3e2;color:#b26a00}.t-lunch{background:#e7f6ee;color:#0f6e56}.t-dinner{background:#eee9ff;color:#5b3fd8}.t-snack{background:#ffe9ef;color:#b8365a}
    .rnew{border:2px dashed #f2c6bd;background:#fff7f4;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#c2410c;font-weight:800;font-size:13px;min-height:150px;cursor:pointer;text-align:center}
    .rnew .pl{width:42px;height:42px;border-radius:50%;background:#ffece9;display:flex;align-items:center;justify-content:center;font-size:23px;color:#e85555}
    .rb-photo{position:relative;height:150px;border-radius:16px;border:2px dashed #cfd8e4;background:#f7f9fc;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;margin-top:6px}
    .rb-hint{position:absolute;bottom:8px;right:8px;background:rgba(11,37,69,.72);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:12px;display:flex;align-items:center;gap:4px}
    .rb-ph{display:flex;flex-direction:column;align-items:center;gap:6px;color:#7c8a9c;font-weight:700;font-size:13.5px}.rb-ph .ic{font-size:32px}
    .rb-hasphoto{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:44px;background-size:cover;background-position:center;color:#fff}
    .rb-or{display:flex;align-items:center;gap:9px;margin:12px 0 8px}.rb-or .ln{flex:1;height:1px;background:var(--line)}.rb-or span{font-size:11.5px;color:#9aa4b2;font-weight:700}
    .rb-emoji{display:flex;gap:8px;flex-wrap:wrap}.rb-emoji b{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer}.rb-emoji b.sel{border:2px solid #e85555;background:#fff4f1}
    .rb-seg{display:flex;gap:7px;flex-wrap:wrap}.rb-seg b{font-size:12.5px;font-weight:800;padding:9px 12px;border-radius:16px;background:#fff;border:1px solid var(--line);color:#5b6674;cursor:pointer}.rb-seg b.on{background:var(--dark);color:#fff;border-color:var(--dark)}
    .rb-ing{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}.rb-ing .ie{width:34px;height:34px;border-radius:9px;background:#f4f6f9;display:flex;align-items:center;justify-content:center;font-size:16px}.rb-ing .inm{flex:1;min-width:0}.rb-ing .inm b{font-size:13.5px;display:block}.rb-ing .inm span{font-size:11.5px;color:#8792a3}.rb-ing .ik{font-size:12.5px;font-weight:800}.rb-ing .rmv{color:#c2410c;font-weight:800;cursor:pointer;padding:0 4px}
    .rb-tot{display:flex;justify-content:space-between;background:#0b2545;color:#fff;border-radius:14px;padding:12px 16px;margin-top:14px}.rb-tot .tv{font-size:16px;font-weight:800}.rb-tot .tl{font-size:11px;opacity:.8;font-weight:700}
    .tk-ing{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
    .tk-nm{flex:1;min-width:0}.tk-nm b{font-size:14px;display:block;line-height:1.25}.tk-nm span{font-size:11.5px;color:#8792a3}
    .tk-amt{display:flex;align-items:center;gap:5px;flex:0 0 auto}
    .tk-in{width:66px;padding:9px 8px;text-align:right;font-size:15px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
    .tk-u{font-size:12.5px;font-weight:700;color:#8792a3}.tk-x{font-size:15px;font-weight:800;color:#8792a3}
    .mb-item input[type=checkbox]{width:20px;height:20px}
/* ===== block 4 of 10, moved verbatim from index.html ===== */
    .hh-list{display:flex;flex-direction:column;gap:9px}
    .hh-pick{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;background:#fff;border:1px solid rgba(120,140,170,.2);border-radius:12px;padding:13px 14px;font-size:14.5px;font-weight:700;color:#1f2733;cursor:pointer}
    .hh-pick:active{background:rgba(255,107,107,.06)}
    .hh-pick .arw{color:#ff6b6b;font-size:18px;font-weight:800}
    .hh-back{background:none;border:none;color:#e0574f;font-weight:800;font-size:13px;cursor:pointer;padding:2px 0;margin-bottom:10px}
    .hh-steps{display:flex;flex-direction:column;gap:9px}
    .hh-step{font-size:13.5px;color:#334;line-height:1.5;display:flex;gap:10px;align-items:flex-start}
    .hh-step .n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgba(255,107,107,.14);color:#e0574f;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px}
/* ===== block 5 of 10, moved verbatim from index.html ===== */
    .storyprev{background:#23272f;border-radius:14px;padding:8px;display:flex;justify-content:center;align-items:center;max-height:52vh;overflow:hidden}
    .storyprev img{max-height:48vh;width:auto;max-width:100%;border-radius:10px;display:block}
    .exshare{flex:0 0 auto;width:38px;height:38px;border:none;border-radius:50%;background:rgba(120,140,170,.12);color:var(--dark);font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:6px}
    .exshare:active{transform:scale(.92)}
    .pickbtn{display:flex;align-items:center;gap:12px;width:100%;margin:8px 0 0;padding:15px 16px;border:1px solid rgba(120,140,170,.2);border-radius:14px;background:#fff;color:var(--dark);font-size:15px;font-weight:700;cursor:pointer;text-align:left}
    .pickbtn:active{transform:scale(.98);background:rgba(255,107,107,.06)}
    .pickbtn .pkico{flex:0 0 auto;width:34px;height:34px;border-radius:10px;background:rgba(255,107,107,.12);color:#ff6b6b;display:flex;align-items:center;justify-content:center;font-size:17px}
    .pickbtn .pksub{display:block;font-size:12px;font-weight:600;color:var(--muted,#8a94a6);margin-top:2px}
/* ===== block 6 of 10, moved verbatim from index.html ===== */
    .miniov{position:fixed;inset:0;z-index:9999;background:rgba(11,37,69,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px}
    .miniov.open{display:flex;animation:sheetUp .26s cubic-bezier(.22,1,.36,1)}
    .minicard{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,.6);border-radius:20px;padding:16px 16px 14px;width:100%;max-width:330px;box-shadow:0 24px 60px rgba(11,37,69,.32), inset 0 1px 0 rgba(255,255,255,.7)}
    /* when the on-screen keyboard is up, lift the pop-up to the top and let it scroll ABOVE the keyboard
       so the fields you're typing in and the Save button stay visible and reachable */
    body.kb-open .miniov{align-items:flex-start;padding-top:calc(env(safe-area-inset-top) + 8px);padding-bottom:8px}
    body.kb-open .minicard{max-height:calc(100vh - var(--kb-height, 320px) - 16px);overflow-y:auto;-webkit-overflow-scrolling:touch}
    .minihd{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
    .minihd b{font-size:18px;color:var(--dark)}.minihd span{cursor:pointer;color:#4a5460;font-size:22px;line-height:1;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(120,140,170,.14);flex:0 0 auto}
    /* Check-in form only: bigger, more readable pop-up + taller scrollable typing boxes (client feedback) */
    #checkinModal{padding:14px}
    #checkinModal .minicard,#checkinModal .totcard{max-width:480px}
    #checkinModal .minihd b{font-size:20px}
    #checkinModal .q{margin:18px 0}
    #checkinModal .q label{font-size:16px;margin-bottom:8px;line-height:1.35}
    #checkinModal .q input,#checkinModal .q textarea,#checkinModal .fld{font-size:16.5px;padding:14px}
    #checkinModal .q textarea{min-height:120px;max-height:230px;overflow-y:auto;resize:vertical;line-height:1.5}
    #checkinModal .scale b{font-size:15px;padding:11px 13px}
    #checkinModal .ci-auto-title{font-size:14px}
    #checkinModal .ci-auto-hd b{font-size:15px}
    #checkinModal .ci-auto-row label{font-size:12px}
    #checkinModal .ci-auto-row input{font-size:16.5px;padding:11px}
    /* Smooth check-in scrolling: ONE scroll area (the questions). Title + progress stay at the top and the
       Submit button at the bottom. Before, the card, the question list and every text box each scrolled,
       so a swipe got caught by whichever was under the finger ("sticky"). The card is solid white here,
       because a blurred glass card has to be redrawn on every frame of a scroll. */
    #checkinModal .totcard{display:flex;flex-direction:column;overflow:hidden;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
      max-height:88vh;max-height:calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:16px 16px 12px}
    #checkinModal .minihd{flex:0 0 auto;margin-bottom:8px}
    #ciModalScroll{flex:1 1 auto;min-height:0;max-height:none!important;margin:0 -16px 6px!important;padding:0 16px 4px;
      overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding:16px 0 28px}
    #ciModalScroll::after{content:"";display:block;position:sticky;bottom:-4px;height:26px;margin-top:-22px;pointer-events:none;background:linear-gradient(rgba(255,255,255,0),#fff)}
    #checkinModal .totsave,#checkinModal .totcancel{flex:0 0 auto}
    #checkinModal .totcancel{padding:10px}
    body.kb-open #checkinModal .totcard{max-height:calc(100vh - var(--kb-height, 320px) - 16px);overflow:hidden}
    /* text boxes grow with the answer instead of scrolling inside the form */
    #checkinModal .q textarea{max-height:none;overflow:hidden;resize:none}
    /* progress: "3 of 7 answered" + bar */
    .ci-prog{flex:0 0 auto;margin:0 0 6px}
    .ci-prog-tx{display:flex;justify-content:space-between;font-size:12.5px;font-weight:700;color:var(--grey);margin-bottom:6px}
    .ci-prog-tx b{color:var(--dark)}
    .ci-prog-tx.all b,.ci-prog-tx.all{color:var(--green)}
    .ci-prog-bar{height:6px;border-radius:6px;background:#eef1f5;overflow:hidden}
    .ci-prog-bar i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--blue),var(--blue-d));transition:width .3s cubic-bezier(.22,1,.36,1)}
    .ci-prog-tx.all + .ci-prog-bar i{background:var(--green)}
    /* numbered questions, with a tick once answered and a coral outline on any skipped at Submit */
    #checkinModal .q{position:relative;padding:12px 12px 14px;margin:12px 0;border-radius:14px;background:#f8fafc;border:1.5px solid transparent;transition:border-color .2s,background .2s}
    #checkinModal .q label{display:flex;gap:10px;align-items:flex-start}
    .ci-qn{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:#e7ebf1;color:#4a5460;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:-1px;transition:background .2s,color .2s}
    #checkinModal .q.done .ci-qn{background:var(--green);color:#fff;font-size:0}
    #checkinModal .q.done .ci-qn::before{content:"✓";font-size:13px}
    #checkinModal .q.ci-missing{border-color:var(--blue);background:#fff5f3}
    #checkinModal .q.ci-missing .ci-qn{background:var(--blue);color:#fff}
    #checkinModal .q input,#checkinModal .q textarea{background:#fff}
    #checkinModal .scale b{transition:transform .14s cubic-bezier(.22,1,.36,1),background .14s,color .14s;background:#fff;border:1px solid var(--line)}
    #checkinModal .scale b.sel{background:var(--blue);color:#fff;border-color:var(--blue)}
    #checkinModal .scale b:active{transform:scale(.95)}
    .optrow{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:13px;margin-bottom:8px;cursor:pointer;transition:border-color .18s,background .18s}
    .optrow.on{border-color:var(--blue);background:#fff5f3}
    .optrow .tx{flex:1}.optrow .tx b{font-size:14px;color:var(--dark);display:block}.optrow .tx span{font-size:12px;color:var(--grey)}
    .optrow .tcheck{color:var(--blue);font-weight:800;font-size:17px}
/* ===== block 7 of 10, moved verbatim from index.html ===== */
    /* workout overview */
    .ovtop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:2px 0 12px}
    .ovtitle{font-size:19px;font-weight:800;color:var(--dark)}
    .ovmeta{font-size:12px;color:var(--grey);margin-top:2px}
    .notebtn{flex:0 0 auto;background:rgba(255,107,107,.12);color:var(--blue);border:1px solid rgba(255,107,107,.28);border-radius:20px;padding:8px 12px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
    .ovblock{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 12px 8px;margin-bottom:10px}
    .ovhd{display:flex;align-items:center;gap:10px;margin-bottom:6px}
    .ovhdmid{display:flex;flex-direction:column;line-height:1.2}
    .ovhdmid b{font-size:14px;color:var(--dark)}
    .ovss{font-size:10.5px;color:var(--blue);font-weight:700}
    .blkbadge{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#eef2f8;color:var(--dark);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
    .blkbadge.warm{background:#e7f6ee;color:var(--green)}
    .blkbadge.big{width:38px;height:38px;font-size:17px}
    .ovrow{display:flex;align-items:center;gap:10px;padding:7px 2px;border-top:1px solid #f2f4f8}
    .ovrow:first-of-type{border-top:none}
    .ovthumb{width:34px;height:34px;border-radius:9px;flex:0 0 auto;overflow:hidden;background:#eef2f8}
    .ovthumb img{width:100%;height:100%;object-fit:cover;display:block}
    .ovmid{flex:1;display:flex;flex-direction:column;line-height:1.2}
    .ovmid b{font-size:14px;color:var(--dark)}
    .ovmid span{font-size:11px;color:var(--grey)}
    .ovtgt{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--dark);display:flex;align-items:center;gap:2px}
    .ovchev{color:var(--grey);font-size:15px;font-weight:400}
    /* segmented run */
    .runbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}
    .blkpills{display:flex;gap:9px;overflow-x:auto;padding:7px 10px 11px;-webkit-overflow-scrolling:touch}
    .blkpills::-webkit-scrollbar{display:none}
    .blkpill{flex:0 0 auto;width:40px;height:40px;border-radius:50%;color:var(--grey);
      background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
      border:1px solid rgba(255,255,255,.6);box-shadow:0 4px 14px rgba(11,37,69,.10), inset 0 1px 0 rgba(255,255,255,.7);
      display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;cursor:pointer;
      transition:transform .3s cubic-bezier(.22,1,.36,1),background .22s,color .22s,box-shadow .22s}
    .blkpill.on{background:rgba(255,107,107,.92);color:#fff;border-color:rgba(255,255,255,.5);transform:scale(1.12);box-shadow:0 8px 22px rgba(232,90,48,.36), inset 0 1px 0 rgba(255,255,255,.5)}
    .blkpill.done{color:var(--green);background:rgba(231,246,238,.75)}
    .blkpill.done.on{background:rgba(255,107,107,.92);color:#fff}
    @keyframes blockInR{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
    @keyframes blockInL{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
    .blockanim{animation:blockInR .3s cubic-bezier(.22,1,.36,1)}
    .blockanim.rev{animation-name:blockInL}
    .blkpill.done{background:#e7f6ee;color:var(--green)}
    .blkpill.done.on{background:var(--blue);color:#fff}
    .blkhead{display:flex;align-items:center;gap:10px;margin:6px 0 10px}
    .blkhead b{font-size:16px;color:var(--dark)}
    .blksub{display:block;font-size:11px;color:var(--grey)}
    .runnav{display:flex;gap:10px;align-items:center;margin-top:14px;margin-bottom:26px}
    .runnav .btn{margin-top:0;flex:1;min-width:0}
    .runnav .btn.ghost{flex:0 0 38%}
    /* coach note pop-up */
    .cnvid{border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/9;margin:8px 0 14px}
    .cnvid iframe,.cnvid video{width:100%;height:100%;border:0;display:block}
    .cntext{font-size:15px;line-height:1.55;color:var(--ink);white-space:pre-wrap}
    .cnby{margin-top:14px;font-size:12px;color:var(--grey);font-weight:700}
/* ===== block 8 of 10, moved verbatim from index.html ===== */
    .nutdate{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 8px;margin:6px 0 10px}
    .ndbtn{width:44px;height:44px;border:none;background:#eef1f5;border-radius:10px;font-size:24px;font-weight:700;color:var(--dark);cursor:pointer;flex:0 0 auto}
    .ndlbl{flex:1;text-align:center;cursor:pointer;display:flex;flex-direction:column;line-height:1.15}
    .ndlbl b{font-size:15px;color:var(--dark)}
    .ndlbl span{font-size:10px;color:#9aa5b3}
    .ndweekly{border:none;background:#ffece9;color:#b23b3b;font-weight:700;font-size:12px;border-radius:9px;padding:9px 10px;cursor:pointer;flex:0 0 auto}
    .wkavgs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
    .wkac{background:#f7f9fc;border-radius:12px;padding:12px}
    .wkac-l{font-size:12px;color:#8792a3;font-weight:700}
    .wkac b{display:block;font-size:22px;color:var(--dark);margin:2px 0}
    .wkac b small{font-size:12px;color:#9aa5b3;font-weight:600}
    .wkac-s{font-size:11px;font-weight:700}
    .wkr{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;gap:4px;padding:8px 4px;border-bottom:1px solid #f0f2f6;font-size:13px;text-align:right}
    .wkr span:first-child{text-align:left}
    .wkr-hd{color:#9aa5b3;font-size:10px;font-weight:800;border-bottom:1px solid var(--line)}
    .wkr-d{font-weight:700;color:var(--dark)}
    .wkr-today{background:#fff7f4;border-radius:8px}
    .videomodal{position:fixed;inset:0;z-index:10001;background:rgba(11,37,69,.72);-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);display:none;flex-direction:column;padding:calc(env(safe-area-inset-top) + 14px) 14px calc(env(safe-area-inset-bottom) + 14px)}
    .videomodal.open{display:flex}
    .vm-top{display:flex;align-items:center;justify-content:space-between;color:#fff;padding:4px 4px 12px;gap:12px}
    .vm-top b{font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .vm-x{font-size:26px;cursor:pointer;color:#fff;flex:0 0 auto;line-height:1}
    .vm-desc{width:100%;max-width:680px;align-self:center;margin:16px auto 6px;padding:14px 16px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:14px;color:#eef4fc;font-size:14.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
    .vm-desc h4{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#ffb59d}
    .citrend{display:flex;gap:6px;flex-wrap:wrap}
    .cicell{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;cursor:pointer;transition:transform .12s}
    .cicell:active{transform:scale(.92)}
    .cicell.done{background:#e7f6ee;color:#22a565}.cicell.miss{background:#fdeaea;color:#e5484d}.cicell.up{background:#eef2f6;color:#b6bfca}
    .cicell.wait{background:#fff4e5;color:#f0a53a}
    .wo-toggle{display:flex;width:100%;margin:0 0 14px}.wo-toggle span{flex:1;text-align:center}
    .wo-search{width:100%;margin:0 0 14px}
    .live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
    .live-card{background:var(--card,#fff);border:1px solid #eef1f5;border-radius:14px;overflow:hidden;cursor:pointer;box-shadow:0 2px 10px rgba(11,37,69,.05);transition:transform .12s,box-shadow .12s}
    .live-card:active{transform:scale(.98)}
    .live-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f0f2f6}
    .live-thumb.noimg{background:linear-gradient(135deg,#ff9a9a,#ff6b6b)}
    .live-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .live-thumb .live-ph{font-size:34px}
    .live-more{width:100%;margin-top:14px}
    .live-play{position:absolute;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;padding-left:2px}
    .live-done{position:absolute;top:7px;right:7px;background:#22a565;color:#fff;font-size:10px;font-weight:800;padding:2px 7px;border-radius:20px}
    .live-meta{padding:9px 11px 11px}.live-meta b{font-size:14px;color:var(--ink);display:block;line-height:1.25;margin-bottom:2px}
    .live-meta span{font-size:11.5px;color:var(--grey)}
    .lwhd{margin:2px 0 8px}.lwhd b{font-size:17px;color:var(--ink);display:block}
    .lwnote{background:#fff6ed;border:1px solid #ffe1c2;color:#8a5a2a;border-radius:11px;padding:9px 12px;font-size:13px;margin:0 0 12px}
    /* live workout action buttons */
    .lwacts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 12px}
    .lwact{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:13px 6px;border-radius:14px;border:1.5px solid var(--line);background:#fff;color:var(--dark);font-size:12px;font-weight:800;cursor:pointer;line-height:1.15;text-align:center}
    .lwact span{font-size:11.5px}
    .lwact:active{transform:scale(.96)}
    .lwact.on{border-color:#ff6b6b;background:#fff1ee;color:#e85555}
    .lwact.done{border-color:#22a565;color:#16794a}
    .lwact.done.is-done{background:#e4f6ec}
    /* live workout comments */
    .lwc-box{display:flex;gap:8px;align-items:flex-end;margin:4px 0 12px}
    .lwc-box textarea{flex:1;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px;font-family:inherit;resize:none;background:#fff;color:var(--ink)}
    .lwc-list{display:flex;flex-direction:column;gap:10px;padding-bottom:24px}
    .lwc-item{display:flex;gap:10px;align-items:flex-start;position:relative}
    .lwc-av{width:34px;height:34px;flex:0 0 auto;border-radius:50%;background:linear-gradient(135deg,#ff9a8b,#e85555);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
    .lwc-b{flex:1;background:#fff;border:1px solid #eef1f5;border-radius:12px;padding:9px 12px;min-width:0}
    .lwc-h{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
    .lwc-h b{font-size:13px;color:var(--dark)}.lwc-h span{font-size:11px;color:#9aa4b2;flex:0 0 auto}
    .lwc-t{font-size:13.5px;color:var(--ink);margin-top:2px;word-break:break-word}
    .lwc-del{position:absolute;top:6px;right:8px;color:#c2cad6;font-size:18px;cursor:pointer;line-height:1}
    .vwrap{position:relative;flex:0 0 auto;width:100%;max-width:860px;margin:0 auto;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
    .vwrap iframe,.vwrap video{position:absolute;inset:0;width:100%;height:100%;border:0}
    .vwrap .vposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:opacity .35s;z-index:1}
    .vwrap .vload{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;font-size:13px;background:rgba(0,0,0,.35);pointer-events:none;z-index:2;transition:opacity .35s}
    .vwrap .vload .lh-spin{width:34px;height:34px;border-width:3px}
    .vwrap.ready .vposter,.vwrap.ready .vload{opacity:0}
    .ytfallback{margin:6px 2px 2px;text-align:right}
    .ytfallback a{color:var(--grey,#8a94a3);font-weight:600;font-size:12px;text-decoration:none}
    .vfallback{max-width:420px;margin:auto;text-align:center;color:#fff;background:rgba(255,255,255,.06);border-radius:16px;padding:26px 22px}
    .vfallback b{display:block;font-size:17px;margin:6px 0}
    .vfallback .btn{margin-top:14px;display:inline-block}
/* ===== block 9 of 10, moved verbatim from index.html ===== */
    .exd-tabs{display:flex;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:5px;margin:0 auto 12px;max-width:680px;width:100%}
    .exd-tab{flex:1;border:none;background:transparent;color:#dbe6f2;font-size:13.5px;font-weight:700;padding:9px 6px;border-radius:10px;cursor:pointer}
    .exd-tab.on{background:#fff;color:#12202f}
    #exdBody{max-width:680px;width:100%;align-self:center;color:#eef4fc}
    .exd-pad{padding:2px 2px 20px}
    .exd-lbl{display:block;font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#ffb59d;margin:2px 0 8px}
    .exd-ta{width:100%;min-height:92px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);color:#fff;padding:12px 14px;font:inherit;font-size:15px;line-height:1.5;resize:vertical;box-sizing:border-box}
    .exd-ta::placeholder{color:rgba(255,255,255,.5)}
    #exdBody .btn.full{margin-top:10px}
    .exd-sub{font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#9fb2c8;margin:22px 0 10px}
    .exd-note{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:13px;padding:11px 14px;margin-bottom:9px;font-size:14.5px;line-height:1.5}
    .exd-note-d{font-size:11.5px;font-weight:800;color:#9fb2c8;margin-bottom:4px}
    .exd-hcard{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 14px;margin-bottom:11px}
    .exd-hd{font-size:13px;font-weight:800;color:#cdd9e7;margin-bottom:8px}
    .exd-hhead,.exd-hrow{display:grid;grid-template-columns:56px 1fr 1fr;align-items:center;gap:8px}
    .exd-hhead{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#8ba0b8;padding:0 0 6px}
    .exd-hrow{padding:7px 0;border-top:1px solid rgba(255,255,255,.08);font-size:14.5px;font-weight:600}
    .exd-hs{width:30px;height:30px;border-radius:9px;background:rgba(255,107,107,.18);color:#ff8f8f;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
    .exd-chart{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 14px 8px;margin-bottom:12px}
    .exd-chd{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
    .exd-chd b{font-size:22px;color:#fff}
    .exd-chd span{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#9fb2c8}
    .exd-svg{width:100%;height:120px;display:block;overflow:visible}
    #exdBody .muted{color:#9fb2c8;font-size:14px}
/* ===== block 10 of 10, moved verbatim from index.html (lh-desktop) ===== */
  @media (min-width:1000px){
    html,body{height:100%}

    /* frame: drop the 480px phone cap, become a full-width desktop shell */
    .app{max-width:none;width:100%;min-height:100vh;box-shadow:none;
         background:var(--bg);padding-left:236px;box-sizing:border-box}

    /* bottom tab bar  ->  fixed left NAVY sidebar (matches the coach dashboard) */
    nav{position:fixed;left:0;top:0;bottom:0;transform:none;width:236px;height:auto;
        flex-direction:column;justify-content:flex-start;align-items:stretch;gap:5px;
        background:linear-gradient(185deg,#12315a 0%,#0b2141 60%,#0a1c37 100%);
        border:0;border-right:1px solid rgba(255,255,255,.06);border-radius:0;
        padding:32px 14px 22px;box-shadow:2px 0 30px rgba(11,20,40,.18);
        backdrop-filter:none;-webkit-backdrop-filter:none}
    nav::before{content:"";display:block;flex:0 0 auto;height:34px;margin:0 6px 18px;
        background:url(logo-coral.png) left center/30px no-repeat;
        border-bottom:1px solid rgba(255,255,255,.10);padding-bottom:18px}
    nav a{flex:0 0 auto;display:flex;align-items:center;gap:12px;text-align:left;
          font-size:14.5px;font-weight:700;color:#c3cee0;padding:12px 14px;border-radius:12px}
    nav a .i{display:inline;margin:0;font-size:19px;filter:none;opacity:.92}
    nav a.on{color:#fff;background:linear-gradient(135deg,rgba(255,107,107,.96),rgba(232,85,85,.96));
             box-shadow:0 8px 20px rgba(232,85,85,.34)}
    nav a.on .i{opacity:1}
    nav a:hover:not(.on){background:rgba(255,255,255,.08)}
    .navpill{display:none}
    .navscrim{display:none}

    /* header spans the content area (right of the sidebar) */
    header{padding:18px 40px 14px}

    /* content: comfortable centred column, no bottom-nav gap needed */
    main{padding:10px 40px 64px}
    .hero,body.homepanel .pagehero{margin-left:-40px;margin-right:-40px;border-radius:0 0 28px 28px}
    main>.view{max-width:1000px;margin:0 auto}

    /* full-screen overlays were phone-width; give them room on a big screen */
    .chatview,.commthread{max-width:760px}
    .fooddetail{max-width:720px}

    /* live / on-demand player: video large on the left, live chat beside it */
    .lp-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;align-items:start}
    .lp-side #liveCommentsWrap{display:block!important}
    .lp-side .lwc-list{max-height:54vh;overflow-y:auto}
  }
  /* middle tier for small laptops / iPad landscape */
  @media (min-width:1000px) and (max-width:1240px){
    main>.view{max-width:900px}
  }
/* ===== Workout screen: gym-readable sizes (client feedback 2026-09-29: "text v small, would have needed
   glasses" on an iPhone 15). Scoped to #exList (the workout player) so no other screen changes: bigger
   exercise names, set numbers, typed weights/reps and tick buttons, and less nested padding in supersets
   so the rows keep their width on a 6.1" phone. ===== */
#exList .exh b{font-size:17.5px;line-height:1.25}
#exList .meta{font-size:14px;line-height:1.45}
#exList .glabel{font-size:12.5px;padding:3px 7px}
#exList .lastw{font-size:13.5px;margin:8px 0 2px}
#exList .swap{font-size:14px}
#exList .swap select{font-size:15px;padding:9px 8px}
#exList .setr{padding:10px 10px;gap:9px;border-radius:13px;margin-top:9px}
#exList .setr .n{font-size:15px;font-weight:800;width:30px}
#exList .setr .fw label{font-size:12px;font-weight:700;margin-bottom:3px}
#exList .setr input{font-size:19px;font-weight:700;padding:10px 4px;border-radius:10px;color:var(--dark)}
#exList .setr .chk{width:40px;height:40px;font-size:19px;border-width:2.5px}
#exList .tmr-tgt{font-size:14.5px}
#exList .tmr-disp{font-size:21px}
#exList .tmr-btn{font-size:15px;padding:9px 14px}
#exList .tmr-cur{font-size:16px}
#exList .setr.timed .tmr-w{flex:0 0 64px}
#exList .setr .prev{font-size:12px}
#exList .blkhead b{font-size:19px}
#exList .blksub{font-size:13px}
#exList .sslab{font-size:13px}
#exList .ssorder{font-size:13.5px}
#exList .ssround-h b{font-size:17px}
#exList .ssround-h b small{font-size:13.5px}
#exList .ssround-h span{font-size:13.5px}
#exList .ssrest{font-size:14.5px;padding:8px 0 4px}
#exList .ssrounds .setr .n{min-width:32px}
/* supersets: three boxes inside each other took ~60px of width; slim the inner ones on phones */
@media (max-width:480px){
  #exList .ssblock{padding:12px 8px 8px;margin:14px -4px}
  #exList .ssround{padding:8px 5px 6px}
  #exList .ssround .ssx.exwrap{padding:11px 10px}
}
/* live workout weight tracker: "Section B of A–C" above the Back / Next section buttons */
.lwnav-step{text-align:center;font-size:13px;font-weight:700;color:var(--grey);margin:14px 0 2px}