:root {
  --navy:#0C2340; --navy-soft:#1a3557;
  --red:#B22234; --red-soft:#c94555;
  --gold:#D4A76A; --gold-soft:#E4C08C;
  --cream:#F7F5F0; --cream-warm:#EFEAE0;
  --ink:#1F2937; --ink-soft:#4B5563;
  --line:#E5DFD1; --success:#2f7d32; --warn:#c47b00;
}
*{-webkit-font-smoothing:antialiased}
html,body{background:var(--cream)}
body{font-family:'Inter',sans-serif;color:var(--ink);font-weight:400;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
body[dir="rtl"]{font-family:'Tajawal','Inter',sans-serif}
.font-ar{font-family:'Tajawal',sans-serif;direction:rtl}
a{text-decoration:none}

/* Top nav */
.app-nav{background:white;border-bottom:1px solid var(--line);padding:.875rem 0;position:sticky;top:0;z-index:100}
.app-brand{font-weight:800;font-size:1.125rem;color:var(--navy);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.app-brand-mark{width:28px;height:28px;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center;border-radius:4px;font-weight:900;font-size:.85rem}

/* Nav badges */
.nav-badges{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.streak-badge{display:inline-flex;align-items:center;gap:.25rem;background:linear-gradient(135deg,#f59e0b 0%,#ea580c 100%);color:white;padding:.25rem .625rem;border-radius:20px;font-size:.75rem;font-weight:700;white-space:nowrap}
.location-badge{display:inline-flex;align-items:center;gap:.25rem;background:var(--cream-warm);color:var(--ink-soft);padding:.25rem .625rem;border-radius:20px;font-size:.75rem;font-weight:600;white-space:nowrap}

/* Language switch */
.lang-switch{display:inline-flex;align-items:center;background:var(--cream-warm);border-radius:20px;padding:.1875rem;font-size:.75rem}
.lang-switch a{padding:.25rem .5rem;border-radius:16px;color:var(--ink-soft);font-weight:600;line-height:1}
.lang-switch a.active{background:var(--navy);color:white}

/* User chip */
.user-chip{display:inline-flex;align-items:center;gap:.625rem;background:var(--cream-warm);border:1px solid transparent;padding:.25rem .75rem .25rem .25rem;border-radius:20px;cursor:pointer}
.user-chip:hover{border-color:var(--line)}
.user-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:800}
.user-info{line-height:1.15;text-align:start}
.user-info .u-name{font-size:.8125rem;font-weight:700;color:var(--ink)}
.user-info .u-role{font-size:.6875rem;color:var(--ink-soft)}
.user-dropdown{min-width:240px;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(12,35,64,.14);padding:.375rem}
.user-dropdown .dropdown-item{border-radius:8px;padding:.5rem .75rem;font-size:.875rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.user-dropdown .dropdown-item .meta{font-size:.75rem;color:var(--ink-soft)}
.user-dropdown .dropdown-item.text-danger{color:var(--red)!important}

/* Buttons */
.btn-primary-navy{background:var(--navy);color:white;border:0;padding:.75rem 1.5rem;font-weight:600;border-radius:8px}
.btn-primary-navy:hover{background:var(--navy-soft);color:white}
.btn-outline-navy{background:transparent;color:var(--navy);border:1.5px solid var(--line);padding:.75rem 1.25rem;font-weight:600;border-radius:8px}
.btn-outline-navy:hover{border-color:var(--navy)}

/* Voice buttons */
.voice-btn{display:inline-flex;align-items:center;gap:.375rem;background:white;border:1px solid var(--line);color:var(--navy);border-radius:20px;padding:.375rem .75rem;font-size:.8125rem;font-weight:600;min-height:44px}
.voice-btn:hover{border-color:var(--navy);background:var(--navy);color:white}
.voice-btn.playing{background:var(--navy);color:var(--gold);animation:pulse 1s infinite}
@keyframes pulse{50%{background:var(--navy-soft)}}
.voice-lang{font-size:.625rem;background:var(--cream-warm);color:var(--ink);padding:.0625rem .25rem;border-radius:3px;font-weight:700}

/* Mobile-first: minimum touch targets */
button, .btn, a.btn{min-height:44px}
input, select, textarea{font-size:16px}  /* Prevents iOS zoom on focus */

/* Alert strips */
.alert-strip{padding:.875rem 1rem;border-radius:8px;font-weight:500;font-size:.9375rem;margin-bottom:1rem}
.alert-strip.alert-success{background:#e8f5e9;color:var(--success)}
.alert-strip.alert-warning{background:#fef3c7;color:#78350f}
.alert-strip.alert-info{background:#dbeafe;color:#1e40af}

/* Cards */
.section-card{background:white;border:1px solid var(--line);border-radius:16px;padding:1.5rem}

/* Hero */
.hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);color:white;border-radius:18px;padding:1.75rem;position:relative;overflow:hidden}
.hero h1{font-weight:800;font-size:1.5rem;letter-spacing:-.01em;margin:0}
.hero .hero-sub{color:var(--gold-soft);font-size:.9375rem;margin-top:.25rem}

/* Mode cards */
.mode-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.mode-card{display:block;background:white;border:1px solid var(--line);border-radius:16px;padding:1.25rem;color:var(--ink);transition:transform .12s,box-shadow .12s,border-color .12s}
.mode-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(12,35,64,.10);border-color:var(--gold)}
.mode-card .mode-icon{width:44px;height:44px;border-radius:12px;background:var(--cream-warm);display:flex;align-items:center;justify-content:center;font-size:1.375rem;margin-bottom:.75rem}
.mode-card .mode-title{font-weight:700;font-size:1.0625rem;color:var(--navy)}
.mode-card .mode-desc{font-size:.8125rem;color:var(--ink-soft);margin-top:.25rem}

/* Choices */
.choice{display:flex;align-items:center;gap:.75rem;background:white;border:1.5px solid var(--line);border-radius:12px;padding:.875rem 1rem;font-weight:500;cursor:pointer;margin-bottom:.625rem}
.choice:hover{border-color:var(--navy)}
.choice.correct{border-color:var(--success);background:#e8f5e9}
.choice.incorrect{border-color:var(--red);background:#fdecee}

/* Flashcard */
.flashcard{background:white;border:1px solid var(--line);border-radius:18px;padding:2rem;min-height:220px;display:flex;flex-direction:column;justify-content:center;text-align:center}

/* Login / auth screens */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);position:relative;overflow:hidden}
.auth-watermark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:32rem;line-height:1;color:rgba(255,255,255,.04);pointer-events:none;user-select:none}
.auth-card{position:relative;z-index:2;width:100%;max-width:420px;background:white;border-radius:20px;padding:2rem;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.auth-brand{display:flex;flex-direction:column;align-items:center;gap:.625rem;margin-bottom:1.5rem;text-align:center}
.auth-brand .app-brand-mark{width:48px;height:48px;font-size:1.25rem;border-radius:10px}
.auth-brand h1{font-size:1.25rem;font-weight:800;color:var(--navy);margin:0}
.auth-brand p{font-size:.875rem;color:var(--ink-soft);margin:0}
.auth-label{font-size:.8125rem;font-weight:600;color:var(--ink);margin-bottom:.375rem}
.auth-input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:.75rem .875rem;background:var(--cream);margin-bottom:1rem}
.auth-input:focus{outline:none;border-color:var(--navy);background:white}
.auth-notice{background:#fef3c7;border:1px solid #fde68a;color:#78350f;border-radius:10px;padding:.75rem .875rem;font-size:.8125rem;margin-top:1rem}
.auth-tabs{display:inline-flex;background:var(--cream-warm);border-radius:20px;padding:.1875rem;margin:0 auto 1.25rem;font-size:.8125rem}
.auth-tabs a{padding:.375rem .75rem;border-radius:16px;color:var(--ink-soft);font-weight:600}
.auth-tabs a.active{background:var(--navy);color:white}
.field-error{color:var(--red);font-size:.8125rem;margin:-.625rem 0 .875rem}

/* ============ Location setup ============ */
.location-setup{max-width:720px}
.loc-header h1{font-weight:800;font-size:1.5rem;color:var(--navy);letter-spacing:-.01em;margin:0}
.loc-header p{color:var(--ink-soft);font-size:.9375rem;margin:.5rem 0 0;line-height:1.5}

/* ZIP shortcut */
.zip-box{background:var(--cream);border:2px dashed var(--gold);border-radius:16px;padding:1.25rem}
.zip-label{display:block;font-size:.8125rem;font-weight:700;color:var(--navy);margin-bottom:.625rem}
.zip-row{display:flex;gap:.625rem}
.zip-input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:10px;padding:.75rem .875rem;background:white;font-weight:600;letter-spacing:.05em}
.zip-input:focus{outline:none;border-color:var(--navy)}
.zip-btn{white-space:nowrap;flex-shrink:0}
.zip-error{color:var(--red);font-size:.8125rem;margin-top:.5rem;font-weight:600}

/* "or pick manually" divider */
.or-divider{display:flex;align-items:center;gap:.875rem;color:var(--ink-soft);font-size:.8125rem;font-weight:600;margin:1.25rem 0}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* Cascading selects */
.loc-selects{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.loc-field label{display:block;font-size:.8125rem;font-weight:700;color:var(--ink);margin-bottom:.375rem}
.loc-field .req{color:var(--red)}
.loc-input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:.75rem .875rem;background:white;font-weight:500;color:var(--ink)}
.loc-input:focus{outline:none;border-color:var(--navy)}
.loc-input:disabled{background:var(--cream-warm);color:var(--ink-soft);cursor:not-allowed}

/* Summary card — navy gradient with red-to-gold hairline */
.summary-card{position:relative;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);color:white;border-radius:16px;padding:1.5rem;overflow:hidden}
.summary-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red) 0%,var(--gold) 100%)}
.summary-hint{color:var(--gold-soft);font-size:.9375rem;text-align:center;padding:.5rem 0}
.summary-title{font-weight:800;font-size:1.125rem;color:white;margin-bottom:1rem;letter-spacing:-.01em}
.summary-list{margin:0;display:grid;gap:.75rem}
.summary-item{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:.75rem}
.summary-item:last-child{border-bottom:0;padding-bottom:0}
.summary-item dt{font-size:.8125rem;color:var(--gold-soft);font-weight:600;margin:0;flex-shrink:0}
.summary-item dd{font-size:.9375rem;font-weight:700;color:white;margin:0;text-align:end}

