/* ===========================================================
   Self-hosted fonts (SIL OFL, free for commercial use) —
   fully offline, no external/CDN requests.
   =========================================================== */
/* Inter (Latin) */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/inter-latin-800-normal.woff2') format('woff2');}
/* IBM Plex Sans Arabic (Arabic + Latin subsets) */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-arabic-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-arabic-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-arabic-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-arabic-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122;}
/* JetBrains Mono (Latin) */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');}

/* ===========================================================
   Exam Simulator — Design tokens
   =========================================================== */
:root{
  --bg:#FFFFFF;
  --panel:#F2F4F7;
  --panel-2:#EAEDF3;
  --border:#E2E6ED;
  --text:#1F2937;
  --text-dim:#6B7280;
  --text-faint:#9CA3AF;
  --primary:#0D1B3D;
  --primary-dark:#081226;
  --primary-tint:#E7E9F0;
  --accent:#E31837;
  --accent-dark:#B91230;
  --accent-tint:#FCE8EB;
  --success:#16A34A;
  --success-tint:#EAF8EF;
  --error:#DC2626;
  --error-tint:#FCEAEA;
  --warning:#F59E0B;
  --warning-tint:#FEF3E0;
  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;
  --shadow-sm: 0 1px 2px rgba(13,27,61,.06), 0 1px 1px rgba(13,27,61,.04);
  --shadow: 0 4px 14px rgba(13,27,61,.08), 0 1px 3px rgba(13,27,61,.05);
  --shadow-lg: 0 18px 40px rgba(13,27,61,.12), 0 4px 10px rgba(13,27,61,.06);
  --font-arabic: 'IBM Plex Sans Arabic', 'Segoe UI', 'Tahoma', system-ui, -apple-system, Arial, sans-serif;
  --font-display: 'Inter', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Consolas', 'Courier New', monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-arabic);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;}
/* prefers-reduced-motion — honours accessibility preference */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ===========================================================
   Micro-interaction tokens
   Transitions use only transform/opacity/box-shadow/border-color
   to keep everything on the compositor thread (no layout thrash)
   =========================================================== */
:root{
  --ease-snap: cubic-bezier(.2,0,0,1);
  --ease-bounce: cubic-bezier(.34,1.4,.64,1);
  --t-fast: 140ms;
  --t-normal: 220ms;
}

/* ===========================================================
   Question card entrance
   =========================================================== */
@keyframes qSlideIn{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:translateY(0); }
}
.question-card{ animation:qSlideIn var(--t-normal) var(--ease-snap) both; }

/* ===========================================================
   Option items — upgraded interactive states
   =========================================================== */
.option-item{
  display:flex; align-items:flex-start; gap:12px;
  border:1.5px solid var(--border); border-radius:var(--radius); padding:13px 16px;
  cursor:pointer; background:#fff;
  transition:
    border-color var(--t-fast) var(--ease-snap),
    background    var(--t-fast) var(--ease-snap),
    box-shadow    var(--t-fast) var(--ease-snap),
    transform     var(--t-fast) var(--ease-snap);
  font-size:14.5px; line-height:1.6; position:relative; overflow:hidden;
}
.option-item::before{
  content:''; position:absolute; inset:0;
  background:var(--primary-tint); opacity:0;
  transition:opacity var(--t-fast) var(--ease-snap);
  pointer-events:none;
}
.option-item:hover{ border-color:var(--primary); transform:translateY(-1px); box-shadow:var(--shadow-sm); }
.option-item:hover::before{ opacity:1; }
.option-item:active{ transform:translateY(0) scale(.995); }

.option-item.selected{
  border-color:var(--primary); background:var(--primary-tint);
  box-shadow:0 0 0 3px rgba(13,27,61,.1);
}
.option-item.selected::before{ opacity:0; }
.option-item.locked{ cursor:default; }
.option-item.locked:hover{ transform:none; box-shadow:none; border-color:var(--border); }
.option-item.locked:hover::before{ opacity:0; }
.option-item.locked.selected:hover{ border-color:var(--primary); }

