:root {
  --red: #e32636;
  --red-dark: #bb1624;
  --ink: #12151a;
  --text: #12151a;
  --muted: #68707c;
  --line: #e7e9ed;
  --panel: #ffffff;
  --bg: #f4f5f7;
  --good: #138a52;
  --bad: #c62f3c;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
button { font: inherit; }
button:focus-visible { outline: 3px solid rgba(227,38,54,.28); outline-offset: 3px; }
.app-shell { min-height: 100vh; max-width: 760px; margin: 0 auto; background: #fff; box-shadow: 0 0 50px rgba(0,0,0,.08); display:flex; flex-direction:column; }
.topbar { height: 74px; padding: 0 20px; border-bottom: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); z-index:5; }
.brand { border:0; background:none; padding:0; text-align:left; font-weight:900; letter-spacing:-.03em; font-size:23px; cursor:pointer; color:var(--ink); }
.brand-two { color:var(--red); }
.brand small { display:block; font-size:9px; letter-spacing:.24em; color:var(--muted); margin-top:-2px; }
.ghost-button { border:1px solid var(--line); background:#fff; border-radius:999px; padding:8px 12px; cursor:pointer; color:var(--muted); font-size:13px; }
main { flex:1; }
.hero { padding: 44px 24px 24px; background:linear-gradient(180deg,#fff 0%,#fafafa 100%); }
.eyebrow { color:var(--red); font-size:12px; font-weight:800; letter-spacing:.16em; }
h1 { font-size:clamp(36px,9vw,58px); line-height:.98; letter-spacing:-.055em; margin:12px 0 18px; }
.hero p { margin:0; color:var(--muted); line-height:1.55; font-size:17px; max-width:610px; }
.progress-card { margin-top:28px; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff; }
.progress-card div { padding:18px; border-top:1px solid var(--line); }
.progress-card div:nth-child(-n+2) { border-top:0; }
.progress-card div:nth-child(odd) { border-right:1px solid var(--line); }
.progress-card strong { display:block; font-size:25px; }
.progress-card span { color:var(--muted); font-size:12px; }
.mode-grid { padding:20px 20px 40px; display:grid; gap:12px; }
.mode-card { width:100%; border:1px solid var(--line); background:#fff; border-radius:20px; padding:18px; display:grid; grid-template-columns:54px 1fr auto; gap:14px; align-items:center; cursor:pointer; text-align:left; transition:.18s ease; color:var(--ink); }
.mode-card:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.07); }
.mode-icon { width:54px; height:54px; display:grid; place-items:center; border-radius:16px; background:#f3f4f6; font-weight:900; font-size:18px; }
.mode-copy strong { display:block; font-size:17px; margin-bottom:4px; }
.mode-copy small { color:var(--muted); line-height:1.4; font-size:13px; }
.arrow { color:var(--muted); font-size:22px; }
.challenge-card { background:var(--ink); color:#fff; border-color:var(--ink); }
.challenge-card .mode-icon { background:var(--red); color:#fff; }
.challenge-card .mode-copy small, .challenge-card .arrow { color:#bbc0c8; }
.screen { padding:24px 20px 38px; }
.screen-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.screen-head h2 { margin:0; font-size:25px; letter-spacing:-.03em; }
.back-button { border:0; background:#f2f3f5; border-radius:12px; padding:10px 12px; cursor:pointer; }
.pill { background:#f3f4f6; border-radius:999px; padding:8px 12px; font-size:12px; color:var(--muted); font-weight:700; }
.flash-wrap { perspective:1100px; min-height:400px; }
.flash-card { position:relative; width:100%; min-height:400px; cursor:pointer; outline:none; }
.flash-card:focus-visible { border-radius:28px; box-shadow:0 0 0 4px rgba(196,32,45,.16); }
.flash-face { position:absolute; inset:0; backface-visibility:hidden; border:1px solid var(--line); border-radius:28px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:28px; background:#fff; box-shadow:0 20px 45px rgba(0,0,0,.07); text-align:center; opacity:0; transform:rotateY(180deg); transition:transform .42s cubic-bezier(.2,.75,.2,1),opacity .18s ease; pointer-events:none; }
.flash-card.stage-sign .flash-front { opacity:1; transform:rotateY(0deg); }
.flash-card.stage-name .flash-front,.flash-card.stage-detail .flash-front { opacity:0; transform:rotateY(-180deg); }
.flash-card.stage-name .flash-name-face { opacity:1; transform:rotateY(0deg); }
.flash-card.stage-detail .flash-name-face { opacity:0; transform:rotateY(-180deg); }
.flash-card.stage-detail .flash-detail-face { opacity:1; transform:rotateY(0deg); }
.flash-name-face { background:var(--ink); color:#fff; }
.flash-name-face .tap-hint { color:#aeb4bc; }
.flash-name-face h2 { margin:2px 0 0; max-width:88%; font-size:42px; line-height:1.12; letter-spacing:-.035em; }
.flash-name-sign { min-height:190px; height:190px; margin-bottom:10px; }
.flash-name-sign .official-sign { max-width:180px; max-height:180px; }
.flash-side-count { position:absolute; top:18px; left:20px; border-radius:999px; padding:6px 9px; background:#f1f2f4; color:#737a83; font-size:9px; font-weight:900; letter-spacing:.04em; }
.flash-name-face .flash-side-count { background:rgba(255,255,255,.10); color:#d7dbe0; }
.flash-detail-face { align-items:stretch; text-align:left; }
.flash-detail-heading { display:flex; align-items:center; gap:16px; margin-top:18px; }
.flash-detail-sign { flex:0 0 92px; width:92px; height:92px; display:grid; place-items:center; border-radius:16px; background:#f7f8f9; padding:8px; box-sizing:border-box; }
.flash-detail-sign .official-sign { max-width:76px; max-height:76px; object-fit:contain; }
.flash-detail-heading h2 { margin:4px 0 0; font-size:28px; letter-spacing:-.035em; }
.flash-detail-face > p { margin:22px 0 0; padding:18px 19px; border-radius:17px; background:#f7f8f9; color:#343a41; line-height:1.6; font-size:15px; }
.flash-detail-face .tap-hint { text-align:center; }
.tap-hint { margin-top:20px; color:var(--muted); font-size:12px; }
.controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.flash-nav-controls { grid-template-columns:1fr 1fr 1fr; }
.primary, .secondary { border:0; border-radius:15px; padding:14px 16px; font-weight:800; cursor:pointer; }
.primary { background:var(--red); color:#fff; }
.secondary { background:#eff1f3; color:var(--ink); }
.sign-stage { width:100%; min-height:230px; height:230px; display:grid; place-items:center; margin:6px 0 20px; overflow:visible; padding:10px; box-sizing:border-box; }
.sign { width:150px; height:150px; position:relative; display:grid; place-items:center; font-weight:900; font-family:Arial,sans-serif; }
.sign.circle { border:16px solid var(--red); border-radius:50%; background:#fff; font-size:48px; }
.sign.blue-circle { border-radius:50%; background:#1974bb; color:#fff; font-size:60px; }
.sign.triangle { width:0; height:0; border-left:84px solid transparent; border-right:84px solid transparent; border-bottom:148px solid var(--red); background:none; }
.sign.triangle::after { content:""; position:absolute; left:-65px; top:29px; border-left:65px solid transparent; border-right:65px solid transparent; border-bottom:113px solid #fff; }
.sign.triangle .symbol { position:absolute; z-index:2; top:62px; left:-39px; width:78px; text-align:center; font-size:35px; }
.sign.inverted { transform:rotate(180deg); }
.sign.inverted .symbol { transform:rotate(180deg); font-size:16px; top:78px; }
.sign.octagon { width:150px; height:150px; background:var(--red); color:#fff; clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); font-size:31px; border:6px solid #fff; outline:4px solid var(--red); }
.sign.no-entry { width:150px; height:150px; border-radius:50%; background:var(--red); }
.sign.no-entry::after { content:""; width:100px; height:27px; background:#fff; position:absolute; border-radius:4px; }
.sign.nsl { border:10px solid #20242a; border-radius:50%; background:#fff; overflow:hidden; }
.sign.nsl::after { content:""; position:absolute; width:190px; height:13px; background:#20242a; transform:rotate(-48deg); }
.sign.roundabout { border-radius:50%; background:#1974bb; color:#fff; font-size:48px; }
.sign.keep-left { border-radius:50%; background:#1974bb; color:#fff; font-size:70px; }
.sign.crossroads .symbol { font-size:49px; top:55px; }
.sign.slippery .symbol { font-size:28px; top:67px; }
.quiz-card { border:1px solid var(--line); border-radius:25px; padding:20px; background:#fff; }
.question-label { text-align:center; font-weight:850; font-size:20px; margin:0 0 14px; }
.options { display:grid; gap:10px; }
.option { border:1px solid var(--line); background:#fff; border-radius:14px; padding:14px 15px; display:grid; grid-template-columns:34px 1fr; align-items:center; gap:10px; cursor:pointer; text-align:left; transition:.12s; }
.option:hover { border-color:#c9cdd3; background:#fafafa; }
.option-letter { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:#f1f2f4; font-weight:900; font-size:12px; }
.option.correct { border-color:#b8e0ca; background:#eef9f3; }
.option.wrong { border-color:#efc1c5; background:#fff0f1; }
.feedback { margin-top:14px; border-radius:14px; padding:14px; line-height:1.5; font-size:14px; }
.feedback.good { background:#eef9f3; color:#0e7142; }
.feedback.bad { background:#fff0f1; color:#a6212d; }
.timer-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.timer { font-size:18px; font-weight:900; font-variant-numeric:tabular-nums; }
.timer-track { height:7px; background:#eceef1; border-radius:999px; overflow:hidden; margin-bottom:16px; }
.timer-fill { height:100%; width:100%; background:var(--red); transform-origin:left; }
.challenge-status { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.status-chip { background:#f3f4f6; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:800; }
.overlay { position:fixed; inset:0; background:rgba(18,21,26,.82); backdrop-filter:blur(8px); z-index:20; display:grid; place-items:center; padding:22px; }
.modal { width:min(460px,100%); background:#fff; border-radius:26px; padding:28px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.modal .big { font-size:58px; font-weight:950; letter-spacing:-.06em; margin:8px 0; }
.modal h3 { font-size:29px; margin:6px 0 8px; }
.modal p { color:var(--muted); line-height:1.5; }
.modal-actions { display:grid; gap:10px; margin-top:22px; }
footer { border-top:1px solid var(--line); padding:18px 20px 24px; color:#8a9099; font-size:10px; line-height:1.45; }
footer p { margin:3px 0; }
@media (min-width:700px) {
  .screen, .mode-grid { padding-left:32px; padding-right:32px; }
  .hero { padding-left:38px; padding-right:38px; }
  .flash-face { min-height:470px; }
  .flash-card,.flash-wrap { min-height:470px; }
}
.official-sign { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.quiz-card .sign-stage .official-sign { max-width:205px; max-height:205px; }
.flash-front .sign-stage .official-sign { max-width:220px; max-height:220px; }
.category-scroll { display:flex; gap:8px; overflow-x:auto; padding:0 0 14px; scrollbar-width:none; }
.category-scroll::-webkit-scrollbar { display:none; }
.category-chip { flex:0 0 auto; border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:999px; padding:8px 12px; font-size:12px; font-weight:800; cursor:pointer; }
.category-chip.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.library-note { margin-top:12px; font-size:12px; color:var(--muted); }
.library-note strong { color:var(--ink); }

.challenge-intro h2 { margin: 8px 0 8px; }
.challenge-intro > p { margin: 0 0 18px; color: var(--muted); line-height: 1.55; }
.time-choice { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px; }
.time-option { border:2px solid #e2e5e9; background:#fff; border-radius:16px; padding:14px 8px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--ink); }
.time-option strong { font-size:24px; line-height:1; }
.time-option span { font-size:12px; color:var(--muted); font-weight:700; }
.time-option.active { border-color:var(--red); box-shadow:0 0 0 2px rgba(211,25,38,.08); }


.mark-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.mark-button { border:1px solid var(--line); border-radius:15px; padding:14px 16px; font-weight:800; cursor:pointer; background:#fff; color:var(--ink); }
.mark-button.known.active { border-color:#b8e0ca; background:#eef9f3; color:#0e7142; }
.mark-button.learning.active { border-color:#f3d596; background:#fff7e8; color:#926200; }
.mark-button:hover { background:#fafafa; }
.status-line { margin-top:12px; text-align:center; font-size:13px; color:var(--muted); }
.empty-card { border:1px dashed #d7dbe0; border-radius:24px; background:#fff; padding:28px 22px; text-align:center; }
.empty-card h3 { margin:6px 0 8px; font-size:26px; letter-spacing:-.03em; }
.empty-card p { color:var(--muted); line-height:1.55; }
.filter-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
@media (max-width:560px) {
  .progress-card strong { font-size:22px; }
}

/* V8 progress dashboard */
.dashboard-card { margin-top:28px; border:1px solid var(--line); border-radius:24px; padding:20px; background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.045); }
.dashboard-top { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; }
.dashboard-kicker { font-size:10px; font-weight:900; letter-spacing:.16em; color:var(--muted); margin-bottom:4px; }
.mastery-row { display:flex; align-items:baseline; gap:7px; }
.mastery-row strong { font-size:42px; letter-spacing:-.055em; line-height:1; }
.mastery-row span { color:var(--muted); font-size:13px; font-weight:700; }
.dashboard-total { text-align:right; }
.dashboard-total strong { display:block; font-size:17px; }
.dashboard-total span { display:block; color:var(--muted); font-size:11px; margin-top:2px; }
.mastery-track { height:11px; border-radius:999px; background:#eceef1; overflow:hidden; margin:17px 0 10px; }
.mastery-fill { width:0%; height:100%; border-radius:inherit; background:var(--red); transition:width .45s ease; }
.progress-message { color:var(--muted); font-size:13px; line-height:1.45; margin:0 0 17px; }
.progress-stats { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:17px; overflow:hidden; }
.progress-stat { padding:15px 10px; text-align:center; background:#fff; }
.progress-stat + .progress-stat { border-left:1px solid var(--line); }
.progress-stat strong { display:block; font-size:24px; line-height:1.1; margin-bottom:3px; }
.progress-stat span { color:var(--muted); font-size:10px; font-weight:800; }
.progress-stat.mastered strong { color:#0e7142; }
.progress-stat.learning strong { color:#926200; }
.progress-stat.unstudied strong { color:#737984; }
.dashboard-meta { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.dashboard-meta div { background:#f6f7f8; border-radius:14px; padding:12px 14px; }
.dashboard-meta strong { display:block; font-size:17px; }
.dashboard-meta span { color:var(--muted); font-size:10px; font-weight:700; }
.dashboard-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.dashboard-actions button { min-height:48px; }
@media (max-width:480px) {
  .dashboard-card { padding:17px; }
  .mastery-row strong { font-size:36px; }
  .dashboard-total strong { font-size:15px; }
  .progress-stat { padding:13px 5px; }
  .progress-stat strong { font-size:21px; }
  .progress-stat span { font-size:9px; }
  .dashboard-actions { grid-template-columns:1fr; }
}

@media (max-width:520px) {
  .flash-nav-controls { grid-template-columns:1fr 1fr; }
  .flash-nav-controls #shuffleCards { grid-column:1 / -1; order:3; }
  .sign-stage { height:220px; min-height:220px; padding:14px; }
}


/* V17 premium revision experience */
.focus-section,.category-section { padding:28px 24px 0; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:14px; }
.section-heading h2 { margin:5px 0 0; font-size:26px; letter-spacing:-.035em; }
.text-button { border:0; background:none; padding:8px 0; color:var(--red); font-weight:850; cursor:pointer; white-space:nowrap; }
.focus-card { border:1px solid #f0c9cd; background:linear-gradient(135deg,#fff7f8,#fff); border-radius:22px; padding:18px; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; }
.focus-card div { min-width:95px; }
.focus-card strong { display:block; font-size:34px; line-height:1; letter-spacing:-.05em; color:var(--red); }
.focus-card span { display:block; margin-top:4px; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }
.focus-card p { margin:0; font-size:13px; line-height:1.5; color:var(--muted); }
.category-progress-list { display:grid; gap:9px; }
.category-progress-card { position:relative; overflow:hidden; width:100%; border:1px solid var(--line); background:#fff; border-radius:17px; padding:15px 16px 18px; cursor:pointer; display:grid; grid-template-columns:1fr auto; gap:12px; text-align:left; }
.category-progress-card:hover { border-color:#cfd3d9; background:#fcfcfd; }
.category-progress-copy strong { display:block; font-size:14px; }
.category-progress-copy span { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.category-progress-right { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:12px; font-weight:850; }
.category-progress-right b { color:var(--ink); font-size:16px; }
.category-mini-track { position:absolute; left:16px; right:16px; bottom:8px; height:4px; background:#eef0f2; border-radius:999px; overflow:hidden; }
.category-mini-track i { display:block; height:100%; background:var(--red); border-radius:inherit; }
.missed-summary { margin-top:16px; padding:14px 15px; border-radius:15px; background:#fff3f4; border:1px solid #f3ced1; }
.missed-summary strong,.missed-summary span { display:block; }
.missed-summary strong { color:#a6212d; }
.missed-summary span { margin-top:3px; color:var(--muted); font-size:12px; }
.full-button { width:100%; margin-top:10px; }
@media (min-width:700px){ .focus-section,.category-section { padding-left:32px; padding-right:32px; } }
@media (max-width:520px){ .section-heading { align-items:flex-start; } .section-heading h2 { font-size:23px; } .text-button { font-size:12px; } .focus-card { grid-template-columns:1fr; gap:8px; } }

/* V18 mobile-first customer storefront / revision UX */
html { -webkit-text-size-adjust:100%; }
body { overscroll-behavior-y:none; }
button { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.hero-intro { max-width:560px; }
.mode-section { padding:24px 24px 0; }
.mode-section .mode-grid { padding:0; }
.compact-heading { margin-bottom:12px; }
.mode-badge { justify-self:end; min-width:58px; padding:8px 10px; border-radius:999px; background:#f5f6f7; color:var(--muted); text-align:center; font-size:10px; font-weight:800; }
.mode-badge b { display:block; color:var(--red); font-size:16px; line-height:1; }
.focus-mode { border-color:#efc7cb; background:linear-gradient(135deg,#fff8f8,#fff); }
.focus-mode .mode-icon { background:#fff0f1; color:var(--red); }
.category-section { padding-bottom:36px; }
.primary,.secondary,.mark-button,.back-button,.ghost-button,.category-chip,.time-option,.option,.mode-card,.category-progress-card { min-height:46px; }

@media (max-width:600px) {
  .app-shell { width:100%; max-width:none; min-height:100dvh; box-shadow:none; }
  .topbar { height:62px; padding:0 16px; }
  .brand { font-size:21px; }
  .brand small { font-size:8px; }
  .ghost-button { font-size:11px; padding:7px 10px; min-height:36px; }
  .hero { padding:27px 16px 14px; }
  h1 { font-size:39px; line-height:1.01; margin:8px 0 11px; }
  .hero p.hero-intro { font-size:14px; line-height:1.45; }
  .dashboard-card { margin-top:20px; padding:15px; border-radius:20px; }
  .dashboard-top { align-items:center; gap:10px; }
  .dashboard-kicker { font-size:9px; }
  .mastery-row strong { font-size:34px; }
  .mastery-row span { font-size:11px; }
  .dashboard-total strong { font-size:14px; }
  .dashboard-total span { font-size:9px; }
  .mastery-track { margin:12px 0 8px; height:9px; }
  .progress-message { font-size:11px; margin-bottom:12px; }
  .progress-stats { border-radius:14px; }
  .progress-stat { padding:10px 3px; }
  .progress-stat strong { font-size:19px; }
  .progress-stat span { font-size:8px; }
  .dashboard-meta { display:none; }
  .dashboard-actions { grid-template-columns:1.4fr 1fr; gap:8px; margin-top:10px; }
  .dashboard-actions button { min-height:48px; padding:11px 8px; font-size:13px; }
  .library-note { margin-top:9px; font-size:10px; }
  .mode-section,.category-section { padding-left:16px; padding-right:16px; }
  .mode-section { padding-top:18px; }
  .section-heading { margin-bottom:10px; }
  .section-heading h2 { font-size:21px; margin-top:3px; }
  .eyebrow { font-size:10px; }
  .mode-grid { gap:9px; padding-bottom:0; }
  .mode-card { border-radius:17px; padding:13px; grid-template-columns:44px 1fr auto; gap:11px; }
  .mode-icon { width:44px; height:44px; border-radius:13px; font-size:15px; }
  .mode-copy strong { font-size:15px; margin-bottom:2px; }
  .mode-copy small { font-size:11px; line-height:1.35; }
  .mode-badge { min-width:52px; padding:7px 7px; }
  .category-section { padding-top:23px; padding-bottom:26px; }
  .category-progress-list { gap:7px; }
  .category-progress-card { border-radius:14px; padding:12px 13px 15px; }
  .category-progress-copy strong { font-size:13px; }
  .category-progress-copy span { font-size:10px; }
  .category-progress-right b { font-size:14px; }
  .category-mini-track { left:13px; right:13px; bottom:6px; }
  footer { padding:14px 16px 20px; font-size:8px; }

  /* Revision screens: keep the important controls within thumb reach */
  .screen { padding:14px 14px 24px; }
  .screen-head { margin-bottom:12px; gap:10px; }
  .back-button { min-height:40px; padding:8px 10px; border-radius:11px; font-size:12px; }
  .pill { padding:7px 9px; font-size:10px; }
  .category-scroll { margin:0 -14px; padding:0 14px 10px; }
  .category-chip { min-height:38px; padding:7px 10px; font-size:10px; }
  .flash-wrap,.flash-card { min-height:315px; }
  .flash-face { min-height:315px; border-radius:22px; padding:17px; }
  .flash-face h2 { font-size:24px; margin:8px 0; }
  .flash-detail-face > p { font-size:13px; margin-top:14px; padding:14px 15px; }
  .sign-stage { height:190px; min-height:190px; margin:0 0 8px; padding:8px; }
  .flash-front .sign-stage .official-sign { max-width:185px; max-height:185px; }
  .quiz-card .sign-stage .official-sign { max-width:175px; max-height:175px; }
  .tap-hint { margin-top:8px; font-size:10px; }
  .status-line { margin-top:8px; font-size:11px; }
  .mark-grid { margin-top:9px; gap:8px; }
  .mark-button { padding:11px 8px; font-size:12px; border-radius:13px; }
  .controls { gap:8px; margin-top:9px; }
  .flash-nav-controls { grid-template-columns:1fr 1fr; }
  .flash-nav-controls #shuffleCards { grid-column:auto; order:0; }
  .flash-nav-controls #prevCard { display:none; }
  .primary,.secondary { border-radius:13px; padding:12px 10px; font-size:13px; }
  .quiz-card { border-radius:20px; padding:15px; }
  .question-label { margin-top:0; font-size:14px; }
  .options { gap:8px; }
  .option { border-radius:13px; padding:11px 12px; grid-template-columns:31px 1fr; gap:9px; font-size:13px; }
  .option-letter { width:27px; height:27px; }
  .feedback { margin-top:10px; padding:12px; font-size:12px; }
  .challenge-status { margin-bottom:9px; gap:6px; }
  .status-chip { padding:6px 8px; font-size:10px; }
  .timer-row { margin-bottom:6px; font-size:12px; }
  .timer { font-size:16px; }
  .timer-track { margin-bottom:10px; }
  .challenge-intro h2 { font-size:24px; }
  .challenge-intro > p { font-size:13px; margin-bottom:14px; }
  .time-option { border-radius:14px; padding:12px 5px; }
  .time-option strong { font-size:21px; }
  .modal { border-radius:22px; padding:22px 18px; }
}

@media (max-width:370px) {
  h1 { font-size:34px; }
  .dashboard-actions { grid-template-columns:1fr; }
  .mode-copy small { display:none; }
  .flash-wrap,.flash-card,.flash-face { min-height:285px; }
  .sign-stage { height:165px; min-height:165px; }
}

/* V19 screenshot-led mobile polish */
.menu-button { width:44px; height:44px; border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); font-weight:900; font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.menu-popover { position:fixed; top:68px; left:50%; transform:translateX(-50%); width:min(calc(100% - 28px),732px); z-index:20; background:#fff; border:1px solid var(--line); border-radius:18px; padding:8px; box-shadow:0 18px 46px rgba(0,0,0,.16); }
.menu-popover[hidden] { display:none; }
.menu-popover button { width:100%; min-height:46px; border:0; border-radius:12px; background:#fff; color:var(--ink); text-align:left; padding:11px 13px; font-weight:750; cursor:pointer; }
.menu-popover button:hover { background:#f5f6f7; }
.menu-divider { height:1px; background:var(--line); margin:5px 4px; }
.menu-popover .menu-danger { color:var(--red-dark); }
.danger-button { border:0; border-radius:15px; padding:14px 16px; min-height:46px; background:var(--red-dark); color:#fff; font-weight:850; cursor:pointer; }

@media (max-width:600px) {
  /* Put more of the actual learning product above the fold. */
  .hero { padding-top:21px; padding-bottom:10px; }
  h1 { font-size:35px; line-height:1; margin:7px 0 9px; }
  .hero p.hero-intro { font-size:13px; line-height:1.4; }
  .dashboard-card { margin-top:15px; padding:13px; }
  .mastery-row strong { font-size:31px; }
  .mastery-track { margin:9px 0 7px; height:8px; }
  .progress-message { font-size:10.5px; line-height:1.35; margin-bottom:9px; }
  .progress-stat { padding:8px 3px; }
  .progress-stat strong { font-size:18px; }
  .dashboard-actions { margin-top:8px; }
  .dashboard-actions button { min-height:44px; }
  .library-note { margin-top:7px; }
  .mode-section { padding-top:14px; }
  .compact-heading { margin-bottom:8px; }
  .mode-card { padding-top:11px; padding-bottom:11px; }

  /* Deliberately make topic chips a swipeable strip, with an edge hint. */
  .category-scroll { position:relative; display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; gap:8px; margin:0 -14px 8px; padding:0 30px 8px 14px; }
  .category-scroll::after { content:""; flex:0 0 18px; }
  .category-chip { scroll-snap-align:start; white-space:nowrap; font-size:11px; padding:8px 12px; }
  .screen:has(.category-scroll) { position:relative; }
  .screen:has(.category-scroll)::after { content:""; position:absolute; pointer-events:none; right:0; top:60px; width:30px; height:52px; background:linear-gradient(90deg,rgba(255,255,255,0),#fff 72%); z-index:2; }

  /* Flash cards: less empty space, controls remain in thumb reach. */
  .flash-wrap,.flash-card { min-height:284px; }
  .flash-face { min-height:284px; padding:14px; border-radius:20px; }
  .sign-stage { height:165px; min-height:165px; margin:0 0 5px; padding:5px; }
  .flash-front .sign-stage .official-sign { max-width:165px; max-height:165px; }
  .flash-face h2 { font-size:22px; }
  .tap-hint { margin-top:5px; }
  .status-line { margin-top:6px; }
  .mark-grid { margin-top:7px; }
  .mark-button { min-height:45px; }
  .controls { margin-top:8px; }

  /* Challenge: keep timer secondary to the question and tighten bottom whitespace. */
  .timer { font-size:14px; font-variant-numeric:tabular-nums; }
  .timer-row strong { font-size:13px; }
  .timer-track { height:6px; margin-bottom:8px; }
  .quiz-card { padding:13px; }
  .quiz-card .sign-stage { height:180px; min-height:180px; margin-bottom:5px; }
  .quiz-card .sign-stage .official-sign { max-width:165px; max-height:165px; }
  .options { gap:7px; }
  .option { min-height:49px; padding:9px 10px; font-size:12.5px; line-height:1.28; }
  .option-letter { flex:none; }
  .screen:has(.timer-row) { padding-bottom:12px; }
  .screen:has(.timer-row) + footer { margin-top:0; }

  .menu-popover { top:58px; width:calc(100% - 24px); border-radius:16px; }
  .modal-actions { grid-template-columns:1fr; }
}

@media (max-width:370px) {
  h1 { font-size:32px; }
  .flash-wrap,.flash-card,.flash-face { min-height:270px; }
  .sign-stage { height:152px; min-height:152px; }
  .flash-front .sign-stage .official-sign { max-width:152px; max-height:152px; }
}


/* V20 final mobile polish */
@media (max-width:600px) {
  .library-note { display:none; }
  .category-swipe-hint { margin:-4px 0 8px; color:var(--muted); font-size:9.5px; font-weight:700; text-align:right; padding-right:2px; }
  .status-line { font-weight:650; }

  /* Previous and Next stay side-by-side; Shuffle is secondary underneath. */
  .flash-nav-controls { grid-template-columns:1fr 1fr !important; }
  .flash-nav-controls #prevCard { display:block !important; grid-column:1; grid-row:1; }
  .flash-nav-controls #nextCard { grid-column:2; grid-row:1; }
  .flash-nav-controls #shuffleCards { grid-column:1 / -1 !important; grid-row:2; order:initial !important; }

  /* Keep quiz feedback/action comfortably above Safari's bottom toolbar. */
  .screen:has(#practiceFeedback) { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
  #practiceFeedback .feedback { line-height:1.4; }
  #practiceFeedback .primary,
  #practiceFeedback .secondary { margin-bottom:4px; }

  /* Neutral choices use the product palette; colour is reserved for feedback states. */
  .option { color:var(--ink); }
  .option-letter { color:var(--ink); }
  .option.correct { color:#0d6b3b; }
  .option.wrong { color:#9e2f35; }
}


/* V22 learner portal foundation */
.portal-auth { min-height:calc(100dvh - 120px); display:grid; place-items:center; padding:36px 22px 50px; background:linear-gradient(180deg,#fafafa 0%,#f5f6f7 100%); }
.auth-card { width:min(100%,460px); border:1px solid var(--line); background:#fff; border-radius:28px; padding:30px; box-shadow:0 22px 60px rgba(0,0,0,.07); }
.portal-logo-mark { width:54px; height:54px; display:grid; place-items:center; border-radius:17px; background:var(--ink); color:#fff; font-weight:950; margin-bottom:22px; letter-spacing:-.05em; }
.portal-logo-mark span { color:var(--red); }
.auth-card h1 { font-size:39px; margin:8px 0 8px; }
.auth-card > p { color:var(--muted); line-height:1.5; margin:0 0 22px; }
.auth-form { display:grid; gap:14px; }
.auth-form label { display:grid; gap:7px; font-size:12px; font-weight:850; color:var(--ink); }
.auth-form input { width:100%; border:1px solid #d8dce1; background:#fff; border-radius:14px; min-height:50px; padding:0 14px; font:inherit; font-size:15px; color:var(--ink); outline:none; }
.auth-form input:focus { border-color:#9aa0a8; box-shadow:0 0 0 3px rgba(0,0,0,.04); }
.auth-submit { width:100%; margin-top:3px; min-height:51px; }
.auth-preview { display:block; margin:13px auto 0; }
.prototype-note { margin-top:20px; border-radius:15px; background:#f5f6f7; padding:13px 14px; display:grid; gap:3px; }
.prototype-note strong { font-size:11px; }
.prototype-note span { color:var(--muted); font-size:10px; line-height:1.45; }
.portal-hero { padding:42px 32px 26px; display:flex; justify-content:space-between; gap:24px; align-items:flex-end; }
.portal-hero h1 { margin:8px 0 8px; font-size:42px; }
.portal-hero p { color:var(--muted); margin:0; line-height:1.5; max-width:560px; }
.portal-account-pill { flex:0 0 auto; border:1px solid var(--line); background:#fff; border-radius:999px; padding:9px 12px; display:flex; gap:8px; align-items:center; font-size:11px; color:var(--muted); font-weight:750; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-dot { width:8px; height:8px; border-radius:50%; background:#25a55f; flex:none; }
.portal-section { padding:18px 32px 24px; }
.portal-discover { padding-bottom:50px; }
.portal-section-head { margin-bottom:14px; }
.portal-section-head h2 { margin:5px 0 0; font-size:28px; letter-spacing:-.035em; }
.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.portal-product { border:1px solid var(--line); border-radius:23px; background:#fff; padding:20px; display:flex; flex-direction:column; min-height:315px; }
.portal-product.owned { border-color:#e9b8bd; box-shadow:0 14px 36px rgba(0,0,0,.04); }
.portal-product.locked { background:#fbfbfc; }
.product-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:20px; }
.product-icon { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:var(--ink); color:#fff; font-weight:950; font-size:16px; }
.product-state { border-radius:999px; padding:7px 9px; font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.owned-state { color:#0e7142; background:#eaf7f0; }
.coming-state { color:#6f747c; background:#eff1f3; }
.portal-product h3 { margin:6px 0 8px; font-size:23px; letter-spacing:-.035em; }
.portal-product > p { margin:0 0 16px; color:var(--muted); font-size:12px; line-height:1.55; }
.product-progress { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:auto; }
.product-progress div { background:#f6f7f8; padding:10px; border-radius:12px; }
.product-progress strong,.product-progress span { display:block; }
.product-progress strong { font-size:17px; }
.product-progress span { margin-top:2px; color:var(--muted); font-size:9px; font-weight:750; }
.product-mini-track { height:5px; border-radius:999px; overflow:hidden; background:#eceef0; margin:10px 0 14px; }
.product-mini-track i { display:block; height:100%; border-radius:inherit; background:var(--red); }
.product-coming-line { margin-top:auto; padding:11px 12px; border-radius:12px; background:#f2f3f5; display:flex; justify-content:space-between; gap:10px; font-size:10px; color:var(--muted); }
.product-coming-line b { color:var(--ink); }
.product-action { width:100%; min-height:48px; }
.locked-action { margin-top:14px; }
.modal-muted { font-size:12px; color:var(--muted); }

/* Clear route back to the learner portal from the road-sign product */
.screen-head::after { content:'Learn2Drive Road Signs'; color:var(--muted); font-size:10px; font-weight:800; margin-left:auto; }

@media (max-width:650px){
  .portal-auth { padding:24px 16px 40px; align-items:start; }
  .auth-card { padding:23px 18px; border-radius:22px; }
  .auth-card h1 { font-size:34px; }
  .portal-hero { padding:28px 16px 18px; display:block; }
  .portal-hero h1 { font-size:35px; }
  .portal-hero p { font-size:13px; }
  .portal-account-pill { margin-top:16px; max-width:100%; width:max-content; }
  .portal-section { padding:15px 16px 20px; }
  .portal-section-head h2 { font-size:23px; }
  .product-grid { grid-template-columns:1fr; gap:11px; }
  .portal-product { min-height:0; padding:17px; border-radius:19px; }
  .product-top { margin-bottom:15px; }
  .portal-product h3 { font-size:21px; }
  .product-progress { margin-top:4px; }
  .portal-discover { padding-bottom:36px; }
}

/* V23 real account authentication */
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:5px; background:#f2f3f5; border-radius:14px; margin:0 0 18px; }
.auth-tab { border:0; background:transparent; min-height:42px; border-radius:10px; font:inherit; font-size:13px; font-weight:850; color:var(--muted); cursor:pointer; }
.auth-tab.active { background:#fff; color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.08); }
.auth-link { margin:0 auto; }
.auth-message { margin-top:15px; border-radius:13px; padding:11px 12px; font-size:12px; line-height:1.5; background:#f4f5f6; color:var(--ink); border:1px solid var(--line); }
.auth-message.error { background:#fff3f4; border-color:#efc2c6; color:#8b1e27; }
.auth-message.success { background:#f0f8f2; border-color:#bfdfc6; color:#1f6331; }
.auth-message.info { background:#f5f6f8; }
.auth-submit[disabled] { opacity:.58; cursor:wait; }
.real-auth-note { margin-top:18px; }
.auth-loading { min-height:calc(100dvh - 120px); display:grid; place-items:center; padding:30px; color:var(--muted); font-weight:750; text-align:center; }
@media (max-width:600px){
  .auth-tabs { margin-bottom:15px; }
  .auth-tab { min-height:44px; }
}

/* v25: Respect auth form visibility */
.auth-form[hidden] { display: none !important; }

/* v28: checkout return / launch polish */
.portal-notice { margin:0 32px 8px; border:1px solid var(--line); border-radius:18px; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:14px; background:#fff; }
.portal-notice > div { min-width:0; }
.portal-notice strong,.portal-notice span { display:block; }
.portal-notice strong { font-size:13px; color:var(--ink); margin-bottom:3px; }
.portal-notice span { font-size:11px; line-height:1.45; color:var(--muted); }
.portal-notice-success { background:#f1f8f3; border-color:#bcdcc4; }
.portal-notice-success strong { color:#1f6331; }
.portal-notice-neutral { background:#f7f8f9; }
.portal-notice-pending { background:#fff8ec; border-color:#ead3a4; }
.portal-notice-pending strong { color:#7a5312; }
.notice-close { border:0; background:transparent; color:var(--muted); font-size:24px; line-height:1; min-width:44px; min-height:44px; border-radius:12px; cursor:pointer; }
.notice-refresh { flex:0 0 auto; min-height:42px; padding:0 14px; }
.notice-refresh[disabled] { opacity:.6; cursor:wait; }
@media (max-width:640px){
  .portal-notice { margin:0 16px 5px; padding:13px 14px; border-radius:15px; align-items:flex-start; }
  .portal-notice span { font-size:11px; }
  .notice-refresh { min-height:40px; padding:0 11px; font-size:11px; }
}


/* v31 admin-only quiz editor */
.admin-menu-button { color:var(--red) !important; font-weight:900 !important; }
.portal-admin-strip { margin:4px 32px 8px; padding:16px 18px; border:1px solid #e8bec2; background:#fff7f8; border-radius:18px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.portal-admin-strip[hidden] { display:none !important; }
.portal-admin-strip > div { display:grid; gap:3px; min-width:0; }
.portal-admin-strip strong { font-size:15px; }
.portal-admin-strip span { font-size:11px; line-height:1.4; color:var(--muted); }
.admin-editor { padding:26px 32px 48px; }
.admin-editor-head { display:flex; justify-content:space-between; gap:20px; align-items:end; margin:20px 0; }
.admin-editor-head h1 { margin:5px 0 6px; font-size:38px; }
.admin-editor-head p { margin:0; color:var(--muted); font-size:13px; }
.admin-review-summary { min-width:120px; text-align:right; display:grid; }
.admin-review-summary strong { font-size:26px; }
.admin-review-summary span,.admin-review-summary small { color:var(--muted); font-size:10px; font-weight:800; }
.admin-toolbar { display:grid; grid-template-columns:180px minmax(220px,1fr) auto; gap:10px; align-items:center; margin-bottom:14px; }
.admin-toolbar select { min-height:46px; border:1px solid var(--line); border-radius:13px; padding:0 12px; background:#fff; font:inherit; font-size:12px; color:var(--ink); }
.admin-position { color:var(--muted); font-size:11px; font-weight:850; }
.admin-editor-grid { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(340px,1.2fr); gap:16px; align-items:start; }
.admin-sign-preview,.admin-answer-form { border:1px solid var(--line); border-radius:22px; background:#fff; padding:20px; }
.admin-sign-preview { text-align:center; display:grid; gap:10px; }
.admin-sign-stage { min-height:280px; display:grid; place-items:center; }
.admin-sign-stage .official-sign { max-width:280px; max-height:250px; }
.admin-sign-preview strong { font-size:19px; }
.admin-sign-preview span { color:var(--muted); font-size:10px; }
.admin-answer-form { display:grid; gap:13px; }
.admin-answer-form label { display:grid; gap:6px; font-size:11px; font-weight:850; }
.admin-answer-form input,.admin-answer-form textarea { width:100%; border:1px solid #d8dce1; border-radius:13px; padding:11px 12px; background:#fff; color:var(--ink); font:inherit; font-size:13px; resize:vertical; }
.admin-answer-form input:focus,.admin-answer-form textarea:focus { outline:none; border-color:#9ba1a8; box-shadow:0 0 0 3px rgba(0,0,0,.04); }
.admin-reviewed-check { grid-template-columns:auto 1fr !important; align-items:center; gap:9px !important; padding:10px 11px; border-radius:12px; background:#f6f7f8; }
.admin-reviewed-check input { width:18px; height:18px; }
.admin-save-status { font-size:10px; color:var(--muted); min-height:16px; }
.admin-save-status.error { color:#9e2f35; }
.admin-form-actions,.admin-navigation { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.admin-navigation { max-width:520px; margin:16px auto 0; }
@media (max-width:700px){
  .portal-admin-strip { margin:4px 16px 7px; padding:14px; align-items:flex-start; flex-direction:column; }
  .portal-admin-strip button { width:100%; }
  .admin-editor { padding:20px 14px 42px; }
  .admin-editor-head { display:block; }
  .admin-editor-head h1 { font-size:31px; }
  .admin-review-summary { text-align:left; margin-top:12px; grid-template-columns:auto auto auto; align-items:end; justify-content:start; gap:7px; }
  .admin-toolbar { grid-template-columns:1fr; }
  .admin-editor-grid { grid-template-columns:1fr; }
  .admin-sign-stage { min-height:210px; }
  .admin-sign-stage .official-sign { max-width:220px; max-height:205px; }
}

/* v32 public Road Sign Mastery landing page */
.topbar-actions { display:flex; align-items:center; gap:9px; }
.topbar-signin { border:1px solid var(--line); background:#fff; min-height:40px; padding:0 15px; border-radius:12px; color:var(--ink); font-weight:850; font-size:12px; cursor:pointer; }
.topbar-signin:hover { background:#f7f7f8; }
.sales-hero { padding:54px 32px 36px; display:grid; grid-template-columns:minmax(0,1.18fr) minmax(230px,.82fr); gap:34px; align-items:center; background:radial-gradient(circle at 90% 10%,#fff0f1 0,transparent 36%),linear-gradient(180deg,#fff 0%,#fbfbfc 100%); }
.sales-badge { display:inline-flex; width:max-content; max-width:100%; padding:8px 10px; border-radius:999px; background:#fff0f1; color:var(--red-dark); font-size:10px; font-weight:950; letter-spacing:.09em; }
.sales-hero h1 { max-width:520px; margin:14px 0 17px; font-size:clamp(42px,7vw,66px); }
.sales-hero h1 span { color:var(--red); }
.sales-lead { margin:0; max-width:550px; color:var(--muted); font-size:16px; line-height:1.6; }
.sales-cta-row { display:grid; gap:9px; margin-top:24px; max-width:420px; }
.sales-main-cta { min-height:54px; font-size:15px; }
.sales-login-cta { min-height:48px; }
.sales-trust-row { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:17px; color:#626a75; font-size:10px; font-weight:750; }
.sales-demo-card { border:1px solid #e8e9ec; border-radius:28px; background:#fff; padding:17px; box-shadow:0 24px 60px rgba(25,28,33,.10); transform:rotate(1.2deg); }
.demo-top { display:flex; justify-content:space-between; gap:12px; align-items:center; color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.08em; }
.demo-top span { color:var(--ink); }
.demo-sign-stage { height:205px; margin:12px 0; border-radius:20px; display:grid; place-items:center; background:#f6f7f8; }
.demo-sign-stage img { width:150px; height:150px; object-fit:contain; }
.demo-answer { border-top:1px solid var(--line); padding:14px 3px 6px; }
.demo-answer small,.demo-answer strong { display:block; }
.demo-answer small { color:var(--muted); font-size:8px; font-weight:900; letter-spacing:.1em; }
.demo-answer strong { margin-top:5px; font-size:18px; }
.demo-progress { margin-top:9px; }
.demo-progress i { display:block; width:68%; height:6px; background:var(--red); border-radius:999px; }
.demo-progress span { display:block; margin-top:7px; color:var(--muted); font-size:9px; }
.sales-proof-strip { margin:0 32px; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; }
.sales-proof-strip div { padding:18px; text-align:center; }
.sales-proof-strip div+div { border-left:1px solid var(--line); }
.sales-proof-strip strong { display:block; font-size:25px; letter-spacing:-.04em; }
.sales-proof-strip span { display:block; margin-top:3px; color:var(--muted); font-size:10px; font-weight:750; }
.sales-section { padding:58px 32px 10px; }
.sales-section-heading { max-width:590px; margin-bottom:23px; }
.sales-section-heading h2 { margin:6px 0 9px; font-size:34px; letter-spacing:-.045em; }
.sales-section-heading > p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }
.sales-feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sales-feature { border:1px solid var(--line); border-radius:20px; padding:19px; background:#fff; }
.feature-icon { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:#f2f3f5; font-weight:950; }
.sales-feature h3 { margin:16px 0 7px; font-size:18px; }
.sales-feature p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.dark-feature { background:var(--ink); color:#fff; border-color:var(--ink); }
.dark-feature .feature-icon { background:var(--red); }
.dark-feature p { color:#bdc2c9; }
.sales-how { padding-top:66px; }
.sales-steps { display:grid; gap:10px; }
.sales-steps article { display:grid; grid-template-columns:48px 1fr; gap:14px; align-items:start; border:1px solid var(--line); border-radius:18px; padding:16px; }
.sales-steps article>span { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:#fff0f1; color:var(--red); font-weight:950; }
.sales-steps strong { display:block; font-size:15px; margin-top:2px; }
.sales-steps p { margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.sales-product-preview { padding-top:66px; }
.sales-included-card { border:1px solid var(--line); border-radius:25px; padding:24px; display:grid; grid-template-columns:1fr 190px; gap:25px; background:linear-gradient(135deg,#fff,#fafafb); }
.included-label { color:var(--red); font-size:10px; font-weight:950; letter-spacing:.12em; }
.included-copy h3 { margin:8px 0 9px; font-size:27px; letter-spacing:-.035em; }
.included-copy p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.included-copy ul { margin:16px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; list-style:none; }
.included-copy li { position:relative; padding-left:17px; font-size:11px; font-weight:750; }
.included-copy li::before { content:'✓'; position:absolute; left:0; color:var(--red); font-weight:950; }
.included-price { border-radius:19px; background:var(--ink); color:#fff; padding:18px; display:flex; flex-direction:column; justify-content:center; }
.included-price small { color:#aeb4bc; font-size:8px; font-weight:900; letter-spacing:.1em; }
.included-price strong { display:block; margin:7px 0 0; font-size:38px; letter-spacing:-.05em; }
.included-price span { color:#bdc2c9; font-size:10px; margin-bottom:17px; }
.included-price button { font-size:11px; padding:12px; }
.sales-faq { padding-top:66px; }
.sales-faq details { border-top:1px solid var(--line); }
.sales-faq details:last-child { border-bottom:1px solid var(--line); }
.sales-faq summary { list-style:none; cursor:pointer; padding:17px 2px; font-size:13px; font-weight:850; display:flex; justify-content:space-between; gap:16px; }
.sales-faq summary::-webkit-details-marker { display:none; }
.sales-faq summary::after { content:'+'; color:var(--red); font-size:18px; }
.sales-faq details[open] summary::after { content:'−'; }
.sales-faq details p { margin:-5px 0 18px; padding-right:30px; color:var(--muted); font-size:11px; line-height:1.55; }
.sales-final-cta { margin:66px 32px 42px; padding:34px 26px; border-radius:27px; background:var(--ink); color:#fff; text-align:center; }
.sales-final-cta h2 { margin:8px auto 10px; max-width:520px; font-size:34px; letter-spacing:-.045em; }
.sales-final-cta p { margin:0 auto 20px; max-width:470px; color:#bdc2c9; font-size:12px; line-height:1.55; }
.sales-final-cta .sales-main-cta { width:min(100%,360px); }
.sales-final-cta .text-button { display:block; margin:8px auto 0; color:#fff; font-size:11px; }
@media (max-width:650px){
  .topbar-signin { min-height:36px; padding:0 12px; }
  .sales-hero { padding:31px 16px 24px; grid-template-columns:1fr; gap:25px; }
  .sales-hero h1 { font-size:43px; margin-top:11px; }
  .sales-lead { font-size:14px; }
  .sales-demo-card { max-width:390px; width:100%; margin:0 auto; transform:none; }
  .demo-sign-stage { height:185px; }
  .sales-proof-strip { margin:0 16px; border-radius:17px; }
  .sales-proof-strip div { padding:14px 7px; }
  .sales-proof-strip strong { font-size:21px; }
  .sales-proof-strip span { font-size:8px; }
  .sales-section { padding:45px 16px 5px; }
  .sales-section-heading h2 { font-size:29px; }
  .sales-feature-grid { grid-template-columns:1fr; }
  .sales-how,.sales-product-preview,.sales-faq { padding-top:52px; }
  .sales-included-card { grid-template-columns:1fr; padding:18px; }
  .included-copy ul { grid-template-columns:1fr; }
  .included-price { text-align:center; }
  .sales-final-cta { margin:54px 16px 28px; padding:29px 18px; }
  .sales-final-cta h2 { font-size:29px; }
}

/* v33: separate public homepage + expanded road-sign content manager */
.button-link { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; }
.brand-link { text-decoration:none; display:block; }
.public-shell main { min-height:60vh; }
.included-price .button-link { font-size:11px; padding:12px; text-align:center; }
.portal-discover[hidden] { display:none !important; }

.admin-manager-toolbar { grid-template-columns:170px minmax(190px,1fr) auto auto; }
.admin-add-sign { white-space:nowrap; min-height:46px; padding:0 15px; }
.admin-manager-grid { grid-template-columns:minmax(250px,.72fr) minmax(380px,1.28fr); }
.admin-manager-forms { display:grid; gap:14px; }
.admin-form-heading { display:flex; justify-content:space-between; gap:12px; align-items:end; padding-bottom:4px; }
.admin-form-heading h2 { margin:4px 0 0; font-size:20px; }
.admin-form-heading > span { font-size:10px; color:var(--muted); font-weight:850; }
.admin-answer-form input[type="file"] { padding:9px; background:#f8f9fa; }
.admin-answer-form input[type="file"]::file-selector-button { border:0; border-radius:9px; background:var(--ink); color:#fff; padding:8px 10px; margin-right:10px; font-weight:800; cursor:pointer; }
.optional-field { color:var(--muted); font-weight:650; }
.admin-preview-status { display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left; }
.content-state { border-radius:999px; padding:5px 8px; background:#edf7ef; color:#2c6737 !important; font-size:9px !important; font-weight:900; }
.content-state.removed { background:#fff0f1; color:#952c35 !important; }
.admin-visibility-button { margin-top:5px; width:100%; }
.admin-help { color:var(--muted) !important; line-height:1.45; font-size:10px !important; }
.admin-help-block { margin:0; border-radius:12px; background:#f6f7f8; padding:10px 11px; }
.admin-add-form { max-width:680px; margin:18px auto 0; }

.setup-label { margin-top:20px; margin-bottom:8px; color:var(--muted); font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.quiz-style-choice { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.quiz-style-option { border:1px solid var(--line); border-radius:15px; background:#fff; padding:13px 11px; text-align:left; cursor:pointer; min-height:76px; }
.quiz-style-option strong,.quiz-style-option span { display:block; }
.quiz-style-option strong { font-size:12px; color:var(--ink); }
.quiz-style-option span { margin-top:4px; color:var(--muted); font-size:9px; line-height:1.35; }
.quiz-style-option.active { border-color:var(--red); box-shadow:0 0 0 2px rgba(202,37,47,.08); background:#fff8f8; }
.meaning-question { min-height:150px; display:grid; place-content:center; text-align:center; gap:8px; margin:5px 0 16px; padding:22px; border-radius:20px; background:#f6f7f8; border:1px solid var(--line); }
.meaning-question small { color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.1em; }
.meaning-question strong { max-width:500px; font-size:23px; line-height:1.25; letter-spacing:-.025em; }
.challenge-meaning { min-height:120px; }
.image-option-grid { grid-template-columns:1fr 1fr; }
.image-option { grid-template-columns:31px 1fr; padding:10px; min-height:150px; }
.image-option-stage { min-height:126px; display:grid; place-items:center; border-radius:12px; background:#f7f8f9; overflow:hidden; }
.image-option-stage img { width:100%; height:120px; object-fit:contain; padding:8px; box-sizing:border-box; }
.image-option.correct .image-option-stage { background:#e9f7ee; }
.image-option.wrong .image-option-stage { background:#fff0f1; }

@media (max-width:700px){
  .admin-manager-toolbar { grid-template-columns:1fr; }
  .admin-manager-grid { grid-template-columns:1fr; }
  .admin-add-sign { width:100%; }
  .quiz-style-choice { grid-template-columns:1fr; }
  .quiz-style-option { min-height:auto; }
  .meaning-question { min-height:120px; padding:17px; }
  .meaning-question strong { font-size:20px; }
  .image-option { min-height:125px; padding:8px; grid-template-columns:27px 1fr; }
  .image-option-stage { min-height:102px; }
  .image-option-stage img { height:98px; padding:5px; }
}

@media (max-width:420px){
  .image-option-grid { gap:7px; }
  .image-option { grid-template-columns:1fr; position:relative; padding:7px; }
  .image-option .option-letter { position:absolute; z-index:2; top:8px; left:8px; box-shadow:0 1px 4px rgba(0,0,0,.10); }
  .image-option-stage { min-height:112px; }
  .image-option-stage img { height:108px; }
}

/* v34: desktop-first admin road-sign manager. Learner-facing screens remain unchanged. */
body:has(.admin-editor) .app-shell { max-width: 1440px; }
body:has(.admin-editor) footer { max-width:none; }
.admin-v34-editor { padding:24px 28px 46px; }
.admin-v34-head { margin:16px 0 18px; align-items:center; }
.admin-v34-head h1 { font-size:34px; margin:4px 0 5px; }
.admin-v34-head p { max-width:720px; }

.admin-v34-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0 0 14px; padding:6px; background:#f5f6f7; border:1px solid var(--line); border-radius:18px; }
.admin-v34-tab { border:1px solid transparent; border-radius:13px; background:transparent; padding:12px 14px; text-align:left; cursor:pointer; color:var(--ink); }
.admin-v34-tab strong,.admin-v34-tab span { display:block; }
.admin-v34-tab strong { font-size:13px; }
.admin-v34-tab span { margin-top:3px; color:var(--muted); font-size:9px; line-height:1.35; }
.admin-v34-tab:hover { background:#fff; }
.admin-v34-tab.active { background:#fff; border-color:#dedfe2; box-shadow:0 2px 8px rgba(21,24,28,.06); }
.admin-v34-tab.active strong { color:var(--red); }

.admin-v34-layout { display:grid; grid-template-columns:310px minmax(0,1fr); gap:14px; align-items:start; }
.admin-v34-sidebar { position:sticky; top:88px; border:1px solid var(--line); border-radius:20px; background:#fff; overflow:hidden; }
.admin-v34-sidebar-head { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:15px 15px 11px; }
.admin-v34-sidebar-head > div { display:grid; gap:2px; }
.admin-v34-sidebar-head .eyebrow { font-size:9px; }
.admin-v34-sidebar-head strong { font-size:17px; }
.admin-v34-add { min-height:38px; padding:0 11px; font-size:10px; white-space:nowrap; }
.admin-v34-search { display:grid; grid-template-columns:1fr auto; gap:7px; padding:0 12px 9px; }
.admin-v34-search input,.admin-v34-filters select { width:100%; min-height:39px; border:1px solid #d8dce1; border-radius:11px; background:#fff; padding:0 10px; color:var(--ink); font:inherit; font-size:10px; box-sizing:border-box; }
.admin-v34-search button { min-height:39px; padding:0 10px; font-size:9px; }
.admin-v34-clear-search { display:block; width:calc(100% - 24px); margin:0 12px 9px; border:0; background:#fff4f5; color:#9a3038; border-radius:9px; padding:8px 9px; text-align:left; font-size:9px; font-weight:800; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-v34-filters { display:grid; grid-template-columns:1fr; gap:7px; padding:0 12px 11px; border-bottom:1px solid var(--line); }
.admin-v34-sign-list { max-height:620px; overflow:auto; padding:7px; scrollbar-width:thin; }
.admin-v34-sign-item { width:100%; display:grid; grid-template-columns:46px minmax(0,1fr) 8px; gap:9px; align-items:center; border:1px solid transparent; border-radius:12px; background:#fff; padding:7px; color:var(--ink); text-align:left; cursor:pointer; }
.admin-v34-sign-item:hover { background:#f7f8f9; }
.admin-v34-sign-item.active { background:#fff5f6; border-color:#f0c6ca; }
.admin-v34-thumb { width:46px; height:42px; display:grid; place-items:center; border-radius:9px; background:#f6f7f8; overflow:hidden; }
.admin-v34-thumb .official-sign { width:40px; height:36px; object-fit:contain; padding:2px; box-sizing:border-box; }
.admin-v34-sign-copy { min-width:0; }
.admin-v34-sign-copy strong { display:block; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-v34-sign-copy small { display:block; margin-top:3px; color:var(--muted); font-size:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-v34-dot { width:7px; height:7px; border-radius:50%; background:#cdd2d7; }
.admin-v34-dot.reviewed { background:#3d8a4c; }
.admin-v34-dot.removed { background:#c72c38; }
.admin-v34-no-results { padding:30px 16px; text-align:center; display:grid; gap:5px; }
.admin-v34-no-results strong { font-size:12px; }
.admin-v34-no-results span { color:var(--muted); font-size:9px; }

.admin-v34-workspace { min-width:0; display:grid; gap:12px; }
.admin-v34-selected-bar { min-height:104px; border:1px solid var(--line); border-radius:20px; background:#fff; padding:12px 14px; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.admin-v34-selected-sign { min-width:0; display:flex; gap:13px; align-items:center; }
.admin-v34-selected-thumb { flex:0 0 84px; width:84px; height:78px; display:grid; place-items:center; border-radius:14px; background:#f6f7f8; overflow:hidden; }
.admin-v34-selected-thumb .official-sign { max-width:75px; max-height:68px; object-fit:contain; }
.admin-v34-selected-sign > div { min-width:0; }
.admin-v34-selected-sign .eyebrow { font-size:8px; }
.admin-v34-selected-sign h2 { margin:3px 0 3px; font-size:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-v34-selected-sign p { margin:0; color:var(--muted); font-size:9px; }
.admin-v34-badges { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.admin-v34-badge { border-radius:999px; padding:4px 7px; background:#f0f1f2; color:#68707a; font-size:7px; font-weight:900; }
.admin-v34-badge.reviewed { background:#eaf6ed; color:#32713d; }
.admin-v34-badge.custom { background:#eef3fb; color:#365d8d; }
.admin-v34-badge.removed { background:#fff0f1; color:#9c3038; }
.admin-v34-selected-nav { display:grid; grid-template-columns:auto auto; gap:7px; align-items:center; justify-items:end; }
.admin-v34-selected-nav span { grid-column:1 / -1; color:var(--muted); font-size:9px; font-weight:850; }
.admin-v34-selected-nav button { min-height:36px; padding:0 10px; font-size:9px; }

.admin-v34-panel { border:1px solid var(--line); border-radius:20px; background:#fff; padding:20px; min-height:480px; }
.admin-v34-panel-heading { display:flex; justify-content:space-between; gap:18px; align-items:start; padding-bottom:16px; border-bottom:1px solid var(--line); }
.admin-v34-panel-heading .eyebrow { font-size:9px; }
.admin-v34-panel-heading h3 { margin:4px 0 4px; font-size:22px; letter-spacing:-.025em; }
.admin-v34-panel-heading p { margin:0; color:var(--muted); font-size:10px; line-height:1.45; }
.admin-v34-panel-state { border-radius:999px; padding:6px 9px; background:#f1f2f3; color:#6c737c; font-size:8px; font-weight:900; white-space:nowrap; }
.admin-v34-panel-state.reviewed { background:#eaf6ed; color:#32713d; }

.admin-v34-library-grid { display:grid; grid-template-columns:minmax(250px,.8fr) minmax(320px,1.2fr); gap:20px; padding:20px 0; }
.admin-v34-large-preview { min-height:300px; display:grid; place-items:center; border-radius:18px; background:#f7f8f9; border:1px solid #eceef0; padding:18px; }
.admin-v34-large-preview .official-sign { max-width:320px; max-height:260px; object-fit:contain; }
.admin-v34-large-preview.compact { min-height:260px; }
.admin-v34-large-preview.compact .official-sign { max-width:270px; max-height:225px; }
.admin-v34-library-details { display:grid; align-content:start; }
.admin-v34-detail-row { display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.admin-v34-detail-row span { color:var(--muted); font-size:9px; font-weight:800; }
.admin-v34-detail-row strong { font-size:11px; }
.admin-v34-quick-actions { display:flex; gap:8px; border-top:1px solid var(--line); padding-top:16px; }
.admin-v34-quick-actions button { min-width:150px; }
.admin-v34-danger-zone { margin-top:18px; border:1px solid #f0c7cb; border-radius:15px; background:#fff9f9; padding:13px; display:flex; justify-content:space-between; gap:18px; align-items:center; }
.admin-v34-danger-zone > div { display:grid; gap:3px; }
.admin-v34-danger-zone strong { font-size:11px; }
.admin-v34-danger-zone span { color:var(--muted); font-size:9px; }
.admin-v34-danger-zone button { min-width:118px; }

.admin-v34-edit-layout,.admin-v34-quiz-layout { display:grid; grid-template-columns:minmax(250px,.65fr) minmax(430px,1.35fr); gap:18px; padding-top:18px; align-items:start; }
.admin-v34-edit-preview { display:grid; gap:10px; }
.admin-v34-edit-preview > strong { font-size:15px; }
.admin-v34-edit-preview > span { color:var(--muted); font-size:10px; line-height:1.5; }
.admin-flash-preview-stack { gap:9px; }
.admin-flash-side-preview { min-height:142px; border:1px solid #e6e8eb; border-radius:16px; background:#fff; padding:13px; display:grid; place-items:center; align-content:center; gap:7px; text-align:center; position:relative; overflow:hidden; }
.admin-flash-side-preview.dark { background:var(--ink); color:#fff; border-color:var(--ink); }
.admin-flash-side-preview.detail { place-items:start; align-content:start; text-align:left; background:#fafafb; }
.admin-flash-side-label { justify-self:start; align-self:start; font-size:7px; font-weight:900; letter-spacing:.06em; color:#8b929b; }
.admin-flash-side-preview.dark .admin-flash-side-label { color:#afb5bd; }
.admin-flash-preview-sign { width:100%; height:76px; display:grid; place-items:center; }
.admin-flash-preview-sign .official-sign { max-width:100px; max-height:72px; object-fit:contain; }
.admin-flash-preview-sign.small { height:58px; }
.admin-flash-preview-sign.small .official-sign { max-width:72px; max-height:56px; }
.detail-preview-sign { justify-self:start; width:72px; place-items:start; }
.admin-flash-side-preview > strong { font-size:12px; line-height:1.25; }
.admin-flash-side-preview > small { color:var(--muted); font-size:8px; }
.admin-flash-side-preview.detail > p { margin:0; color:#5f6670; font-size:9px; line-height:1.45; }
.admin-v34-form-section { border:1px solid #e7e9ec; border-radius:14px; padding:12px; display:grid; gap:8px; background:#fafbfb; }
.admin-v34-field-kicker { font-size:8px; font-weight:900; letter-spacing:.06em; color:#747b84; }
.admin-v34-field-help { color:var(--muted); font-size:8px; line-height:1.45; }
.admin-v34-form { border:0; border-radius:0; padding:0; background:transparent; gap:14px; }
.admin-v34-form label { font-size:10px; }
.admin-v34-form input,.admin-v34-form textarea { border-radius:11px; font-size:11px; padding:10px 11px; }
.admin-v34-two-fields { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.admin-v34-form-footer { margin-top:2px; padding-top:13px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:14px; align-items:center; }
.admin-v34-form-footer .admin-save-status { flex:1; }
.admin-v34-form-footer > .primary { min-width:155px; }
.admin-v34-footer-actions { display:flex; gap:8px; }
.admin-v34-footer-actions button { white-space:nowrap; }

.admin-v34-question-preview { border:1px solid var(--line); border-radius:17px; padding:16px; background:#fafafa; }
.admin-v34-question-preview .eyebrow { font-size:8px; }
.admin-v34-question-preview h4 { margin:6px 0 10px; font-size:16px; }
.admin-v34-question-sign { min-height:160px; display:grid; place-items:center; border-radius:14px; background:#fff; }
.admin-v34-question-sign .official-sign { max-width:210px; max-height:145px; object-fit:contain; }
.admin-v34-preview-answers { display:grid; gap:6px; margin-top:10px; }
.admin-v34-preview-answers span { min-height:35px; display:grid; grid-template-columns:25px 1fr; align-items:center; gap:7px; border:1px solid #e0e2e5; border-radius:10px; background:#fff; padding:5px 8px; font-size:9px; }
.admin-v34-preview-answers b { width:23px; height:23px; display:grid; place-items:center; border-radius:7px; background:#f0f1f2; font-size:8px; }
.admin-v34-preview-answers .correct { border-color:#bedfc5; background:#f6fcf7; }
.admin-v34-preview-answers .correct b { background:#e3f4e7; color:#2b7537; }
.admin-v34-empty { border:1px dashed #ccd1d6; border-radius:18px; padding:60px 30px; text-align:center; }
.admin-v34-empty h3 { margin:0 0 7px; }
.admin-v34-empty p { margin:0; color:var(--muted); font-size:10px; }

@media (max-width:1050px){
  body:has(.admin-editor) .app-shell { min-width:980px; }
  body:has(.admin-editor) { overflow-x:auto; }
  .admin-v34-editor { padding-left:20px; padding-right:20px; }
  .admin-v34-layout { grid-template-columns:280px minmax(650px,1fr); }
  .admin-v34-edit-layout,.admin-v34-quiz-layout { grid-template-columns:250px minmax(390px,1fr); }
}


/* v35 — Question Bank & Builder */
.quiz-style-choice-four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.quiz-style-option small { display:block; margin-top:6px; font-size:8px; color:var(--muted); font-weight:800; }
.quiz-style-option:disabled { opacity:.45; cursor:not-allowed; }
.quiz-bank-availability { margin-top:10px; color:var(--muted); font-size:10px; text-align:center; }
.custom-question-prompt { min-height:135px; display:grid; place-content:center; text-align:center; gap:8px; margin:5px 0 16px; padding:20px; border-radius:20px; background:#f6f7f8; border:1px solid var(--line); }
.custom-question-prompt small { color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.1em; }
.custom-question-prompt strong { max-width:560px; font-size:22px; line-height:1.3; letter-spacing:-.02em; }

.admin-v35-quiz-panel { padding:0; overflow:hidden; }
.admin-v35-quiz-panel > .admin-v34-panel-heading { padding:20px; }
.admin-v35-quiz-manager { display:grid; grid-template-columns:285px minmax(0,1fr); min-height:590px; }
.admin-v35-question-list { border-right:1px solid var(--line); background:#fafafa; min-width:0; }
.admin-v35-question-list-head { padding:15px; display:flex; justify-content:space-between; gap:10px; align-items:center; border-bottom:1px solid var(--line); }
.admin-v35-question-list-head > div { display:grid; gap:2px; }
.admin-v35-question-list-head strong { font-size:16px; }
.admin-v35-question-list-head small { color:var(--muted); font-size:8px; }
.admin-v35-question-list-head button { min-height:36px; padding:0 10px; font-size:9px; white-space:nowrap; }
.admin-v35-question-items { padding:7px; display:grid; gap:4px; max-height:620px; overflow:auto; }
.admin-v35-question-item { width:100%; display:grid; grid-template-columns:34px minmax(0,1fr); gap:9px; align-items:start; border:1px solid transparent; border-radius:12px; background:transparent; padding:9px; text-align:left; cursor:pointer; color:var(--ink); }
.admin-v35-question-item:hover { background:#fff; }
.admin-v35-question-item.active { background:#fff; border-color:#efc4c8; box-shadow:0 1px 5px rgba(20,22,25,.04); }
.admin-v35-q-number { width:32px; height:28px; border-radius:8px; display:grid; place-items:center; background:#eef0f2; color:#606872; font-size:8px; font-weight:900; }
.admin-v35-question-item.active .admin-v35-q-number { background:#fff0f1; color:var(--red); }
.admin-v35-question-item > span:last-child { min-width:0; }
.admin-v35-question-item strong { display:block; font-size:9px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-v35-question-item small { display:block; margin-top:4px; color:var(--muted); font-size:8px; }
.admin-v35-bank-note { margin:8px 12px 14px; padding:10px; border-radius:10px; background:#f1f3f4; color:var(--muted); font-size:8px; line-height:1.45; }
.admin-v35-question-workspace { min-width:0; padding:18px; }
.admin-v35-question-editor { min-width:0; }
.admin-v35-editor-title { display:flex; justify-content:space-between; gap:16px; align-items:start; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.admin-v35-editor-title h4 { margin:4px 0; font-size:19px; }
.admin-v35-editor-title p { margin:0; color:var(--muted); font-size:9px; line-height:1.45; }
.admin-v35-base-layout { padding-top:0; }
.admin-v35-custom-edit-layout { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(430px,1.28fr); gap:18px; align-items:start; }
.admin-v35-custom-preview { border:1px solid var(--line); border-radius:17px; padding:15px; background:#fafafa; }
.admin-v35-custom-preview > h4 { margin:6px 0 12px; font-size:15px; line-height:1.35; }
.admin-v35-image-preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.admin-v35-image-preview-grid.two { grid-template-columns:1fr 1fr; }
.admin-v35-image-preview-option { position:relative; min-height:130px; display:grid; place-items:center; border:1px solid #e0e2e5; border-radius:12px; background:#fff; padding:12px; }
.admin-v35-image-preview-option.correct { border-color:#bedfc5; background:#f7fcf8; }
.admin-v35-image-preview-option b { position:absolute; top:7px; left:7px; width:22px; height:22px; display:grid; place-items:center; border-radius:7px; background:#eef0f2; font-size:8px; }
.admin-v35-image-preview-option .official-sign { max-width:130px; max-height:100px; object-fit:contain; }
.admin-v35-preview-placeholder { grid-column:1/-1; padding:40px 18px; border:1px dashed #ccd1d6; border-radius:12px; color:var(--muted); text-align:center; font-size:9px; }
.admin-v35-correct-sign { border:1px solid var(--line); border-radius:12px; padding:10px; }
.admin-v35-correct-sign > span,.admin-v35-fixed-type span { display:block; color:var(--muted); font-size:9px; font-weight:800; margin-bottom:6px; }
.admin-v35-correct-sign > div { display:flex; align-items:center; gap:10px; }
.admin-v35-correct-sign .official-sign { width:58px; height:48px; object-fit:contain; }
.admin-v35-correct-sign strong { font-size:10px; }
.admin-v35-fixed-type { padding:10px 11px; border-radius:11px; background:#f5f6f7; border:1px solid var(--line); }
.admin-v35-fixed-type strong { font-size:11px; }

@media (max-width:980px){
  .quiz-style-choice-four { grid-template-columns:1fr 1fr; }
  .admin-v35-quiz-manager { grid-template-columns:240px minmax(600px,1fr); }
  .admin-v35-custom-edit-layout { grid-template-columns:250px minmax(380px,1fr); }
}
@media (max-width:680px){
  .quiz-style-choice-four { grid-template-columns:1fr; }
  .custom-question-prompt { min-height:110px; padding:16px; }
  .custom-question-prompt strong { font-size:19px; }
}

/* v36 visual wrong-sign picker */
.admin-v36-sign-picker { min-width:0; }
.admin-v36-picker-label { display:block; font-size:10px; font-weight:800; letter-spacing:.02em; margin-bottom:7px; color:var(--text); }
.admin-v36-picker-button { width:100%; min-height:76px; display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:11px; padding:9px 11px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--text); text-align:left; cursor:pointer; }
.admin-v36-picker-button:hover,.admin-v36-picker-button[aria-expanded="true"] { border-color:var(--red); background:#fffafa; }
.admin-v36-picker-thumb,.admin-v36-picker-empty-icon { width:58px; height:54px; border-radius:9px; background:#f7f7f7; display:grid; place-items:center; overflow:hidden; }
.admin-v36-picker-thumb .official-sign { width:50px; height:46px; object-fit:contain; }
.admin-v36-picker-empty-icon { font-size:25px; font-weight:500; color:var(--muted); }
.admin-v36-picker-copy { min-width:0; display:flex; flex-direction:column; gap:3px; }
.admin-v36-picker-copy strong { font-size:12px; line-height:1.2; white-space:normal; }
.admin-v36-picker-copy small { font-size:10px; color:var(--muted); white-space:normal; }
.admin-v36-picker-change { font-size:10px; font-weight:800; color:var(--red); }
.admin-v36-picker-panel { margin-top:8px; padding:12px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 12px 30px rgba(22,24,29,.12); }
.admin-v36-picker-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.admin-v36-picker-panel-head > div { display:flex; flex-direction:column; gap:2px; }
.admin-v36-picker-panel-head strong { font-size:13px; }
.admin-v36-picker-panel-head small { color:var(--muted); font-size:10px; }
.admin-v36-picker-close { width:36px; height:36px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--text); font-size:21px; line-height:1; cursor:pointer; }
.admin-v36-picker-search { display:block; margin-bottom:10px; }
.admin-v36-picker-search > span { display:block; margin-bottom:5px; font-size:9px; font-weight:800; color:var(--muted); }
.admin-v36-picker-search input { width:100%; }
.admin-v36-picker-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; max-height:370px; overflow:auto; padding:2px; }
.admin-v36-picker-option { min-width:0; min-height:124px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:5px; padding:8px 6px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--text); cursor:pointer; text-align:center; }
.admin-v36-picker-option:hover { border-color:#b9bbc1; background:#fafafa; }
.admin-v36-picker-option.selected { border-color:var(--red); box-shadow:inset 0 0 0 1px var(--red); background:#fff8f8; }
.admin-v36-picker-option > span { width:64px; height:64px; display:grid; place-items:center; }
.admin-v36-picker-option .official-sign { width:58px; height:58px; object-fit:contain; }
.admin-v36-picker-option strong { width:100%; font-size:9px; line-height:1.15; overflow-wrap:anywhere; }
.admin-v36-picker-option small { width:100%; color:var(--muted); font-size:8px; line-height:1.15; overflow-wrap:anywhere; }
.admin-v36-picker-no-results { padding:18px; text-align:center; color:var(--muted); font-size:11px; }
@media (max-width:1050px){ .admin-v36-picker-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:700px){ .admin-v36-picker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .admin-v36-picker-button { grid-template-columns:54px minmax(0,1fr); } .admin-v36-picker-change { grid-column:2; } }


/* v37 admin-only sign drafting + full SVG library */
.admin-v37-editor .admin-v34-tabs { margin-bottom:16px; }
.admin-v37-drafts-shell { display:grid; gap:18px; }
.admin-v37-intro { display:flex; justify-content:space-between; gap:24px; align-items:center; padding:20px 22px; border:1px solid #ead9db; border-radius:18px; background:linear-gradient(135deg,#fff 0%,#fff8f8 100%); }
.admin-v37-intro h2 { margin:4px 0 7px; font-size:22px; }
.admin-v37-intro p { margin:0; max-width:760px; color:var(--muted); font-size:11px; line-height:1.55; }
.admin-v37-draft-summary { min-width:150px; padding:14px 16px; border-radius:14px; background:#fff; border:1px solid var(--line); text-align:center; }
.admin-v37-draft-summary strong { display:block; font-size:28px; color:var(--red); }
.admin-v37-draft-summary span,.admin-v37-draft-summary small { display:block; }
.admin-v37-draft-summary span { font-weight:800; font-size:10px; }
.admin-v37-draft-summary small { margin-top:4px; color:var(--muted); font-size:9px; }
.admin-v37-review-section { display:grid; grid-template-columns:300px minmax(0,1fr); border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff; min-height:560px; }
.admin-v37-draft-list { border-right:1px solid var(--line); background:#f7f8f9; }
.admin-v37-list-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px; border-bottom:1px solid var(--line); }
.admin-v37-list-head strong { font-size:14px; }
.admin-v37-list-head span { font-size:9px; color:var(--muted); }
.admin-v37-draft-item { width:100%; display:grid; grid-template-columns:62px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 12px; border:0; border-bottom:1px solid #e7e8ea; background:transparent; color:var(--text); text-align:left; cursor:pointer; }
.admin-v37-draft-item:hover { background:#fff; }
.admin-v37-draft-item.active { background:#fff; box-shadow:inset 3px 0 0 var(--red); }
.admin-v37-draft-thumb { width:62px; height:58px; display:grid; place-items:center; border-radius:10px; background:#fff; border:1px solid #e4e5e7; }
.admin-v37-draft-thumb .official-sign { max-width:54px; max-height:50px; object-fit:contain; }
.admin-v37-draft-item > span:nth-child(2) { min-width:0; }
.admin-v37-draft-item strong { display:block; font-size:10px; line-height:1.25; }
.admin-v37-draft-item small { display:block; margin-top:4px; color:var(--muted); font-size:8px; line-height:1.3; }
.admin-v37-draft-item b { padding:5px 7px; border-radius:7px; background:#eceff1; color:#69717b; font-size:7px; letter-spacing:.06em; }
.admin-v37-draft-editor { padding:20px; min-width:0; }
.admin-v37-review-grid { display:grid; grid-template-columns:minmax(260px,.75fr) minmax(420px,1.25fr); gap:20px; align-items:start; }
.admin-v37-draft-preview { position:sticky; top:18px; }
.admin-v37-draft-form { min-width:0; }
.admin-v37-draft-form-head { display:flex; justify-content:space-between; gap:14px; align-items:start; padding-bottom:14px; margin-bottom:4px; border-bottom:1px solid var(--line); }
.admin-v37-draft-form-head h3 { margin:4px 0; font-size:20px; }
.admin-v37-draft-form-head p { margin:0; color:var(--muted); font-size:9px; line-height:1.5; }
.admin-v37-ready-badge { flex:0 0 auto; padding:7px 9px; border-radius:999px; font-size:8px; font-weight:900; }
.admin-v37-ready-badge.ready { background:#e8f6ec; color:#20733c; }
.admin-v37-ready-badge.needs { background:#fff2df; color:#9a5a00; }
.admin-v37-image-source { padding:11px 12px; border-radius:12px; border:1px solid var(--line); background:#f8f9fa; }
.admin-v37-image-source span,.admin-v37-image-source strong,.admin-v37-image-source small { display:block; }
.admin-v37-image-source span { color:var(--muted); font-size:8px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.admin-v37-image-source strong { margin-top:4px; font-size:10px; overflow-wrap:anywhere; }
.admin-v37-image-source small { margin-top:4px; color:var(--muted); font-size:8px; line-height:1.4; }
.admin-v37-form-actions { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.admin-v37-empty,.admin-v37-no-drafts,.admin-v37-library-empty { padding:34px 20px; display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center; text-align:center; color:var(--muted); }
.admin-v37-empty strong,.admin-v37-no-drafts strong,.admin-v37-library-empty strong { color:var(--text); font-size:14px; }
.admin-v37-empty span,.admin-v37-no-drafts span,.admin-v37-library-empty span { font-size:10px; line-height:1.5; max-width:430px; }
.admin-v37-browser { padding:20px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.admin-v37-browser-head { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:16px; }
.admin-v37-browser-head h3 { margin:4px 0 5px; font-size:19px; }
.admin-v37-browser-head p { margin:0; max-width:760px; color:var(--muted); font-size:10px; line-height:1.5; }
.admin-v37-browser-tools { display:grid; grid-template-columns:minmax(280px,1fr) 250px 110px; gap:10px; align-items:end; padding:12px; margin-bottom:12px; border-radius:13px; background:#f5f6f7; }
.admin-v37-browser-tools label,.admin-v37-browser-search { display:grid; gap:5px; font-size:8px; font-weight:900; text-transform:uppercase; color:var(--muted); }
.admin-v37-browser-search > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.admin-v37-browser-search button { min-height:40px; padding:0 12px; }
.admin-v37-browser-tools input,.admin-v37-browser-tools select { width:100%; }
.admin-v37-browser-count { text-align:center; padding:7px; }
.admin-v37-browser-count strong,.admin-v37-browser-count span { display:block; }
.admin-v37-browser-count strong { font-size:20px; }
.admin-v37-browser-count span { color:var(--muted); font-size:8px; }
.admin-v37-library-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; }
.admin-v37-library-card { position:relative; min-width:0; min-height:160px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:5px; padding:10px 8px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; text-align:center; }
.admin-v37-library-card:hover { border-color:#b9bcc1; box-shadow:0 3px 12px rgba(20,22,25,.05); }
.admin-v37-library-card.selected { border-color:var(--red); box-shadow:inset 0 0 0 1px var(--red); background:#fff9f9; }
.admin-v37-library-card input { position:absolute; opacity:0; pointer-events:none; }
.admin-v37-library-check { position:absolute; top:7px; right:7px; width:24px; height:24px; display:grid; place-items:center; border-radius:8px; background:#eef0f2; color:#69717b; font-size:13px; font-weight:900; }
.admin-v37-library-card.selected .admin-v37-library-check { background:var(--red); color:#fff; }
.admin-v37-library-image { width:92px; height:92px; display:grid; place-items:center; margin-top:4px; }
.admin-v37-library-image .official-sign { max-width:88px; max-height:88px; object-fit:contain; }
.admin-v37-library-card strong { width:100%; font-size:9px; line-height:1.25; overflow-wrap:anywhere; }
.admin-v37-library-card small { width:100%; color:var(--muted); font-size:7px; line-height:1.25; overflow-wrap:anywhere; }
.admin-v37-pagination { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:14px; }
.admin-v37-pagination > span { color:var(--muted); font-size:9px; }
.admin-v37-pagination > div { display:flex; gap:8px; }
@media (max-width:1250px){ .admin-v37-library-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } .admin-v37-review-grid { grid-template-columns:250px minmax(390px,1fr); } }
@media (max-width:1000px){ .admin-v37-review-section { grid-template-columns:250px minmax(650px,1fr); overflow:auto; } .admin-v37-library-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .admin-v37-browser-tools { grid-template-columns:1fr 220px 100px; } }
@media (max-width:700px){ .admin-v37-intro,.admin-v37-browser-head { align-items:flex-start; flex-direction:column; } .admin-v37-browser-tools { grid-template-columns:1fr; } .admin-v37-library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }


/* v41 legal + support pages */
.footer-links { display:flex; flex-wrap:wrap; gap:8px 14px; margin:0 0 10px; }
.footer-links a { color:#626a75; font-weight:800; text-decoration:none; font-size:10px; }
.footer-links a:hover { color:var(--red); text-decoration:underline; }
.legal-shell { max-width:860px; }
.legal-topbar { position:sticky; top:0; }
.legal-main { padding:42px 28px 56px; background:linear-gradient(180deg,#fff 0%,#fbfbfc 100%); }
.legal-back { color:var(--muted); text-decoration:none; font-size:12px; font-weight:800; }
.legal-back:hover { color:var(--red); }
.legal-hero { max-width:690px; margin:14px 0 30px; }
.legal-hero h1 { margin:10px 0 14px; font-size:clamp(38px,7vw,56px); }
.legal-hero p { margin:0; color:var(--muted); font-size:16px; line-height:1.65; }
.legal-updated { display:inline-flex; margin-top:14px; padding:7px 10px; border-radius:999px; background:#f1f2f4; color:#727984; font-size:10px; font-weight:800; }
.legal-placeholder { margin:0 0 24px; padding:16px 17px; border:1px solid #f0c4c8; border-radius:16px; background:#fff4f5; color:#8f2029; font-size:12px; line-height:1.55; }
.legal-placeholder strong { display:block; margin-bottom:4px; color:#781820; }
.legal-content { display:grid; gap:14px; }
.legal-card { border:1px solid var(--line); border-radius:20px; padding:22px; background:#fff; }
.legal-card h2 { margin:0 0 10px; font-size:21px; letter-spacing:-.025em; }
.legal-card h3 { margin:18px 0 7px; font-size:15px; }
.legal-card p,.legal-card li { color:#4f5762; font-size:13px; line-height:1.65; }
.legal-card p { margin:8px 0; }
.legal-card ul,.legal-card ol { margin:9px 0; padding-left:20px; }
.legal-card li + li { margin-top:6px; }
.legal-card a { color:var(--red-dark); font-weight:800; }
.legal-callout { border-left:4px solid var(--red); background:#fff7f8; border-radius:0 14px 14px 0; padding:14px 15px; margin:14px 0; }
.legal-callout p { margin:0; }
.legal-contact-box { display:grid; gap:7px; padding:16px; border-radius:15px; background:#f6f7f8; }
.legal-contact-box span { color:var(--muted); font-size:11px; }
.legal-contact-box strong { font-size:13px; overflow-wrap:anywhere; }
.legal-template { margin-top:12px; padding:15px; border:1px dashed #ccd1d7; border-radius:14px; background:#fafbfc; color:#3d444e; font-size:12px; line-height:1.65; white-space:pre-line; }
.support-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.support-tile { border:1px solid var(--line); border-radius:17px; padding:17px; background:#fff; }
.support-tile strong { display:block; margin-bottom:5px; font-size:14px; }
.support-tile span { display:block; color:var(--muted); font-size:12px; line-height:1.5; }
.support-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
@media (max-width:620px){
  .legal-main { padding:28px 16px 42px; }
  .legal-card { padding:18px; }
  .support-grid { grid-template-columns:1fr; }
  .footer-links { gap:7px 12px; }
}