/* Ready — StarInitio. Proprietary. */
/* Default theme tokens (royal blue + coral). The full theme set is generated by theme_css() in core.php
   and printed inline in <head>; these values are the fallback when no theme matches. */
:root {
  --bg: #f2f1ed; --bg2: #e7e5df; --surface: #ffffff; --surface-2: #f7f6f2;
  --ink: #1c2230; --ink-2: #404758; --ink-3: #657084;
  --line: rgba(20, 25, 43, .12); --line-2: rgba(20, 25, 43, .22);
  --primary: #23407a; --primary-ink: #ffffff; --accent: #b5532b; --accent-ink: #ffffff; --accent-text: #a04620; --alert: #c0392b;
  --primary-rgb: 35, 64, 122; --accent-rgb: 181, 83, 43; --alert-rgb: 192, 57, 43;
  --good: #8a6416; --good-bg: rgba(138, 100, 22, .1);
  --mid: #6b5b4b; --mid-bg: rgba(107, 91, 75, .12);
  --low: #c0392b; --low-bg: rgba(192, 57, 43, .1);
  --shadow: 0 1px 2px rgba(20,25,43,.06), 0 12px 32px -14px rgba(20,25,43,.25);
  --shadow-sm: 0 1px 2px rgba(20,25,43,.08);
  --radius: 10px; --radius-sm: 6px;
  --font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif; /* one family for text and headings (2.14.1) */
  --font-head: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --header-bg: rgba(242, 241, 237, .97); --sky-rgb: 226, 184, 76;
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light; --c1: #7a1230; --c2: #b8862b; --c3: #5f5f5f; --c-grid: rgba(20,25,43,.10);
}
/* Spacing scale (2.11.8): one set of values per device class, used by the page gutters, cards, grids and sections. */
:root { --gutter: 16px; --gap: 12px; --pad: 16px; --pad-lg: 20px; --section: 32px; }
@media (min-width: 768px) { :root { --gutter: 24px; --gap: 16px; --pad: 20px; --pad-lg: 28px; --section: 40px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; --gap: 20px; --pad: 24px; --pad-lg: 32px; --section: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); background-color: var(--bg); color: var(--ink); line-height: 1.7; font-size: 16px; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, .brand, .stat b, .kpi b { font-family: var(--font-head); }
h1, h2, h3, h4 { line-height: 1.35; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: .05em .35em; overflow-wrap: anywhere; } /* 2.43.1: a long address in code no longer widens the page on phones */
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
.ic { flex: none; vertical-align: middle; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
/* app shells and notched phones (2.11.8): keep content out of the screen cut-outs; no double-tap zoom delay on controls */
@supports (padding: max(0px)) { .wrap { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); } .top-in { padding-top: env(safe-area-inset-top); } }
a, button, .btn, input, select, label { touch-action: manipulation; }
.wrap-narrow { max-width: 760px; }
.muted { color: var(--ink-3); }
.small { font-size: .88rem; }
.center { text-align: center; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.stack > * + * { margin-top: 16px; }
.grid { display: grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } /* min(): one column narrower than 280 px on small phones (2.43.1) */
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.grid > * { min-width: 0; }
.g4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sr-only { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* pinned to a corner (2.11.6): left at its static place inside a scrolled RTL table it widened the whole page on phones */
/* 2.43.1: no form field or flex child can push a page past a phone's width (a file field, a search box with its natural width),
   and the hidden currency word stays inside its amount instead of escaping a scrolled table */
input, select, textarea { max-width: 100%; }
input[type=file] { min-width: 0; }
.row > *, .row-between > * { min-width: 0; }
.money { position: relative; }
.nowrap { white-space: nowrap; }
.ltr { direction: ltr; unicode-bidi: embed; }


/* Header */
.top { position: sticky; top: 0; z-index: 50; background: rgba(var(--primary-rgb), 0); }
.top-in { background: var(--bg); border-bottom: 1px solid var(--line); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .top-in { background: var(--header-bg); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
}
.nav { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 800; font-size: 1.15rem; }
.brand:hover { text-decoration: none; }
.brand img { width: auto; max-width: 120px; height: 46px; object-fit: contain; }
.brand { min-width: 0; } /* may shrink on very narrow phones, as the square logo did */
.brand small { display: block; font-size: .72rem; font-weight: 500; color: var(--ink-3); line-height: 1.2; }
.nav-links { display: flex; gap: 4px; margin-inline-start: 12px; }
.nav-links { align-items: center; flex-wrap: nowrap; min-width: 0; }
.nav-links a, .nav-dd > summary { color: var(--ink-2); padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.nav-dd { position: relative; }
.nav-dd > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.nav-dd > summary::-webkit-details-marker { display: none; }
.nav-dd > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); }
.nav-dd[open] > summary, .nav-dd > summary:hover, .nav-dd > summary.on { background: var(--surface); color: var(--ink); }
.nav-dd-menu { position: absolute; inset-inline-start: 0; top: calc(100% + 16px); z-index: 60; min-width: 230px; max-height: 70vh; overflow: auto; padding: 6px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 2px; }
.nav-dd-menu a { padding: 10px 12px; }
/* exam families in the menus (2.22.0): القدرات، التحصيلي، الرخصة المهنية > التخصصي ... */
.nav-sub > summary, .m-sub > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 600; }
.nav-sub > summary::-webkit-details-marker, .m-sub > summary::-webkit-details-marker { display: none; }
.nav-sub > summary::after, .m-sub > summary::after { content: ""; flex: none; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.nav-sub[open] > summary::after, .m-sub[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.nav-sub > summary { padding: 10px 12px; border-radius: 10px; color: var(--ink-2); font-size: .95rem; white-space: nowrap; }
.nav-sub > summary:hover, .nav-sub[open] > summary { background: var(--surface); color: var(--ink); }
.nav-sub > div { display: flex; flex-direction: column; gap: 2px; margin-inline-start: 12px; padding-inline-start: 6px; border-inline-start: 2px solid var(--line); }
.m-sub > summary { padding: 12px 8px; color: var(--ink); border-bottom: 1px solid var(--line); }
.m-sub > div { padding-inline-start: 14px; }
.nav-links a:hover, .nav-links a.on { background: var(--surface); color: var(--ink); text-decoration: none; }
.nav-end { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 42px; height: 42px; display: inline-grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.icon-btn:hover { color: var(--ink); border-color: var(--line-2); }
.menu-btn { display: none; }
.mobile-nav { border-top: 1px solid var(--line); padding: 8px 16px 14px; }
.mobile-nav a { display: block; padding: 12px 8px; color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line); }
.mobile-nav a:last-child { border-bottom: 0; }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-grid; }
  .nav-end .hide-sm { display: none; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent; font: inherit; font-weight: 700; font-size: .98rem; cursor: pointer; text-decoration: none !important; transition: transform .12s ease, background .15s ease, border-color .15s; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--primary-ink); box-shadow: 0 6px 18px -8px rgba(var(--primary-rgb), .8); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn-danger { background: var(--low-bg); color: var(--low); border-color: rgba(var(--alert-rgb), .3); }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: .88rem; border-radius: 10px; }
.btn-lg { min-height: 54px; padding: 14px 26px; font-size: 1.08rem; border-radius: 14px; }
@media (pointer: coarse) { .btn-sm { min-height: 40px; } .icon-btn { min-width: 44px; min-height: 44px; } }
.btn-block { width: 100%; }
.btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; }
.link-btn { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; cursor: pointer; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad); box-shadow: var(--shadow-sm); }
.card-lg { padding: var(--pad-lg); }
.card h3 { margin-bottom: .35em; }
.card-link { display: block; color: inherit; transition: transform .15s ease, border-color .15s ease, box-shadow .15s; }
.card-link:hover { text-decoration: none; border-color: rgba(var(--primary-rgb), .45); box-shadow: var(--shadow); }
@media (hover: hover) { .card-link:hover { transform: translateY(-2px); } }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.pill.good { background: var(--good-bg); color: var(--good); border-color: transparent; }
.pill.mid { background: var(--mid-bg); color: var(--mid); border-color: transparent; }
.pill.low { background: var(--low-bg); color: var(--low); border-color: transparent; }
.pill.accent { background: rgba(var(--accent-rgb), .14); color: var(--accent-text); border-color: transparent; }
.tile-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(var(--primary-rgb), .12); color: var(--primary); margin-bottom: 12px; }
.tile-ic.accent { background: rgba(var(--accent-rgb), .14); color: var(--accent-text); }
.tile-ic.alert { background: rgba(var(--alert-rgb), .12); color: var(--alert); }

/* Alerts */
.flashes { margin: 16px auto 0; }
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 10px; font-weight: 500; }
.alert.success { background: var(--good-bg); border-color: transparent; color: var(--good); }
.alert.error { background: var(--low-bg); border-color: transparent; color: var(--low); }
.alert.warn, .alert.info { background: var(--mid-bg); border-color: transparent; color: var(--mid); }

/* Forms */
label { font-weight: 700; font-size: .92rem; display: block; margin-bottom: 6px; }
.field { margin-bottom: 16px; }
.hint { font-size: .82rem; color: var(--ink-3); margin-top: 5px; font-weight: 400; }
input:not([type]), input[type=text], input[type=datetime-local], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=date], input[type=url], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 14px; min-height: 46px; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a6c5c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-position: 14px 50%; background-size: 12px 12px; background-repeat: no-repeat; padding-left: 34px; }
select[multiple] { background-image: none; padding: 8px; min-height: 140px; }
textarea { min-height: 110px; resize: vertical; line-height: 1.7; }
textarea.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; direction: rtl; }
[dir=ltr] textarea.code { direction: ltr; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .18); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--primary); vertical-align: middle; flex: none; } /* 20px: easier to tap (2.20.0) */
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; cursor: pointer; }
.check input { margin-top: 4px; }
.form-grid { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.auth-card { max-width: 440px; margin: 40px auto; }
.auth-card .card { padding: 28px; }
fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 0 0 16px; }
legend { font-weight: 800; padding: 0 6px; }

/* Tables */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th, td { padding: 11px 14px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-weight: 800; color: var(--ink-2); background: var(--surface-2); font-size: .85rem; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td .clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 520px; }

