/* Science & Chemistry Academy. Same look as the HTML prototype: a navy gradient hero card with a gold rim, A navy gradient hero card with a gold rim opens the page,
   cream background, white rounded cards framed in gold, pill tabs with icon tiles (a bottom app bar on phones), gold developer signature. */
:root {
  --bg: #f6efe1; --surface: #fffdf8; --surface-2: #fbf5e9; --line: #ebe1cc;
  --ink: #172033; --muted: #5b6680;
  --navy: #14213d; --navy-2: #1e3a8a;
  --brand-grad: linear-gradient(135deg, #14213d 0%, #1b2f5e 55%, #1e3a8a 100%);
  --gold: #c9a227; --gold-2: #e9c96b; --gold-d: #8a6414;
  --gold-grad: linear-gradient(135deg, #fff1a8, #d4a630 30%, #8a5a12 50%, #f2d06b 70%, #a8741a);
  --gold-line: rgba(201, 162, 39, .45);
  --ok: #166534; --ok-soft: #dcf3e3; --warn: #92400e; --warn-soft: #fbecd2; --bad: #be123c; --bad-soft: #fbe1e6;
  --accent: #1e3a8a; --accent-soft: #e4e9f6;
  --shadow: 0 1px 2px rgba(23,32,51,.05), 0 6px 20px rgba(23,32,51,.06);
  --f-head: "Cairo", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  --f-body: "IBM Plex Sans Arabic", Tahoma, system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r: 20px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0a1730; --surface: #11244a; --surface-2: #162d58; --line: #24406e; --ink: #eef2fa; --muted: #a3b1cc;
  --ok: #4ade80; --ok-soft: #12382a; --warn: #fbbf24; --warn-soft: #3a2d10; --bad: #fb7185; --bad-soft: #3d1a26;
  --accent: #e9c96b; --accent-soft: #1f3563; --gold-d: #e9c96b;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0a1730; --surface: #11244a; --surface-2: #162d58; --line: #24406e; --ink: #eef2fa; --muted: #a3b1cc;
  --ok: #4ade80; --ok-soft: #12382a; --warn: #fbbf24; --warn-soft: #3a2d10; --bad: #fb7185; --bad-soft: #3d1a26;
  --accent: #e9c96b; --accent-soft: #1f3563; --gold-d: #e9c96b;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25); color-scheme: dark }

* { box-sizing: border-box }
[hidden] { display: none !important }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.7 }
.wrap { max-width: 1000px; margin: 0 auto; padding-block: 0 32px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
h1, h2, h3 { font-family: var(--f-head); font-weight: 800; line-height: 1.35; margin: 0; text-wrap: balance }
h2 { font-size: 1.25rem } h3 { font-size: 1.05rem; font-weight: 700 }
p { margin: 0 }
button, input, select, textarea { font: inherit; color: inherit }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }

/* hero */
.hero { position: relative; overflow: hidden; margin-top: 0; border-radius: 24px; padding: 20px 22px; color: #fff;
  border: 1.5px solid transparent; background: var(--brand-grad) padding-box, var(--gold-grad) border-box;
  box-shadow: 0 14px 34px rgba(14,40,90,.28); display: flex; align-items: center; justify-content: space-between; gap: 14px }
.hero::after { content: ""; position: absolute; inset-inline-start: -40px; top: -50px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.08) }
.hero::before { content: ""; position: absolute; inset-inline-end: -60px; bottom: -90px; width: 230px; height: 230px; border-radius: 50%; background: rgba(255,255,255,.06) }
.hero-top { display: flex; align-items: center; gap: 14px; min-width: 0; position: relative; z-index: 1 }
.brand { display: grid; gap: 2px; min-width: 0 }
.eyebrow { width: fit-content; font-family: var(--f-head); font-weight: 700; font-size: .78rem; letter-spacing: .04em; padding: 0 12px; border-radius: 999px;
  border: 1.5px solid transparent; background: linear-gradient(#14213d, #1e3a8a) padding-box, var(--gold-grad) border-box; color: #f6dc8a }
.brand h1 { font-size: 1.6rem; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.2) }
.hero .who { color: rgba(255,255,255,.88); font-size: .88rem; font-weight: 600 }
.hero-side { position: relative; z-index: 1; display: flex; gap: 8px; align-items: center }
.logo-slot { width: 62px; height: 62px; border-radius: 50%; flex: none; display: grid; place-items: center; text-align: center; font-size: .62rem; line-height: 1.25;
  background: rgba(255,255,255,.12); color: #f6dc8a; box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 5px var(--gold), 0 6px 16px rgba(0,0,0,.25) }
.logo-slot.big { width: 96px; height: 96px; font-size: .78rem }
.glass, .langbtn { background: rgba(255,255,255,.16); border: 1px solid rgba(255,230,160,.45); color: #fff; border-radius: 999px; padding: 3px 14px; font-family: var(--f-head); font-weight: 700; font-size: .86rem; cursor: pointer }
.langbtn:hover { background: rgba(255,255,255,.26) }
@media (max-width: 560px) { .hero { padding: 14px; border-radius: 20px } .brand h1 { font-size: 1.15rem } .logo-slot { width: 46px; height: 46px; font-size: .5rem } .hero .who { font-size: .78rem } }

/* tabs: pills with icon tiles; bottom app bar on phones */
nav.tabs { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 6; padding-block: 14px; background: var(--bg); display: flex; justify-content: center; flex-wrap: wrap; gap: 6px }
nav.tabs button { position: relative; border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(var(--gold-line), var(--gold-line)) border-box;
  box-shadow: var(--shadow); padding: 5px 14px 5px 6px; border-radius: 14px; cursor: pointer; color: var(--muted); display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-family: var(--f-head) }
[dir="ltr"] nav.tabs button { padding: 5px 6px 5px 14px }
nav.tabs .tile { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; background: var(--surface-2); border: 1px solid var(--line) }
nav.tabs button[aria-selected="true"] { color: var(--gold-d); background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gold-grad) border-box }
nav.tabs button[aria-selected="true"] .tile { background: rgba(201,162,39,.18); border: 1.5px solid var(--gold) }
.count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; font-size: .7rem; line-height: 18px; text-align: center }
@media (max-width: 720px) {
  nav.tabs { position: fixed; inset: auto 0 0 0; top: auto; background: var(--surface); flex-wrap: nowrap; justify-content: space-around; gap: 0;
    padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    box-shadow: 0 -4px 20px rgba(23,32,51,.08); border-top: 1px solid var(--gold-line) }
  nav.tabs button, [dir="ltr"] nav.tabs button { flex: 1; flex-direction: column; gap: 2px; padding: 2px; font-size: .68rem; box-shadow: none; background: transparent; border: 0; line-height: 1.3 }
  nav.tabs button[aria-selected="true"] { background: transparent }
  nav.tabs .count { position: absolute; top: -2px; inset-inline-start: calc(50% + 8px) }
  main { padding-top: 14px; padding-bottom: 76px }
}

/* content */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px; margin-bottom: 16px }
.section-head h2::after { content: ""; display: inline-block; width: 34px; height: 3px; border-radius: 3px; background: var(--gold-grad); margin-inline-start: 8px; vertical-align: middle }
.section-head p { color: var(--muted); font-size: .9rem }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px }
.card, .table-box, .notice, .year { border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gold-grad) border-box; box-shadow: var(--shadow) }
.card { border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.lesson-thumb { aspect-ratio: 16/9; max-width: 100%; border-radius: 14px; background: var(--brand-grad); position: relative; display: grid; place-items: center; overflow: hidden }
.lesson-thumb::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23e9c96b' stroke-opacity='.18' stroke-width='1.4'/%3E%3C/svg%3E"); background-size: 42px 75px }
.lesson-thumb.locked { background: linear-gradient(135deg, #3b4560, #283149) }
.lesson-thumb .ico { position: relative; z-index: 1; font-size: 2.2rem; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); box-shadow: 0 0 0 2px rgba(233,201,107,.6) }
.lesson-thumb .chip { position: absolute; top: 10px; inset-inline-start: 10px; z-index: 1; background: rgba(233,201,107,.18); color: #f6dc8a; border: 1px solid rgba(233,201,107,.5); border-radius: 999px; padding: 0 10px; font-size: .75rem; font-weight: 700; font-family: var(--f-head) }
.meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: .82rem }
.year { cursor: pointer; text-align: start; border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--ink) }
.year:hover { box-shadow: 0 8px 26px rgba(138,100,20,.18) }
.year .name { font-family: var(--f-head); font-weight: 800; font-size: 1.2rem }
.year .stage { font-size: .85rem; color: var(--muted) }
.stage-title { display: flex; align-items: center; gap: 10px }
.stage-title .tile { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; background: rgba(201,162,39,.14); border: 1px solid var(--gold-line) }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 0 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; line-height: 24px; white-space: nowrap; width: fit-content }
.pill.ok { background: var(--ok-soft); color: var(--ok) }
.pill.warn { background: var(--warn-soft); color: var(--warn) }
.pill.bad { background: var(--bad-soft); color: var(--bad) }
.pill.neutral { background: var(--accent-soft); color: var(--accent) }

