: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; }
}


/* v1.8.1 — first-login install onboarding */
.welcome-shell{min-height:100vh;padding:calc(28px + env(safe-area-inset-top)) 22px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center;max-width:560px;margin:0 auto;text-align:center}
.welcome-logo{display:block;margin:0 auto 14px;border-radius:24px;box-shadow:0 12px 30px rgba(15,118,110,.16)}
.welcome-shell h1{margin:8px 0 8px;font-size:clamp(28px,7vw,38px);line-height:1.08;color:var(--ink)}
.welcome-shell>p{margin:0 auto 20px;max-width:440px;color:var(--muted);line-height:1.55}
.welcome-steps{display:grid;gap:10px;margin:8px 0 18px;text-align:left}
.welcome-step{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}
.welcome-step.done{border-color:#b6ddd7;background:#f4fbf9}
.welcome-step-no{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#e8f3ef;color:#0f766e;font-weight:900}
.welcome-step strong,.welcome-step small{display:block}
.welcome-step small{margin-top:3px;color:var(--muted);line-height:1.4}
.onboarding-later{margin:8px auto 0}
.onboarding-note{text-align:center;margin-top:12px}
.install-guide-card{display:grid;gap:16px}
.install-steps{margin:0;padding:0;list-style:none;counter-reset:install-step;display:grid;gap:12px}
.install-steps li{counter-increment:install-step;display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:start;padding:13px;border-radius:14px;background:#f8faf9}
.install-steps li:before{content:counter(install-step);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#0f766e;color:#fff;font-weight:900}
.install-steps strong,.install-steps span{display:block}
.install-steps span{margin-top:4px;color:var(--muted);line-height:1.45}
.install-success{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;padding:16px;border-radius:16px;background:#f0faf7;border:1px solid #bee4dc}
.install-success>span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#0f766e;color:#fff;font-weight:900;font-size:22px}
.install-success p{margin:4px 0 0;color:var(--muted)}
.install-note{margin:0}


/* v1.9.0 — paid bonus library */
.bonus-home-card{width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;border:1px solid #f0d99d;background:linear-gradient(135deg,#fffaf0,#fff);cursor:pointer}
.bonus-home-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#fff1bd;font-size:24px}
.bonus-home-card strong,.bonus-home-card small{display:block}
.bonus-home-card small{margin-top:3px;color:var(--muted);line-height:1.35}
.bonus-open{font-size:12px;font-weight:800;color:#0f766e;white-space:nowrap}
.bonus-notice{margin-bottom:12px}
.bonus-chips{display:flex;gap:8px;overflow:auto;padding:2px 0 8px;scrollbar-width:none}
.bonus-chips::-webkit-scrollbar{display:none}
.bonus-chip{flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--ink);padding:9px 12px;border-radius:999px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.bonus-chip.active{background:#0f766e;color:#fff;border-color:#0f766e}
.bonus-file-list{display:grid;gap:9px}
.bonus-file{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;text-decoration:none;color:inherit;padding:12px 13px}
.bonus-file:hover{border-color:#b8d9d4}
.bonus-file-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#f4f7f6}
.bonus-file strong,.bonus-file small{display:block}
.bonus-file strong{font-size:14px;line-height:1.35}
.bonus-file small{margin-top:3px;color:var(--muted);font-size:11px}
.bonus-loading,.bonus-error{color:var(--muted);line-height:1.5}
@media (max-width:430px){
  .bonus-home-card{grid-template-columns:44px minmax(0,1fr)}
  .bonus-home-card>.bonus-open{grid-column:2;justify-self:start}
  .bonus-file{grid-template-columns:36px minmax(0,1fr)}
  .bonus-file>.bonus-open{grid-column:2;justify-self:start}
}

/* v1.10.0 — student joy layer: kid-friendly UI, no workflow changes */
body{
  background:
    radial-gradient(circle at 8% 3%,rgba(91,190,255,.16),transparent 18rem),
    radial-gradient(circle at 96% 8%,rgba(255,195,74,.15),transparent 20rem),
    linear-gradient(180deg,#f8fbff 0%,#fffaf3 100%);
}
.kid-hero{
  min-height:270px;
  padding:27px 24px 23px;
  background:
    radial-gradient(circle at 86% 18%,rgba(255,255,255,.22),transparent 7rem),
    linear-gradient(145deg,#1477d4 0%,#4c8deb 46%,#7359d7 100%);
  border-radius:32px;
  box-shadow:0 18px 38px rgba(51,91,166,.20);
}
.kid-hero::after{width:210px;height:210px;border-width:34px;right:-86px;top:-95px}
.kid-hero::before{background:rgba(255,210,90,.24);right:54px;bottom:-61px}
.kid-hero-mark{
  position:absolute;right:20px;top:18px;width:58px;height:58px;border-radius:20px;
  display:grid;place-items:center;background:rgba(255,255,255,.94);
  box-shadow:0 8px 22px rgba(35,54,112,.18);transform:rotate(5deg);
}
.kid-hero-mark img{width:50px;height:50px;object-fit:contain}
.kid-hero .hero-grid{margin-top:20px}
.kid-hero .readiness strong{font-size:34px}
.kid-hero .readiness span{font-size:12px;font-weight:800}
.kid-hero .progress-ring{background:conic-gradient(#ffd34f var(--progress,0%),rgba(255,255,255,.2) 0)}
.kid-hero .progress-ring::after{background:#3c69c8}
.kid-hero .stat-chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.12)}
.kid-hero .stat-chip strong{font-size:15px}
.kid-hero .stat-chip span{color:rgba(255,255,255,.82)}

.kid-start-section{margin-top:20px}
.kid-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.kid-action{
  min-height:132px;border:0;border-radius:23px;padding:16px 13px;text-align:left;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  box-shadow:0 8px 22px rgba(52,76,111,.09);transition:transform .15s ease,box-shadow .15s ease;
  color:var(--navy);
}
.kid-action:active{transform:scale(.98)}
.kid-action-icon{
  width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  background:rgba(255,255,255,.8);font-size:25px;margin-bottom:11px;
  box-shadow:0 4px 12px rgba(40,58,89,.07);
}
.kid-action strong{font-size:17px;line-height:1.1}
.kid-action small{font-size:11px;margin-top:4px;color:#607087;font-weight:750}
.kid-learn{background:linear-gradient(145deg,#dff2ff,#eef8ff)}
.kid-practice{background:linear-gradient(145deg,#ffe4ea,#fff2f5)}
.kid-mock{background:linear-gradient(145deg,#fff0b8,#fff8dc)}
.kid-progress{background:linear-gradient(145deg,#e9e2ff,#f6f2ff)}

.today-challenge-section .task{
  border:0;background:#fff;border-radius:19px;padding:13px;
  box-shadow:0 7px 19px rgba(38,67,86,.07);
}
.today-challenge-section .task-icon{font-size:21px;background:#f3f7ff}
.today-challenge-section .mini-status{
  padding:6px 9px;border-radius:999px;background:#e8f7f2;color:#137665!important;font-size:11px!important;
}
.kid-main-cta{
  min-height:56px;border-radius:18px;
  background:linear-gradient(135deg,#ff795f,#ff9e52);
  box-shadow:0 11px 24px rgba(239,106,91,.24);
  font-size:16px;
}

.kid-page-heading{padding:6px 2px 2px}
.kid-page-heading h1{color:#263c67}
.kid-page-heading p{font-size:14px}
.kid-subjects-grid{gap:13px}
.kid-subject-card{
  overflow:hidden;min-height:158px;border:0!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--subject-colour) 82%,white),#fff 82%);
  box-shadow:0 8px 22px rgba(43,73,94,.08);
}
.kid-subject-card::after{
  content:"";position:absolute;width:80px;height:80px;border-radius:50%;
  right:-30px;bottom:-35px;background:color-mix(in srgb,var(--subject-colour) 72%,white);
}
.kid-subject-card .subject-icon{
  width:52px;height:52px;border-radius:17px;font-size:25px;background:#fff!important;
  box-shadow:0 5px 14px rgba(29,59,91,.08);
}
.kid-subject-card h3{font-size:17px;margin-top:15px}
.kid-subject-card p{max-width:88%;font-size:11px;line-height:1.4}
.kid-subject-card .status-dot{top:16px;right:16px}
.subject-go{
  position:relative;z-index:1;display:inline-flex;margin-top:10px;color:#315d8c;
  font-size:11px;font-weight:900;
}
.kid-subject-card:not(.ready){filter:saturate(.58);opacity:.82}
.kid-mode-strip{
  padding:6px;border:0;background:#eef4ff;border-radius:18px;box-shadow:inset 0 0 0 1px #dde8f7;
}
.kid-mode-strip button,.kid-mode-strip span{min-height:42px;border-radius:13px}
.kid-mode-strip .active{background:linear-gradient(135deg,#3e82db,#6864d9)}

.kid-practice-picker{
  background:linear-gradient(145deg,#eef8ff,#fff);
  border-color:#d7eaf8;
}
.kid-practice-picker strong{color:#31577f}
.kid-practice-picker select{background:#fff}
.kid-challenge-card{
  position:relative;overflow:hidden;margin-top:12px;padding:20px;
  background:linear-gradient(145deg,#fff7d8,#fff);
  border-color:#f3df9a;
}
.kid-challenge-card::after{
  content:"";position:absolute;width:130px;height:130px;right:-48px;top:-55px;
  border-radius:50%;background:rgba(255,202,74,.15);
}
.kid-challenge-card>*{position:relative;z-index:1}
.kid-challenge-emoji{
  width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  margin-bottom:10px;background:#ffe17a;font-size:26px;box-shadow:0 7px 16px rgba(175,127,18,.14);
}

.question-shell:not(.exam-shell) .question-count{
  margin-top:2px;padding:8px 11px;border-radius:13px;background:#eef5ff;
  color:#405a77;font-weight:850;
}
.question-shell:not(.exam-shell) .question-progress{
  height:10px;background:#e3ebf6;border-radius:99px;margin:9px 0 18px;
}
.question-shell:not(.exam-shell) .question-progress span{
  background:linear-gradient(90deg,#4ba5f5,#7464df,#ff8e62);
}
.question-shell:not(.exam-shell) .question-card{
  border:0;border-radius:26px;padding:20px 18px;
  box-shadow:0 13px 31px rgba(44,73,106,.10);
}
.question-shell:not(.exam-shell) .question-card h2{font-size:clamp(20px,5vw,27px);line-height:1.5}
.question-shell:not(.exam-shell) .answer-option{
  min-height:62px;border:2px solid #e0e9f3;border-radius:18px;
  box-shadow:0 4px 11px rgba(50,77,105,.04);background:#fff;
}
.question-shell:not(.exam-shell) .answer-option.selected{
  border-color:#558ee5;background:#eef5ff;transform:translateY(-1px);
}
.question-shell:not(.exam-shell) .answer-option.selected .option-marker{
  background:linear-gradient(135deg,#4b8fe7,#6b68d9);
}
.question-shell:not(.exam-shell) .primary-button{
  min-height:57px;border-radius:18px;background:linear-gradient(135deg,#ff795f,#ff9e52);
}
.question-shell:not(.exam-shell) .feedback{
  border-radius:20px;padding:17px;
}
.question-shell:not(.exam-shell) .feedback.correct{
  background:linear-gradient(145deg,#e6faee,#f5fff8);border:1px solid #b8e7c7;
}
.question-shell:not(.exam-shell) .feedback.incorrect{
  background:linear-gradient(145deg,#fff0ed,#fff8f6);border:1px solid #f5cbc3;
}

.kid-result{padding-top:23px}
.result-celebration{
  font-size:30px;letter-spacing:7px;margin-bottom:10px;
  animation:kid-pop .5s ease both;
}
.kid-result .score-orb{
  width:142px;height:142px;
  background:linear-gradient(145deg,#dff5ff,#f2ecff);
  box-shadow:0 12px 30px rgba(58,92,152,.12);
}
.kid-result h1{color:#263c67}
@keyframes kid-pop{0%{transform:scale(.65);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

.bottom-nav{border-top-color:#e1e8f2;box-shadow:0 -8px 24px rgba(35,64,93,.06)}
.nav-item{font-weight:850;color:#758497}
.nav-item.active{color:#315f9c;background:#eaf3ff}

@media(max-width:430px){
  .kid-hero{min-height:260px;padding:23px 19px 21px}
  .kid-hero-mark{width:52px;height:52px;right:15px;top:14px}
  .kid-hero-mark img{width:45px;height:45px}
  .kid-hero h1{max-width:75%;font-size:29px}
  .kid-action{min-height:124px;padding:14px 12px;border-radius:20px}
  .kid-action-icon{width:44px;height:44px;font-size:23px}
  .kid-subject-card{min-height:150px;padding:15px 13px}
  .kid-subject-card .subject-icon{width:48px;height:48px}
  .question-shell:not(.exam-shell) .question-card{padding:18px 15px}
}

@media(prefers-reduced-motion:reduce){
  .result-celebration{animation:none}
  .kid-action{transition:none}
}

/* v1.11.0 — Option C: richer kid graphics + owl mascot */
.owl-home-mark{
  width:76px;height:76px;right:15px;top:12px;border-radius:24px;
  padding:2px;background:linear-gradient(145deg,#fff,#eaf7ff);
}
.owl-home-mark img{width:72px;height:72px}

.kid-subject-hero{
  position:relative;overflow:hidden;min-height:190px;margin:2px 0 18px;padding:22px 150px 22px 20px;
  border-radius:28px;
  background:
    radial-gradient(circle at 14% 18%,rgba(255,255,255,.95) 0 34px,transparent 35px),
    radial-gradient(circle at 90% 12%,rgba(255,255,255,.72) 0 54px,transparent 55px),
    linear-gradient(145deg,#c8efff 0%,#eaf7ff 43%,#fff0b8 100%);
  box-shadow:0 13px 30px rgba(49,96,145,.12);
}
.kid-subject-hero::before{
  content:"";position:absolute;left:-40px;right:-40px;bottom:-58px;height:115px;border-radius:50%;
  background:linear-gradient(180deg,#bce99d,#6fcd7a);
  opacity:.82;
}
.kid-subject-hero::after{
  content:"";position:absolute;left:28%;right:-8%;bottom:-78px;height:118px;border-radius:50%;
  background:linear-gradient(180deg,#8edb7f,#49b86b);
  opacity:.72;
}
.kid-subject-hero-copy{position:relative;z-index:3}
.kid-subject-hero .eyebrow{
  color:#2d6a82;background:rgba(255,255,255,.72);padding:6px 10px;border-radius:999px;
}
.kid-subject-hero h1{margin:10px 0 7px;font-size:clamp(26px,6.4vw,36px);line-height:1.05;color:#24436e}
.kid-subject-hero p{margin:0;color:#526e80;font-size:13px;line-height:1.48;max-width:430px}
.kid-owl-stage{
  position:absolute;z-index:4;right:10px;bottom:-4px;width:150px;height:164px;
  display:flex;align-items:flex-end;justify-content:center;
}
.kid-owl-stage img{width:144px;height:144px;object-fit:contain;filter:drop-shadow(0 11px 14px rgba(40,71,111,.16))}
.owl-star{position:absolute;color:#ffc83d;text-shadow:0 2px 0 rgba(255,255,255,.7);font-size:24px;animation:owlFloat 3.6s ease-in-out infinite}
.owl-star-a{left:8px;top:18px}
.owl-star-b{right:4px;top:46px;font-size:18px;animation-delay:.7s}
.kid-subject-spark{position:absolute;z-index:2;color:#ffca3a;opacity:.95}
.spark-one{left:16px;top:12px;font-size:17px}
.spark-two{left:46%;top:22px;font-size:15px;color:#75b8e8}
.spark-three{left:10%;bottom:20px;font-size:10px;color:#7dcc75}
@keyframes owlFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(4deg)}}

.kid-subjects-grid{gap:14px}
.kid-subject-card{
  min-height:204px;padding:14px 13px 15px;
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;
  align-items:start;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 84% 22%,rgba(255,255,255,.75) 0 32px,transparent 33px),
    linear-gradient(145deg,color-mix(in srgb,var(--subject-colour) 74%,white),#fff 78%);
  box-shadow:0 10px 24px rgba(44,73,103,.10);
  isolation:isolate;
}
.kid-subject-card::after{
  width:120px;height:120px;right:-42px;bottom:-47px;
  background:color-mix(in srgb,var(--subject-colour) 72%,white);
  opacity:.9;z-index:-1;
}
.kid-subject-card::before{
  content:"";position:absolute;left:-25px;bottom:-48px;width:126px;height:86px;border-radius:50% 50% 0 0;
  background:color-mix(in srgb,var(--subject-colour) 62%,#7fcf7a);
  opacity:.22;z-index:-1;
}
.kid-subject-card .subject-icon{
  grid-column:1;grid-row:1;
  width:48px;height:48px;border-radius:16px;font-size:24px;
  position:relative;z-index:3;
}
.kid-subject-card .status-dot{z-index:5;top:13px;right:13px}
.kid-subject-art{
  grid-column:2;grid-row:1/3;
  align-self:center;justify-self:end;
  width:76px;height:76px;border-radius:24px;
  display:grid;place-items:center;font-size:42px;
  background:rgba(255,255,255,.58);
  box-shadow:0 7px 18px rgba(47,74,103,.08);
  transform:rotate(2deg);
  position:relative;z-index:2;
}
.kid-subject-copy{grid-column:1/-1;grid-row:2;align-self:end;position:relative;z-index:3;padding-right:2px}
.kid-subject-copy h3{
  margin:10px 0 1px;font-size:18px;line-height:1.08;
  color:var(--subject-accent);
}
.kid-subject-label{display:block;color:#60758a;font-size:10px;font-weight:850;margin-top:4px}
.kid-subject-copy p{margin:5px 0 0;max-width:100%;font-size:10.5px;line-height:1.35;color:#677b88}
.kid-subject-card .subject-go{
  grid-column:1/-1;grid-row:3;justify-self:start;
  margin-top:11px;min-width:92px;min-height:34px;padding:7px 14px;border-radius:999px;
  align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--subject-accent),color-mix(in srgb,var(--subject-accent) 70%,#8b6ee8));
  color:#fff;font-size:12px;font-weight:950;
  box-shadow:0 7px 16px color-mix(in srgb,var(--subject-accent) 18%,transparent);
}
.kid-card-star{position:absolute;z-index:2;color:#ffd13f;text-shadow:0 2px 2px rgba(174,118,6,.08)}
.kid-card-star.star-a{right:89px;top:62px;font-size:17px}
.kid-card-star.star-b{right:20px;bottom:51px;font-size:12px}
.kid-card-bubble{position:absolute;border-radius:50%;background:rgba(255,255,255,.42);z-index:-1}
.kid-card-bubble.bubble-a{width:44px;height:44px;right:58px;top:22px}
.kid-card-bubble.bubble-b{width:17px;height:17px;right:22px;bottom:78px}
.kid-subject-card.ready:active{transform:scale(.985)}
.kid-subject-card:not(.ready) .kid-subject-art{filter:grayscale(.35);opacity:.72}
.kid-subject-card:not(.ready) .subject-go{background:#a9b3bd;box-shadow:none}

.kid-card-akidah .kid-subject-art{background:linear-gradient(145deg,#e6fff2,#fff)}
.kid-card-ibadah .kid-subject-art{background:linear-gradient(145deg,#f0eaff,#fff)}
.kid-card-sirah .kid-subject-art{background:linear-gradient(145deg,#fff4d6,#fff)}
.kid-card-adab .kid-subject-art{background:linear-gradient(145deg,#ffe9ef,#fff)}
.kid-card-jawi .kid-subject-art{background:linear-gradient(145deg,#e7f4ff,#fff)}
.kid-card-arab .kid-subject-art{background:linear-gradient(145deg,#f3eaff,#fff)}
.kid-card-quran .kid-subject-art{background:linear-gradient(145deg,#e8faeb,#fff)}
.kid-card-pchi .kid-subject-art{background:linear-gradient(145deg,#fff0df,#fff)}
.kid-card-amali .kid-subject-art{background:linear-gradient(145deg,#eaf2f7,#fff)}

@media(max-width:430px){
  .owl-home-mark{width:68px;height:68px;right:11px;top:10px}
  .owl-home-mark img{width:64px;height:64px}
  .kid-subject-hero{min-height:182px;padding:19px 125px 19px 17px;border-radius:25px}
  .kid-subject-hero h1{font-size:26px}
  .kid-subject-hero p{font-size:12px}
  .kid-owl-stage{right:3px;width:130px;height:150px}
  .kid-owl-stage img{width:127px;height:127px}
  .kid-subject-card{min-height:196px;padding:13px 12px 14px}
  .kid-subject-art{width:68px;height:68px;font-size:37px;border-radius:21px}
  .kid-subject-copy h3{font-size:17px}
  .kid-subject-card .subject-go{min-width:84px;padding:6px 12px}
}
@media(max-width:365px){
  .kid-subject-hero{padding-right:108px}
  .kid-owl-stage{width:112px}
  .kid-owl-stage img{width:110px;height:110px}
  .kid-subject-card{min-height:188px}
  .kid-subject-art{width:58px;height:58px;font-size:31px}
  .kid-subject-copy h3{font-size:15px}
  .kid-subject-copy p{font-size:9.5px}
}
@media(prefers-reduced-motion:reduce){.owl-star{animation:none}}