/* Hero / landing */
.hero { position: relative; padding: 56px 0 40px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 380px at 85% -10%, rgba(var(--accent-rgb), .22), transparent 60%), radial-gradient(700px 360px at 0% 10%, rgba(var(--primary-rgb), .16), transparent 60%); pointer-events: none; }
.hero .wrap { position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.eyebrow { display: inline-flex; gap: 8px; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-weight: 700; font-size: .88rem; margin-bottom: 16px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .18); }
.hero h1 { font-size: clamp(2rem, 5.6vw, 3.3rem); margin-bottom: 14px; }
.hero h1 em { font-style: normal; color: var(--primary); }
.hero .lead { font-size: 1.15rem; color: var(--ink-2); max-width: 580px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 18px; }
.trust { display: flex; gap: 18px; flex-wrap: wrap; color: var(--ink-3); font-size: .9rem; font-weight: 600; }
.trust span { display: inline-flex; gap: 6px; align-items: center; }
.price-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; box-shadow: var(--shadow); overflow: hidden; }
.price-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: linear-gradient(90deg, var(--primary), var(--accent), var(--alert)); }
.price { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 4px; }
.price b { font-size: 3.2rem; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.price span { color: var(--ink-3); font-weight: 700; }
.checks { list-style: none; padding: 0; margin: 18px 0; }
.checks li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.checks li .ic { color: var(--primary); margin-top: 4px; }
.section { padding: var(--section) 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 28px; }
.section-head p { color: var(--ink-2); }
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.stat b { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; }
.stat span { color: var(--ink-3); font-size: .88rem; font-weight: 600; }
.steps { counter-reset: step; }
.steps .card { position: relative; padding-top: 26px; }
.steps .card::before { counter-increment: step; content: counter(step); position: absolute; top: -14px; inset-inline-start: var(--pad); width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: #1c1712; font-weight: 800; }
details.faq { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px 18px; margin-bottom: 10px; }
details.faq summary { cursor: pointer; font-weight: 700; padding: 12px 0; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--ink-3); line-height: 1; }
details.faq[open] summary::after { content: "−"; }
details.faq p { color: var(--ink-2); }
.disclaimer { font-size: .85rem; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: 12px; padding: 12px 16px; }

/* Footer */
.foot { margin-top: 48px; border-top: 1px solid var(--line); background: var(--surface); }
.foot-in { display: flex; gap: 20px; justify-content: space-between; flex-wrap: wrap; padding: 26px 0 calc(26px + var(--safe-b)); color: var(--ink-3); font-size: .9rem; }
.foot a { color: var(--ink-2); }
.foot nav { display: flex; gap: 10px 18px; flex-wrap: wrap; justify-content: flex-end; flex: 1 1 auto; min-width: 0; }
.foot nav form { display: inline; margin: 0; }
@media (max-width: 640px) {
  .foot-in { flex-direction: column; align-items: stretch; gap: 14px; padding-top: 20px; }
  .foot-in > div:first-child { order: 2; text-align: center; font-size: .82rem; }
  .foot nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .foot nav > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .foot nav form { display: block !important; }
  .foot nav a, .foot nav .link-btn { display: block; width: 100%; padding: 10px 8px; text-align: center; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-size: .88rem; line-height: 1.4; }
}

/* Page header */
.page-head { padding: 28px 0 8px; }
.page-head h1 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); margin-bottom: 4px; }
.crumbs { font-size: .88rem; color: var(--ink-3); margin-bottom: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs a { color: var(--ink-3); }

/* Dashboard */
.access-banner { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 18px 22px; border-radius: 18px; background: linear-gradient(120deg, rgba(var(--primary-rgb), .14), rgba(var(--accent-rgb), .14)); border: 1px solid rgba(var(--primary-rgb), .25); }
.access-banner.locked { background: linear-gradient(120deg, rgba(var(--accent-rgb), .18), rgba(var(--alert-rgb), .1)); border-color: rgba(var(--accent-rgb), .35); }
.meter { height: 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.meter.mid > i { background: var(--accent); } .meter.low > i { background: var(--alert); }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list-plain li:last-child { border-bottom: 0; }
.exam-card { position: relative; overflow: hidden; }
.exam-card .exam-mark { position: absolute; inset-inline-end: -18px; top: -18px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at center, rgba(var(--accent-rgb), .22), transparent 70%); }
.topic { display: flex; align-items: center; gap: 14px; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.topic:last-child { border-bottom: 0; }
.topic-main { flex: 1; min-width: 220px; }
.topic-main h4 { margin: 0 0 4px; font-size: 1rem; }
.lesson-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lesson-links a { font-size: .85rem; padding: 3px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); }
.lesson-links a.done { color: var(--good); border-color: rgba(var(--primary-rgb), .3); }
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabs a { padding: 10px 14px; color: var(--ink-2); font-weight: 700; border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--accent); text-decoration: none; }

/* Lesson / prose */
.prose { font-size: 1.06rem; line-height: 1.95; }
.prose h2 { margin-top: 1.6em; } .prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li { margin: .3em 0; }
.prose blockquote { margin: 1.2em 0; padding: 12px 18px; border-inline-start: 4px solid var(--accent); background: var(--surface-2); border-radius: 10px; }
.prose table { margin: 0; }
.prose .table-wrap { margin: 1em 0; }
.lesson-nav { flex-wrap: wrap; gap: 10px; } .lesson-nav .btn, .btn-wrap { white-space: normal; max-width: 100%; min-width: 0; text-align: start; } /* long lesson titles and skill names wrap on small phones (5.28.1) */
.prose img { border-radius: 12px; border: 1px solid var(--line); }
.video { position: relative; padding-top: 56.25%; border-radius: 16px; overflow: hidden; background: #000; margin-bottom: 20px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Player */
.player-top { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line); }
.player-bar { display: flex; align-items: center; gap: 12px; min-height: 60px; }
.player-bar .ttl { font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timer { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-variant-numeric: tabular-nums; padding: 6px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); direction: ltr; }
.timer.warn { color: var(--low); border-color: rgba(var(--alert-rgb), .4); background: var(--low-bg); }
.progress-line { height: 4px; background: var(--surface-2); }
.progress-line i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.player { display: grid; grid-template-columns: 1fr 280px; gap: 20px; padding: 20px 0 40px; align-items: start; }
@media (max-width: 900px) { .player { grid-template-columns: 1fr; } }
.qcard { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); }
.q-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; color: var(--ink-3); font-size: .88rem; }
.q-stem { font-size: 1.22rem; font-weight: 700; line-height: 1.9; margin-bottom: 18px; }
.q-stem img, .q-img { display: block; max-width: 100%; margin: 12px auto; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.passage { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; max-height: 45vh; overflow: auto; line-height: 2; }
.passage h4 { margin-bottom: 6px; }
.opts { display: grid; gap: 10px; }
.opt { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--bg); cursor: pointer; font-weight: 600; font-size: 1.05rem; min-height: 56px; transition: border-color .12s, background .12s; -webkit-tap-highlight-color: transparent; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .key { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-2); font-weight: 800; }
.opt:hover { border-color: rgba(var(--primary-rgb), .55); }
.opt:has(input:checked), .opt.sel { border-color: var(--primary); background: rgba(var(--primary-rgb), .08); }
.opt:has(input:checked) .key, .opt.sel .key { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.opt:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .25); }
.opts .opt.right { border-color: var(--good) !important; background: var(--good-bg) !important; }
.opts .opt.right .key { background: var(--good) !important; color: #fff !important; border-color: var(--good) !important; }
.opts .opt.wrong { border-color: var(--low) !important; background: var(--low-bg) !important; }
.opts .opt.wrong .key { background: var(--low) !important; color: #fff !important; border-color: var(--low) !important; }
.opt.right .mark { color: var(--good); } .opt.wrong .mark { color: var(--low); }
.opt.locked { cursor: default; }
.opt .mark { margin-inline-start: auto; }
.explain { margin-top: 18px; padding: 16px 18px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.explain h4 { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.verdict { display: flex; gap: 10px; align-items: center; font-weight: 800; padding: 12px 16px; border-radius: 12px; margin-top: 16px; }
.verdict.good { background: var(--good-bg); color: var(--good); } .verdict.low { background: var(--low-bg); color: var(--low); }
.q-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; margin-top: 20px; }
.q-actions .grow { flex: 1; }
.navgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.navgrid button { height: 42px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg); color: var(--ink-2); font: inherit; font-weight: 700; cursor: pointer; position: relative; }
.navgrid button.ans { background: rgba(var(--primary-rgb), .12); border-color: rgba(var(--primary-rgb), .4); color: var(--primary); }
.navgrid button.right { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.navgrid button.wrong { background: var(--low-bg); border-color: var(--low); color: var(--low); }
.navgrid button.cur { outline: 2px solid var(--accent); outline-offset: 1px; }
.navgrid button.flg::after { content: ""; position: absolute; top: 4px; inset-inline-end: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--alert); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .8rem; color: var(--ink-3); margin-top: 10px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 4px; vertical-align: middle; border: 1px solid var(--line-2); }
.side-sticky { position: sticky; top: 76px; }
@media (max-width: 900px) { .side-sticky { position: static; } }
.no-select { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.watermark { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .04; overflow: hidden; color: var(--ink); font-weight: 800; font-size: 14px; line-height: 4.2; word-spacing: 3em; transform: rotate(-18deg) scale(1.4); white-space: normal; }
.qcard > *:not(.watermark), .prose-wm > *:not(.watermark), .review-item > *:not(.watermark) { position: relative; z-index: 1; }
.prose-wm { position: relative; overflow: hidden; }
.bm-btn.on { color: var(--accent); border-color: rgba(var(--accent-rgb), .5); }

/* Results */
.score-ring { --p: 0; width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ring, var(--primary)) calc(var(--p) * 1%), var(--surface-2) 0); margin: 0 auto; }
.score-ring > div { width: 136px; height: 136px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; text-align: center; }
.share-res { margin-top: 14px; } /* 5.21.0: clear of the right/wrong pills above it */
.score-ring b { font-size: 2.4rem; line-height: 1; font-weight: 800; }
.score-ring.mid { --ring: var(--accent); } .score-ring.low { --ring: var(--alert); }
.bar-row { display: grid; grid-template-columns: minmax(110px, 180px) 1fr 52px; gap: 12px; align-items: center; padding: 8px 0; }
.bar-row .meter { height: 10px; }
.review-item { border: 1px solid var(--line); border-radius: 16px; padding: 18px; background: var(--surface); margin-bottom: 12px; position: relative; overflow: hidden; }
.review-item.is-right { border-inline-start: 5px solid var(--good); } .review-item.is-wrong { border-inline-start: 5px solid var(--low); } .review-item.is-skip { border-inline-start: 5px solid var(--accent); }
.review-item .opt { min-height: 46px; padding: 10px 12px; font-size: .98rem; cursor: default; }

/* Pagination */
.pager { display: flex; gap: 6px; justify-content: center; margin: 22px 0; flex-wrap: wrap; }
.pager a, .pager span { min-width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-weight: 700; }
.pager span.on { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }

/* Receipt */
.receipt { max-width: 640px; margin: 30px auto; background: #fff; color: #1c1712; border-radius: 16px; padding: 32px; border: 1px solid #e5dccd; }
.receipt table td, .receipt table th { border-color: #eee3d2; }
.receipt-qr svg { display: block; width: 120px; height: 120px; } /* tax invoice QR (2.21.0) */
/* organisation dashboard on phones (2.21.0): a table that does not fit becomes stacked rows, as in the control panel */
.rt-root table.rt-stack thead { display: none; }
.rt-root table.rt-stack, .rt-root table.rt-stack tbody, .rt-root table.rt-stack tr, .rt-root table.rt-stack td { display: block; width: auto; max-width: 100%; }
.rt-root table.rt-stack tr { padding: 10px 2px; border-bottom: 1px solid var(--line); }
.rt-root table.rt-stack td { border: 0; padding: 2px 0; white-space: normal; overflow-wrap: anywhere; text-align: start; }
.rt-root table.rt-stack td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3, #777); font-weight: 600; }
.rt-root table.rt-stack td:empty { display: none; }
@media print { .no-print { display: none !important; } body { background: #fff; } .receipt { border: 0; margin: 0; } }

/* Error */
.err-page { text-align: center; padding: 80px var(--gutter); }
.err-page .code { font-size: 5rem; font-weight: 800; line-height: 1; color: var(--accent); }
.err-detail { max-width: 640px; margin: 0 auto 18px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 4px; color: var(--ink-2); overflow-wrap: anywhere; }

.empty { text-align: center; padding: 36px 16px; color: var(--ink-3); }
.empty .ic { color: var(--primary); margin-bottom: 8px; }
.katex { font-size: 1.05em; direction: ltr; unicode-bidi: isolate; }
/* each KaTeX piece in its own isolate, so a bracket between two Arabic letters keeps the formula order, e.g. د(س) not (س)د (5.5.2) */
.katex-html span { unicode-bidi: isolate; }
/* Competitions (5.36.0) */
a.comp-card { display: block; color: inherit; text-decoration: none; }
.player.comp-play { grid-template-columns: 1fr; gap: 0; } .comp-play > .btn { justify-self: start; } /* 5.37.1: no sidebar, one column (the exam player grid squeezed it) */
a.comp-card:hover { border-color: var(--primary); }
.comp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 10px; margin: 0; }
.comp-facts li { display: flex; flex-direction: column; gap: 2px; }
.comp-prizes li, .comp-board li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.comp-prizes li:last-child, .comp-board li:last-child { border-bottom: 0; }
.comp-board .ch-rank { display: inline-block; min-width: 1.6em; }
.comp-board .ch-me { font-weight: 700; color: var(--primary); }
.comp-rev { padding: 12px 0; border-bottom: 1px solid var(--line); }
.comp-rev:last-child { border-bottom: 0; }
.comp-terms { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; }
@media (max-width: 560px) {
  .brand small { display: none; }
  .list-plain li { flex-wrap: wrap; }
  .qcard { padding: 18px; }
  .q-stem { font-size: 1.12rem; }
  .bar-row { grid-template-columns: minmax(90px, 130px) 1fr 44px; }
}
.blank { display: inline-block; letter-spacing: 1px; color: var(--ink-3); white-space: nowrap; }
.prose p, .prose li, .prose td, .prose th { unicode-bidi: plaintext; text-align: start; }
.listen { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 18px; border-radius: 16px; background: linear-gradient(120deg, rgba(var(--primary-rgb), .12), rgba(var(--accent-rgb), .12)); border: 1px solid rgba(var(--primary-rgb), .3); flex-wrap: wrap; }
.listen-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); flex: none; }
.listen.playing .listen-ic { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), .45); } 50% { box-shadow: 0 0 0 10px rgba(var(--primary-rgb), 0); } }
.listen-body { flex: 1; min-width: 160px; }
.listen audio { width: 100%; margin-top: 8px; }
.plan-card { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.plan-card.on { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15); }
.plan-card.off { opacity: .5; } /* past the most exams an order (5.14.0) */
.bundle-opt { border: 1px solid var(--line); background: var(--surface); color: inherit; font: inherit; }
.bundle-opt:hover { border-color: var(--primary); }
.plan-all { background: linear-gradient(140deg, var(--surface), rgba(var(--accent-rgb), .1)); }