/* correct-reveal — subtle glow in */
.option-item.correct-reveal{
  border-color:var(--success); background:var(--success-tint);
  box-shadow:0 0 0 3px rgba(22,163,74,.12);
  animation:correctGlow var(--t-normal) var(--ease-snap) both;
}
@keyframes correctGlow{
  from{ box-shadow:0 0 0 0 rgba(22,163,74,.3); }
  to  { box-shadow:0 0 0 3px rgba(22,163,74,.12); }
}
/* incorrect-reveal — lightweight shake */
.option-item.incorrect-reveal{
  border-color:var(--error); background:var(--error-tint);
  box-shadow:0 0 0 3px rgba(220,38,38,.1);
  animation:wrongShake 260ms var(--ease-snap) both;
}
@keyframes wrongShake{
  0%   { transform:translateX(0); }
  20%  { transform:translateX(-5px); }
  40%  { transform:translateX(4px); }
  60%  { transform:translateX(-3px); }
  80%  { transform:translateX(2px); }
  100% { transform:translateX(0); }
}

/* option-letter chip */
.option-letter{
  flex-shrink:0; width:28px; height:28px; border-radius:8px; background:var(--panel);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px;
  font-family:var(--font-mono); color:var(--text-dim);
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.option-item:hover .option-letter{ background:var(--primary); color:#fff; transform:scale(1.05); }
.option-item.selected .option-letter{ background:var(--primary); color:#fff; }
.option-item.correct-reveal .option-letter{ background:var(--success); color:#fff; }
.option-item.incorrect-reveal .option-letter{ background:var(--error); color:#fff; }
.option-item.locked:hover .option-letter{ background:var(--panel); color:var(--text-dim); transform:none; }
.option-item.locked.selected:hover .option-letter{ background:var(--primary); color:#fff; }

/* SVG result badge (replaces emoji) */
.option-result-icon{ flex-shrink:0; display:flex; align-items:center; justify-content:center; }

/* ===========================================================
   Config labels with icons
   =========================================================== */
.config-label{
  font-size:12.5px; font-weight:700; color:var(--text-dim); margin-bottom:6px;
  display:flex; align-items:center; gap:6px;
}
.config-label svg{ opacity:.7; }

/* Info chips under bank-summary */
.bank-info-chips{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;
}
.bank-info-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--panel); border:1px solid var(--border); border-radius:999px;
  padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--text-dim);
}
.bank-info-chip svg{ color:var(--primary); }

/* ===========================================================
   Navigator cell — correct/incorrect post-review states
   =========================================================== */
.nav-cell{
  aspect-ratio:1; border-radius:7px; border:1.5px solid var(--border); background:var(--panel);
  font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--text-dim);
  display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative;
  transition:border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.nav-cell:hover{ border-color:var(--primary); transform:scale(1.07); }
.nav-cell.cell-answered{ background:var(--primary-tint); color:var(--primary-dark); border-color:var(--primary); }
.nav-cell.cell-current{
  outline:2.5px solid var(--primary); outline-offset:2px;
  background:var(--primary); color:#fff; border-color:transparent;
}
.nav-cell.cell-flagged::after{
  content:''; position:absolute; top:-4px; inset-inline-end:-4px; width:9px; height:9px;
  background:var(--warning); border-radius:50%; border:2px solid #fff;
}
.nav-cell.cell-correct{ background:var(--success-tint); border-color:var(--success); color:var(--success); }
.nav-cell.cell-incorrect{ background:var(--error-tint); border-color:var(--error); color:var(--error); }

/* ===========================================================
   Progress bar — smoother + coloured at high progress
   =========================================================== */
.progressbar{ height:5px; background:var(--panel); border-radius:999px; overflow:hidden; }
.progressbar-fill{
  height:100%; background:var(--primary); border-radius:999px;
  transition:width .4s var(--ease-snap); width:0%;
}

/* ===========================================================
   Timer warning pulse (already existed, this refines it)
   =========================================================== */
.timer{ display:flex; align-items:center; gap:6px; }
.timer.timer-danger{
  background:var(--error-tint); color:var(--error);
  animation:timerPulse .9s ease-in-out infinite;
}
@keyframes timerPulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.65; transform:scale(1.04); }
}

/* ===========================================================
   Feedback card — entrance + SVG icon in head
   =========================================================== */
.feedback-card{
  margin-top:20px; border-radius:var(--radius); overflow:hidden; border:1.5px solid var(--border);
  animation:feedbackSlideIn var(--t-normal) var(--ease-snap) both;
}
@keyframes feedbackSlideIn{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(0); }
}
.feedback-head{
  padding:12px 16px; font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px;
}
.feedback-head.is-correct{ background:var(--success-tint); color:var(--success); }
.feedback-head.is-incorrect{ background:var(--error-tint); color:var(--error); }
.feedback-head svg{ flex-shrink:0; }
.feedback-body{ padding:16px 18px; background:var(--panel); }

