/* SanoobFit liquid glass (SAMPLE 2, branch glass-sample, 18 Oct 2026; docs/glass/README.md).
   One shared file, loaded last by each page it covers; not loading it brings back today's look.
   Copies only the look of the founder's reference (18 Oct 2026, 05:15): every text, layout, feature and card stays.
   - Rims: a thin rim on every card and button, brightest along the top and fading down the sides (a gradient drawn in
     the border box under a see-through fill), with an inner highlight along the top inside edge and a soft shadow.
   - Tinted rims: Training green, Nutrition gold, the Premium badge gold; neutral cards white-silver.
   - Fixed things (top bar, tab bar, sheets) are blurred glass; cards and rows are see-through without blur, which keeps
     scrolling smooth on Android (measured, docs/glass/README.md).
   - The background is near-black with soft diagonal light streaks and a faint glow, drawn once and fixed. */

:root{
  --g-bg:#07080a;
  --g-streaks:
    linear-gradient(118deg, transparent 14%, rgba(255,255,255,.085) 24%, transparent 34%),
    linear-gradient(118deg, transparent 48%, rgba(255,255,255,.065) 56%, transparent 64%),
    linear-gradient(118deg, transparent 74%, rgba(255,255,255,.055) 80%, transparent 87%),
    radial-gradient(90% 55% at 15% 0%, rgba(198,242,78,.10), transparent 60%),
    radial-gradient(80% 50% at 100% 45%, rgba(90,170,220,.10), transparent 62%);
  /* a card: see-through dark glass */
  --g-fill: linear-gradient(170deg, rgba(255,255,255,.10), rgba(255,255,255,.025) 45%, rgba(255,255,255,.045)), linear-gradient(rgba(16,19,24,.38), rgba(16,19,24,.38));
  /* rims: brightest on top, fading down the sides */
  --g-rim: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.30) 30%, rgba(255,255,255,.10) 68%, rgba(255,255,255,.20));
  --g-rim-green: linear-gradient(180deg, rgba(225,255,150,1), rgba(198,242,78,.6) 34%, rgba(198,242,78,.22) 72%, rgba(198,242,78,.4));
  --g-rim-gold: linear-gradient(180deg, rgba(255,222,150,1), rgba(245,166,35,.6) 34%, rgba(245,166,35,.22) 72%, rgba(245,166,35,.4));
  --g-rim-blue: linear-gradient(180deg, rgba(170,230,255,1), rgba(90,170,220,.55) 34%, rgba(90,170,220,.2) 72%, rgba(90,170,220,.38));
  --g-inner: inset 0 1px 0 rgba(255,255,255,.30), inset 0 14px 22px -14px rgba(255,255,255,.22);
  --g-shadow: 0 16px 30px -16px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.35);
  /* a pill or button: a touch lighter, raised */
  --g-pill: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04) 55%, rgba(0,0,0,.12)), linear-gradient(rgba(24,28,34,.5), rgba(24,28,34,.5));
  --g-bevel: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.4), 0 8px 16px -6px rgba(0,0,0,.75);
  --g-bar: rgba(12,14,18,.82);
  --g-sheet: rgba(16,19,24,.86);
  --g-blur: blur(22px) saturate(170%);
  --g-r-card: 24px;
}

/* ---- background: near-black, soft diagonal streaks, a faint glow (one fixed layer) ---- */
html body{background-color:var(--g-bg) !important}
html body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--g-streaks)}
/* a page that already uses this layer (the app frame uses it as a status-bar strip with its own height) still gets it full screen (step 5) */
html body::before{top:0 !important;right:0 !important;bottom:0 !important;left:0 !important;height:auto !important;width:auto !important}
html body #p-home{background:transparent !important}
/* a page shown inside Train (My Plan (APEX), an Explore programme) is see-through and uses Train's background */
html.sfg-nested, html.sfg-nested body{background:transparent !important}
html.sfg-nested body::before{display:none}

/* ---- the rim technique: fill in the padding box, rim gradient in the border box ---- */
html body .tt-ribbon, html body .home-activity, html body .fav-card, html body .posture-strip,
html body .pv-card, html body .lrow, html body .ptabbar, html body .mps-row,
html body .flip-face.cover{
  border:1px solid transparent !important;
  background:var(--g-fill) !important;
  box-shadow:var(--g-inner), var(--g-shadow) !important;
}
/* bigger corners */
html body .home-activity, html body .fav-card, html body .posture-strip, html body .flip-face.cover,
html body .pv-card, html body .ptabbar{border-radius:var(--g-r-card) !important}
html body .tt-ribbon{border-radius:18px !important}
html body .lrow, html body .mps-row{border-radius:18px !important}

/* tinted rims: each card's own colour, a faint wash of it inside */
html body .flip-face.cover.cover-train{
  background:linear-gradient(160deg, rgba(198,242,78,.12), transparent 55%), var(--g-fill) !important;
  box-shadow:var(--g-inner), 0 0 22px -8px rgba(198,242,78,.45), var(--g-shadow) !important;
}
html body .flip-face.cover.cover-nutri{
  background:linear-gradient(160deg, rgba(245,166,35,.12), transparent 55%), var(--g-fill) !important;
  box-shadow:var(--g-inner), 0 0 22px -8px rgba(245,166,35,.45), var(--g-shadow) !important;
}
html body .posture-strip{
  background:linear-gradient(160deg, rgba(60,150,200,.30), rgba(30,70,100,.18) 60%), var(--g-fill) !important;
  box-shadow:var(--g-inner), 0 0 22px -8px rgba(90,170,220,.45), var(--g-shadow) !important;
}
/* the row you are on keeps its lime outline, as a glowing rim */
html body .lrow.on{
  background:linear-gradient(160deg, rgba(198,242,78,.10), transparent 60%), var(--g-fill) !important;
  box-shadow:var(--g-inner), 0 0 0 1px rgba(198,242,78,.55), 0 0 20px -8px rgba(198,242,78,.5), var(--g-shadow) !important;
}

/* icon tiles: small rounded glass squares tinted with the card's colour */
html body .cover-train .cv-ic{background:linear-gradient(180deg, rgba(198,242,78,.30), rgba(198,242,78,.10)) !important;border:1px solid transparent !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px -4px rgba(0,0,0,.6) !important;border-radius:12px !important}
html body .cover-nutri .cv-ic{background:linear-gradient(180deg, rgba(245,166,35,.30), rgba(245,166,35,.10)) !important;border:1px solid transparent !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px -4px rgba(0,0,0,.6) !important;border-radius:12px !important}

/* ---- pills and buttons: rounded glass with a bright top rim and a raised bevel ---- */
html body .pdate-arrow, html body .hbar-ic, html body .pdate-pill, html body .fav-split, html body .fav-pill:not(.fav-split-main),
html body .ptab.ptab-side, html body .pv-chip, html body .pv-btn.ghost, html body .ag-help{
  border:1px solid transparent !important;
  background:var(--g-pill) !important;
  box-shadow:var(--g-bevel) !important;
}
html body .pdate-arrow, html body .hbar-ic, html body .ag-help{border-radius:50% !important}
html body .pdate-pill{border-radius:999px !important;padding-left:18px !important;padding-right:18px !important}
/* inside the split favourite the two halves share one pill */
html body .fav-split .fav-pill, html body .fav-split .fav-split-hist{background:transparent !important;border:0 !important;box-shadow:none !important}
html body .fav-split, html body .fav-pill{border-radius:999px !important}
/* the Premium badge: a glass pill with a soft gold glow */
html body .premium-badge{
  border:1px solid transparent !important;
  background:linear-gradient(135deg, rgba(212,175,55,.26), rgba(120,90,20,.08) 55%, rgba(212,175,55,.16)), var(--g-pill) !important;
  box-shadow:var(--g-bevel), 0 0 20px -5px rgba(212,175,55,.7) !important;
}

/* Activity day squares: soft rounded glass tiles; today's keeps its bright glowing rim */
html body .ag-mcell{border-radius:8px !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 2px rgba(0,0,0,.35) !important}
html body .ag-mcell.ag-today{box-shadow:0 0 0 2px rgba(255,255,255,.95) inset, 0 0 14px 2px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.4) !important}