/* ===== v1.6: educational look + mobile-first shell ===== */
.btn, .pill, .eyebrow { font-family: var(--font-head); }
.card { border-radius: 20px; }
.stat { position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--primary); opacity: .85; }
.stat:nth-child(2)::before { background: var(--accent); } .stat:nth-child(3)::before { background: rgb(var(--sky-rgb)); } .stat:nth-child(4)::before { background: var(--alert); }
.grid > .exam-card { border-inline-start: 4px solid var(--primary); }
.tabbar { display: none; }
.m-cta { display: none; } /* visitors' fixed button on phones (2.20.0) */
@media (max-width: 767px) {
  body.has-mcta { padding-bottom: calc(76px + var(--safe-b)); }
  .m-cta { display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 55; padding: 10px 16px calc(10px + var(--safe-b)); background: var(--surface); border-top: 1px solid var(--line-2); box-shadow: 0 -4px 14px rgba(0, 0, 0, .08); }
}
@media (max-width: 860px) {
  body.has-tabbar { padding-bottom: calc(68px + var(--safe-b)); }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset-inline: 0; bottom: 0; z-index: 55; background: var(--surface); border-top: 1px solid var(--line-2); padding: 6px 4px calc(6px + var(--safe-b)); box-shadow: 0 -8px 24px -12px rgba(0,0,0,.35); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 4px 2px; border: 0; background: none; color: var(--ink-3); font: inherit; font-family: var(--font-head); font-size: .72rem; font-weight: 700; border-radius: 14px; text-decoration: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
  .tabbar a.on { color: var(--primary); background: rgba(var(--primary-rgb), .12); }
  .tabbar .ic { width: 22px; height: 22px; }
  .nav { min-height: 56px; gap: 10px; }
  .menu-btn { display: none; }
  .nav-end .icon-btn.hide-sm { display: none; }
  .mobile-nav { max-height: calc(100vh - 140px); overflow-y: auto; background: var(--bg); }
}
@media (max-width: 560px) {
  .page-head { gap: 10px; }
  .page-head .btn { width: 100%; }
  h1 { font-size: 1.55rem; }
  .btn-lg { width: 100%; }
  .hero { padding: 32px 0 24px; }
  .stat { padding: 14px; } .stat b { font-size: 1.45rem; }
  .table-wrap { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-inline: 0; }
  input, select, textarea { font-size: 16px; }
}
[hidden] { display: none !important; }

