/* mobile-app.css — actual-phone restyle of generate/study/profile/lesson pages to match
   the native RN app's look. The link/query also admits coarse-pointer phone landscape, while
   page/platform scoping comes from html[data-mpage] + html[data-mweb] stamps. Narrow desktop
   windows never receive the mweb stamp and mobile-app.js disables this sheet as a backstop.
   Tokens mirror the RN palettes (HomeScreen D, StudyScreen C, LessonScreen DARK_C, ProfileScreen D).
   HARD boundaries (from recon): never touch #iframeWrap geometry (generation payload reads it),
   never override display on JS-toggled overlays (.open/.show contracts), never reposition
   .disc-panel.active / the locked body shell, celebration + lesson-iframe internals out of scope. */

@media (max-width: 700px), (hover: none) and (pointer: coarse) {

  :root {
    --ma-bg: #0A0A0E;
    --ma-bg-lesson: #0c0c10;
    --ma-bg-profile: #121118;
    --ma-card: rgba(255, 255, 255, 0.04);
    --ma-card-solid: #0c0c11;
    --ma-panel: #16161d;
    --ma-panel-2: #1c1c24;
    --ma-sheet: #0E0E13;
    --ma-menu: #121118;
    --ma-text: #F2F0EC;
    --ma-muted: #888899;
    --ma-muted-2: #666677;
    --ma-hair: rgba(255, 255, 255, 0.08);
    --ma-hair-soft: rgba(255, 255, 255, 0.06);
    --ma-amber: #F59E0B;
    --ma-amber-bright: #FFB94A;
    --ma-amber-top: #FFC766;
    --ma-amber-active: #B8791C;
    --ma-amber-line: rgba(245, 166, 35, 0.42);
    --ma-ink: #1A1304;
    --ma-serif: Nunito, -apple-system, BlinkMacSystemFont, sans-serif;
    --ma-pill-clear: 28px;  /* safe breathing room only; mweb has no bottom navigation dock */
  }

  /* ══════════ Menu primary nav (mweb ONLY; dock removed 2026-07-21) ══════════
     Home/For You/Explore/History as full cards in gen's sidebar (.sb-card.sb-mweb, beside the
     existing Study/Contact cards) and study's slide menu (.mcard.sb-mweb). Hidden by each
     page's own base CSS — desktop web and the RN app never see them. */
  html[data-mpage] .sb-card.sb-mweb, html[data-mpage] .mcard.sb-mweb { display: flex; }

  /* Tour furniture on phones — no app dock, only Safari's safe-area/browser chrome. */
  html[data-mpage="gen"] #tourAra {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    right: 14px; width: 100px; height: 100px;
  }
  html[data-mpage="gen"] #tourBtns { bottom: calc(env(safe-area-inset-bottom, 0px) + 30px); right: 122px; }
  html[data-mpage="gen"] #tourBubble { bottom: 158px; }
  /* Short landscape phones: 232px + bubble height clips off-screen — tuck everything lower */
  @media (max-height: 450px) {
    html[data-mpage="gen"] #tourBubble { bottom: 120px; }
    html[data-mpage="gen"] #tourAra { display: none; }
  }

  /* Safe-area (viewport-fit=cover): the page now extends under the notch/home-indicator —
     keep content out of the top inset (0 in in-browser Safari; real in installed-PWA mode). */
  html[data-mpage] body { padding-top: env(safe-area-inset-top, 0px); }

  /* iOS 26 bleed runway: Liquid Glass Safari IGNORES theme-color and composites REAL page
     pixels behind its toolbar. The locked-shell pages (gen/lesson: body 100dvh, overflow
     hidden) never paint anything below the viewport, so Safari showed its own fallback as a
     seam. This painted 136px strip below the shell gives Safari genuine pixels to sample
     (study/profile scroll the document normally and bleed on their own). mobile-app.js clamps
     stray document scrolls so the runway stays parked out of view. */
  html[data-mpage="gen"]::after {
    content: ''; display: block; height: 136px; background: var(--ma-bg);
  }
  html[data-mpage="lesson"]::after {
    content: ''; display: block; height: 136px; background: var(--ma-bg-lesson);
  }
  /* Full runway (passive strip insufficient): Safari 26 composites only with a NON-ZERO parked
     scroll state. 62px above the shell + parked scrollY=62 cancel exactly (mobile-app.js parks
     and re-parks); the shell renders identically while the document carries real scroll state
     and painted pixels behind BOTH bars. */
  html[data-mpage="lesson"] { overflow-y: scroll; }
  html[data-mpage="lesson"] body { margin-top: 62px; min-height: 100lvh; }
  /* THE SETTLED ARCHITECTURE (v6 — Felix's side-by-side screenshots): content renders through
     Safari 26's toolbar glass ONLY when it is DOCUMENT content below the visual viewport. A
     locked 100dvh shell with internal scrollers has structurally nothing below the fold — the
     glass can never show page content on it. So gen runs index's natural document scroll on
     phones (the v4 rules): the v4 round only LOOKED broken because the theme-color meta —
     found later — was still forcing legacy OPAQUE bars; document-scroll + no meta was never
     tested together until now. Home tab ran this mode all along (body.home-scroll). */
  html[data-mpage="gen"] body { height: auto; min-height: 100lvh; overflow-y: visible; }
  /* (v26 added a duplicate of the ::after runway above — removed v29; the runway has existed
     since the bleed-runway round, so it was NOT the missing piece for gen's bottom band.) */
  html[data-mpage="gen"] .disc-panel { height: auto !important; overflow: visible !important; }
  html[data-mpage="gen"] #discover .disc-stage { flex: 0 0 auto; min-height: 0; }
  /* v29 — THE actual gen bottom fix: v14 unclamped the panels' height/overflow but left
     `.disc-panel.active { position:absolute; inset:0 }` — every non-Home tab was an absolute
     box pinned to a zero-height stage, painting via scrollable OVERFLOW instead of document
     content. Base line 1576 is the page's own cure for Home (`body.home-scroll #discPopular…
     { position:relative; inset:auto; overflow:visible }`) — apply it to EVERY active panel on
     phones so all tabs are real document flow like Home/study. mobile-app.js resets scrollY on
     tab switches (tabs now share the document scroller). */
  html[data-mpage="gen"] .disc-panel.active { position: relative !important; inset: auto !important; }
  html[data-mpage="gen"] #discover { flex: 0 0 auto; }
  html[data-mpage="study"] body { min-height: 100lvh; }

  /* Root underlay: iOS Safari paints the overscroll / toolbar-adjacent strip with the HTML
     element's background (body's does not reach it) — without these the browser's default
     dark shows as a visible seam between the dock and Safari's own toolbar. */
  html[data-mpage="gen"], html[data-mpage="study"] { background: var(--ma-bg); }
  html[data-mpage="lesson"] { background: var(--ma-bg-lesson); }
  html[data-mpage="profile"] { background: var(--ma-bg-profile); }
  /* SEAM ROOT CAUSE (iOS 26): the desktop look's fixed body::after vignette (up to 65% black at
     the bottom edge) darkens the rendered page edge,
     while the runway strip below the 100dvh viewport paints the flat token. Safari composites
     the strip behind its toolbar, so the toolbar band rendered LIGHTER than the page directly
     above it: every flat-color match was doomed from the start. The app look is flat — kill
     the overlay on phones so page, runway, and toolbar sample are one continuous color. */
  html[data-mpage] body::after { content: none; }
  /* Transparent full-screen fixed layers touching the bottom edge poison Safari 26's tint
     derivation (transparent → BLACK bar). Display-gate them when idle; each reappears via the
     class that actually drives its visible state. Lesson's iframe wrap gets an explicit
     page-color background instead (it is always visible). */
  html[data-mpage] .focus-overlay { display: none; }
  html[data-mpage] body.input-focused .focus-overlay { display: block; }
  html[data-mpage="gen"] #keyUnlockOverlay { display: none; }
  html[data-mpage="gen"] #keyUnlockOverlay:has(#kvStage.play) { display: block; }
  html[data-mpage="lesson"] #iframeWrap { background: var(--ma-bg-lesson); }
  /* The BODY's background-color is the bar's fallback tint source (html ignored) — pin it
     explicitly on every stamped page. */
  html[data-mpage="lesson"] body { background: var(--ma-bg-lesson); }
  html[data-mpage="profile"] body { background: var(--ma-bg-profile); }
  /* NO bottom-edge fixed elements — period. index (the working reference) has none: a SOLID
     fixed element at the edge can't be extended as glass (only semi-transparent ones can), so
     Safari abandons page-derived tint for its DEFAULT system material — a lighter grey glass,
     i.e. the "hint of whiteness" that appeared only while the expanded bar existed. The bar's
     dark tint comes from the flat static body background alone, exactly like index. */
  /* Study's three ALWAYS-RENDERED opacity-0 fixed inset:0 overlays are the same tint poison —
     display-gate them; each reappears via the exact class its own JS toggles. */
  html[data-mpage="study"] .overlay { display: none; }
  html[data-mpage="study"] .overlay.show { display: grid; }
  html[data-mpage="study"] .smenu-backdrop { display: none; }
  html[data-mpage="study"] .smenu-backdrop.open { display: block; }
  html[data-mpage="study"] .ph-backdrop { display: none; }
  html[data-mpage="study"] .ph-backdrop.open { display: flex; }

  /* ═════════════════════════ GENERATE (Home) — app "Zen Minimal" ═════════════════════════ */
  html[data-mpage="gen"] body { background: var(--ma-bg); }

  /* Top bar → quiet stat row: flatten chrome, keep every control functional */
  /* Sticky like index (and like the app, whose stat chips are fixed chrome): an opaque element
     permanently at the top edge is what actually keeps Safari's top bar page-colored mid-scroll. */
  /* EXACTLY index's working recipe — sticky, FLAT page color, nothing else. The v19 fade and
     v21 black nav were self-inflicted: each painted a visible dark band below the URL bar (the
     very thing being debugged). Index has no band BECAUSE its nav is flat. Do not re-add
     gradients or black here. */
  html[data-mpage="gen"] nav { position: sticky; top: 0; z-index: 60; background: var(--ma-bg); border-bottom: none; box-shadow: none; }
  html[data-mpage="gen"] .nav-inner { padding: 8px 16px; }
  html[data-mpage="gen"] .nav-right { gap: 8px; }
  html[data-mpage="gen"] .nav-right > * { border: none; background: transparent; }
  html[data-mpage="gen"] #acctBtn {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--ma-hair); background: transparent; color: var(--ma-text);
  }

  /* The page's own tab strip is replaced by the glass pill (buttons stay in DOM — the pill clicks them) */
  html[data-mpage="gen"] .disc-tabs-top { display: none; }

  /* Collapsed-hero "Learn something new… / + New lesson" bar on non-Home tabs: the app has no
     equivalent (Home on the dock is the create path) — remove the whole collapsed band on phone.
     Class contract intact: .compact comes and goes via setDiscTab; Home renders .main normally. */
  html[data-mpage="gen"] .main.compact { display: none; }

  /* Hero: serif editorial, centered — kicker / Georgia headline / underlined topic input */
  html[data-mpage="gen"] .main { padding: 10px 20px 16px; }
  html[data-mpage="gen"] .z-kicker {
    color: var(--ma-amber); font-size: 12px; font-weight: 700;
    letter-spacing: 2.8px; text-transform: uppercase;
  }
  html[data-mpage="gen"] h1.z-head {
    font-family: var(--ma-serif); font-weight: 400;
    font-size: 36px; line-height: 1.12; letter-spacing: -1px; color: var(--ma-text);
  }
  html[data-mpage="gen"] h1.z-head em, html[data-mpage="gen"] h1.z-head i { color: #FFF7EA; }
  html[data-mpage="gen"] .topic-input, html[data-mpage="gen"] .z-input {
    font-family: var(--ma-serif); font-size: 22px; text-align: center;
    background: transparent; color: var(--ma-text);
    padding-left: 24px !important; padding-right: 24px !important; /* symmetric — centers the caret (base pads 56px left) */
  }
  /* .z-chip ONLY — the `> *` form also caught #diffMenu/#lenMenu (direct .z-chips children),
     turning the dropdowns into 999px-radius translucent blobs (Felix's 12:49 screenshots). */
  html[data-mpage="gen"] .z-chips > .z-chip {
    border-radius: 999px; background: var(--ma-card);
    border: 1px solid var(--ma-hair); color: var(--ma-text);
  }
  /* The open dropdowns, app dialog language: solid sheet, radius 16 (base geometry kept) */
  html[data-mpage="gen"] .z-chips .z-menu {
    background: var(--ma-sheet); border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  }

  /* Primary CTA: the app's amber gradient card button */
  html[data-mpage="gen"] #genBtn {
    max-width: 340px; min-height: 58px; border-radius: 18px;
    background: linear-gradient(180deg, var(--ma-amber-top), var(--ma-amber));
    color: var(--ma-ink); font-size: 17px; font-weight: 700; border: none;
    box-shadow: 0 9px 20px rgba(245, 158, 11, 0.28);
  }

  /* Content panels: app card language + clearance for the pill */
  html[data-mpage="gen"] .disc-panel { padding-bottom: var(--ma-pill-clear) !important; }
  html[data-mpage="study"] .main { padding-bottom: calc(var(--ma-pill-clear) + env(safe-area-inset-bottom, 0px)); }
  html[data-mpage="gen"] .cat-card, html[data-mpage="gen"] .topic-card {
    border-radius: 16px; background: var(--ma-card); border: 1px solid var(--ma-hair);
  }
  html[data-mpage="gen"] .sidebar { width: min(300px, 84vw); background: var(--ma-menu); }
  html[data-mpage="gen"] .acct-dropdown { right: 8px; max-width: calc(100vw - 16px); border-radius: 16px; background: var(--ma-menu); border: 1px solid var(--ma-hair); }
  html[data-mpage="gen"] .lmodal { border-radius: 24px; background: var(--ma-sheet); border: 1px solid rgba(255, 255, 255, 0.12); }
  html[data-mpage="gen"] .paywall-modal { border-radius: 24px; }

  /* ── Native LearningHome app bar: menu + wordmark, then streak / keys / search. ──
     Points and profile normally live behind the native dock; mweb has no dock, so both are
     represented in the existing slide-out menu instead of crowding this 55px row. */
  html[data-mweb][data-mpage="gen"] nav { min-height: 55px; }
  html[data-mweb][data-mpage="gen"] .nav-inner { height: 55px; padding: 1px 18px 7px; gap: 8px; }
  html[data-mweb][data-mpage="gen"] .nav-left { min-width: 0; flex: 1 1 auto; gap: 8px; }
  html[data-mweb][data-mpage="gen"] .nav-logo {
    display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    font-family: var(--ma-serif); font-size: 19px; font-weight: 400;
    letter-spacing: -0.2px; white-space: nowrap;
  }
  html[data-mpage="gen"] #navGoPremium,
  html[data-mpage="gen"] #navGoproDiv,
  html[data-mpage="study"] #navGoPremium { display: none !important; } /* CSS wins over the JS show/hide (it only toggles inline display '' / 'none'), so phone stays hidden in both states */
  html[data-mpage="gen"] .nav-chip-div,
  html[data-mpage="gen"] .nav-chip-l,
  html[data-mpage="study"] .nav-chip-div,
  html[data-mpage="study"] .nav-chip-l { display: none; }
  html[data-mweb][data-mpage="gen"] .sidebar-btn { width: 32px; height: 36px; flex: 0 0 32px; background: none; border: none; color: var(--ma-muted); padding: 5px; }
  html[data-mweb][data-mpage="gen"] .sidebar-btn svg { width: 24px; height: 24px; }
  html[data-mpage="gen"] .nav-chip,
  html[data-mpage="study"] .nav-chip {
    background: none; border: none; padding: 4px 2px; box-shadow: none;
  }
  html[data-mweb][data-mpage="gen"] .nav-right { flex: 0 0 auto; gap: 8px; align-items: center; }
  html[data-mweb][data-mpage="gen"] #navPoints,
  html[data-mweb][data-mpage="gen"] #acctWrap { display: none !important; }
  html[data-mweb][data-mpage="gen"] .sb-card.sb-phone-only { display: flex; }
  html[data-mweb][data-mpage="gen"] .nav-search-mweb {
    position: relative; width: 38px; height: 38px; flex: 0 0 38px;
    display: grid; place-items: center; padding: 0;
    border: 1px solid var(--ma-hair) !important; border-radius: 13px;
    background: rgba(255,255,255,0.025) !important; color: var(--ma-muted);
  }
  html[data-mweb][data-mpage="gen"] .nav-search-mweb svg { width: 18px; height: 18px; }
  html[data-mweb][data-mpage="gen"] .nav-search-mweb span {
    position: absolute; right: -2px; top: -6px; color: var(--ma-amber-bright); font-size: 10px;
  }
  html[data-mpage="gen"] .nav-chip-v,
  html[data-mpage="study"] .nav-chip-v {
    font-family: 'SpaceMono', ui-monospace, Menlo, monospace;
    font-size: 15px; font-weight: 700; color: var(--ma-text);
  }
  html[data-mpage="gen"] #navStreakChip .streak-flame { width: 17px; height: 17px; }
  html[data-mweb][data-mpage="gen"] #navStreakChip,
  html[data-mweb][data-mpage="gen"] #navKeyCol {
    min-width: 42px; height: 36px; justify-content: center; align-items: center;
    padding: 0 8px; border: 1px solid var(--ma-hair); border-radius: 13px;
    background: rgba(255,255,255,0.025);
  }
  html[data-mweb][data-mpage="gen"] #navStreakChip { min-width: 48px; padding: 0 9px; }
  html[data-mweb][data-mpage="gen"] #navStreakChip .nav-chip-top { gap: 4px; }
  html[data-mweb][data-mpage="gen"] #navStreakChip .nav-chip-v,
  html[data-mweb][data-mpage="gen"] #navKeyCol .nav-chip-v {
    font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 11px; font-weight: 750;
  }
  html[data-mweb][data-mpage="gen"] #navProCol {
    width: 74px; min-width: 74px; height: 36px; flex: 0 0 74px; padding: 0;
    border: 1px solid rgba(255,190,72,.46); border-radius: 12px;
    background: linear-gradient(180deg, #493116 0%, #2B2117 48%, #17130F 100%);
    box-shadow: 0 3px 0 #704108, 0 5px 14px rgba(245,158,11,.22), inset 0 1px 0 rgba(255,245,214,.38);
  }
  html[data-mweb][data-mpage="gen"] #navProCol .nav-chip-v {
    color: #FFE6A6;
    font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 9.2px; font-weight: 900;
    letter-spacing: .9px; text-transform: uppercase;
  }
  /* Points: the app's flash bolt before the number */
  html[data-mpage="gen"] #navPointsVal::before,
  html[data-mpage="study"] #stPoints::before {
    content: ''; display: inline-block; width: 15px; height: 15px;
    margin: 0 3px -2px 0; background: #F4C430;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4.5 13H11l-1 9 9.5-12H13z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4.5 13H11l-1 9 9.5-12H13z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  /* Keys: amber key + amber count with the app's glow. NO !important — the page sets an
     inline red color for the out-of-keys countdown (generate.html:7360) and that state
     must keep winning. */
  html[data-mpage="gen"] .nav-chip-key,
  html[data-mpage="study"] .nav-chip-key {
    color: var(--ma-amber-bright);
    text-shadow: 0 0 10px rgba(245, 166, 35, 0.7);
  }
  html[data-mpage="gen"] #navKeyVal::before,
  html[data-mpage="study"] #stKeys::before {
    content: ''; display: inline-block; width: 15px; height: 15px;
    margin: 0 3px -2px 0; background: var(--ma-amber-bright);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 10a5 5 0 1 0-9.58 2H3v4h3v3h4v-3h1.42A5 5 0 0 0 21 10zm-5 1.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 10a5 5 0 1 0-9.58 2H3v4h3v3h4v-3h1.42A5 5 0 0 0 21 10zm-5 1.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  html[data-mpage="gen"] .acct-btn {
    width: 38px; height: 38px; border-radius: 50%;
    background: transparent; border: 1px solid var(--ma-hair); color: var(--ma-text);
  }

  /* ══ Signed-in Home: match the current native LearningHome hierarchy ══ */
  html[data-mweb][data-mpage="gen"] #discover { padding-left: 0; padding-right: 0; }
  /* Home owns its intentional full-bleed composition. Explore and History mirror the
     native screen instead: a 20px reading gutter keeps titles, artwork and progress
     counts clear of the phone edge. */
  html[data-mpage="gen"] :is(#discExplore, #discHistory).disc-panel.active {
    box-sizing: border-box;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html[data-mpage="gen"] :is(#discExplore, #discHistory) {
    --serif: Georgia, "Times New Roman", serif;
  }
  html[data-mpage="gen"] #discExplore .ex-lead { padding: 24px 18px 17px; }
  html[data-mpage="gen"] #discExplore #catDetail .ex-catname { font-size: 18px; line-height: 22px; }
  html[data-mpage="gen"] #discExplore #catDetail .ex-catdesc { font-size: 13px; line-height: 19px; margin-top: 5px; }
  html[data-mpage="gen"] #discExplore #catDetail .ex-catmeta { font-size: 11.5px; margin-top: 8px; }
  html[data-mpage="gen"] #discExplore #catDetail .ex-catright { flex-basis: 58px; }
  html[data-mpage="gen"] #discExplore #catDetail .ex-ratio { font-size: 15.5px; }
  html[data-mpage="gen"] #discExplore #catDetail .ex-ratio small { font-size: 12.5px; }
  html[data-mpage="gen"] #discExplore #catDetail .ex-bar { height: 3px; margin-top: 9px; }
  html[data-mpage="gen"] #discExplore #catDetail .ex-catrow.lead::before { left: -20px; }
  html[data-mpage="gen"] #discHistory .hx-filters {
    flex-wrap: nowrap; overflow-x: auto;
    margin-inline: -20px; padding-inline: 20px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  html[data-mpage="gen"] #discHistory .hx-filters::-webkit-scrollbar { display: none; }
  html[data-mweb][data-mpage="gen"] #discPopular.disc-panel.active { padding-bottom: 28px !important; }
  html[data-mweb][data-mpage="gen"] .lh-home { padding: 10px 16px 28px; }
  html[data-mweb][data-mpage="gen"] .lh-welcome { display: none; }
  html[data-mweb][data-mpage="gen"] .lh-pair { display: flex; flex-direction: column; gap: 11px; }
  html[data-mweb][data-mpage="gen"] .lh-card { aspect-ratio: auto; }
  html[data-mweb][data-mpage="gen"] .lh-branch-card {
    order: -1; min-height: 0; padding: 5px 6px 12px; overflow: visible;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
  }
  html[data-mweb][data-mpage="gen"] .lh-branch-head {
    order: 1; min-height: 0; padding: 0 24px; text-align: center; cursor: pointer;
  }
  html[data-mweb][data-mpage="gen"] .lh-branch-head > span { display: none; }
  html[data-mweb][data-mpage="gen"] .lh-branch-head h2 {
    margin-top: 0; font-size: 25px; line-height: 27px; letter-spacing: -.45px;
  }
  html[data-mweb][data-mpage="gen"] .lh-branch-head p {
    max-width: 310px; margin-top: 7px; font-size: 11px; line-height: 14.3px; -webkit-line-clamp: 2;
  }
  html[data-mweb][data-mpage="gen"] .lh-mobile-subject {
    position: static; z-index: 5; order: 2; align-self: center;
    width: auto; height: 34px; min-height: 34px; margin-top: 11px;
    display: inline-flex !important; place-items: initial; padding: 4px 9px 4px 5px;
  }
  html[data-mweb][data-mpage="gen"] .lh-mobile-subject .lh-subject-mini {
    width: 24px; height: 24px; background: transparent;
  }
  html[data-mweb][data-mpage="gen"] .lh-mobile-subject .lh-subject-mini svg { width: 24px; height: 24px; }
  html[data-mweb][data-mpage="gen"] .lh-mobile-subject > span:not(.lh-subject-mini),
  html[data-mweb][data-mpage="gen"] .lh-mobile-subject .lh-change-chev { display: grid !important; }
  html[data-mweb][data-mpage="gen"] .lh-mobile-subject > span:not(.lh-subject-mini) {
    display: inline !important; font-size: 10.5px; font-weight: 700;
  }
  html[data-mweb][data-mpage="gen"] .lh-mobile-subject .lh-change-chev { width: 20px; height: 20px; display: grid !important; }
  html[data-mweb][data-mpage="gen"] .lh-branch-art {
    order: 3; width: 100%; min-height: 300px; height: min(340px,calc(100vw - 52px));
    flex: 0 0 min(340px,calc(100vw - 52px)); cursor: pointer;
  }
  html[data-mweb][data-mpage="gen"] .lh-art-halo { width: min(340px,calc(100vw - 52px)); }
  html[data-mweb][data-mpage="gen"] .lh-float-ground {
    bottom: 5px; width: min(164px,48%); height: 14px;
  }
  html[data-mweb][data-mpage="gen"] .lh-branch-scene {
    width: min(340px,calc(100vw - 52px)); max-height: none;
  }
  html[data-mweb][data-mpage="gen"] .lh-branch-scene svg { width: 100%; max-height: none; }
  html[data-mweb][data-mpage="gen"] .lh-branch-switch {
    order: 4; min-height: 48px; justify-content: center; margin-top: 2px; padding: 3px 8px;
    border: 0; background: transparent; box-shadow: none;
  }
  html[data-mweb][data-mpage="gen"] .lh-switch-copy { display: none; }
  html[data-mweb][data-mpage="gen"] .lh-branch-controls { justify-content: center; gap: 15px; }
  html[data-mweb][data-mpage="gen"] .lh-branch-controls .lh-arrow { width: 40px; height: 40px; }
  html[data-mweb][data-mpage="gen"] .lh-branch-controls .lh-count { min-width: 50px; }

  html[data-mweb][data-mpage="gen"] .lh-eyebrow-desktop { display: none; }
  html[data-mweb][data-mpage="gen"] .lh-eyebrow-mweb { display: inline-flex; align-items: center; gap: 6px; }
  html[data-mweb][data-mpage="gen"] .lh-eyebrow-mweb i { width: 3px; height: 3px; border-radius: 50%; background: #5d5962; }
  html[data-mweb][data-mpage="gen"] .lh-eyebrow-mweb b {
    color: #8c8791; font-size: 7.4px; font-weight: 700; letter-spacing: .7px;
  }
  html[data-mweb][data-mpage="gen"] .lh-eyebrow.is-complete .lh-eyebrow-mweb b { color: #4ade80; }
  html[data-mweb][data-mpage="gen"] .lh-lesson-card {
    min-height: 0; padding: 15px 15px 14px; border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03),0 3px 0 #07070a,0 15px 30px rgba(0,0,0,.28);
  }
  html[data-mweb][data-mpage="gen"] .lh-card-top { gap: 7px; }
  html[data-mweb][data-mpage="gen"] .lh-eyebrow { font-size: 7.6px; letter-spacing: 1px; }
  html[data-mweb][data-mpage="gen"] .lh-eyebrow::before { width: 10px; }
  html[data-mweb][data-mpage="gen"] .lh-lesson-nav { gap: 4px; }
  html[data-mweb][data-mpage="gen"] .lh-lesson-nav .lh-arrow {
    width: 30px; height: 30px; border-radius: 9px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.11),0 2px 0 #08080b,0 5px 9px rgba(0,0,0,.27);
  }
  html[data-mweb][data-mpage="gen"] .lh-lesson-nav .lh-count { min-width: 40px; padding: 4px 5px; font-size: 7px; }
  html[data-mweb][data-mpage="gen"] .lh-topic-title,
  html[data-mweb][data-mpage="gen"] .lh-topic-title.long { margin: 11px 0 5px; font-size: 24px; line-height: 1.04; }
  html[data-mweb][data-mpage="gen"] .lh-topic-title.long { font-size: 21px; }
  html[data-mweb][data-mpage="gen"] .lh-topic-desc {
    min-height: 0; -webkit-line-clamp: 3; color: #b8b3bb; font-size: 10.5px; line-height: 1.36;
  }
  html[data-mweb][data-mpage="gen"] .lh-topic-meta { max-width: 100%; margin-top: 8px; gap: 5px; font-size: 8px; white-space: nowrap; }
  html[data-mweb][data-mpage="gen"] .lh-topic-meta svg { width: 11px; height: 11px; }
  html[data-mweb][data-mpage="gen"] .lh-topic-meta .lh-unit { max-width: 145px; overflow: hidden; text-overflow: ellipsis; }
  html[data-mweb][data-mpage="gen"] .lh-topic-meta .lh-position { display: none; }
  html[data-mweb][data-mpage="gen"] .lh-settings { min-height: 43px; margin-top: 11px; border-radius: 14px; }
  html[data-mweb][data-mpage="gen"] .lh-setting-btn { min-height: 41px; padding: 4px 8px 4px 12px; }
  html[data-mweb][data-mpage="gen"] .lh-setting-copy { display: block; }
  html[data-mweb][data-mpage="gen"] .lh-setting-copy small { display: none; }
  html[data-mweb][data-mpage="gen"] .lh-setting-value { font-size: 10.5px; }
  html[data-mweb][data-mpage="gen"] .lh-setting-chev { width: 20px; height: 20px; border-radius: 7px; }
  html[data-mweb][data-mpage="gen"] .lh-setting-chev svg { width: 10px; height: 10px; }
  html[data-mweb][data-mpage="gen"] .lh-setting-menu { left: 0; right: auto; bottom: calc(100% + 7px); width: 225px; }
  html[data-mweb][data-mpage="gen"] .lh-setting-wrap:last-child .lh-setting-menu { right: 0; left: auto; width: 210px; }
  html[data-mweb][data-mpage="gen"] .lh-actions { grid-template-columns: 1fr; margin-top: 14px; }
  html[data-mweb][data-mpage="gen"] .lh-action { min-height: 45px; border-radius: 14px; font-size: 13.5px; }
  html[data-mweb][data-mpage="gen"] .lh-action.secondary { display: none; }
  html[data-mweb][data-mpage="gen"] .lh-mobile-search,
  html[data-mweb][data-mpage="gen"] .lh-skel-search { display: none !important; }

  /* Loading state uses the same full-scale hero so auth hydration never causes a 170px jump. */
  html[data-mweb][data-mpage="gen"] .lh-skeleton .lh-branch-card { min-height: 446px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-mobile-subject {
    position: static; order: 2; align-self: center; width: 126px; height: 34px;
    margin-top: 11px; display: block; border-radius: 12px;
  }
  html[data-mweb][data-mpage="gen"] .lh-skeleton .lh-branch-head { order: 1; }
  html[data-mweb][data-mpage="gen"] .lh-skeleton .lh-branch-art {
    order: 3; min-height: 300px; height: min(340px,calc(100vw - 52px));
  }
  html[data-mweb][data-mpage="gen"] .lh-skeleton .lh-branch-switch { order: 4; }
  html[data-mweb][data-mpage="gen"] .lh-skel-art { width: min(316px,calc(100vw - 72px)); }
  html[data-mweb][data-mpage="gen"] .lh-skel-ground { bottom: 5px; width: 46%; height: 14px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-card-top { gap: 7px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-eyebrow { width: 68px; height: 7px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-nav { gap: 4px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-nav-button { width: 30px; height: 30px; border-radius: 9px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-nav-count { width: 40px; height: 19px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-lesson-copy { margin-top: 12px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-title { width: 72%; height: 25px; border-radius: 8px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-desc { height: 8px; margin-top: 10px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-desc-short { margin-top: 6px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-meta { width: 44%; height: 7px; margin-top: 10px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-settings { min-height: 43px; margin-top: 12px; padding: 7px 10px; border-radius: 14px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-setting { gap: 0; padding-right: 10px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-setting + .lh-skel-setting { padding-left: 10px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-setting-label { display: none; }
  html[data-mweb][data-mpage="gen"] .lh-skel-setting-value { height: 9px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-actions { grid-template-columns: 1fr; margin-top: 14px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-action { height: 45px; border-radius: 14px; }
  html[data-mweb][data-mpage="gen"] .lh-skel-action:last-child { display: none; }

  html[data-mweb][data-mpage="gen"] .lh-subject-overlay { padding: 10px; align-items: flex-end; }
  html[data-mweb][data-mpage="gen"] .lh-subject-dialog { width: 100%; max-height: 86dvh; border-radius: 24px 24px 12px 12px; }
  html[data-mweb][data-mpage="gen"] .lh-subject-dialog-head { padding: 20px 18px 15px; }
  html[data-mweb][data-mpage="gen"] .lh-subject-dialog-head h2 { font-size: 27px; }
  html[data-mweb][data-mpage="gen"] .lh-subject-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; padding: 14px; }
  html[data-mweb][data-mpage="gen"] .lh-subject-option { min-height: 132px; }
  html[data-mweb][data-mpage="gen"] .lh-subject-option-icon { width: 72px; height: 72px; }
  html[data-mweb][data-mpage="gen"] .lh-subject-option-icon svg { width: 70px; height: 70px; }
  /* Setup-flow branch step (Home anchor repair). generate.html carries the same rules in its
     portrait @media block; this mirror is what covers landscape phones wider than 700px. */
  html[data-mweb][data-mpage="gen"] .lh-subject-grid.is-branches { grid-template-columns: minmax(0,1fr); }
  html[data-mweb][data-mpage="gen"] .lh-branch-option { padding: 13px 14px; gap: 12px; }
  html[data-mweb][data-mpage="gen"] .lh-branch-option-art { width: 54px; height: 54px; }
  html[data-mweb][data-mpage="gen"] .lh-branch-option-art svg { width: 52px; height: 52px; }
  html[data-mweb][data-mpage="gen"] .lh-empty { min-height: 500px; padding: 0 10px; }

  /* Dedicated custom-topic creator: same native generator spacing, but web menu chrome remains. */
  html[data-mweb][data-mpage="gen"][data-custom-topic] body .main:not(.compact) {
    min-height: calc(100dvh - 55px); padding: 12px 20px 32px !important;
  }
  html[data-mweb][data-mpage="gen"][data-custom-topic] .lh-search-back {
    margin: 0 0 4px -7px; padding: 7px; border: 0; background: transparent;
    box-shadow: none; color: var(--ma-muted); font-size: 13px;
  }
  html[data-mweb][data-mpage="gen"][data-custom-topic] .lh-back-desktop { display: none; }
  html[data-mweb][data-mpage="gen"][data-custom-topic] .lh-back-mweb { display: inline; }
  html[data-mweb][data-mpage="gen"][data-custom-topic] .main .z-kicker { margin-bottom: 20px; }
  html[data-mweb][data-mpage="gen"][data-custom-topic] .main .z-head {
    margin-bottom: 28px; font-size: clamp(40px,11.5vw,50px); line-height: 1.1; letter-spacing: -1.35px;
  }
  html[data-mweb][data-mpage="gen"][data-custom-topic] .main .z-field { max-width: 340px; margin-bottom: 28px; }
  html[data-mweb][data-mpage="gen"][data-custom-topic] .main .z-cta { margin-top: 20px; }
  html[data-mweb][data-mpage="gen"][data-custom-topic] .main .z-support { display: none; }

  /* iOS consumes the first row tap when it has to reveal this hover-only action. */
  html[data-mweb][data-mpage="gen"] .hx-del { opacity: 1; }

  /* ═════════════════════════ STUDY — app "Your courses" ═════════════════════════ */
  html[data-mpage="study"] body, html[data-mpage="study"] .main { background: var(--ma-bg); }

  html[data-mpage="study"] header.topbar {
    background: var(--ma-bg); border-bottom: none; padding: 8px 12px; gap: 8px;
  }
  html[data-mpage="study"] .topbar .crumb { font-size: 13px; min-width: 0; }
  html[data-mpage="study"] #crumbHere { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  html[data-mpage="study"] .phead h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.4px; color: var(--ma-text); }
  html[data-mpage="study"] .hc-tabs button {
    border-radius: 11px; background: var(--ma-panel); border: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--ma-muted); font-weight: 700; font-size: 13.5px; min-height: 40px;
  }
  html[data-mpage="study"] .hc-tabs button.on {
    border-color: #6b6b7a; color: var(--ma-text);
  }
  /* The wrapper is the box (the page already borders/pads .hc-search) — strip it and style
     the input as the single 44px field, no box-in-a-box. */
  html[data-mpage="study"] .hc-search { background: transparent; border: none; padding: 0; }
  html[data-mpage="study"] .hc-search input, html[data-mpage="study"] #courseSearch {
    height: 44px; border-radius: 12px; background: var(--ma-panel-2);
    border: 1px solid var(--ma-hair); color: var(--ma-text); font-size: 14.5px; padding: 0 12px;
  }
  html[data-mpage="study"] #courseSearch:focus { border-color: var(--ma-amber); }

  /* Course cards: 2-col grid of solid dark cards, exactly the app anatomy */
  html[data-mpage="study"] #courses { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  html[data-mpage="study"] .course {
    min-height: 150px; border-radius: 16px; background: var(--ma-card-solid);
    border: 1px solid rgba(255, 255, 255, 0.07); padding: 16px;
    box-shadow: 0 9px 16px rgba(0, 0, 0, 0.5);
  }
  html[data-mpage="study"] .course h3 { font-size: 15.5px; font-weight: 700; letter-spacing: -0.2px; }
  html[data-mpage="study"] .course .code { font-family: Menlo, monospace; font-size: 11.5px; color: var(--ma-muted); }

  /* Course view: touchable rows */
  html[data-mpage="study"] .sec-inner { padding-left: 30px; }
  html[data-mpage="study"] .lesson { padding-top: 12px; padding-bottom: 12px; }
  html[data-mpage="study"] .lgen, html[data-mpage="study"] .lstudy { min-height: 38px; padding: 8px 14px; border-radius: 999px; }
  html[data-mpage="study"] .part, html[data-mpage="study"] .sec { border-radius: 12px; background: #0d0d12; padding: 6px 10px; }

  html[data-mpage="study"] .content { padding-bottom: var(--ma-pill-clear) !important; }
  html[data-mpage="study"] .nmodal, html[data-mpage="study"] .ltool { border-radius: 24px; background: var(--ma-sheet); }

  /* ═════════════════════════ PROFILE — app profile screen ═════════════════════════ */
  html[data-mpage="profile"] body {
    background: var(--ma-bg-profile);
    background-image: linear-gradient(180deg, rgba(245, 158, 11, 0.10) 0%, rgba(245, 158, 11, 0) 32%);
    background-repeat: no-repeat;
  }
  html[data-mpage="profile"] nav {
    background: var(--ma-bg-profile); border-bottom: 1px solid var(--ma-hair);
    padding: 12px 16px;
  }
  html[data-mpage="profile"] .page-wrap { padding: 16px 16px 96px; }

  /* Cards: #1A1922, radius 16, hairline — !important wins the page's [data-theme] specificity */
  html[data-mpage="profile"] .section,
  html[data-mpage="profile"] .stat-card:not(.premium),
  html[data-mpage="profile"] .plan-card,
  html[data-mpage="profile"] .profile-header {
    background: #1A1922 !important;
    border: 1px solid var(--ma-hair) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
  }
  /* Premium stat-card keeps its platinum treatment (sheen + gradient number belong together) */
  html[data-mpage="profile"] .stat-card.premium { border-radius: 16px !important; }
  html[data-mpage="profile"] .section-header { padding: 14px 16px 11px; }
  html[data-mpage="profile"] .section-body { padding: 14px 16px 18px; }
  html[data-mpage="profile"] .profile-header { padding: 18px; gap: 14px; }
  html[data-mpage="profile"] #avatar {
    width: 52px; height: 52px; font-size: 20px; font-weight: 700;
    background: var(--ma-amber); color: var(--ma-ink);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.5);
  }
  html[data-mpage="profile"] .name-row { flex-direction: column; gap: 10px; }
  html[data-mpage="profile"] input, html[data-mpage="profile"] textarea {
    border-radius: 10px; background: #131218 !important;
    border: 1px solid var(--ma-hair); color: var(--ma-text); padding: 12px 11px; font-size: 16px;
  }
  html[data-mpage="profile"] input:focus, html[data-mpage="profile"] textarea:focus {
    border-color: var(--ma-amber);
  }
  html[data-mpage="profile"] .btn { border-radius: 10px; min-height: 44px; }
  html[data-mpage="profile"] .btn-primary {
    background: linear-gradient(180deg, var(--ma-amber-top), var(--ma-amber));
    color: var(--ma-ink); border: none; font-weight: 700;
  }

  /* Support modal stays CENTERED (not a bottom sheet): the page autofocuses the subject field
     on open, and a fixed bottom-anchored sheet ends up under the iOS keyboard with no way to
     scroll the Send button into view. Centered + app skin is the keyboard-safe shape here. */
  html[data-mpage="profile"] .support-modal {
    border-radius: 22px;
    background: var(--ma-sheet); border: 1px solid rgba(255, 255, 255, 0.12);
  }

  /* ═════════════════════════ LESSON — page chrome only (iframe untouched) ═════════════════════════ */
  html[data-mpage="lesson"] body { background: var(--ma-bg-lesson); }
  html[data-mpage="lesson"] #topBar { background: var(--ma-bg-lesson); border-bottom: none; box-shadow: none; }
  html[data-mpage="lesson"] #tbBar { padding: 0 12px; gap: 10px; }
  html[data-mpage="lesson"] #topicBadge { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; color: var(--ma-text); }
  html[data-mpage="lesson"] #progressSegs { gap: 3px; }
  html[data-mpage="lesson"] #progressSegs > * { height: 2px; border-radius: 1px; }
  html[data-mpage="lesson"] #tbMoreMenu {
    border-radius: 12px; background: #1A1A1A; border: 1px solid var(--ma-hair);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); min-width: 180px;
  }
  html[data-mpage="lesson"] #tbMoreMenu button { padding: 13px 14px; font-size: 14px; }
  /* No added border on #pmCard — the page draws its own ::before gradient border-ring;
     a second border doubles the edge. */
  /* Completion card = the app's _mob_sheet exactly (graphite gradient + amber crown; the
     Continue button is deliberately the app's UNDERLINE style, not a filled CTA). */
  html[data-mpage="lesson"] #pmCard {
    max-width: 360px; border-radius: 28px; border: 1px solid rgba(255,255,255,0.13);
    padding: 32px 28px 24px;
    background: radial-gradient(120% 60% at 50% 0%, rgba(245,166,35,0.05), transparent 46%),
                linear-gradient(180deg, #17171E 0%, #101015 100%);
    box-shadow: 0 30px 80px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  html[data-mpage="lesson"] #pmNext {
    background: none !important; border: none; border-bottom: 1.5px solid #FFB94A; border-radius: 0;
    color: #fff; font-size: 16px; font-weight: 600; min-height: 44px; padding: 8px 6px;
    display: inline-flex; gap: 9px; box-shadow: none;
  }
  html[data-mpage="lesson"] #pmCard #pmNext svg { color: #FFB94A; }
  /* Moment-1 quiz on mweb: the PREMIUM sheet + 3D option gradients come from lesson.html's
     own #mqCard rules (single source — restyling them here would fork the look). This block
     only resizes for the phone: app-sized tap targets (44px+ min) and the app's tighter
     card width/radius. ⛔ Do not re-add background/border overrides — that flat wash was
     exactly what the premium pass replaced. */
  html[data-mpage="lesson"] #mqBackdrop {
    background: radial-gradient(150% 72% at 50% 60%, rgba(245,166,35,0.06), transparent 58%), rgba(6,6,9,0.62);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  }
  html[data-mpage="lesson"] #mqCard { max-width: 360px; border-radius: 26px; padding: 28px 22px 22px; }
  html[data-mpage="lesson"] #mqCard::before { border-radius: 26px; }
  html[data-mpage="lesson"] #mqCard .mq-opt { min-height: 48px; border-radius: 15px; padding: 13px 15px; }
  html[data-mpage="lesson"] #mqCard .mq-key { width: 22px; height: 22px; border-radius: 7px; }
  html[data-mpage="lesson"] #mqCard .mq-next {
    background: none !important; border: none; border-bottom: 1.5px solid #FFB94A; border-radius: 0;
    color: #fff; font-size: 16px; font-weight: 600; min-height: 44px; padding: 8px 6px;
    display: inline-flex; gap: 9px; box-shadow: none;
  }
  html[data-mpage="lesson"] #mqCard .mq-next svg { color: #FFB94A; }
  html[data-mpage="lesson"] #mqCard .mq-skip { min-height: 44px; }
  html[data-mpage="lesson"] #mqCard .mq-restart { min-height: 44px; }
  html[data-mpage="lesson"] #mqCard .mq-score { font-size: 44px; }
  /* Next-moment dock removed from lesson.html 2026-08-17 — its app-look override went with it. */
  html[data-mpage="lesson"] #topBarPull { display: none !important; }  /* app bar never hides */

  /* ═════════════════ FULL MOBILEFY — every remaining surface, app treatment ═════════════════
     Appearance-only: never sets display on JS-toggled overlays (.open/.show contracts), never
     touches #iframeWrap geometry, celebration.js surfaces untouched. */

  /* Shared dialog language: dark sheet, radius 24, hairline — the app's modal anatomy */
  html[data-mpage="gen"] .disc-all-modal,
  html[data-mpage="gen"] .ph-modal,
  html[data-mpage="gen"] .lb-modal,
  html[data-mpage="gen"] .support-modal,
  html[data-mpage="gen"] .cat-modal,
  html[data-mpage="study"] .support-modal,
  html[data-mpage="study"] .up-card,
  html[data-mpage="lesson"] #failModalBox {
    background: var(--ma-sheet) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.6) !important;
  }
  /* Streak + keys modals are inline-styled cards — restyle the card, not the backdrop contract */
  html[data-mpage="gen"] #streakModalBackdrop .prem-card,
  html[data-mpage="gen"] #streakModalBackdrop > div:first-child,
  html[data-mpage="gen"] #keyModalBackdrop .prem-card,
  html[data-mpage="gen"] #keyModalBackdrop > div:first-child,
  html[data-mpage="study"] #streakModalBackdrop > div:first-child,
  html[data-mpage="study"] #keyModalBackdrop > div:first-child {
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  /* Primary CTAs everywhere: the app's amber gradient card button */
  /* NOTE: .promobar-cta is deliberately NOT in this group — Felix wants the promobar's
     "Go Premium" as the page's own animated shimmer TEXT on phone (base style), no pill. */
  html[data-mpage="gen"] .lmodal-actions button:not(.seg-btn):last-child,
  html[data-mpage="gen"] #paywallCta,
  html[data-mpage="study"] #paywallCta,
  html[data-mpage="study"] #lmGen {
    background: linear-gradient(180deg, var(--ma-amber-top), var(--ma-amber)) !important;
    color: var(--ma-ink) !important;
    -webkit-text-fill-color: var(--ma-ink) !important; /* insurance vs any gradient-clip text base */
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    border: none !important;
    border-radius: 14px !important;
    font-weight: 700 !important;
    min-height: 44px;
  }
  html[data-mpage="gen"] .paywall-plans > *, html[data-mpage="study"] .paywall-plans > * {
    border-radius: 16px;
  }
  html[data-mpage="gen"] .pw-feats { gap: 8px; }

  /* Segmented buttons + toggles: app chip language. The .active restores below MUST outrank
     the base rules here or the JS state class visually disappears. */
  html[data-mpage="gen"] .seg-btn, html[data-mpage="study"] #lmSeg button {
    border-radius: 10px; background: var(--ma-panel); border: 1px solid var(--ma-hair);
    min-height: 40px;
  }
  html[data-mpage="gen"] .seg-btn.active,
  html[data-mpage="study"] #lmSeg button.active {
    background: rgba(245, 158, 11, 0.12); border-color: var(--ma-amber-line);
    color: var(--ma-amber-bright);
  }

  /* Drawers: app menu surface */
  html[data-mpage="gen"] .sidebar a, html[data-mpage="gen"] .sidebar button {
    min-height: 44px;
  }
  html[data-mpage="study"] #smenu { background: var(--ma-menu); border-right: 1px solid var(--ma-hair); }
  html[data-mpage="study"] #smenu button:not(.x), html[data-mpage="study"] #smenu a { min-height: 44px; }
  html[data-mpage="lesson"] #courseNav { background: var(--ma-menu); border-right: 1px solid var(--ma-hair); }
  html[data-mpage="lesson"] .cnav-item { padding: 12px 10px; }

  /* Promobar: compact single-line app banner */
  html[data-mpage="gen"] .promobar-inner, html[data-mpage="study"] .promobar-inner {
    padding: 8px 12px; gap: 8px;
  }
  html[data-mpage="gen"] .promobar-txt, html[data-mpage="study"] .promobar-txt { font-size: 12.5px; }

  /* Lesson loading overlay: the desktop Forging Ring stack IS the app's loading screen — the
     old flat bg override here wiped it; deleted. #loadBarFill deliberately NOT styled (the
     page's 2-ID rule owns its width:120px!important sweep). */
  html[data-mpage="lesson"] #loadTopic {
    font-family: Nunito, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 24px; font-weight: 800;
    letter-spacing: -0.7px; line-height: 31px; color: #F2F0EC; margin-bottom: 10px;
  }
  html[data-mpage="lesson"] #loadMsg { font-size: 13px; color: #888; margin-bottom: 20px; }
  html[data-mpage="lesson"] #loadBar { border-radius: 2px; }
  html[data-mpage="lesson"] #cancelBtn {
    border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); color: #888;
    font-size: 12px; font-weight: 600; padding: 7px 20px; min-height: 0;
  }
  /* (v33.1: stale `#showPreviewBtn { display:none }` REMOVED — it was written when we believed
     the app had no preview affordance; the app DOES (Cancel + "Coming up ↗" row), and this
     rule was silently eating the pill after every dismiss. Found by CDP getMatchedStyles.) */
  html[data-mpage="lesson"] #loadReassure { font-size: 12px; line-height: 17px; color: #888; }
  /* fact card: re-won against the page's 2-ID rule with a 2-ID+attr selector */
  html[data-mpage="lesson"] #loadOverlay #factInner {
    background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px; padding: 18px 22px 20px; max-width: 320px;
    box-shadow: 0 10px 14px rgba(0,0,0,0.5);
  }
  html[data-mpage="lesson"] #loadOverlay #factLabel { font-size: 9.5px; letter-spacing: 2.2px; color: rgba(245,158,11,0.68); }
  html[data-mpage="lesson"] #loadOverlay #factText { font-size: 12.5px; line-height: 20px; color: rgba(244,242,237,0.54); max-width: 288px; }

  /* Toast = single-line pill; slip wraps to multiple lines, so a soft card radius instead */
  html[data-mpage="lesson"] #llToast {
    background: #1A1A1A; border: 1px solid var(--ma-hair); border-radius: 999px;
    color: var(--ma-text);
  }
  html[data-mpage="lesson"] #pmSlip {
    background: #1A1A1A; border: 1px solid var(--ma-hair); border-radius: 16px;
    color: var(--ma-text);
  }

  /* Inputs across gen/study modals: app input anatomy */
  html[data-mpage="gen"] .lmodal input[type="text"], html[data-mpage="gen"] #lmodalTopicInput,
  html[data-mpage="study"] .lmodal input[type="text"], html[data-mpage="study"] #lmInput,
  html[data-mpage="study"] .nmodal input {
    border-radius: 12px; background: var(--ma-panel-2); border: 1px solid var(--ma-hair);
    color: var(--ma-text); min-height: 44px;
  }

  /* Profile: settings rows as touch targets, badges as pills */
  html[data-mpage="profile"] .support-row { min-height: 48px; border-radius: 12px; }
  html[data-mpage="profile"] .profile-provider { border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
  html[data-mpage="profile"] .section-header > * { font-size: 13px; font-weight: 700; }

  /* ══════════ STUDY APP-PARITY (recon-workflow gap list, 2026-07-21) ══════════ */
  html[data-mpage="study"] .content { padding: 18px 18px calc(120px + env(safe-area-inset-bottom, 0px)); }
  html[data-mpage="study"] .phead h1 { font-family: Nunito, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; color: #F2F0EC; margin-bottom: 6px; }
  html[data-mpage="study"] .phead p { font-size: 13.5px; line-height: 20px; color: #8b8b99; }
  html[data-mpage="study"] .hc-tabs { gap: 8px; margin-top: 18px; margin-bottom: 14px; }
  html[data-mpage="study"] .hc-tabs button { padding: 10px 15px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.07); background: linear-gradient(180deg,#1c1c24,#141419); color: #8b8b99; font-size: 13.5px; font-weight: 700; }
  html[data-mpage="study"] .hc-tabs button.on { background: linear-gradient(180deg,#24242e,#1b1b22); border-color: #6b6b7a; color: #F2F0EC; box-shadow: inset 0 1.2px 0 rgba(255,255,255,0.08); }
  html[data-mpage="study"] .hc-badge { min-width: 18px; height: 18px; border-radius: 9px; background: #F59E0B; padding: 0 5px; margin-left: 6px; font-size: 11px; font-weight: 800; color: #1a1206; }
  html[data-mpage="study"] .hc-search { height: 44px; border-radius: 12px; background: linear-gradient(180deg,#1e1e26,#141419); border: 1px solid rgba(255,255,255,0.07); padding: 0 13px; margin-bottom: 14px; box-shadow: inset 0 1.2px 0 rgba(255,255,255,0.08); }
  html[data-mpage="study"] .hc-search svg { width: 15px; color: #6b6b7a; }
  html[data-mpage="study"] .hc-search:focus-within { border-color: #F59E0B; }
  html[data-mpage="study"] .hc-search:focus-within svg { color: #F59E0B; }
  html[data-mpage="study"] #courseSearch { background: transparent; border: none; height: auto; margin-left: 9px; font-size: 14.5px; color: #F2F0EC; padding: 0; }
  html[data-mpage="study"] #courseSearch::placeholder { color: #6b6b7a; }
  /* iOS zooms focused form controls below 16px. Keep every Study text entry stable. */
  html[data-mweb][data-mpage="study"] input[type="text"],
  html[data-mweb][data-mpage="study"] input[type="search"],
  html[data-mweb][data-mpage="study"] input[type="email"],
  html[data-mweb][data-mpage="study"] input[type="password"],
  html[data-mweb][data-mpage="study"] input[type="url"],
  html[data-mweb][data-mpage="study"] input[type="tel"],
  html[data-mweb][data-mpage="study"] textarea,
  html[data-mweb][data-mpage="study"] select { font-size: 16px !important; }
  /* Keep Study form dialogs inside Safari's visible viewport while its keyboard is open. */
  html[data-mweb][data-mpage="study"] .overlay.show,
  html[data-mweb][data-mpage="study"] .support-backdrop.open {
    top: var(--ma-vtop, 0px); bottom: var(--ma-kb, 0px); height: auto;
  }
  html[data-mweb][data-mpage="study"] .support-backdrop.open {
    align-items: flex-start; overflow-y: auto;
    padding: 12px 16px;
  }
  html[data-mweb][data-mpage="study"] .support-modal {
    max-height: calc(100% - 2px); overflow-y: auto; margin-block: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  html[data-mpage="study"] #courses { grid-template-columns: 1fr 1fr; gap: 14px 4%; }
  html[data-mpage="study"] .course { min-height: 150px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.07); padding: 16px; background: radial-gradient(125% 95% at 100% 0%, rgba(245,158,11,0.12), transparent 62%), linear-gradient(135deg,#141419 0%,#0d0d12 55%,#08080c 100%) #0c0c11; box-shadow: 0 9px 16px rgba(0,0,0,0.5), inset 0 1.5px 0 rgba(255,255,255,0.045); }
  html[data-mpage="study"] .course.pinned { border-color: rgba(245,158,11,0.38); }
  html[data-mpage="study"] .course .pinmark { top: 13px; right: 36px; }
  html[data-mpage="study"] .course .kebab { top: 8px; right: 8px; padding: 6px; border-radius: 8px; color: #8b8b99; font-size: 18px; }
  html[data-mpage="study"] .course .fold { margin-bottom: 14px; }
  html[data-mpage="study"] .course h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html[data-mpage="study"] .course .code { color: #8b8b99; margin-top: 3px; }
  html[data-mpage="study"] .course .meta { font-size: 12px; color: #6b6b7a; gap: 12px; margin-top: 12px; }
  html[data-mpage="study"] .course .meta b { color: #8b8b99; font-weight: 800; }
  html[data-mpage="study"] .course.new { min-height: 150px; border: 1px dashed rgba(255,255,255,0.14); background: none; box-shadow: none; padding: 16px; justify-content: center; align-items: flex-start; }
  html[data-mpage="study"] .course.new .sub { font-size: 12px; color: #8b8b99; margin-top: 4px; }
  html[data-mpage="study"] .courses-empty { font-size: 13.5px; line-height: 20px; color: #8b8b99; margin-top: 12px; padding: 0; }
  html[data-mpage="study"] .course.trashed { box-shadow: 0 8px 14px rgba(0,0,0,0.4); grid-column: 1 / -1; }
  html[data-mpage="study"] .course.trashed h3 { color: #8b8b99; }
  html[data-mpage="study"] .trash-meta { font-size: 12px; color: #57576a; margin-top: 13px; }
  html[data-mpage="study"] .trash-actions { gap: 8px; margin-top: 14px; }
  html[data-mpage="study"] .tr-btn { padding: 10px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); background: #22222c; font-size: 12.5px; font-weight: 700; color: #F2F0EC; }
  html[data-mpage="study"] .tr-btn.danger { border-color: rgba(242,118,107,0.32); background: rgba(242,118,107,0.06); color: #f2766b; }
  html[data-mpage="study"] #back { background: none; border: none; width: auto; color: #8b8b99; }
  html[data-mpage="study"] #crumbRoot { font-size: 15px; color: #8b8b99; font-weight: 400; margin-left: 2px; }
  html[data-mpage="study"] #crumbSep, html[data-mpage="study"] #crumbHere { display: none; }
  html[data-mpage="study"] #cSub { font-size: 13px; line-height: 19px; color: #F2F0EC; margin-bottom: 8px; }
  html[data-mpage="study"] .drop { border-radius: 20px; border: 1.5px dashed rgba(245,158,11,0.4); padding: 40px 24px; background: radial-gradient(80% 95% at 50% 0%, rgba(245,158,11,0.11), transparent 72%) #0c0c11; }
  html[data-mpage="study"] .drop::before { animation: none; }
  html[data-mpage="study"] .drop .tile { width: 60px; height: 60px; border-radius: 17px; background: linear-gradient(180deg,#FFC766,#F59E0B); margin-bottom: 16px; box-shadow: 0 8px 16px rgba(245,158,11,0.34); }
  html[data-mpage="study"] .drop .big { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; color: #F2F0EC; }
  html[data-mpage="study"] .drop .sm { font-size: 13px; color: #8b8b99; margin-top: 6px; }
  html[data-mpage="study"] .drop .fmt { font-size: 11.5px; color: #6b6b7a; margin-top: 14px; }
  html[data-mpage="study"] .contents-title { font-family: Nunito, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 18px; font-weight: 800; color: #F2F0EC; }
  html[data-mpage="study"] .contents-sub { font-family: Nunito, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12.5px; color: #F2F0EC; margin-top: 3px; }
  html[data-mpage="study"] .pbar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.06); margin-top: 12px; }
  html[data-mpage="study"] #pfill { background: #F59E0B; border-radius: 3px; }
  html[data-mpage="study"] #ptext { font-size: 12px; color: #F2F0EC; margin-top: 6px; }
  html[data-mpage="study"] #ptext b { color: #F2F0EC; font-weight: 800; }
  html[data-mpage="study"] #srcLine { display: flex; gap: 8px; margin-top: 14px; flex-wrap: nowrap; }
  html[data-mpage="study"] .docchip { flex: 1; min-width: 0; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: linear-gradient(180deg,#2a2a35,#121217); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); padding: 11px 8px; justify-content: center; }
  html[data-mpage="study"] .docchip .fm, html[data-mpage="study"] .docchip .exp { display: none; }
  /* size the SVG too — the base sheet hard-sizes it 38px with big downward drop-shadows, so a
     17px box alone leaves the glyph spilling out low ("icon off and close to the bottom") */
  html[data-mpage="study"] .docchip .fi { width: 20px; height: 20px; }
  html[data-mpage="study"] .docchip .fi svg { width: 20px; height: 20px; filter: none; }
  /* App label is "View file", not the filename; CSS swap survives per-course re-renders. */
  html[data-mpage="study"] .docchip .fn { flex: none; font-size: 0; font-weight: 700; color: #fff; }
  html[data-mpage="study"] .docchip .fn::after { content: 'View file'; font-size: 13px; }
  html[data-mpage="study"] a#addMat { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid rgba(255,255,255,0.10); background: linear-gradient(180deg,#2a2a35,#121217); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); padding: 11px 8px; font-size: 13px; font-weight: 700; color: #fff; text-decoration: none; }
  html[data-mpage="study"] .part { background: none; padding: 0; border-radius: 0; margin-top: 18px; margin-bottom: 8px; }
  html[data-mpage="study"] .plabel { font-size: 12.5px; font-weight: 800; color: #FFB94A; letter-spacing: 0.3px; text-transform: uppercase; }
  html[data-mpage="study"] .pcount { display: none; }
  html[data-mpage="study"] .sec { border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(180deg,#141419,#0a0a0e); box-shadow: inset 0 1.2px 0 rgba(255,255,255,0.08); margin-bottom: 8px; padding: 0; overflow: hidden; }
  html[data-mpage="study"] .sec-row { padding: 13px; gap: 10px; align-items: center; }
  html[data-mpage="study"] .sec-row .num { font-family: Nunito, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; font-weight: 800; color: #6b6b7a; min-width: 34px; }
  html[data-mpage="study"] .sec-row .stitle { font-family: Nunito, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 14.5px; font-weight: 600; color: #F2F0EC; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
  html[data-mpage="study"] .sec-row .leader { display: none; }
  html[data-mpage="study"] .sprog { font-family: Nunito, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 12px; font-weight: 700; color: #8b8b99; }
  html[data-mpage="study"] .sdone { width: auto; height: auto; background: none; border-radius: 0; font-size: 12px; font-weight: 700; color: #8b8b99; }
  /* Chevron flips down/up like the app (base glyph is a right-pointing chevron); keeps the
     page's translateY optical nudge. */
  html[data-mpage="study"] .chev { color: #6b6b7a; font-size: 16px; transform: translateY(2px) rotate(90deg); }
  html[data-mpage="study"] .sec.open .chev { transform: translateY(2px) rotate(-90deg); color: #6b6b7a; }
  html[data-mpage="study"] .sec-inner { padding: 0 13px 12px; }
  html[data-mpage="study"] .sdesc { font-size: 12.5px; font-style: italic; color: #8b8b99; line-height: 18px; margin-bottom: 10px; }
  html[data-mpage="study"] .lesson { padding: 7px 0; gap: 10px; flex-wrap: nowrap; align-items: center; border-top: none; }
  html[data-mpage="study"] .ltick { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,0.08); }
  html[data-mpage="study"] .ltick.done { background: #57d07a; border-color: #57d07a; }
  html[data-mpage="study"] .lt { font-size: 13.5px; color: #F2F0EC; flex: 1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  html[data-mpage="study"] .lesson.done .lt, html[data-mpage="study"] .lt.done { color: #6b6b7a; text-decoration: line-through; }
  html[data-mpage="study"] .lacts { width: auto; }
  /* App rows have ONLY Study (generation lives inside the Study tools panel, which has its own
     Generate action wired to the same modal) — hide the row-level Generate on phones. */
  html[data-mpage="study"] .lgen { display: none; }
  html[data-mpage="study"] .lstudy, html[data-mpage="study"] .lgen { padding: 7px 11px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.10); background: linear-gradient(180deg,#2a2a35,#121217); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); font-size: 12.5px; font-weight: 800; color: #fff; min-height: 0; }
  html[data-mpage="study"] .nmodal { width: 88%; max-width: 440px; border-radius: 22px; border: 1px solid rgba(255,255,255,0.08); padding: 24px; background: radial-gradient(85% 42% at 50% 0%, rgba(245,158,11,0.14), transparent 80%), linear-gradient(180deg,#141419,#08080c) #0c0c11; box-shadow: 0 26px 44px rgba(0,0,0,0.6); }
  html[data-mpage="study"] .nmodal h3 { font-family: Nunito, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -0.2px; color: #F2F0EC; }
  html[data-mpage="study"] .nmodal p { font-size: 13px; line-height: 19px; color: #8b8b99; margin: 5px 0 18px; }
  html[data-mpage="study"] .nmodal input { background: rgba(255,255,255,0.04); border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); height: 48px; padding: 0 15px; font-size: 15px; color: #F2F0EC; }
  html[data-mpage="study"] .nmodal input:focus { border-color: #F59E0B; }
  html[data-mpage="study"] .nmodal input::placeholder { color: #6b6b7a; }
  html[data-mpage="study"] .nmodal .btn { border-radius: 100px; background: #F59E0B; padding: 13px 22px; font-size: 14px; font-weight: 800; color: #1a1206; box-shadow: 0 6px 14px rgba(245,158,11,0.4); }
  html[data-mpage="study"] .nmodal .btn.g { border-radius: 100px; border: 1px solid rgba(255,255,255,0.08); background: none; padding: 12px 18px; font-size: 14px; font-weight: 600; color: #8b8b99; box-shadow: none; }
  html[data-mpage="study"] .up-card { max-width: 400px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.12); padding: 34px 30px 30px; background: radial-gradient(60% 90px at 50% 0%, rgba(245,158,11,0.12), transparent 70%) #0A0A0E; box-shadow: 0 30px 48px rgba(0,0,0,0.66), inset 0 1px 0 rgba(255,255,255,0.05); }
  html[data-mpage="study"] .up-orb { width: 64px; height: 64px; border-radius: 19px; background: linear-gradient(135deg,#F59E0B,#FB923C); margin-bottom: 20px; box-shadow: 0 14px 20px rgba(245,158,11,0.34); }
  html[data-mpage="study"] .up-title { font-family: Nunito, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 20px; font-weight: 600; letter-spacing: 0.1px; color: #F2F0EC; }
  html[data-mpage="study"] .up-sub { font-size: 12.5px; color: #8b8b99; margin-top: 7px; min-height: 16px; }
  html[data-mpage="study"] .up-pct { font-family: Menlo, ui-monospace, monospace; font-size: 34px; font-weight: 700; letter-spacing: -0.7px; margin: 18px 0 12px; }
  html[data-mpage="study"] .up-bar { height: 7px; border-radius: 6px; background: #22222c; }
  html[data-mpage="study"] .up-bar > * { background: linear-gradient(90deg,#F59E0B,#FB923C); }
  html[data-mpage="study"] .up-err { font-size: 13px; line-height: 20px; color: #f0a9a9; }
  html[data-mpage="study"] .cmenu { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100%; min-width: 0; border-radius: 22px 22px 0 0; border: none; border-top: 1px solid rgba(255,255,255,0.10); background: linear-gradient(180deg,#1e1e28,#0b0b10) #0f0f14; box-shadow: inset 0 1.2px 0 rgba(255,255,255,0.08); padding: 10px 16px calc(34px + env(safe-area-inset-bottom, 0px)); }
  html[data-mpage="study"] .cmenu::before { content: ''; display: block; width: 40px; height: 4.5px; border-radius: 3px; background: rgba(255,255,255,0.18); margin: 0 auto 12px; }
  html[data-mpage="study"] .cmenu button { padding: 15px 6px; gap: 13px; font-size: 15.5px; font-weight: 600; color: #F2F0EC; border-bottom: 1px solid rgba(255,255,255,0.05); }
  html[data-mpage="study"] .cmenu .danger { color: #f2766b; }
  html[data-mpage="study"] .ask-panel { border-radius: 22px; border: 1px solid rgba(255,255,255,0.08); background: #0A0A0E; box-shadow: 0 20px 34px rgba(0,0,0,0.5); }
  html[data-mpage="study"] .ask-msgs .user { background: #F59E0B; color: #2a1b03; border-radius: 17px; border-bottom-right-radius: 6px; padding: 11px 15px; font-size: 14.5px; line-height: 22px; font-weight: 500; }
  html[data-mpage="study"] .ask-msgs .ai { background: #1c1c24; border: 1px solid rgba(255,255,255,0.08); border-radius: 17px; border-bottom-left-radius: 6px; font-size: 14.5px; line-height: 22px; color: #F2F0EC; }
  html[data-mpage="study"] .ask-send { width: 44px; height: 44px; border-radius: 13px; background: #F59E0B; }
  /* ══ DOC VIEWER = the app's full-screen document takeover (2026-07-21) ══
     Desktop centers a 40vw sheet with the mascot beside it; on phones that left the sheet-bar
     (and its ONLY close button) cut off above Safari's chrome and the mascot stacked out of
     sight below the fold. App anatomy instead: edge-to-edge sheet, pinned black header
     (filename + X), Ara fixed bottom-right with the amber "? Ask me" pill, ask panel as a
     keyboard-aware near-full sheet. */
  html[data-mpage="study"] .sheet-wrap.open {
    display: block; padding: 0;
    background: #0c0c0f !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  html[data-mpage="study"] .doc-stage { display: block; width: 100%; height: 100%; max-width: none; max-height: none; padding: 0; }
  html[data-mpage="study"] .sheet { width: 100% !important; max-width: none !important; height: 100% !important; border-radius: 0; box-shadow: none; animation: none; }
  html[data-mpage="study"] .sheet-bar { background: #000; border-bottom: none; padding: 13px 16px; }
  html[data-mpage="study"] .sheet-bar .fi, html[data-mpage="study"] .sheet-bar .fmeta { display: none; }
  html[data-mpage="study"] .sheet-bar .fn { font-size: 17px; font-weight: 800; letter-spacing: 0.1px; color: #fff; }
  html[data-mpage="study"] .sheet-bar .x { width: 42px; height: 42px; color: #fff; margin-right: -6px; }
  html[data-mpage="study"] .paper { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  html[data-mpage="study"] .paper.pdf { background: #0c0c0f; padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px)); }
  /* Ara over the document, app geometry: blob + pill pinned bottom-right. Small fixed element
     (<80% wide) — invisible to the tint scanner, and the whole wrap is display-gated closed. */
  html[data-mpage="study"] .ask-mascot {
    position: fixed !important; left: auto !important; right: 14px !important;
    top: auto !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    transform: none !important; z-index: 340; gap: 4px;
  }
  html[data-mpage="study"] .ask-owl svg { width: 66px; height: 66px; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.4)); }
  /* app pill copy is "? Ask me" — swap the desktop bubble text without touching markup */
  html[data-mpage="study"] .ask-bubble { font-size: 0; padding: 8px 14px; border: 1px solid rgba(214,116,10,0.55); box-shadow: 0 5px 14px rgba(245,158,11,0.45); }
  /* ⚠ plain space only: '\2002Ask' parses as the single codepoint U+2002A (a CJK ideograph —
     shipped as "?其sk me") because CSS hex escapes eat up to 6 hex digits. */
  html[data-mpage="study"] .ask-bubble::after { content: '? Ask me'; font-size: 12.5px; font-weight: 800; letter-spacing: 0.2px; }
  /* Ask panel: near-full bottom sheet over the doc (base ≤720px CSS hides .sheet while asking
     — keep it visible behind, like the app). bottom rides --ma-kb (visualViewport keyboard
     height from mobile-app.js) so the input never sinks under the iOS keyboard. */
  html[data-mpage="study"] .doc-stage.asking .sheet { display: flex !important; }
  html[data-mpage="study"] .doc-stage:not(.asking) .ask-panel { display: none; }
  html[data-mpage="study"] .doc-stage.asking .ask-panel {
    position: fixed; left: 0; right: 0; top: calc(var(--ma-vtop, 0px) + 10dvh); bottom: var(--ma-kb, 0px);
    width: auto !important; flex: none !important; height: auto; align-self: auto;
    border-radius: 22px 22px 0 0; opacity: 1; z-index: 350;
    border: none; border-top: 1px solid rgba(255,255,255,0.12);
    background: #0E0E13; box-shadow: 0 -24px 50px rgba(0,0,0,0.55);
  }
  html[data-mpage="study"] .doc-stage.asking .ask-panel .ask-form { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

  /* Per-lesson Study tools use a true phone takeover. When the learner chooses the input,
     the same visual-viewport variables keep the composer directly above the keyboard. */
  html[data-mweb][data-mpage="study"] #ltOverlay { padding: 0; place-items: stretch; }
  html[data-mweb][data-mpage="study"] #ltOverlay .ltool {
    position: fixed; left: 0; right: 0; top: var(--ma-vtop, 0px); bottom: var(--ma-kb, 0px);
    width: 100%; max-width: none; height: auto; max-height: none;
    border: 0; border-radius: 0; transform: none;
  }
  html[data-mweb][data-mpage="study"] #ltOverlay .ask-form {
    padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px));
  }

  /* ══════════ LESSON CHROME APP-PARITY (recon-workflow gap list, 2026-07-21) ══════════ */
  /* App bar never hides — pin it; iframe sits permanently below chrome (matches the app's
     WebView geometry, so generated canvas dimensions align with the mobile prompt targets). */
  html[data-mpage="lesson"] #topBar { transform: none !important; transition: none; height: 48px; background: #0c0c10; backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* Loading is a FULL takeover like the app (no ghost bar/Exit floating over the forging ring):
     the overlay ties topBar at z-200 and lost on DOM order — lift it above all lesson chrome. */
  html[data-mpage="lesson"] #loadOverlay {
    z-index: 500;
    /* v31: document-attached like the celebration — as a FIXED layer it floated over the
       parked shell, so the bars composited the flat #0c0c10 document while the overlay itself
       rendered its vignetted #0C0C11→#050507 surface: visible seams at BOTH chrome zones
       (Felix's circled loading screenshot). Attached, its own pixels (vignette and all) extend
       behind both bars — continuous by construction. 62/136 padding = the park geometry, so
       the flex-centered content centers in the lvh viewport exactly as before. */
    position: absolute; inset: 0 0 auto 0;
    height: calc(100lvh + 198px);
    padding: 62px 0 136px; box-sizing: border-box;
  }
  /* absolute children measured from the overlay's box top (doc y0 = 62px above the viewport) */
  html[data-mpage="lesson"] #loadOverlay #loadExit { top: calc(20px + 62px); }
  /* v32: "Coming up" = the app's PreviewModal EXACTLY (LessonScreen.js PreviewModal + styles
     previewOverlay/Sheet/…/planDesc). Centered sheet max 372w / 82% tall, radius 28, #0E0E13
     under linear #191920→#101015→#0E0E13 + amber top wash; rgba(4,4,7,.62) dim all around
     (100vmax shadow — tap-out close lives in mobile-app.js); 30px circle close at 16/16;
     Georgia 22 topic; amber tracking-2 section labels; Georgia numerals (JS pads to 01/02);
     16px/25 Georgia summary; 15/600 titles with 12.5 one-line descs expanding on tap. Idle =
     display:none (v16 tint law; base desktop rule hides it ≤900px anyway). The !importants on
     placement also neutralize the desktop drag handler's inline left/top. Phones only. */
  html[data-mpage="lesson"] #lessonPreview { display: none !important; }
  html[data-mpage="lesson"] #lessonPreview.lp-visible {
    display: flex !important; flex-direction: column;
    position: fixed !important; left: 18px !important; right: 18px !important;
    top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important;
    width: auto !important; max-width: 372px; margin: 0 auto; max-height: 82dvh;
    z-index: 520; overflow: hidden;
    border-radius: 28px; border: 1px solid rgba(255,255,255,0.12);
    background:
      radial-gradient(64% 44% at 50% 0%, rgba(245,166,35,0.10), rgba(245,166,35,0) 100%),
      linear-gradient(180deg, #191920 0%, #101015 62%, #0E0E13 100%);
    background-color: #0E0E13;
    box-shadow: 0 24px 40px rgba(0,0,0,0.6), 0 0 0 100vmax rgba(4,4,7,0.62);
  }
  html[data-mpage="lesson"] #lessonPreview.lp-visible #lpHeader { display: block; padding: 26px 58px 0 26px; border-bottom: none; background: transparent; cursor: default; }
  html[data-mpage="lesson"] #lessonPreview.lp-visible .lp-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #FFB94A; }
  html[data-mpage="lesson"] #lessonPreview.lp-visible #lpTopic { margin-top: 9px; font-family: Nunito, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 22px; font-weight: 600; color: #fff; letter-spacing: -0.3px; line-height: 27px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-mpage="lesson"] #lessonPreview.lp-visible #lpDiff { display: none; }  /* app header: topic + close only */
  html[data-mpage="lesson"] #lessonPreview.lp-visible #lpClose {
    position: absolute; top: 16px; right: 16px; z-index: 6; margin: 0;
    width: 30px; height: 30px; border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.55); font-size: 14px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }
  html[data-mpage="lesson"] #lessonPreview.lp-visible #lpSummary { margin: 18px 26px 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: none; }
  html[data-mpage="lesson"] #lessonPreview.lp-visible .lp-section-label { font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,185,74,0.92); }
  html[data-mpage="lesson"] #lessonPreview.lp-visible #lpSummaryText { margin-top: 12px; font-family: Nunito, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; line-height: 25px; color: rgba(255,255,255,0.74); }
  html[data-mpage="lesson"] #lessonPreview.lp-visible #lpLessonsLabel { margin: 18px 26px 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,0.08); font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,185,74,0.92); }
  html[data-mpage="lesson"] #lessonPreview.lp-visible #lpLessons { flex: 0 1 auto; margin: 0; padding: 10px 26px 22px; max-height: min(228px, 28dvh); overflow-y: auto; }
  html[data-mpage="lesson"] #lessonPreview.lp-visible .lp-row { gap: 16px; padding: 16px 0; margin: 0; border: none; border-top: 1px solid rgba(255,255,255,0.06); background: none; border-radius: 0; }
  html[data-mpage="lesson"] #lessonPreview.lp-visible .lp-row:first-child { border-top: none; }
  /* accent (quiz/review) rows carry inline-styled amber markers — [style] keeps them; plain
     rows get the app's bare Georgia numeral */
  html[data-mpage="lesson"] #lessonPreview.lp-visible .lp-num:not([style]) { width: 24px; min-width: 24px; height: auto; border: none; background: none; border-radius: 0; font-family: Nunito, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.36); padding-top: 1px; display: block; }
  html[data-mpage="lesson"] #lessonPreview.lp-visible .lp-title { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.93); letter-spacing: -0.2px; line-height: 19px; }
  html[data-mpage="lesson"] #lessonPreview.lp-visible .lp-desc { margin-top: 6px; font-size: 12.5px; line-height: 19px; color: rgba(255,255,255,0.47); }
  html[data-mpage="lesson"] #lessonPreview.lp-visible #lpFooter { padding: 12px 26px 18px; border-top: 1px solid rgba(255,255,255,0.06); font-size: 11px; color: rgba(255,255,255,0.34); }
  /* reopen pill = the app's Cancel twin (same geometry) with amber border + amber text */
  html[data-mpage="lesson"] #showPreviewBtn {
    border-radius: 8px !important; padding: 7px 20px !important;
    border: 1px solid #F5A623 !important; color: #F5A623 !important;
    font-size: 12px !important; font-weight: 600 !important; background: transparent !important;
  }
  /* Document-attached, NOT fixed (gen's bottom recipe): a solid FIXED element covering the
     bottom edge forces Safari's default lighter bar material; an ABSOLUTE one paints under the
     bar like page content and is invisible to the scanner. Parked doc (y=62) + 50px bar →
     doc-top 112; 100lvh height extends it to the physical screen bottom like the app WebView. */
  html[data-mpage="lesson"] #iframeWrap {
    position: absolute !important; top: 112px !important; left: 0 !important; right: 0 !important;
    bottom: auto !important; height: calc(100dvh - 50px) !important;
    /* dvh, not lvh: content (Send/verdict buttons at the iframe's padded bottom) must end ABOVE
       the expanded bar; the zone beneath shows the document-painted body color — seamless, and
       the wrap grows to fill whenever the bar minimizes. */
  }
  html[data-mpage="lesson"] #courseNav { display: none !important; }  /* app has no drawer — lessons live in the ··· sheet */
  html[data-mpage="lesson"] #tbBar { padding: 0 12px; gap: 10px; }
  html[data-mpage="lesson"] .hbtn { color: #888; width: 36px; height: 36px; }
  html[data-mpage="lesson"] #tbMoreBtn { color: #888; font-size: 18px; letter-spacing: 1px; font-weight: 700; background: none; border: none; }
  html[data-mpage="lesson"] #momentLabel { font-size: 12px; color: #888; }
  html[data-mpage="lesson"] #momentLabel b { font-size: 13px; font-weight: 700; color: #F2F0EC; }
  html[data-mpage="lesson"] #progressSegs { padding: 0 16px; }
  html[data-mpage="lesson"] #lessonFrame { background: #08090f; }
  html[data-mpage="lesson"] #pmBackdrop { background: radial-gradient(150% 72% at 50% 60%, rgba(245,166,35,0.06), transparent 58%), rgba(6,6,9,0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  html[data-mpage="lesson"] .pc-check { width: 46px; height: 46px; border: 1px solid rgba(245,166,35,0.42); background: radial-gradient(circle, rgba(245,166,35,0.18), rgba(245,166,35,0.03)); color: #FFB94A; box-shadow: 0 0 0 7px rgba(245,166,35,0.04), 0 10px 26px rgba(245,166,35,0.12); }
  html[data-mpage="lesson"] .pc-tag { font-size: 11px; letter-spacing: 0.26em; color: #FFB94A; }
  html[data-mpage="lesson"] .pc-title { font-family: Nunito, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 17px; font-weight: 600; color: #fff; }
  html[data-mpage="lesson"] .pc-body { font-size: 15px; line-height: 1.62; color: rgba(255,255,255,0.82); text-align: left; }
  html[data-mpage="lesson"] .pc-divider { width: 34px; height: 1px; background: rgba(255,255,255,0.13); }
  html[data-mpage="lesson"] .pc-close { font-size: 13px; color: rgba(255,255,255,0.36); }
  html[data-mpage="lesson"] .pc-close:active { color: rgba(255,255,255,0.6); }
  /* Top tint anchor (index-proven recipe, ported): the top bar zone derived black on the app
     pages during scroll-up/idle because nothing with a background sits at their top edge.
     Static div (first element in <body> — initial-render sampling), page color, hangs off the
     top edge; its 4px in-viewport sliver sits under Safari's own chrome. Unstyled inert block
     on desktop. */
  html[data-mpage] #maTintT {
    position: fixed; top: -8px; left: 0; width: 100%; height: 12px;
    z-index: 5; pointer-events: none; background-color: var(--ma-bg);
  }
  html[data-mpage="lesson"] #maTintT { background-color: var(--ma-bg-lesson); }
  html[data-mpage="profile"] #maTintT { background-color: var(--ma-bg-profile); }

  /* ··· menu = the app's bottom sheet. ⚠ Its closed state is opacity:0 (still rendered) — as a
     v12 fixed bottom-edge sheet that made it the transparent-fixed-element tint poison (black
     bottom bar) all over again. Display-gate it closed; .open restores it. */
  html[data-mpage="lesson"] #tbMoreMenu:not(.open) { display: none !important; }

  /* THE DRAWERS — the unified remaining poison. gen's .sidebar and study's .smenu are fixed
     elements spanning top:0..bottom:0 (study's is 81% wide), hidden only by translateX(-102%)
     — still in the render tree, touching BOTH edges → black top+bottom bars on those pages.
     Display-gate them closed exactly like every other overlay (slide transition lost on
     phones; function intact via .open). */
  html[data-mpage="gen"] .sidebar:not(.open) { display: none !important; }
  html[data-mpage="study"] .smenu:not(.open) { display: none !important; }

  /* Study topbar: sticky opaque at the top edge (the lesson/gen/index cure) — the scan target
     that keeps Safari's top bar page-colored mid-scroll. */
  html[data-mpage="study"] header.topbar { position: sticky; top: 0; z-index: 60; background: var(--ma-bg); border-bottom: none; }

  /* ══════════ THE UNIVERSAL OPEN-OVERLAY RULE (v16) ══════════
     A fixed overlay whose background is ONLY a gradient computes background-color:transparent —
     Safari's scanner reads exactly that and paints BLACK bars while it is open. Overlays with a
     solid color layer (study's smenu #222228, the ··· sheet, index's nav) all behave. So:
     every full-screen fixed overlay gets an explicit SOLID base color under its gradient, and
     dimming backdrops get a heavier page-hued dim so the dimmed page and the (black-tinted)
     chrome zones read as one surface — which is also how the RN app dims behind drawers. */
  /* The top chrome zone renders BLACK on iOS 26's top-bar layout no matter what the page
     provides — near-black pages blend, the warm celebration banded. Same trick its own bottom
     already uses (fades to #0b0a08, no band there): start near-black under the chrome, warm up
     as it descends; the amber crown moves down so it can't lighten the very top edge. */
  /* ⛔ NO dark-top fade (v27, edge-probe verdict): v19's #060608→warm ramp existed for the
     FIXED overlay era (chrome above rendered black no matter what). Document-attached overlay +
     warm html canvas below make the chrome zone warm — so the fade itself WAS the circled
     "top strip": near-black painted onto a warm page. Same law as the gen nav (v22): flat
     color at the edge, nothing else. */
  html[data-mpage="lesson"] #celebOverlay,
  html[data-mpage="lesson"] #cflowOverlay,
  html[data-mpage="gen"] #celebOverlay,
  html[data-mpage="gen"] #cflowOverlay {
    /* top row = EXACTLY the celebration canvas (#14110c); crown radial centered at 32% with a
       34% vertical radius and 60% stop → zero alpha before it can touch the top edge. Bottom
       half untouched (user-verified clean). */
    background:
      radial-gradient(80% 34% at 50% 32%, rgba(245,166,35,0.12), rgba(245,166,35,0) 60%),
      radial-gradient(58% 42% at 90% 96%, rgba(245,166,35,0.07), transparent 55%),
      linear-gradient(180deg, #14110c 0%, #1a1611 16%, #14110c 50%, #0b0a08 100%);
    background-color: #0b0a08;
  }
  /* The chrome zone above doc y0 renders the HTML canvas — warm it with the page (the probe
     showed htmlBg still cold rgb(10,10,14) while body warmed: that mismatch was the band's
     other half). Runway ::after warms too. */
  html[data-mpage="gen"]:has(#celebOverlay.active),
  html[data-mpage="gen"]:has(#cflowOverlay.active),
  html[data-mpage="lesson"]:has(#celebOverlay.active),
  html[data-mpage="lesson"]:has(#cflowOverlay.active) { background: #14110c !important; }
  html[data-mpage="gen"]:has(#celebOverlay.active)::after,
  html[data-mpage="gen"]:has(#cflowOverlay.active)::after { background: #14110c; }
  /* Structural celebration fix (same mechanism as #iframeWrap): the lesson document is PARKED
     at scrollY=62, so an absolute overlay is visually identical to fixed — but document-
     attached pixels paint under BOTH bars. Spans doc y0 (62px above the viewport, behind the
     top chrome) through 100lvh past the fold; padding-top re-aligns the content to the
     viewport. */
  html[data-mpage="lesson"] #celebOverlay.active,
  html[data-mpage="lesson"] #cflowOverlay.active {
    position: absolute; top: 0; left: 0; right: 0;
    /* FULL document span: 62px park margin + 100lvh body + 136px runway. The previous
       calc(100lvh + 62px) ended ~136px short (lvh = bar-MINIMIZED viewport, not the physical
       screen), so the cold lesson page showed through the toolbar zone — the "cut off at the
       safari dock". */
    height: calc(100lvh + 198px); padding-top: 62px; box-sizing: border-box;
  }
  html[data-mpage="lesson"] body:has(#celebOverlay.active),
  html[data-mpage="lesson"] body:has(#cflowOverlay.active) { background: #14110c !important; }
  /* ⛔ CELEBRATION FIRES ON generate.html TOO (HUD 2026-07-21: navBg=sticky rgb(10,10,14) with
     CELEB pos=fixed h=innerH — the lesson-scoped fix above never reached it). Gen has NO park:
     mobile-app.js pins scrollY to 0 while .active, so absolute-at-top == fixed visually while
     the pixels stay document-attached and paint under both bars. Height = 100lvh + the full
     chrome delta (screen.height - innerHeight measured 175px), so the warm surface reaches the
     physical screen bottom whatever the bar split is. */
  html[data-mpage="gen"] #celebOverlay.active,
  html[data-mpage="gen"] #cflowOverlay.active {
    position: absolute; top: 0; left: 0; right: 0;
    /* v28: park geometry, exactly like lesson. At y=0 there are ZERO document pixels above the
       viewport, and Safari composites page pixels behind its bars ONLY from document content +
       scroll state — no CSS color anywhere can warm the top chrome without them (v27 proved
       it). mobile-app.js parks celebration at scrollY=62; the overlay's first 62px (warm, flat)
       sit above the viewport behind the top chrome; padding-top re-aligns the content. */
    height: calc(100lvh + 237px); padding-top: 62px; box-sizing: border-box;
    z-index: 9500;
  }

  /* Completion-flow stages are absolute children, so unlike legacy #celebWrap they do not
     participate in the active overlay's 62px padding-top. Counter the Safari runway park on
     the stage itself: document y=62 becomes visual-viewport y=0, instead of clipping the first
     62px of Ara and leaving the same extra strip beneath the actions. Keep the stage at one
     dynamic viewport; the taller overlay remains only the painted runway behind Safari chrome. */
  html[data-mweb][data-mpage="lesson"] #cflowOverlay.active .cf-stage,
  html[data-mweb][data-mpage="gen"] #cflowOverlay.active .cf-stage {
    top: 62px; bottom: auto; height: 100dvh;
  }
  /* celebration.js's short-height shorthand wins after the recap-specific rule and collapses
     its top padding to 24px while retaining a desktop-sized 96px bottom gutter. Restore the
     recap composition on phones: Ara gets its intended breathing room and the claim row sits
     at the bottom like the native screen, above only the real safe area. */
  html[data-mweb] #cf_recap .cf-recap-wrap {
    padding-top: clamp(48px, 9vh, 120px);
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  html[data-mpage="gen"] body:has(#celebOverlay.active),
  html[data-mpage="gen"] body:has(#cflowOverlay.active) { background: #14110c !important; }
  /* Top-edge scan targets go warm with the surface: the fixed tint anchor and the (covered but
     still edge-hugging, sticky) nav would otherwise feed COLD to any bar-state re-derivation
     while the page is warm. */
  html[data-mpage="gen"]:has(#celebOverlay.active) #maTintT,
  html[data-mpage="gen"]:has(#cflowOverlay.active) #maTintT,
  html[data-mpage="lesson"]:has(#celebOverlay.active) #maTintT,
  html[data-mpage="lesson"]:has(#cflowOverlay.active) #maTintT { background-color: #14110c; }
  html[data-mpage="gen"]:has(#celebOverlay.active) nav,
  html[data-mpage="gen"]:has(#cflowOverlay.active) nav { background: #14110c; }
  html[data-mpage="gen"] .sidebar-backdrop,
  html[data-mpage="gen"] .cat-modal-backdrop,
  html[data-mpage="gen"] .support-backdrop,
  html[data-mpage="gen"] #streakModalBackdrop,
  html[data-mpage="gen"] #keyModalBackdrop,
  html[data-mpage="gen"] .prem-backdrop,
  html[data-mpage="study"] .smenu-backdrop,
  html[data-mpage="study"] .overlay.show,
  html[data-mpage="study"] .lmodal-backdrop,
  html[data-mpage="study"] .sheet-wrap,
  html[data-mpage="study"] .uploader,
  html[data-mpage="study"] .ph-backdrop.open,
  html[data-mpage="study"] .prem-backdrop,
  html[data-mpage="study"] .support-backdrop {
    background: rgba(5, 5, 8, 0.86) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  html[data-mpage="lesson"] #tbMoreMenu { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; max-width: none; min-width: 0; border-radius: 28px 28px 0 0; border: none; border-top: 1px solid rgba(255,255,255,0.12); background: radial-gradient(66% 171px at 50% 0%, rgba(245,166,35,0.13), rgba(245,166,35,0.04) 55%, transparent) #0E0D13; box-shadow: none; padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
  html[data-mpage="lesson"] #tbMoreMenu::before { content: ''; display: block; width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.16); margin: 0 auto 14px; }
  html[data-mpage="lesson"] .menu-sec { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; color: rgba(255,255,255,0.46); margin: 0 0 6px 2px; }
  html[data-mpage="lesson"] .menu-lrow { font-size: 14px; color: rgba(255,255,255,0.80); padding: 12px 8px; gap: 12px; border-radius: 12px; }
  html[data-mpage="lesson"] .menu-lrow.done { color: #888; }
  html[data-mpage="lesson"] .menu-lrow.cur { color: #fff; font-weight: 600; background: rgba(245,158,11,0.07); }
  html[data-mpage="lesson"] .menu-lrow .mk { width: 20px; text-align: center; font-size: 13px; color: rgba(255,255,255,0.28); }
  html[data-mpage="lesson"] .menu-lrow.done .mk { color: rgba(255,255,255,0.42); }
  html[data-mpage="lesson"] .menu-lrow.cur .mk { color: #FFB94A; }
  html[data-mpage="lesson"] .tbm-item { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.86); }

  /* Generate light mode: the phone hero is shared with the dark app treatment above, where the
     italic line is deliberately cream. On Snow that cream becomes effectively invisible. Keep
     the native editorial face, but use the accessible amber/neutral hierarchy from light web. */
  html[data-theme="light"][data-mweb][data-mpage="gen"] h1.z-head {
    color: #4B4B4B !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="gen"] h1.z-head :is(em, i) {
    color: #B45309 !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="gen"] :is(.z-ph, .z-hint, .z-chal, .z-chalsub) {
    color: #777777 !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="gen"] .z-chaltxt b {
    color: #4B4B4B !important; text-decoration-color: #AFAFAF !important;
  }

  /* ══ Study light mode: native Snow/Polar palette ══
     Study's app-parity rules above intentionally hard-code the dark mobile palette. This
     final, phone-only layer keeps that dark design intact while giving every visible Study
     surface the same light treatment as the native app. */
  html[data-theme="light"][data-mweb][data-mpage="study"] :is(
    .phead h1, #cSub, .contents-title, .contents-sub, #ptext, #ptext b,
    .course h3, .sec-row .stitle, .lt, .docchip .fn, .docchip .fn::after
  ) { color: #4B4B4B !important; }
  html[data-theme="light"][data-mweb][data-mpage="study"] :is(
    .phead p, .course .code, .course .meta, .course .meta b, .course.new .sub,
    .courses-empty, .course.trashed h3, .trash-meta, #back, #crumbRoot, .sprog,
    .sdone, .chev, .sec.open .chev, .lesson.done .lt, .lt.done
  ) { color: #777777 !important; }
  /* theme.css has a high-specificity grouped selector for these two descendants. */
  html[data-theme="light"][data-mweb][data-mpage="study"] #toc .sec-row .num,
  html[data-theme="light"][data-mweb][data-mpage="study"] #toc .sdesc { color: #777777 !important; }

  html[data-theme="light"][data-mweb][data-mpage="study"] .hc-tabs button {
    background: #F7F7F7 !important; border-color: #E5E5E5 !important;
    color: #777777 !important; box-shadow: none !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="study"] .hc-tabs button.on {
    background: #FFFFFF !important; border-color: #AFAFAF !important;
    color: #4B4B4B !important; box-shadow: none !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="study"] .hc-search {
    background: #F7F7F7 !important; border-color: #E5E5E5 !important;
    box-shadow: none !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="study"] .hc-search svg { color: #777777 !important; }
  html[data-theme="light"][data-mweb][data-mpage="study"] #courseSearch {
    background: transparent !important; border: 0 !important;
    color: #4B4B4B !important; box-shadow: none !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="study"] #courseSearch::placeholder { color: #777777 !important; }

  html[data-theme="light"][data-mweb][data-mpage="study"] .course {
    background: #FFFFFF !important; border-color: #E5E5E5 !important;
    box-shadow: 0 9px 16px rgba(75,75,75,.12) !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="study"] .course.new {
    background: transparent !important; border-color: #D7D7D7 !important;
    box-shadow: none !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="study"] .course .kebab { color: #777777 !important; }
  html[data-theme="light"][data-mweb][data-mpage="study"] .tr-btn {
    background: #F7F7F7 !important; border-color: #E5E5E5 !important;
    color: #4B4B4B !important; box-shadow: none !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="study"] .tr-btn.danger {
    background: rgba(217,67,67,.06) !important; border-color: rgba(217,67,67,.32) !important;
    color: #D94343 !important;
  }

  html[data-theme="light"][data-mweb][data-mpage="study"] .drop {
    background: #FFFFFF !important; border-color: rgba(180,83,9,.38) !important;
    box-shadow: none !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="study"] .drop .big { color: #4B4B4B !important; }
  html[data-theme="light"][data-mweb][data-mpage="study"] :is(.drop .sm, .drop .fmt) { color: #777777 !important; }
  html[data-theme="light"][data-mweb][data-mpage="study"] .pbar { background: #E5E5E5 !important; }
  html[data-theme="light"][data-mweb][data-mpage="study"] :is(.docchip, a#addMat, .lstudy) {
    background: #F7F7F7 !important; border-color: #E5E5E5 !important;
    color: #4B4B4B !important; box-shadow: none !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="study"] .part {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="study"] .plabel { color: #B45309 !important; }
  html[data-theme="light"][data-mweb][data-mpage="study"] .sec {
    background: #FFFFFF !important; border-color: #E5E5E5 !important; box-shadow: none !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="study"] .ltick { border-color: #D7D7D7 !important; }
  html[data-theme="light"][data-mweb][data-mpage="study"] .ltick.done {
    background: #16803A !important; border-color: #16803A !important;
  }

  html[data-theme="light"][data-mweb][data-mpage="study"] :is(
    .nmodal, .up-card, .cmenu, .ltool, .ask-panel, .doc-stage.asking .ask-panel
  ) {
    background: #FFFFFF !important; border-color: #E5E5E5 !important;
    color: #4B4B4B !important; box-shadow: 0 20px 44px rgba(75,75,75,.18) !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="study"] :is(.nmodal h3, .up-title, .cmenu button) { color: #4B4B4B !important; }
  html[data-theme="light"][data-mweb][data-mpage="study"] :is(.nmodal p, .up-sub) { color: #777777 !important; }
  html[data-theme="light"][data-mweb][data-mpage="study"] .nmodal .btn.g {
    background: #F7F7F7 !important; border-color: #E5E5E5 !important;
    color: #4B4B4B !important; box-shadow: none !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="study"] .up-bar { background: #E5E5E5 !important; }
  html[data-theme="light"][data-mweb][data-mpage="study"] .cmenu {
    border-top: 1px solid #E5E5E5 !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="study"] .cmenu::before { background: #D7D7D7 !important; }
  html[data-theme="light"][data-mweb][data-mpage="study"] .cmenu button { border-bottom-color: #E5E5E5 !important; }
  html[data-theme="light"][data-mweb][data-mpage="study"] .cmenu .danger { color: #D94343 !important; }
  html[data-theme="light"][data-mweb][data-mpage="study"] .ask-msgs .ai {
    background: #F7F7F7 !important; border-color: #E5E5E5 !important; color: #4B4B4B !important;
  }

  html[data-theme="light"][data-mweb][data-mpage="study"] .sheet-wrap.open { background: #FFFFFF !important; }
  html[data-theme="light"][data-mweb][data-mpage="study"] .sheet-bar {
    background: #FFFFFF !important; border-bottom: 1px solid #E5E5E5 !important;
  }
  html[data-theme="light"][data-mweb][data-mpage="study"] .sheet-bar :is(.fn, .x) { color: #4B4B4B !important; }
  html[data-theme="light"][data-mweb][data-mpage="study"] .paper.pdf { background: #F7F7F7 !important; }

  @media (prefers-reduced-motion: reduce) {
  }
}