:root{
  --navy:#071321;
  --navy2:#0d2238;
  --blue:#1769e0;
  --green:#0b9a46;
  --green2:#087b38;
  --gold:#e9aa18;
  --red:#e33b2e;
  --ink:#111827;
  --muted:#687386;
  --line:#dbe2ea;
  --bg:#f3f6fa;
  --card:#ffffff;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}
button,select{font:inherit}
button{cursor:pointer}
.topbar{
  background:linear-gradient(90deg,var(--navy),var(--navy2));
  color:#fff;display:flex;align-items:center;gap:24px;padding:14px 22px;position:sticky;top:0;z-index:20;
  box-shadow:0 4px 16px rgba(0,0,0,.16)
}
/* .topbar is sticky and sits on top of whatever scrolls under it — without
   this, scrollIntoView({block:"start"}) would tuck a target's heading
   partly underneath it. 76px is a measured estimate of the mobile topbar's
   rendered height (48px logo + ~2x14px vertical padding); verify against
   the real bounding box and adjust if it drifts. */
#examCard, #summaryTitle, #mistakeBox { scroll-margin-top: 76px; }
.brand{display:flex;align-items:center;gap:12px;min-width:245px}
/* flex-shrink:0 — without it, a long sibling (e.g. #topUnlockBtn's
   translated "All 8 Unlocked" text in Spanish/Arabic/Turkish) shrinks
   .topbar's flex row proportionally, squeezing this 48x48 box down toward
   nothing at narrow widths instead of letting only the text-bearing
   sibling compact. Measured directly: at 320px/Arabic this collapsed to
   17.8px wide before this fix. */
.logo{
  width:48px;height:48px;border:2px solid #9fb0c8;border-radius:14px;display:grid;place-items:center;
  font-weight:900;font-size:18px;background:linear-gradient(145deg,#122d4c,#08111e);color:#f0b429;
  flex-shrink:0
}
.brand strong{display:block;font-size:24px;letter-spacing:.8px}
.brand small{display:block;color:#c7d0dc;letter-spacing:1.1px;font-size:11px}
.filters{display:flex;gap:16px;flex:1;align-items:center}
.filter{display:flex;align-items:center;gap:6px;color:#dae2ec}
.filter select{background:transparent;color:#fff;border:0;outline:none}
.filter option{color:#111}
/* Hidden at desktop widths (.filters already covers language there) —
   shown only in the @media(max-width:1260px) block below, exactly where
   .filters disappears, so the two are always complementary, never both
   visible or both absent. flex-shrink:0 keeps it from being squeezed by
   #topUnlockBtn's text the same way .logo could be (see that fix above). */
/* width is explicit and fixed, not auto — an unconstrained native <select>
   sizes its closed box to its content in some engines (observed: real
   mobile browsers grew/shrank this box per selected option, unlike this
   codebase's desktop-Chromium test harness, where it happened to stay
   constant), and feeding it a longer label (ES/PT/FR/FIL, or either
   Chinese variant) could grow the box enough to overflow .topbar at the
   narrowest widths. A fixed width removes that whole class of bug
   regardless of which engine renders it, rather than chasing one
   browser's specific sizing behavior. text-overflow/ellipsis is a
   defensive-only fallback — every real compact label
   (compactLanguageLabel() in js/app.js) is verified to fit without
   triggering it. */
.lang-select-compact-mobile{
  display:none;flex-shrink:0;width:72px;background:rgba(255,255,255,.08);color:#fff;
  border:1px solid rgba(255,255,255,.35);border-radius:9px;padding:6px 6px;
  font-size:12px;font-weight:700;outline:none;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.lang-select-compact-mobile option{color:#111}
/* Moved toward the same translucent-pill idiom the logged-out homepage's
   .auth-link buttons already use (border:1px solid rgba(255,255,255,.35);
   background:rgba(255,255,255,.08)) — previously a fully solid, opaque
   gold fill at every width, which is what made the authenticated header
   feel like a separately-designed interface. Kept a gold accent (border +
   text color) so it still reads as an action, not a plain nav link. Size/
   padding/breakpoints are untouched — only color/border change here. */
.topbuy{
  border:1.5px solid var(--gold);
  border-radius:10px;
  background:rgba(233,170,24,.16);
  color:#ffd875;
  padding:12px 16px;
  font-weight:800;
}
.topbuy:hover{background:rgba(233,170,24,.24)}
.topbuy:disabled{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.35);
  color:#fff;
  cursor:default;
  opacity:.9;
}
/* Reuses the Unlock slot as a cart affordance when selectedExamNames is
   non-empty — blue, distinct from .in-cart's green and the default gold
   .topbuy, so it reads as "your selection" rather than "owned"/"buy this". */
.topbuy.cart-mode{border-color:var(--blue);background:rgba(23,105,224,.16);color:#bcd4ff}
.topbuy.cart-mode:hover{background:rgba(23,105,224,.24)}
/* .topbuy's mobile margin-left:auto rule (below) was written for
   .topbar's flex layout to push it toward Home/avatar — the entry
   screen's #authLoggedInLinks is a different flex context where that
   would just shove the cart button and everything after it flush right
   for no reason. */
#authLoggedInLinks .topbuy{margin-left:0}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#123c74;font-weight:800;font-size:14px;border:0;color:#fff;cursor:pointer}
.avatar:focus-visible{outline:3px solid #7aa9ef;outline-offset:2px}
.account-menu-wrap{position:relative}
.account-menu{
  display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  background:#fff;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.2);
  min-width:170px;overflow:hidden;flex-direction:column
}
.account-menu.show{display:flex}
.account-menu button{
  border:0;background:none;text-align:left;padding:12px 16px;font-weight:700;
  color:#122d4c;cursor:pointer;font-size:14px
}
.account-menu button:hover,.account-menu button:focus-visible{background:#edf4ff}

/* #globalExitBtn ("Log Out") is position:fixed, independent of .topbar's
   flex layout — reserve space for it so it doesn't visually crowd the
   in-flow Home/My Account buttons. Scoped to whenever the topbar is
   actually visible (i.e. not the entry screen), using the entry-mode
   class the JS already toggles at exactly the right moments. */
body:not(.entry-mode) .topbar{padding-right:160px}
.shell{max-width:1440px;margin:auto;padding:24px}
.hero{
 display:flex;justify-content:space-between;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);
 border-radius:18px;padding:24px;margin-bottom:22px
}
.hero h1{margin:0 0 8px;font-size:30px}
.hero p{margin:0;color:var(--muted);max-width:800px}
.badge{padding:9px 12px;border-radius:999px;background:#eaf2ff;color:#0e4fb0;font-weight:800;white-space:nowrap}
.grid{display:grid;grid-template-columns:280px 1fr 290px;gap:20px;align-items:start}
.panel,.exam-card,.progress-card{
 background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px rgba(34,54,84,.05)
}
.panel{padding:18px}
.panel h3{margin:0 0 14px}
.category-panel-details summary{margin:0 0 14px;font-size:18px;font-weight:800;cursor:pointer;list-style:none;color:#122d4c}
.category-panel-details summary::-webkit-details-marker{display:none}
.category-panel-details:not([open]) summary{margin-bottom:0}
.change-exam-caret{display:inline-block;transition:transform .15s ease}
.category-panel-details[open] .change-exam-caret{transform:rotate(180deg)}
.category-list{display:grid;gap:8px}
.cat{
 width:100%;border:1px solid var(--line);background:#fff;border-radius:11px;text-align:left;padding:12px 12px;
 display:flex;justify-content:space-between;align-items:center
}
.cat:hover,.cat.active{border-color:#7aa9ef;background:#edf4ff}
.cat .name{font-weight:750}
.cat .qty{font-size:12px;color:var(--muted)}
.price{font-weight:850;color:#0a5bc4}
.exam-card{padding:22px}
.exam-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.exam-head-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.change-exam-trigger{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 12px;font-weight:700;font-size:13px;cursor:pointer;color:#23405f;white-space:nowrap}
.change-exam-trigger:hover{border-color:#91b6eb;background:#f4f8fc}
/* Same breakpoint isNarrowGridLayout() uses for the category rail's own
   collapse behavior — above it the rail is already visible, so this
   header button is a redundant second way to open it. */
@media(min-width:1051px){ .change-exam-trigger{display:none} }
.exam-title{display:flex;gap:10px;align-items:center}
.exam-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#fff1ed;color:#c83b2b;font-size:22px}
.exam-title h2{margin:0;font-size:24px;overflow-wrap:break-word}
.question-label{margin-top:18px;font-weight:800}
.progress{height:9px;background:#e8edf3;border-radius:999px;margin:10px 0 24px;overflow:hidden}
.progress>div{height:100%;background:var(--green);width:20%;transition:.25s}
.question{font-size:23px;font-weight:800;line-height:1.28;margin:0 0 18px}
.answers{display:grid;gap:10px}
.answer{
 width:100%;border:1.5px solid #ced7e2;background:#fff;border-radius:12px;padding:14px 16px;text-align:left;
 display:flex;gap:12px;align-items:center
}
.answer:hover{border-color:#7a9ccc}
.answer.selected{border-color:#2d7bd8;background:#eff6ff}
.answer.correct{border-color:var(--green);background:#edf9f2}
.answer.wrong{border-color:var(--red);background:#fff1f0}
.letter{
 width:28px;height:28px;border-radius:50%;border:1px solid #b8c4d3;display:grid;place-items:center;font-weight:800;flex:0 0 auto
}
.feedback{display:none;border-radius:12px;padding:14px 16px;margin-top:16px;line-height:1.45}
.feedback.good{display:block;border:1px solid #81c99e;background:#edf9f2}
.feedback.bad{display:block;border:1px solid #f0a19c;background:#fff1f0}
.actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.btn{
 border:0;border-radius:10px;padding:12px 16px;font-weight:800
}
.btn-primary{background:var(--blue);color:#fff}
.btn-outline{background:#fff;color:#0e58ba;border:1.5px solid #0e58ba}
.btn-green{background:var(--green);color:#fff}
.btn-gold{background:var(--gold);color:#111}
.btn:disabled{opacity:.5;cursor:not-allowed}
.side{display:grid;gap:16px}
.progress-card{padding:18px}
.progress-card h3{margin:0 0 14px}
.ring{
 width:120px;height:120px;border-radius:50%;margin:8px auto 16px;
 background:conic-gradient(var(--green) 0deg, #e4e9ef 0deg);display:grid;place-items:center;position:relative
}
.ring:before{content:"";width:86px;height:86px;border-radius:50%;background:#fff;position:absolute}
.ring-inner{position:relative;text-align:center}
.ring-inner strong{font-size:26px;display:block}
.stats{display:grid;gap:8px}
.stat{display:flex;justify-content:space-between;border-top:1px solid #eef1f4;padding-top:8px}
.why{display:grid;gap:10px;font-size:14px}
.why div::before{content:"✓";color:var(--green);font-weight:900;margin-right:8px}
.footer-strip{
 margin-top:22px;background:var(--navy);color:#dce5f2;border-radius:14px;padding:16px 20px;
 display:grid;grid-template-columns:repeat(6,1fr);gap:16px
}
.footer-strip strong{color:#fff;display:block}
.student-legal-footer{
 margin-top:12px;padding:12px 4px;text-align:center;color:var(--muted);font-size:12.5px;
 display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 16px
}
.student-legal-footer a{color:var(--muted);text-decoration:underline}
.student-legal-footer a:hover{color:#0e58ba}
.overlay{
 display:none;position:fixed;inset:0;background:rgba(4,13,24,.64);z-index:100;padding:24px;overflow:auto
}
.overlay.show{display:flex;align-items:center;justify-content:center}
.modal{
 width:min(920px,96vw);background:#fff;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.35);padding:28px;position:relative
}
.close{position:absolute;right:18px;top:14px;border:0;background:transparent;font-size:30px}

/* Desktop/tablet: a flex-centered modal taller than the viewport gets
   clipped at the top with no reachable scroll (align-items:center on the
   outer flex container plus overflow on it, not the modal, doesn't
   produce a usable scroll region once content exceeds the viewport).
   Scoped above the existing mobile breakpoint below so it never
   interacts with that already-correct full-height-sheet treatment. */
@media(min-width:651px){
  .modal{max-height:calc(100vh - 48px);overflow-y:auto}
  .admin-login-box{max-height:calc(100vh - 48px);overflow-y:auto}
}

/* Mobile checkout: the desktop .overlay/.modal pair (flex-centered,
   overflow on the outer container) clips whatever overflows above the
   centering point once .modal is taller than a short mobile viewport —
   there's no reachable scroll for the clipped top. Fix mirrors the
   already-correct #myAccountOverlay pattern: switch to a full-height sheet
   that is itself the bounded, independently-scrollable container. */
@media(max-width:650px){
  .overlay{padding:0}
  /* Must match .overlay.show's specificity (two classes), not just
     .overlay alone, or the earlier unconditional .overlay.show rule
     (align-items:center) wins regardless of source order — a media query
     doesn't add specificity. */
  .overlay.show{align-items:stretch;justify-content:stretch}
  .overlay .modal{
    width:100%;max-width:none;border-radius:0;
    height:100vh;  /* fallback for browsers without dvh support */
    height:100dvh; /* tracks Android Chrome's real visible area as its
                       toolbar expands/collapses, instead of 100vh's fixed
                       "largest possible" viewport */
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:20px 14px calc(20px + env(safe-area-inset-bottom,0px));
  }
  .overlay .close{
    position:fixed;top:14px;right:14px;z-index:10;background:#fff;border-radius:50%;
    width:36px;height:36px;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.15);font-size:22px;
  }
}
.modal-icon{width:58px;height:58px;border:1px solid #b9c8dc;border-radius:50%;display:grid;place-items:center;margin:0 auto;font-size:26px;color:#0d5bc2}
.modal h2{text-align:center;margin:12px 0 5px;font-size:34px}
.modal-sub{text-align:center;color:#344258;font-size:18px;margin-bottom:22px}
.offer-grid{display:grid;grid-template-columns:1fr 1.6fr;gap:18px}
.offer{border:1.5px solid #cdd6e2;border-radius:16px;padding:20px}
.offer.featured{border-color:#eaa817;background:linear-gradient(180deg,#fffaf0,#fffef8);position:relative}
.ribbon{
 position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:#e23a27;color:#fff;border-radius:8px;
 padding:8px 18px;font-weight:900;white-space:nowrap
}
.offer h3{text-align:center;font-size:25px;margin:8px 0 5px}
.offer p{text-align:center;color:var(--muted)}
.bigprice{text-align:center;font-size:34px;font-weight:900;margin:12px 0}
.old{text-decoration:line-through;color:#6b7280;font-size:20px}
.discount{display:inline-block;border:1px solid #68b37d;color:#16763a;background:#eaf7ee;border-radius:6px;padding:3px 7px;font-size:14px;margin-left:6px}
.save{display:block;width:max-content;margin:4px auto 12px;border:1px solid #68b37d;color:#16763a;background:#eaf7ee;border-radius:6px;padding:4px 8px;font-weight:800}
.exam-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;padding:8px 0 12px}
.exam-list span::before{content:"✓";color:var(--green);font-weight:900;margin-right:6px}
.offer-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:18px;margin-top:16px}
.offer-actions button{min-height:58px;font-size:17px}
.secure{text-align:center;color:#7b8798;font-size:12px;margin-top:14px}
.checkout{display:none;text-align:center;padding:16px}
.checkout.show{display:block}
.success{font-size:58px}
.checkout h3{font-size:28px;margin:8px}
.purchase-summary{background:#f4f7fb;border-radius:12px;padding:14px;margin:18px auto;max-width:520px;text-align:left}
.demo-note{background:#fff7db;border:1px solid #efcf69;border-radius:10px;padding:10px 12px;margin-top:14px;font-size:13px}
.toast{
 position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(30px);opacity:0;
 background:#101c2b;color:white;padding:12px 18px;border-radius:999px;z-index:200;transition:.25s
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:1050px){
 .grid{grid-template-columns:minmax(0,1fr)}
 /* Grid items default to min-width:auto (content-based) regardless of
    their track's own minmax(0,...) — the track above fixed the column,
    this fixes the item actually respecting it instead of overflowing it. */
 .panel,.exam-card,.side{min-width:0}
 /* Same min-width:auto default applies one level deeper too: .exam-title
    is a flex item of .exam-head, so it also needs min-width:0 to let its
    (wrappable) title text actually shrink instead of forcing the row wider
    than the now-correctly-sized .exam-card around it. */
 .exam-title{min-width:0}
 /* ...and one level deeper still: .exam-title-text (the h2+meta wrapper)
    is itself a flex item of .exam-title, so without this the title text
    renders at its full unwrapped width and visually overlaps the
    Change-Exam/Buy-Exam buttons instead of wrapping beneath the icon. */
 .exam-title-text{min-width:0}
 .panel{order:1}.exam-card{order:2}.side{order:3;grid-template-columns:1fr 1fr}
 /* .practice-summary already defaulted to order:0 (sorting before
    Categories) with no rule saying so — made explicit since
    .practice-summary/.exam-card are mutually exclusive (never both
    visible), so this is genuinely the intended relative order for
    results/mistakes, not an accident of the cascade. */
 .practice-summary{order:0}
}
/* Wider than the layout-reflow breakpoint above on purpose: verified via
   real bounding-box measurement that the topbar's State/Language filters
   plus Unlock/Home/avatar cluster start colliding with the fixed Log Out
   button as low as ~1235px, well before .grid needs to reflow — this
   threshold is picked from that measurement, not guessed. */
@media(max-width:1260px){
 .filters{display:none}.brand{min-width:0;flex-shrink:0}
 .lang-select-compact-mobile{display:flex}
 /* Adding the compact mobile language control (above) back to a row that
    was already tight at this breakpoint's narrowest widths — a smaller
    gap buys back some of the room it needs without touching any
    control's own size. .brand got flex-shrink:0 alongside its existing
    min-width:0 for the same reason .logo did: without it, .brand's own
    button box (not just its now-protected .logo child) could still
    collapse toward 0 width when the row ran out of room, leaving a
    visually-full-size logo sitting inside a near-zero-width, barely-
    tappable button — a real hit-target bug, measured directly at 320px
    before this fix. */
 .topbar{gap:10px}
}
@media(max-width:720px){
 .shell{padding:14px}.topbar{padding:10px 12px}
 /* .exam-head-actions' fixed ~108px column was taking roughly half the
    available width at this tier, leaving the title too little room to
    wrap comfortably (confirmed by measurement: even "General Knowledge"
    in English was breaking across 4 lines mid-word at 320px). Stack
    instead of sharing the row — title gets the full card width, actions
    move below as a row of two buttons rather than a cramped column. */
 .exam-head{flex-direction:column;align-items:stretch}
 .exam-head-actions{flex-direction:row;align-items:stretch;justify-content:flex-start}
 /* Drop the duplicate brand text ("CDL" spelled out right beside the logo
    box, which already contains the same letters) — the logo alone reads
    fine at this width, matching "CDL logo · Unlock · Home · Avatar."
    Desktop (>720px) keeps the full lockup unchanged. */
 .brand strong{display:none}.brand small{display:none}
 /* #topHomeBtn is a plain duplicate of tapping the logo (same
    onclick="backToEntry()") — at this width every other control is
    already fighting for room (now including the new compact language
    selector), so the redundant control is the one that goes rather than
    shrinking everything else further. */
 #topHomeBtn{display:none}
 /* Shrink the Unlock button's visual weight — its padding/font-weight was
    never reduced at any breakpoint before, so it kept reading as
    oversized even once everything else around it shrank. */
 .topbuy{margin-left:auto;padding:8px 12px;font-size:13px;font-weight:700}
 body:not(.entry-mode) .topbar{padding-right:12px}
 .hero{align-items:flex-start;flex-direction:column}
 .side{grid-template-columns:1fr}
 .offer-grid,.offer-actions{grid-template-columns:1fr}
 .exam-list{grid-template-columns:1fr}
 .modal{padding:20px 14px}.modal h2{font-size:28px}
 .footer-strip{grid-template-columns:1fr 1fr;padding:12px 14px;gap:10px 14px;margin-top:16px;font-size:12.5px}
 .student-legal-footer{padding:8px 4px;margin-top:8px;font-size:11.5px;gap:4px 12px}
}
@media(max-width:400px){
 /* No breakpoint below 720px touched .topbuy/.avatar before — the smallest
    phones still showed the 720px-tier sizing. One further tier, touch
    targets kept >=34px. */
 .topbuy{padding:7px 10px;font-size:12px}
 .avatar{width:34px;height:34px;font-size:12px}
 .lang-select-compact-mobile{padding:5px 6px;font-size:11px}
}

.payment-wrap{display:flex;justify-content:center;text-align:left;margin-top:12px}
.order-box{background:#f4f7fb;border:1px solid #dce3eb;border-radius:14px;padding:18px;width:100%;max-width:480px}
.order-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #e1e6ed}
.order-row:last-child{border-bottom:0}
.order-total{font-size:22px;font-weight:900;color:#0b8a40}
.stripe-handoff-note{background:#eaf2ff;border:1px solid #bcd6f7;border-radius:10px;padding:10px 12px;margin-top:14px;font-size:12.5px;color:#0e4fb0}
.pay-btn{width:100%;margin-top:14px;min-height:54px;font-size:17px}
.back-link{border:0;background:transparent;color:#0d5bc2;font-weight:800;margin-top:10px}
.demo-warning{background:#fff7db;border:1px solid #efcf69;border-radius:10px;padding:10px 12px;margin-top:14px;font-size:13px}


.switcher-view{display:none}
.switcher-view.show{display:block}
.switcher-head{text-align:center;margin-bottom:18px}
.switcher-head h3{font-size:30px;margin:6px 0}
.switcher-head p{color:#667085;margin:0}
.exam-switch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
.exam-switch-card{
  border:1.5px solid #d5dde7;border-radius:14px;padding:15px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#fff
}
.exam-switch-card:hover{border-color:#7aa9ef;background:#f8fbff}
.exam-switch-info{display:flex;gap:10px;align-items:center}
.exam-switch-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#f3f6fa;font-size:20px}
.exam-switch-name{font-weight:850}
.exam-switch-meta{font-size:12px;color:#7a8698;margin-top:3px}
.exam-switch-price{font-size:18px;font-weight:900;color:#0d5bc2;white-space:nowrap}
.exam-switch-card button{padding:9px 12px}
.bundle-switch{
  margin-top:16px;border:2px solid #eaa817;background:linear-gradient(180deg,#fffaf0,#fffef8);
  border-radius:16px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:16px
}
.bundle-switch h4{margin:0 0 5px;font-size:21px}
.bundle-switch p{margin:0;color:#687386}
.bundle-price{text-align:right;white-space:nowrap}
.bundle-price .old{font-size:15px}
.bundle-price strong{display:block;font-size:28px;color:#d83225}
.switcher-actions{display:flex;justify-content:center;margin-top:16px}
@media(max-width:760px){
 .exam-switch-grid{grid-template-columns:1fr}
 .exam-switch-card{align-items:flex-start}
 .bundle-switch{flex-direction:column;align-items:flex-start}
 .bundle-price{text-align:left}
}


/* ===== V4 MULTI-SELECTION CART ===== */
.multi-buy{display:none}
.multi-buy.show{display:block}
.multi-head{text-align:center;margin-bottom:16px}
.multi-head h2{margin:10px 0 5px;font-size:32px}
.multi-head p{margin:0;color:#667085;font-size:16px}
.multi-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 12px}
.multi-toolbar .left{display:flex;gap:8px;flex-wrap:wrap}
.mini-btn{border:1px solid #cfd8e5;background:#fff;border-radius:9px;padding:9px 12px;font-weight:800;color:#23405f}
.mini-btn:hover{background:#f4f8fc}
.selected-count{font-weight:900;color:#0d5bc2}
.multi-layout{display:grid;grid-template-columns:1.45fr .75fr;gap:18px;align-items:start}
.multi-list{display:grid;gap:10px}
.multi-item{
  border:1.5px solid #d6dee8;border-radius:13px;background:#fff;padding:13px 14px;
  display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;transition:.18s
}
.multi-item:hover{border-color:#91b6eb;background:#fbfdff}
.multi-item.checked{border-color:#2f7fe2;background:#f1f7ff}
/* Owned rows have no checkbox/price (nothing to select or pay for) — plain
   flex layout instead of the 3-column checkbox/info/price grid. */
.multi-item.owned{display:flex;opacity:.75;cursor:default}
.multi-item.owned:hover{border-color:#d6dee8;background:#fff}
.multi-check{
  width:22px;height:22px;accent-color:#1769e0;cursor:pointer
}
.multi-info{display:flex;align-items:center;gap:10px}
.multi-icon{width:38px;height:38px;border-radius:10px;background:#f3f6fa;display:grid;place-items:center;font-size:20px}
.multi-name{font-weight:900}
.multi-meta{font-size:12px;color:#7c8797;margin-top:2px}
.multi-price{font-weight:900;color:#0d5bc2;font-size:17px}
.cart-side{position:sticky;top:88px}
.cart-card{border:1px solid #d8e0e9;border-radius:15px;padding:18px;background:#f8fafc}
.cart-card h3{margin:0 0 12px}
.cart-lines{display:grid;gap:8px;max-height:220px;overflow:auto;margin-bottom:12px}
.cart-line{display:flex;justify-content:space-between;gap:12px;font-size:13px;border-bottom:1px solid #e7ebf0;padding-bottom:7px}
.cart-empty{color:#7b8798;font-size:14px;padding:8px 0}
.cart-total-row{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-top:1px solid #dde3ea}
.cart-total-row strong{font-size:25px;color:#111827}
.bundle-nudge{
  display:none;margin-top:12px;border:1.5px solid #e7a719;background:linear-gradient(180deg,#fff8e7,#fffef9);
  border-radius:13px;padding:13px
}
.bundle-nudge.show{display:block}
.bundle-nudge .flag{display:inline-block;background:#e23a27;color:white;border-radius:6px;padding:4px 7px;font-size:11px;font-weight:900;margin-bottom:7px}
.bundle-nudge h4{margin:0 0 6px;font-size:16px}
.bundle-nudge p{margin:0 0 10px;color:#5f6b7a;font-size:13px;line-height:1.4}
.bundle-nudge .bundle-total{font-size:24px;font-weight:900;color:#d83225}
.multi-continue{width:100%;min-height:52px;font-size:16px;margin-top:12px}
.multi-continue:disabled{opacity:.45;cursor:not-allowed}
.multi-note{font-size:12px;color:#7b8798;text-align:center;margin-top:8px}
.checkout-list{margin:8px 0 12px;display:grid;gap:6px}
.checkout-list div{display:flex;justify-content:space-between;gap:10px;font-size:13px}
@media(max-width:860px){
  .multi-layout{grid-template-columns:1fr}
  .cart-side{position:static}
}


/* ===== V5 ENTRY + ADMIN ===== */
body.entry-mode{overflow:auto}
.entry-screen{
  min-height:100vh;background:
  radial-gradient(circle at 20% 15%,rgba(32,103,210,.18),transparent 26%),
  radial-gradient(circle at 80% 10%,rgba(234,170,24,.15),transparent 24%),
  linear-gradient(180deg,#071321,#0c2238 55%,#eef3f8 55%);
  padding:28px 18px 46px
}
.entry-wrap{max-width:1180px;margin:0 auto}
.entry-top{display:flex;justify-content:space-between;align-items:center;color:#fff;margin-bottom:30px;gap:16px}
.entry-brand{display:flex;gap:12px;align-items:center}
.entry-brand .logo{width:58px;height:58px}
.entry-brand h2{margin:0;font-size:27px;letter-spacing:.6px}
.entry-brand p{margin:3px 0 0;color:#c7d4e4;font-size:13px}
.admin-link{
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;
  border-radius:10px;padding:10px 14px;font-weight:850
}
.entry-hero{text-align:center;color:#fff;margin:20px auto 28px;max-width:850px}
.entry-hero h1{font-size:42px;margin:0 0 10px}
.entry-hero p{color:#ced8e4;font-size:18px;line-height:1.5;margin:0}
.entry-card{
  max-width:980px;margin:0 auto;background:#fff;border:1px solid #d8e1eb;border-radius:22px;
  box-shadow:0 24px 60px rgba(1,14,31,.25);padding:26px
}
.entry-card h3{margin:0 0 4px;font-size:26px}
.entry-card-spaced{margin-top:35px}
.entry-card .sub{color:#6b7787;margin-bottom:20px}
.dashboard-show-all{
  width:100%;margin-top:10px;border:1.5px dashed #b9c6d6;background:none;border-radius:10px;
  padding:10px;font-weight:750;color:#0d5bc2
}
.dashboard-show-all:hover{background:#f4f8fd}
@media(max-width:650px){
  .entry-card{padding:18px;border-radius:16px}
  #returningUserDashboard{margin-bottom:20px}
  #dashboardList.category-list{gap:6px}
  #dashboardList .cat{padding:9px 10px}
  #dashboardList .cat .name{font-size:14px}
  #dashboardList .cat .qty{font-size:11px}
}
.entry-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.entry-step{border:1.5px solid #dbe2eb;border-radius:14px;padding:16px;background:#fbfcfe}
.entry-step label{display:block;font-weight:900;margin-bottom:9px}
.entry-step select{
  width:100%;border:1.5px solid #ccd7e3;border-radius:10px;padding:12px;background:#fff;color:#111827;outline:none
}
.entry-step select:focus{border-color:#2d7bd8;box-shadow:0 0 0 3px rgba(45,123,216,.12)}
/* Same border/radius/focus treatment as .entry-step select (the anonymous
   onboarding language selector) so the authenticated Home selector feels
   like the same product, just compact enough to sit next to the dashboard
   heading rather than inside its own full-size card. */
.lang-select-compact{
  border:1.5px solid #ccd7e3;border-radius:10px;padding:4px 8px;background:#fff;color:#111827;outline:none;font-size:13px
}
/* Wrapper around the Home dashboard's globe label + #homeLanguageSelect —
   plain inline-flex at desktop widths (unchanged look), gets a subtle
   card treatment only at the mobile tier below, where it previously read
   as "dropped in" with no visual relationship to the card around it. */
.home-lang-control{display:flex;align-items:center;gap:6px;font-size:13px;color:#667;white-space:nowrap}
.home-lang-control label{margin:0}
@media(max-width:720px){
  .home-lang-control{
    background:#f7f9fc;border:1px solid #e3e8ef;border-radius:10px;padding:6px 10px;margin-bottom:10px
  }
}
.lang-select-compact:focus{border-color:#2d7bd8;box-shadow:0 0 0 3px rgba(45,123,216,.12)}
.exam-preview{
  margin-top:18px;border:1.5px solid #cfe0f5;background:#f5f9ff;border-radius:16px;padding:18px;
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center
}
.exam-preview-main{display:flex;gap:14px;align-items:center}
.exam-preview-icon{width:52px;height:52px;border-radius:14px;background:#fff;display:grid;place-items:center;font-size:27px;border:1px solid #d8e2ef}
.exam-preview h4{margin:0 0 4px;font-size:22px}
.exam-preview p{margin:0;color:#647183}
.exam-preview .count{font-weight:900;color:#0d5bc2}
.entry-cta{min-width:250px;min-height:54px;font-size:17px}
.entry-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.entry-benefit{background:#f7f9fc;border:1px solid #e3e8ef;border-radius:10px;padding:9px 12px;font-size:13px;font-weight:700;color:#33404f;text-align:center}
.entry-benefit b{display:block;margin-bottom:4px}
.entry-footer{max-width:980px;margin:22px auto 0;padding:20px 26px;color:#576273;text-align:center}
.entry-footer strong{color:var(--ink);font-size:16px}
.entry-footer p{margin:8px 0;font-size:14px}
.entry-footer-legal{color:#576273}
.entry-footer-links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.entry-footer-links a{color:#0d5bc2;font-size:14px;font-weight:600;text-decoration:underline}
.entry-footer-copyright{color:#6b7787;font-size:13px}
.legal-page h4{margin:18px 0 4px;font-size:15px}
.legal-page h4:first-of-type{margin-top:20px}
.legal-page p{margin:0 0 10px;line-height:1.55;color:#33404f;font-size:14px}
.legal-page ul{margin:0 0 10px;padding-left:20px;line-height:1.55;color:#33404f;font-size:14px}
.legal-page li{margin-bottom:4px}
.legal-updated{color:var(--muted);font-size:13px;margin:0 0 16px}
.student-app{display:none}
.student-app.show{display:block}
.entry-screen.hide{display:none}

/* Admin login */
.admin-login-overlay{
  display:none;position:fixed;inset:0;background:rgba(3,10,20,.72);z-index:300;align-items:center;justify-content:center;padding:20px
}
.admin-login-overlay.show{display:flex}
.admin-login-box{width:min(460px,95vw);background:#fff;border-radius:18px;padding:24px;box-shadow:0 30px 90px rgba(0,0,0,.4);position:relative}
.admin-login-box h3{margin:0 0 4px;font-size:28px}
.admin-login-box p{margin:0 0 18px;color:#6e7a89}
.admin-field{display:grid;gap:6px;margin-bottom:12px}
.admin-field label{font-size:13px;font-weight:900}
.admin-field input{border:1.5px solid #ccd6e2;border-radius:9px;padding:12px 13px}
.account-field-list{display:grid;gap:2px;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.account-field{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line);font-size:14px}
.account-field:last-child{border-bottom:0}
.account-field span{color:var(--muted)}
.acct-progress-details{margin-top:16px}
.acct-progress-details summary{
  font-weight:700;cursor:pointer;padding:6px 0;list-style:none;display:flex;align-items:center;gap:6px
}
.acct-progress-details summary::-webkit-details-marker{display:none}
.acct-progress-details summary::before{content:"▸";font-size:12px;color:var(--muted)}
.acct-progress-details[open] summary::before{content:"▾"}
.acct-progress-details .category-list{margin-top:8px}
.acct-package-heading{font-weight:800;color:#23405f;padding:6px 2px 10px;font-size:14px}

/* My Account: near-full-screen sheet on narrow mobile instead of a modal
   box that's taller than the viewport with no scroll area of its own —
   only this overlay, not the shared admin-login/auth-signup ones. */
@media(max-width:650px){
  #myAccountOverlay{padding:0;align-items:stretch;justify-content:stretch}
  #myAccountOverlay .admin-login-box{
    width:100%;max-width:none;height:100%;border-radius:0;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px))
  }
  #myAccountOverlay .close{
    position:fixed;top:14px;right:14px;z-index:10;background:#fff;border-radius:50%;
    width:36px;height:36px;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.15);font-size:22px
  }
}
.demo-creds{font-size:12px;background:#fff7db;border:1px solid #efcf69;border-radius:9px;padding:9px 10px;margin:10px 0 14px}

/* Auth (login / sign up) */
.entry-auth-actions{display:flex;align-items:center;gap:10px}
#authLoggedOutLinks,#authLoggedInLinks{display:flex;align-items:center;gap:10px}
.auth-link{
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;
  border-radius:10px;padding:10px 14px;font-weight:850
}
.auth-link-primary{background:#fff;color:#0e2a4d;border-color:#fff}
.auth-user-name{color:#fff;font-weight:850;margin-right:2px}
.auth-error{font-size:13px;background:#fdeceb;border:1px solid #f3b7b0;color:#a5281a;border-radius:9px;padding:9px 10px;margin-bottom:12px}
.auth-divider{text-align:center;color:#8a94a3;font-size:12px;margin:14px 0;text-transform:uppercase;letter-spacing:.06em}
.auth-google-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;margin-top:2px;text-decoration:none;font-weight:850}
.auth-switch{text-align:center;font-size:13px;color:#6e7a89;margin-top:16px}
.auth-switch a{color:#0e58ba;font-weight:850;text-decoration:none}
.auth-sent-message{font-size:14px;background:#eaf6ec;border:1px solid #b7ddbb;color:#1f6b2c;border-radius:9px;padding:12px;margin-bottom:12px;line-height:1.45}
.auth-forgot-link{text-align:right;font-size:12.5px;margin:-6px 0 12px}
.auth-forgot-link a{color:#0e58ba;font-weight:700;text-decoration:none}
.turnstile-loading{font-size:12.5px;color:#6e7a89;padding:8px 2px}
.turnstile-loading.turnstile-timeout{color:#a5281a}
.turnstile-loading a{color:#0e58ba;font-weight:700;text-decoration:none;margin-left:4px}
#verifyBanner{display:none;position:sticky;top:0;z-index:40;width:100%;box-sizing:border-box;background:#fff6e0;border-bottom:1px solid #e9d08a;color:#6b5200;font-size:13.5px;padding:10px 14px;text-align:center}
#verifyBanner a,#verifyBanner button.link-btn{color:#0e58ba;font-weight:850;text-decoration:none;background:none;border:none;cursor:pointer;font-size:13.5px;padding:0;margin-left:4px}
/* Same sticky-top mechanism as #verifyBanner (reliably visible on mobile,
   unlike a fixed-bottom toast that mobile browser chrome can obscure) --
   green/success palette instead of the warning yellow. */
#verifySuccessBanner{position:sticky;top:0;z-index:40;width:100%;box-sizing:border-box;background:#e9f9ee;border-bottom:1px solid #9fd9b4;color:#0b6b32;font-size:13.5px;font-weight:700;padding:10px 14px;text-align:center}
/* Same mechanism, this file's existing .auth-error red palette instead of
   the success green -- not a new color scheme. */
#verifyErrorBanner{position:sticky;top:0;z-index:40;width:100%;box-sizing:border-box;background:#fdeceb;border-bottom:1px solid #f3b7b0;color:#a5281a;font-size:13.5px;font-weight:700;padding:10px 14px;text-align:center}

/* Admin dashboard */
.admin-app{display:none;min-height:100vh;background:#eef3f8}
.admin-app.show{display:block}
.admin-top{
  background:linear-gradient(90deg,#071321,#0e2946);color:#fff;padding:13px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;position:sticky;top:0;z-index:30
}
.admin-top .brandline{display:flex;align-items:center;gap:10px}
.admin-top .logo{width:42px;height:42px;border-radius:11px}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-actions button{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;border-radius:9px;padding:9px 11px;font-weight:800}
.admin-shell{max-width:1440px;margin:0 auto;padding:20px}
.admin-title{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:18px}
.admin-title h2{margin:0;font-size:30px}
.admin-title p{margin:4px 0 0;color:#667384}
.admin-badge{background:#fff0d2;border:1px solid #eab55d;color:#825314;border-radius:999px;padding:7px 10px;font-weight:850;font-size:12px}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.admin-stat{background:#fff;border:1px solid #dbe2eb;border-radius:14px;padding:16px}
.admin-stat span{display:block;color:#6f7b8b;font-size:12px;font-weight:800;margin-bottom:6px}
.admin-stat strong{font-size:28px}
.admin-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
.admin-panel{background:#fff;border:1px solid #dbe2eb;border-radius:15px;padding:16px;box-shadow:0 8px 22px rgba(29,47,73,.05)}
.admin-panel h3{margin:0 0 12px}
.admin-table-wrap{overflow:auto}
.admin-table{width:100%;border-collapse:collapse;min-width:750px}
.admin-table th,.admin-table td{padding:10px;border-bottom:1px solid #e9edf2;text-align:left;font-size:13px}
.admin-table th{background:#f5f7fa;font-size:12px;color:#5d6876}
.status-pill{display:inline-block;border-radius:999px;padding:4px 8px;font-weight:850;font-size:11px}
.status-active{background:#e8f7ee;color:#17713b}
.status-draft{background:#fff1dc;color:#8f5b09}
.status-off{background:#f3f4f6;color:#656d78}
.admin-btn{border:1px solid #cdd7e3;background:#fff;border-radius:8px;padding:7px 9px;font-weight:800;font-size:12px}
.admin-btn.primary{border-color:#2d7bd8;color:#0f5bbc;background:#f3f8ff}
.audit-list{display:grid;gap:9px}
.audit-item{border:1px solid #e0e6ed;border-radius:10px;padding:10px 11px;background:#fbfcfd}
.audit-item b{display:block;margin-bottom:3px}
.audit-item small{color:#727e8e}
.admin-alert{border:1px solid #efcf69;background:#fff8de;border-radius:11px;padding:11px;margin-bottom:10px;font-size:13px}
.admin-filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.admin-filterbar select,.admin-filterbar input{border:1px solid #cfd8e3;border-radius:8px;padding:9px 10px;background:#fff}
.question-admin-list{display:grid;gap:9px;max-height:460px;overflow:auto}
.q-admin{border:1px solid #dfe5ec;border-radius:10px;padding:11px}
.q-admin-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.q-admin h4{margin:0 0 5px;font-size:14px}
.q-admin p{margin:0;color:#6b7787;font-size:12px}
.q-admin .meta{margin-top:7px;font-size:11px;color:#7c8796}
@media(max-width:900px){
 .entry-steps,.entry-benefits{grid-template-columns:1fr 1fr}
 .exam-preview{grid-template-columns:1fr}
 .admin-stats{grid-template-columns:1fr 1fr}
 .admin-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
 .entry-hero h1{font-size:32px}
 .entry-steps,.entry-benefits{grid-template-columns:1fr}
 .entry-top{align-items:flex-start}
 .entry-card{padding:18px}
 .admin-stats{grid-template-columns:1fr}
}
/* Real horizontal-overflow bug found while checking mobile screenshots: a
   long display name/email in #authLoggedInLinks pushed .entry-auth-actions
   (and the whole page) wider than the viewport at narrow widths — nothing
   here wrapped or truncated. Confirmed via document.documentElement.
   scrollWidth exceeding the viewport, not just eyeballed. */
@media(max-width:680px){
 .entry-top{flex-wrap:wrap;row-gap:10px}
 .entry-auth-actions{flex-wrap:wrap;justify-content:flex-start;row-gap:8px}
 #authLoggedOutLinks,#authLoggedInLinks{flex-wrap:wrap;row-gap:8px}
 .auth-user-name{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}
}


.entry-benefit b{
  font-size:13px;
  letter-spacing:.25px;
  color:#0c2f57;
}
.entry-benefit{
  line-height:1.3;
}
.language-note{
  margin-top:12px;
  text-align:center;
  font-size:12px;
  color:#718096;
}


/* ===== V7 MULTILINGUAL ENHANCEMENTS ===== */
.lang-search-wrap{display:grid;gap:7px}
.lang-help{font-size:11px;color:#728094;line-height:1.35}
.rtl-mode{direction:rtl;text-align:right}
.rtl-mode .answers .answer{text-align:right}
.rtl-mode .exam-title,.rtl-mode .exam-preview-main,.rtl-mode .multi-info{flex-direction:row-reverse}
.rtl-mode .topbar{direction:rtl}
.rtl-mode .entry-card,.rtl-mode .exam-card,.rtl-mode .panel,.rtl-mode .progress-card{direction:rtl}
.language-chip-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;justify-content:center}
.language-chip{border:1px solid #d6dee8;border-radius:999px;padding:6px 9px;background:#fff;font-size:11px;color:#4b5868}
.admin-lang-note{font-size:12px;color:#6e7b8b;margin-top:8px}


.lang-search-wrap select{
  width:100%;
  border:1.5px solid #ccd7e3;
  border-radius:10px;
  padding:12px;
  background:#fff;
  color:#111827;
  font-weight:700;
}
.lang-search-wrap select:focus{
  border-color:#2d7bd8;
  box-shadow:0 0 0 3px rgba(45,123,216,.12);
}
.lang-visible-note{
  margin-top:7px;
  font-size:11px;
  color:#5f6f82;
  font-weight:700;
}


/* ===== V9 PRACTICE MODE ===== */
.exit-fixed{
  position:fixed;top:18px;right:22px;z-index:80;
  border:0;border-radius:10px;padding:12px 16px;
  background:#d9342b;color:#fff;font-weight:950;letter-spacing:.7px;
  box-shadow:0 8px 22px rgba(0,0,0,.2);
}
.exit-fixed:hover{filter:brightness(.95)}
/* Must come after the base .exit-fixed rule above — same specificity, so
   source order decides the winner regardless of the media query. Aligned
   with .topbuy's own max-width:720px breakpoint (see above): a mismatch
   here (this used to be a separate max-width:650px rule) left a real gap
   where .topbuy's margin-left:auto pushed the avatar into this button
   while it was still fixed top-right — confirmed via bounding-box
   measurement across the full width range, not guessed. */
@media(max-width:720px){
  .exit-fixed{top:auto;bottom:14px;right:14px}
}
/* Mobile/tablet: Log Out lives only in the avatar/account menu now (see
   .account-menu) — a second, independently-floating Log Out button was a
   real duplicate-control bug (it also visually collided with page content
   once repositioned to the bottom corner above). !important is required
   because the JS toggles this element's visibility via inline
   style.display, which otherwise beats any plain stylesheet rule
   regardless of selector specificity. Desktop (>820px) keeps it. */
@media(max-width:820px){
  #globalExitBtn{display:none !important}
  /* No floating Log Out to avoid at these widths any more (rule above) —
     reclaim the space the wider desktop breakpoint reserves for it. */
  body:not(.entry-mode) .topbar{padding-right:22px}
}
/* z-index:50, same for .exit-fixed above at 80 — both were previously
   400/500, higher than every modal overlay (.overlay/.admin-login-overlay/
   toast, 100-300), so either could visually float on top of and stay
   clickable through an open modal (found while checking a My Account mobile
   screenshot). Fixed by keeping both below the lowest overlay z-index. */
.back-to-top{
  position:fixed;bottom:18px;left:18px;z-index:50;
  width:44px;height:44px;border:0;border-radius:50%;
  background:var(--navy);color:#fff;font-size:20px;line-height:1;
  box-shadow:0 8px 22px rgba(0,0,0,.25);cursor:pointer;
  align-items:center;justify-content:center
}
.back-to-top:hover{filter:brightness(1.15)}
.back-to-top:focus-visible{outline:3px solid #7aa9ef;outline-offset:2px}
.practice-summary{
  display:none;background:#fff;border:1px solid #d9e1ea;border-radius:16px;
  padding:24px;box-shadow:0 12px 30px rgba(31,48,73,.08);text-align:center
}
.practice-summary.show{display:block}
.practice-summary h2{font-size:31px;margin:4px 0 7px}
.practice-summary p{color:#687386;margin:0 0 18px}
.score-big{
  width:150px;height:150px;border-radius:50%;margin:8px auto 18px;
  display:grid;place-items:center;background:#eef4fb;border:10px solid #d8e5f4
}
.score-big strong{font-size:35px;display:block}
.score-big span{font-size:13px;color:#677587}
.summary-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:650px;margin:0 auto 18px}
.summary-stat{border:1px solid #e0e6ed;border-radius:12px;padding:13px;background:#fafbfd}
.summary-stat b{display:block;font-size:21px;margin-top:4px}
.summary-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:760px;margin:18px auto 0}
.summary-actions .wide{grid-column:1/-1}
/* Now a real <button> (was a plain <p>) so it's actually clickable and
   keyboard/AT-accessible — style keeps the same look plus an explicit
   clickability cue. */
.summary-remaining-offer{
  display:none;width:100%;text-align:center;font-weight:700;color:#0e4fb0;
  margin:4px 0 12px;background:none;border:0;cursor:pointer;text-decoration:underline;
  font:inherit;
}
.summary-remaining-offer:hover{color:#0a3d8f}
.summary-eyebrow{text-align:center;font-size:12px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#7b8798;margin:2px 0 -6px}
.summary-mastery{text-align:center;font-size:14px;color:#334155;background:#f4f7fb;border:1px solid #e0e6ed;border-radius:10px;padding:10px 14px;margin:0 auto 16px;max-width:650px}
.chip-info{text-align:center;font-size:13px;color:#5c6b7d;background:#f4f7fb;border-radius:10px;padding:10px 12px}
.mistake-box{
  margin-top:18px;text-align:left;border-top:1px solid #e3e8ef;padding-top:14px
}
/* Now a <details>/<summary> (progressive disclosure, collapsed by default
   on the mobile results screen — see the @media(max-width:650px) order
   block below) so the full missed-question list isn't automatically as
   long as the page; the "Practice These Mistakes" button stays the
   primary action, this is one tap away. */
.mistake-box summary{margin:0 0 10px;font-size:20px;font-weight:800;cursor:pointer;list-style:revert}
.mistake-list{display:grid;gap:8px}
.mistake-item{border:1px solid #e1e7ee;border-radius:10px;padding:10px;background:#fff8f7}
.mistake-item b{display:block;margin-bottom:4px}
.practice-mode-banner{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  border:1px solid #d8e3f0;background:#f6f9fd;border-radius:12px;padding:10px 12px;margin:12px 0 0
}
.practice-mode-banner strong{color:#0b58bd}
.practice-mode-banner span{font-size:12px;color:#6c7888}
.free-pill{display:inline-block;border-radius:999px;padding:5px 8px;background:#eaf7ee;color:#16733b;font-weight:900;font-size:11px}
.mastery-pill{display:inline-block;border-radius:999px;padding:4px 7px;background:#eef3ff;color:#315fb3;font-weight:850;font-size:11px}
.exit-confirm{
  display:none;position:fixed;inset:0;background:rgba(2,10,20,.68);z-index:600;
  align-items:center;justify-content:center;padding:20px
}
.exit-confirm.show{display:flex}
.exit-box{width:min(440px,95vw);background:#fff;border-radius:16px;padding:22px;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.35)}
.exit-box h3{margin:0 0 7px;font-size:25px}
.exit-box p{color:#687386;margin:0 0 16px}
.exit-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:650px){
 .summary-stats{grid-template-columns:1fr}
 /* Results-page mobile hierarchy, revised: completion+score -> counts ->
    next steps -> mistake review/practice action -> purchase options ->
    secondary categories/progress -> trust/footer. Reordering via flex
    `order` (not moving markup) — desktop keeps the original DOM order and
    grid layout untouched. #summaryTryAnotherBtn gets its own id (was
    sharing .btn-outline with #summarySelectBuyBtn, which made them
    impossible to order independently via class alone). */
 .practice-summary.show{display:flex;flex-direction:column}
 #completionPill{order:1}
 #summaryTitle{order:2}
 #summarySubtitle{order:3}
 #summaryOriginalLabel{order:4}
 .score-big{order:5}
 .summary-stats{order:6}
 #summaryMasteryStatus{order:7}
 #summaryRemainingOffer{order:8}
 .summary-actions{order:9;display:flex;flex-direction:column}
 #summaryPracticeMistakesBtn{order:1}
 #summaryNoMistakesChip{order:1}
 #summaryTryAnotherBtn{order:2}
 #summaryBuyCurrentBtn{order:3}
 #summarySelectBuyBtn{order:4}
 #summaryUnlockAllBtn{order:5}
 #mistakeBox{order:10;margin-top:14px}
 /* .side's "Your Progress" card duplicates the score already shown above
    — only redundant specifically while results are showing (it's
    genuinely useful, unhidden, during active question-answering, which
    is why this is scoped to .practice-summary.show ~ .side, not .side
    generally). "Why Buy?" (the second .progress-card) is untouched. */
 .practice-summary.show ~ .side .progress-card:first-child{display:none}
}


/* ===== V13 ADMINISTRATOR CONTROL CENTER ===== */
.admin-tabs{
  display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px;
  background:#fff;border:1px solid #dbe2eb;border-radius:14px;padding:8px;
}
.admin-tab{
  border:0;background:#f4f7fa;color:#334155;border-radius:9px;
  padding:10px 13px;font-weight:850;cursor:pointer
}
.admin-tab.active{background:#0d5bc2;color:#fff}
.admin-view{display:none}
.admin-view.show{display:block}

.control-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.control-card{
  background:#fff;border:1px solid #dbe2eb;border-radius:14px;padding:15px;
}
.control-card h4{margin:0 0 6px}
.control-card p{margin:0;color:#687386;font-size:13px;line-height:1.4}
.control-card button{margin-top:12px;width:100%}

.system-check-panel{
  background:#071321;color:#e9f1fa;border-radius:16px;padding:18px;
  border:1px solid #173657
}
.system-check-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.system-check-head h3{margin:0;color:#fff}
.system-check-list{display:grid;gap:8px;margin-top:14px}
.check-row{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  border-radius:10px;padding:10px 12px
}
.check-row strong{color:#fff}
.check-ok{color:#80e0a1;font-weight:900}
.check-warn{color:#ffd36c;font-weight:900}
.check-bad{color:#ff8b84;font-weight:900}

.admin-editor{
  display:grid;grid-template-columns:1fr 1fr;gap:14px
}
.admin-editor .full{grid-column:1/-1}
.admin-form-field{display:grid;gap:6px}
.admin-form-field label{font-size:12px;font-weight:900;color:#435066}
.admin-form-field input,.admin-form-field select,.admin-form-field textarea{
  border:1.5px solid #cfd9e5;border-radius:9px;padding:10px 11px;background:#fff;
  font:inherit;outline:none
}
.admin-form-field textarea{min-height:94px;resize:vertical}
.admin-form-field input:focus,.admin-form-field select:focus,.admin-form-field textarea:focus{
  border-color:#2d7bd8;box-shadow:0 0 0 3px rgba(45,123,216,.12)
}
.admin-savebar{
  display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:14px
}
.admin-danger{border-color:#e69a94 !important;color:#b42318 !important;background:#fff7f6 !important}
.admin-success{border-color:#88c9a0 !important;color:#13733d !important;background:#effaf3 !important}

.toggle-list{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.toggle-item{
  border:1px solid #dfe5ec;border-radius:10px;padding:10px 11px;
  display:flex;justify-content:space-between;gap:10px;align-items:center
}
.toggle-item label{font-size:13px;font-weight:800}
.toggle-item input{width:19px;height:19px;accent-color:#0d5bc2}

.admin-log{display:grid;gap:8px;max-height:430px;overflow:auto}
.log-row{
  border:1px solid #e1e7ee;border-radius:10px;padding:10px;background:#fbfcfd
}
.log-row b{display:block;margin-bottom:3px}
.log-row small{color:#6f7b8b}
.snapshot-card{
  border:1px solid #dce3eb;border-radius:12px;padding:13px;background:#fafbfd
}
.snapshot-card strong{display:block;font-size:18px;margin-bottom:4px}
.admin-kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
.admin-kpi{
  background:#fff;border:1px solid #dbe2eb;border-radius:12px;padding:13px
}
.admin-kpi span{display:block;color:#6c7888;font-size:11px;font-weight:800}
.admin-kpi strong{display:block;font-size:24px;margin-top:5px}

.test-center-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}
.test-box{background:#fff;border:1px solid #dbe2eb;border-radius:14px;padding:15px}
.test-box h3{margin:0 0 10px}
.test-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.test-result{
  margin-top:12px;border:1px solid #dce4ee;border-radius:10px;padding:11px;background:#f8fafc;
  min-height:80px;font-size:13px;line-height:1.45
}
.unsaved-flag{
  display:none;background:#fff1d6;border:1px solid #e6b960;color:#80550b;
  border-radius:999px;padding:6px 9px;font-size:11px;font-weight:900
}
.unsaved-flag.show{display:inline-block}

@media(max-width:1050px){
  .control-grid,.admin-kpi-grid{grid-template-columns:1fr 1fr}
  .toggle-list{grid-template-columns:1fr 1fr}
  .test-center-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .control-grid,.admin-kpi-grid,.toggle-list{grid-template-columns:1fr}
  .admin-editor{grid-template-columns:1fr}
  .admin-editor .full{grid-column:auto}
  .test-actions{grid-template-columns:1fr}
}


/* V14: cleaner practice category navigation — prices appear only in purchase flow */
#categoryList .cat{
  grid-template-columns:1fr auto;
  align-items:center;
}
#categoryList .cat-arrow{
  font-size:24px;
  line-height:1;
  color:#8b98a8;
  font-weight:800;
  padding-left:8px;
}
#categoryList .cat.active .cat-arrow{color:inherit}


/* V15: Main-screen exam pricing */
.entry-pricing{
  margin-top:18px;
  background:#fff;
  border:1px solid #dbe3ec;
  border-radius:16px;
  padding:18px;
  box-shadow:0 12px 30px rgba(31,48,73,.06);
}
.entry-pricing-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:end;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.entry-pricing-head h3{margin:0;font-size:21px}
.entry-pricing-head p{margin:4px 0 0;color:#6c7888;font-size:13px}
.entry-price-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.entry-price-card{
  border:1px solid #dfe6ee;
  border-radius:12px;
  padding:13px;
  background:#fbfcfe;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:108px;
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.entry-price-card:hover{border-color:#b9c8dc}
.entry-price-card:focus-visible{outline:3px solid #7aa9ef;outline-offset:2px}
.entry-price-card .ep-name{
  font-weight:900;
  line-height:1.25;
  color:#1f2b3d;
}
.entry-price-card .ep-meta{
  color:#718096;
  font-size:12px;
  margin-top:4px;
}
.entry-price-card .ep-price{
  font-size:22px;
  font-weight:950;
  color:#0b58bd;
  margin-top:10px;
}
/* "Selected for purchase" (tap-to-toggle cart state) is visually distinct
   from "currently chosen for free practice" (.selected, driven by the
   Step-3 Exam dropdown) — a card can show either, neither, or both. */
.entry-price-card.in-cart{
  border-color:#1f9d55;
  background:#effaf2;
  box-shadow:0 0 0 2px rgba(31,157,85,.15);
}
.entry-price-card .ep-cart-badge{
  margin-top:8px;
  font-size:11px;
  font-weight:800;
  color:#8a94a3;
  letter-spacing:.02em;
}
.entry-price-card.in-cart .ep-cart-badge{color:#17803f}
/* Only renders for categories with a real page in categoryLandingSlugs
   (js/app.js) — a plain link, not a button, so it's a genuine crawlable
   <a href> distinct from the card's own add-to-cart click target
   (stopPropagation() on the link keeps the two independent). */
.entry-price-card .ep-learn-more{
  display:block;
  margin-top:8px;
  font-size:11px;
  font-weight:700;
  color:#0d5bc2;
  text-decoration:none;
}
.entry-price-card .ep-learn-more:hover{text-decoration:underline}
/* Raised visual weight so this competes with the adjacent gold bundle
   card instead of reading as plain content — was previously the least
   prominent of three stacked elements, likely why it went unnoticed in
   favor of the header's Unlock button. Blue identity (vs. the bundle
   card's gold) keeps the two visually related but distinct: this is
   "what's in your cart," the bundle card is "the alternative all-8
   deal." */
.entry-cart-summary{
  margin-top:12px;
  border:2px solid var(--blue);
  border-left:6px solid var(--blue);
  background:#eaf2ff;
  border-radius:13px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  box-shadow:0 6px 18px rgba(23,105,224,.12);
}
.entry-cart-summary span{font-weight:850;color:#0c2f57;font-size:15px}
.entry-bundle-card{
  margin-top:12px;
  border:1px solid #d7b75f;
  background:#fff9e8;
  border-radius:12px;
  padding:14px;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}
.entry-bundle-card strong{font-size:18px}
.entry-bundle-price{
  font-size:25px;
  font-weight:950;
}
.entry-bundle-save{
  font-size:12px;
  color:#6f5b1a;
  margin-top:2px;
}
.entry-bundle-action{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}
.entry-bundle-buy{
  min-height:44px;
  white-space:nowrap;
}
@media(max-width:560px){
  .entry-bundle-action{width:100%;justify-content:space-between}
  .entry-bundle-buy{width:100%;white-space:normal;line-height:1.3;text-align:center}
}
@media(max-width:950px){
  .entry-price-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .entry-price-grid{grid-template-columns:1fr}
}


/* ===== V16 MOBILE-FIRST ENTRY ===== */
.entry-selector-wrap{position:relative}
.mobile-picker-button{
  display:none;
  width:100%;
  min-height:54px;
  border:1.5px solid #cfd9e5;
  border-radius:11px;
  padding:12px 14px;
  background:#fff;
  color:#17243a;
  font:inherit;
  font-size:16px;
  font-weight:800;
  text-align:left;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.mobile-picker-button:active{background:#f3f7fb}
.mobile-picker-chevron{
  font-size:22px;
  line-height:1;
  color:#66758a;
  flex:0 0 auto;
}
.mobile-entry-picker{
  display:none;
  position:fixed;
  inset:0;
  z-index:1200;
  background:rgba(3,12,25,.62);
  align-items:flex-end;
  justify-content:center;
  padding:0;
}
.mobile-entry-picker.show{display:flex}
.mobile-entry-sheet{
  width:100%;
  max-height:84vh;
  background:#fff;
  border-radius:22px 22px 0 0;
  box-shadow:0 -20px 65px rgba(0,0,0,.28);
  overflow:hidden;
  padding-bottom:max(12px,env(safe-area-inset-bottom));
}
.mobile-entry-sheet-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 16px 13px;
  border-bottom:1px solid #e4e9ef;
  background:#fff;
}
.mobile-entry-sheet-head strong{
  display:block;
  font-size:21px;
  color:#17243a;
}
.mobile-entry-sheet-head span{
  display:block;
  margin-top:3px;
  font-size:12px;
  color:#6c7888;
}
.mobile-entry-close{
  width:40px;height:40px;border:0;border-radius:999px;
  background:#eef2f6;color:#26364b;font-size:25px;line-height:1;
  cursor:pointer;touch-action:manipulation;
}
.mobile-entry-picker-list{
  max-height:calc(84vh - 76px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  background:#fff;
}
.mobile-entry-option{
  display:flex;
  width:100%;
  min-height:54px;
  padding:13px 17px;
  border:0;
  border-bottom:1px solid #edf1f5;
  background:#fff;
  color:#203047;
  font:inherit;
  font-size:16px;
  font-weight:750;
  text-align:left;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.mobile-entry-option.selected{
  background:#edf5ff;
  color:#0b58bd;
}
.mobile-entry-option:active{background:#e8f2ff}
.mobile-entry-check{font-weight:950}

@media(max-width:760px){
  body{overflow-x:hidden}
  .entry-shell{padding-left:14px !important;padding-right:14px !important}
  .entry-card{padding:16px !important}
  .entry-steps{grid-template-columns:1fr !important;gap:14px !important}
  .entry-step{min-width:0}
  .entry-step > label{font-size:13px}
  .entry-selector-wrap > select{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
    overflow:hidden !important;
  }
  .mobile-picker-button{display:flex}
  .entry-hero h1{font-size:30px !important;line-height:1.08}
  .entry-hero p{font-size:15px}
  .exam-preview{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:14px !important;
  }
  .exam-preview .entry-cta{
    width:100% !important;
    min-height:52px;
    font-size:15px;
  }
  .entry-price-grid{grid-template-columns:1fr !important}
  .entry-price-card{min-height:auto !important}
  .entry-bundle-card{
    align-items:flex-start !important;
    flex-direction:column !important;
  }
  .entry-bundle-price{font-size:30px !important}
  .entry-benefits{grid-template-columns:1fr !important}
  .entry-top{align-items:flex-start;gap:12px}
  .admin-link{white-space:nowrap}
}
@media(min-width:761px){
  .entry-selector-wrap > select{
    display:block;
    width:100%;
    min-height:48px;
    font-size:15px;
  }
}


/* ===== V17 NATIVE SELECTORS: PHONE + COMPUTER ===== */
.js-required-warning{
  background:#fff3cd;
  border:1px solid #e5bd54;
  color:#6f5200;
  border-radius:10px;
  padding:12px 13px;
  margin:12px 0;
  line-height:1.4;
}
.runtime-status{
  display:inline-block;
  background:#eef7ff;
  border:1px solid #bcd7f4;
  color:#24527f;
  border-radius:8px;
  padding:3px 9px;
  margin:0 0 12px;
  font-size:11px;
  font-weight:800;
}
.runtime-status.ready{
  background:#edf9f1;
  border-color:#a9d7b8;
  color:#17653a;
}
.entry-step select{
  display:block !important;
  position:static !important;
  opacity:1 !important;
  pointer-events:auto !important;
  width:100% !important;
  height:auto !important;
  min-height:54px !important;
  border:1.5px solid #cfd9e5 !important;
  border-radius:11px !important;
  background:#fff !important;
  color:#17243a !important;
  padding:11px 42px 11px 13px !important;
  font:inherit !important;
  font-size:16px !important;
  font-weight:750 !important;
  appearance:auto !important;
  -webkit-appearance:menulist !important;
  touch-action:manipulation !important;
}
.mobile-picker-button{display:none !important}
.mobile-entry-picker{display:none !important}

@media(max-width:760px){
  .entry-shell{padding-left:12px !important;padding-right:12px !important}
  .entry-card{padding:15px !important}
  .entry-steps{grid-template-columns:1fr !important;gap:14px !important}
  .entry-step select{
    min-height:58px !important;
    font-size:16px !important;
  }
  .entry-hero h1{font-size:29px !important;line-height:1.08}
  .exam-preview{flex-direction:column !important;align-items:stretch !important}
  .entry-cta{width:100% !important;min-height:56px !important}
  .entry-price-grid{grid-template-columns:1fr !important}
  .entry-benefits{grid-template-columns:1fr !important}
}

/* Mobile homepage UX polish pass (2026-09-18): compact logged-out header,
   2x2 benefits grid, selected-exam-first pricing, compact "Why CDLPrepUSA?"
   block. Scoped to <=760px, the entry screen's existing mobile threshold —
   desktop/tablet layout above that is untouched. */
@media(max-width:760px){
  /* 1. Header: keep the logo/brand full-size, shrink Log In / Sign Up so
     they read as secondary header actions instead of a stacked card. */
  .entry-top{margin-bottom:18px !important}
  .auth-link{
    padding:6px 11px !important;
    font-size:12.5px !important;
    font-weight:750 !important;
    border-radius:8px !important;
  }
  .auth-user-name{font-size:13px !important}

  /* 3a. Benefits: 2x2 instead of one card per row. */
  .entry-benefits{grid-template-columns:repeat(2,1fr) !important;gap:8px !important;margin-top:14px !important}
  .entry-benefit{padding:8px 6px !important;font-size:12px !important}

  /* 3b. "Have an access code?" — tighter spacing above/below. */
  .comp-access-toggle{margin:8px auto 0 !important}
  .comp-access-card{margin-top:10px !important;padding:11px !important}

  /* 3c. Pricing: selected exam highlighted; "View All Exams" button sits
     directly under the (collapsed-to-one-card) grid, above the bundle. */
  .entry-price-card.selected{
    border-color:#0b58bd !important;
    background:#eef6ff !important;
    box-shadow:0 0 0 2px rgba(11,88,189,.15) !important;
  }
  /* A card can be the current free-practice pick AND in the purchase cart
     at once — cart membership wins the background here (higher
     specificity + !important, needed to beat .selected's !important
     above), since "you're buying this" is the more consequential state;
     the badge text (driven purely by cart status) still disambiguates. */
  .entry-price-card.selected.in-cart{
    border-color:#1f9d55 !important;
    background:#effaf2 !important;
    box-shadow:0 0 0 2px rgba(31,157,85,.15) !important;
  }
  .entry-price-show-all{margin-bottom:12px}

  /* 3d. "Why CDLPrepUSA?" — compact card instead of another full block. */
  .entry-card-spaced{margin-top:16px !important;padding:14px !important}
  .entry-card-spaced h3{font-size:16px !important;margin-bottom:4px !important}
  .entry-card-spaced p{font-size:13px !important;line-height:1.4 !important}
}


.mobile-browser-note{
  margin-top:12px;
  border:1px solid #d9e3ef;
  background:#f7faff;
  color:#526174;
  border-radius:11px;
  padding:10px 12px;
  font-size:12px;
  line-height:1.4;
}


/* ===== V18 QUESTION INVENTORY ===== */
.inventory-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-bottom:14px;
}
.inventory-kpi{
  background:#fff;
  border:1px solid #dbe3ec;
  border-radius:13px;
  padding:14px;
}
.inventory-kpi span{
  display:block;
  color:#6b7788;
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.inventory-kpi strong{
  display:block;
  margin-top:5px;
  font-size:27px;
}
.inventory-kpi.good strong{color:#13733d}
.inventory-kpi.warn strong{color:#9a6511}
.inventory-kpi.bad strong{color:#b42318}

.inventory-note{
  border:1px solid #efc56b;
  background:#fff8e7;
  color:#664b0b;
  border-radius:12px;
  padding:12px 13px;
  line-height:1.45;
  margin-bottom:14px;
}
.inventory-toolbar{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.inventory-toolbar-left{
  display:flex;
  gap:10px;
  align-items:end;
  flex-wrap:wrap;
}
.inventory-field{
  display:grid;
  gap:5px;
}
.inventory-field label{
  font-size:11px;
  font-weight:900;
  color:#5d6b7d;
}
.inventory-field select{
  min-width:220px;
  border:1px solid #cfd9e5;
  border-radius:9px;
  padding:9px 10px;
  background:#fff;
  font:inherit;
}
.inventory-table-wrap{
  overflow:auto;
  border:1px solid #dce4ed;
  border-radius:12px;
  background:#fff;
}
.inventory-table{
  width:100%;
  border-collapse:collapse;
  min-width:850px;
}
.inventory-table th,
.inventory-table td{
  padding:11px 12px;
  border-bottom:1px solid #e7ecf1;
  text-align:left;
  vertical-align:middle;
  font-size:13px;
}
.inventory-table th{
  background:#f5f8fb;
  color:#526175;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.inventory-table tr:last-child td{border-bottom:0}
.inventory-status{
  display:inline-block;
  border-radius:999px;
  padding:5px 8px;
  font-size:10px;
  font-weight:950;
}
.inventory-status.complete{background:#eaf8ef;color:#11703a}
.inventory-status.partial{background:#fff4db;color:#895b0b}
.inventory-status.missing{background:#fff0ef;color:#aa281f}
.inventory-status.demo{background:#edf3ff;color:#315fa8}
.inventory-progress{
  min-width:130px;
}
.inventory-progress-track{
  height:7px;
  border-radius:999px;
  background:#e8edf2;
  overflow:hidden;
  margin-top:5px;
}
.inventory-progress-fill{
  height:100%;
  background:#1871d8;
  border-radius:999px;
}
.inventory-detail{
  margin-top:14px;
  border:1px solid #dce4ed;
  border-radius:12px;
  background:#fff;
  padding:14px;
}
.inventory-detail h4{margin:0 0 10px}
.inventory-question-list{
  display:grid;
  gap:8px;
}
.inventory-question-item{
  border:1px solid #e3e8ef;
  border-radius:9px;
  padding:9px 10px;
  background:#fafbfd;
  font-size:13px;
}
.language-coverage-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.language-coverage-card{
  border:1px solid #dfe5ec;
  border-radius:10px;
  padding:10px;
  background:#fff;
}
.language-coverage-card b{
  display:block;
  margin-bottom:4px;
}
.language-coverage-card small{
  color:#6b7788;
}
@media(max-width:950px){
  .inventory-summary{grid-template-columns:1fr 1fr}
  .language-coverage-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .inventory-summary{grid-template-columns:1fr}
  .language-coverage-grid{grid-template-columns:1fr}
  .inventory-field select{min-width:100%;width:100%}
  .inventory-toolbar-left{width:100%}
  .inventory-field{width:100%}
}

/* V19.7 — Administrator Buyer Preview + Complimentary Access */
.admin-preview-return{position:fixed;left:18px;bottom:18px;z-index:1200;display:none;border:0;border-radius:12px;padding:12px 15px;background:#0b2744;color:#fff;font-weight:900;box-shadow:0 10px 30px rgba(0,0,0,.24);cursor:pointer}
.admin-preview-return.show{display:block}
.admin-preview-badge{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 10px;background:#e9f4ff;border:1px solid #9cc9f6;color:#0759a7;font-size:12px;font-weight:900}
.access-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.access-select-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.access-exam-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.access-exam-option{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid #dbe3ec;border-radius:10px;background:#f9fbfd;font-size:13px;font-weight:750}
.access-code-output{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}
.access-code-output input{width:100%;border:1.5px solid #cfd8e3;border-radius:9px;padding:11px 12px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.comp-access-toggle{display:block;margin:12px auto 0;border:0;background:transparent;color:#0d5bc2;font-weight:800;font-size:13px;cursor:pointer;text-decoration:underline}
.comp-access-card{margin-top:15px;border:1px solid #cfe0f3;background:#f7fbff;border-radius:13px;padding:13px}
.comp-access-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.comp-access-head strong{display:block;font-size:14px}.comp-access-head small{display:block;color:#6c7888;margin-top:3px}
.comp-access-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}
.comp-access-form input{min-width:0;border:1.5px solid #cbd8e7;border-radius:10px;padding:11px 12px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.comp-access-msg{font-size:12px;font-weight:800;margin-top:8px;min-height:17px}.comp-access-msg.good{color:#13733d}.comp-access-msg.bad{color:#b42318}
.grant-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(190px,1.4fr) auto auto;gap:8px;align-items:center;padding:10px;border-bottom:1px solid #e7edf3;font-size:12px}
.grant-code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-all}
@media(max-width:800px){.access-admin-grid,.access-select-grid{grid-template-columns:1fr}.access-exam-grid{grid-template-columns:1fr}.grant-row{grid-template-columns:1fr}}
@media(max-width:560px){.comp-access-form,.access-code-output{grid-template-columns:1fr}.admin-preview-return{left:10px;right:10px;bottom:10px;width:calc(100% - 20px)}}

/* V19.10 — Discount / Promo Codes */
.promo-box{margin:14px 0 4px;padding:13px;border:1px solid #d7e1ee;border-radius:12px;background:#f8fbff}
.promo-box-title{font-size:13px;font-weight:900;color:#26384d;margin-bottom:8px}
.promo-entry{display:grid;grid-template-columns:1fr auto;gap:8px}.promo-entry input{width:100%;min-width:0;border:1.5px solid #c9d6e5;border-radius:9px;padding:11px 12px;text-transform:uppercase;font-weight:850;letter-spacing:.04em}.promo-entry button{white-space:nowrap}
.promo-message{font-size:12px;font-weight:800;min-height:18px;margin-top:7px}.promo-message.good{color:#13733d}.promo-message.bad{color:#b42318}
.promo-applied{display:none;margin-top:8px;padding:9px 10px;border:1px solid #a8d5b5;background:#edf9f0;border-radius:9px;color:#146c36;font-size:12px;font-weight:850}.promo-applied.show{display:flex;justify-content:space-between;gap:8px;align-items:center}.promo-remove{border:0;background:transparent;color:#a0271c;font-weight:900;cursor:pointer}
.discount-admin-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}.discount-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.discount-form-grid .full{grid-column:1/-1}.discount-exam-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:7px}.discount-exam-option{display:flex;gap:8px;align-items:center;border:1px solid #dce4ed;background:#fafcfe;border-radius:9px;padding:8px 9px;font-size:12px;font-weight:750}
.discount-preview{margin-top:12px;padding:13px;border:1px solid #cce0f5;background:#f5faff;border-radius:11px;font-size:13px}.discount-preview strong{font-size:20px;color:#0b8a40}
.discount-row{display:grid;grid-template-columns:minmax(90px,.7fr) minmax(150px,1.1fr) minmax(120px,1fr) auto auto;gap:8px;align-items:center;padding:10px;border-bottom:1px solid #e5ebf1;font-size:12px}.discount-code-pill{display:inline-block;border:1px solid #8eb8e3;background:#eef6ff;color:#075ca8;border-radius:7px;padding:5px 8px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:900;letter-spacing:.04em}.discount-status-active{color:#13733d;font-weight:900}.discount-status-off{color:#a0271c;font-weight:900}
@media(max-width:850px){.discount-admin-grid,.discount-form-grid{grid-template-columns:1fr}.discount-form-grid .full{grid-column:auto}.discount-exam-grid{grid-template-columns:1fr}.discount-row{grid-template-columns:1fr}}@media(max-width:560px){.promo-entry{grid-template-columns:1fr}}

/* V19.11 — Production QA / Buyer Readiness */
.prodqa-toolbar{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-end;
  flex-wrap:wrap;margin-bottom:14px
}
.prodqa-toolbar-left{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.prodqa-toolbar .admin-form-field{min-width:220px;margin:0}
.prodqa-kpis{
  display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin:14px 0
}
.prodqa-kpi{
  border:1px solid #dce5ef;background:#fbfdff;border-radius:12px;padding:11px
}
.prodqa-kpi span{display:block;font-size:10px;color:#718094;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.prodqa-kpi strong{display:block;font-size:23px;margin-top:4px;color:#15283e}
.prodqa-kpi.good{border-color:#a8d5b5;background:#f3fbf5}
.prodqa-kpi.bad{border-color:#f0b5b0;background:#fff7f6}
.prodqa-kpi.warn{border-color:#ebd291;background:#fffaf0}
.prodqa-overall{
  border-radius:13px;padding:14px;margin:12px 0;font-weight:900;
  border:1px solid #d7e0ea;background:#f8fafc
}
.prodqa-overall.ready{border-color:#8ed09e;background:#effaf2;color:#116632}
.prodqa-overall.fail{border-color:#eca8a3;background:#fff3f2;color:#a32920}
.prodqa-table-wrap{overflow:auto;border:1px solid #dce4ed;border-radius:12px}
.prodqa-table{width:100%;border-collapse:collapse;min-width:1250px}
.prodqa-table th,.prodqa-table td{
  border-bottom:1px solid #e7edf3;padding:9px 8px;text-align:left;font-size:11px;vertical-align:top
}
.prodqa-table th{background:#f4f7fa;color:#5f6d7d;font-size:10px;text-transform:uppercase;letter-spacing:.035em}
.prodqa-table tr:last-child td{border-bottom:0}
.prodqa-ready,.prodqa-notready{
  display:inline-block;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:950;white-space:nowrap
}
.prodqa-ready{background:#e8f7ed;color:#126a34;border:1px solid #a9d9b6}
.prodqa-notready{background:#fff0ef;color:#a32920;border:1px solid #efb5b0}
.prodqa-issue-list{
  margin-top:13px;border:1px solid #dce5ee;border-radius:12px;overflow:hidden
}
.prodqa-issue{
  padding:10px 12px;border-bottom:1px solid #e7edf3;font-size:12px;background:#fff
}
.prodqa-issue:last-child{border-bottom:0}
.prodqa-issue b{display:block;margin-bottom:3px}
.prodqa-issue.good{background:#f5fbf6;color:#1c6235}
.prodqa-issue.bad{background:#fff7f6;color:#84271f}
.prodqa-id-list{
  margin-top:5px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:10px;word-break:break-word;color:#59697a
}
.prodqa-runtime-note{
  border:1px solid #afd0ee;background:#f2f8ff;border-radius:11px;padding:11px 12px;
  color:#24567f;font-size:12px;margin-bottom:12px
}
@media(max-width:1000px){
  .prodqa-kpis{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:560px){
  .prodqa-kpis{grid-template-columns:1fr 1fr}
  .prodqa-toolbar-left{width:100%}
  .prodqa-toolbar .admin-form-field{width:100%;min-width:0}
}