.btn { border: 0; border-radius: 12px; padding: 9px 18px; background: var(--brand-grad); color: #fff; font-weight: 700; cursor: pointer; white-space: nowrap; box-shadow: 0 4px 14px rgba(20,33,61,.28) }
.btn:hover { filter: brightness(1.08) }
.btn.ghost { background: var(--surface-2); color: var(--ink); border: 1px solid var(--gold-line); box-shadow: none }
.btn.danger { background: transparent; color: var(--bad); border: 1.5px solid var(--bad); box-shadow: none }
.btn.gold { background: var(--gold-grad); color: #3b2a05 }
.btn.sm { padding: 4px 12px; font-size: .85rem; border-radius: 10px }
.linkbtn { background: none; border: 0; padding: 0; color: var(--gold-d); font-weight: 700; cursor: pointer; text-decoration: underline }

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0 }
.field label { font-size: .86rem; font-weight: 600; color: var(--muted) }
.field input, .field select, .field textarea { border: 1.5px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: 9px 12px; width: 100%; min-width: 0; color: var(--ink) }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201,162,39,.2) }
.field textarea { min-height: 90px; resize: vertical }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end }
.row > .field { flex: 1 1 160px }
.code-input { font-family: var(--f-mono); letter-spacing: .12em; direction: ltr; text-align: center; text-transform: uppercase }
.code { font-family: var(--f-mono); direction: ltr; unicode-bidi: isolate; letter-spacing: .08em; background: rgba(201,162,39,.14); color: var(--gold-d); padding: 1px 8px; border-radius: 6px; white-space: nowrap }
.msg { font-size: .86rem; font-weight: 600 }
.msg.err { color: var(--bad) } .msg.good { color: var(--ok) }

.table-box { overflow-x: auto; border-radius: var(--r) }
table { width: 100%; border-collapse: collapse; font-size: .9rem }
th, td { text-align: start; padding: 10px 14px; border-bottom: 1px solid var(--gold-line); white-space: nowrap }
th { font-family: var(--f-head); font-weight: 700; color: var(--muted); font-size: .8rem; background: var(--surface-2) }
tr:last-child td { border-bottom: 0 }
.num { font-variant-numeric: tabular-nums }