/* ===========================================================
   Domain perf bar — colour by score
   =========================================================== */
.domain-perf-bar-fill{
  height:100%; background:var(--primary); border-radius:999px;
  transition:width 1s var(--ease-bounce);
}
.domain-perf-bar-fill.perf-good { background:var(--success); }
.domain-perf-bar-fill.perf-mid  { background:var(--warning); }
.domain-perf-bar-fill.perf-low  { background:var(--error); }

/* ===========================================================
   Button press micro-interaction
   =========================================================== */
.btn{ transition:transform var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.btn:active:not(:disabled){ transform:scale(.96); }
.btn:disabled{ opacity:.5; }

/* ===========================================================
   Stat cards — entrance stagger via nth-child delay
   =========================================================== */
.stat-card{
  background:var(--panel); border-radius:var(--radius); padding:18px; text-align:center;
  animation:qSlideIn var(--t-normal) var(--ease-snap) both;
}
.stat-card:nth-child(1){ animation-delay: 0ms; }
.stat-card:nth-child(2){ animation-delay:60ms; }
.stat-card:nth-child(3){ animation-delay:120ms; }
.stat-card:nth-child(4){ animation-delay:180ms; }
.stat-card:nth-child(5){ animation-delay:240ms; }
.stat-card:nth-child(6){ animation-delay:300ms; }

/* ===========================================================
   Domain tag badge in toolbar — domain-coloured strip
   =========================================================== */
.exam-domain-tag{
  display:inline-block; font-size:11.5px; font-weight:700; font-family:var(--font-mono);
  background:var(--primary-tint); color:var(--primary); padding:4px 10px; border-radius:999px;
  max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}


/* ===========================================================
   Top bar
   =========================================================== */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
}
.brand{
  display:flex; align-items:center; gap:8px;
  background:none; border:none; cursor:pointer; padding:4px;
  color:var(--text);
}
.brand-mark{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px;
  background:var(--primary); color:#fff;
}
.brand-text{font-family:var(--font-display); font-weight:800; font-size:17px; letter-spacing:-.01em;}
.brand-accent{color:var(--accent);}
.brand-titles{display:flex; flex-direction:column; align-items:flex-start; line-height:1.2;}
.brand-subtitle{font-size:11px; color:var(--text-dim); font-weight:600; margin-top:1px;}
.brand-logo-img{width:30px; height:30px; border-radius:7px; object-fit:contain; background:#fff;}
.topbar-right{display:flex; align-items:center; gap:12px;}
.topbar-meta{font-size:13px; color:var(--text-dim); font-family:var(--font-mono);}

/* ===========================================================
   Modal (customize/branding)
   =========================================================== */
.modal-overlay{
  position:fixed; inset:0; z-index:60; background:rgba(17,24,39,.45);
  display:flex; align-items:center; justify-content:center; padding:20px;
  backdrop-filter:blur(2px); animation:fadeUp .2s ease;
}
.modal{
  background:#fff; border-radius:var(--radius-lg); width:100%; max-width:520px;
  max-height:90vh; overflow-y:auto; padding:24px; box-shadow:var(--shadow-lg);
}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;}
.customize-fields{display:flex; flex-direction:column; gap:12px; margin:18px 0;}
.modal-actions{display:flex; justify-content:space-between; gap:10px; margin-top:8px;}
.logo-row{display:flex; align-items:center; gap:14px;}
.logo-preview{
  width:64px; height:64px; border-radius:12px; border:1.5px dashed var(--border);
  display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--text-faint);
  background:var(--panel); overflow:hidden; flex-shrink:0;
}
.logo-preview img{width:100%; height:100%; object-fit:contain;}
.logo-actions{display:flex; flex-direction:column; gap:6px;}

