:root {
  --teal-950: #083c3a;
  --teal-800: #0f5d58;
  --teal-700: #0f766e;
  --teal-100: #d8f1ec;
  --navy: #16324f;
  --coral: #ef6a5b;
  --gold: #f5b942;
  --paper: #f7f5ef;
  --white: #ffffff;
  --ink: #17312f;
  --muted: #647875;
  --line: #dfe7e3;
  --success: #15803d;
  --danger: #c2413b;
  --shadow: 0 12px 32px rgba(17, 61, 57, 0.10);
  --radius-lg: 24px;
  --radius-md: 17px;
  --radius-sm: 12px;
  --tap: 48px;
}

* { box-sizing: border-box; }

html { background: var(--paper); color-scheme: light; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 9% 4%, rgba(245, 185, 66, .13), transparent 19rem),
    var(--paper);
  color: var(--ink);
  font-family: Inter, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.app-shell {
  width: 100%;
  min-height: 100vh;
}

.screen {
  width: min(100%, 760px);
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 18px calc(104px + env(safe-area-inset-bottom));
}

.screen.no-nav { padding-bottom: 36px; }
.practice-picker { margin-bottom:16px; }
.pair-columns { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px; }
.pair-columns>div { display:grid;align-content:start;gap:8px; }
.pair-columns .answer-option { padding:12px;min-width:0;overflow-wrap:anywhere; }
.pair-preview { border:1px solid var(--teal-700);padding:12px;margin-top:12px;overflow-wrap:anywhere; }
.response-table { width:100%;border-collapse:collapse;table-layout:fixed; }
.response-table td { border:2px solid var(--teal-700);padding:18px;overflow-wrap:anywhere;min-height:60px; }
.response-table caption { text-align:start;padding:8px 0; }
.practice-picker select { margin-top:10px; }
.practice-picker p { margin-bottom:0; }
.topic-row small { display:block; color:var(--muted); }
.qc-question-meta,.qc-remarks { overflow-wrap:anywhere; }
#app > .qc-preview-banner { margin:0; }
.qc-preview-banner + .topbar { padding-top:14px; }

.qc-preview-banner {
  position: sticky; z-index: 25; top: 0; margin: 0 -18px 8px;
  padding: calc(8px + env(safe-area-inset-top)) 18px 8px;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3px 12px;
  background: #fff4cf; border-bottom: 1px solid #eacb6b; color: #65460c;
  text-align: center; font-size: 11px; box-shadow: 0 5px 15px rgba(101,70,12,.08);
}
.qc-preview-banner div { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3px 8px; }
.qc-preview-banner strong { letter-spacing: .09em; white-space: nowrap; }
.qc-preview-banner span { color: #785b22; }
.qc-preview-banner small { color: #8a6a25; font-weight: 800; white-space: nowrap; }

.topbar {
  min-height: 76px;
  padding: calc(14px + env(safe-area-inset-top)) 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand-logo {
  width: 54px; height: 54px; border-radius: 50%;
  display: block; object-fit: contain; background: var(--white);
  box-shadow: 0 8px 20px rgba(22,50,79,.18);
}
.brand-copy strong { display: block; font-size: 14px; letter-spacing: .08em; color: var(--teal-800); }
.brand-copy span { display: block; font-weight: 900; font-size: 18px; line-height: 1.05; color: var(--navy); }

.avatar-button, .icon-button {
  border: 0; background: var(--white); color: var(--navy);
  min-width: var(--tap); height: var(--tap); border-radius: 50%;
  display: grid; place-items: center; box-shadow: 0 5px 16px rgba(13,61,57,.09);
}
.avatar-button { font-size: 22px; background: var(--gold); }
.icon-button svg, .menu-item > svg, .topic-row svg { width: 22px; height: 22px; flex: 0 0 auto; }

.back-row { display: flex; align-items: center; gap: 12px; }
.page-heading { margin: 6px 0 18px; }
.page-heading h1 { font-size: clamp(26px, 7vw, 38px); margin: 0; line-height: 1.13; letter-spacing: -.04em; }
.page-heading p { color: var(--muted); margin: 7px 0 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--teal-800); font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; font-size: 12px;
}

.hero {
  position: relative;
  overflow: hidden;
  background: var(--teal-950);
  color: white;
  border-radius: 29px;
  padding: 26px 24px 25px;
  box-shadow: var(--shadow);
}
.hero::after {
  content: ""; position: absolute; width: 180px; height: 180px; right: -72px; top: -82px;
  border: 30px solid rgba(255,255,255,.075); border-radius: 50%;
}
.hero::before {
  content: ""; position: absolute; width: 90px; height: 90px; right: 38px; bottom: -58px;
  transform: rotate(45deg); background: rgba(245,185,66,.14); border-radius: 18px;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(27px, 7vw, 38px); margin: 8px 0 8px; line-height: 1.12; letter-spacing: -.04em; }
.hero p { margin: 0; color: rgba(255,255,255,.78); }
.hero-grid { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 18px; margin-top: 22px; }
.readiness strong { display: block; font-size: 31px; line-height: 1; }
.readiness span { color: rgba(255,255,255,.72); font-size: 13px; }
.progress-ring {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--gold) var(--progress, 0%), rgba(255,255,255,.14) 0);
  position: relative; font-weight: 900;
}
.progress-ring::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--teal-950); }
.progress-ring span { position: relative; z-index: 1; font-size: 13px; text-align: center; line-height: 1.1; }

