/* ==========================================================================
   v231 · phone look "A" (the owner's pick from the mockups) — preview only: html.vc-ph
   (Settings › App › Phone layout, or ?phone=new; under 1024px, new look). 249-phone-a.js moves the
   level dropdown into the filter row and ‹ Show answer › into one row, adds the progress row, the Home
   bar's 🔥 / 💬 and the ✎ switch in More, and sets html[data-vc-tab]. Everything else is here.
   Without html.vc-ph none of this applies.
   ========================================================================== */
.pha-streak, .pha-chat, .pha-prog, .pha-pens, .pha-set-btn, .pha-set-ov{ display:none; }
@media (max-width:1023px){
  html.vc-ph body{ --pha-line:#E6E3DB; --pha-soft:#ECEAE4; --pha-btn:#16201D; --pha-btn-ink:#fff; --pha-tint:#E3F3EF; --pha-teal:#0F766E; --pha-mint:#34D399; --pha-mint-ink:#053B2C; }
  html.vc-ph body.dark-mode{ --pha-line:rgba(255,255,255,.12); --pha-soft:rgba(255,255,255,.08); --pha-btn:#DDF3EE; --pha-btn-ink:#0B2A26; --pha-tint:rgba(45,212,191,.13); --pha-teal:#14B8A6; }

  html.vc-ph .page{ padding-left:4px !important; padding-right:4px !important; }

  /* ---- top bar: only on Home, and compact; every other screen starts with its own title ---- */
  html.vc-ph[data-vc-tab]:not([data-vc-tab="starthere"]) .cover-title{ display:none !important; }
  html.vc-ph[data-vc-tab]:not([data-vc-tab="starthere"]) .page{ padding-top:calc(14px + env(safe-area-inset-top, 0px)) !important; }
  html.vc-ph .cover-title .vc-brand-mark{ width:36px; height:36px; }
  html.vc-ph .cover-title .vc-brand-text small{ display:none; }
  html.vc-ph .cover-title .header-actions{ gap:8px; align-items:center; }
  html.vc-ph .pha-streak:not([hidden]){ display:inline-flex; align-items:center; gap:4px; height:40px; padding:0 12px; border-radius:999px; background:#FFF1E6; color:#C2410C; font:800 15px var(--font); }
  html.vc-ph body.dark-mode .pha-streak{ background:rgba(251,146,60,.14); color:#FDBA74; }
  html.vc-ph .pha-chat:not([hidden]){ display:inline-flex; align-items:center; justify-content:center; position:relative; width:42px; height:42px; padding:0; border-radius:50%; border:1px solid var(--pha-line); background:var(--card, #fff); color:var(--ink); cursor:pointer; }
  html.vc-ph .pha-chat .pha-dot{ display:none; position:absolute; top:8px; right:8px; width:9px; height:9px; border-radius:50%; background:#EF4444; box-shadow:0 0 0 2px var(--card, #fff); }
  html.vc-ph .pha-chat.has .pha-dot{ display:block; }

  /* ---- the bar: Home · Flashcards · (Rooms) · Practice · More — My lessons lives in More unless you pinned it ---- */
  html.vc-ph.pha-nav5 #bottomNav .bn-btn[data-tab="lessons"]{ display:none; }
  html.vc-ph.pha-nav5 .more-item[data-tab="lessons"] .more-pin{ display:none; }
  html.vc-ph #bottomNav .bn-btn{ font-size:11px; }
  html.vc-ph #bottomNav .bn-btn .bn-icon svg{ width:23px; height:23px; }
  html.vc-ph #bottomNav .bn-btn.bn-fab .bn-icon{ width:auto; height:auto; background:none !important; color:#fff; }
  html.vc-ph #bottomNav .bn-fab-circle{ top:-24px; width:58px; height:58px; background:var(--pha-teal) !important; border:4px solid var(--card, #fff); box-shadow:0 8px 18px rgba(15,118,110,.32) !important; color:#fff; }
  html.vc-ph #bottomNav .bn-fab-circle svg{ width:25px; height:25px; display:block; }
  html.vc-ph #bottomNav .bn-btn.bn-fab #navFabLabel{ margin-top:39px; }
  html.vc-ph #bottomNav .bn-btn.bn-fab.active .bn-fab-circle{ box-shadow:0 0 0 3px var(--pha-tint), 0 8px 18px rgba(15,118,110,.32) !important; }

  /* ---- nothing floats over the content: 💬 is in the Home bar, ✎ pencils in More ---- */
  html.vc-ph body:not(.in-live-room):not(.in-solo-call) #chatLauncherBtn{ display:none !important; }
  html.vc-ph body:not(.in-live-room):not(.in-solo-call) #chatLauncherMenu{ top:calc(66px + env(safe-area-inset-top, 0px)); bottom:auto !important; right:12px; max-height:min(64vh, 520px); }
  html.vc-ph body #vcSuggestModeBtn{ display:none !important; }
  html.vc-ph body.vc-teacher .pha-pens, html.vc-ph body.vc-fixer .pha-pens{ display:flex; align-items:center; gap:12px; width:100%; margin:14px 0 2px; padding:12px 14px; border-radius:18px; border:1px solid var(--pha-line); background:var(--card, #fff); color:var(--ink); text-align:left; font:inherit; cursor:pointer; }
  html.vc-ph .pha-pens-ic{ flex:0 0 42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#FEF9C3; color:#713F12; font-size:18px; }
  html.vc-ph body.dark-mode .pha-pens-ic{ background:rgba(250,204,21,.14); color:#FDE68A; }
  html.vc-ph .pha-pens-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
  html.vc-ph .pha-pens-t b{ font-size:15px; font-weight:800; }
  html.vc-ph .pha-pens-t small{ font-size:12.5px; color:var(--muted); }
  html.vc-ph .pha-sw{ flex:0 0 46px; height:28px; border-radius:99px; background:var(--pha-soft); position:relative; transition:background .18s ease; }
  html.vc-ph .pha-sw::after{ content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .18s ease; }
  html.vc-ph .pha-sw.on{ background:var(--pha-teal); }
  html.vc-ph .pha-sw.on::after{ transform:translateX(18px); }

  /* ---- Flashcards: title + due pill · one dropdown row · progress · big card · tool tiles · ‹ Show answer › ---- */
  html.vc-ph #tab-learn{ position:relative; }
  html.vc-ph #tab-learn > #learnTitle{ font-size:30px; line-height:1.15; letter-spacing:-.025em; margin:4px 0 14px; }
  html.vc-ph #tab-learn > #learnDuePill{ position:absolute; top:0; right:0; width:auto !important; margin:0; min-height:40px; padding:6px 14px; border-radius:999px; font-size:14px; z-index:2; }
  /* one row: [A1 ▾] [All topics ▾] [All tones ▾] [✕] (a big topic's sub-topic gets its own line under it) */
  html.vc-ph #learnFilterBar{ flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px; }
  html.vc-ph #learnFilterBar > .vc-chipsel{ flex:0 0 auto; margin:0; gap:0; }
  html.vc-ph #learnFilterBar > .vc-chipsel .vc-chipsel-l{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  html.vc-ph #learnFilterBar > .vc-chipsel select{ min-height:44px; width:auto; min-width:64px; max-width:104px; field-sizing:content; padding:8px 30px 8px 14px; border:0; border-radius:14px; background:var(--pha-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 11px center; color:#fff; font-size:15px; font-weight:800; }
  html.vc-ph #learnFilterBar .lf-f{ flex:1 1 0; min-width:0; }
  html.vc-ph #learnFilterBar .lf-sub{ flex:1 1 100%; order:5; }
  html.vc-ph #learnFilterBar .lf-f > span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  html.vc-ph #learnFilterBar .lf-f select{ min-height:44px; padding:8px 28px 8px 12px; border-radius:14px; font-size:14.5px; background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%; }
  html.vc-ph #learnFilterBar > .lf-reset{ display:none !important; }   /* it's "✕ Clear" in the progress row, only while a filter is on */
  html.vc-ph #learnFilterBar .lf-reset, html.vc-ph #learnFilterBar .lf-del{ flex:0 0 44px; height:44px; min-height:44px; border-radius:14px; border:1px solid var(--pha-line); }
  /* ⚙ at the end of the row opens Session settings in a small sheet (the folded section under the card goes) */
  html.vc-ph #learnFilterBar .pha-set-btn{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; padding:0; border-radius:14px; border:1px solid var(--pha-line); background:var(--card, #fff); color:var(--ink); cursor:pointer; }
  html.vc-ph #tab-learn > #learnSettingsDetails:not(:has(#learnSettingsBody)){ display:none !important; }
  html.vc-ph .pha-set-ov.show{ display:flex; position:fixed; inset:0; z-index:9420; align-items:flex-end; justify-content:center; background:rgba(20,21,43,.45); }
  html.vc-ph .pha-set{ width:100%; max-width:560px; max-height:85vh; overflow:auto; box-sizing:border-box; padding:16px 18px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius:24px 24px 0 0; background:var(--card, #fff); color:var(--ink); box-shadow:0 -10px 30px rgba(6,40,34,.18); animation:vcSheetIn .18s ease-out; }
  html.vc-ph .pha-set-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
  html.vc-ph .pha-set-head b{ font-size:18px; font-weight:800; }
  html.vc-ph .pha-set-x{ flex:0 0 40px; width:40px; height:40px; border:0; border-radius:50%; background:var(--pha-soft); color:var(--ink); font-size:16px; cursor:pointer; }
  html.vc-ph .pha-set #learnSettingsBody #sessionSizeRow{ margin:10px 0 4px !important; gap:10px !important; flex-wrap:wrap; }
  html.vc-ph .pha-set #learnSettingsBody #sessionSizeRow label{ font-size:13.5px !important; font-weight:700; color:var(--ink) !important; }
  html.vc-ph .pha-set #learnSettingsBody :is(#sessionSizeSelect, #newBatchBtn){ min-height:44px; font-size:15px; }
  html.vc-ph .pha-set #learnSettingsBody .font-size-ctrl{ display:inline-flex; margin:12px 0 2px; }
  html.vc-ph .pha-set #learnSettingsBody .font-size-ctrl button{ min-width:52px; min-height:44px; font-size:16px; }
  /* progress: "1 / 20 ━━━━ 8,704 words" (copies of the real count and stamp, which hide here) */
  html.vc-ph .pha-prog{ display:flex; align-items:center; gap:10px; margin:0 2px 12px; font:700 13px var(--font); color:var(--muted); }
  html.vc-ph .pha-prog .pha-n{ font-size:14px; font-weight:800; color:var(--ink); white-space:nowrap; }
  html.vc-ph .pha-prog .pha-bar{ flex:1; height:6px; border-radius:99px; background:var(--pha-soft); overflow:hidden; }
  html.vc-ph .pha-prog .pha-bar i{ display:block; width:0; height:100%; border-radius:inherit; background:var(--pha-teal); transition:width .25s ease; }
  html.vc-ph .pha-prog .pha-w{ max-width:48%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  html.vc-ph .pha-prog .pha-clear{ display:none; flex:0 0 auto; min-height:32px; padding:4px 11px; border-radius:999px; border:1px solid var(--pha-line); background:var(--card, #fff); color:var(--ink); font:800 12.5px var(--font); white-space:nowrap; cursor:pointer; }
  html.vc-ph #tab-learn:has(#learnFilterBar select.lf-on) .pha-prog .pha-clear{ display:inline-flex; align-items:center; }
  html.vc-ph #tab-learn:has(#learnFilterBar select.lf-on) .pha-prog .pha-w{ max-width:40%; }
  html.vc-ph[data-vc-tab="learn"]:has(#phaProg) #wordStamp{ display:none !important; }
  html.vc-ph #tab-learn .fc-nav:not(:has(button)){ display:none !important; }
  /* the card: big, the topic on top, ✎ and ➕ in the corners */
  html.vc-ph #tab-learn .card-wrap{ margin:0 0 12px; }
  html.vc-ph #tab-learn #flashcard{ min-height:clamp(250px, 38vh, 380px); padding:62px 22px 30px; border-radius:28px; border:1px solid var(--pha-line) !important; box-shadow:0 10px 30px rgba(11,38,33,.07) !important; }
  html.vc-ph #tab-learn #flashcard #flashcardCat{ position:absolute; top:18px; left:50%; transform:translateX(-50%); margin:0; max-width:calc(100% - 128px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:5px 12px; font-size:12px; letter-spacing:.06em; }
  html.vc-ph #tab-learn #flashcard #flashcardCat:empty{ display:none; }
  html.vc-ph #tab-learn #flashcard .card-edit-btn{ top:14px; transform:none; width:42px; height:42px; border-radius:50%; }
  html.vc-ph #tab-learn #flashcard .card-edit-btn:is(:hover, :focus-visible){ transform:none !important; }
  html.vc-ph #tab-learn #flashcard #flashEditWord{ left:14px; }
  html.vc-ph #tab-learn #flashcard #flashAddDeck{ right:14px; border:1px solid var(--pha-line); }
  html.vc-ph #tab-learn #flashcard .vn{ font-size:calc(clamp(32px, 11vw, 46px) * var(--flash-scale, 1)); line-height:1.15; letter-spacing:-.02em; }
  html.vc-ph #tab-learn #flashcard .hint{ margin-top:18px; font-size:12.5px; letter-spacing:.18em; }
  /* (v232: the card's tool buttons — 🔊 Hear, ⋯ Tools and the rest behind it — keep their usual look; owner's choice) */
  html.vc-ph #tab-learn .tone-legend{ margin:8px 0 2px; font-size:12px; gap:6px 12px; }
  html.vc-ph #tab-learn .tone-legend .dot{ width:8px; height:8px; }
  /* ‹ Show answer › */
  html.vc-ph .pha-act{ display:flex; align-items:stretch; gap:10px; margin:12px 0 0; }
  html.vc-ph .pha-act > #prevCard, html.vc-ph .pha-act > #nextCard{ flex:0 0 54px; width:54px; height:54px; padding:0; border:0; border-radius:16px !important; background:var(--pha-soft) !important; color:var(--ink); font-size:20px; box-shadow:none; }
  html.vc-ph .pha-act > #showAnswerBtn{ flex:1; width:auto !important; min-height:54px; margin:0 !important; border:0; border-radius:16px; background:var(--pha-btn) !important; color:var(--pha-btn-ink) !important; font-size:17px; font-weight:800; box-shadow:0 6px 16px rgba(11,38,33,.16); }
  html.vc-ph .pha-act > #showAnswerBtn[style*="none"]{ display:none !important; }
  html.vc-ph body.fc-revealed .pha-act, html.vc-ph .pha-act:not(:has(#showAnswerBtn:not([style*="none"]))){ justify-content:space-between; }
  html.vc-ph body.fc-revealed:not(.focus-mode) .pha-act{ display:none; }   /* the four grades (and the swipe) take over, as in the mockup */
  /* after Show answer: the four grades as white tiles, coloured words */
  html.vc-ph #tab-learn #srsRow .srs-btn{ background:var(--card, #fff) !important; border:1px solid var(--pha-line) !important; border-radius:16px; box-shadow:none; font-weight:800; }
  html.vc-ph #tab-learn #srsRow #againBtn{ color:#BE123C !important; }
  html.vc-ph #tab-learn #srsRow #hardBtn{ color:#B45309 !important; }
  html.vc-ph #tab-learn #srsRow #goodBtn{ color:#15803D !important; }
  html.vc-ph #tab-learn #srsRow #easyBtn{ color:var(--pha-teal) !important; }
  html.vc-ph body.dark-mode #tab-learn #srsRow #againBtn{ color:#FDA4AF !important; }
  html.vc-ph body.dark-mode #tab-learn #srsRow #hardBtn{ color:#FCD34D !important; }
  html.vc-ph body.dark-mode #tab-learn #srsRow #goodBtn{ color:#86EFAC !important; }
  html.vc-ph body.fc-revealed:not(.focus-mode) #tab-learn #srsRow{ background:color-mix(in srgb, var(--card, #fff) 92%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--pha-line); }
  /* focus mode keeps its own one-screen layout (one filter row pinned at the top, a shorter card, icon-only tools) */
  html.vc-ph body.focus-mode #learnFilterBar{ flex-wrap:nowrap; }
  html.vc-ph body.focus-mode #learnFilterBar > .vc-chipsel{ display:none !important; }
  html.vc-ph body.focus-mode #learnFilterBar .lf-sub{ flex:1 1 0; order:0; }
  html.vc-ph body.focus-mode .pha-prog{ margin:2px 2px 6px; }
  html.vc-ph body.focus-mode #tab-learn #flashcard{ min-height:min(36vh, 320px); padding:50px 18px 18px; }
  @supports (height:1dvh){ html.vc-ph body.focus-mode #tab-learn #flashcard{ min-height:min(36dvh, 320px); } }
  html.vc-ph body.focus-mode .pha-act{ margin-top:10px; }
  html.vc-ph body.focus-mode .pha-act > :is(#prevCard, #nextCard){ height:50px; flex-basis:50px; width:50px; }
  html.vc-ph body.focus-mode .pha-act > #showAnswerBtn{ min-height:50px; }
}

@media (max-width:1023px){
  /* ---- Home: one teal hero with Today's lesson inside it, then a short "pick up where you left off" row ---- */
  html.vc-ph body #tab-starthere #homeBanner > header{ margin:0 !important; border-radius:28px !important; padding:22px 20px 22px !important; background:linear-gradient(180deg, #12806F 0%, #0D6B63 calc(100% - 72px)) #0D6B63 !important; box-shadow:0 16px 22px -16px rgba(6,40,34,.45); }
  html.vc-ph body #tab-starthere #homeBanner:has(> #homeTodayCard.vc-td-pull) > header{ border-radius:28px 28px 0 0 !important; padding-bottom:44px !important; box-shadow:none; }
  html.vc-ph #homeBanner > #homeTodayCard.vc-td-pull{ margin:-26px 16px 34px !important; border-radius:22px !important; border:0 !important; box-shadow:0 0 0 16px #0D6B63, 0 34px 24px -14px rgba(6,40,34,.4) !important; }
  html.vc-ph #homeBanner > section:not(#homeTodayCard), html.vc-ph #homeBanner > #homeTodayCard:not(.vc-td-pull){ margin-top:18px !important; }   /* (v190 pulled every card up 12px, so the path heading ran into the card above) */
  html.vc-ph #homeBanner #homeGreetName{ font-size:26px; line-height:1.15; }
  html.vc-ph #homeTodayCard #vcTodayStart:not(.alt){ background:var(--pha-mint) !important; color:var(--pha-mint-ink) !important; box-shadow:none !important; border:0 !important; }
  html.vc-ph #homeTodayCard #vcTodayStart:not(.alt):active{ background:#2BC48C !important; }
  /* "The alphabet · Open lesson ›": icon · title · progress · Open in one card */
  html.vc-ph #homeBanner > section:has(#homeContinueBtn){ display:grid; grid-template-columns:48px minmax(0, 1fr) auto; grid-template-areas:"ic t go" "ic p go" "tour tour tour"; column-gap:12px; row-gap:6px; align-items:center; padding:14px 14px 10px; border-radius:22px !important; }
  html.vc-ph #homeBanner > section:has(#homeContinueBtn) > div:first-child{ display:contents; }
  html.vc-ph #homeBanner > section:has(#homeContinueBtn) > div:first-child > .min-w-0{ grid-area:t; min-width:0; }
  html.vc-ph #homeBanner > section:has(#homeContinueBtn) > div:first-child > .min-w-0 > *{ margin-top:0; }
  html.vc-ph #homeBanner > section:has(#homeContinueBtn) > div:first-child > .min-w-0 > :is(h2, h3){ font-size:16.5px; line-height:1.25; }
  html.vc-ph #homeBanner > section:has(#homeContinueBtn) > div:first-child > .min-w-0 > p{ font-size:13px; line-height:1.35; }
  html.vc-ph #homeBanner > section:has(#homeContinueBtn) #homeContinueIcon{ grid-area:ic; width:48px; height:48px; border-radius:14px; }
  html.vc-ph #homeBanner > section:has(#homeContinueBtn) > div:nth-child(2){ grid-area:p; margin-top:2px !important; }
  html.vc-ph #homeBanner > section:has(#homeContinueBtn) #homeContinueBtn{ grid-area:go; width:auto; height:auto !important; min-height:42px; margin:0 !important; padding:8px 13px; border-radius:999px; font-size:13.5px; white-space:nowrap; }
  html.vc-ph #homeBanner > section:has(#homeContinueBtn) #homeTourBtn{ grid-area:tour; margin:2px 0 0 !important; min-height:36px; font-size:13px; }

  /* ---- Practice: Continue · Mixed · each group as a two-column grid of tiles ---- */
  html.vc-ph #drillsRoot .dh-feature{ padding:16px 16px; border-radius:24px; background:linear-gradient(135deg, #12806F, #0B5F58); box-shadow:0 14px 18px -12px rgba(6,40,34,.4); }
  html.vc-ph #drillsRoot .dh-feature .dh-go{ display:inline-flex; background:#fff; color:var(--pha-teal); }
  html.vc-ph #drillsRoot .dh-cont{ padding:12px 14px; border-radius:20px; border:1.5px solid var(--pha-teal); }
  html.vc-ph #drillsRoot .dh-cont .dh-go{ background:var(--pha-tint); color:var(--pha-teal); padding:8px 12px; border-radius:999px; }
  html.vc-ph #drillsRoot .dh-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; border:0; border-radius:0; overflow:visible; background:none; }
  html.vc-ph #drillsRoot .dh-row{ display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:6px; min-height:132px; padding:14px 14px 12px; border:1px solid var(--pha-line); border-radius:20px; background:var(--card, #fff); text-align:left; }
  html.vc-ph #drillsRoot .dh-row:active{ background:var(--pha-soft); }
  html.vc-ph #drillsRoot .dh-row .dh-ico{ width:46px; height:46px; border-radius:14px; font-size:23px; margin-bottom:4px; }
  html.vc-ph #drillsRoot .dh-row .dh-row-t b{ font-size:15.5px; line-height:1.2; }
  html.vc-ph #drillsRoot .dh-row .dh-row-t small{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:12.5px; }
  html.vc-ph #drillsRoot .dh-row :is(.dh-last, .dh-badge){ margin-top:auto; padding-top:2px; }
  html.vc-ph #drillsRoot .dh-row .dh-last::before{ content:'● '; font-size:8px; vertical-align:2px; }
  html.vc-ph #drillsRoot .dh-chev{ display:none; }
  html.vc-ph #drillsRoot .dh-label{ margin:20px 2px 10px; }

  /* ---- Rooms: the quick-match controls in one teal card, the three ways in as a plain segmented row ---- */
  html.vc-ph #prPillRow{ gap:6px; padding:5px; border-radius:18px; background:var(--pha-soft); }
  html.vc-ph #prPillRow .pr-pill{ min-height:46px; flex-direction:row; gap:6px; padding:8px 6px; border:0 !important; border-radius:14px !important; background:var(--card, #fff) !important; box-shadow:0 1px 2px rgba(6,40,34,.06) !important; color:var(--ink) !important; font-weight:800; }
  html.vc-ph #prQuickMatchPanel:not([style*="none"]){ padding:16px; border-radius:24px; background:linear-gradient(160deg, #12806F, #0B5F58); color:#fff; box-shadow:0 14px 18px -12px rgba(6,40,34,.4); }
  html.vc-ph #prQuickMatchPanel #practiceFindBtn{ background:var(--pha-mint) !important; color:var(--pha-mint-ink) !important; border:0 !important; box-shadow:none !important; }
  html.vc-ph #prQuickMatchPanel #prActCreate{ background:rgba(255,255,255,.14) !important; color:#fff !important; border:1px solid rgba(255,255,255,.28) !important; box-shadow:none !important; }
  html.vc-ph #prQuickMatchPanel .pr-act-code{ background:rgba(255,255,255,.12) !important; border:1px solid rgba(255,255,255,.24) !important; box-shadow:none !important; }
  html.vc-ph #prQuickMatchPanel .pr-act-code input{ background:transparent !important; color:#fff !important; }
  html.vc-ph #prQuickMatchPanel .pr-act-code input::placeholder{ color:rgba(255,255,255,.75); }
  html.vc-ph #prQuickMatchPanel .pr-act-code button{ background:#fff !important; color:var(--pha-teal) !important; }
  html.vc-ph #prQuickMatchPanel #prHero, html.vc-ph #prQuickMatchPanel #prHero *{ color:#fff !important; }
  html.vc-ph #prQuickMatchPanel #prHero a, html.vc-ph #prQuickMatchPanel #prHero button{ color:#A7F3D0 !important; }

  /* ---- More: every section at once, as an icon grid (Edit bar and pinning work as before) ---- */
  html.vc-ph #moreSheetPanel{ max-height:92vh; padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px)); }
  html.vc-ph #moreSheetTitle{ font-size:22px !important; letter-spacing:-.01em; }
  html.vc-ph #moreGrid .more-group{ background:none; box-shadow:none; border-radius:0; }
  html.vc-ph #moreGrid .more-group-header{ pointer-events:none; padding:14px 2px 8px; font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  html.vc-ph #moreGrid .more-group-header::before{ display:none; }
  html.vc-ph #moreGrid .more-group-header::-webkit-details-marker{ display:none; }
  html.vc-ph #moreGrid .more-group-count{ display:none; }
  html.vc-ph #moreGrid .more-group-tiles{ grid-template-columns:repeat(4, minmax(0, 1fr)); grid-auto-rows:auto; gap:12px 6px; padding:0 0 4px; }
  html.vc-ph #moreGrid .more-item{ flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; min-height:0; padding:0; background:none; box-shadow:none !important; text-align:center; font-size:12px; font-weight:700; }
  html.vc-ph #moreGrid .more-item .more-icon{ width:58px; height:58px; border-radius:18px; font-size:27px; }
  html.vc-ph #moreGrid .more-item .more-text{ align-items:center; width:100%; }
  html.vc-ph #moreGrid .more-item .more-label{ display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
  html.vc-ph #moreGrid .more-item .more-desc{ display:none; }
  html.vc-ph #moreGrid .more-item .more-pin{ display:none; }
  html.vc-ph #moreGrid .more-item.pinned::after{ content:'✓'; position:absolute; top:-5px; left:calc(50% + 17px); width:20px; height:20px; border-radius:50%; background:var(--pha-teal); color:#fff; font-size:11px; font-weight:900; line-height:20px; text-align:center; box-shadow:0 0 0 2px var(--paper, #fff); }
  html.vc-ph.pha-nav5 #moreGrid .more-item.pinned[data-tab="lessons"]::after{ display:none; }
  html.vc-ph #moreGrid .more-item{ border:0 !important; outline:0; }
  html.vc-ph #moreGrid .more-item:focus-visible .more-icon{ outline:2px solid var(--pha-teal); outline-offset:2px; }
  html.vc-ph #moreGrid .more-item.active .more-label{ color:var(--g-ink, var(--pha-teal)); }
  html.vc-ph #moreGrid .more-item:hover{ background:none; }
  html.vc-ph #moreGrid.editing .more-item{ box-shadow:none !important; }
  html.vc-ph #moreGrid.editing .more-item .more-icon{ box-shadow:inset 0 0 0 1.5px var(--line); }
  html.vc-ph #moreGrid.editing .more-item.pinned .more-icon{ box-shadow:inset 0 0 0 2px var(--g-solid); }
}