/* ---- the rims: a ring on the edge only (brightest on top, fading down the sides), so the card stays see-through ---- */
html body .tt-ribbon, html body .home-activity, html body .fav-card, html body .posture-strip, html body .flip-face.cover,
html body .pdate-arrow, html body .hbar-ic, html body .pdate-pill, html body .fav-split, html body .fav-pill:not(.fav-split-main),
html body .ag-help, html body .premium-badge, html body .cv-ic,
html body .pv-card, html body .lrow, html body .ptabbar, html body .mps-row, html body .ptab.ptab-side, html body .pv-chip,
html body .pv-btn.ghost, html body .pv-sheet, html body .sfask-c{position:relative} /* the tab bar is already fixed, which anchors its rim */
html body .tt-ribbon::before, html body .home-activity::before, html body .fav-card::before, html body .posture-strip::before, html body .flip-face.cover::before,
html body .pdate-arrow::before, html body .hbar-ic::before, html body .pdate-pill::before, html body .fav-split::before, html body .fav-pill:not(.fav-split-main)::before,
html body .ag-help::before, html body .premium-badge::before, html body .cv-ic::before, html body .tabbar::before,
html body .pv-card::before, html body .lrow::before, html body .ptabbar::before, html body .mps-row::before, html body .ptab.ptab-side::before, html body .pv-chip::before,
html body .pv-btn.ghost::before, html body .pv-sheet::before, html body .sfask-c::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.2px;pointer-events:none;z-index:2;
  background:var(--g-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html body .flip-face.cover.cover-train::before, html body .cover-train .cv-ic::before, html body .lrow.on::before{background:var(--g-rim-green)}
html body .flip-face.cover.cover-nutri::before, html body .cover-nutri .cv-ic::before, html body .premium-badge::before{background:var(--g-rim-gold)}
html body .posture-strip::before{background:var(--g-rim-blue)}
/* inside the split favourite only the outer pill has a rim */
html body .fav-split .fav-pill::before{display:none}

/* ---- real glass: things that float over content (blurred) ---- */
html body .mpbar, html body .tabbar-scrim, html body #apxRoot .lbar{
  background:var(--g-bar) !important;
  -webkit-backdrop-filter:var(--g-blur) !important; backdrop-filter:var(--g-blur) !important;
}
html body .tabbar{
  border:1px solid transparent !important;
  background:linear-gradient(var(--g-bar), var(--g-bar)) !important;
  -webkit-backdrop-filter:var(--g-blur) !important; backdrop-filter:var(--g-blur) !important;
  box-shadow:var(--g-inner), 0 16px 36px -10px rgba(0,0,0,.75) !important;
}
html body .mpbar{border-bottom:1px solid rgba(255,255,255,.12) !important}
html body .mps-card, html body .pv-sheet, html body #apxToast, html body .sf-toast, html body .sfask-c{
  background:var(--g-sheet) !important;
  -webkit-backdrop-filter:var(--g-blur) !important; backdrop-filter:var(--g-blur) !important;
  box-shadow:var(--g-inner), 0 26px 60px -18px rgba(0,0,0,.85) !important;
}
html body .pv-sheet, html body #apxToast, html body .sf-toast, html body .sfask-c{border:1px solid transparent !important;background:linear-gradient(var(--g-sheet), var(--g-sheet)) !important}
html body .mps-back{-webkit-backdrop-filter:blur(10px) saturate(140%) !important;backdrop-filter:blur(10px) saturate(140%) !important}
/* the program selector keeps its blue design, with the glass top light; the Build tiles keep their gold outline */
html body .mp-sel{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 8px 22px -12px rgba(0,0,0,.6) !important}
html body .mps-build-tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px -14px rgba(0,0,0,.7) !important}
/* primary lime buttons stay solid lime, with the glass top light */
html body .pv-btn:not(.ghost), html body .lbig{box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 10px 24px -10px rgba(198,242,78,.45) !important}

/* ---- airy: a little more space between Home's cards ---- */
html body #p-home .tt-ribbon{margin-bottom:14px !important}
html body #p-home .dgrid{gap:14px !important}
html body #p-home .todo{gap:16px !important}