.section { margin-top: 25px; }
.section-title { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 12px; }
.section-title h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.section-title p, .section-title button { margin: 0; color: var(--muted); font-size: 13px; }
.text-button { border: 0; background: transparent; color: var(--teal-700) !important; font-weight: 800; padding: 4px 0; }

.card {
  background: var(--white); border: 1px solid rgba(15,93,88,.07);
  border-radius: var(--radius-lg); padding: 18px; box-shadow: 0 7px 22px rgba(21,67,63,.065);
}
.card + .card { margin-top: 12px; }
.card.compact { padding: 15px 16px; border-radius: var(--radius-md); }

.task-list { display: grid; gap: 10px; }
.task {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px;
}
.task-icon, .subject-icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px;
  font-size: 22px; background: var(--teal-100);
}
.task strong { display: block; font-size: 15px; }
.task span { color: var(--muted); font-size: 13px; }
.task .mini-status { color: var(--teal-700); font-weight: 800; }

.primary-button, .secondary-button, .danger-button {
  border: 0; min-height: 52px; border-radius: 15px; padding: 12px 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 850; transition: transform .15s ease, opacity .15s ease;
}
.primary-button { background: var(--coral); color: white; box-shadow: 0 9px 18px rgba(239,106,91,.23); }
.secondary-button { background: var(--teal-100); color: var(--teal-950); }
.danger-button { background: #fee5e2; color: var(--danger); }
.primary-button:active, .secondary-button:active, .danger-button:active { transform: translateY(1px) scale(.99); }
.primary-button:disabled, .secondary-button:disabled { opacity: .48; cursor: not-allowed; }
.block { width: 100%; }

.stats-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 15px; }
.stat-chip { text-align: center; background: rgba(255,255,255,.08); border-radius: 14px; padding: 11px 5px; }
.stat-chip strong { display: block; font-size: 17px; }
.stat-chip span { color: rgba(255,255,255,.65); font-size: 11px; }