/* Freshness footer */
.freshness-footer{display:flex;flex-direction:column;gap:.375rem;margin-top:1rem;font-size:.8125rem;color:var(--ink-soft)}
.freshness-footer .fresh-warn{color:var(--warn)}
.freshness-footer a{color:var(--warn);font-weight:700;text-decoration:underline}

/* Save bar */
.save-bar{margin-top:1.5rem}
.save-btn{width:100%}
.save-btn:disabled{opacity:.5;cursor:not-allowed}

/* Force-location banner */
.location-force-banner{background:#fef3c7;border-bottom:1px solid #fde68a;color:#78350f;font-size:.875rem;font-weight:600;padding:.625rem 0;text-align:center}
.loc-banner-cta{background:var(--navy);color:white!important;padding:.25rem .75rem;border-radius:16px;font-weight:700;white-space:nowrap;min-height:0}
.loc-banner-cta:hover{background:var(--navy-soft)}

/* Responsive */
@media (max-width:576px){
  .app-nav{padding:.625rem 0}
  .user-info{display:none}   /* Hide name/role, show only avatar on very small screens */
  .hero h1{font-size:1.25rem}
  .auth-watermark{font-size:20rem}

  /* Location: stack, ZIP on top, save anchored full-width at bottom */
  .loc-selects{grid-template-columns:1fr}
  .location-setup{padding-bottom:5.5rem!important}
  .save-bar{position:fixed;left:0;right:0;bottom:0;background:white;border-top:1px solid var(--line);
    padding:.875rem 1rem calc(.875rem + env(safe-area-inset-bottom));margin-top:0;z-index:90;
    box-shadow:0 -6px 20px rgba(12,35,64,.08)}
  .location-force-banner{font-size:.8125rem}
}

/* ============================================================
   PHASE 11 — Home, Practice Test, Result
   ============================================================ */

/* ---------- Home hero ---------- */
.home-hero{padding:1.75rem}
.home-hero-top{margin-bottom:1.25rem}
.home-hero-welcome h1{font-weight:800;font-size:1.375rem;letter-spacing:-.01em;margin:0}
.home-hero-lastactive{color:var(--gold-soft);font-size:.8125rem;margin-top:.25rem}
.home-hero-main{display:flex;align-items:center;gap:1.25rem}
.home-hero-number{font-weight:900;font-size:5rem;line-height:.9;color:var(--gold);letter-spacing:-.03em;flex-shrink:0}
.home-hero-copy{min-width:0}
.home-hero-title{font-weight:800;font-size:1.25rem;color:white;line-height:1.15}
.home-hero-sub{color:rgba(255,255,255,.75);font-size:.875rem;margin-top:.375rem;line-height:1.4}
.home-hero-cta{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;background:var(--gold);color:var(--navy);font-weight:800;font-size:.9375rem;padding:.625rem 1.25rem;border-radius:10px}
.home-hero-cta:hover{background:var(--gold-soft);color:var(--navy)}

/* ---------- Progress strip ---------- */
.progress-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:1rem}
.pstat{background:white;border:1px solid var(--line);border-radius:14px;padding:1rem .75rem;text-align:center}
.pstat-num{font-weight:900;font-size:1.5rem;color:var(--navy);letter-spacing:-.02em;line-height:1}
.pstat-label{font-size:.6875rem;font-weight:600;color:var(--ink-soft);margin-top:.375rem;text-transform:uppercase;letter-spacing:.03em}