/* Branding banner on exam + results */
.brand-banner{
  display:flex; align-items:center; gap:12px; padding:12px 16px; margin-bottom:18px;
  background:var(--panel); border-radius:var(--radius); border:1px solid var(--border);
}
.brand-banner img{width:36px; height:36px; border-radius:8px; object-fit:contain; background:#fff;}
.brand-banner-text{display:flex; flex-direction:column; line-height:1.3;}
.brand-banner-inst{font-weight:700; font-size:14px;}
.brand-banner-meta{font-size:12px; color:var(--text-dim);}
.results-footer-note{text-align:center; color:var(--text-faint); font-size:12.5px; padding:8px 0 24px;}

/* ===========================================================
   Layout shells
   =========================================================== */
#app{max-width:1100px; margin:0 auto; padding:0 24px 80px;}
.screen{animation: fadeUp .35s ease both;}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* ===========================================================
   Home / Hero
   =========================================================== */
.hero{padding:64px 0 36px; text-align:center; max-width:680px; margin:0 auto;}
.hero-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
  color:var(--primary); text-transform:uppercase; margin:0 0 18px;
  display:inline-block; padding:5px 12px; background:var(--primary-tint); border-radius:999px;
}
.hero-title{
  font-family:var(--font-display); font-weight:800; font-size:38px; line-height:1.18;
  letter-spacing:-.02em; margin:0 0 16px; color:var(--text);
}
.hero-title-accent{color:var(--primary);}
.hero-sub{font-size:15.5px; line-height:1.7; color:var(--text-dim); margin:0;}

@media (max-width:640px){
  .hero{padding:36px 0 24px;}
  .hero-title{font-size:28px;}
}

/* ===========================================================
   Upload zone
   =========================================================== */
.upload-zone{
  border:2px dashed var(--border);
  border-radius:var(--radius-lg);
  background:var(--panel);
  padding:8px;
  max-width:560px; margin:0 auto 18px;
  transition:.2s border-color, .2s background;
  cursor:pointer;
}
.upload-zone:hover, .upload-zone.dragover{
  border-color:var(--primary);
  background:var(--primary-tint);
}
.upload-zone-inner{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:44px 24px; text-align:center; color:var(--text-dim);
}
.upload-zone-inner svg{color:var(--primary);}
.upload-title{font-weight:600; color:var(--text); margin:0; font-size:15.5px;}
.upload-formats{margin:0; font-size:13px; color:var(--text-faint); font-family:var(--font-mono);}

.processing-bar{
  max-width:560px; margin:0 auto 18px;
  display:flex; align-items:center; gap:10px; justify-content:center;
  font-size:14px; color:var(--text-dim);
}
.processing-ring svg circle#processingRingProgress{
  animation: spin 1.1s linear infinite;
  transform-origin:center;
}
@keyframes spin{to{transform:rotate(270deg);}}

/* ===========================================================
   Bank summary + config
   =========================================================== */
.bank-summary{
  max-width:760px; margin:0 auto;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:24px; box-shadow:var(--shadow-sm);
}
.bank-summary-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:18px; margin-bottom:18px; border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.bank-summary-count{font-family:var(--font-display); font-weight:800; font-size:22px; margin:0; letter-spacing:-.01em;}
.bank-summary-name{margin:2px 0 0; font-size:13px; color:var(--text-faint); font-family:var(--font-mono); word-break:break-all;}
.bank-summary-actions{display:flex; gap:8px;}