.focus-card { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; border-left: 5px solid var(--gold); }
.focus-card .badge-icon { width: 44px; height: 44px; border-radius: 14px; display:grid; place-items:center; background:#fff4cf; font-size:22px; }
.focus-card strong, .focus-card span { display: block; }
.focus-card span { color: var(--muted); font-size: 13px; margin-top: 2px; }

.bottom-nav {
  position: fixed; z-index: 30; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(100%, 760px); height: calc(76px + env(safe-area-inset-bottom));
  padding: 8px 12px env(safe-area-inset-bottom);
  background: rgba(255,255,255,.94); backdrop-filter: blur(16px);
  border-top: 1px solid rgba(18,86,80,.10);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
}
.nav-item {
  border: 0; background: transparent; color: #71817f; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 10px; font-weight: 750; min-width: 0;
}
.nav-item svg { width: 22px; height: 22px; stroke-width: 2; }
.nav-item.active { color: var(--teal-700); background: var(--teal-100); }

.subjects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.subject-card {
  position: relative; text-align: left; border: 1px solid var(--line); background: var(--white);
  border-radius: 20px; padding: 17px 15px; min-height: 142px;
  box-shadow: 0 5px 18px rgba(21,67,63,.055);
}
.subject-card.ready { border-color: rgba(15,118,110,.28); }
.subject-card h3 { margin: 14px 0 3px; font-size: 16px; line-height: 1.2; }
.subject-card p { margin: 0; color: var(--muted); font-size: 12px; }
.status-dot { position: absolute; top: 15px; right: 15px; width: 8px; height: 8px; border-radius: 50%; background: #bcc8c6; }
.ready .status-dot { background: #22a06b; box-shadow: 0 0 0 4px #dcfce7; }

.topic-row { display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; }
.topic-number { width: 39px; height: 39px; border-radius: 13px; display:grid; place-items:center; background: var(--teal-100); color:var(--teal-800); font-weight:900; }
.topic-row h3 { margin: 0; font-size: 16px; }
.topic-row p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.mastery-pill { font-size: 11px; font-weight: 800; border-radius: 100px; padding: 6px 9px; background:#eef3f1; color:var(--muted); white-space:nowrap; }
.mastery-pill.strong { background:#dcfce7; color:#166534; }
.mastery-pill.good { background:#dbeafe; color:#1d4ed8; }
.mastery-pill.focus { background:#fff4cf; color:#92400e; }
.mastery-pill.critical { background:#fee2e2; color:#991b1b; }

.lesson-step { position: relative; padding-left: 52px; }
.lesson-step::before { content: attr(data-step); position:absolute; left:0; top:0; width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:var(--teal-950); color:white; font-weight:900; }
.lesson-step h3 { margin: 0 0 7px; font-size: 17px; }
.lesson-step p { margin: 0; color: var(--muted); }
.memory-box { margin-top:10px; background:#fff7db; border-radius:13px; padding:13px; color:#65460c; font-weight:650; }
.verification-card { margin-top:18px; border:1px dashed #d8b74d; border-radius:15px; padding:14px; background:#fffaf0; color:#684c12; }
.verification-card strong, .verification-card span, .verification-card small { display:block; }
.verification-card span { margin-top:5px; font-size:12px; line-height:1.55; }
.verification-card small { margin-top:7px; color:#806a3c; }

.question-shell { max-width: 650px; margin: 0 auto; }
.question-progress { height: 8px; border-radius: 99px; background: #dfe8e5; overflow: hidden; margin: 8px 0 22px; }
.question-progress span { display:block; height:100%; background:var(--coral); border-radius:inherit; transition:width .25s ease; }
.question-count { display:flex; justify-content:space-between; color:var(--muted); font-size:13px; font-weight:750; }
.question-card { padding: 22px; }
.question-type { display:inline-flex; margin-bottom:10px; color:var(--teal-800); font-size:11px; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
.question-card h2 { margin: 0 0 20px; font-size: clamp(21px, 5vw, 27px); line-height: 1.35; letter-spacing:-.02em; }
.answers { display:grid; gap:10px; }
.answer-option {
  width:100%; min-height:52px; text-align:left; border:2px solid var(--line); background:white;
  border-radius:15px; padding:12px 14px; color:var(--ink); display:flex; align-items:center; gap:11px;
}
.answer-option:hover { border-color:#a7c8c3; }
.answer-option.selected { border-color:var(--teal-700); background:var(--teal-100); }
.answer-option.correct { border-color:#22a06b; background:#e9fbed; }
.answer-option.incorrect { border-color:var(--coral); background:#fff0ee; }
.option-marker { flex:0 0 auto; width:29px; height:29px; border:1px solid #c9d5d2; border-radius:9px; display:grid; place-items:center; font-size:12px; font-weight:900; }
.answer-option.selected .option-marker { background:var(--teal-700); color:white; border-color:transparent; }
.text-answer { width:100%; }
.text-answer textarea.input { min-height:112px; height:auto; resize:vertical; padding:13px 14px; line-height:1.5; }
.feedback { margin-top:17px; border-radius:16px; padding:16px; }
.feedback.correct { background:#e9fbed; color:#155d2d; }
.feedback.incorrect { background:#fff0ee; color:#84342d; }
.feedback strong { display:block; font-size:18px; margin-bottom:5px; }
.feedback p { margin:4px 0; }
.feedback .remember { font-size:13px; font-weight:800; margin-top:9px; }

.result-score { text-align:center; padding: 30px 18px; }
.result-score .score-orb { width:128px; height:128px; margin:0 auto 18px; border-radius:50%; display:grid; place-items:center; background:var(--teal-100); color:var(--teal-950); }
.score-orb strong { font-size:35px; line-height:1; }
.result-score h1 { margin:0; font-size:30px; }
.result-score p { color:var(--muted); margin:7px 0 0; }
.movement { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.movement span { color:var(--muted); }
.movement strong { color:var(--teal-700); }

.progress-row { margin-bottom:17px; }
.progress-row:last-child { margin-bottom:0; }
.progress-label { display:flex; justify-content:space-between; gap:10px; font-size:14px; font-weight:750; margin-bottom:7px; }
.bar { height:9px; border-radius:99px; background:#e4ebe8; overflow:hidden; }
.bar span { display:block; height:100%; background:var(--teal-700); border-radius:inherit; }

.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.metric { background:white; border-radius:18px; padding:17px; border:1px solid var(--line); }
.metric strong { display:block; font-size:26px; line-height:1.1; color:var(--navy); }
.metric span { font-size:12px; color:var(--muted); }

.menu-list { overflow:hidden; padding:0; }
.menu-item { width:100%; min-height:60px; border:0; border-bottom:1px solid var(--line); background:white; padding:13px 16px; display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:11px; text-align:left; }
.menu-item:last-child { border-bottom:0; }
.menu-item .menu-icon { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--teal-100); }
.menu-item strong { font-size:15px; }
.menu-item span { display:block; color:var(--muted); font-size:12px; }

.auth-screen {
  min-height: 100vh; width:min(100%, 980px); margin:0 auto; padding:calc(24px + env(safe-area-inset-top)) 18px 32px;
  display:grid; align-items:center;
}
.auth-layout { display:grid; gap:20px; }
.auth-intro { padding:28px 12px 12px; }
.auth-intro .big-mark { width:96px; height:96px; border-radius:50%; display:block; object-fit:contain; background:var(--white); box-shadow:var(--shadow); }
.auth-intro h1 { font-size:clamp(38px, 10vw, 64px); line-height:.96; letter-spacing:-.065em; margin:25px 0 14px; color:var(--navy); }
.auth-intro h1 span { color:var(--teal-700); }
.auth-intro p { color:var(--muted); max-width:480px; }
.auth-card { padding:22px; }
.auth-card h2 { margin:0 0 5px; font-size:24px; }
.auth-card > p { margin:0 0 19px; color:var(--muted); }
.form-group { margin-bottom:14px; }
.form-group label { display:block; margin-bottom:6px; font-weight:800; font-size:13px; color:var(--navy); }
.input { width:100%; height:52px; border:2px solid var(--line); background:white; border-radius:14px; padding:0 14px; outline:0; }
.input:focus { border-color:var(--teal-700); box-shadow:0 0 0 4px rgba(15,118,110,.1); }
.form-note { font-size:12px; color:var(--muted); margin-top:5px; }
.remember-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:4px 0 18px; font-size:13px; }
.check-label { display:flex; align-items:center; gap:8px; }
.consent-check { align-items:flex-start; font-size:.9rem; line-height:1.45; color:var(--muted); margin:12px 0; }
.consent-check input { margin-top:4px; flex:0 0 auto; }
.consent-check a { color:var(--primary); font-weight:700; }
.auth-switch { text-align:center; color:var(--muted); font-size:13px; margin-top:16px; }
.auth-switch button { border:0; background:transparent; padding:0; color:var(--teal-700); font-weight:850; }
.demo-box { margin-top:15px; padding-top:15px; border-top:1px dashed var(--line); }
.demo-box button { width:100%; border:0; background:#fff7db; color:#674c11; min-height:46px; border-radius:13px; font-weight:800; }
.admin-link { display:block; margin:16px auto 0; border:0; background:transparent; color:#899694; font-size:12px; text-decoration:underline; }

.notice { border-radius:15px; padding:13px 14px; font-size:13px; background:#fff7db; color:#684c12; border:1px solid #f5dda0; }
.notice.info { background:#eaf5ff; color:#1f4d78; border-color:#cce7ff; }
.notice + .section, .notice + .card { margin-top:14px; }
.mock-preview-card { border-left:5px solid #8b77c9; }
.mock-preview-card p { color:var(--muted); }
.mock-subject-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mock-subject-folder { min-height:104px; padding:16px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; text-align:left; }
.mock-subject-folder strong, .mock-subject-folder small { display:block; }
.mock-subject-folder strong { font-size:15px; }
.mock-subject-folder small { margin-top:3px; color:var(--muted); font-size:11px; }
.mock-subject-folder svg, .mock-back-button svg { width:20px; height:20px; }
.mock-back-button { border:0; background:transparent; display:inline-flex; align-items:center; gap:6px; min-height:42px; padding:0 4px; color:var(--teal-800); font-weight:850; }
.mock-set-list { display:grid; gap:12px; }
.mock-set-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.mock-set-heading h3 { margin:4px 0 12px; }
.mock-score { flex:0 0 auto; border-radius:99px; padding:7px 10px; background:var(--teal-100); color:var(--teal-800); font-size:12px; font-weight:900; }
.mock-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mock-actions button { min-width:0; }
.mock-actions .mock-scheme { grid-column:1/-1; padding:8px; }
.pilot-sample summary { cursor:pointer; font-weight:850; color:var(--navy); }
.pilot-sample p { color:var(--muted); }
.mode-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:5px; margin:0 0 14px; border:1px solid var(--line); border-radius:15px; background:#f5f8f7; }
.mode-strip button, .mode-strip span { display:grid; place-items:center; min-height:38px; border:0; border-radius:11px; background:transparent; color:var(--muted); font-size:12px; font-weight:850; }
.mode-strip .active { color:white; background:var(--teal-700); }
.exam-standard { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 14px; }
.exam-standard div { padding:14px; border-radius:16px; background:var(--navy); color:white; }
.exam-standard strong, .exam-standard span { display:block; }
.exam-standard span { margin-top:3px; color:#b8cbc8; font-size:11px; }
.paper-structure { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:0 0 14px; }
.paper-structure span { display:flex; justify-content:space-between; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:white; color:var(--muted); font-size:11px; }
.paper-structure b { color:var(--ink); }
.exam-shell { max-width:820px; }
.exam-paper-head { display:grid; justify-items:center; gap:3px; margin:4px 0 10px; padding:18px 16px; border:1px solid #cfd8d6; border-radius:5px; background:#fff; color:#151c1b; }
.exam-paper-head span { font-size:11px; letter-spacing:.13em; font-weight:900; }
.exam-paper-head strong { font-family:"Noto Naskh Arabic","Geeza Pro","Noto Sans Arabic","Traditional Arabic",serif; font-size:29px; line-height:1.65; direction:rtl; }
.exam-paper-head small { color:var(--muted); }
.paper-sections { display:flex; gap:7px; overflow:auto; margin:0 0 12px; padding-bottom:2px; scrollbar-width:none; }
.paper-sections button { flex:0 0 auto; min-height:38px; padding:0 13px; border:1px solid var(--line); border-radius:99px; background:white; color:var(--muted); font-weight:800; }
.paper-sections button.active { border-color:var(--navy); background:var(--navy); color:white; }
.exam-question { border-radius:5px; border-color:#cfd8d6; box-shadow:0 8px 20px rgba(20,35,32,.07); }
.exam-instruction { margin:8px 0 3px; color:var(--muted); font-size:17px; }
.content-id { display:block; margin-bottom:8px; color:#785d16; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; direction:ltr; text-align:left; }
.qc-question-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 12px; margin-bottom:7px; direction:ltr; }
.qc-question-meta .content-id { margin:0; }
.qc-status { color:#785d16; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.qc-remarks { margin:0 0 12px; border:1px solid #ead89b; border-radius:10px; background:#fffbeb; color:#65460c; direction:ltr; text-align:left; }
.qc-remarks summary { cursor:pointer; padding:7px 10px; font-size:11px; font-weight:800; }
.qc-remarks p { margin:0; padding:0 10px 9px; color:#785b22; font-size:12px; line-height:1.45; }
.jawi-text { font-family:"Noto Naskh Arabic","Geeza Pro","Noto Sans Arabic","Traditional Arabic",serif; font-size:1.18em; line-height:2; font-feature-settings:"liga" 1,"calt" 1; text-rendering:optimizeLegibility; }
.arabic-text { font-family:"Noto Naskh Arabic","Amiri","Geeza Pro","Traditional Arabic",serif; font-size:1.22em; line-height:2.05; direction:rtl; font-feature-settings:"liga" 1,"calt" 1; text-rendering:optimizeLegibility; }
.jawi-options .answer-option { text-align:right; }
.jawi-options .option-marker { direction:ltr; }
.layout-two_column_matching .answers, .layout-classification_table .answers { display:grid; grid-template-columns:1fr 1fr; }
.matching-option { align-items:stretch; }
.match-pair { display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;width:100%; }
.match-pair b,.match-pair span { text-align:center;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--white); }
.match-pair i { color:var(--teal-700);font-style:normal; }
.rumi-support { display:block;margin-top:8px;color:var(--muted);font-size:.8rem;text-align:left; }
.layout-ordering_blocks .answer-option { border-style:dashed; }
.layout-answer_line .input { border-width:0 0 2px; border-radius:0; box-shadow:none; }
.exam-answer-box { min-height:150px; line-height:2; background-image:repeating-linear-gradient(transparent,transparent 31px,#dbe2e0 32px); background-attachment:local; }
.interaction-hint { margin:0 0 11px; color:var(--muted); font-size:12px; line-height:1.5; direction:ltr; text-align:left; }
.touch-answer-control, .ordering-control, .guided-response { width:100%; }
.order-preview { display:grid; gap:6px; margin:0 0 12px; direction:ltr; }
.order-preview span { display:grid; grid-template-columns:28px 1fr; gap:8px; align-items:center; padding:8px 10px; border-radius:11px; background:#eef8f6; font-size:12px; }
.order-preview b { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; background:var(--teal-700); color:#fff; }
.order-preview i { font-style:normal; text-align:start; }
.guided-response>p { margin:0 0 10px; color:var(--muted); font-size:13px; }
.guided-response details { border:1px solid var(--line); border-radius:13px; background:#f7faf9; }
.guided-response summary { cursor:pointer; padding:12px 14px; color:var(--teal-800); font-weight:850; }
.model-answer { padding:12px 14px; border:1px solid var(--line); border-radius:13px; background:#f7faf9; line-height:1.75; }
.self-assessment { display:grid; gap:9px; margin-top:11px; }
.preparation-list { display:grid; gap:10px; }
.preparation-card { display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:start; }
.preparation-card>span { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:var(--teal-100); color:var(--teal-800); font-weight:900; }
.preparation-card h3 { margin:1px 0 5px; }
.preparation-card p { margin:0; color:var(--muted); font-size:13px; }
.rehearsal-checklist { display:grid; gap:12px; }
.rehearsal-checklist label { display:flex; align-items:flex-start; gap:10px; }
.rehearsal-checklist input { width:20px; height:20px; accent-color:var(--teal-700); }

.admin-shell { width:min(100%,1100px); margin:0 auto; padding:0 18px 60px; }
.admin-nav { display:flex; gap:7px; overflow:auto; padding:5px 0 15px; scrollbar-width:none; }
.admin-nav button { flex:0 0 auto; border:1px solid var(--line); background:white; border-radius:99px; padding:9px 14px; font-size:13px; font-weight:800; color:var(--muted); }
.admin-nav button.active { background:var(--navy); color:white; border-color:var(--navy); }
.admin-table { width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th, .admin-table td { padding:12px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
.admin-table th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.admin-table button { border:0; border-radius:9px; padding:7px 9px; background:var(--teal-100); color:var(--teal-800); font-weight:800; }
.table-wrap { overflow:auto; }
.status-badge { display:inline-flex; border-radius:99px; padding:5px 8px; font-size:10px; font-weight:850; background:#dcfce7; color:#166534; white-space:nowrap; }
.status-badge.off { background:#f1f5f4; color:#647875; }

.toast { position:fixed; z-index:100; left:50%; bottom:95px; transform:translate(-50%,18px); max-width:calc(100% - 36px); background:var(--navy); color:white; padding:11px 16px; border-radius:13px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.2s ease; font-size:13px; font-weight:750; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.empty { text-align:center; padding:32px 18px; }
.empty .empty-icon { font-size:38px; }
.empty h3 { margin:10px 0 5px; }
.empty p { margin:0; color:var(--muted); }
.rtl { direction:rtl; font-family:"Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", serif; font-size:1.15em; line-height:1.9; }
.hidden { display:none !important; }

@media (min-width: 760px) {
  .screen { padding-left:28px; padding-right:28px; }
  .auth-layout { grid-template-columns:1.1fr .9fr; align-items:center; }
  .auth-card { padding:30px; }
  .subjects-grid { grid-template-columns:repeat(3,1fr); }
  .metric-grid { grid-template-columns:repeat(4,1fr); }
  .paper-structure { grid-template-columns:repeat(4,1fr); }
}

@media (max-width: 430px) {
  .jawi-text { font-size:1.12em; line-height:1.95; }
  .arabic-text { font-size:1.16em; line-height:2; }
  .layout-two_column_matching .answers, .layout-classification_table .answers { grid-template-columns:1fr; }
  .exam-paper-head { padding:14px 12px; }
  .mock-subject-grid, .mock-actions { grid-template-columns:1fr; }
  .mock-actions .mock-scheme { grid-column:auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

.print-preview-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;overflow:hidden;background:white}.print-preview-dialog[open]{display:flex;flex-direction:column}.print-preview-dialog::backdrop{background:#0008}.print-preview-toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:calc(10px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));border-bottom:1px solid #ddd;background:#fff}.print-preview-toolbar button{min-height:44px;padding:8px 12px;border:1px solid #b8cbc8;border-radius:8px;background:#fff;color:#17433e;font:inherit;font-size:14px}.print-preview-dialog iframe{width:100%;flex:1;min-height:0;border:0;padding-bottom:env(safe-area-inset-bottom)}.mock-return-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin:10px 0}.mock-return-actions button{min-height:44px}

/* v1.7.1 — paper-realistic examination presentation */
.study-topic-row { grid-template-columns:auto minmax(0,1fr) auto; }
.study-topic-copy { text-align:start; min-width:0; }
.study-topic-copy h3,.study-topic-copy p { text-align:start; }
.question-visual { margin:10px auto 14px; padding:10px; border:1px solid var(--line); border-radius:12px; background:#fff; text-align:center; break-inside:avoid; }
.question-visual img { display:block; width:auto; max-width:min(100%,280px); max-height:220px; margin:0 auto; object-fit:contain; }
.question-visual figcaption { margin-top:7px; color:var(--muted); font-size:11px; }
.true-false-grid { grid-template-columns:1fr 1fr; }
.exam-check-option { min-height:62px; }
.exam-check-box { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border:2px solid currentColor; border-radius:5px; font-size:20px; font-weight:900; direction:ltr; }
.exam-pair-control { padding:10px; border:1px solid var(--line); border-radius:12px; background:#fbfcfc; }
.exam-pair-control .pair-columns { direction:ltr; }
.exam-box-control .response-table { background:#fff; }
.word-bank-control { padding-top:2px; }
.paper-answer-blank { height:38px; margin:0 0 10px; border-bottom:2px solid #6f7d7a; }
.word-bank { padding:10px; border:1px solid var(--line); border-radius:10px; background:#fafcfc; }
.word-bank .answer-option { background:#fff; }
.exam-ordering-control .order-preview { direction:ltr; }
.interaction-hint.jawi-text,.interaction-hint.arabic-text { direction:rtl; text-align:right; }
.question-type.jawi-text,.question-type.arabic-text { display:inline-block; direction:rtl; }
.feedback.jawi-text,.feedback.arabic-text { text-align:right; }
.feedback.jawi-text p,.feedback.arabic-text p { direction:rtl; }

@media (max-width:430px) {
  .true-false-grid { grid-template-columns:1fr; }
  .question-visual img { max-width:100%; max-height:190px; }
  .pair-columns { grid-template-columns:1fr; }
  .pair-preview { text-align:center; }
}