/* readability (measured, docs/glass/README.md): grey secondary text a touch lighter on glass */
html:not([data-theme="light"]) body .home-activity, html:not([data-theme="light"]) body .fav-card, html:not([data-theme="light"]) body .tt-ribbon,
html:not([data-theme="light"]) body .pv-card, html:not([data-theme="light"]) body .lrow, html:not([data-theme="light"]) body .ptabbar,
html:not([data-theme="light"]) body .mps-row, html:not([data-theme="light"]) body .mps-card, html:not([data-theme="light"]) body .pv-sheet,
html:not([data-theme="light"]) body .tabbar, html:not([data-theme="light"]) body .mpbar, html:not([data-theme="light"]) body #apxRoot .lbar,
html:not([data-theme="light"]) body .posture-strip, html:not([data-theme="light"]) body .flip-face.cover{--muted:#abb2bc}

/* ==== STEP 2: Train's other screens (18 Oct 2026; docs/glass/step2/) ====
   My Plan (APEX)'s Overview, guided workout and sheets; an Explore programme in Train (its page, week, exercise cards,
   guided workout, set and swap sheets); Quick Workout, Saved Workouts, Custom Programs. Same rules as the standard. */

/* full-screen layers that painted an opaque background: the glass background instead */
html[data-sfg="program"] body .qw-wrap, html[data-sfg="explore"] body .guide-page{background:var(--g-streaks), var(--g-bg) !important}
/* an Explore programme's page: the glass background; inside Train, see-through onto Train's; its header a glass bar */
html[data-sfg="explore"] body .prog-page{background:var(--g-streaks), var(--g-bg) !important}
html[data-sfg="explore"].sfg-nested body .prog-page{background:var(--g-streaks), var(--g-bg) !important}
html[data-sfg="explore"] body .pp-head{background:var(--g-bar) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important;border-bottom:1px solid rgba(255,255,255,.10) !important}

/* cards: see-through fill, edge-only rim (::before) */
html[data-sfg="explore"] body .pp-tabs, html[data-sfg="explore"] body .wk-deck, html body .ovr-week, html body #apxRoot .gstep.gactive, html[data-sfg="program"] body .qw-card, html[data-sfg="program"] body .cp-day,
html[data-sfg="program"] body .cp-ex, html[data-sfg="program"] body .sw-main, html[data-sfg="explore"] body .gl-day, html[data-sfg="explore"] body .stinfo-card, html[data-sfg="explore"] body .note-box, html[data-sfg="explore"] body .swap-item, html[data-sfg="explore"] body .pk-step{
  border:1px solid transparent !important;background:var(--g-fill) !important;box-shadow:var(--g-inner), var(--g-shadow) !important;position:relative;
}
html[data-sfg="explore"] body .pp-tabs, html[data-sfg="explore"] body .wk-deck, html body #apxRoot .gstep.gactive, html[data-sfg="explore"] body .gl-day, html[data-sfg="explore"] body .stinfo-card{border-radius:var(--g-r-card) !important}
html body .ovr-week, html[data-sfg="program"] body .qw-card, html[data-sfg="program"] body .cp-day, html[data-sfg="program"] body .cp-ex, html[data-sfg="program"] body .sw-main, html[data-sfg="explore"] body .note-box, html[data-sfg="explore"] body .swap-item, html[data-sfg="explore"] body .pk-step{border-radius:18px !important}
/* Explore's exercise card has pieces anchored outside it, so its rim is drawn as light on the edge instead of a ring */
html[data-sfg="explore"] body .pcard{
  border:1px solid rgba(255,255,255,.12) !important;background:var(--g-fill) !important;border-radius:18px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), inset 0 12px 20px -14px rgba(255,255,255,.22), var(--g-shadow) !important;
}
/* pills and round buttons: glass with the bright top rim and a raised bevel */
html[data-sfg="explore"] body .pp-side, html[data-sfg="explore"] body .wk-filter, html body .gclose, html body .garrow, html[data-sfg="program"] body .qw-close, html[data-sfg="program"] body .qw-save, html[data-sfg="program"] body .cp-move,
html[data-sfg="program"] body .cp-step-b, html[data-sfg="program"] body .sw-del, html[data-sfg="program"] body .sw-dup, html[data-sfg="explore"] body .guide-back, html[data-sfg="explore"] body .guide-prev{
  border:1px solid transparent !important;background:var(--g-pill) !important;box-shadow:var(--g-bevel) !important;position:relative;
}
html[data-sfg="explore"] body .sheet-x{border:1px solid transparent !important;background:var(--g-pill) !important;box-shadow:var(--g-bevel) !important}
html[data-sfg="explore"] body .pp-tabs::before, html[data-sfg="explore"] body .wk-deck::before, html body .ovr-week::before, html body #apxRoot .gstep.gactive::before, html[data-sfg="program"] body .qw-card::before,
html[data-sfg="program"] body .cp-day::before, html[data-sfg="program"] body .cp-ex::before, html[data-sfg="program"] body .sw-main::before, html[data-sfg="explore"] body .gl-day::before, html[data-sfg="explore"] body .stinfo-card::before,
html[data-sfg="explore"] body .note-box::before, html[data-sfg="explore"] body .swap-item::before, html[data-sfg="explore"] body .pk-step::before,
html[data-sfg="explore"] body .pp-side::before, html[data-sfg="explore"] body .wk-filter::before, html body .gclose::before, html body .garrow::before, html[data-sfg="program"] body .qw-close::before, html[data-sfg="program"] body .qw-save::before,
html[data-sfg="program"] body .cp-move::before, html[data-sfg="program"] body .cp-step-b::before, html[data-sfg="program"] body .sw-del::before, html[data-sfg="program"] body .sw-dup::before, html[data-sfg="explore"] body .guide-back::before, html[data-sfg="explore"] body .guide-prev::before,
html[data-sfg="explore"] body .sheet-x::before, html[data-sfg="explore"] body .sheet::before, html[data-sfg="explore"] body .prem-sheet::before, html[data-sfg="explore"] body .pick-sheet::before, html[data-sfg="explore"] body .swap-sheet::before, html[data-sfg="explore"] body .rgw-sheet::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.2px;pointer-events:none;z-index:2;background:var(--g-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* buttons and tiles with their own colour or a chosen state keep their outline: glass fill and bevel only */
html[data-sfg="explore"] body .gl-vm:not(.on), html body .ovr-seg, html[data-sfg="explore"] body .cell, html[data-sfg="explore"] body .exbtn, html[data-sfg="explore"] body .rest-b, html[data-sfg="explore"] body .vtbtn:not(.active),
html body .sfq-tile:not(.on):not(.sel), html[data-sfg="explore"] body .wk-chip:not(.on), html[data-sfg="explore"] body .gw-chip, html[data-sfg="explore"] body .swap-chip:not(.on), html[data-sfg="explore"] body .rest-skip{
  background:var(--g-pill) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32), inset 0 -2px 4px rgba(0,0,0,.3) !important;
}
html body .sfq-tile{border-radius:16px !important}
/* sheets: blurred glass with the rim */
html[data-sfg="explore"] body .sheet, html[data-sfg="explore"] body .prem-sheet, html[data-sfg="explore"] body .pick-sheet, html[data-sfg="explore"] body .swap-sheet, html[data-sfg="explore"] body .rgw-sheet, html[data-sfg="explore"] body .toast{
  background:var(--g-sheet) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important;
  box-shadow:var(--g-inner), 0 26px 60px -18px rgba(0,0,0,.85) !important;
}
/* bars that sit over content: blurred */
html[data-sfg="explore"] body .guide-foot, html[data-sfg="program"] body .qw-bar, html body #apxRoot .gbar{
  background:var(--g-bar) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important;border-top:1px solid rgba(255,255,255,.12) !important;
}
/* primary lime buttons stay solid lime, with the glass top light */
html[data-sfg="explore"] body .guide-next, html[data-sfg="explore"] body .gw-start, html body .gstart, html body .gcomplete, html[data-sfg="program"] body .cp-activate-btn, html[data-sfg="program"] body .qw-add{box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 22px -10px rgba(0,0,0,.6) !important}
/* readability on glass: grey secondary text a touch lighter */
html[data-sfg="explore"]:not([data-theme="light"]) body .pcard, html[data-sfg="explore"]:not([data-theme="light"]) body .pp-tabs, html[data-sfg="explore"]:not([data-theme="light"]) body .wk-deck,
html:not([data-theme="light"]) body .ovr-week, html:not([data-theme="light"]) body .gstep, html[data-sfg="program"]:not([data-theme="light"]) body .qw-card,
html[data-sfg="program"]:not([data-theme="light"]) body .cp-day, html[data-sfg="program"]:not([data-theme="light"]) body .cp-ex, html[data-sfg="program"]:not([data-theme="light"]) body .sw-main,
html[data-sfg="explore"]:not([data-theme="light"]) body .sheet, html[data-sfg="explore"]:not([data-theme="light"]) body .pick-sheet, html[data-sfg="explore"]:not([data-theme="light"]) body .swap-sheet,
html[data-sfg="explore"]:not([data-theme="light"]) body .prem-sheet, html[data-sfg="explore"]:not([data-theme="light"]) body .guide-page, html[data-sfg="program"]:not([data-theme="light"]) body .qw-wrap{--muted:#abb2bc;--text-2:#b6bcc4}

/* step 2 readability: grey text inside pills, the blue links on glass, and Reset this day (measured, docs/glass/step2/) */
html[data-sfg="explore"]:not([data-theme="light"]) body .gw-chip .gw-n, html[data-sfg="explore"]:not([data-theme="light"]) body .wk-chip, html:not([data-theme="light"]) body .pv-chip,
html:not([data-theme="light"]) body .ptab.ptab-side, html[data-sfg="explore"]:not([data-theme="light"]) body .pp-side{--muted:#c3c8cf}
html[data-sfg="explore"]:not([data-theme="light"]) body .gw-chip .gw-n{color:#c3c8cf !important}
html[data-sfg="explore"]:not([data-theme="light"]) body .exvid-fb, html[data-sfg="explore"]:not([data-theme="light"]) body .rest-b:not(.run){color:#8cc0ff !important}
html[data-sfg="explore"]:not([data-theme="light"]) body .dc-reset{color:#a3aab4 !important}
html:not([data-theme="light"]) body #apxRoot .gbar{--muted:#abb2bc}
html:not([data-theme="light"]) body #apxRoot .gskip{color:#a3aab4 !important}

/* ==== STEP 3: Explore (18 Oct 2026; docs/glass/step3/) ====
   The Explore tab (its hub, All programs with its filters and track tiles), a programme's Overview and Progress tabs,
   bundles, Breathing & Meditation. Rims are edge light (inset), never a ring, so no card's layout can move. */
html[data-sfg="explore"] body .ex-hub, html[data-sfg="explore"] body .w2-wrap{background:var(--g-streaks), var(--g-bg) !important}
html.sfg-nested[data-sfg="explore"] body .ex-hub{background:transparent !important}
/* cards: see-through glass with a bright top edge */
html[data-sfg="explore"] body .hub-tile, html[data-sfg="explore"] body .binc, html[data-sfg="explore"] body .sidetile, html[data-sfg="explore"] body .hubcard, html[data-sfg="explore"] body .fact, html[data-sfg="explore"] body .daycard, html[data-sfg="explore"] body .pmonth, html[data-sfg="explore"] body .prog-meso, html[data-sfg="explore"] body .sd, html[data-sfg="explore"] body .pg-ring-card,
html[data-sfg="explore"] body .pg-stat, html[data-sfg="explore"] body .pg-row, html[data-sfg="explore"] body .pg-hero, html[data-sfg="explore"] body .pg-cmp-c, html[data-sfg="explore"] body .pg-tip, html[data-sfg="explore"] body .bp-grp, html[data-sfg="explore"] body .w2-tile, html[data-sfg="explore"] body .w2-hrow, html[data-sfg="explore"] body .gl-day{
  background:var(--g-fill) !important;border-color:rgba(255,255,255,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 12px 20px -14px rgba(255,255,255,.22), var(--g-shadow) !important;
}
html[data-sfg="explore"] body .hubcard, html[data-sfg="explore"] body .sidetile, html[data-sfg="explore"] body .pg-hero, html[data-sfg="explore"] body .pg-ring-card, html[data-sfg="explore"] body .binc, html[data-sfg="explore"] body .w2-tile{border-radius:24px !important}
html[data-sfg="explore"] body .daycard, html[data-sfg="explore"] body .pmonth, html[data-sfg="explore"] body .fact, html[data-sfg="explore"] body .sd, html[data-sfg="explore"] body .pg-stat, html[data-sfg="explore"] body .pg-row, html[data-sfg="explore"] body .pg-cmp-c, html[data-sfg="explore"] body .pg-tip, html[data-sfg="explore"] body .bp-grp, html[data-sfg="explore"] body .prog-meso, html[data-sfg="explore"] body .w2-hrow, html[data-sfg="explore"] body .hub-tile{border-radius:18px !important}
/* the All Programs card keeps its green: a green-tinted glass with a green rim */
html[data-sfg="explore"] body .hub-card{background:linear-gradient(160deg, rgba(198,242,78,.14), rgba(198,242,78,.03) 60%), var(--g-fill) !important;
  box-shadow:inset 0 1px 0 rgba(225,255,150,.85), inset 0 0 0 1px rgba(198,242,78,.30), 0 0 24px -10px rgba(198,242,78,.5), var(--g-shadow) !important;border-radius:26px !important}
html[data-sfg="explore"] body .hub-card.comm{background:linear-gradient(160deg, rgba(90,170,220,.16), rgba(90,170,220,.03) 60%), var(--g-fill) !important;
  box-shadow:inset 0 1px 0 rgba(170,230,255,.85), inset 0 0 0 1px rgba(90,170,220,.30), 0 0 24px -10px rgba(90,170,220,.5), var(--g-shadow) !important}
html[data-sfg="explore"] body .hub-tilephoto{box-shadow:inset 0 1px 0 rgba(255,255,255,.55) !important}
/* track tiles: each keeps its own track colour (--tcol) as a glowing rim; photo and text unchanged */
html[data-sfg="explore"] body .card.tcard{border-color:transparent !important;border-radius:24px !important;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--tcol, #ffffff) 70%, #fff), inset 0 0 0 1px color-mix(in srgb, var(--tcol, #ffffff) 38%, transparent),
    0 0 26px -12px var(--tcol, rgba(255,255,255,.4)), var(--g-shadow) !important}
/* pills and round buttons: glass with a bevel; the chosen one (lime) keeps its colour */
html[data-sfg="explore"] body .srchbtn, html[data-sfg="explore"] body .chip:not(.on):not(.chip-fav), html[data-sfg="explore"] body .viewbtn:not(.on), html[data-sfg="explore"] body .lvtag:not(.on), html[data-sfg="explore"] body .pp-back, html[data-sfg="explore"] body .freqbtn:not(.on), html[data-sfg="explore"] body .lvlsel, html[data-sfg="explore"] body .pp-fb:not(.on),
html[data-sfg="explore"] body .pk-fine button, html[data-sfg="explore"] body .w2-dur:not(.on), html[data-sfg="explore"] body .w2-cbtn{
  background:var(--g-pill) !important;border-color:rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -3px 6px rgba(0,0,0,.4), 0 8px 16px -6px rgba(0,0,0,.75) !important;
}
html[data-sfg="explore"] body .chip.chip-fav:not(.on), html[data-sfg="explore"] body .domains.seg{background:var(--g-pill) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.3) !important}
/* readability on glass */
html[data-sfg="explore"]:not([data-theme="light"]) body{--muted:#abb2bc}
html[data-sfg="explore"]:not([data-theme="light"]) body .lvtag:not(.on){color:#c3c8cf !important}
/* breathing and meditation: its grey lines a touch lighter on glass */
html[data-sfg="explore"]:not([data-theme="light"]) body .w2-tile .w2-ts{color:#bdc3cb !important}
html[data-sfg="explore"]:not([data-theme="light"]) body .w2-dur span{color:#c3c8cf !important}
html[data-sfg="explore"]:not([data-theme="light"]) body .w2-hbtn{color:#b4bac2 !important}
/* each track's small coloured label: its own colour, a little lighter, so it reads on glass */
html[data-sfg="explore"]:not([data-theme="light"]) body .tcard-eyebrow{color:color-mix(in srgb, var(--tcol, #fff) 72%, #fff) !important}

/* ==== STEP 4: Nutrition (18 Oct 2026; docs/glass/step4/) ====
   Cards and rows are see-through glass with a bright top edge (an inset rim, so no card's layout or own decorations
   move); small boxes inside a card are lighter glass without a shadow; buttons and chips are glass pills; the food
   screens and My Plan get the streak background; sheets float as blurred glass. Kept: the lime Photo log button and
   every lime button, the gold reminder bar, the red health note, the dashed "no food yet" box, chosen chips (.on). */
html[data-sfg="nutrition"] body .scanmodal, html[data-sfg="nutrition"] body .planpop{background:var(--g-streaks), var(--g-bg) !important}
html[data-sfg="nutrition"] body .planhead{background:var(--g-bar) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important}
html[data-sfg="nutrition"] body .hero, html[data-sfg="nutrition"] body .targets, html[data-sfg="nutrition"] body .adapt, html[data-sfg="nutrition"] body .coach, html[data-sfg="nutrition"] body .wk, html[data-sfg="nutrition"] body .water-panel, html[data-sfg="nutrition"] body .meal, html[data-sfg="nutrition"] body .recipe, html[data-sfg="nutrition"] body .scan-card, html[data-sfg="nutrition"] body .rec-card, html[data-sfg="nutrition"] body .wcard, html[data-sfg="nutrition"] body .mstrip, html[data-sfg="nutrition"] body .foodglance, html[data-sfg="nutrition"] body .meal-row:not(.mw-photo), html[data-sfg="nutrition"] body .logfood-btn, html[data-sfg="nutrition"] body .fl-sum, html[data-sfg="nutrition"] body .fl-meal, html[data-sfg="nutrition"] body .fl-tot, html[data-sfg="nutrition"] body .rec-toggle, html[data-sfg="nutrition"] body .showmore-btn, html[data-sfg="nutrition"] body .rec-pick, html[data-sfg="nutrition"] body .scan-manual:not(.mw-photo), html[data-sfg="nutrition"] body .scan-tips, html[data-sfg="nutrition"] body .macrostrip, html[data-sfg="nutrition"] body .prefpanel, html[data-sfg="nutrition"] body .idea, html[data-sfg="nutrition"] body .plantot, html[data-sfg="nutrition"] body .nprcard, html[data-sfg="nutrition"] body .stepi, html[data-sfg="nutrition"] body .imeter, html[data-sfg="nutrition"] body .wizwrap{
  border-color:rgba(255,255,255,.13) !important;background:var(--g-fill) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 12px 20px -14px rgba(255,255,255,.22), var(--g-shadow) !important;
}
html[data-sfg="nutrition"] body .hero, html[data-sfg="nutrition"] body .targets, html[data-sfg="nutrition"] body .adapt, html[data-sfg="nutrition"] body .coach, html[data-sfg="nutrition"] body .wk, html[data-sfg="nutrition"] body .water-panel, html[data-sfg="nutrition"] body .meal, html[data-sfg="nutrition"] body .recipe, html[data-sfg="nutrition"] body .scan-card, html[data-sfg="nutrition"] body .rec-card, html[data-sfg="nutrition"] body .wcard, html[data-sfg="nutrition"] body .mstrip, html[data-sfg="nutrition"] body .foodglance, html[data-sfg="nutrition"] body .meal-row:not(.mw-photo), html[data-sfg="nutrition"] body .logfood-btn{border-radius:24px !important}
html[data-sfg="nutrition"] body .fl-sum, html[data-sfg="nutrition"] body .fl-meal, html[data-sfg="nutrition"] body .fl-tot, html[data-sfg="nutrition"] body .rec-toggle, html[data-sfg="nutrition"] body .showmore-btn, html[data-sfg="nutrition"] body .rec-pick, html[data-sfg="nutrition"] body .scan-manual:not(.mw-photo), html[data-sfg="nutrition"] body .scan-tips, html[data-sfg="nutrition"] body .macrostrip, html[data-sfg="nutrition"] body .prefpanel, html[data-sfg="nutrition"] body .idea, html[data-sfg="nutrition"] body .plantot, html[data-sfg="nutrition"] body .nprcard, html[data-sfg="nutrition"] body .stepi, html[data-sfg="nutrition"] body .imeter, html[data-sfg="nutrition"] body .wizwrap{border-radius:18px !important}
html[data-sfg="nutrition"] body .mac, html[data-sfg="nutrition"] body .wsi, html[data-sfg="nutrition"] body .meal-item, html[data-sfg="nutrition"] body .wq, html[data-sfg="nutrition"] body .msheet-mac, html[data-sfg="nutrition"] body .msi-novid, html[data-sfg="nutrition"] body .app-card, html[data-sfg="nutrition"] body .rp-stepper, html[data-sfg="nutrition"] body .rp-total, html[data-sfg="nutrition"] body .swapnote{background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02)) !important;border-color:rgba(255,255,255,.1) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32) !important}
html[data-sfg="nutrition"] body .fl-empty{background:rgba(255,255,255,.025) !important}
html[data-sfg="nutrition"] body .freshbar:not(.stale){background:var(--g-fill) !important;border-color:rgba(255,255,255,.13) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7), var(--g-shadow) !important;border-radius:18px !important}
html[data-sfg="nutrition"] body .freshbar.stale{background:linear-gradient(160deg, rgba(255,176,78,.13), rgba(255,176,78,.03) 60%), var(--g-fill) !important;
  box-shadow:inset 0 1px 0 rgba(255,222,150,.8), 0 0 22px -10px rgba(255,176,78,.45), var(--g-shadow) !important;border-radius:18px !important}
html[data-sfg="nutrition"] body .btn-ghost, html[data-sfg="nutrition"] body .opt:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="nutrition"] body .pill:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="nutrition"] body .freshbar button, html[data-sfg="nutrition"] body .msheet-x, html[data-sfg="nutrition"] body .scan-back, html[data-sfg="nutrition"] body .scan-x, html[data-sfg="nutrition"] body .planback, html[data-sfg="nutrition"] body .swapchip:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="nutrition"] body .rp-btn, html[data-sfg="nutrition"] body .wqbtn, html[data-sfg="nutrition"] body .meal-tab:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="nutrition"] body .pchip:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="nutrition"] body .chip:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="nutrition"] body .mw-search, html[data-sfg="nutrition"] body .mw-scan, html[data-sfg="nutrition"] body .fx-bc, html[data-sfg="nutrition"] body .ms-pill, html[data-sfg="nutrition"] body #editProfile, html[data-sfg="nutrition"] body .nprchip:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="nutrition"] body .sfp-card:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="nutrition"] body .unit-toggle{
  background:var(--g-pill) !important;border-color:rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.4), 0 8px 16px -6px rgba(0,0,0,.75) !important;
}
html[data-sfg="nutrition"] body .fdb-search, html[data-sfg="nutrition"] body .scan-field input, html[data-sfg="nutrition"] body .rsearch input, html[data-sfg="nutrition"] body .fx-form input, html[data-sfg="nutrition"] body .fx-qty input, html[data-sfg="nutrition"] body .fx-type input, html[data-sfg="nutrition"] body .scan-confirm2 .scan-name-input{background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 2px 6px rgba(0,0,0,.35) !important}
html[data-sfg="nutrition"] body .msheet-card, html[data-sfg="nutrition"] body .nprogsheet{background:var(--g-sheet) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--g-inner), 0 26px 60px -18px rgba(0,0,0,.85) !important}
html[data-sfg="nutrition"] body .msheet-bg, html[data-sfg="nutrition"] body .nprogpop{-webkit-backdrop-filter:blur(6px) !important;backdrop-filter:blur(6px) !important}
/* the questions' sticky footer fades into the glass card rather than a solid band */
html[data-sfg="nutrition"] body .wizwrap .wizfoot{background:linear-gradient(180deg, rgba(14,16,20,0), rgba(14,16,20,.86) 18px, rgba(14,16,20,.86)) !important;-webkit-backdrop-filter:blur(14px) !important;backdrop-filter:blur(14px) !important}
/* readability on glass */
html[data-sfg="nutrition"]:not([data-theme="light"]) body{--muted:#abb2bc}
html[data-sfg="nutrition"] body .scan-cta .meal-row.has-log{border-color:rgba(198,242,78,.32) !important}
/* Home's small date line (found in the step 4 check): the same lighter grey on the glass background */
html[data-sfg="app"]:not([data-theme="light"]) body .home-datesub{--muted:#abb2bc}
html[data-sfg="nutrition"]:not([data-theme="light"]) body .rwatch{color:#ff8f8f !important}
html[data-sfg="nutrition"]:not([data-theme="light"]) body .btn-ghost:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .opt:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .pill:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .msheet-x:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .scan-back:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .scan-x:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .planback:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .swapchip:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .rp-btn:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .wqbtn:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .meal-tab:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .pchip:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .chip:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .mw-search:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .mw-scan:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .fx-bc:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .ms-pill:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .nprchip:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .sfp-card:not(.on), html[data-sfg="nutrition"]:not([data-theme="light"]) body .unit-toggle:not(.on){--muted:#c3c8cf}

/* ==== STEP 5a: Track and Home's task screens (water, steps, sleep, body, photos, habits) (18 Oct 2026; docs/glass/step5/) ====
   Same treatment as Nutrition. Kept: a logged card's or tile's coloured outline (.logged), the cards' glow animations
   after a log (fx-*), the weekly check-in's lime outline, the coloured feedback strips, sliders, checkboxes, photos and
   every lime button. */
html[data-sfg="track"] body .loading{background:var(--g-streaks), var(--g-bg) !important}
html[data-sfg="track"] body .card:not(.logged), html[data-sfg="track"] body .mcard:not(.logged), html[data-sfg="track"] body .habitsbtn:not(.logged), html[data-sfg="track"] body .btile:not(.logged), html[data-sfg="track"] body .prcard:not(.logged), html[data-sfg="track"] body .ph-guide:not(.logged), html[data-sfg="track"] body .measedit:not(.logged){border-color:rgba(255,255,255,.13) !important}
html[data-sfg="track"] body .card, html[data-sfg="track"] body .mcard, html[data-sfg="track"] body .habitsbtn, html[data-sfg="track"] body .btile, html[data-sfg="track"] body .prcard, html[data-sfg="track"] body .ph-guide, html[data-sfg="track"] body .measedit{background:var(--g-fill) !important}
html[data-sfg="track"] body .card:not([class*="fx-"]), html[data-sfg="track"] body .mcard:not([class*="fx-"]), html[data-sfg="track"] body .habitsbtn:not([class*="fx-"]), html[data-sfg="track"] body .btile:not([class*="fx-"]), html[data-sfg="track"] body .prcard:not([class*="fx-"]), html[data-sfg="track"] body .ph-guide:not([class*="fx-"]), html[data-sfg="track"] body .measedit:not([class*="fx-"]){box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 12px 20px -14px rgba(255,255,255,.22), var(--g-shadow) !important}
html[data-sfg="track"] body .card, html[data-sfg="track"] body .mcard, html[data-sfg="track"] body .habitsbtn{border-radius:24px !important}
html[data-sfg="track"] body .prcard, html[data-sfg="track"] body .ph-guide, html[data-sfg="track"] body .measedit{border-radius:18px !important}
html[data-sfg="track"] body .fact, html[data-sfg="track"] body .wstat, html[data-sfg="track"] body .chartbox, html[data-sfg="track"] body .cardiorow, html[data-sfg="track"] body .goalwarn, html[data-sfg="track"] body .blurb, html[data-sfg="track"] body .ph-card, html[data-sfg="track"] body .ph-compare, html[data-sfg="track"] body .ph-help, html[data-sfg="track"] body .bpr, html[data-sfg="track"] body .hydstep, html[data-sfg="track"] body .stepmid, html[data-sfg="track"] body .meguide, html[data-sfg="track"] body .mstep:not(:active){background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02)) !important;border-color:rgba(255,255,255,.1) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32) !important}
html[data-sfg="track"] body .bm-weekly, html[data-sfg="track"] body .hydother{background:var(--g-pill) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.3) !important}
html[data-sfg="track"] body .sndbtn, html[data-sfg="track"] body .hydundob, html[data-sfg="track"] body .hyddrink:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="track"] body .hydpick, html[data-sfg="track"] body .amtb:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="track"] body .stepb, html[data-sfg="track"] body .hydchip, html[data-sfg="track"] body .stepbtn:not(:active), html[data-sfg="track"] body .cardiotoggle, html[data-sfg="track"] body .ctype:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="track"] body .cchip:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="track"] body .seg, html[data-sfg="track"] body .mebtn, html[data-sfg="track"] body .goalchip:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="track"] body .bsb:not(:active), html[data-sfg="track"] body .mhelp:not(:active), html[data-sfg="track"] body .btab:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="track"] body .ph-pose-pill:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="track"] body .ph-help-btn:not(:active), html[data-sfg="track"] body .ph-gallery-toggle, html[data-sfg="track"] body .rdchip, html[data-sfg="track"] body .sbsec, html[data-sfg="track"] body .stsbtn:not(:active), html[data-sfg="track"] body .opt:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="track"] body .fb, html[data-sfg="track"] body .addhabit button, html[data-sfg="track"] body .btn-ghost, html[data-sfg="track"] body .sugg, html[data-sfg="track"] body .prchip:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="track"] body .sfask-r button:not(.sfask-go), html[data-sfg="track"] body .habitsbtn .hcount:not(.alldone), html[data-sfg="track"] body .goalwarn .gw-cancel, html[data-sfg="track"] body .stepbig .ststep{
  background:var(--g-pill) !important;border-color:rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.4), 0 8px 16px -6px rgba(0,0,0,.75) !important;
}
html[data-sfg="track"] body .field input, html[data-sfg="track"] body .addhabit input, html[data-sfg="track"] body .measin{background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 2px 6px rgba(0,0,0,.35) !important}
html[data-sfg="track"] body .sheet, html[data-sfg="track"] body .sfask-c{background:var(--g-sheet) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--g-inner), 0 26px 60px -18px rgba(0,0,0,.85) !important}
html[data-sfg="track"] body .overlay{-webkit-backdrop-filter:blur(6px) !important;backdrop-filter:blur(6px) !important}
html[data-sfg="track"] body .toast{background:var(--g-bar) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 26px -10px rgba(0,0,0,.8) !important}
html[data-sfg="track"]:not([data-theme="light"]) body{--muted:#abb2bc}
html[data-sfg="track"]:not([data-theme="light"]) body .sndbtn:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .hydundob:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .hyddrink:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .hydpick:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .amtb:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .stepb:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .hydchip:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .stepbtn:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .cardiotoggle:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .ctype:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .cchip:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .seg:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .mebtn:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .goalchip:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .bsb:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .mhelp:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .btab:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .ph-pose-pill:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .ph-help-btn:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .ph-gallery-toggle:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .rdchip:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .sbsec:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .stsbtn:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .opt:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .fb:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .addhabit button:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .btn-ghost:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .sugg:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .prchip:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .sfask-r button:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .habitsbtn .hcount:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .goalwarn .gw-cancel:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .stepbig .ststep:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .hydother:not(.on):not(.sel), html[data-sfg="track"]:not([data-theme="light"]) body .bm-weekly:not(.on):not(.sel){--muted:#c3c8cf}

/* ==== STEP 5b: Profile (the Profile tab's list and the APEX Profile page) (18 Oct 2026; docs/glass/step5/) ==== */
html[data-sfg="profile"] body .apx-sheet-top{background:var(--g-bar) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important}
html[data-sfg="profile"] body .apx-adi, html[data-sfg="profile"] body .apx-idband, html[data-sfg="profile"] body .apx-card, html[data-sfg="profile"] body .apx-acc, html[data-sfg="profile"] body .apx-tool{border-color:rgba(255,255,255,.13) !important;background:var(--g-fill) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 12px 20px -14px rgba(255,255,255,.22), var(--g-shadow) !important}
html[data-sfg="profile"] body .apx-adi, html[data-sfg="profile"] body .apx-idband{border-radius:24px !important}
html[data-sfg="profile"] body .apx-card, html[data-sfg="profile"] body .apx-acc, html[data-sfg="profile"] body .apx-tool{border-radius:18px !important}
html[data-sfg="profile"] body .apx-milestone, html[data-sfg="profile"] body .apx-acc .apx-card{background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02)) !important;border-color:rgba(255,255,255,.1) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32) !important}
html[data-sfg="profile"] body .phome, html[data-sfg="profile"] body .apx-chip, html[data-sfg="profile"] body .apx-opt:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="profile"] body .apx-sheet-x, html[data-sfg="profile"] body .apx-confirm-btn:not(.go), html[data-sfg="profile"] body .apx-tool .apx-tool-ic{background:var(--g-pill) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.4), 0 8px 16px -6px rgba(0,0,0,.75) !important}
html[data-sfg="profile"] body .apx-action{background:var(--g-pill) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -3px 6px rgba(0,0,0,.4), 0 8px 16px -6px rgba(0,0,0,.75) !important}
html[data-sfg="profile"] body .apx-asx-tabs{background:var(--g-pill) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.3) !important}
html[data-sfg="profile"] body .apx-confirm-input{background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 2px 6px rgba(0,0,0,.35) !important}
html[data-sfg="profile"] body .apx-sheet{background:var(--g-sheet) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--g-inner), 0 26px 60px -18px rgba(0,0,0,.85) !important}
html[data-sfg="profile"]:not([data-theme="light"]) body{--muted:#abb2bc}
/* this page paints its whole frame (html and body), which hid the streaks behind its content: the frame keeps the near-black, the body is see-through */
html[data-sfg="profile"]{background:var(--g-bg) !important}
html[data-sfg="profile"] body{background:transparent !important}
/* the Profile tab's lists (Profile, Settings, Notifications, Legal, About, Support) in the app frame */
html[data-sfg="app"] body .prow-group{border-color:rgba(255,255,255,.13) !important;background:var(--g-fill) !important;border-radius:18px !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 12px 20px -14px rgba(255,255,255,.22), var(--g-shadow) !important}
html[data-sfg="app"]:not([data-theme="light"]) body .panel:not(#p-home){--muted:#abb2bc}
html[data-sfg="app"]:not([data-theme="light"]) body #deleteAcctBtn{color:#ffa3a3 !important}
html[data-sfg="app"] body .panel:not(#p-home) .acc-block{border-color:rgba(255,255,255,.13) !important;background:var(--g-fill) !important;border-radius:18px !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 12px 20px -14px rgba(255,255,255,.22), var(--g-shadow) !important}
html[data-sfg="app"] body .panel:not(#p-home) .btn-ghost{background:var(--g-pill) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.4), 0 8px 16px -6px rgba(0,0,0,.75) !important}

/* ==== STEP 6: Coach chat, Reports, Your Progress and Trends (18 Oct 2026; docs/glass/step6/) ====
   Chat: the top bar, the rooms strip and the box you type in are glass bars over the streak background; Coach's message
   bubbles are light glass; your own bubbles stay lime; cards, menus and pop-ups are glass. Reports and Trends: cards are
   glass, chips and tabs glass pills (the chosen one keeps its colour), the day sheet floats as blurred glass. */
html[data-sfg="chat"] body .messages, html[data-sfg="chat"] body .onlinebar, html[data-sfg="chat"] body .commtabs{background:transparent !important}
/* the Coach inbox rows cover their swipe buttons (Unread, Pin, More, Archive): they keep a SOLID background, the glass
   page colour, so nothing behind them ever shows (18 Oct 2026, after the first go-live) */
html[data-sfg="chat"] body .swwrap .cthread{background:var(--g-bg) !important}
html[data-sfg="chat"] body header, html[data-sfg="chat"] body .rooms, html[data-sfg="chat"] body .ghead, html[data-sfg="chat"] body .composer{background:var(--g-bar) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important}
html[data-sfg="chat"] body .blog-overlay{background:var(--g-streaks), var(--g-bg) !important}
html[data-sfg="chat"] body .blog-overlay-bar, html[data-sfg="chat"] body .blog-overlay-related{background:var(--g-bar) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important}
html[data-sfg="chat"] body .card, html[data-sfg="chat"] body .ccard{border-color:rgba(255,255,255,.13) !important;background:var(--g-fill) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 12px 20px -14px rgba(255,255,255,.22), var(--g-shadow) !important;border-radius:24px !important}
html[data-sfg="chat"] body .msg:not(.mine) .tx, html[data-sfg="chat"] body .divider, html[data-sfg="chat"] body .blockrow, html[data-sfg="chat"] body .card .rules, html[data-sfg="chat"] body .archhead .archcount{background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02)) !important;border-color:rgba(255,255,255,.1) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32) !important}
html[data-sfg="chat"] body .rechip:not(.mine), html[data-sfg="chat"] body .ctab:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="chat"] body .room:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="chat"] body .fchip:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="chat"] body .cc-choice, html[data-sfg="chat"] body .blogfaq-chip, html[data-sfg="chat"] body .userchip, html[data-sfg="chat"] body .cam, html[data-sfg="chat"] body .creqbtn:not(.acc), html[data-sfg="chat"] body .cstickytop .creqbtn:not(.acc), html[data-sfg="chat"] body .ctopen, html[data-sfg="chat"] body .blockrow button, html[data-sfg="chat"] body .msg .tag.bot{background:var(--g-pill) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.4), 0 8px 16px -6px rgba(0,0,0,.75) !important}
html[data-sfg="chat"] body textarea#input, html[data-sfg="chat"] body .tinput, html[data-sfg="chat"] body .card input[type=text], html[data-sfg="chat"] body .lblnewrow input, html[data-sfg="chat"] body .staffadd input{background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 2px 6px rgba(0,0,0,.35) !important}
html[data-sfg="chat"] body .menu, html[data-sfg="chat"] body .pop, html[data-sfg="chat"] body .mentionbox, html[data-sfg="chat"] body .msg .more{background:var(--g-sheet) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--g-inner), 0 26px 60px -18px rgba(0,0,0,.85) !important}
html[data-sfg="chat"] body .toast{background:var(--g-bar) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 26px -10px rgba(0,0,0,.8) !important}
html[data-sfg="chat"]:not([data-theme="light"]) body{--muted:#abb2bc}
html[data-sfg="report"] body .card, html[data-sfg="report"] body .pgr-card{border-color:rgba(255,255,255,.13) !important;background:var(--g-fill) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 12px 20px -14px rgba(255,255,255,.22), var(--g-shadow) !important;border-radius:24px !important}
html[data-sfg="report"] body .stat, html[data-sfg="report"] body .rc-pat, html[data-sfg="report"] body .rc-tip, html[data-sfg="report"] body .rc-pchips, html[data-sfg="report"] body .tt-hero .tt-cell, html[data-sfg="report"] body .pgrd-st, html[data-sfg="report"] body .pgrd-target, html[data-sfg="report"] body .pgrd-none, html[data-sfg="report"] body .rc-dopt{background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02)) !important;border-color:rgba(255,255,255,.1) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32) !important}
html[data-sfg="report"] body .backbtn, html[data-sfg="report"] body .theme-btn, html[data-sfg="report"] body .rc-chip:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="report"] body .rc-sectab:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="report"] body .rc-badge, html[data-sfg="report"] body .rc-dlbtn, html[data-sfg="report"] body .rc-fr-close, html[data-sfg="report"] body .pgr-chip:not(.on):not(.sel):not(.active):not(.selected){background:var(--g-pill) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.4), 0 8px 16px -6px rgba(0,0,0,.75) !important}
html[data-sfg="report"] body .rc-empty, html[data-sfg="report"] body .rc-fullbtn{background:rgba(255,255,255,.03) !important}
html[data-sfg="report"] body .pgrdsheet{background:var(--g-sheet) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--g-inner), 0 26px 60px -18px rgba(0,0,0,.85) !important}
html[data-sfg="report"]:not([data-theme="light"]) body{--muted:#abb2bc}
html[data-sfg="trends"] body .card, html[data-sfg="trends"] body .pgr-card{border-color:rgba(255,255,255,.13) !important;background:var(--g-fill) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 12px 20px -14px rgba(255,255,255,.22), var(--g-shadow) !important;border-radius:24px !important}
html[data-sfg="trends"] body .stat, html[data-sfg="trends"] body .rc-pat, html[data-sfg="trends"] body .rc-tip, html[data-sfg="trends"] body .rc-pchips, html[data-sfg="trends"] body .tt-hero .tt-cell, html[data-sfg="trends"] body .pgrd-st, html[data-sfg="trends"] body .pgrd-target, html[data-sfg="trends"] body .pgrd-none, html[data-sfg="trends"] body .rc-dopt{background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02)) !important;border-color:rgba(255,255,255,.1) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32) !important}
html[data-sfg="trends"] body .backbtn, html[data-sfg="trends"] body .theme-btn, html[data-sfg="trends"] body .rc-chip:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="trends"] body .rc-sectab:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="trends"] body .rc-badge, html[data-sfg="trends"] body .rc-dlbtn, html[data-sfg="trends"] body .rc-fr-close, html[data-sfg="trends"] body .pgr-chip:not(.on):not(.sel):not(.active):not(.selected){background:var(--g-pill) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.4), 0 8px 16px -6px rgba(0,0,0,.75) !important}
html[data-sfg="trends"] body .rc-empty, html[data-sfg="trends"] body .rc-fullbtn{background:rgba(255,255,255,.03) !important}
html[data-sfg="trends"] body .pgrdsheet{background:var(--g-sheet) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--g-inner), 0 26px 60px -18px rgba(0,0,0,.85) !important}
html[data-sfg="trends"]:not([data-theme="light"]) body{--muted:#abb2bc}
html[data-sfg="progress"] body .bar, html[data-sfg="progress"] body .tabs{background:var(--g-bar) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important}
html[data-sfg="progress"] body .frames, html[data-sfg="progress"] body .frames iframe{background:transparent !important}
html[data-sfg="progress"] body .tab:not(.on):not(.sel):not(.active):not(.selected){background:var(--g-pill) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.4), 0 8px 16px -6px rgba(0,0,0,.75) !important}
html[data-sfg="progress"]:not([data-theme="light"]) body{--muted:#abb2bc}
html[data-sfg="chat"]:not([data-theme="light"]) body .rechip:not(.on):not(.active), html[data-sfg="chat"]:not([data-theme="light"]) body .ctab:not(.on):not(.active), html[data-sfg="chat"]:not([data-theme="light"]) body .room:not(.on):not(.active), html[data-sfg="chat"]:not([data-theme="light"]) body .fchip:not(.on):not(.active), html[data-sfg="chat"]:not([data-theme="light"]) body .cc-choice:not(.on):not(.active), html[data-sfg="chat"]:not([data-theme="light"]) body .blogfaq-chip:not(.on):not(.active), html[data-sfg="chat"]:not([data-theme="light"]) body .userchip:not(.on):not(.active), html[data-sfg="chat"]:not([data-theme="light"]) body .cam:not(.on):not(.active), html[data-sfg="chat"]:not([data-theme="light"]) body .creqbtn:not(.on):not(.active), html[data-sfg="chat"]:not([data-theme="light"]) body .ctopen:not(.on):not(.active), html[data-sfg="chat"]:not([data-theme="light"]) body .blockrow button:not(.on):not(.active), html[data-sfg="chat"]:not([data-theme="light"]) body .msg .tag.bot:not(.on):not(.active){--muted:#c3c8cf}
html[data-sfg="report"]:not([data-theme="light"]) body .backbtn:not(.on):not(.active), html[data-sfg="report"]:not([data-theme="light"]) body .theme-btn:not(.on):not(.active), html[data-sfg="report"]:not([data-theme="light"]) body .rc-chip:not(.on):not(.active), html[data-sfg="report"]:not([data-theme="light"]) body .rc-sectab:not(.on):not(.active), html[data-sfg="report"]:not([data-theme="light"]) body .rc-badge:not(.on):not(.active), html[data-sfg="report"]:not([data-theme="light"]) body .rc-dlbtn:not(.on):not(.active), html[data-sfg="report"]:not([data-theme="light"]) body .rc-fr-close:not(.on):not(.active), html[data-sfg="report"]:not([data-theme="light"]) body .pgr-chip:not(.on):not(.active){--muted:#c3c8cf}
html[data-sfg="trends"]:not([data-theme="light"]) body .backbtn:not(.on):not(.active), html[data-sfg="trends"]:not([data-theme="light"]) body .theme-btn:not(.on):not(.active), html[data-sfg="trends"]:not([data-theme="light"]) body .rc-chip:not(.on):not(.active), html[data-sfg="trends"]:not([data-theme="light"]) body .rc-sectab:not(.on):not(.active), html[data-sfg="trends"]:not([data-theme="light"]) body .rc-badge:not(.on):not(.active), html[data-sfg="trends"]:not([data-theme="light"]) body .rc-dlbtn:not(.on):not(.active), html[data-sfg="trends"]:not([data-theme="light"]) body .rc-fr-close:not(.on):not(.active), html[data-sfg="trends"]:not([data-theme="light"]) body .pgr-chip:not(.on):not(.active){--muted:#c3c8cf}
html[data-sfg="progress"]:not([data-theme="light"]) body .tab:not(.on):not(.active){--muted:#c3c8cf}

/* Your Progress's Health tab (health.html), so the whole screen matches */
html[data-sfg="health"] body .hp-card, html[data-sfg="health"] body .hp-tile, html[data-sfg="health"] body .hp-list, html[data-sfg="health"] body .hp-empty{border-color:rgba(255,255,255,.13) !important;background:var(--g-fill) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 12px 20px -14px rgba(255,255,255,.22), var(--g-shadow) !important;border-radius:24px !important}
html[data-sfg="health"] body .hpd-segtip, html[data-sfg="health"] body .hpd-total, html[data-sfg="health"] body .hpd-fallback, html[data-sfg="health"] body .rc-pchips, html[data-sfg="health"] body .hp-viewtoggle{background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02)) !important;border-color:rgba(255,255,255,.1) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32) !important}
html[data-sfg="health"] body .hpd-navbtn{background:var(--g-pill) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.4), 0 8px 16px -6px rgba(0,0,0,.75) !important}
html[data-sfg="health"] body .hpdsheet{background:var(--g-sheet) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--g-inner), 0 26px 60px -18px rgba(0,0,0,.85) !important}
html[data-sfg="health"]:not([data-theme="light"]) body{--muted:#abb2bc}

/* ==== STEP 7: Community (18 Oct 2026; docs/glass/step7/) ====
   Challenge, group and profile cards are glass; leaderboard rows sit in a glass list; tabs, chips and small buttons are
   glass pills (chosen ones keep their colour; lime and red buttons keep theirs); the detail and form screens get the
   streak background; sheets and pop-ups float as blurred glass. Kept: covers and photos, rank colours, avatars' rings. */
html[data-sfg="community"] body .bar{background:var(--g-bar) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important}
html[data-sfg="community"] body .detail, html[data-sfg="community"] body .formpanel, html[data-sfg="community"] body .lbsheet-card{background:var(--g-streaks), var(--g-bg) !important}
html[data-sfg="community"] body .hcard, html[data-sfg="community"] body .dcard, html[data-sfg="community"] body .ask-card, html[data-sfg="community"] body .gcard, html[data-sfg="community"] body .pf-header, html[data-sfg="community"] body .pf-section, html[data-sfg="community"] body .ms-ov-card, html[data-sfg="community"] body .lb-list, html[data-sfg="community"] body .about-card, html[data-sfg="community"] body .boot-fail{border-color:rgba(255,255,255,.13) !important;background:var(--g-fill) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 12px 20px -14px rgba(255,255,255,.22), var(--g-shadow) !important}
html[data-sfg="community"] body .hcard, html[data-sfg="community"] body .dcard, html[data-sfg="community"] body .ask-card, html[data-sfg="community"] body .gcard, html[data-sfg="community"] body .pf-header, html[data-sfg="community"] body .pf-section, html[data-sfg="community"] body .ms-ov-card{border-radius:24px !important}
html[data-sfg="community"] body .lb-list, html[data-sfg="community"] body .about-card, html[data-sfg="community"] body .boot-fail{border-radius:18px !important}
html[data-sfg="community"] body .pf-stat, html[data-sfg="community"] body .pf-card, html[data-sfg="community"] body .pf-ms, html[data-sfg="community"] body .pf-hidrow, html[data-sfg="community"] body .pf-result, html[data-sfg="community"] body .lb-stat, html[data-sfg="community"] body .lb-selrow, html[data-sfg="community"] body .link-box, html[data-sfg="community"] body .pick-row, html[data-sfg="community"] body .delc-list, html[data-sfg="community"] body .lbsheet-pick:not(.on):not(.sel):not(.active):not(.selected){background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02)) !important;border-color:rgba(255,255,255,.1) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32) !important}
html[data-sfg="community"] body .pf-empty{background:rgba(255,255,255,.03) !important}
html[data-sfg="community"] body .back, html[data-sfg="community"] body .tab:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="community"] body .chip:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="community"] body .dtab:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="community"] body .ms-tab:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="community"] body .pill:not(.on):not(.sel):not(.active):not(.selected):not(:disabled), html[data-sfg="community"] body .btn2:not(.solid):not(.danger), html[data-sfg="community"] body .share-btn, html[data-sfg="community"] body .edit-link, html[data-sfg="community"] body .small-btn, html[data-sfg="community"] body .req-btn:not(.yes), html[data-sfg="community"] body .gcard-ask, html[data-sfg="community"] body .kebab-btn, html[data-sfg="community"] body .kebab-cancel, html[data-sfg="community"] body .modal-cancel, html[data-sfg="community"] body .boot-fail-btn:not(.primary), html[data-sfg="community"] body .am-badge, html[data-sfg="community"] body .code-info span, html[data-sfg="community"] body .pf-unhide, html[data-sfg="community"] body .lb-cardbadge{background:var(--g-pill) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.4), 0 8px 16px -6px rgba(0,0,0,.75) !important}
html[data-sfg="community"] body .btn2.danger{background:var(--g-pill) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.3) !important}
html[data-sfg="community"] body .field-input, html[data-sfg="community"] body .field-textarea{background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 2px 6px rgba(0,0,0,.35) !important}
html[data-sfg="community"] body .kebabsheet, html[data-sfg="community"] body .modalcard, html[data-sfg="community"] body .delc-card{background:var(--g-sheet) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--g-inner), 0 26px 60px -18px rgba(0,0,0,.85) !important}
html[data-sfg="community"] body .toast{background:var(--g-bar) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 26px -10px rgba(0,0,0,.8) !important}
html[data-sfg="community"]:not([data-theme="light"]) body{--muted:#abb2bc}
html[data-sfg="community"]:not([data-theme="light"]) body .back:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .tab:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .chip:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .dtab:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .ms-tab:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .pill:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .btn2:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .share-btn:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .edit-link:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .small-btn:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .req-btn:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .gcard-ask:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .kebab-btn:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .kebab-cancel:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .modal-cancel:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .boot-fail-btn:not(.primary):not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .am-badge:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .code-info span:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .pf-unhide:not(.on):not(.active), html[data-sfg="community"]:not([data-theme="light"]) body .lb-cardbadge:not(.on):not(.active){--muted:#c3c8cf}

/* ==== STEP 8: Sign-in, sign-up and the paywall (18 Oct 2026; docs/glass/step8/) ====
   The sign-in and sign-up card is one large glass card over the streak background; fields are glass inputs; answer
   tiles and chips are glass (the chosen one keeps its lime); the paywall's plan cards keep their own lime, gold and
   "arrived" outlines and gain the glass fill and top highlight. Every word, price and button stays exactly as it is. */
html[data-sfg="login"] body .card{border-color:rgba(255,255,255,.13) !important;background:var(--g-fill) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 12px 20px -14px rgba(255,255,255,.22), var(--g-shadow) !important;border-radius:26px !important}
html[data-sfg="login"] body input[type=email], html[data-sfg="login"] body input[type=password], html[data-sfg="login"] body input[type=text], html[data-sfg="login"] body input[type=date], html[data-sfg="login"] body input[type=number], html[data-sfg="login"] body textarea, html[data-sfg="login"] body .phone-row{background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 2px 6px rgba(0,0,0,.35) !important}
html[data-sfg="login"] body .phone-row input.cc-search, html[data-sfg="login"] body .phone-row input{background:transparent !important;box-shadow:none !important}
html[data-sfg="login"] body .cc-menu{background:var(--g-sheet) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--g-inner), 0 26px 60px -18px rgba(0,0,0,.85) !important}
html[data-sfg="login"]:not([data-theme="light"]) body{--muted:#abb2bc}
html[data-sfg="login"]:not([data-theme="light"]) body .foot{color:#abb2bc !important;opacity:1 !important}
html[data-sfg="onboarding"] body .card{border-color:rgba(255,255,255,.13) !important;background:var(--g-fill) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 12px 20px -14px rgba(255,255,255,.22), var(--g-shadow) !important;border-radius:26px !important}
html[data-sfg="onboarding"] body input[type=email], html[data-sfg="onboarding"] body input[type=password], html[data-sfg="onboarding"] body input[type=text], html[data-sfg="onboarding"] body input[type=date], html[data-sfg="onboarding"] body input[type=number], html[data-sfg="onboarding"] body textarea, html[data-sfg="onboarding"] body .phone-row{background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 2px 6px rgba(0,0,0,.35) !important}
html[data-sfg="onboarding"] body .phone-row input.cc-search, html[data-sfg="onboarding"] body .phone-row input{background:transparent !important;box-shadow:none !important}
html[data-sfg="onboarding"] body .cc-menu{background:var(--g-sheet) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--g-inner), 0 26px 60px -18px rgba(0,0,0,.85) !important}
html[data-sfg="onboarding"]:not([data-theme="light"]) body{--muted:#abb2bc}
html[data-sfg="onboarding"]:not([data-theme="light"]) body .err, html[data-sfg="login"]:not([data-theme="light"]) body .err{color:#ffa3a3 !important}
/* the sticky footer behind Continue fades into the glass card rather than a solid band */
html[data-sfg="onboarding"] body .nav{background:linear-gradient(180deg, rgba(14,16,20,0), rgba(14,16,20,.86) 14px, rgba(14,16,20,.86)) !important;-webkit-backdrop-filter:blur(14px) !important;backdrop-filter:blur(14px) !important}
html[data-sfg="login"] body .seg, html[data-sfg="login"] body .rules{background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02)) !important;border-color:rgba(255,255,255,.1) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32) !important}
html[data-sfg="login"] body .btn-google, html[data-sfg="login"] body .gender-opt:not(.on):not(.sel):not(.active):not(.selected){background:var(--g-pill) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.4), 0 8px 16px -6px rgba(0,0,0,.75) !important}
html[data-sfg="onboarding"] body .hsection, html[data-sfg="onboarding"] body .readiness, html[data-sfg="onboarding"] body .apex-result{background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02)) !important;border-color:rgba(255,255,255,.1) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32) !important;border-radius:18px !important}
html[data-sfg="onboarding"] body .apex-adi, html[data-sfg="onboarding"] body .apex-jrow, html[data-sfg="onboarding"] body .mac{background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02)) !important;border-color:rgba(255,255,255,.1) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.32) !important}
html[data-sfg="onboarding"] body .opt:not(.on):not(.sel):not(.active):not(.selected):not(.bodypart), html[data-sfg="onboarding"] body .pillar:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="onboarding"] body .chip:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="onboarding"] body .btn-ghost, html[data-sfg="onboarding"] body .sfp-card:not(.on):not(.sel):not(.active):not(.selected), html[data-sfg="onboarding"] body .unit-toggle{background:var(--g-pill) !important;border-color:rgba(255,255,255,.16) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.4), 0 8px 16px -6px rgba(0,0,0,.75) !important}
html[data-sfg="onboarding"] body .opt.bodypart:not(.on):not(.sel):not(.active):not(.selected){box-shadow:inset 0 1px 0 rgba(255,255,255,.5), var(--g-shadow) !important}
html[data-sfg="onboarding"]:not([data-theme="light"]) body .opt:not(.sel), html[data-sfg="onboarding"]:not([data-theme="light"]) body .pillar:not(.sel), html[data-sfg="onboarding"]:not([data-theme="light"]) body .chip:not(.on), html[data-sfg="onboarding"]:not([data-theme="light"]) body .sfp-card:not(.on){--muted:#c3c8cf}
/* the paywall (in the app frame) */
html[data-sfg="app"] body #upgradeModal .up-sheet{background:var(--g-streaks), var(--g-bg) !important}
html[data-sfg="app"] body #upgradeModal .up-card{background:var(--g-fill) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 12px 20px -14px rgba(255,255,255,.2), var(--g-shadow) !important}
html[data-sfg="app"] body #upgradeModal .up-interval{background:var(--g-pill) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.3) !important}
html[data-sfg="app"]:not([data-theme="light"]) body #upgradeModal{--upmuted:#abb2bc}
html[data-sfg="app"]:not([data-theme="light"]) body #upgradeModal .up-ival:not(.active){color:#c3c8cf !important}
html[data-sfg="app"] body #upgradeModal .up-back{background:var(--g-pill) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -3px 6px rgba(0,0,0,.4) !important}

/* ==== STEP 8b: nothing hidden ever shows through the glass (18 Oct 2026, after the first go-live; docs/glass/step8b/) ==== */
html[data-sfg="chat"] body .swmenu-card{border-color:rgba(255,255,255,.13) !important;background:var(--g-sheet) !important;-webkit-backdrop-filter:var(--g-blur) !important;backdrop-filter:var(--g-blur) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6), var(--g-inner), 0 26px 60px -18px rgba(0,0,0,.85) !important}
html[data-sfg="chat"] body .cstickytop{background:var(--g-bg) !important}
/* My Plan (APEX)'s own page greys (the week strip's day names, "Split") on the glass background */
html[data-sfg="apexpro"]:not([data-theme="light"]) body{--muted:#abb2bc}
html body .tabbar-scrim{background:rgba(12,14,18,.82) !important}

/* My Plan (APEX) setup's answer buttons sit on the setup's solid panel: their glass is drawn over a SOLID base (the same
   colour the half see-through fill gives on that panel), so the look is unchanged and the Redmi's Chrome has nothing to
   blend with. With a see-through fill it painted leftovers of the previous question into the answer list (18 Oct 2026) */

/* My Plan (APEX) setup's answer buttons: a SOLID fill with the glass top highlight drawn as a lighter top edge, no
   gradient and no inset shadow. With either of those, the Redmi's Chrome painted leftovers of earlier questions into the
   setup's answer list when the question changed (found 18 Oct 2026; proved 3 of 3 clean with this, broken without) */
html body .sfq-tile:not(.on):not(.sel){background:#191c22 !important;box-shadow:none !important;border-top-color:rgba(255,255,255,.34) !important}
/* the small grey lines on the tinted cards (Training, Nutrition, Posture) are lighter still, with a faint shadow, so they
   read on the coloured glass and over the photos */
html:not([data-theme="light"]) body .flip-face.cover .cv-s, html:not([data-theme="light"]) body .posture-strip .ps-s{color:#d3d8de !important;text-shadow:0 1px 2px rgba(0,0,0,.55) !important}

/* measuring only (?glassblur=1 on the practice copy): blur under every card too, to show what it costs */
html.g-allblur body .home-activity, html.g-allblur body .fav-card, html.g-allblur body .pv-card, html.g-allblur body .lrow, html.g-allblur body .tt-ribbon{
  -webkit-backdrop-filter:var(--g-blur) !important; backdrop-filter:var(--g-blur) !important;
}