.demo-notice{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--accent-tint); border:1px solid #F3C2CA; border-radius:var(--radius);
  padding:12px 16px; margin-bottom:18px;
}
.demo-notice-text{font-size:13px; color:var(--accent-dark); line-height:1.6; flex:1; min-width:200px;}
.demo-notice-cta{
  flex-shrink:0; background:var(--accent); color:#fff; font-size:12.5px; font-weight:700;
  padding:8px 16px; border-radius:999px; text-decoration:none; white-space:nowrap;
}
.demo-notice-cta:hover{background:var(--accent-dark);}

.config-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-bottom:18px;
}
@media (max-width:560px){.config-grid{grid-template-columns:1fr;}}
.config-card{display:flex; flex-direction:column; gap:6px;}
.config-card-toggles{grid-column:1/-1; flex-direction:column; gap:10px; background:var(--panel); padding:14px; border-radius:var(--radius);}
.config-label{font-size:12.5px; font-weight:600; color:var(--text-dim);}
.select, .input{
  border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px;
  font-size:14.5px; background:#fff; color:var(--text); width:100%; min-width:0; box-sizing:border-box;
}
.select:focus, .input:focus, .textarea:focus{outline:2px solid var(--primary); outline-offset:1px; border-color:var(--primary);}
.toggle-row{display:flex; align-items:center; gap:10px; font-size:14px; cursor:pointer; color:var(--text);}
.toggle-row input{width:17px; height:17px; accent-color:var(--primary); cursor:pointer;}

.home-cta-row{display:flex; gap:12px; flex-wrap:wrap;}

.issues-note{
  max-width:760px; margin:18px auto 0;
  background:var(--warning-tint); border:1px solid #F3D9A8; border-radius:var(--radius);
  padding:14px 16px; font-size:13.5px; color:#92620A; line-height:1.6;
}

/* ===========================================================
   Buttons
   =========================================================== */
.btn{
  border:none; border-radius:var(--radius-sm); cursor:pointer;
  font-weight:600; font-size:14px; padding:10px 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:.15s transform, .15s box-shadow, .15s background, .15s border-color, .15s color;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99);}