/* v1.6.1 theme picker */
.theme-opt { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; color: var(--ink); font: inherit; font-size: .92rem; padding: 9px 10px; border-radius: 10px; cursor: pointer; text-align: start; }
.theme-opt:hover { background: var(--surface-2); }
.theme-opt[aria-checked="true"] { background: rgba(var(--primary-rgb), .12); font-weight: 600; }
.theme-opt[aria-checked="true"]::after { content: ""; width: 5px; height: 10px; border: solid var(--primary); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-inline-start: auto; margin-inline-end: 4px; } /* drawn tick, no text symbol */
.theme-inline { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-inline .theme-opt { width: auto; border: 1px solid var(--line-2); background: var(--surface); }
/* Home slider */
.slider { padding: 18px 0 4px; }
.sl-stage { position: relative; aspect-ratio: 16 / 7; border-radius: var(--radius); overflow: hidden; background: var(--bg2); box-shadow: var(--shadow); isolation: isolate; }
.sl-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.sl-slide.on { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
.sl-slide picture, .sl-slide img, .sl-video, .sl-embed, .sl-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sl-slide img, .sl-video { object-fit: cover; }
.sl-video, .sl-embed { background: #000; }
.sl-link { position: absolute; inset: 0; z-index: 2; }
.sl-cap { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 56px clamp(18px, 4vw, 48px) clamp(18px, 3vw, 34px); color: #fff; background: linear-gradient(to top, rgba(8, 12, 28, .78), rgba(8, 12, 28, 0)); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.sl-cap > * { margin: 0; }
.sl-cap .btn { pointer-events: auto; }
.sl-cap h2 { color: #fff; font-size: clamp(1.25rem, 3.2vw, 2.1rem); text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.sl-cap p { max-width: 640px; font-size: clamp(.92rem, 1.6vw, 1.1rem); opacity: .95; }
.sl-cap .btn { margin-top: 8px; }
.sl-video ~ .sl-cap, .sl-embed ~ .sl-cap { inset-block: 0 auto; background: linear-gradient(to bottom, rgba(8, 12, 28, .7), rgba(8, 12, 28, 0)); padding-block: 14px 44px; }
.sl-text { display: grid; place-items: center; text-align: center; color: #fff; }
.sl-text.tone-dark { color: #101420; }
.sl-text .sl-cap { position: static; background: none; padding: 24px clamp(48px, 9vw, 120px); align-items: center; color: inherit; }
.sl-text .sl-cap h2, .sl-text .sl-cap p { color: inherit; text-shadow: none; }
.sl-text .sl-cap h2 { font-size: clamp(1.5rem, 4.2vw, 2.8rem); }
.sl-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(var(--primary-rgb), .0); background: rgba(10, 14, 30, .5); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .2s; }
.sl-nav:hover, .sl-nav:focus-visible { background: rgba(10, 14, 30, .8); }
.sl-prev { inset-inline-start: 12px; } .sl-next { inset-inline-end: 12px; }
.sl-bar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 0 0; }
.sl-dots { display: flex; gap: 8px; }
.sl-dot { width: 10px; height: 10px; border-radius: 999px; border: 0; padding: 0; background: var(--line-2); cursor: pointer; transition: width .25s, background .25s; }
.sl-dot.on { width: 28px; background: var(--primary); }
.sl-pause { border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); border-radius: 999px; font-size: .62rem; line-height: 1; padding: 6px 9px; cursor: pointer; letter-spacing: -1px; }
.sl-pause[aria-pressed="true"] { color: var(--primary); }
@media (max-width: 640px) {
  .sl-stage { border-radius: var(--radius-sm); }
  .sl-nav { width: 34px; height: 34px; font-size: 1.4rem; }
  .sl-text .sl-cap { padding-inline: 44px; }
}
/* Slide change effects (2.17.5), chosen in Admin → Slider: fx-slide (default), fx-zoom, fx-fade (the plain fade above).
   JS adds .sl-anim on the first change (so the first slide does not animate on page load), data-dir="next|prev",
   and .out on the leaving slide for the length of the effect. --sx flips the slide direction for LTR pages. */
.slider { --sx: 1; }
html[dir=ltr] .slider { --sx: -1; }
.fx-slide .sl-slide { transition: none; }
.fx-slide .sl-slide.out { opacity: 1; visibility: visible; z-index: 0; }
.fx-slide.sl-anim .sl-slide.on { animation: sl-in .75s cubic-bezier(.22, .61, .36, 1) both; }
.fx-slide.sl-anim .sl-slide.out { animation: sl-out .75s cubic-bezier(.22, .61, .36, 1) both; }
.fx-slide.sl-anim[data-dir="prev"] .sl-slide.on { animation-name: sl-in-prev; }
.fx-slide.sl-anim[data-dir="prev"] .sl-slide.out { animation-name: sl-out-prev; }
@keyframes sl-in { from { transform: translateX(calc(-100% * var(--sx))); } to { transform: none; } }
@keyframes sl-out { from { transform: none; } to { transform: translateX(calc(100% * var(--sx))); } }
@keyframes sl-in-prev { from { transform: translateX(calc(100% * var(--sx))); } to { transform: none; } }
@keyframes sl-out-prev { from { transform: none; } to { transform: translateX(calc(-100% * var(--sx))); } }
.fx-zoom.sl-anim .sl-slide.on { animation: sl-zoom .9s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes sl-zoom { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sl-slide { transition: none; } .slider .sl-slide.on, .slider .sl-slide.out { animation: none !important; } }
.inline-form input:not([type=hidden]):not([type=checkbox]):not([type=radio]) { width: auto; min-width: 150px; min-height: 38px; padding: 6px 10px; border-radius: 10px; }

/* ── Restrained, flat finish (v2.2): hairline borders, small radii, no glow / blobs / gradient stripes ── */
:root { --shadow: 0 1px 0 rgba(0,0,0,.04); --shadow-sm: none; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: 0; line-height: 1.4; }
.top-in { background: var(--header-bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--line); }
.btn { border-radius: var(--radius-sm); }
.btn-primary { box-shadow: none; }
.btn-primary:hover { filter: brightness(1.1); }
.card, .qcard, .price-card, .access-banner, .listen { border-radius: var(--radius); box-shadow: none; }
.card-link:hover { box-shadow: none; border-color: var(--primary); }
.hero::before { display: none; }
.hero { padding: 44px 0 28px; border-bottom: 1px solid var(--line); }
.eyebrow { border-radius: 4px; background: transparent; border: 0; border-inline-start: 3px solid var(--accent); padding: 2px 10px; }
.eyebrow .dot { display: none; }
.price-card::before { height: 0; }
.price-card { border-top: 3px solid var(--primary); }
.price b { letter-spacing: 0; font-weight: 700; }
.exam-card .exam-mark { display: none; }
.progress-line i { background: var(--primary); }
.access-banner, .access-banner.locked, .listen, .plan-all { background: var(--surface-2); }
.access-banner.locked { border-color: var(--accent); }
.kpis .kpi-hero { background: var(--surface); }
.pill, .tag, .badge { border-radius: 4px; }
.sl-stage { border-radius: var(--radius); box-shadow: none; border: 1px solid var(--line); }
.sl-cap { background: linear-gradient(to top, rgba(10, 14, 24, .78), rgba(10, 14, 24, 0)); }
.stat::before { display: none; }
.grid > .exam-card { border-inline-start: 1px solid var(--line); }
.step .num, .steps .num { border-radius: 4px; }

/* Home (v2.4) */
.hero-note { margin: -4px 0 16px; }
.sample { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.sample-bar { display: flex; justify-content: space-between; align-items: center; color: var(--ink-3); font-size: .88rem; font-weight: 600; margin-bottom: 12px; }
.sample-q { font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; margin: 0 0 14px; }
.sample-opts { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.sample-opts li { padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); display: flex; gap: 8px; align-items: center; }
.sample-opts li.ok { border-color: var(--good); background: var(--good-bg); font-weight: 700; }
.sample-why { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--ink-2); font-size: .95rem; }
.feat > div { padding: 4px 6px; }
.feat h3 { margin: 12px 0 6px; }
.plans { max-width: 860px; margin-inline: auto; }
.band { display: flex; gap: 20px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 24px 28px; background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--primary); border-radius: var(--radius); }
.band h2 { margin: 0 0 4px; font-size: 1.3rem; }
.band p { margin: 0; }
.band-act { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) { .band-act .btn { flex: 1; } }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.sticky-cta { display: none; }
@media (max-width: 720px) {
  .sticky-cta { display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + var(--safe-b)); background: var(--header-bg); border-top: 1px solid var(--line); }
  body:has(.sticky-cta) { padding-bottom: 72px; }
}
.sar { vertical-align: -.14em; margin-inline-start: .08em; }
.money { white-space: nowrap; }

/* Student dashboard layout (v2.4) */
.dash-kpis { margin-top: 16px; }
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; margin-top: 20px; align-items: start; }
.dash-main, .dash-side { display: grid; gap: 18px; min-width: 0; }
.dash-side .card { padding: var(--pad); }
.dash .sec-head h2 { font-size: 1.15rem; margin: 4px 0 -6px; }
.dash .access-banner { margin-top: 16px; }
.quick { list-style: none; margin: 0; padding: 0; display: grid; }
.quick a { display: flex; gap: 10px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; text-decoration: none; }
.quick li:first-child a { border-top: 0; }
.quick a:hover { color: var(--primary); }
@media (max-width: 960px) { .dash { grid-template-columns: 1fr; } }
.price .sar { width: 1.5rem; height: 1.7rem; color: var(--ink-2); vertical-align: baseline; }
.stat .sar { width: .85em; height: .95em; }

/* ---- Support tickets + CMS pages (2.7) ---- */
.tk-thread { display: grid; gap: 12px; }
.tk-msg { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; border-inline-start: 4px solid var(--line-2); }
.tk-msg.staff { border-inline-start-color: var(--accent); background: var(--surface-2); }
.tk-msg.note { border-style: dashed; border-inline-start-color: var(--mid, #b7791f); }
.tk-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.tk-body { line-height: 1.9; overflow-wrap: anywhere; }
.tk-files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; gap: 8px 16px; flex-wrap: wrap; }
.tk-files a { display: inline-flex; gap: 6px; align-items: center; }
.cms-hero { background: var(--surface-2); border-bottom: 1px solid var(--line); padding: 48px 0 40px; text-align: center; }
.cms-hero h1 { margin: 0 0 10px; }
.cms-lead { font-size: 1.15rem; color: var(--ink-2); margin: 0 0 20px; }
.cms-file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cms-file-list li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.cms-file-t { display: grid; flex: 1; min-width: 0; }
.cms-file-t strong { overflow-wrap: anywhere; }
.cms-ext { min-width: 48px; text-align: center; font-size: .72rem; font-weight: 700; padding: 6px 4px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2); direction: ltr; }
.cms-cover { margin: 8px 0 0; } /* page picture (2.23.11) */
.cms-cover img { display: block; width: 100%; max-height: 460px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
.prose img { max-width: 100%; height: auto; }

/* Partners logo strip (above the footer) */
.partners { margin-top: 40px; padding: 18px 0 16px; border-top: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.partners-t { text-align: center; font-size: .78rem; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; margin-bottom: 12px; }
.partners-vp { direction: ltr; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.partners-track { display: flex; align-items: center; gap: 38px; width: max-content; margin: 0; padding: 0 19px; list-style: none; animation: partners-run var(--pdur, 40s) linear infinite; }
.partners-track li { flex: none; display: flex; align-items: center; }
.partners-track img { display: block; height: var(--psize, 64px); width: auto; max-width: calc(var(--psize, 64px) * 3.2); object-fit: contain; transition: transform .2s; }
.partners-track a:hover img, .partners-track img:hover { transform: scale(1.06); }
.partners-vp:hover .partners-track, .partners-vp:focus-within .partners-track { animation-play-state: paused; }
.partners + .foot { margin-top: 0; border-top: 0; }
.partners-track.few { animation-name: partners-sway; animation-timing-function: ease-in-out; animation-direction: alternate; margin-inline: auto; justify-content: center; gap: 56px; }
@keyframes partners-sway { from { transform: translateX(-22px); } to { transform: translateX(22px); } }
@keyframes partners-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .partners-vp { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .partners-track { animation: none; } .partners-track li[aria-hidden="true"] { display: none; } }
@media (max-width: 640px) { .partners-track { gap: 28px; } .partners-track img { height: calc(var(--psize, 64px) * .75); max-width: calc(var(--psize, 64px) * 2.4); } }

/* Book store */
.book-card { display: flex; flex-direction: column; }
.book-cover { aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, var(--primary), var(--accent)); display: flex; align-items: center; justify-content: center; color: #fff; }
.book-cover { position: relative; }
.book-tags { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 1; max-width: calc(100% - 20px); }
.book-tag { background: rgba(15, 20, 35, .72); color: #fff; font-family: var(--font-head); font-size: .74rem; font-weight: 700; line-height: 1; padding: 6px 10px; border-radius: 99px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.book-tag.new { background: #1b8a5a; }
.book-tag.sale { background: #c0392b; }
.book-card s { opacity: .65; font-size: .95rem; margin-inline-start: 6px; }
.book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-cover > span:not(.book-tags) { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; text-align: center; font-size: 1.05rem; }
.book-buy { margin-top: auto; padding-top: 10px; display: grid; gap: 8px; }
.book-opt { background: var(--surface-2, transparent); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 260px)); gap: 18px; justify-content: center; }
@media (max-width: 520px) { .book-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); max-width: 420px; margin-inline: auto; gap: 14px; } }
.book-card { min-width: 0; }
.book-card .btn { white-space: normal; text-align: center; }
.login-tabs .btn { white-space: normal; text-align: center; line-height: 1.3; }
.book-cats { justify-content: flex-start; margin: 16px 0 6px; }
@media (min-width: 760px) { .book-cats { justify-content: center; } }
.book-sort { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; align-items: center; margin: 4px 0 6px; }
.book-sort a { color: var(--ink-2); }
.book-sort a.on { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
/* store search and short titles (2.25.0) */
.book-search { display: flex; align-items: center; gap: 8px; max-width: 560px; margin: 18px auto 4px; padding: 4px 4px 4px 4px; padding-inline-start: 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink-3); }
.book-search:focus-within { border-color: var(--primary); }
.book-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 8px 0; font: inherit; color: var(--ink); outline: none; box-shadow: none; }
.book-found { text-align: center; margin: 6px 0 0; }
.book-kicker { display: block; margin-top: 10px; font-size: .75rem; color: var(--ink-3); }
.book-group-title { font-size: 1.25rem; margin: 30px 0 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); }

/* ---------- English / LTR ---------- */
html[dir=ltr] body { font-family: var(--font-en, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); line-height: 1.6; }
html[dir=ltr] h1, html[dir=ltr] h2, html[dir=ltr] h3, html[dir=ltr] h4, html[dir=ltr] .brand, html[dir=ltr] .stat b, html[dir=ltr] .kpi b, html[dir=ltr] .btn, html[dir=ltr] .pill, html[dir=ltr] .eyebrow { font-family: var(--font-en, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); letter-spacing: 0; }
html[dir=ltr] .sl-nav { transform: translateY(-50%) scaleX(-1); }
html[dir=ltr] .ltr { text-align: start; }
html[dir=ltr] textarea.code { direction: ltr; }
.lang-sw { font-weight: 600; white-space: nowrap; }

/* Detailed diagnostic report (screen + print) */
.report { max-width: 860px; margin: 24px auto; background: #fff; color: #1c1712; border-radius: 16px; padding: 28px; border: 1px solid #e5dccd; }
.report h2 { font-size: 1.15rem; margin: 26px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #eee3d2; }
.report .muted { color: #6f6253; }
.rpt-top { display: flex; gap: 18px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.rpt-score { width: 130px; height: 130px; border-radius: 50%; border: 8px solid #c9bda9; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; }
.rpt-score b { font-size: 1.9rem; line-height: 1.1; } .rpt-score span { font-size: .8rem; font-weight: 700; }
.rpt-score.good { border-color: #2e8b57; } .rpt-score.mid { border-color: #d99a1f; } .rpt-score.low { border-color: #c0392b; }
.rpt-nums { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; }
.rpt-nums div { flex: 1 1 100px; background: #f7f1e6; border-radius: 12px; padding: 10px; text-align: center; }
.rpt-nums b { display: block; font-size: 1.3rem; } .rpt-nums span { font-size: .78rem; color: #6f6253; }
.rpt-summary { background: #f7f1e6; border-radius: 12px; padding: 14px 16px; margin-top: 16px; line-height: 1.9; }
.rpt-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.rpt-table th, .rpt-table td { text-align: start; padding: 8px 6px; border-bottom: 1px solid #eee3d2; vertical-align: middle; }
.rpt-table .meter { min-width: 90px; margin-bottom: 2px; }
@media (max-width: 560px) { .rpt-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* 5.20.1: the detailed report table scrolls inside itself on phones */
.rpt-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.rpt-list li { padding: 9px 12px; border-radius: 10px; background: #f7f1e6; border-inline-start: 4px solid #c9bda9; line-height: 1.8; }
.rpt-list li.good { border-color: #2e8b57; } .rpt-list li.warn { border-color: #d99a1f; }
.rpt-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; }
.rpt-week { border: 1px solid #eee3d2; border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; break-inside: avoid; }
.rpt-week h3 { margin: 0 0 6px; font-size: 1rem; } .rpt-week ul, .rpt-tips { margin: 0; padding-inline-start: 20px; line-height: 1.9; }
.rpt-foot { margin-top: 24px; border-top: 1px solid #eee3d2; padding-top: 10px; }
@media (max-width: 720px) { .rpt-cols { grid-template-columns: 1fr; } .report { padding: 16px; border-radius: 0; } }
@media print { .report { border: 0; margin: 0; padding: 0; max-width: none; } .report h2 { break-after: avoid; } .rpt-table tr, .rpt-list li { break-inside: avoid; } .rpt-score, .rpt-nums div, .rpt-summary, .rpt-list li, .meter i { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Institute packages (2.11.4) */
.org-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.org-tiles h3 { margin: 0 0 6px; font-size: 1.05rem; }
.org-tiles p { margin: 0; }
.org-exams { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; margin-top: 4px; }
.org-sum { margin-top: 12px; background: var(--surface-2, var(--surface)); }
.org-sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.org-sum-grid > div { display: flex; flex-direction: column; gap: 2px; }
/* organisations (2.21.0): billing details, trial and quote */
.org-bill { margin: 12px 0; } .org-bill summary { cursor: pointer; font-weight: 600; padding: 6px 0; } .org-bill .form-grid { margin-top: 8px; }
.org-actions { flex-wrap: wrap; gap: 10px; }
.org-quote-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; }
.org-quote-box > div { flex: 1 1 260px; min-width: 0; }
.trial-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.org-sum-grid b { font-size: 1.25rem; font-family: var(--font-head); }
.org-total b { font-size: 1.6rem; color: var(--primary); }
.org-warn { color: var(--alert) !important; font-weight: 700; }

/* Book store front (2.11.8) */
.store-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--gap); align-items: center; margin-top: var(--gap); padding: var(--pad-lg); border-radius: calc(var(--radius) * 2); border: 1px solid var(--line); background: linear-gradient(135deg, rgba(var(--primary-rgb), .12), rgba(var(--accent-rgb), .12)); overflow: hidden; }
.store-hero h1 { margin: 8px 0; }
.store-hero-book { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin: 0 0 14px; }
.store-hero-price { font-weight: 800; color: var(--accent-text); }
.store-hero-cover { justify-self: center; width: min(240px, 80%); aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .45); transform: rotate(-3deg); }
.store-hero-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px) { .store-hero { grid-template-columns: 1fr; text-align: center; } .store-hero .row, .store-hero-book { justify-content: center; } .store-hero-cover { width: 150px; grid-row: 1; } }
.store-promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.store-promo { display: flex; align-items: center; gap: 14px; padding: var(--pad); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.store-promo:hover { text-decoration: none; border-color: var(--primary); }
.store-promo b { display: block; font-family: var(--font-head); }
.store-promo span span { display: block; font-size: .86rem; color: var(--ink-3); }
.ic-box { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(var(--primary-rgb), .1); color: var(--primary); }
.rail { margin-top: var(--section); }
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.rail-head h2, .rail-title { margin: 0; font-size: 1.3rem; }
.rail-nav { gap: 6px; }
.rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 210px); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.rail-track > * { scroll-snap-align: start; }
.book-card.compact { padding: 12px; }
.book-card.compact h3 { font-size: .98rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-card.compact .price b { font-size: 1.25rem !important; }
@media (max-width: 767px) { .rail-track { grid-auto-columns: 46%; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } .rail-nav .icon-btn { display: none; } }
.store-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); margin-top: var(--section); }
.mini-list { list-style: none; margin: 10px 0 0; padding: 0; }
.mini-list li + li { border-top: 1px solid var(--line); }
.mini-list a { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--ink); }
.mini-list a:hover { text-decoration: none; }
.mini-list img, .mini-cover { width: 46px; aspect-ratio: 3 / 4; flex: none; border-radius: 6px; object-fit: cover; background: linear-gradient(135deg, var(--primary), var(--accent)); }
.mini-list .t { flex: 1; min-width: 0; }
.mini-list .t b { display: block; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-list .t span { font-size: .82rem; color: var(--ink-3); }
.mini-list .p { font-weight: 800; white-space: nowrap; }
.mini-list .rank { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: .8rem; font-weight: 800; }
.store-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap); margin-top: var(--section); padding: var(--pad-lg); border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); text-align: center; }
.store-features .ic { color: var(--primary); }
.store-features b { display: block; margin-top: 6px; font-family: var(--font-head); }
.store-features span { font-size: .85rem; color: var(--ink-3); }

/* ── Formal design (v2.13, after the Eduker template): white and grey surfaces, navy text, one blue, dark navy footer.
      No decorative colours. Night mode swaps the same tokens (data-theme="dark", or "auto" on a dark device). ── */
:root { --fm-navy: #2a0410; --fm-navy-ink: #d9c3c9; --fm-hero: #4a0b1f; --fm-band: #faf5ee; } /* burgundy hero and footer (2.18.0) */
:root[data-theme="dark"] { --fm-navy: #181818; --fm-navy-ink: #a0a0a0; --fm-hero: #181818; --fm-band: #242424; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --fm-navy: #181818; --fm-navy-ink: #a0a0a0; --fm-hero: #181818; --fm-band: #242424; } }

.top-in { background: var(--surface); }
.nav-links a.on, .nav-links a:hover { background: transparent; color: var(--primary); }
.dark-toggle .dt-sun, :root.is-dark .dark-toggle .dt-moon { display: none; }
:root.is-dark .dark-toggle .dt-sun { display: inline; }
.btn { border-radius: 4px; }
.btn-line { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); }
.btn-line:hover { background: rgba(255,255,255,.1); }
.fm-kicker { display: block; color: var(--primary); font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.fm-ic { flex: none; display: inline-grid; place-items: center; color: var(--primary); }

/* slider: full width, caption beside a dark fade, blue button, round arrows */
.slider { padding: 0; position: relative; }
.slider > .wrap { max-width: none; padding: 0; position: relative; }
.slider .sl-stage { aspect-ratio: 16 / 7; border-radius: 0; box-shadow: none; } /* one size on every screen (2.17.0): images 1600×700 */
.slider .sl-cap { inset: 0; justify-content: center; gap: 10px; padding: 24px max(var(--gutter), calc((100% - 1180px) / 2 + var(--gutter))); background: linear-gradient(to left, rgba(8, 10, 28, .72), rgba(8, 10, 28, .08) 75%); }
.slider .sl-cap h2 { font-size: clamp(1.5rem, 4.4vw, 3rem); max-width: 720px; }
.slider .sl-cap .btn { background: var(--primary); color: var(--primary-ink); border-radius: 4px; }
.slider .sl-video ~ .sl-cap, .slider .sl-embed ~ .sl-cap { inset: 0 0 auto; justify-content: flex-start; background: linear-gradient(to bottom, rgba(8, 10, 28, .65), transparent); }
.slider .sl-text .sl-cap { background: none; }
.slider .sl-nav { background: transparent; border: 1px solid rgba(255,255,255,.7); }
.slider .sl-bar { position: absolute; inset-inline: 0; bottom: 14px; z-index: 3; padding: 0; }
.slider .sl-dot { background: rgba(255,255,255,.55); }
.slider .sl-dot.on { background: #fff; }
.slider .sl-pause { background: rgba(8, 10, 28, .45); border-color: transparent; color: #fff; }
/* 2.17.4: the pause button stays for keyboard users only (shown on focus), and slide media cannot be dragged or long-pressed to save */
.slider .sl-pause:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.slider .sl-stage { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.slider .sl-stage img, .slider .sl-stage video { -webkit-user-drag: none; }

/* hero: dark navy band (no colour blobs); after a slider it becomes a plain light strip */
.fm-hero { background: var(--fm-hero); color: #fff; }
.fm-hero-in { padding: clamp(48px, 8vw, 96px) var(--gutter) clamp(88px, 11vw, 132px); max-width: 1180px; }
.fm-hero .fm-kicker { color: #f2d27e; }
.fm-hero h1 { font-size: clamp(1.9rem, 5.2vw, 3.2rem); color: #fff; max-width: 760px; margin-bottom: 14px; }
.fm-hero .lead { color: rgba(255,255,255,.85); max-width: 600px; font-size: 1.05rem; }
.fm-hero .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 14px; }
.fm-hero .hero-note { color: rgba(255,255,255,.7); font-size: .88rem; margin: 0; }
.slider + .fm-hero { background: var(--fm-band); color: var(--ink); }
.slider + .fm-hero .fm-kicker { color: var(--primary); }
.slider + .fm-hero h1 { color: var(--ink); font-size: clamp(1.6rem, 4vw, 2.4rem); }
.slider + .fm-hero .lead, .slider + .fm-hero .hero-note { color: var(--ink-2); }
.slider + .fm-hero .btn-line { color: var(--ink); border-color: var(--line-2); }
.slider + .fm-hero .btn-line:hover { background: var(--surface); }

/* three features on a white card that overlaps the hero */
.fm-feats { position: relative; z-index: 2; margin-top: -64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); padding: clamp(20px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 40px -24px rgba(42, 4, 16, .35); }
.fm-feats > div { display: flex; gap: 14px; align-items: flex-start; }
.fm-feats h3 { font-size: 1rem; margin-bottom: 4px; }
.fm-feats p { margin: 0; font-size: .86rem; color: var(--ink-3); }

/* about */
.fm-about-in { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.fm-about h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
.fm-about p { color: var(--ink-2); }
.fm-checks { list-style: none; padding: 0; margin: 16px 0 22px; }
.fm-checks li { display: flex; gap: 10px; align-items: center; padding: 5px 0; font-size: .92rem; }
.fm-checks .ic { color: var(--primary); flex: none; }

/* key figures beside the hero text (2.13.3: fills the empty half of the hero, replaces the separate figures band) */
.fm-hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.fm-hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fm-hero-stats > div { display: flex; flex-direction: column; gap: 4px; padding: clamp(16px, 2.2vw, 24px); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.fm-hero-stats .ic { color: #f2d27e; margin-bottom: 6px; }
.fm-hero-stats b { font-family: var(--font-head); font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.15; color: #fff; }
.fm-hero-stats span { font-size: .88rem; color: rgba(255,255,255,.75); }
.slider + .fm-hero .fm-hero-stats > div { background: var(--surface); border-color: var(--line); box-shadow: 0 10px 30px -22px rgba(42, 4, 16, .45); }
.slider + .fm-hero .fm-hero-stats .ic { color: var(--primary); }
.slider + .fm-hero .fm-hero-stats b { color: var(--primary); }
.slider + .fm-hero .fm-hero-stats span { color: var(--ink-3); }

/* exams */
.fm-head h2 { margin-bottom: 8px; }
.fm-exams { grid-template-columns: repeat(3, 1fr); }
.fm-exams .card { border-radius: 4px; box-shadow: none; }
.fm-exams .card:hover { border-color: var(--primary); }
.fm-exams .fm-ic { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 12px; }
.fm-exams h3 { font-size: 1rem; }
.fm-exams p { font-size: .88rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Exam browser (2.23.0): search box and category buttons above the exam cards, on the home page and /exams */
.exb-tools { display: grid; gap: 12px; margin-bottom: 18px; }
.exb-search { display: flex; align-items: center; gap: 8px; max-width: 520px; width: 100%; margin-inline: auto; padding: 0 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink-3); }
.exb-search:focus-within { border-color: var(--primary); }
.exb-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 0; font: inherit; color: var(--ink); outline: none; box-shadow: none; }
.exb-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.exb-cat { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.exb-cat:hover { border-color: var(--primary); color: var(--ink); }
.exb-cat[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.exb-n { font-size: .78rem; font-weight: 400; opacity: .8; }
.exam-browser [data-exb-item].exb-out { display: none; }
.exb-empty { text-align: center; margin: 12px 0 0; }
.exb-all { text-align: center; margin: 20px 0 0; }
/* Admin coupons (2.23.9): the exams and books a coupon is tied to */
.cp-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; max-height: 260px; overflow: auto; padding: 10px 2px 2px; }
/* Home page (2.23.3): a search box that opens /exams?q= and one button to /exams; «عن المنصة» without the sample takes one column */
.home-exb-search { padding-inline-end: 6px; }
.home-exb-search .btn { flex: none; }
.fm-about-in.fm-about-solo { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; text-align: center; }
.fm-about-solo .fm-checks { display: inline-grid; text-align: start; }
/* A printed book's audio page (2.23.4): /books/{name}-audio, opened from the book's QR codes */
.ba-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 22px; }
.ba-jump a { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-size: .88rem; font-weight: 700; }
.ba-jump a:hover { border-color: var(--primary); color: var(--ink); text-decoration: none; }
.ba-group { margin: 0 0 26px; scroll-margin-top: 90px; }
.ba-group h2 { font-size: 1.1rem; margin: 0 0 10px; }
.ba-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ba-track { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); scroll-margin-top: 90px; }
.ba-track:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.ba-n { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 700; font-size: 1.05rem; }
.ba-body { flex: 1; min-width: 0; }
.ba-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ba-body audio { width: 100%; height: 40px; display: block; }
.ba-locked .fm-ic { margin: 0 auto 10px; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--primary); }
.ba-locked h2 { font-size: 1.15rem; margin: 0 0 6px; }
.ba-books { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
@media (max-width: 640px) {
  .exb-cats { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
  .exb-cats::-webkit-scrollbar { display: none; }
}

/* steps */
.fm-steps-sec { background: var(--fm-band); }
.fm-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); counter-reset: fm; }
.fm-steps li { counter-increment: fm; background: var(--surface); border: 1px solid var(--line); padding: var(--pad-lg); }
.fm-steps li::before { content: counter(fm); display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--primary); color: var(--primary); border-radius: 50%; font-family: var(--font-head); font-weight: 700; margin-bottom: 12px; }
.fm-steps h3 { font-size: 1rem; }
.fm-steps p { margin: 0; font-size: .88rem; color: var(--ink-3); }

/* plans */
.fm-plans { max-width: 860px; margin-inline: auto; }
.fm-plan { background: var(--surface); border: 1px solid var(--line); padding: clamp(20px, 3vw, 32px); }
.fm-plan.main { border-color: var(--primary); box-shadow: inset 0 3px 0 var(--primary); }
.fm-plan strong { font-family: var(--font-head); font-size: 1.1rem; }
.fm-price { margin: 12px 0 2px; flex-wrap: wrap; } .fm-price b { font-size: 2.2rem; }
.ep-price { margin: 10px 0 0; font-size: 1.05rem; }

/* organisations */
.fm-band { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: clamp(22px, 4vw, 40px); border: 1px solid var(--line); background: var(--fm-band); }
.fm-band > div:first-child { flex: 1 1 360px; }

/* footer: dark navy, four columns */
.foot { margin-top: var(--section); background: var(--fm-navy); color: var(--fm-navy-ink); border-top: 0; }
.foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding-block: 48px 32px; font-size: .9rem; }
.foot h4 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
.foot p { margin: 0 0 8px; }
.foot nav { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; justify-content: flex-start; }
.foot a, .foot .link-btn { color: var(--fm-navy-ink); }
.foot a:hover, .foot .link-btn:hover { color: #fff; text-decoration: none; }
.foot nav form { margin: 0; }
.foot-in { display: block; border-top: 1px solid rgba(255,255,255,.08); padding: 16px 0 calc(16px + var(--safe-b)); color: var(--fm-navy-ink); font-size: .82rem; }
/* payment method marks above the copyright line (2.16.1) */
.pay-marks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.pay-mark { display: inline-flex; align-items: center; justify-content: center; gap: 0; min-width: 54px; height: 30px; padding: 0 10px; border-radius: 6px; background: #fff; color: #1a1f36; font: 700 .78rem/1 "Segoe UI", Arial, sans-serif; letter-spacing: .01em; direction: ltr; white-space: nowrap; }
.pm-mada { color: #0f7a3d; text-transform: lowercase; font-size: .9rem; }
.pm-visa { color: #1a1f71; font-style: italic; font-weight: 800; font-size: .9rem; letter-spacing: .04em; }
.pm-applepay, .pm-googlepay { color: #000; }
.pm-stcpay { color: #4f008c; }
.pm-tabby { background: #3bffc1; color: #000; font-size: .88rem; }
.pm-tamara { color: #b54a1c; font-size: .88rem; }
.pm-bank { direction: rtl; font-family: inherit; font-weight: 600; }

@media (max-width: 900px) {
  .fm-about-in { grid-template-columns: 1fr; }
  .fm-feats { grid-template-columns: 1fr; }
  .fm-exams { grid-template-columns: repeat(2, 1fr); }
  .fm-steps { grid-template-columns: repeat(2, 1fr); }
  .fm-hero-in { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .slider .sl-stage { border-radius: 0; }
  .slider .sl-cap { padding-inline: 52px; gap: 4px; } /* clear of the arrow buttons */
  .slider .sl-cap h2 { font-size: clamp(1rem, 4.6vw, 1.4rem); }
  .slider .sl-cap p { display: none; } /* the same 16:7 frame as on desktop leaves room for the title and button only */
  .slider .sl-cap .btn { margin-top: 2px; padding: 6px 14px; font-size: .85rem; }
  .slider .sl-bar { bottom: 6px; }
  .fm-hero .hero-cta .btn { flex: 1 1 100%; }
  .fm-exams, .fm-steps { grid-template-columns: 1fr; }
  .fm-hero-stats > div { padding: 14px; }
  .foot-cols { grid-template-columns: 1fr; gap: 22px; }
    .foot nav h4 { grid-column: 1 / -1; margin: 0; }
  .foot nav a, .foot nav .link-btn { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
  .foot nav form { align-self: stretch; width: 100%; } /* the logout button as wide as the links above it (owner, 25 Oct, 5.1.1) */
}

/* ── Book page (2.13.3): breadcrumb, large cover beside the details and the buy block, description, related books ── */
.book-title { color: inherit; }
.book-title:hover { color: var(--primary); text-decoration: none; }
a.book-cover:hover { text-decoration: none; opacity: .95; }
.bk-page { padding-block: var(--section); }
.bk-crumbs { display: flex; flex-wrap: wrap; gap: 6px 8px; font-size: .85rem; color: var(--ink-3); margin-bottom: 18px; }
.bk-crumbs a { color: var(--ink-2); }
.bk-crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.bk-main { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: clamp(20px, 4vw, 48px); align-items: start; }
.bk-cover { border-radius: 4px; box-shadow: 0 18px 40px -24px rgba(42, 4, 16, .45); }
.bk-info h1 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin-bottom: 14px; }
.bk-facts { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: .92rem; }
.bk-facts th, .bk-facts td { text-align: start; padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.bk-facts th { width: 34%; color: var(--ink-3); font-weight: 500; }
.bk-buy { max-width: 420px; padding: var(--pad-lg); border: 1px solid var(--line); background: var(--surface-2); }
.bk-buy .book-buy { margin: 0; padding: 0; }
.bk-section { margin-top: var(--section); }
.bk-section h2 { font-size: 1.3rem; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.bk-section > p { color: var(--ink-2); max-width: 820px; line-height: 1.9; }
@media (max-width: 760px) {
  .bk-main { grid-template-columns: 1fr; }
  .bk-cover { max-width: 260px; margin-inline: auto; width: 100%; }
  .bk-buy { max-width: none; }
  .bk-section .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 10px; }
  .bk-section .book-card { padding: 10px; }
  .bk-section .book-card h3 { font-size: .9rem; }
}

/* ---------------- Updater page (v2.15): Admin → تحديث المنصة, installable as an app ---------------- */
.upd-body { display: block; background: var(--bg); }
.upd-wrap { width: min(760px, 100% - 32px); margin-inline: auto; }
.upd-top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.upd-top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.upd-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.upd-brand small { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-3); }
.upd-brand img { height: 40px; width: auto; flex: none; }
#upd { padding: 20px 0 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
#upd .card h3 { margin-top: 0; }
.upd-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.upd-status div { display: grid; gap: 2px; }
.upd-status b { font-size: 1.25rem; }
.upd-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 130px; padding: 18px; border: 2px dashed var(--line); border-radius: 12px; cursor: pointer; text-align: center; color: var(--ink-3); }
.upd-drop:hover, .upd-drop.over { border-color: var(--primary); color: var(--primary); }
.upd-progress { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 14px; }
.upd-progress div { height: 100%; width: 0; background: var(--primary); transition: width .2s; }
.upd-summary { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.upd-ver { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; }
.upd-notes { margin-top: 10px; }
.upd-notes summary { cursor: pointer; font-weight: 600; }
.upd-notes > div { margin-top: 8px; max-height: 320px; overflow: auto; font-size: .95rem; }
.upd-steps { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.upd-steps li { display: flex; align-items: center; gap: 10px; color: var(--ink-3); }
.upd-steps li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); }
.upd-steps li[data-st=run] { color: var(--ink); }
.upd-steps li[data-st=run]::before { border-color: var(--primary); border-top-color: transparent; animation: upd-spin .8s linear infinite; }
.upd-steps li[data-st=ok] { color: var(--ink); }
.upd-steps li[data-st=ok]::before { background: var(--good, #1a7f4b); border-color: var(--good, #1a7f4b); }
.upd-steps li[data-st=fail]::before { background: var(--low, #c0392b); border-color: var(--low, #c0392b); }
@keyframes upd-spin { to { transform: rotate(360deg); } }
.upd-key { margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.upd-key code { font-size: 1.05rem; letter-spacing: .04em; margin-inline-end: 8px; background: none; border: 0; }
.upd-tips { margin: 10px 0 0; padding-inline-start: 18px; }
.upd-confirm { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 4px; }
.upd-confirm label { display: grid; gap: 4px; font-size: .9rem; flex: 1 1 200px; }
@media (max-width: 520px) { .upd-status { grid-template-columns: 1fr 1fr; } .upd-status div:last-child { grid-column: 1 / -1; } .upd-brand span { font-size: .95rem; } }

/* payment method choice at checkout (v2.16) */
.pay-choices { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.pay-choices legend { font-weight: 600; margin-bottom: 6px; }
.pay-choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.pay-choice:has(input:checked) { border-color: var(--primary); background: rgba(var(--primary-rgb), .06); }
.pay-choice > span { display: grid; gap: 4px; } .pay-choice small { font-size: .8rem; }

/* decorative icon picker in Admin → الإعدادات (v2.16) */
.icon-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-pick label { cursor: pointer; }
.icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.icon-pick span { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink-2); }
.icon-pick input:checked + span { border-color: var(--primary); color: var(--primary); background: rgba(var(--primary-rgb), .08); }
.icon-pick input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Admin → كتب المتجر: move ticked books to a category (v2.16.1) */
.books-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; margin: 0 0 10px; }
.books-bulk select { width: auto; min-width: 180px; }

/* Terms pop-up (v2.16.1) */
.terms-modal { width: min(760px, calc(100% - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.terms-modal[open] { display: flex; flex-direction: column; }
.terms-modal::backdrop { background: rgba(0, 0, 0, .55); }
.terms-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px 0; }
.terms-head h2 { margin: 0; font-size: 1.25rem; }
.terms-lead { margin: 6px 20px 10px; }
.terms-body { flex: 1 1 auto; min-height: 120px; max-height: 60vh; overflow: auto; padding: 4px 20px 16px; border-block: 1px solid var(--line); font-size: .95rem; line-height: 1.8; }
.terms-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; }
/* gateway reply under a failed order in Admin → orders (2.16.5) */
.order-reason { max-width: 280px; margin-top: 4px; white-space: normal; word-break: break-word; text-align: start; }
/* payment logos (2.17.0): marks are the methods' own logos, the payer never sees a gateway's name */
.pay-mark.pm-img { padding: 3px 8px; min-width: 0; }
.pay-mark.pm-img img { display: block; height: 22px; width: auto; }
.pay-marks-in { margin: 0; gap: 6px; display: flex; flex-wrap: wrap; align-items: center; }
.pay-marks-in .pay-mark { height: 30px; border: 1px solid var(--line); }
/* subscribe (2.19.2): seasonal offer banner and the duration choice */
.offer-banner { display: flex; gap: 12px; align-items: center; margin: 12px auto 0; max-width: 760px; padding: 12px 16px; border-radius: 14px; background: rgba(var(--accent-rgb), .12); border: 1px solid rgba(var(--accent-rgb), .45); color: var(--ink); }
.offer-banner .ic { color: var(--accent); flex: none; }
.plan-len { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin: 16px auto 0; padding: 0; border: 0; }
.plan-len legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.plan-len-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; cursor: pointer; margin: 0; }
.plan-len-opt > span { display: flex; flex-direction: column; gap: 2px; }
.plan-len-opt:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .25); }
@media (max-width: 600px) { .plan-len { grid-template-columns: 1fr; } }
/* testimonials and skill links (2.19.2) */
/* carousel (2.35.1): one card in the middle, the neighbours peek in, swipe or the arrows and dots */
.tm-track { --tm-w: min(560px, 74vw); display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 6px calc(50% - var(--tm-w) / 2) 14px; outline: none; }
.tm-track::-webkit-scrollbar { display: none; }
.tm-card { flex: 0 0 var(--tm-w); scroll-snap-align: center; margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .06); transition: opacity .25s, transform .25s; }
.tm-card:not(.on) { opacity: .45; transform: scale(.96); }
.tm-q { font: 800 3.4rem/0.6 Georgia, serif; color: var(--primary); height: 26px; }
.tm-card blockquote { margin: 0; line-height: 1.9; font-size: 1.02rem; color: var(--ink-2); }
.tm-card figcaption { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.tm-card figcaption > span:last-child { display: flex; flex-direction: column; }
.tm-av { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(var(--primary-rgb), .12); color: var(--primary); font-weight: 800; }
.tm-ctl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 6px; }
.tm-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--primary); cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .06); }
.tm-btn:hover { border-color: var(--primary); }
.tm-dots { display: flex; gap: 8px; align-items: center; }
.tm-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 99px; background: var(--line); cursor: pointer; transition: width .2s, background .2s; }
.tm-dots button[aria-current="true"] { width: 24px; background: var(--primary); }
html[dir="ltr"] .tm-btn svg { transform: scaleX(-1); }
.tm-stars { color: var(--accent-text); letter-spacing: 2px; } .tm-stars span { color: var(--line); }
.tm-ask { margin: 0 0 var(--gap); } .tm-ask summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sk-links a { color: inherit; text-decoration: none; border-bottom: 1px dashed currentColor; } .sk-links a:hover { color: var(--primary); }
/* subscribe (2.20.0): price per day, the most chosen plan, what each plan includes */
.per-day { display: block; margin-top: 2px; color: var(--ink-3); font-size: .85rem; }
.plan-pop { margin-top: 8px; display: inline-block; }
.plan-compare { margin: 16px 0 0; } .plan-compare summary { cursor: pointer; } .plan-compare table { margin-top: 10px; } .plan-compare td:first-child { font-weight: 600; }
/* exam page try (2.20.0) */
.try-on [data-try-opt] { cursor: pointer; transition: border-color .15s, background .15s; }
.try-on [data-try-opt]:hover, .try-on [data-try-opt]:focus-visible { border-color: var(--primary); outline: none; }
.try-on .answered [data-try-opt] { cursor: default; }
[data-try-opt].try-right { border-color: var(--good); background: var(--good-bg); }
[data-try-opt].try-wrong { border-color: var(--alert); background: rgba(var(--alert-rgb), .08); }
.try-nav { margin-top: 12px; }
.try-result { text-align: center; }
/* welcome steps (2.20.0) */
.wl-steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 18px 0; justify-content: center; flex-wrap: wrap; }
.wl-steps li { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: .9rem; }
.wl-steps li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font-weight: 700; }
.wl-steps li.on { color: var(--ink); } .wl-steps li.on span { background: var(--primary); border-color: var(--primary); color: var(--primary-ink, #fff); }
/* tap targets on phones (2.20.0): breadcrumb links and the small links under the sign-in form */
@media (max-width: 600px) { .crumbs a, .row-between.small > a { display: inline-block; padding: 4px 0; } }
/* footer (2.19.2): the marks small and centred on one light strip (dark logos stay readable on the burgundy footer and at night) */
.foot-pay { display: flex; justify-content: center; margin-bottom: 12px; }
.foot-pay-box { display: inline-flex; justify-content: center; max-width: 100%; padding: 10px 22px; border: 1.5px solid #c9a14e; border-radius: 16px; }
.foot-pay-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 16px; margin: 0; }
.foot-pay-strip .pay-mark { height: auto; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.foot-pay-strip .pay-mark.pm-img img { height: 22px; }
.foot-in > .wrap:last-child { text-align: center; }
.foot-lic { margin-top: 4px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.foot-lic a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .foot-pay-box { padding: 8px 14px; } .foot-pay-strip { gap: 6px 12px; } .foot-pay-strip .pay-mark.pm-img img { height: 18px; } }
.pay-choice { align-items: center; }
.pay-choice > span { min-width: 0; }
/* icon choices (2.17.0): the «follow the site icon» choice and the group pickers */
.icon-pick .icon-pick-def { width: auto; padding: 0 12px; font-size: .78rem; }
.icon-groups > summary { cursor: pointer; font-weight: 600; margin-bottom: 10px; }
.icon-groups .field { margin-top: 12px; }

/* Public exam pages (2.18.0): /exams and /exams/{slug} */
.exam-link { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.exam-link:hover { text-decoration: none; border-color: var(--primary); }
.exam-link h2.h-card { font-size: 1.12rem; margin: 6px 0 2px; }
.exam-link p { flex: 1; margin: 0; }
.exam-count { font-size: .85rem; font-weight: 600; color: var(--accent-text); }
.exam-card .soon-tag { position: absolute; top: 14px; inset-inline-end: 14px; } /* «قريبًا»: an exam without content yet (2.22.0) */
.ep-part > .pill, .ep-head .pill { margin-bottom: 6px; }
.exam-more { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--primary); margin-top: 6px; }
.exam-pub { max-width: 1040px; padding-block: 20px 40px; }
.exam-pub .crumbs a { color: var(--ink-3); }
.ep-head { display: flex; gap: 18px; align-items: flex-start; margin: 14px 0 22px; }
.ep-ic { width: 60px; height: 60px; border-radius: 12px; background: rgba(var(--primary-rgb), .08); flex: none; }
.ep-head h1 { margin: 0 0 8px; }
.ep-head .lead { margin: 0 0 16px; max-width: 720px; }
.ep-cta { gap: 10px; }
.ep-stats { list-style: none; padding: 0; margin: 0 0 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--gap); }
.ep-stats li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.ep-stats b { font-size: 1.6rem; color: var(--primary); line-height: 1.2; }
.ep-stats span { font-size: .86rem; color: var(--ink-3); }
.ep-sec { margin-bottom: 34px; }
.ep-sec > h2 { font-size: 1.35rem; margin-bottom: 14px; }
.ep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); }
.ep-part h3 { font-size: 1.05rem; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ep-skills { margin: 8px 0 0; padding-inline-start: 18px; columns: 2 200px; column-gap: 24px; font-size: .9rem; color: var(--ink-2); }
.ep-skills li { break-inside: avoid; padding: 2px 0; }
.ep-q { margin-bottom: var(--gap); }
.ep-q-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ep-opts { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.ep-opts li { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; }
.ep-l { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--surface-2); border: 1px solid var(--line-2); }
.ep-sol summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.ep-sol[open] { background: var(--good-bg); border-radius: var(--radius-sm); padding: 10px 14px; }
.ep-sol[open] summary { margin-bottom: 8px; }
.ep-pas { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin: 0 0 12px; background: var(--surface-2); } /* passage of a sample question (2.18.3) */
.ep-pas summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.ep-pas[open] summary { margin-bottom: 8px; }
.pay-details { margin: 8px 0 14px; } .pay-details p { margin: 0 0 8px; } /* custom gateway instructions (2.18.3) */
.ep-end { text-align: center; padding: clamp(22px, 4vw, 36px); }
.ep-end h2 { margin-bottom: 6px; }
@media (max-width: 640px) { .ep-head { flex-direction: column; gap: 10px; } .ep-head h1 { font-size: 1.5rem; } }

/* Learning aids (2.19.0): daily training, expected score, exam countdown, assistant */
.learn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 16px 0 var(--gap); }
@media (max-width: 1023px) { .learn-grid { grid-template-columns: 1fr; } }
.learn-card .card-head { gap: 8px; flex-wrap: wrap; }
.learn-card .card-head h3 { display: flex; gap: 8px; align-items: center; margin: 0; }
.exp-score { display: flex; align-items: baseline; gap: 8px; }
.exp-score b { font-size: 2.6rem; line-height: 1.1; color: var(--primary); font-weight: 700; }
.exp-score span { color: var(--ink-3); font-size: .9rem; }
.goal-form { margin-top: 6px; } .goal-form summary { cursor: pointer; color: var(--primary); font-weight: 600; margin-bottom: 8px; }
.assist { margin-top: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(var(--accent-rgb), .45); background: rgba(var(--accent-rgb), .08); }
.assist h4 { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; }
.assist-search input[type=search] { min-width: 0; }
.assist .btn { white-space: normal; max-width: 100%; text-align: start; } /* 5.20.1: long lesson names wrapped on phones (QA round 2) */
/* SBC «متجر موثّق» seal (2.23.10): its script pins an iframe 18px from the bottom, so on phones lift it above the tab bar or the fixed button, and keep its colour scheme light so night mode does not paint a white box behind it. */
.sbc-seal-frame { color-scheme: light; }
@media (max-width: 860px) { body.has-tabbar .sbc-seal-frame { bottom: calc(80px + var(--safe-b)) !important; } }
@media (max-width: 767px) { body.has-mcta .sbc-seal-frame { bottom: calc(88px + var(--safe-b)) !important; } }

/* users' survey (2.26.0) */
.survey-form fieldset { border: 0; padding: 0; margin: 0 0 20px; }
.survey-form legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.survey-form .check { margin: 6px 0; }
.scale { display: flex; gap: 6px; flex-wrap: wrap; }
.scale label { cursor: pointer; }
.scale input { position: absolute; opacity: 0; pointer-events: none; }
.scale span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-weight: 700; }
.scale-11 span { min-width: 34px; height: 38px; }
.scale input:checked + span { background: var(--primary); color: #fff; border-color: var(--primary); }
.scale input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.scale-ends { display: flex; justify-content: space-between; max-width: 250px; margin-top: 4px; }
.scale-11 + .scale-ends { max-width: 440px; }
.survey-issues { display: none; }
.survey-form:has(input[name="download"][value="hard"]:checked) .survey-issues, .survey-form:has(input[name="download"][value="failed"]:checked) .survey-issues { display: block; }
.survey-invite { margin-bottom: 16px; }

/* bank transfer: the IBAN as a QR code (2.29.0) */
.bank-qr { text-align: center; margin: 14px 0 6px; }
.bank-qr svg { width: 180px; height: 180px; background: #fff; padding: 6px; border-radius: 12px; border: 1px solid var(--line); }
.bank-qr p { margin: 8px 0 0; }

/* An open transfer order waiting for its receipt, at the top of every page (2.35.0) */
.order-wait { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 4px; padding: 16px 18px; border-radius: 16px; background: var(--mid-bg); color: var(--mid); border: 2px solid currentColor; }
.ow-ic { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--surface); }
.ow-t { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ow-t strong { font-size: 1.08rem; color: var(--ink); }
.ow-t > span { font-size: .93rem; color: var(--ink-2, inherit); }
.ow-a { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ow-a form { margin: 0; }
@media (max-width: 560px) { .ow-a { width: 100%; } .ow-a > * { flex: 1 1 auto; } .ow-a .btn { width: 100%; justify-content: center; } }
/* the rights undertaking ticked before buying a book (2.36.0) */
.book-terms { margin: 10px 0; line-height: 1.6; text-align: start; }
.book-terms a { white-space: nowrap; }
/* 4.2.0: smaller payment logos in a row beside the choice, the bank transfer named, and the discount code's live answer */
.pay-choice > span { flex: 1; }
.pay-choice .pay-marks-in { gap: 4px; }
.pay-choice .pay-marks-in .pay-mark { height: 24px; padding: 0 6px; }
.pay-choice .pay-marks-in .pay-mark.pm-img { padding: 2px 5px; }
.pay-choice .pay-marks-in .pay-mark.pm-img img { height: 16px; }
.pay-choice-name { font-size: .92rem; }
.pay-choice:has(.pay-choice-name) > span { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* 5.26.1 (owner: «جعلها مثل الموجودة بأسفل الصفحة بدلاً من الشكل الكبير»): the logos in one small row like the footer strip, on the book page too (its marks sat right under the label and took the grid) */
.pay-choice > .pay-marks-in { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pay-choice .pay-marks-in .pay-mark { height: auto; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.pay-choice .pay-marks-in .pay-mark.pm-img { padding: 0; }
.pay-choice .pay-marks-in .pay-mark.pm-img img { height: 20px; }
@media (max-width: 600px) { .pay-choice .pay-marks-in .pay-mark.pm-img img { height: 18px; } }
.coupon-msg { margin-top: 6px; } .coupon-ok { color: var(--good); font-weight: 600; } .coupon-bad { color: var(--low); }

/* ---------------- Modern home in today's colours (5.0.0, owner: «موديرن يناسب جيل اليوم وجيل الامس»، no full dark block) ---------------- */
:root { --hero-a: rgba(184, 134, 43, .16); --hero-b: rgba(122, 18, 48, .10); --hero-top: #fbf6f1; --r-card: 18px; }
:root[data-theme="dark"] { --hero-a: rgba(196, 200, 206, .08); --hero-b: rgba(196, 200, 206, .04); --hero-top: #171717; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --hero-a: rgba(196, 200, 206, .08); --hero-b: rgba(196, 200, 206, .04); --hero-top: #171717; } }
.fm-hero, .slider + .fm-hero { background: radial-gradient(700px 360px at 90% -10%, var(--hero-a), transparent 60%), radial-gradient(640px 340px at 0% 0%, var(--hero-b), transparent 60%), linear-gradient(180deg, var(--hero-top) 0%, var(--bg) 100%); color: var(--ink); }
.fm-hero .fm-kicker { color: var(--primary); background: rgba(var(--primary-rgb), .08); padding: 6px 12px; border-radius: 999px; display: inline-block; font-weight: 700; }
.fm-hero h1, .slider + .fm-hero h1 { color: var(--ink); letter-spacing: -.01em; }
.fm-hero h1::after { content: ""; display: block; width: 72px; height: 5px; border-radius: 9px; background: linear-gradient(90deg, var(--accent), var(--primary)); margin-top: 14px; }
.fm-hero .lead, .fm-hero .hero-note { color: var(--ink-2); }
.fm-hero .btn-line { color: var(--primary); border-color: rgba(var(--primary-rgb), .35); background: var(--surface); }
.fm-hero .btn-primary { box-shadow: 0 12px 28px -14px rgba(var(--primary-rgb), .65); }
.fm-hero-stats > div, .slider + .fm-hero .fm-hero-stats > div { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 16px 40px -28px rgba(42, 4, 16, .45); }
.fm-hero-stats .ic, .slider + .fm-hero .fm-hero-stats .ic { color: var(--accent); }
.fm-hero-stats b, .slider + .fm-hero .fm-hero-stats b { color: var(--primary); }
.fm-hero-stats span, .slider + .fm-hero .fm-hero-stats span { color: var(--ink-3); }
.fm-hero-in { padding-bottom: clamp(70px, 9vw, 110px); }
.fm-feats { border-radius: 22px; box-shadow: 0 24px 60px -36px rgba(42, 4, 16, .35); }
.fm-feats .fm-ic { border-radius: 14px; background: rgba(var(--primary-rgb), .07); }
.fm-exams .card { border-radius: var(--r-card); box-shadow: 0 10px 30px -24px rgba(42, 4, 16, .35); }
.fm-exams .fm-ic { border-radius: 14px; background: rgba(var(--accent-rgb), .10); border-color: transparent; }
/* the exam search right under the slider */
.home-search { padding: 18px 0 6px; background: var(--hero-top); }
.home-search .exb-search { max-width: 640px; border-radius: 999px; padding-inline: 18px 6px; background: var(--surface); box-shadow: 0 14px 36px -26px rgba(42, 4, 16, .45); }
/* rounder buttons on the site (owner, 25 Oct, 5.0.0); the admin keeps its own (.adm .btn) */
.btn, .btn-sm, .btn-lg, .slider .sl-cap .btn { border-radius: 999px; }
.home-search-all { text-align: center; margin: 10px 0 0; font-size: .9rem; }
.home-search-all a { color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.home-search + .fm-hero .fm-hero-in { padding-top: clamp(28px, 5vw, 64px); }
/* the compact FAQ: four questions in two columns, all of them on /faq */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; align-items: start; }
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-grid details.faq { margin: 0; border-radius: 16px; padding: 2px 16px; }
.faq-grid details.faq summary { padding: 10px 0; font-size: .95rem; }
.faq-more-p { text-align: center; margin: 14px 0 0; }
.faq-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--primary); }


/* ---------------- News bar above the header (5.2.0): moves left to right for Arabic reading, pauses under the pointer ---------------- */
.newsbar { display: flex; align-items: center; min-height: 34px; background: var(--nb-bg, var(--primary)); color: var(--nb-ink, var(--primary-ink)); border-bottom: 1px solid var(--nb-line, transparent); font-size: .86rem; line-height: 1.5; }
:root[data-theme="dark"] { --nb-bg: #1b1b1b; --nb-ink: #e0e0e0; --nb-line: rgba(255, 255, 255, .08); } /* night: dark and calm, not a bright silver band */
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --nb-bg: #1b1b1b; --nb-ink: #e0e0e0; --nb-line: rgba(255, 255, 255, .08); } }
.newsbar[hidden] { display: none; }
.nb-vp { flex: 1; min-width: 0; overflow: hidden; direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.nb-track { display: flex; width: max-content; animation: nb-run var(--nbdur, 30s) linear infinite; }
.nb-set { display: flex; align-items: center; gap: 56px; min-width: 100vw; padding: 6px 28px; justify-content: space-around; }
.nb-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.nb-item a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.nb-kind { padding: 1px 9px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .76rem; font-weight: 700; }
.nb-issue { background: #ffe1dc; color: #8a1c12; }
.nb-sorry { background: #f6e7c4; color: #6b4a10; }
.newsbar:hover .nb-track, .newsbar:focus-within .nb-track { animation-play-state: paused; }
.nb-close { flex: none; width: 36px; min-height: 34px; border: 0; background: transparent; color: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; opacity: .8; }
.nb-close:hover { opacity: 1; }
@keyframes nb-run { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .nb-vp { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .nb-track { animation: none; } .nb-set[aria-hidden="true"] { display: none; } }

/* ---------------- Polls (5.3.0): the poll page and the invitation window ---------------- */
.poll-form { display: grid; gap: 18px; }
.poll-q { border: 0; border-radius: 0; margin: 0; padding: 0 0 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.poll-q:last-of-type { border-bottom: 0; }
.poll-q legend { font-weight: 700; margin-bottom: 10px; line-height: 1.6; padding: 0; }
.poll-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--primary-rgb), .1); color: var(--primary); font-size: .85rem; margin-inline-end: 4px; }
.poll-req { color: var(--low); }
.poll-opt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.poll-opt:has(input:checked) { border-color: var(--primary); background: rgba(var(--primary-rgb), .06); }
.poll-opt input { width: auto; margin: 0; }
.poll-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.poll-scale label { cursor: pointer; }
.poll-scale input { position: absolute; opacity: 0; pointer-events: none; }
.poll-scale span { display: grid; gap: 2px; text-align: center; padding: 10px 2px; border: 1px solid var(--line); border-radius: 12px; }
.poll-scale b { font-size: 1.15rem; }
.poll-scale small { font-size: .7rem; color: var(--ink-3); }
.poll-scale input:checked + span { border-color: var(--primary); background: rgba(var(--primary-rgb), .08); color: var(--primary); }
.poll-scale input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.poll-pop { position: fixed; z-index: 80; inset-inline-start: 16px; bottom: calc(16px + var(--safe-b)); width: min(360px, calc(100vw - 32px)); padding: 18px 18px 16px; border-radius: 18px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .45); }
.poll-pop[hidden] { display: none; }
.poll-pop h3 { margin: 4px 0 6px; font-size: 1.05rem; }
.poll-pop p { margin: 0 0 12px; font-size: .9rem; color: var(--ink-2); }
.poll-pop-a { display: flex; gap: 8px; flex-wrap: wrap; }
.poll-pop-x { position: absolute; top: 8px; inset-inline-end: 8px; width: 32px; height: 32px; border: 0; background: transparent; color: var(--ink-3); font-size: 1.3rem; cursor: pointer; }
.has-tabbar .poll-pop, .has-mcta .poll-pop { bottom: calc(84px + var(--safe-b)); }
.poll-bar { display: grid; grid-template-columns: minmax(90px, 2fr) 3fr auto; gap: 10px; align-items: center; margin-bottom: 8px; font-size: .9rem; }
.poll-bar-l { overflow-wrap: anywhere; }
.poll-bar-t { height: 12px; border-radius: 999px; background: var(--bg2); overflow: hidden; }
.poll-bar-t i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.poll-bar-v { white-space: nowrap; color: var(--ink-2); font-size: .85rem; }
.poll-days { display: flex; align-items: flex-end; gap: 3px; height: 84px; padding: 2px; border-bottom: 1px solid var(--line); direction: ltr; }
.poll-days span { flex: 1; max-width: 22px; background: var(--primary); border-radius: 3px 3px 0 0; }
.poll-text { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--bg2); font-size: .92rem; }
@media (max-width: 560px) { .poll-bar { grid-template-columns: 1fr auto; } .poll-bar-t { grid-column: 1 / -1; order: 3; } }
/* teachers (5.10.0): the home band and the /teachers page */
.teach-bundle { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 14px; align-items: end; margin-bottom: 28px; border-color: var(--accent); }
.teach-bundle h2 { margin: 0 0 4px; }
.teach-bundle p { margin: 0; }
.player > * { min-width: 0; } .q-table th { white-space: normal; } .q-stem .table-wrap, .passage .table-wrap { margin: 10px 0; } /* 5.28.0: pipe tables in questions and passages */
.teach-line { margin: 10px 0 0; } .teach-line a { font-weight: 600; } /* 5.28.0: the teacher bundle line on licence exam pages */
.teach-pick { display: grid; gap: 6px; font-weight: 700; font-size: .9rem; }
.teach-h { font-size: 1.25rem; margin: 26px 0 12px; }
@media (max-width: 760px) { .teach-bundle { grid-template-columns: 1fr; } }
/* 5.34.0: the locked part of a diagnostic report for a trainee without a subscription */
.rpt-lock { position: relative; border: 1px dashed #d9c7a8; border-radius: 12px; padding: 14px; margin: 10px 0; overflow: hidden; min-height: 120px; }
.rpt-lock-fog i { display: block; height: 10px; border-radius: 6px; background: #e9dfcf; margin: 10px 0; filter: blur(2px); }
.rpt-lock-fog i:nth-child(odd) { width: 86%; } .rpt-lock-fog i:nth-child(even) { width: 64%; }
.rpt-lock-cta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px; background: rgba(255, 255, 255, .72); }
@media print { .rpt-lock-cta { background: none; } }
/* 5.41.0: the track choice on a simulation card */
.sim-tracks { border: 0; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.sim-tracks legend { padding: 0; margin-bottom: 4px; font-weight: 700; }
.sim-tracks .check { margin: 0; }
/* 5.41.0: the training estimate of a simulation */
.sim-est { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; text-align: start; }
.sim-est-t { margin: 0 0 4px; font-weight: 700; }
.sim-est .small { margin: 0; }
/* 5.42.0: WhatsApp button of the support page, social icons in the footer */
.support-wa { margin: 0 0 16px; }
.btn-wa { background: #128c4b; color: #fff; }
.btn-wa:hover { filter: brightness(1.08); color: #fff; }
.foot-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.foot .foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); color: var(--fm-navy-ink); }
.foot .foot-social a:hover { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .06); }