/* ---------- Section heading & preview bars ---------- */
.home-h2{font-weight:800;font-size:1.0625rem;color:var(--navy);letter-spacing:-.01em;margin:1.75rem 0 .875rem}
.section-bars{display:grid;gap:.75rem}
.section-bar{background:white;border:1px solid var(--line);border-radius:14px;padding:1rem 1.125rem;border-inline-start:4px solid var(--navy)}
.section-bar.accent-navy{border-inline-start-color:var(--navy)}
.section-bar.accent-red{border-inline-start-color:var(--red)}
.section-bar.accent-gold{border-inline-start-color:var(--gold)}
.section-bar-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
.section-bar-name{font-weight:700;font-size:.9375rem;color:var(--ink)}
.section-bar-count{font-weight:900;font-size:1.125rem;color:var(--navy)}
.section-bar-track{height:6px;background:var(--cream-warm);border-radius:99px;overflow:hidden}
.section-bar-fill{height:100%;border-radius:99px;background:var(--navy)}
.accent-red .section-bar-fill{background:var(--red)}
.accent-gold .section-bar-fill{background:var(--gold)}

/* ---------- Officials card ---------- */
.officials-card{background:white;border:1px solid var(--line);border-radius:18px;padding:1.5rem;position:relative;overflow:hidden;height:100%}
.officials-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red) 0%,var(--gold) 100%)}
.officials-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.125rem}
.officials-title{font-weight:800;font-size:1rem;color:var(--navy)}
.officials-change{font-size:.8125rem;font-weight:700;color:var(--warn);text-decoration:underline}
.officials-list{list-style:none;margin:0;padding:0;display:grid;gap:.875rem}
.official-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border-bottom:1px solid var(--line);padding-bottom:.875rem}
.official-row:last-child{border-bottom:0;padding-bottom:0}
.official-meta{min-width:0}
.official-role{display:block;font-size:.75rem;font-weight:600;color:var(--ink-soft)}
.official-name{display:block;font-size:.9375rem;font-weight:700;color:var(--ink);margin-top:.125rem}
.official-name-ar{display:block;font-size:.8125rem;color:var(--ink-soft)}
.party-pill{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:900;color:white}
.party-pill.party-d{background:#1d4ed8}
.party-pill.party-r{background:var(--red)}
.party-pill.party-i{background:#6b7280}
.party-pill.party-o{background:var(--ink-soft)}
.officials-freshness{margin-top:1.125rem;font-size:.75rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:.25rem}
.officials-freshness a{color:var(--warn);font-weight:700;text-decoration:underline}
.officials-empty{text-align:center;padding:1.5rem .5rem}
.officials-empty-icon{font-size:2rem;margin-bottom:.5rem}
.officials-empty p{font-size:.875rem;color:var(--ink-soft);margin:0 0 1rem}
.btn-gold{background:var(--gold);color:var(--navy);border:0;font-weight:800;padding:.625rem 1.25rem;border-radius:10px}
.btn-gold:hover{background:var(--gold-soft);color:var(--navy)}

/* ---------- Mode grid: primary card ---------- */
.mode-card.mode-primary{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);border-color:transparent}
.mode-card.mode-primary .mode-title,.mode-card.mode-primary .mode-desc{color:white}
.mode-card.mode-primary .mode-desc{color:rgba(255,255,255,.72)}
.mode-card.mode-primary .mode-icon{background:rgba(255,255,255,.14)}
.mode-card.mode-primary:hover{border-color:var(--gold)}

/* ---------- 65/20 toggle strip ---------- */
.toggle-6520{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(135deg,var(--navy) 0%,var(--navy-soft) 100%);color:white;border-radius:16px;padding:1.25rem 1.5rem;margin-bottom:1.5rem}
.toggle-6520-body{display:flex;align-items:center;gap:1rem;min-width:0}
.toggle-6520-badge{flex-shrink:0;background:var(--gold);color:var(--navy);font-weight:900;font-size:.9375rem;padding:.375rem .625rem;border-radius:8px;letter-spacing:-.02em}
.toggle-6520-title{font-weight:800;font-size:1rem}
.toggle-6520-desc{font-size:.8125rem;color:rgba(255,255,255,.72);margin-top:.25rem;line-height:1.4}
.toggle-6520-switch{flex-shrink:0;display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.14);border:0;border-radius:99px;padding:.375rem .5rem .375rem .375rem;color:white;font-weight:700;font-size:.8125rem;min-height:0}
.toggle-6520-knob{width:22px;height:22px;border-radius:50%;background:white;transition:transform .15s}
.toggle-6520.is-on .toggle-6520-switch{background:var(--gold);color:var(--navy)}
.toggle-6520.is-on .toggle-6520-knob{background:var(--navy);transform:translateX(2px)}
[dir="rtl"] .toggle-6520.is-on .toggle-6520-knob{transform:translateX(-2px)}