.btn:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-dark); box-shadow:var(--shadow);}
.btn-outline{background:#fff; color:var(--text); border:1.5px solid var(--border);}
.btn-outline:hover{border-color:var(--primary); color:var(--primary);}
.btn-ghost{background:var(--panel); color:var(--text-dim); border:1px solid transparent;}
.btn-ghost:hover{background:var(--panel-2); color:var(--text);}
.btn-success{background:var(--success); color:#fff;}
.btn-success:hover{background:#128a3d;}
.btn-error{background:#fff; color:var(--error); border:1.5px solid #F3C8C8;}
.btn-error:hover{background:var(--error-tint);}
.btn-lg{padding:13px 26px; font-size:15px; border-radius:var(--radius);}
.btn-sm{padding:7px 13px; font-size:12.5px; border-radius:7px;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
.btn-flag{position:relative;}
.btn-flag.is-flagged{background:var(--warning-tint); color:#92620A;}
.btn-flag.is-flagged svg{fill:#92620A;}

/* ===========================================================
   Edit / Review extracted questions
   =========================================================== */
.edit-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:32px 0 20px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-bottom:20px;
}
.edit-title{font-family:var(--font-display); font-size:22px; font-weight:800; margin:0 0 6px; letter-spacing:-.01em;}
.edit-sub{margin:0; color:var(--text-dim); font-size:14px; max-width:560px; line-height:1.6;}
.edit-head-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.edit-count{font-family:var(--font-mono); font-size:13px; color:var(--text-faint); background:var(--panel); padding:5px 10px; border-radius:999px;}

.edit-list{display:flex; flex-direction:column; gap:14px;}
.edit-item{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow-sm);
}
.edit-item-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;}
.edit-item-id{font-family:var(--font-mono); font-size:12px; color:var(--text-faint);}
.edit-item-badges{display:flex; gap:6px;}
.badge{font-size:11px; padding:3px 9px; border-radius:999px; font-family:var(--font-mono);}
.badge-domain{background:var(--primary-tint); color:var(--primary-dark);}
.badge-issue{background:var(--warning-tint); color:#92620A;}
.edit-item-actions{display:flex; gap:6px;}
.icon-btn{
  background:none; border:1px solid var(--border); border-radius:7px; cursor:pointer;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--text-dim);
}
.icon-btn:hover{border-color:var(--error); color:var(--error);}
.edit-field{margin-bottom:10px;}
.edit-field label{display:block; font-size:11.5px; font-weight:600; color:var(--text-faint); margin-bottom:4px;}
.edit-field textarea, .edit-field input{
  width:100%; border:1px solid var(--border); border-radius:7px; padding:8px 10px;
  font-size:14px; color:var(--text); background:var(--panel); resize:vertical; font-family:inherit;
}
.edit-options-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px;}
.edit-just-grid{display:flex; flex-direction:column; gap:8px;}
.edit-just-row{display:flex; gap:8px; align-items:flex-start;}
.edit-just-row .just-letter{margin-top:6px;}
.edit-just-row textarea{flex:1;}
@media (max-width:560px){.edit-options-grid{grid-template-columns:1fr;}}
.edit-option-row{display:flex; align-items:center; gap:6px;}
.edit-option-row input[type=radio]{accent-color:var(--success); width:16px; height:16px;}

/* ===========================================================
   Manual paste panel
   =========================================================== */
.manual-panel{max-width:680px; margin:0 auto; padding:32px 0;}
.textarea{
  width:100%; min-height:160px; border:1.5px solid var(--border); border-radius:var(--radius);
  padding:14px; font-size:14px; line-height:1.6; margin:14px 0; resize:vertical; font-family:var(--font-mono);
}
.divider{border:none; border-top:1px solid var(--border); margin:20px 0;}
.manual-fields{display:flex; flex-direction:column; gap:12px;}
.manual-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:20px;}

/* ===========================================================
   Exam screen
   =========================================================== */
.screen-exam{padding-top:24px;}
.exam-shell{display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:24px; align-items:start;}
.btn-open-navigator{display:none;}
.navigator-backdrop{display:none;}
.sidebar-drawer-head{display:none;}

@media (max-width:840px){
  .exam-shell{grid-template-columns:1fr; overflow-x:hidden;}
  .btn-open-navigator{display:inline-flex;}
  .exam-sidebar{
    position:fixed; inset-inline:0; bottom:0; top:auto; left:0; right:0;
    max-height:78vh; overflow-y:auto; z-index:70;
    border-radius:20px 20px 0 0; box-shadow:0 -8px 30px rgba(0,0,0,.18);
    transform:translateY(100%); transition:transform .25s ease;
    margin:0; width:100%; box-sizing:border-box;
  }
  .exam-sidebar.is-open{transform:translateY(0);}
  .navigator-backdrop{
    display:block; position:fixed; inset:0; background:rgba(15,17,23,.45);
    z-index:60; opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .navigator-backdrop.is-open{opacity:1; pointer-events:auto;}
  .sidebar-drawer-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
  .sidebar-drawer-head .sidebar-title{margin:0;}
  .sidebar-close-btn{
    width:30px; height:30px; border-radius:50%; border:1px solid var(--border); background:var(--panel);
    color:var(--text-dim); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
}

.exam-toolbar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.exam-progress-wrap{flex:1; min-width:200px;}
.exam-qcount{font-size:13px; color:var(--text-dim); font-family:var(--font-mono); display:block; margin-bottom:6px;}
.progressbar{height:6px; background:var(--panel); border-radius:999px; overflow:hidden;}
.progressbar-fill{height:100%; background:var(--primary); border-radius:999px; transition:width .3s ease; width:0%;}
.exam-toolbar-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.exam-domain-tag{font-size:12px; font-family:var(--font-mono); background:var(--panel); color:var(--text-dim); padding:5px 10px; border-radius:999px;}
.timer{font-family:var(--font-mono); font-weight:700; font-size:15px; background:var(--panel); padding:7px 13px; border-radius:8px; color:var(--text);}
.timer.timer-warn{background:var(--warning-tint); color:#92620A;}
.timer.timer-danger{background:var(--error-tint); color:var(--error); animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.55;}}

.question-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px; box-shadow:var(--shadow-sm); min-height:320px;
}
.question-meta{margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.qid{font-family:var(--font-mono); font-size:12px; color:var(--text-faint);}
.lang-toggle{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:var(--primary-tint); color:var(--primary-dark); border:1px solid transparent;
  border-radius:999px; padding:5px 13px; font-size:12.5px; font-weight:600;
  font-family:var(--font-arabic); transition:.15s background, .15s border-color;
}
.lang-toggle:hover{background:var(--primary-tint); border-color:var(--primary);}
.lang-toggle.is-arabic{background:var(--success-tint); color:var(--success);}
.lang-toggle:disabled{opacity:.4; cursor:not-allowed; background:var(--panel); color:var(--text-faint);}
.question-text{font-size:17px; line-height:1.75; color:var(--text); margin:0 0 22px; font-weight:500;}

.options-list{display:flex; flex-direction:column; gap:10px;}
.option-text{flex:1; min-width:0;}
.option-result-icon{flex-shrink:0; display:flex; align-items:center; justify-content:center;}


.feedback-body{padding:16px 18px; background:var(--panel);}
.feedback-row{margin:0 0 10px; font-size:14px;}
.feedback-label{font-weight:700; color:var(--text-dim);}
.feedback-justification{font-size:14px; line-height:1.7; color:var(--text);}
.just-intro{margin:0 0 9px; font-size:12px; font-weight:700; color:var(--text-dim);}
.just-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
.just-row{
  display:flex; gap:10px; padding:11px 13px 11px 14px; border-radius:9px;
  background:#fff; border:1px solid var(--border); border-inline-start:4px solid var(--text-faint);
}
.just-correct{background:var(--success-tint); border-color:#BfE6CC; border-inline-start-color:var(--success);}
.just-chosen{background:var(--error-tint); border-color:#F3C8C8; border-inline-start-color:var(--error);}
.just-wrong{background:var(--panel); border-color:var(--border); border-inline-start-color:#C7CCD6;}
.just-letter{flex-shrink:0; width:24px; height:24px; border-radius:6px; background:var(--panel); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:12px; color:var(--text-dim);}
.just-correct .just-letter{background:var(--success); color:#fff;}
.just-chosen .just-letter{background:var(--error); color:#fff;}
.just-wrong .just-letter{background:#fff; color:var(--text-faint); border:1px solid var(--border);}
.just-text{flex:1; font-size:13.5px; line-height:1.65;}
.just-tag{display:block; font-size:11.5px; font-weight:700; margin-top:4px; opacity:.9;}
.just-correct .just-tag{color:var(--success);}
.just-chosen .just-tag{color:var(--error);}
.just-wrong .just-tag{color:var(--text-faint); font-weight:600;}

.exam-nav-buttons{display:flex; gap:10px; margin-top:20px; justify-content:flex-end;}

.exam-sidebar{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:18px; position:sticky; top:90px;
}
.sidebar-title{font-size:12.5px; font-weight:700; color:var(--text-dim); margin:0 0 12px;}
.navigator-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin-bottom:14px;}
.sidebar-legend{display:flex; flex-direction:column; gap:6px; font-size:11.5px; color:var(--text-dim); margin-bottom:14px;}
.sidebar-legend span{display:flex; align-items:center; gap:6px;}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block;}
.dot-current{background:var(--primary); box-shadow:0 0 0 2px var(--primary-tint);}
.dot-answered{background:var(--primary-tint); border:1px solid var(--primary);}
.dot-flagged{background:var(--warning);}
.dot-skipped{background:var(--panel-2); border:1px solid var(--border);}
.sidebar-end-btn{width:100%;}

/* ===========================================================
   Results
   =========================================================== */
.results-hero{display:flex; align-items:center; gap:32px; padding:48px 0 32px; flex-wrap:wrap; justify-content:center;}
.results-ring-wrap{position:relative; width:160px; height:160px; flex-shrink:0;}
.results-ring circle#resultsRingFill{transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1);}
.results-ring-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.results-pct{font-family:var(--font-display); font-size:34px; font-weight:800; letter-spacing:-.02em;}
.results-pass{font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-top:2px;}
.results-pass.pass{color:var(--success);}
.results-pass.fail{color:var(--error);}
.results-headline{text-align:center; max-width:400px;}
.results-headline h2{font-family:var(--font-display); font-size:24px; font-weight:800; margin:0 0 6px; letter-spacing:-.01em;}
.results-headline p{margin:0; color:var(--text-dim); font-size:14.5px;}

.results-stats-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:36px;
}
@media (max-width:680px){.results-stats-grid{grid-template-columns:repeat(2,1fr);}}
.stat-value{font-family:var(--font-display); font-size:22px; font-weight:800; margin:0; letter-spacing:-.01em;}
.stat-label{font-size:12px; color:var(--text-dim); margin:4px 0 0;}
.stat-card.stat-correct .stat-value{color:var(--success);}
.stat-card.stat-incorrect .stat-value{color:var(--error);}
.stat-card.stat-skipped .stat-value{color:var(--warning);}

.section-subtitle{font-size:15px; font-weight:700; margin:0 0 14px;}
.domain-perf-list{display:flex; flex-direction:column; gap:10px; margin-bottom:36px;}
.domain-perf-row{display:flex; align-items:center; gap:12px;}
.domain-perf-name{width:160px; flex-shrink:0; font-size:13.5px; color:var(--text-dim); font-family:var(--font-mono);}
.domain-perf-bar{flex:1; height:10px; background:var(--panel); border-radius:999px; overflow:hidden;}
.domain-perf-pct{width:48px; text-align:left; font-size:13px; font-weight:700; font-family:var(--font-mono);}

.results-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; padding-bottom:40px;}

/* ===========================================================
   Post-exam review
   =========================================================== */
.postreview-filter{display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap;}
.filter-chip{
  font-size:13px; padding:7px 14px; border-radius:999px; background:var(--panel); color:var(--text-dim);
  cursor:pointer; border:1px solid transparent; font-weight:600;
}
.filter-chip.active{background:var(--primary); color:#fff;}

/* ===========================================================
   Toasts
   =========================================================== */
.toast-stack{position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:100;}
.toast{
  background:var(--text); color:#fff; padding:11px 18px; border-radius:9px; font-size:13.5px;
  box-shadow:var(--shadow-lg); animation:toastIn .25s ease both;
}
.toast.toast-error{background:var(--error);}
.toast.toast-success{background:var(--success);}
@keyframes toastIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* ===========================================================
   Mobile / small-screen refinements
   =========================================================== */
@media (max-width:480px){
  #app{padding:0 14px 60px;}
  .topbar-inner{padding:11px 14px;}
  .hero{padding:28px 0 18px;}
  .upload-zone-inner{padding:28px 16px;}
  .bank-summary{padding:16px;}
  .question-card{padding:16px;}
  .question-text{font-size:15.5px; margin-bottom:16px;}
  .option-item{padding:11px 12px; gap:10px;}
  .feedback-body{padding:14px;}
  .just-row{padding:9px 10px 9px 11px;}
  .just-text{font-size:13px;}
  .exam-nav-buttons{flex-wrap:wrap;}
  .exam-nav-buttons .btn{flex:1 1 auto;}
  .exam-toolbar{gap:10px;}
  .modal{padding:16px;}
  .results-hero{gap:18px; padding:32px 0 20px;}
  .domain-perf-row{flex-wrap:wrap; row-gap:4px;}
  .domain-perf-name{width:100%;}
  .domain-perf-pct{width:auto;}
  .edit-item{padding:14px;}
}

[hidden]{display:none !important;}