.player { background: #0b1220; border-radius: var(--r); aspect-ratio: 16/9; max-width: 100%; display: grid; place-items: center; color: #e9c96b; position: relative; overflow: hidden;
  border: 1.5px solid transparent; background: linear-gradient(#0b1220, #0b1220) padding-box, var(--gold-grad) border-box }
.player .bar { position: absolute; inset: auto 0 0 0; height: 44px; background: rgba(0,0,0,.6); display: flex; align-items: center; gap: 12px; padding: 0 14px; font-size: .8rem; color: #e5e7eb }
.player .bar .track { flex: 1; height: 4px; background: #3a4458; border-radius: 2px; position: relative }
.player .bar .track span { position: absolute; inset: 0 auto 0 0; width: 34%; background: var(--gold-grad); border-radius: 2px }
.watermark { position: absolute; top: 14px; left: 14px; font-size: .75rem; opacity: .55; font-family: var(--f-mono); direction: ltr; color: #fff }

.q { border-top: 1px solid var(--gold-line); padding-top: 14px; display: flex; flex-direction: column; gap: 8px }
.q:first-of-type { border-top: 0; padding-top: 0 }
.opt { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--surface) }
.opt:has(input:checked) { border-color: var(--gold); background: rgba(201,162,39,.1) }
.ticker { display: flex; align-items: stretch; gap: 0; margin: 16px 0 14px; border-radius: 999px; overflow: hidden; background: var(--brand-grad); border: 1.5px solid var(--gold-line); box-shadow: 0 6px 18px rgba(20,33,61,.18); color: #fff; min-height: 42px }
.tk-label { flex: none; display: flex; align-items: center; padding: 0 16px; background: var(--gold-grad); color: #14213d; font-family: var(--f-head, inherit); font-weight: 800; white-space: nowrap }
.tk-view { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent) }
.tk-track { display: flex; width: max-content; animation: tk-ltr linear infinite }
[dir=rtl] .tk-track { animation-name: tk-rtl }
.tk-run { display: flex; align-items: center; gap: 18px; padding-inline-end: 18px; white-space: nowrap }
.tk-item { white-space: nowrap; padding-inline: 4px } .tk-item em { font-style: normal; color: #f6dc8a; margin-inline-end: 6px; font-size: .85em }
.tk-dot { color: #e9c96b; font-size: .8em }
.ticker:hover .tk-track, .ticker:focus-within .tk-track { animation-play-state: paused }
@keyframes tk-ltr { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes tk-rtl { from { transform: translateX(0) } to { transform: translateX(50%) } }
.clock { flex: none; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2px 16px; background: rgba(0,0,0,.22); font-size: .72rem; line-height: 1.25; white-space: nowrap; color: #f6dc8a }
.clock b { font-family: var(--f-mono); font-size: .9rem; color: #fff }
@media (max-width: 720px) { .clock span { display: none } .tk-label { padding: 0 10px; font-size: .85rem } }
@media (prefers-reduced-motion: reduce) { .tk-track { animation: none } .tk-run[aria-hidden] { display: none } .tk-view { overflow-x: auto } }
.timer { font-family: var(--f-mono); font-weight: 700; background: var(--navy, #14213d); color: #f6dc8a; border: 1px solid var(--gold-line); border-radius: 999px; padding: 4px 14px }
.timer.low { background: var(--bad); color: #fff; animation: pulse 1s infinite }
@keyframes pulse { 50% { opacity: .6 } }
@media (prefers-reduced-motion: reduce) { .timer.low { animation: none } }
.opt.right, .opt.right:has(input:checked) { border-color: var(--ok); background: var(--ok-soft) }
.opt.wrong, .opt.wrong:has(input:checked) { border-color: var(--bad); background: var(--bad-soft) }
.opt.right::after { content: '✅'; margin-inline-start: auto } .opt.wrong::after { content: '❌'; margin-inline-start: auto }

.thread { display: flex; flex-direction: column; gap: 8px }
.bubble { padding: 10px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line) }
.bubble.teacher { background: var(--accent-soft); border-color: transparent; border-inline-start: 3px solid var(--gold) }
.bubble small { display: block; color: var(--muted); font-size: .75rem; font-weight: 600 }

.empty { color: var(--muted); text-align: center; padding: 22px; border: 1.5px dashed var(--gold); border-radius: var(--r); background: rgba(201,162,39,.04); font-weight: 600 }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start }
@media (max-width: 760px) { .split { grid-template-columns: minmax(0, 1fr) } }
.stack { display: flex; flex-direction: column; gap: 16px }
.notice { border-radius: 14px; padding: 12px 16px; font-size: .9rem }
.auth { max-width: 540px; margin: 0 auto }
.login .head p.teacher { font-weight: 700; color: #f6dc8a }
.login .body { padding: 22px }

/* login gate: gold-framed card */
.login { max-width: 420px; margin: 24px auto 0; border-radius: 26px; overflow: hidden; border: 3px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gold-grad) border-box;
  box-shadow: 0 0 0 1px rgba(138,90,18,.25), 0 0 0 6px rgba(212,166,48,.18), var(--shadow) }
.login .head { position: relative; background: var(--brand-grad); color: #fff; padding: 30px 22px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px }
.login .head h2 { font-size: 1.45rem; color: #fff }
.login .head p { color: rgba(255,255,255,.85); font-size: .9rem }
.login .head .langbtn { position: absolute; top: 12px; inset-inline-end: 12px }
.login form { padding: 22px }

/* developer signature (same as the spiritual follow-up program) */
footer.dev { display: grid; gap: 10px; justify-items: center; margin-top: 36px; color: var(--muted); font-size: .84rem }
.dev-rule { display: flex; align-items: center; gap: 10px; width: min(260px, 80%); color: var(--gold-d); font-size: .8rem }
.dev-rule i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)) }
.dev-rule i:last-child { background: linear-gradient(90deg, var(--gold), transparent) }
.dev-card { display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 12px; border-radius: 999px; max-width: 100%;
  border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gold-grad) border-box; box-shadow: 0 6px 18px rgba(120,80,10,.12) }
.dev-logo { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: none; padding: 3px; background: var(--gold-grad); box-shadow: 0 2px 8px rgba(0,0,0,.18) }
.dev-text { display: grid; gap: 1px; text-align: start; min-width: 0 }
.dev-label { font-size: .72rem; color: var(--muted); font-weight: 600; letter-spacing: .02em }
.dev-text strong { font-family: var(--f-head); font-weight: 800; font-size: 1.02rem; line-height: 1.35; white-space: nowrap; letter-spacing: .02em; color: #b8860b;
  background: linear-gradient(180deg, #fff3b0 0%, #f5d061 28%, #c9972b 55%, #8a5a12 78%, #e9c46a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)) drop-shadow(0 2px 1px rgba(90,55,5,.45)) }
.btn.wa { background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 14px rgba(22,163,74,.28) }
.invite-url { font-family: var(--f-mono); font-size: .86rem; background: var(--surface-2); border: 1px dashed var(--gold-line); border-radius: 12px; padding: 10px 12px; word-break: break-all; user-select: all; text-align: left }
.dev-phone { display: inline-flex; align-items: center; gap: 6px; width: max-content; margin-top: 3px; padding: 1px 12px; border-radius: 999px; font-weight: 700; font-size: .85rem;
  color: var(--gold-d); border: 1px solid var(--gold-line); background: rgba(201,162,39,.1); font-variant-numeric: tabular-nums; user-select: all }
@media (max-width: 360px) { .dev-text strong { font-size: .9rem } .dev-logo { width: 48px; height: 48px } }
@media (prefers-reduced-motion: no-preference) { .card, .btn, .year { transition: box-shadow .15s, filter .15s } }

/* real build only */
.logo-slot img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover }
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.wm-tile { position: absolute; inset: 0; z-index: 2; pointer-events: none; background-repeat: repeat; background-size: 260px 150px }
.wm-badge { position: absolute; z-index: 3; pointer-events: none; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px;
  background: rgba(20,33,61,.55); border: 1px solid rgba(233,201,107,.6); box-shadow: 0 2px 12px rgba(0,0,0,.25); backdrop-filter: blur(2px);
  color: #e9c96b; opacity: 0; animation: wmb 35s linear infinite; white-space: nowrap; font-size: clamp(.72rem, 2vw, .9rem) }
.wm-badge span { display: flex; flex-direction: column; line-height: 1.25 }
.wm-badge b { color: #fff; font-family: var(--f-head); font-weight: 700 }
.wm-badge small { font-family: var(--f-mono); letter-spacing: .06em; color: #e9c96b }
/* fades in, rests, fades out, then reappears somewhere else */
@keyframes wmb {
  0% { top: 7%; left: 5%; opacity: 0 } 2%, 16% { top: 7%; left: 5%; opacity: .85 } 19.99% { top: 7%; left: 5%; opacity: 0 }
  20% { top: 70%; left: 58%; opacity: 0 } 22%, 36% { top: 70%; left: 58%; opacity: .85 } 39.99% { top: 70%; left: 58%; opacity: 0 }
  40% { top: 38%; left: 30%; opacity: 0 } 42%, 56% { top: 38%; left: 30%; opacity: .85 } 59.99% { top: 38%; left: 30%; opacity: 0 }
  60% { top: 12%; left: 60%; opacity: 0 } 62%, 76% { top: 12%; left: 60%; opacity: .85 } 79.99% { top: 12%; left: 60%; opacity: 0 }
  80% { top: 66%; left: 6%; opacity: 0 } 82%, 96% { top: 66%; left: 6%; opacity: .85 } 100% { top: 66%; left: 6%; opacity: 0 } }
/* black cover shown when the student leaves the page while a video is open */
.guard-cover { position: absolute; inset: 0; z-index: 5; display: none; place-items: center; text-align: center; padding: 20px; background: #000; color: #e9c96b; font-weight: 700 }
.player.guarded .guard-cover { display: grid }
@media (prefers-reduced-motion: reduce) { .wm-badge { animation: none; opacity: .85; top: 7%; left: 5% } }
.qblock { border: 1.5px dashed var(--gold-line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0 }
.qblock legend { font-weight: 700; padding: 0 6px; font-family: var(--f-head) }
.toast { position: fixed; z-index: 20; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); background: var(--navy); color: #fff; border: 1px solid var(--gold); padding: 10px 18px; border-radius: 12px; font-size: .9rem; box-shadow: 0 6px 24px rgba(0,0,0,.25) }
.toast.bad { background: var(--bad); border-color: var(--bad) }
.btn:disabled { opacity: .6; cursor: progress }
.hero-side .langbtn.out { background: transparent }
@media (max-width: 720px) {
  /* the admin has eight tabs: let the bottom bar scroll sideways instead of squeezing them */
  nav.tabs { overflow-x: auto; justify-content: flex-start; scrollbar-width: none }
  nav.tabs button, [dir="ltr"] nav.tabs button { flex: 1 0 64px }
}
@media (max-width: 560px) {
  .hero { flex-wrap: wrap }
  .hero-side { margin-inline-start: auto }
}

/* Free-lesson checkbox and lesson files */
.check { display: flex; gap: 8px; align-items: center; font-weight: 600 }
.check input { width: 18px; height: 18px; accent-color: var(--gold, #c9a227) }
.files-box { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 10px }
.files-box summary { cursor: pointer; font-weight: 700; margin-bottom: 8px }
.files { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 8px }
.files li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2) }

/* Lesson player: YouTube sits under a cover so its logo, title and menus can't be clicked */
.player.yt #ytFrame, .player.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none }
.yt-shield { position: absolute; inset: 0 0 48px 0; z-index: 1; background: transparent; border: 0; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent }
.yt-big { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; color: #14213d; background: var(--gold-grad); box-shadow: 0 6px 20px rgba(0,0,0,.4); transition: opacity .2s }
.player.yt.playing .yt-big { opacity: 0 }
/* while paused, hide YouTube's title strip and suggestions behind a dim layer */
.player.yt:not(.playing) .yt-shield { background: rgba(8,14,30,.55) }
.yt-bar { position: absolute; inset: auto 0 0 0; z-index: 3; height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: linear-gradient(transparent, rgba(0,0,0,.85)); direction: ltr }
.yt-bar button { background: none; border: 0; color: #f4e3a6; font: 700 .9rem var(--f-body); cursor: pointer; min-width: 36px; height: 36px; border-radius: 8px }
.yt-bar button:hover, .yt-bar button:focus-visible { background: rgba(255,255,255,.12) }
.yt-seek { flex: 1; accent-color: var(--gold); min-width: 0 }
.yt-time { color: #e5e7eb; font: .78rem var(--f-mono); white-space: nowrap }
.player.yt.full { position: fixed; inset: 0; z-index: 50; border-radius: 0; max-width: none; aspect-ratio: auto }
@media (max-width: 560px) { .yt-time { display: none } .yt-big { width: 54px; height: 54px } }
/* Drive's pop-out button (top corner) opens the file in Drive, so it's covered */
.drive-cover { position: absolute; top: 0; right: 0; width: 72px; height: 60px; z-index: 2 }

/* Password show/hide eye */
.pass-wrap { position: relative }
.pass-wrap input { width: 100%; padding-inline-end: 48px }
.eye { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: none; font-size: 1.15rem; cursor: pointer; border-radius: 10px; line-height: 1 }
.eye:hover, .eye:focus-visible { background: rgba(201,162,39,.15) }

/* Quiz types, question bank and essay marking */
textarea.essay { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line, #d8dce6); border-radius: 10px; resize: vertical; background: var(--surface); color: var(--ink); }
.essay-mark:empty { display: none; }
.bank-pick { border: 1px dashed var(--line, #d8dce6); border-radius: 12px; padding: 10px 12px; }
.bank-pick summary { cursor: pointer; font-weight: 600; }
.bank-item { align-items: flex-start; }
.essay-answer { white-space: pre-wrap; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }

/* ===== Science & chemistry character: hexagon (benzene) lattice, a gold atom, chemical formulas, line icons ===== */
:root { --pattern-o: .09 }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pattern-o: .07 } }
:root[data-theme="dark"] { --pattern-o: .07 }
/* faint lab-paper background: benzene rings and a ball-and-stick molecule, in gold */
body { position: relative; isolation: isolate }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--pattern-o);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='%23b8860b' stroke-width='1.6'%3E%3Cpath d='M50 20l26 15v30L50 80 24 65V35z'/%3E%3Ccircle cx='50' cy='50' r='15'/%3E%3Cpath d='M76 35l26-15M50 80v26'/%3E%3Cpath d='M190 150l20 11.5v23L190 196l-20-11.5v-23z'/%3E%3Cpath d='M175 166l15-8.7M175 180l15 8.7M205 166v14'/%3E%3Cpath d='M210 161.5l22-12.7M190 196v24'/%3E%3Ccircle cx='150' cy='60' r='7' fill='%23b8860b' fill-opacity='.35'/%3E%3Ccircle cx='182' cy='42' r='5'/%3E%3Ccircle cx='182' cy='80' r='5'/%3E%3Cpath d='M156 56l21-11M156 64l21 12'/%3E%3Cpath d='M60 170h28M74 156v28' stroke-width='1'/%3E%3Ccircle cx='74' cy='170' r='22' stroke-dasharray='3 5'/%3E%3C/svg%3E");
  background-size: 260px 260px }
/* header: an atom slowly turning behind the buttons, and formulas along the bottom */
.hero::before, .hero::after { display: none }
.hero, .login .head { isolation: isolate }
.hero .atom, .login .head .atom { position: absolute; z-index: 0; pointer-events: none; width: 230px; height: 230px; inset-inline-end: 90px; top: 50%; margin-top: -115px; opacity: .55 }
.login .head .atom { inset-inline-end: auto; inset-inline-start: -50px; top: -30px; margin: 0; width: 200px; height: 200px; opacity: .4 }
.atom ellipse { fill: none; stroke: #d4a630; stroke-width: 1.4 }
.atom .e { fill: #f6dc8a; filter: drop-shadow(0 0 3px #f6dc8a) } .atom .nuc { fill: #e9c96b; filter: drop-shadow(0 0 6px rgba(246,220,138,.8)) }
.atom .orbits { transform-origin: 100px 100px }
@media (prefers-reduced-motion: no-preference) { .atom .orbits { animation: orbit 60s linear infinite } }
@keyframes orbit { to { transform: rotate(360deg) } }
.formulas { position: absolute; z-index: 0; inset-inline: 22px; bottom: 6px; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; color: rgba(246,220,138,.5); white-space: nowrap; overflow: hidden; text-overflow: clip; pointer-events: none; text-align: center }
.hero { padding-bottom: 26px }
.login .head { overflow: hidden; padding-bottom: 34px }
.login .head > :not(.atom):not(.formulas):not(.langbtn) { position: relative; z-index: 1 }
.login .head .langbtn { z-index: 2 }
/* subtle hexagon lattice inside the header */
.hero > .hero-top::before { content: ""; position: absolute; z-index: -1; inset: -40px auto -40px -60px; width: 340px; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23e9c96b' stroke-opacity='.16' stroke-width='1.2'/%3E%3C/svg%3E"); background-size: 34px 61px;
  mask-image: radial-gradient(closest-side, #000, transparent) }
[dir="rtl"] .hero > .hero-top::before { inset: -40px -60px -40px auto }
@media (max-width: 560px) { .hero .atom { width: 150px; height: 150px; margin-top: -75px; inset-inline-end: -20px; opacity: .4 } .formulas { font-size: .58rem; letter-spacing: .08em } }

/* tabs: hexagon tiles with gold line icons */
nav.tabs .tile { width: 34px; height: 34px; border: 0; background: none; border-radius: 0 }
nav.tabs .tile svg { width: 34px; height: 34px; display: block }
nav.tabs .tile .hex { fill: var(--surface-2); stroke: var(--gold-line); stroke-width: 1.4 }
nav.tabs .tile .ico { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
nav.tabs button[aria-selected="true"] .tile { background: none; border: 0 }
nav.tabs button[aria-selected="true"] .tile .hex { fill: rgba(201,162,39,.16); stroke: var(--gold); stroke-width: 1.8 }
nav.tabs button[aria-selected="true"] .tile .ico { stroke: var(--gold-d) }
nav.tabs button:hover .tile .ico { stroke: var(--gold-d) }
@media (max-width: 720px) { nav.tabs .tile, nav.tabs .tile svg { width: 30px; height: 30px } }

/* section titles start with a small benzene ring */
.section-head h2::before, .card > h2:first-child::before, form.card > h2::before { content: ""; display: inline-block; width: 22px; height: 22px; margin-inline-end: 8px; vertical-align: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23c9a227' stroke-width='2'%3E%3Cpath d='M16 3 27.3 9.5v13L16 29 4.7 22.5v-13z'/%3E%3Ccircle cx='16' cy='16' r='6.5' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat }
.dev-rule svg { flex: none; color: var(--gold) }

/* ===== Virtual lab ===== */
.lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start }

.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; padding: 10px; border-radius: 16px;
  background: linear-gradient(transparent calc(100% - 10px), rgba(138,100,20,.35) calc(100% - 10px)), var(--surface-2); border: 1px solid var(--line) }
.chem { border: 1.5px solid transparent; background: var(--surface); border-radius: 14px; padding: 8px 4px 6px; display: grid; justify-items: center; gap: 1px; user-select: none; cursor: pointer; color: var(--ink);
  box-shadow: 0 2px 8px rgba(23,32,51,.08); transition: transform .15s, border-color .15s }
.chem:hover, .chem:focus-visible { border-color: var(--gold); transform: translateY(-2px) }
.chem .ico svg { width: 36px; height: 44px; display: block }
.chem .f { font-family: var(--f-head); font-size: .86rem; font-weight: 700 } .chem .f.mono { font-family: var(--f-mono); font-weight: 600 }
.chem .n { font-size: .7rem; color: var(--muted); line-height: 1.25; text-align: center }
.chem.in { opacity: .3; pointer-events: none; transform: scale(.92) }
.exp-list { border-top: 1px dashed var(--gold-line); padding-top: 8px }
.exp-list summary { cursor: pointer; font-weight: 700; font-family: var(--f-head); font-size: .92rem }
.exp-list ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px }
.exp-list li { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--muted) }
.exp-list li.got { color: var(--ink); font-weight: 600 }
.exp-list .mk { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 6px; border: 1px dashed var(--line); font-size: .75rem }
.exp-list li.got .mk { border: 1px solid var(--ok); background: var(--ok-soft); color: var(--ok) }
.exp-list li.just { animation: elpop 1s ease }
.kind { font-size: .7rem; font-weight: 700; padding: 0 8px; border-radius: 999px; line-height: 20px; white-space: nowrap }
.k-chem { background: rgba(201,162,39,.16); color: var(--gold-d) } .k-phys { background: var(--accent-soft); color: var(--accent) } .k-ind { background: rgba(236,72,153,.14); color: #be185d }
.bench { display: grid; justify-items: center; gap: 10px; padding: 16px 12px 12px; border-radius: 18px; width: 100%;
  background: radial-gradient(ellipse at 50% 40%, rgba(201,162,39,.12), transparent 65%) }
.flask-box { position: relative; width: 240px; max-width: 100%; aspect-ratio: 240/322; isolation: isolate }
.flask-box.drop { filter: drop-shadow(0 0 14px rgba(201,162,39,.8)) }
.flask-box svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.flask-box .glass { fill: none; stroke: #8a9ab9; stroke-width: 3.5; stroke-linejoin: round }
.flask-box .rim { stroke: #8a9ab9; stroke-width: 6; stroke-linecap: round }
.flask-box .shine { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 4; stroke-linecap: round }
.flask-box .grad path { stroke: #8a9ab9; stroke-width: 1.5; stroke-opacity: .7 }
.flask-box .shadow { fill: rgba(23,32,51,.18) }
.flask-box .burner { opacity: 0; transition: opacity .4s }
.flask-box.heating .burner { opacity: 1 } .flask-box.heating .shadow { opacity: 0 }
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flick .18s ease-in-out infinite alternate }
.flame.f2 { animation-duration: .13s }
@keyframes flick { to { transform: scaleY(1.12) scaleX(.94) } }
.liq, .layer { transition: transform 1.2s cubic-bezier(.3,.7,.3,1) }
.liq .wave, .layer .wave, .liq .meniscus { animation: wave 3s linear infinite }
@keyframes wave { to { transform: translateX(60px) } }
#liqTop, #liqBot { transition: stop-color 1.8s ease }
.flask-box .ppt { transition: y 1.6s ease, height 1.6s ease; opacity: .92 }
.flask-box .solid { transition: opacity 2.2s ease }
.flask-box .solid [fill], .flask-box .solid [stroke] { transition: fill 2s ease, stroke 2s ease }
.bub { fill: rgba(255,255,255,.35); stroke: rgba(255,255,255,.95); stroke-width: 1.2; transform-box: fill-box; animation: bub 1.6s ease-in forwards }
@keyframes bub { to { transform: translateY(-120px) scale(.7); opacity: 0 } }
.flake { transform-box: fill-box; animation: flake 2s ease-in forwards }
@keyframes flake { to { transform: translateY(80px); opacity: .2 } }
.glow { position: absolute; inset: 10% 0 0; z-index: -1; border-radius: 50%; background: radial-gradient(circle at 50% 70%, var(--g, #fff), transparent 60%); opacity: 0; pointer-events: none }
.glow.on { animation: glow 2.4s ease }
@keyframes glow { 15% { opacity: .95 } 60% { opacity: .7 } 100% { opacity: 0 } }
.fumes { position: absolute; inset: 0; pointer-events: none }
.fumes i { position: absolute; top: 6%; width: 34px; height: 34px; border-radius: 50%; filter: blur(6px); animation: fume 3s ease-out forwards }
@keyframes fume { from { transform: translate(-50%, 0) scale(.4); opacity: .9 } to { transform: translate(-50%, -90px) scale(2.4); opacity: 0 } }
.sparks { position: absolute; left: 50%; top: 52%; pointer-events: none }
.sparks i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fde047; box-shadow: 0 0 6px #f59e0b; animation: spark .9s ease-out forwards; opacity: 0 }
@keyframes spark { 0% { opacity: 1; transform: translate(0, 0) } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) } }
.tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; align-items: center; min-height: 26px }
.tag { font-family: var(--f-mono); padding: 0 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--gold-line); font-size: .85rem }
.flask-box.shake { animation: shake .5s ease 2 }
@keyframes shake { 20% { transform: rotate(-5deg) } 40% { transform: rotate(4deg) } 60% { transform: rotate(-3deg) } 80% { transform: rotate(2deg) } }
.poof { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-family: var(--f-head); font-weight: 800; font-size: 2rem; color: #fff; opacity: 0 }
.poof b { background: #94a3b8; border-radius: 50% 46% 52% 48%; padding: 18px 26px; box-shadow: 30px 10px 0 -6px #94a3b8, -28px 14px 0 -8px #94a3b8, 6px -20px 0 -10px #cbd5e1; transform: rotate(-6deg) }
.poof.go { animation: poof 1.4s ease forwards }
@keyframes poof { 0% { opacity: 0; transform: scale(.4) } 25% { opacity: 1; transform: scale(1.1) } 70% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(1.3) } }
.result { border-radius: 16px; padding: 12px 14px; display: grid; gap: 6px; border: 1.5px solid var(--line); background: var(--surface-2); width: 100%; min-height: 94px }
.result.ok { border-color: var(--ok); background: var(--ok-soft) }
.result.bad { border-color: var(--bad); background: var(--bad-soft) }
.eq { font-family: var(--f-mono); text-align: center; font-size: 1rem; overflow-x: auto; white-space: nowrap; padding-block: 2px }
.eq .p { color: var(--gold-d) } .eq .d { color: #f97316 }
.result .t { font-family: var(--f-head); font-weight: 800 }
.result p { font-size: .9rem }
@media (prefers-reduced-motion: reduce) { .bub, .flake, .fumes i, .sparks i, .flask-box.shake, .poof.go, .glow.on, .flame, .liq .wave, .layer .wave, .liq .meniscus { animation-duration: .01s; animation-iteration-count: 1 } }

/* ===== My periodic table ===== */
.meter { display: flex; align-items: center; gap: 10px; min-width: 0 }
.meter .bar { flex: 1; height: 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden }
.meter .bar i { display: block; height: 100%; background: var(--gold-grad); border-radius: 99px }
.meter b { font-family: var(--f-head); white-space: nowrap }
.pt-scroll { overflow-x: auto; padding-bottom: 4px }
.pt { display: grid; grid-template-columns: repeat(18, minmax(34px, 1fr)); gap: 4px; min-width: 640px }
.el { aspect-ratio: 1; border-radius: 8px; border: 1px dashed var(--line); background: var(--surface-2); display: grid; place-items: center; padding: 2px; color: var(--muted); font-family: var(--f-mono); position: relative; cursor: pointer }
.el .z { font-size: .55rem; position: absolute; top: 2px; left: 4px; opacity: .7 }
.el .s { font-size: .95rem }
.el.locked .s { opacity: .25 }
.el.on { border: 1.5px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gold-grad) border-box; color: var(--ink) }
.el.on .s { color: var(--gold-d); font-weight: 700 }
.el.on.metal { background: linear-gradient(#fff4d1, #f6e3a6) padding-box, var(--gold-grad) border-box; color: #3b2a05 }
.el.on.metal .s { color: #6b4a0e }
.el.new { animation: elpop 1.2s ease 2 }
@keyframes elpop { 0% { transform: scale(.3); box-shadow: 0 0 0 0 rgba(233,201,107,.9) } 50% { transform: scale(1.25); box-shadow: 0 0 0 10px rgba(233,201,107,0) } 100% { transform: scale(1) } }
@media (prefers-reduced-motion: reduce) { .el.new { animation: none } }
.el.sel { outline: 2px solid var(--gold); outline-offset: 2px }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--muted) }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-inline-end: 4px; border: 1px solid var(--gold) }
.legend .lg-on { background: var(--surface) } .legend .lg-metal { background: #f6e3a6 } .legend .lg-off { background: var(--surface-2); border: 1px dashed var(--line) }
.elcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center }
.big { width: 84px; height: 84px; border-radius: 14px; display: grid; place-items: center; align-content: center; font-family: var(--f-mono); border: 2px solid transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--gold-grad) border-box }
.big .s { font-size: 1.8rem; color: var(--gold-d); line-height: 1.1 } .big .z { font-size: .75rem; color: var(--muted) }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px }
.badge { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); font-size: .78rem }
.badge svg { width: 46px; height: 46px }
.badge .bh { fill: var(--surface); stroke: var(--line); stroke-width: 2 }
.badge.got .bh { fill: rgba(201,162,39,.16); stroke: var(--gold); stroke-width: 2.4 }
.badge text { font-family: var(--f-mono); font-size: 13px; fill: var(--muted); text-anchor: middle }
.badge.got text { fill: var(--gold-d); font-weight: 700 }
.badge b { font-family: var(--f-head); font-size: .82rem }
.badge:not(.got) { opacity: .6 }
.rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.rank li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line) }
.rank li.me { border: 1.5px solid var(--gold); background: rgba(201,162,39,.12) }
.rank .pos { font-family: var(--f-head); font-weight: 800; text-align: center; color: var(--gold-d) }
.rank .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600 }
.rank .cnt { font-size: .85rem; font-variant-numeric: tabular-nums }

/* ===== Voice messages ===== */
.rec-box { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.rec-box audio, .voice-audio { height: 38px; max-width: 100%; display: block }
.rec-btn { display: inline-flex; align-items: center; gap: 6px }
.rec-btn.recording { background: var(--bad); color: #fff; border-color: var(--bad); animation: pulse 1.2s infinite }
@media (prefers-reduced-motion: reduce) { .rec-btn.recording { animation: none } }
.voice-play { display: inline-flex; gap: 6px; align-items: center; margin-bottom: 4px }
.bubble .voice-audio { margin-bottom: 4px }

@media (max-width: 760px) {
  .lab { grid-template-columns: minmax(0, 1fr) }
  /* on phones the flask comes first and stays small, so the shelf is right under it */
  .lab > .card:last-child { order: -1 } .flask-box { width: 170px } .lab .result { min-height: 0 }
  .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 8px } .chem .n { font-size: .6rem } .chem .ico svg { width: 30px; height: 36px }
}

/* Admin student preview strip */
.pv-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 12px auto 0; padding: 10px 14px; max-width: 900px;
  border: 1.5px dashed var(--gold, #c9a227); border-radius: 14px; background: color-mix(in srgb, var(--gold, #c9a227) 12%, transparent); font-weight: 600 }
.pv-bar select { width: auto; min-width: 150px }

/* Egyptian exam question styles */
.q-lead { color: var(--gold-d); font-family: var(--f-head); font-weight: 700 }
.q u { text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px }
.gapped { line-height: 2.6; margin: 0 }
.gapped .blank { display: inline-block; width: 9em; max-width: 60%; margin: 0 4px; padding: 2px 8px; border: 0; border-bottom: 2px dashed var(--gold); border-radius: 6px 6px 0 0; background: var(--surface-2); font: inherit; text-align: center }
.gapped .blank:focus { outline: 2px solid var(--gold-line); border-bottom-style: solid }
.q input.short { width: 100%; max-width: 420px }
.essay-mark.good { color: var(--ok) } .essay-mark.err { color: var(--bad) }

/* Sign-in screens on every device: the announcements bar, the card and the developer card sit together in the middle of the screen, with even gaps */
.signin .wrap { box-sizing: border-box; min-height: calc(100vh - 16px); min-height: calc(100svh - 16px); display: flex; flex-direction: column; padding-bottom: 8px }
.signin .ticker { margin: auto auto 0; width: 100%; max-width: 420px }
.signin .tk-label, .signin .tk-clock { flex: none }
.signin .login { margin-top: 16px }
.signin footer.dev { margin-top: 16px; margin-bottom: auto }
.signin main { padding-block: 0 }
.signin .dev-rule { display: none }

/* Sign-in screens on phones: the whole card and the developer card fit one screen without scrolling (like the spiritual follow-up app) */
@media (max-width: 560px), (max-height: 820px) {
  .signin .wrap { padding-bottom: 8px }
  .signin .ticker { min-height: 34px; font-size: .85rem }
  .signin .login { width: 100%; border-radius: 22px }
  .signin .login .head { padding: 14px 16px 22px; gap: 4px }
  .signin .login .head .logo-slot.big { width: 74px; height: 74px }
  .signin .login .head h2 { font-size: 1.15rem; line-height: 1.3 }
  .signin .login .head p.teacher { font-size: .85rem }
  .signin .login .head .langbtn { top: 8px; inset-inline-end: 8px; font-size: .78rem; padding: 3px 10px }
  .signin .login .head .atom { width: 140px; height: 140px; top: -20px; inset-inline-start: -40px }
  .signin .login .formulas { bottom: 3px; font-size: .55rem }
  .signin .login form, .signin .login .body { padding: 12px 16px 14px; gap: 9px }
  .signin .login .who { font-size: .8rem; margin: 0 }
  .signin .login h3 { font-size: 1rem }
  .signin .login .field { gap: 2px }
  .signin .login .field label { font-size: .8rem }
  .signin .login .field input, .signin .login .field select { padding-block: 7px }
  .signin .login .row { gap: 8px }
  .signin .login .btn { padding-block: 9px }
  .signin .login .msg:empty { display: none }
  .signin footer.dev { gap: 4px }
  .signin .dev-rule { display: none }
  .signin .dev-card { gap: 8px; padding: 5px 12px 5px 6px }
  .signin .dev-logo { width: 38px; height: 38px; padding: 2px }
  .signin .dev-label { font-size: .62rem }
  .signin .dev-text strong { font-size: .82rem; line-height: 1.25 }
  .signin .dev-phone { font-size: .74rem; margin-top: 1px; padding: 0 10px }
  /* the sign-up form is longer: a smaller header and the grade and password side by side */
  .signin .login:has([data-form=register]) .head { gap: 2px; padding: 10px 16px 18px }
  .signin .login:has([data-form=register]) .head .logo-slot.big { width: 50px; height: 50px }
  .signin .login:has([data-form=register]) .head h2 { font-size: 1rem }
  .signin .login:has([data-form=register]) .head p.teacher { display: none }
  .signin .login:has([data-form=register]) .row > .field { flex-basis: 130px }
}
@media (max-height: 700px) {
  .signin .ticker { min-height: 30px }
  .signin .login, .signin footer.dev { margin-top: 12px }
  .signin .login .head { padding: 10px 14px 18px }
  .signin .login .head .logo-slot.big { width: 56px; height: 56px }
  .signin .login .head h2 { font-size: 1.05rem }
  .signin .login form, .signin .login .body { gap: 6px; padding-block: 10px }
  .signin .login .field input, .signin .login .field select { padding-block: 6px }
  .signin .dev-label { display: none }
  .signin form[data-form=register] > h3 + p.who { display: none }
}

/* Teacher's view of one student's answers */
.ans-row { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; border-inline-start: 4px solid var(--line); background: var(--surface-2) }
.ans-row.ok { border-inline-start-color: var(--ok) } .ans-row.bad { border-inline-start-color: var(--bad) } .ans-row.hand { border-inline-start-color: var(--gold) }
/* new school year */
.ny-steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; line-height: 1.7 }
.archive { margin-top: 18px }
.archive .files li { display: flex; justify-content: space-between; align-items: center; gap: 8px }