/* ---------- Disclaimer ---------- */
.home-disclaimer{font-size:.75rem;color:var(--ink-soft);line-height:1.5;text-align:center;max-width:640px;margin:0 auto}

/* ============ Practice test ============ */
.practice-header{position:sticky;top:0;z-index:95;background:white;border-bottom:1px solid var(--line);padding:.75rem 0;box-shadow:0 2px 12px rgba(12,35,64,.05)}
.practice-progress-row{display:flex;align-items:center;gap:.75rem}
.practice-exit{flex-shrink:0;width:32px;height:32px;min-height:0;border-radius:50%;background:var(--cream-warm);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;font-weight:700}
.practice-exit:hover{background:var(--red);color:white}
.practice-progress-track{flex:1;height:8px;background:var(--cream-warm);border-radius:99px;overflow:hidden}
.practice-progress-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--navy) 0%,var(--gold) 100%);transition:width .3s}
.practice-progress-label{flex-shrink:0;font-size:.75rem;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.practice-score{display:flex;gap:.5rem;margin-top:.625rem;flex-wrap:wrap}
.score-chip{font-size:.75rem;font-weight:700;padding:.1875rem .5rem;border-radius:20px;display:inline-flex;gap:.25rem}
.score-chip span{font-weight:600;opacity:.85}
.score-correct{background:#e8f5e9;color:var(--success)}
.score-wrong{background:#fdecee;color:var(--red)}
.score-remaining{background:var(--cream-warm);color:var(--warn)}

.qnum-block{background:white;border:1px solid var(--line);border-radius:16px;padding:1.5rem;text-align:center;position:sticky;top:6.5rem}
.qnum{font-weight:900;font-size:4rem;line-height:.85;color:var(--gold);letter-spacing:-.03em}
.qnum-cap{font-size:.8125rem;font-weight:600;color:var(--ink-soft);margin-top:.375rem}
.qtags{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-top:1rem}
.qtag-section{background:var(--navy);color:white;font-size:.75rem;font-weight:700;padding:.25rem .625rem;border-radius:20px}
.qtag-category{font-size:.75rem;color:var(--ink-soft);font-weight:600}
.qnum-inline{display:none;font-weight:900;font-size:1.75rem;color:var(--gold);letter-spacing:-.02em;margin-bottom:.5rem}
.qnum-inline span{font-size:.8125rem;font-weight:600;color:var(--ink-soft)}

.question-card{background:white;border:1px solid var(--line);border-radius:16px;padding:1.5rem}
.voice-row{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.question-en{font-weight:700;font-size:1.375rem;color:var(--ink);line-height:1.35;letter-spacing:-.01em}
.question-ar{font-size:1.125rem;color:var(--ink-soft);margin-top:.625rem;line-height:1.6}

.answer-mode-toggle{display:inline-flex;background:var(--cream-warm);border-radius:12px;padding:.25rem;margin:1.25rem 0;gap:.25rem}
.amode{background:transparent;border:0;border-radius:9px;padding:.5rem 1rem;font-weight:700;font-size:.8125rem;color:var(--ink-soft);min-height:0}
.amode.active{background:white;color:var(--navy);box-shadow:0 1px 4px rgba(12,35,64,.1)}
.amode:disabled{opacity:.4;cursor:not-allowed}

.answer-panel{margin-bottom:.5rem}
.choice-hint{display:flex;align-items:center;gap:.625rem;margin-bottom:.75rem}
.choice-hint-badge{background:var(--navy);color:white;font-weight:800;font-size:.75rem;letter-spacing:.04em;padding:.3rem .7rem;border-radius:20px}
.choice-hint-count{font-weight:700;font-size:.8125rem;color:var(--ink-soft)}
.choices{display:grid;gap:.625rem}
.choice-option{width:100%;text-align:start;justify-content:flex-start}
.choice-marker{flex-shrink:0;width:28px;height:28px;border-radius:8px;background:var(--cream-warm);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8125rem}
.choice-text{display:flex;flex-direction:column;gap:.125rem}
.choice-text-ar{font-size:.8125rem;color:var(--ink-soft)}
/* Speaker sits at the far end of the row; margin-inline keeps it RTL-correct. */
.choice-voice{display:flex;gap:.375rem;margin-inline-start:auto;flex-shrink:0}
.choice-voice .voice-btn{padding:.25rem .5rem;min-height:36px}
.choice-voice .voice-btn span:not(.voice-lang){display:none}
.choice-option:focus-visible{outline:none;box-shadow:0 0 0 3px var(--gold)}
.choice-option.selected{border-color:var(--navy);background:#f0f4f9}
.choice-option.selected .choice-marker{background:var(--navy);color:white}
.choice-option.correct .choice-marker{background:var(--success);color:white}
.choice-option.incorrect .choice-marker{background:var(--red);color:white}
.typed-input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:.875rem 1rem;font-weight:600}
.typed-input:focus{outline:none;border-color:var(--navy)}
.typed-input.is-correct{border-color:var(--success);background:#e8f5e9}
.typed-input.is-incorrect{border-color:var(--red);background:#fdecee}

.practice-controls{display:flex;gap:.75rem;margin-top:1.5rem;flex-wrap:wrap}
.practice-controls .submit-answer{margin-inline-start:auto}

.feedback-banner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:200;padding:1.25rem 2.5rem;border-radius:16px;font-weight:900;font-size:1.5rem;color:white;box-shadow:0 20px 50px rgba(0,0,0,.3);animation:fbpop .2s ease-out}
.feedback-banner.fb-correct{background:var(--success)}
.feedback-banner.fb-wrong{background:var(--red)}
@keyframes fbpop{from{transform:translate(-50%,-50%) scale(.85);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}

/* ============ Result ============ */
.result-page{max-width:760px}
.result-banner{border-radius:20px;padding:2rem 1.5rem;text-align:center;color:white;position:relative;overflow:hidden}
.result-banner.is-pass{background:linear-gradient(135deg,#1b5e20 0%,#2f7d32 100%)}
.result-banner.is-fail{background:linear-gradient(135deg,#8e1b28 0%,var(--red) 100%)}
.result-badge{display:inline-block;background:rgba(255,255,255,.18);font-weight:900;font-size:.875rem;letter-spacing:.15em;padding:.375rem 1rem;border-radius:20px;margin-bottom:.75rem}
.result-verdict{font-weight:900;font-size:2.25rem;letter-spacing:-.02em;margin:0}
.result-verdict-sub{color:rgba(255,255,255,.82);font-size:.9375rem;margin:.5rem 0 0}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.75rem}
.rstat{background:rgba(255,255,255,.12);border-radius:14px;padding:1rem .5rem}
.rstat-num{font-weight:900;font-size:1.75rem;line-height:1}
.rstat-label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;opacity:.85;margin-top:.375rem}
.result-actions{display:flex;gap:.75rem;margin:1.5rem 0;flex-wrap:wrap}
.result-actions .btn{flex:1;text-align:center;min-width:200px}
.result-perfect{background:#e8f5e9;color:var(--success);border-radius:16px;padding:1.5rem;text-align:center;font-weight:700}
.review-list{display:grid;gap:.875rem}
.review-card{background:white;border:1px solid var(--line);border-radius:16px;padding:1.25rem}
.review-head{display:flex;gap:.875rem;margin-bottom:1rem}
.review-num{flex-shrink:0;font-weight:900;font-size:1.125rem;color:var(--navy);background:var(--cream-warm);width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.review-question-en{font-weight:700;font-size:1rem;color:var(--ink);line-height:1.35}
.review-question-ar{font-size:.875rem;color:var(--ink-soft);margin-top:.25rem}
.review-answers{display:grid;gap:.75rem;padding-top:.875rem;border-top:1px solid var(--line)}
.review-label{display:block;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:.25rem}
.review-val{font-weight:600;font-size:.9375rem}
.review-wrong-val{color:var(--red)}
.review-skipped{color:var(--ink-soft);font-style:italic}
.review-accepted-vals{display:flex;flex-wrap:wrap;gap:.375rem}
.review-correct-val{color:var(--success);background:#e8f5e9;padding:.1875rem .625rem;border-radius:8px}
.review-verified{font-size:.75rem;color:var(--warn);font-weight:600;margin-top:.5rem}

/* ============ Phase 11 responsive ============ */
@media (max-width:991px){
  .qnum-block{position:static}
}
@media (max-width:767px){
  .progress-strip{grid-template-columns:repeat(2,1fr)}
  .mode-grid{grid-template-columns:1fr}
  .home-hero-number{font-size:4rem}
  .qnum-block{display:none}
  .qnum-inline{display:block}
  .question-en{font-size:1.1875rem}
  .practice-controls{gap:.5rem}
  .practice-controls .btn{flex:1;min-width:0}
  .practice-controls .submit-answer{margin-inline-start:0;order:-1;flex-basis:100%}
  .toggle-6520{flex-direction:column;align-items:flex-start}
  .result-verdict{font-size:1.875rem}
}

/* ============ Phase 12 · Flash Cards ============ */
.fc-shell{max-width:760px;margin:0 auto;padding:1.25rem 1rem 2.5rem}
.fc-filters{display:flex;gap:.5rem;overflow-x:auto;padding:.25rem 0 .75rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fc-filters::-webkit-scrollbar{display:none}
.fc-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:.375rem;background:white;border:1.5px solid var(--line);color:var(--ink-soft);border-radius:20px;padding:.4375rem .875rem;font-size:.8125rem;font-weight:700;white-space:nowrap;cursor:pointer;min-height:38px}
.fc-chip:hover{border-color:var(--navy)}
.fc-chip.active{background:var(--navy);border-color:var(--navy);color:white}
.fc-chip-n{background:rgba(0,0,0,.08);border-radius:10px;padding:.0625rem .4375rem;font-size:.75rem;font-weight:800}
.fc-chip.active .fc-chip-n{background:rgba(255,255,255,.2);color:var(--gold-soft)}

.fc-stage{display:flex;align-items:center;justify-content:center;min-height:400px;perspective:1600px;margin:.5rem 0 1.25rem}
.fc-card{width:100%;max-width:640px;height:400px;cursor:pointer;outline:none}
.fc-card:focus-visible{box-shadow:0 0 0 3px var(--gold);border-radius:20px}
.fc-card-inner{position:relative;width:100%;height:100%;transition:transform .55s cubic-bezier(.3,.7,.3,1);transform-style:preserve-3d}
.fc-card-inner.flipped{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:20px;padding:1.75rem;display:flex;flex-direction:column;overflow:hidden}
.fc-front{background:white;border:1px solid var(--line);box-shadow:0 12px 34px rgba(12,35,64,.08)}
.fc-front-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.fc-section-tag{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--gold);background:var(--cream-warm);padding:.25rem .625rem;border-radius:8px}
.fc-qnum{font-size:.8125rem;font-weight:700;color:var(--ink-soft)}
.fc-qnum.is-6520{color:var(--red)}
.fc-front-body{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;gap:.75rem;padding:.5rem 0}
.fc-question-en{font-size:1.5rem;font-weight:800;color:var(--navy);line-height:1.28;letter-spacing:-.01em}
.fc-question-ar{font-size:1.25rem;font-weight:700;color:var(--ink-soft);line-height:1.5}
.fc-front-bottom{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.fc-voice{display:flex;gap:.5rem}
.fc-tap-hint{font-size:.75rem;color:var(--ink-soft);font-weight:600;opacity:.75}

.fc-back{background:linear-gradient(150deg,var(--navy) 0%,var(--navy-soft) 100%);color:white;transform:rotateY(180deg);justify-content:center;text-align:center;gap:1rem}
.fc-back-label{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-soft)}
.fc-answers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem;align-items:center}
/* Accepted-answer list: a flash card REVEALS the answers (any one is acceptable at
   the interview) — it is not a multiple-choice question, so these read as a bulleted
   list, not selectable buttons. Selecting/grading lives in Practice mode. */
.fc-answer{display:flex;align-items:baseline;gap:.5rem;text-align:start;background:transparent;border:none;border-radius:0;padding:.125rem .25rem;min-width:auto;cursor:default}
.fc-answer::before{content:"•";flex:0 0 auto;color:var(--gold-soft);font-weight:800;font-size:1.1rem;line-height:1}
.fc-answer-empty::before{content:none}
.fc-answer-main{display:block;font-size:1.1875rem;font-weight:700;color:white}
.fc-answer-ar{display:block;font-size:.9375rem;color:var(--gold-soft);margin-top:.1875rem}
.fc-answer-empty{color:var(--gold-soft)}
/* Answer playback sits on the dark back face, so it inverts the default
   voice-btn palette — white-on-navy hover would vanish into the card. */
.fc-voice-back{justify-content:center}
.fc-voice-back .voice-btn{background:rgba(255,255,255,.08);border-color:var(--gold-soft);color:white}
.fc-voice-back .voice-btn:hover{background:white;color:var(--navy);border-color:white}
.fc-voice-back .voice-btn.playing{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.fc-back-hint{font-size:.8125rem;color:var(--gold-soft);font-style:italic}
.fc-back-verified{font-size:.75rem;color:var(--gold-soft);font-weight:600;background:rgba(0,0,0,.2);padding:.375rem .75rem;border-radius:8px;display:inline-block;margin:0 auto}

.fc-controls{display:flex;align-items:center;justify-content:center;gap:.625rem;flex-wrap:wrap}
.fc-nav-btn{width:48px;height:48px;border-radius:50%;background:white;border:1.5px solid var(--line);color:var(--navy);font-size:1.5rem;line-height:1;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.fc-nav-btn:hover{border-color:var(--navy);background:var(--navy);color:white}
.fc-action{background:white;border:1.5px solid var(--line);color:var(--navy);border-radius:24px;padding:.625rem 1.125rem;font-size:.875rem;font-weight:700;cursor:pointer;min-height:44px}
.fc-action:hover{border-color:var(--navy)}
.fc-learning.is-active{background:var(--warn);border-color:var(--warn);color:white}
.fc-learned.is-active{background:var(--success);border-color:var(--success);color:white}
.fc-meta{text-align:center;font-size:.8125rem;color:var(--ink-soft);font-weight:600;margin-top:1rem}
.fc-empty{text-align:center;color:var(--ink-soft);padding:3rem 1rem}
.fc-empty-icon{font-size:2.5rem;margin-bottom:.5rem}

/* body[dir=rtl] arrows point the natural direction */
body[dir="rtl"] .fc-nav-btn{transform:scaleX(-1)}

/* ============ Phase 12 · All Questions ============ */
.q-shell{max-width:900px;margin:0 auto;padding:0 1rem 2.5rem}
.q-searchbar{position:sticky;top:0;z-index:20;background:var(--cream);padding:.875rem 0 .75rem;margin:0 -1rem;padding-inline:1rem;border-bottom:1px solid var(--line)}
.q-search-row{display:flex;gap:.5rem;flex-wrap:wrap}
.q-search-field{position:relative;flex:1 1 240px;display:flex;align-items:center}
.q-search-icon{position:absolute;inset-inline-start:.875rem;font-size:.9375rem;opacity:.5;pointer-events:none}
.q-search-input{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:.625rem .875rem .625rem 2.375rem;font-size:.9375rem;background:white;min-height:44px}
body[dir="rtl"] .q-search-input{padding:.625rem 2.375rem .625rem .875rem}
.q-search-input:focus{outline:none;border-color:var(--navy)}
.q-section-select{border:1.5px solid var(--line);border-radius:10px;padding:.625rem .875rem;font-size:.9375rem;background:white;min-height:44px;font-weight:600;color:var(--navy)}
.q-search-btn{min-height:44px;padding-block:.5rem}
.q-chips{display:flex;gap:.5rem;overflow-x:auto;padding-top:.625rem;scrollbar-width:none}
.q-chips::-webkit-scrollbar{display:none}
.q-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:.375rem;background:white;border:1.5px solid var(--line);color:var(--ink-soft);border-radius:20px;padding:.375rem .8125rem;font-size:.8125rem;font-weight:700;white-space:nowrap;text-decoration:none;min-height:36px}
.q-chip:hover{border-color:var(--navy);color:var(--navy)}
.q-chip.active{background:var(--navy);border-color:var(--navy);color:white}
.q-chip-n{background:rgba(0,0,0,.08);border-radius:10px;padding:.0625rem .4375rem;font-size:.75rem;font-weight:800}
.q-chip.active .q-chip-n{background:rgba(255,255,255,.2);color:var(--gold-soft)}

.q-list{display:flex;flex-direction:column;gap:.875rem;margin-top:1.25rem}
.q-row{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;background:white;border:1px solid var(--line);border-radius:14px;padding:1.125rem 1.25rem}
.q-num{font-weight:900;font-size:1.25rem;color:var(--gold);line-height:1;padding-top:.125rem}
.q-body{min-width:0}
.q-question-en{font-weight:700;font-size:1rem;color:var(--navy);line-height:1.4}
.q-question-ar{font-size:.9375rem;color:var(--ink-soft);margin-top:.1875rem;line-height:1.5}
.q-answers{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.625rem}
.q-ans-pill{font-size:.8125rem;font-weight:600;color:var(--success);background:#e8f5e9;border:1px solid #bfe3c2;padding:.25rem .625rem;border-radius:8px}
.q-ans-voice{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.5rem}
.q-ans-voice .voice-btn{padding:.25rem .625rem;min-height:38px;font-size:.75rem}
.q-ans-empty{color:var(--ink-soft);background:var(--cream-warm);border-color:var(--line)}
.q-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.625rem}
.q-sec-pill{font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:.1875rem .5625rem;border-radius:8px;color:white}
.q-sec-pill.sec-gov{background:var(--navy)}
.q-sec-pill.sec-hist{background:var(--red)}
.q-sec-pill.sec-sym{background:var(--gold);color:var(--navy)}
.q-tag-6520{font-size:.6875rem;font-weight:800;color:var(--red);background:#fdecee;border:1px solid #f5c6cc;padding:.1875rem .5rem;border-radius:8px}
.q-tag-state{font-size:.6875rem;font-weight:700;color:var(--warn);background:#fff4e0;border:1px solid #f0d9a8;padding:.1875rem .5rem;border-radius:8px}
.q-freshness{font-size:.6875rem;color:var(--ink-soft);font-weight:600;font-style:italic}
.q-actions{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
.q-bookmark{background:none;border:0;cursor:pointer;font-size:1.375rem;line-height:1;color:var(--gold);padding:.25rem;min-height:44px;min-width:44px}
.q-bookmark.is-on{color:var(--gold)}
.q-bookmark:not(.is-on) .q-bookmark-star{color:var(--line)}
.q-bookmark:hover .q-bookmark-star{color:var(--gold)}
.q-voice{display:flex;flex-direction:column;gap:.375rem}
.q-voice .voice-btn span:not(.voice-lang){display:none}
.q-voice .voice-btn{padding:.375rem .5rem;min-height:38px}
.q-loadmore{text-align:center;margin-top:1.5rem}
.q-empty{text-align:center;color:var(--ink-soft);padding:3rem 1rem}
.q-empty-icon{font-size:2.5rem;margin-bottom:.5rem}
.q-print-header{display:none}

@media (max-width:767px){
  .fc-stage{min-height:0;margin-bottom:1rem}
  .fc-card{max-width:none;width:90vw;height:auto;min-height:360px}
  .fc-face{position:relative;height:auto;min-height:360px}
  .fc-question-en{font-size:1.25rem}
  .fc-question-ar{font-size:1.0625rem}
  .fc-controls{gap:.5rem}
  .fc-action{flex:1 1 auto;padding-inline:.75rem;font-size:.8125rem}
  .fc-shuffle{order:5;flex-basis:100%}

  .q-row{grid-template-columns:auto 1fr;gap:.75rem}
  .q-actions{grid-column:1 / -1;flex-direction:row;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:.625rem}
  .q-voice{flex-direction:row}
  .q-search-btn{flex:1 1 100%}
}

/* Mobile flip: use height animation instead of 3D (iOS Safari backface reliability) */
@media (max-width:767px){
  .fc-stage{perspective:none}
  .fc-card-inner{transform-style:flat;transition:none}
  .fc-card-inner.flipped{transform:none}
  .fc-card-inner .fc-back{display:none}
  .fc-card-inner.flipped .fc-front{display:none}
  .fc-card-inner.flipped .fc-back{display:flex;transform:none}
}

@media print{
  .app-nav,.loc-banner,.q-searchbar,.q-actions,.q-ans-voice,.q-loadmore,.alert-strip,main>.alert-strip{display:none!important}
  .q-shell{max-width:none;padding:0}
  .q-print-header{display:block;text-align:center;margin-bottom:1rem}
  .q-print-header h1{font-size:1.375rem;font-weight:800;color:#000}
  .q-print-header p{font-size:.8125rem;color:#333}
  .q-list{display:block;column-count:2;column-gap:1.25rem;margin-top:0}
  .q-row{display:block;break-inside:avoid;border:1px solid #ccc;box-shadow:none;margin-bottom:.75rem;padding:.75rem}
  .q-num{color:#000;display:inline}
  .q-question-en{color:#000}
  .q-ans-pill{color:#000;background:none;border:1px solid #999}
  body,html{background:white}
}

/* ===== Freshness footer (reusable partial) ===== */
.freshness-note{margin-top:.75rem;font-size:.75rem;line-height:1.45}
.freshness-note.sm{font-size:.75rem}
.freshness-note strong{font-weight:700}
.freshness-note .small{margin-top:.15rem;font-size:.6875rem}
.freshness-note a{color:var(--warn);font-weight:700;text-decoration:underline}

/* ===== Reading & Writing ===== */
.rw-header{margin-bottom:1.25rem}
.rw-header h1{font-size:1.5rem;font-weight:800;color:var(--navy);letter-spacing:-.01em;margin:0}
.rw-header-note{margin:.25rem 0 0;font-size:.875rem;color:var(--ink-soft);font-weight:600}
.rw-empty{text-align:center;padding:3rem 1rem;color:var(--ink-soft)}
.rw-empty-icon{font-size:2.5rem;margin-bottom:.5rem}

.rw-panel{background:white;border:1px solid var(--line);border-radius:14px;padding:1.25rem;height:100%;box-shadow:0 1px 3px rgba(12,35,64,.05)}
.rw-panel-head{display:flex;align-items:flex-start;gap:.625rem;margin-bottom:1rem}
.rw-panel-icon{font-size:1.5rem;line-height:1}
.rw-panel-title{font-size:1.125rem;font-weight:800;color:var(--navy);margin:0}
.rw-panel-sub{margin:.125rem 0 0;font-size:.8125rem;color:var(--ink-soft)}

/* Reading */
.rw-read-box{background:var(--cream);border-inline-start:4px solid var(--gold);border-radius:8px;padding:1.25rem 1.25rem;min-height:88px;display:flex;align-items:center}
.rw-read-sentence{margin:0;font-size:1.25rem;font-weight:700;color:var(--ink);line-height:1.4}
.rw-read-voice{margin-top:1rem}
.rw-voice-lg{font-size:.9375rem;padding:.5rem .875rem}
.rw-read-actions{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:1rem}
.rw-read-status{margin-top:.875rem;font-size:.8125rem;color:var(--ink-soft);font-weight:600}

/* Writing */
.rw-hidden-box{background:var(--navy);color:var(--gold-soft);border-radius:8px;padding:1.25rem;min-height:88px;display:flex;align-items:center;justify-content:center;text-align:center}
.rw-hidden-hint{font-size:1rem;font-weight:700}
.rw-hidden-box.is-revealed{background:#e8f5e9;color:var(--success)}
.rw-hidden-box.is-revealed .rw-hidden-hint{font-size:1.1875rem}
.rw-write-play{margin-top:1rem}
.rw-play-btn{width:100%}
.rw-write-field{margin-top:1rem}
.rw-input{width:100%;padding:.75rem 1rem;border:1.5px solid var(--line);border-radius:8px;font-size:1.0625rem;font-weight:500}
.rw-input:focus{outline:none;border-color:var(--navy)}
.rw-input.is-correct{border-color:var(--success);background:#e8f5e9}
.rw-input.is-incorrect{border-color:var(--red);background:#fdeaec}
.rw-write-actions{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:1rem}
.rw-check-btn,.rw-next-btn{flex:1 1 auto}
.rw-feedback{margin-top:.875rem;font-size:.9375rem;font-weight:700;border-radius:8px;padding:.625rem .875rem}
.rw-feedback.is-correct{background:#e8f5e9;color:var(--success)}
.rw-feedback.is-incorrect{background:#fdeaec;color:var(--red)}
.rw-feedback.is-hint{background:var(--cream-warm);color:var(--ink-soft)}

@media (max-width:575px){
  .rw-read-actions .btn,.rw-write-actions .btn{flex:1 1 100%}
}