/* Course site. Dark theme matching the videos (theme.css in the pipeline). */
:root {
  --bg: #0f172a; --bg2: #111c33; --field: #0b1222; --panel: #1e293b; --line: #2b3a55; --fg: #e2e8f0; --muted: #94a3b8;
  --accent: #38bdf8; --accent2: #7dd3fc; --ok: #22c55e; --bad: #f87171; --warn: #fbbf24;
  --radius: 14px; --mono: 'JetBrains Mono', Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.6 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif; }
a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: var(--mono); background: var(--panel); color: var(--warn); padding: 1px 6px; border-radius: 6px; font-size: .88em; }
pre { margin: 0; }
pre code { display: block; padding: 16px 18px; border-radius: 10px; color: var(--fg); overflow-x: auto; font-size: 14px; line-height: 1.55; }
pre code.hljs { background: var(--field); }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: clamp(30px, 4.5vw, 46px); margin: .2em 0 .4em; }
h2 { font-size: 26px; margin: 0 0 14px; color: var(--accent2); }
h3 { font-size: 19px; margin: 0 0 10px; }
.muted { color: var(--muted); }
main { max-width: 1120px; margin: 0 auto; padding: 0 16px 60px; }

/* light theme */
body.light { --bg: #f5f7fb; --bg2: #ffffff; --field: #ffffff; --panel: #e8edf5; --line: #d5dce8; --fg: #16213a; --muted: #5b6785; --accent: #0284c7; --accent2: #0369a1; --h2: #0369a1; }
body.light .top { background: rgba(245, 247, 251, .95); }
body.light pre code.hljs, body.light .output, body.light .joblog { background: #1e293b; color: #e2e8f0; }
body.light .reading-body pre code, body.light .note-box textarea { background: var(--field); color: var(--fg); }
body.light code { background: #e8edf5; color: #9a3412; }
body.light .q input[type=text], body.light .q textarea, body.light .q select, body.light select, body.light .form label input, body.light .form label textarea, body.light .exercise textarea.code { background: #fff; color: var(--fg); }
body.light .form label input:not([type=radio]):not([type=checkbox]), body.light .form select, body.light .note-box textarea, body.light .admin-table select, body.light .admin-table input[type=text], body.light .copyrow input, body.light .copyrow textarea, body.light .admin-table input.yt { background: #fff; color: var(--fg); }
body.light input, body.light textarea, body.light select { color-scheme: light; }
body.light .logo { color: #fff; }
body.light .btn.primary { color: #fff; }
body.light .btn.primary .why { color: rgba(255, 255, 255, .8); }

/* lesson wizard */
.lesson-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; }
.course-nav { position: sticky; top: 72px; max-height: calc(100vh - 90px); overflow: auto; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; font-size: 14px; }
.nav-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin-bottom: 8px; }
.nav-head a { color: var(--fg); }
.nav-close { display: none; font-size: 22px; }
.nav-track summary { cursor: pointer; font-weight: 600; padding: 6px 0; color: var(--accent2); }
.nav-course { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin: 10px 0 4px; }
.nav-lesson { display: flex; gap: 8px; align-items: center; padding: 5px 6px; border-radius: 6px; color: var(--fg); }
.nav-lesson:hover { background: var(--panel); text-decoration: none; }
.nav-lesson.current { background: var(--panel); font-weight: 600; }
.nav-lesson.soon { color: var(--muted); pointer-events: none; }
.nav-lesson .state { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.nav-lesson.done .state { background: var(--ok); border-color: var(--ok); }
.nav-lesson.started .state { border-color: var(--accent); }
.nav-toggle { display: none; margin-bottom: 10px; }
.stepper { list-style: none; padding: 0; display: flex; gap: 6px; margin: 16px 0 24px; flex-wrap: wrap; }
.stepper li { flex: 1; min-width: 110px; }
.step-btn { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); color: var(--muted); font: inherit; font-size: 14px; cursor: pointer; text-align: start; }
.step-btn .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.step-btn .lbl { font-weight: 600; }
.step-btn .meta { margin-inline-start: auto; font-size: 12px; }
.stepper li.current .step-btn { border-color: var(--accent); color: var(--fg); background: var(--panel); }
.stepper li.current .step-btn .dot { border-color: var(--accent); background: var(--accent); }
.stepper li.done .step-btn .dot { background: var(--ok); border-color: var(--ok); }
.stepper li.skipped .step-btn .dot { border-color: var(--warn); }
[hidden] { display: none !important; }
.step-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 22px; flex-wrap: wrap; }
.reading-body { max-width: 760px; font-size: 18px; line-height: 1.75; }
.reading-body h3 { color: var(--accent2); margin: 26px 0 8px; font-size: 22px; }
.reading-body ul { padding-inline-start: 22px; }
.reading-body li { margin: 6px 0; }
.reading-body pre { margin: 10px 0; }
.reading-body pre code { background: var(--field); color: #e2e8f0; }
.objectives, .takeaways { background: var(--bg2); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); border-radius: 10px; padding: 12px 18px; margin: 0 0 18px; max-width: 760px; }
.objectives ul, .takeaways ul { margin: 6px 0 0; padding-inline-start: 20px; }
.keypoints, .transcript { margin-top: 16px; }
.keypoints summary, .transcript summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.watch-status { font-size: 14px; margin: 6px 0; }
.note-box { display: block; margin: 16px 0; font-weight: 600; }
.note-box textarea { display: block; width: 100%; max-width: 760px; margin-top: 6px; font: inherit; font-size: 15px; background: var(--field); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
body.light .note-box textarea { background: #fff; }
.pager .next.btn { max-width: 100%; }
.thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-bottom: 12px; display: block; }
@media (max-width: 900px) {
  .lesson-layout { grid-template-columns: 1fr; }
  .course-nav { display: none; position: fixed; inset: 0; z-index: 30; max-height: none; border-radius: 0; }
  body.nav-open .course-nav { display: block; }
  .nav-close { display: inline; }
  .nav-toggle { display: inline-flex; }
}

/* header / footer */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 24px; background: rgba(15, 23, 42, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); font-weight: 600; min-width: 0; }
.brand span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand:hover { text-decoration: none; }
.logo { background: var(--accent); color: #04121f; font-weight: 800; border-radius: 8px; padding: 2px 8px; font-size: 14px; }
.top nav { display: flex; gap: 18px; flex: none; align-items: center; }
.menu-btn { display: none; border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 8px; font-size: 20px; line-height: 1; padding: 4px 10px; cursor: pointer; }
.top nav a { color: var(--muted); }
.foot { border-top: 1px solid var(--line); color: var(--muted); text-align: center; font-size: 14px; padding: 24px 16px; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--fg);
  padding: 10px 18px; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #04121f; font-weight: 600; }
.btn.primary:hover { background: var(--accent2); }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 12px; font-size: 14px; }
.btn:disabled { opacity: .6; cursor: not-allowed; }  /* not "wait": a disabled button is not busy (it says why next to it) */
.btn .why { color: var(--muted); }
.btn.primary .why { color: rgba(4, 18, 31, .75); }
select { font: inherit; font-size: 15px; background: var(--field); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 32px 8px 12px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2394a3b8' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
select:focus { outline: none; border-color: var(--accent); }
select option { background: var(--field); color: var(--fg); }
input[type=text], input[type=email], input[type=number], input[type=date], input[type=password], input:not([type]), textarea { color-scheme: dark; }

/* home */
.hero { padding: 64px 0 36px; }
.kicker { color: var(--accent); text-transform: uppercase; letter-spacing: 3px; font-size: 13px; font-weight: 600; margin: 0; }
.lede { font-size: 20px; color: var(--muted); max-width: 760px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0; }
.stats { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 26px; color: var(--muted); }
.stats b { color: var(--fg); font-size: 22px; margin-inline-end: 4px; }
.overall { display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 10px 0; }
.overall .bar { flex: 1; height: 8px; background: var(--panel); border-radius: 4px; overflow: hidden; }
.overall .bar i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .4s; }
.overall-text { color: var(--muted); font-size: 14px; white-space: nowrap; }
.tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.track { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; }
.track header h2 { margin: 6px 0 4px; font-size: 22px; }
.track header h2 a { color: var(--fg); }
.tid, .cid { font-family: var(--mono); color: var(--accent); font-size: 13px; }
.courses { list-style: none; padding: 0; margin: 14px 0; flex: 1; }
.courses li { padding: 5px 0; border-top: 1px solid var(--line); font-size: 15px; }
.more { font-weight: 600; }

.course-card header p { margin: 6px 0 0; font-size: 15px; }
.course-card .overall { margin: 12px 0 14px; }
.stats.small { gap: 18px; margin: 14px 0 0; }
.stats.small b { font-size: 18px; }
.course-hero { padding-top: 24px; }

/* track and progress lists */
.narrow { max-width: 860px; margin: 0 auto; }
.crumbs { color: var(--muted); font-size: 14px; padding: 18px 0 0; }
.course-block { margin: 30px 0; }
.lessons { list-style: none; padding: 0; margin: 0; }
.lesson-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; margin: 8px 0; background: var(--bg2); flex-wrap: wrap; }
.lesson-row.soon { opacity: .55; }
.lesson-row .state { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.lesson-row.done .state { background: var(--ok); border-color: var(--ok); box-shadow: inset 0 0 0 3px var(--bg2); }
.lesson-row.started .state { border-color: var(--accent); }
.lesson-row > a, .lesson-row > span:nth-child(2) { flex: 1; min-width: 200px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 12px; padding: 2px 8px; border-radius: 20px; background: var(--panel); color: var(--muted); }
.tag:empty { display: none; }
.tag.soon { color: var(--warn); }

/* lesson */
.lesson-head { padding: 10px 0 4px; }
.checklist { list-style: none; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.checklist li { font-size: 14px; padding: 6px 12px 6px 32px; border-radius: 20px; background: var(--panel); position: relative; color: var(--muted); }
.checklist li::before { content: ''; position: absolute; inset-inline-start: 11px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; border: 2px solid var(--muted); }
.checklist li.ok { color: var(--fg); }
.checklist li.ok::before { background: var(--ok); border-color: var(--ok); }
.subnav { position: sticky; top: 57px; z-index: 5; display: flex; gap: 4px; overflow-x: auto; background: var(--bg); padding: 10px 0; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.subnav a { color: var(--muted); padding: 6px 12px; border-radius: 8px; white-space: nowrap; font-size: 15px; }
.subnav a:hover { background: var(--panel); color: var(--fg); text-decoration: none; }
.lesson section { margin: 0 0 48px; }
.frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); margin-bottom: 12px; }
.frame iframe, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.frame.placeholder { display: grid; place-items: center; background: var(--bg2); color: var(--muted); }
.note { color: var(--muted); font-size: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; min-width: 0; }
.card ul { margin: 0; padding-inline-start: 20px; }
.card li { margin: 4px 0; }
.card pre { margin-top: 10px; }

/* quiz */
.q { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 0 0 14px; background: var(--bg2); min-width: 0; }
/* the question text is a legend for screen readers, but must sit INSIDE the card, not on its border */
.q legend { font-weight: 600; padding: 0; float: left; width: 100%; margin: 0 0 8px; line-height: 1.45; }
.q legend + * { clear: both; }
.q { min-width: 0; } .q legend code, .q .opt code { white-space: pre-wrap; overflow-wrap: anywhere; }
.q pre { margin: 6px 0 12px; }
.qn { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--panel); color: var(--accent); font-size: 14px; margin-inline-end: 6px; }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
.opt:hover { background: var(--panel); }
.opt input { margin-top: 5px; accent-color: var(--accent); }
.opt.right { border-color: var(--ok); background: rgba(34, 197, 94, .08); }
.opt.wrong { border-color: var(--bad); background: rgba(248, 113, 113, .08); }
.explain { margin: 10px 0 0; padding: 10px 14px; border-inline-start: 3px solid var(--accent); background: var(--panel); border-radius: 0 8px 8px 0; font-size: 15px; }
.quiz-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.quiz-score { font-weight: 600; }
.quiz-score.pass { color: var(--ok); }
.quiz-score.fail { color: var(--warn); }

.q.right { border-color: var(--ok); } .q.wrong { border-color: var(--bad); }
.q .verdict { margin: 8px 0 0; font-weight: 600; font-size: 15px; }
.q.right .verdict { color: var(--ok); } .q.wrong .verdict { color: var(--bad); }
.q .small { font-size: 14px; margin: 4px 0 8px; }
.q input[type=text], .q textarea, .q select { font: inherit; font-size: 16px; background: var(--field); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.q textarea { width: 100%; }
.q input.mono { font-family: var(--mono); }
.q input.right, .q select.right { border-color: var(--ok); } .q input.wrong, .q select.wrong { border-color: var(--bad); }
.inline-answer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inline-answer input { width: 220px; }
.fill-text { line-height: 2.2; }
.fill-text input.blank { width: auto; min-width: 120px; margin: 0 4px; padding: 4px 10px; }
.order-list { list-style: decimal; padding-inline-start: 28px; margin: 0; }
.order-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; margin: 6px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.order-list li.right { border-color: var(--ok); } .order-list li.wrong { border-color: var(--bad); }
.order-btns { display: flex; gap: 4px; }
.match-table { border-collapse: collapse; width: 100%; }
.match-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.match-table td:first-child { width: 45%; }
.selfcheck { margin-top: 10px; padding: 10px 14px; border-inline-start: 3px solid var(--accent); background: var(--panel); border-radius: 0 8px 8px 0; font-size: 15px; }
.selfcheck ul { margin: 4px 0 8px; padding-inline-start: 20px; }

/* exercises */
.exercise { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; background: var(--bg2); min-width: 0; }
.exercise.solved { border-color: var(--ok); }
.exercise textarea.code { width: 100%; min-height: 220px; font-family: var(--mono); font-size: 14px; background: var(--field); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.CodeMirror { height: auto; min-height: 160px; border-radius: 10px; border: 1px solid var(--line); font-family: var(--mono); font-size: 14px; line-height: 1.55; }
.CodeMirror-scroll { min-height: 160px; max-height: 480px; }
.ex-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.status { color: var(--muted); font-size: 14px; }
.hints { margin: 0; padding-inline-start: 22px; color: #cbd5e1; }
.hints li { margin: 4px 0; }
.output { background: #05090f; color: #d1d5db; border-radius: 10px; padding: 12px 14px; font-family: var(--mono); font-size: 13.5px; white-space: pre-wrap; word-break: break-word; max-height: 320px; overflow: auto; margin: 10px 0; border: 1px solid var(--line); }
.output.err { color: #fca5a5; }
.tests { list-style: none; padding: 0; margin: 8px 0 0; }
.tests li { padding: 6px 0 6px 28px; position: relative; font-size: 15px; }
.tests li::before { position: absolute; inset-inline-start: 4px; font-weight: 700; }
.tests li.ok::before { content: '\2713'; color: var(--ok); }
.tests li.bad::before { content: '\2717'; color: var(--bad); }
.tests li .msg { display: block; color: var(--muted); font-size: 14px; }

/* mastery */
.skills { list-style: none; padding: 0; margin: 8px 0; }
.skills li { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.skills .bar { height: 8px; background: var(--panel); border-radius: 4px; overflow: hidden; }
.skills .bar i { display: block; height: 100%; background: var(--accent); }
.skill-state { white-space: nowrap; color: var(--muted); }
.skill-state.mastered { color: var(--ok); } .skill-state.learning { color: var(--warn); }
.skills-map { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; margin: 0 0 14px; }
.skills-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.practice-card { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 4px 0 12px; }
.practice-done { margin-top: 24px; }

/* transcript, completion, pager */
.transcript details { border-bottom: 1px solid var(--line); padding: 10px 0; }
.transcript summary { cursor: pointer; font-weight: 600; }
.transcript p { color: #cbd5e1; margin: 8px 0 0; }
.done-box { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 22px; border: 1px dashed var(--line); border-radius: var(--radius); margin-bottom: 26px; }
.done-box.done { border-color: var(--ok); border-style: solid; }
.done-note { color: var(--ok); font-weight: 600; }
.pager { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pager a { padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; max-width: 48%; }
.pager a:hover { border-color: var(--accent); text-decoration: none; }
.pager .next { margin-inline-start: auto; text-align: end; }

/* forms, account, auth */
.form label { display: block; margin: 12px 0; font-weight: 500; }
.form label input:not([type=radio]):not([type=checkbox]), .form label textarea, .form select { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 15px; background: var(--field); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; }
.form label.opt { display: flex; font-weight: 400; }
.form button { margin-top: 8px; }
.form.inline-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.form.inline-form label { margin: 0; flex: 1; min-width: 160px; }
.form.inline-form button { margin: 0; }
.form-page { max-width: 460px; }
.top nav .user { color: var(--fg); font-weight: 600; }
.top nav .signup { color: var(--accent); font-weight: 600; }
.inline { display: inline; }
.linklike { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 0; }
.linklike:hover { color: var(--fg); }
.enroll-box { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 30px; }
.admin-table select, .admin-table input[type=text] { font: inherit; font-size: 13px; background: var(--field); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; }
.admin h2 { margin-top: 36px; }

/* studio */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 16px; }
.step { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg2); margin: 14px 0; padding: 0 20px; }
.step > summary { cursor: pointer; padding: 14px 0; font-weight: 600; font-size: 18px; }
.step > summary .muted { font-weight: 400; font-size: 14px; margin-inline-start: 8px; }
.step .num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #04121f; font-size: 14px; margin-inline-end: 8px; }
.step > *:not(summary) { margin-bottom: 16px; }
.outline, .joblog { background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-family: var(--mono); font-size: 13px; white-space: pre-wrap; max-height: 420px; overflow: auto; }
.outline-edit, .script-edit { width: 100%; font-family: var(--mono); font-size: 13.5px; line-height: 1.5; background: var(--field); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.tag.ok { color: var(--ok); } .tag.warn { color: var(--warn); } .tag.bad { color: var(--bad); }
.admin-table.compact td, .admin-table.compact th { padding: 7px 8px; }
.job { border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; margin: 8px 0; }
.job summary { cursor: pointer; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.job.running { border-color: var(--warn); }
.job .joblog { margin-top: 10px; max-height: 300px; }
.step form.inline-form { margin-bottom: 10px; }

/* studio board */
.stagebar { display: flex; gap: 6px; margin: 10px 0 22px; }
.stagebar span { flex: 1; text-align: center; font-size: 13px; padding: 8px 6px; border-radius: 8px; background: var(--panel); color: var(--muted); }
.stagebar span.done { background: rgba(34, 197, 94, .15); color: var(--ok); }
.stagebar span.now { background: rgba(56, 189, 248, .18); color: var(--accent); font-weight: 600; }
.step.locked { opacity: .55; }
.step.locked > summary { cursor: default; }
.step .locknote { color: var(--muted); font-size: 15px; }
.seltree { border: 1px solid var(--line); border-radius: 10px; background: var(--field); padding: 10px 14px; max-height: 420px; overflow: auto; font-size: 15px; }
.seltree .tr { margin: 8px 0 4px; font-weight: 600; }
.seltree .co { margin: 4px 0 2px 22px; font-weight: 500; }
.seltree .le { margin: 2px 0 2px 46px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.seltree label { cursor: pointer; }
.seltree .st { font-size: 12px; color: var(--muted); }
.seltree .st.ok { color: var(--ok); }
.seltree .st.warn { color: var(--warn); }
.selbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.selbar .count { font-weight: 600; margin-inline-end: 6px; }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.chip { font-family: var(--mono); font-size: 12px; padding: 2px 8px; border-radius: 14px; background: var(--panel); color: var(--accent2); cursor: pointer; }
.chip:hover { background: var(--line); }
.produce label.notes.needed { color: var(--warn); }
.produce label.notes.needed input { border-color: var(--warn); }
.produce .btn small, .produce .why { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.produce form { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 12px 0; }
.mp-pop { position: fixed; z-index: 60; width: min(560px, calc(100vw - 16px)); overflow-y: auto; background: var(--bg2); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); font-size: 14px; }
.mp-pop .mp-head { position: sticky; top: 0; padding: 8px 12px; font-size: 12px; color: var(--muted); background: inherit; border-bottom: 1px solid var(--line); }
.mp-pop .mp-item { padding: 7px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.mp-pop .mp-item b { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 13px; overflow-wrap: anywhere; }
.mp-pop .mp-item span { font-size: 12px; color: var(--muted); }
.mp-pop .mp-item.hi, .mp-pop .mp-item:hover { background: var(--accent-soft, rgba(37, 99, 235, .1)); }
.mp-pop .mp-item.on b { color: var(--accent); }
.mp-pop .mp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.mp-pop .mp-chip { font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); cursor: pointer; }
.mp-pop .mp-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mp-pop .mp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mp-pop .mp-tag { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); }
.mp-pop .mp-tag.mp-free { color: var(--ok, #15803d); border-color: currentColor; }
.ai-admin .uses { display: block; margin-top: 4px; }
.produce .voicepick { flex: 1 1 100%; display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.produce .voicepick select { max-width: 100%; }
.produce .voicepick .why { flex: 1 1 100%; margin: 0; }
.produce .btn { min-width: 260px; flex-direction: column; align-items: flex-start; text-align: start; }
.produce label.notes { flex: 1 1 100%; font-size: 14px; color: var(--muted); }
.produce label.notes input { display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 14px; background: var(--field); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.produce form label:not(.notes):not(.opt) { display: flex; align-items: center; gap: 8px; }
.btn.blocked { opacity: .5; cursor: not-allowed; }
.job.cancelled { opacity: .7; }
tr.creating td { background: rgba(251, 191, 36, .05); }

/* family */
.child-card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 12px 0; }
.child-card.paused { opacity: .7; }
.child-head { display: flex; align-items: center; gap: 14px; }
.child-head > div { flex: 1; }
.avatar { font-size: 34px; line-height: 1; }
.avatar.big { font-size: 56px; }
.child-card details { margin-top: 10px; }
.child-card summary { cursor: pointer; color: var(--accent2); font-weight: 600; padding: 6px 0; }
.avatars { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.avatar-pick input { display: none; }
.avatar-pick span { display: inline-grid; place-items: center; width: 52px; height: 52px; font-size: 28px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--bg2); }
.avatar-pick input:checked + span { border-color: var(--accent); background: var(--panel); }
.consent { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin: 12px 0; font-size: 15px; }
.form.danger label { color: var(--bad); }
.kid-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.kid-card { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 150px; padding: 16px 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); }
.kid-card input { width: 90px; text-align: center; font-size: 20px; letter-spacing: 6px; font: inherit; background: var(--field); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
body.light .kid-card input { background: #fff; }
.kid-card.paused { opacity: .5; }

.codes { font-family: var(--mono); font-size: 12px; color: var(--accent2); }
.seltree .codes { margin-inline-start: 6px; }

/* parent dashboard */
.report-stats { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 26px; margin: 8px 0 18px; }
.insights { list-style: none; padding: 0; margin: 6px 0 18px; }
.insights li { padding: 10px 14px; border-radius: 10px; margin: 6px 0; background: var(--bg2); border-inline-start: 4px solid var(--muted); }
.insights li.warn { border-inline-start-color: var(--warn); } .insights li.good { border-inline-start-color: var(--ok); } .insights li.info { border-inline-start-color: var(--accent); }
.trend { display: flex; gap: 8px; align-items: flex-end; height: 130px; padding: 6px 0; }
.trend .week { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; font-size: 11px; color: var(--muted); height: 100%; }
.trend .bar { width: 70%; min-height: 2px; background: var(--accent); border-radius: 4px 4px 0 0; }
.trend .acc { color: var(--fg); }
.assign-list { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; margin: 8px 0; }
.assigned { padding-top: 20px; }
.dashboard h2 { margin-top: 30px; }

/* exam item review */
.items-review .filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.item-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 12px 0; background: var(--bg2); }
.item-card.rejected { border-color: var(--bad); } .item-card.approved { border-color: var(--ok); }
.item-card header { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.item-card .stem { font-size: 16px; white-space: pre-wrap; }
.item-card .figure svg { max-width: 100%; height: auto; background: #fff; border-radius: 8px; }
.item-card .opts li { margin: 3px 0; } .item-card .opts li.right { font-weight: 700; color: var(--ok); }
.item-card .solution { white-space: pre-wrap; font-size: 13px; }
.item-card form.reject input { width: 260px; max-width: 100%; }

/* test prep */
.prep .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.prep .stat { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; }
.prep .stat .big { font-size: 30px; font-weight: 700; color: var(--accent2); } .prep .stat .lbl { color: var(--muted); font-size: 13px; }
.prep .actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; } .btn.big { font-size: 17px; padding: 12px 18px; }
.hero-card { background: var(--bg2); border: 1px solid var(--line); border-inline-start: 5px solid var(--accent); border-radius: 12px; padding: 16px 18px; margin: 14px 0; }
.examdate { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 10px 0 20px; } .examdate label input { display: block; margin-top: 4px; }
.weak { list-style: none; padding: 0; } .weak li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.weak .bar { width: 90px; height: 8px; background: var(--panel); border-radius: 4px; overflow: hidden; } .weak .bar i { display: block; height: 100%; background: var(--accent); } .heat-row { margin: 8px 0; } .heat-title { display: block; font-weight: 600; margin-bottom: 4px; }
.heat { display: flex; flex-wrap: wrap; gap: 5px; } .heat .cell { width: 40px; height: 34px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; text-decoration: none; }
.heat .cell.na { background: var(--muted); } .heat .cell.lo { background: #dc2626; } .heat .cell.mid { background: #d97706; } .heat .cell.hi { background: #16a34a; }
.player .player-head { margin-bottom: 10px; } .player .meter { display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; }
.player .timer.over { color: var(--warn); font-weight: 700; } .player .bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; } .player .bar i { display: block; height: 100%; background: var(--accent); }
.item .item-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; margin-bottom: 8px; }
.item .stem, .review .stem { font-size: 18px; line-height: 1.5; margin: 10px 0; white-space: pre-wrap; } .item .figure svg, .review .figure svg { max-width: 100%; height: auto; background: #fff; border-radius: 8px; }
.choices { list-style: none; padding: 0; } .choices li { margin: 6px 0; } .choices label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.choices label:hover { border-color: var(--accent); } .choices li.right label { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); } .choices li.wrong label { border-color: var(--bad); }
.grid-in input { display: block; width: 220px; margin-top: 6px; font: inherit; font-size: 18px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--fg); }
.item-actions { display: flex; gap: 10px; align-items: center; margin: 14px 0; } .feedback { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: var(--bg2); }
.feedback .verdict { font-size: 18px; font-weight: 700; } .feedback .verdict.ok { color: var(--ok); } .feedback .verdict.bad { color: var(--bad); }
.solution { white-space: pre-wrap; font-size: 14px; } .big-score { font-size: 22px; } .week-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 10px 0; background: var(--bg2); }
.prep-cta { margin: 6px 0 14px; } .notice { margin-top: 30px; }

/* prep home details */
.weak li { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.weak .w-name { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .weak .w-name .bar { width: 160px; max-width: 100%; }
.weak .w-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cell-legend { display: inline-block; padding: 1px 8px; border-radius: 6px; color: #fff; font-size: 11px; margin-inline-start: 4px; }
.cell-legend.lo { background: #dc2626; } .cell-legend.mid { background: #d97706; } .cell-legend.hi { background: #16a34a; } .cell-legend.na { background: var(--muted); }
.prep .stat .of { font-size: 16px; color: var(--muted); font-weight: 400; }
.catalog-h { margin: 26px 0 6px; } .course-card.mine { border-color: var(--accent); }
.item .solution, .review .solution, .feedback .solution { white-space: pre-wrap; line-height: 1.55; }
@media (max-width: 640px) { .weak li { flex-direction: column; align-items: stretch; } .weak .w-acts { justify-content: flex-start; } .mock-bar { position: static; } }

/* feedback */
.feedback-box { margin: 18px 0; } .feedback-form { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px 14px; background: var(--bg2); margin: 10px 0; }
.feedback-form h3 { margin: 2px 0 6px; font-size: 17px; } .stars { display: flex; gap: 4px; margin-bottom: 8px; }
.star { background: none; border: 0; font-size: 30px; line-height: 1; color: var(--line); cursor: pointer; padding: 0 2px; } .star.on, .star:hover { color: #f59e0b; }
.fb-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.chip-opt input { position: absolute; opacity: 0; } .chip-opt span { display: inline-block; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; cursor: pointer; color: var(--muted); }
.chip-opt input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; } .chip-opt input:focus-visible + span { outline: 2px solid var(--accent2); }
.feedback-form textarea { width: 100%; margin-top: 6px; font: inherit; font-size: 15px; background: var(--field); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.fb-actions { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.feedback-admin .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 12px 0; }
.feedback-admin .stat { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; } .feedback-admin .stat .big { font-size: 28px; font-weight: 700; color: var(--accent2); } .feedback-admin .stat .lbl { color: var(--muted); font-size: 13px; }
.actions-list { list-style: none; padding: 0; } .actions-list li { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 8px 0; background: var(--bg2); }
.actions-list li.done { opacity: 0.55; } .actions-list li.done b { text-decoration: line-through; } .actions-list .a-body { flex: 1; } .actions-list .a-acts { display: flex; gap: 6px; }
.comments { list-style: none; padding: 0; } .comments li { border-bottom: 1px solid var(--line); padding: 8px 0; }

/* mock exam */
.mock-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--bg2); position: sticky; top: 0; z-index: 5; }
.mock-bar #module-label { font-weight: 700; } .mock-bar .timer { font-size: 20px; font-weight: 700; font-family: var(--mono); } .mock-bar .timer.over { color: var(--bad); }
.mock .q-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 12px 0 4px; } .mock .q-num { font-weight: 700; }
.mock .mark input { margin-inline-end: 4px; } .mock .choices li { display: flex; gap: 8px; align-items: center; } .mock .choices li label { flex: 1; }
.mock .choices li.elim label span { text-decoration: line-through; opacity: 0.5; } .elim-btn { border: 1px solid var(--line); background: var(--bg2); color: var(--muted); border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 14px; }
.mock-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 14px 0; }
.palette, .pal-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.pal { width: 36px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); color: var(--fg); font-weight: 700; cursor: pointer; position: relative; }
.pal.big { width: 44px; height: 40px; } .pal.answered { background: var(--accent); color: #fff; border-color: var(--accent); } .pal.current { outline: 2px solid var(--accent2); outline-offset: 1px; }
.pal.marked::after { content: ''; position: absolute; top: -4px; inset-inline-end: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); }
.legend .pal { display: inline-flex; align-items: center; justify-content: center; margin: 0 4px 0 12px; cursor: default; }
.ref-box { border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; background: var(--bg2); margin: 10px 0; }

/* admin */
.steps li { margin: 6px 0; }
.flash { padding: 10px 14px; border-radius: 10px; background: rgba(34, 197, 94, .12); border: 1px solid var(--ok); }
.flash.error { background: rgba(248, 113, 113, .12); border-color: var(--bad); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { text-align: start; vertical-align: top; padding: 12px 8px; border-bottom: 1px solid var(--line); }
.admin-table td.actions { white-space: nowrap; }
.copyrow { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.copyrow .lbl { width: 84px; color: var(--muted); flex: none; padding-top: 6px; }
.copyrow input, .copyrow textarea, .admin-table input.yt { flex: 1; min-width: 0; background: var(--field); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; }
.admin-table input.yt { width: 100%; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .top { padding: 10px 16px; flex-wrap: wrap; }
  .menu-btn { display: inline-flex; }
  .top nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 0 4px; border-top: 1px solid var(--line); margin-top: 8px; }
  .top nav a, .top nav .linklike, .top nav .user { padding: 8px 4px; font-size: 16px; text-align: start; }
  body.menu-open .top nav { display: flex; }
  .hero { padding-top: 36px; }
  .pager a { max-width: 100%; }
  .admin-table thead { display: none; }
  .admin-table td { display: block; border: 0; padding: 6px 0; }
  .admin-table tr { display: block; border-bottom: 1px solid var(--line); padding: 10px 0; }
}

/* light theme: every text field is white (rules above set dark fields for the dark theme) */
body.light input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), body.light textarea, body.light select { background: #fff; color: var(--fg); }

.dashboard .heat .cell { cursor: default; }
.howto { margin: 8px 0 12px; } .howto summary { cursor: pointer; color: var(--accent2); }

/* AI providers (admin and creators) */
.provider-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 10px 0; background: var(--panel); }
.provider-card > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; list-style: none; }
.provider-card > summary::-webkit-details-marker { display: none; }
.provider-card > summary::before { content: "+"; color: var(--accent); font-weight: 700; width: 12px; }
.provider-card[open] > summary::before { content: "-"; }
.provider-card[open] > summary { margin-bottom: 12px; }
.provider-card.off { opacity: .65; }
.provider-card.add { border-style: dashed; background: transparent; }
.ai-admin .admin-table select, .ai-admin .admin-table input { max-width: 100%; margin: 2px 0; }

/* ---- UX pass: navigation, icons, tabs ---- */
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff; padding: 8px 14px; z-index: 50; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
svg[aria-hidden] { flex: none; vertical-align: -3px; }
main > section:first-child > h1:first-child, main > section.narrow > h1:first-child { margin-top: 28px; }
.top nav { gap: 4px; }
.top nav .nav-item { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px; color: var(--muted); font-weight: 500; font-size: 15px; }
.top nav .nav-item:hover { background: var(--panel); color: var(--fg); text-decoration: none; }
.top nav .nav-item.active { color: var(--accent2); background: color-mix(in srgb, var(--accent) 14%, transparent); font-weight: 600; }
.icon-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--muted); padding: 8px; border-radius: 10px; cursor: pointer; font: inherit; }
.icon-btn:hover { background: var(--panel); color: var(--fg); }
.when-light, body.light .when-dark { display: none; } body.light .when-light { display: inline-flex; } .when-dark { display: inline-flex; }
.only-mobile { display: none; }
.menu-btn { align-items: center; justify-content: center; padding: 6px 8px; }
.top nav .signup { color: #fff; margin-inline-start: 6px; } body:not(.light) .top nav .signup { color: #04121f; }
.user-menu { position: relative; margin-inline-start: 4px; }
.user-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 5px 10px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); color: var(--fg); font-weight: 600; font-size: 15px; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover { border-color: var(--accent); }
.u-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: 15px; font-weight: 700; flex: none; }
.uname { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-pop { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); min-width: 200px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); z-index: 20; }
.user-pop a, .user-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; color: var(--fg); font: inherit; font-size: 15px; border-radius: 8px; cursor: pointer; text-align: start; }
.user-pop a:hover, .user-pop button:hover { background: var(--panel); text-decoration: none; }
.user-pop form { margin: 0; }

.tablist { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 18px 0 22px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: none; color: var(--muted); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; border-radius: 8px 8px 0 0; }
.tab:hover { color: var(--fg); background: var(--panel); }
.tab[aria-selected=true] { color: var(--accent2); border-bottom-color: var(--accent); }
.tab .count { background: var(--panel); color: var(--muted); border-radius: 999px; font-size: 12px; padding: 1px 8px; }
.tabbed > [role=tabpanel] > h2:first-of-type { margin-top: 0; }
.btn svg { margin-inline-end: 6px; }
.stat-ico { color: var(--accent); margin-bottom: 4px; display: block; }
.thumb-ph { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0f172a, #1e3a5f); color: #38bdf8; }
.empty { text-align: center; padding: 28px 16px; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; }
.empty svg { display: block; margin: 0 auto 8px; color: var(--accent); }

@media (max-width: 760px) {
  .top { flex-wrap: wrap; }
  .menu-btn { display: inline-flex; }
  .top nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 0 4px; border-top: 1px solid var(--line); margin-top: 8px; }
  body.menu-open .top nav { display: flex; }
  .top nav .nav-item, .icon-btn { padding: 12px 10px; font-size: 16px; }
  .only-mobile { display: inline; }
  .user-menu { margin: 6px 0 0; } .user-menu > summary { width: 100%; border-radius: 12px; } .uname { max-width: none; }
  .user-pop { position: static; box-shadow: none; margin-top: 6px; }
  .top nav .signup { margin: 6px 0 0; text-align: center; }
  .step-btn .meta { display: none; }
  .q { padding-inline-start: 12px; padding-inline-end: 12px; }
}
.prep .stat > svg { color: var(--accent); margin-bottom: 2px; }
.family details.add form { margin-top: 8px; }
/* match questions: the select never forces the table wider than the screen; on phones each pair stacks */
.match-table { table-layout: fixed; } .match-table select { width: 100%; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
@media (max-width: 640px) { .match-table, .match-table tbody, .match-table tr, .match-table td { display: block; width: 100% !important; } .match-table td { border: 0; padding: 4px 0; } .match-table tr { padding: 8px 0; border-bottom: 1px solid var(--line); } .match-table td:first-child { font-weight: 600; } }
/* quiz: one question per screen */
.q-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 12px; }
.q-count { font-weight: 600; color: var(--muted); font-size: 15px; }
.q-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.q-dot { width: 22px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: var(--line); cursor: pointer; }
.q-dot.done { background: color-mix(in srgb, var(--accent) 45%, var(--line)); } .q-dot.on { background: var(--accent); }
.quiz-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.top nav .user-pop a { color: var(--fg); }

/* ==== Clear Path theme: off-white ground, one blue accent, green/red feedback, very legible type (light and dark) ==== */
:root { --bg: #0C1322; --bg2: #141D31; --field: #0F1729; --panel: #1C2944; --line: #27334F; --line2: #5A6A8E; --fg: #E8EDF8; --muted: #A3B1CE;
  --accent: #8AB4FF; --accent2: #A9C7FF; --on-accent: #06142E; --ok: #4ADE80; --ok-bg: #12301F; --ok-fg: #86EFAC; --bad: #F87171; --bad-bg: #3A1618; --bad-fg: #FCA5A5; --warn: #FBBF24;
  --radius: 16px; --display: Lexend, 'Segoe UI', system-ui, sans-serif; }
body.light { --bg: #F6F8FC; --bg2: #FFFFFF; --field: #FFFFFF; --panel: #E8EFFC; --line: #DCE3F0; --line2: #9AA8C4; --fg: #14213D; --muted: #47557A;
  --accent: #1D4ED8; --accent2: #1D4ED8; --on-accent: #FFFFFF; --ok: #15803D; --ok-bg: #E3F5E9; --ok-fg: #116230; --bad: #B91C1C; --bad-bg: #FCE8E8; --bad-fg: #991B1B; --warn: #B45309; --h2: #14213D; }
h1, h2, h3, .brand, .btn, .tab, .nav-item, .step-btn .lbl, .stat .big, .q-count, .user-menu > summary { font-family: var(--display); }
h1 { font-weight: 600; letter-spacing: -.01em; } h2 { color: var(--fg); font-weight: 600; font-size: 24px; } h3 { font-weight: 600; }
.reading-body h3 { color: var(--fg); }
.top { background: var(--bg2); border-bottom: 1px solid var(--line); backdrop-filter: none; } body.light .top { background: var(--bg2); }
.logo, body.light .logo { color: var(--on-accent); border-radius: 10px; padding: 4px 9px; }
.btn { border-radius: 14px; min-height: 44px; padding: 10px 18px; font-weight: 600; font-size: 15.5px; background: var(--bg2); border-color: var(--line2); }
.btn:hover { background: var(--panel); border-color: var(--accent); }
.btn.primary, body.light .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn.primary .why, body.light .btn.primary .why { color: var(--on-accent); opacity: .85; }
.btn.small { min-height: 38px; padding: 6px 14px; font-size: 14.5px; border-radius: 12px; }
.btn.big { min-height: 56px; padding: 12px 28px; font-size: 18px; }
.step .num { color: var(--on-accent); } .top nav .signup, body:not(.light) .top nav .signup { color: var(--on-accent); }
.u-avatar { background: var(--panel); color: var(--accent2); }
.course-card, .track { border-radius: var(--radius); }
.lede { font-size: 19px; } .kicker { letter-spacing: 1.5px; font-weight: 700; color: var(--muted); }
.hero { padding: 44px 0 20px; }
code { color: var(--fg); background: var(--panel); } body.light code { color: var(--fg); background: var(--panel); }
.thumb-ph { background: var(--panel); color: var(--accent); }
/* feedback: always colour + icon/word */
.q.right { border-color: var(--ok); } .q.wrong { border-color: var(--bad); }
.opt.right { border-color: var(--ok); background: var(--ok-bg); } .opt.wrong { border-color: var(--bad); background: var(--bad-bg); }
.q .verdict { font-family: var(--display); font-weight: 600; } .q.right .verdict { color: var(--ok-fg); } .q.wrong .verdict { color: var(--bad-fg); }
.q.right .verdict::before { content: "\2713  "; } .q.wrong .verdict::before { content: "\2717  "; }
.opt { border-radius: 14px; min-height: 48px; align-items: center; border: 1px solid var(--line); margin: 6px 0; } .opt input { margin-top: 0; width: 18px; height: 18px; }
.opt:has(input:checked) { border-color: var(--accent); background: var(--panel); }

/* home: your next step */
.next-step { background: var(--bg2); border: 1px solid var(--line); border-radius: 20px; padding: 24px 26px; margin: 8px 0 34px; display: flex; flex-direction: column; gap: 18px; }
.ns-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ns-head h2 { margin: 2px 0 0; font-size: 26px; } .ns-where { margin: 0; font-size: 13px; letter-spacing: 1.1px; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.ns-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.ns-steps li { flex: 1 1 170px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; }
.ns-steps li.now { background: var(--panel); }
.ns-steps b { display: block; font-family: var(--display); font-weight: 600; } .ns-steps small { color: var(--muted); font-size: 13.5px; }
.ns-dot { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; font-family: var(--display); font-weight: 700; font-size: 15px; border: 2px solid var(--line2); color: var(--muted); }
.ns-steps li.now .ns-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ns-steps li.done .ns-dot { background: var(--ok); border-color: var(--ok); color: var(--bg2); }

/* SAT practice home: dense score view */
.prep.wide { max-width: 1120px; margin: 0 auto; }
.score-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: 20px; align-items: start; margin: 10px 0 8px; }
.score-main .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.prep .stat { border-radius: var(--radius); } .prep .stat .big { font-family: 'JetBrains Mono', monospace; font-size: 34px; color: var(--fg); }
.score-main .actions { display: flex; flex-direction: column; gap: 10px; } .score-main .actions .btn { justify-content: center; }
.score-map { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.score-map .h3like { font-size: 17px; margin: 0 0 6px; } .score-map .heat-row { margin: 8px 0; } .score-map .heat-title { font-size: 13.5px; }
.heat .cell { font-family: 'JetBrains Mono', monospace; border-radius: 6px; }
@media (max-width: 900px) { .score-view { grid-template-columns: minmax(0, 1fr); } }

/* kids mode (child profiles): big rounded buttons with a pressed edge, chunky progress dots, larger type */
body.kid { font-size: 18px; }
body.kid .btn { border-radius: 999px; border-width: 2px; min-height: 52px; font-size: 17px; padding: 10px 24px; }
body.kid .btn.primary { box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 60%, #000); } body.kid .btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 60%, #000); }
body.kid .btn.big { min-height: 62px; font-size: 20px; }
body.kid .q-dot { width: 30px; height: 12px; } body.kid .q-count { font-size: 17px; color: var(--fg); }
body.kid .opt { min-height: 58px; border-width: 2px; border-radius: 18px; font-size: 18px; }
body.kid .course-card, body.kid .next-step, body.kid .q { border-width: 2px; border-radius: 24px; }
body.kid .ns-dot { width: 42px; height: 42px; }
/* skills map: soft feedback tints with readable numbers (not blocks of saturated red) */
:root { --mid-bg: #3D3414; --mid-fg: #F5D565; } body.light { --mid-bg: #FBEBB5; --mid-fg: #5F4500; }
.heat .cell, .cell-legend { color: var(--fg); font-weight: 600; }
.heat .cell.lo, .cell-legend.lo { background: var(--bad-bg); color: var(--bad-fg); } .heat .cell.mid, .cell-legend.mid { background: var(--mid-bg); color: var(--mid-fg); }
.heat .cell.hi, .cell-legend.hi { background: var(--ok-bg); color: var(--ok-fg); } .heat .cell.na, .cell-legend.na { background: var(--panel); color: var(--muted); }
.heat .cell:hover { outline: 2px solid var(--accent); text-decoration: none; }
.score-map .heat { gap: 4px; } .score-map .heat .cell { width: 32px; height: 30px; font-size: 11.5px; }
.course-card .btn + .more { display: inline-block; margin-top: 12px; }
.child-head { flex-wrap: wrap; }
@media (max-width: 760px) { .stepper { flex-wrap: nowrap; gap: 4px; } .stepper li { min-width: 0; } .step-btn { padding: 10px 8px; gap: 6px; font-size: 13.5px; justify-content: center; } .step-btn .dot { width: 10px; height: 10px; } }

/* motivation layer */
.cheer { display: flex; align-items: center; gap: 14px; background: var(--ok-bg); border: 1px solid var(--ok); color: var(--ok-fg); border-radius: 16px; padding: 14px 18px; margin: 14px 0; }
.cheer svg { color: var(--ok); } .cheer b { display: block; font-family: var(--display); font-size: 17px; color: var(--fg); } .cheer span { color: var(--fg); }
.cheer.note { background: var(--panel); border-color: var(--accent); } .cheer.note svg { color: var(--accent); }
.challenge { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.challenge.done { border-color: var(--ok); }
.ch-head { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 1.1px; text-transform: uppercase; font-weight: 700; color: var(--muted); } .ch-head svg { color: var(--accent); } .challenge.done .ch-head svg { color: var(--ok); }
.challenge > b { font-family: var(--display); font-size: 18px; }
.challenge .bar { height: 8px; background: var(--panel); border-radius: 999px; overflow: hidden; } .challenge .bar i { display: block; height: 100%; background: var(--accent); } .challenge.done .bar i { background: var(--ok); }
.journey-sum { font-size: 18px; }
.journey { width: 100%; height: auto; max-width: 720px; display: block; margin: 8px 0; }
.journey .grid { stroke: var(--line); stroke-width: 1; } .journey .lbl { fill: var(--muted); font-size: 12px; font-family: var(--mono); }
.journey .line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; } .journey .band { fill: var(--accent); opacity: .12; }
.journey .dot { fill: var(--accent); } .journey .dot.mock { fill: var(--bg2); stroke: var(--accent); stroke-width: 3; }
.journey .target { stroke: var(--ok); stroke-width: 2; stroke-dasharray: 6 5; } .journey .target-lbl { fill: var(--ok-fg); }
.effort { list-style: none; padding: 0; margin: 0 0 6px; display: flex; gap: 18px; flex-wrap: wrap; } .effort b { font-family: var(--display); font-size: 22px; margin-inline-end: 4px; }
.milestones { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .milestones li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; } .milestones svg { color: var(--warn); } .milestones li > span:first-of-type { flex: 1; }
.notes-sent { list-style: none; padding: 0; margin: 10px 0 0; } .notes-sent li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.inline-form label.grow { flex: 1; min-width: 200px; }
body.kid .cheer { border-width: 2px; border-radius: 22px; font-size: 18px; }

/* AI verification thread */
.thread { margin: 8px 0 14px; } .thread > summary { cursor: pointer; font-weight: 600; }
.turn { border-inline-start: 3px solid var(--line); padding: 8px 14px; margin: 10px 0; } .turn.reviewer { border-color: var(--warn); } .turn.writer { border-color: var(--accent); } .turn.checks { border-color: var(--ok); }
.turn ul { margin: 6px 0; padding-inline-start: 18px; } .turn li { margin: 4px 0; font-size: 15px; }
pre.diff { font-size: 13px; line-height: 1.45; white-space: pre-wrap; background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 12px; max-height: 480px; overflow: auto; }

/* readings: figures, worked steps, tables (reading_render.py) */
.rfig { margin: 18px 0 22px; padding: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; max-width: 640px; }
.rfig svg { display: block; width: 100%; height: auto; color: var(--fg); }
.rfig .shape { fill: var(--panel); fill-opacity: .55; stroke: currentColor; stroke-width: 3; stroke-linejoin: round; }
.rfig .ink { fill: none; stroke: currentColor; stroke-width: 2.6; }
.rfig .dash { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 10 8; }
.rfig .acc { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.rfig .dot { fill: currentColor; }
.rfig .curve { fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; }
.rfig .curve.c2 { stroke: currentColor; }
.rfig .curve.dashed { stroke-dasharray: 14 7; }
.rfig .grid { stroke: var(--line); stroke-width: 1; }
.rfig .axis { stroke: var(--line2); stroke-width: 2; }
.rfig .bar { fill: var(--accent); fill-opacity: .8; }
.rfig text { font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; fill: currentColor; }
.rfig .lbl { font-size: 24px; font-weight: 700; }
.rfig .lbl.small { font-size: 18px; }
.rfig .name { font-size: 24px; font-weight: 700; fill: var(--accent); font-family: var(--display); }
.rfig .acc-t { fill: var(--accent); }
.rfig .unk { fill: var(--bad); }
.rfig .tick { font-size: 16px; fill: var(--muted); }
.rfig figcaption { margin-top: 8px; font-size: 15px; color: var(--muted); text-align: center; }
.rfig-error { padding: 10px 14px; border: 1px solid var(--bad); background: var(--bad-bg); color: var(--bad-fg); border-radius: 10px; }
.rsteps { list-style: none; counter-reset: st; margin: 14px 0 20px; padding: 14px 18px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; }
.rsteps li { counter-increment: st; display: grid; grid-template-columns: 26px minmax(0, auto) minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--line); margin: 0; }
.rsteps li:last-child { border-bottom: 0; }
.rsteps li::before { content: counter(st); font-family: var(--display); font-size: 13px; color: var(--muted); }
.rsteps .m { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 17px; white-space: nowrap; }
.rsteps .m.boxed { border: 2px solid var(--accent); border-radius: 8px; padding: 2px 8px; }
.rsteps .t { font-style: italic; }
.rsteps .n { color: var(--muted); font-size: 15.5px; }
.rsteps .t + .n:empty { display: none; }
.rtable-wrap { overflow-x: auto; margin: 12px 0 18px; }
.rtable { border-collapse: collapse; font-size: 16px; min-width: 200px; }
.rtable th, .rtable td { border: 1px solid var(--line); padding: 7px 14px; text-align: center; }
.rtable th { background: var(--panel); font-family: var(--display); font-weight: 600; }
@media (max-width: 560px) {
  .rsteps li { grid-template-columns: 22px minmax(0, 1fr); }
  .rsteps .m { white-space: normal; }
  .rsteps .n { grid-column: 2; }
  .rfig .lbl, .rfig .name { font-size: 28px; }
}
.reading-preview { margin: 10px 0 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.reading-preview summary { cursor: pointer; font-family: var(--display); font-weight: 600; }

/* readings: "Show answer" boxes and reminder popups (reading_render.py) */
.reveal { margin: 12px 0 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); }
.reveal summary { cursor: pointer; list-style: none; padding: 12px 16px; font-family: var(--display); font-weight: 600; color: var(--accent); min-height: 44px; display: flex; align-items: center; gap: 8px; }
.reveal summary::-webkit-details-marker { display: none; }
.reveal summary::before { content: "\25B8"; font-size: 1.1em; width: 1em; }
.reveal[open] summary::before { content: "\25BE"; }
.reveal[open] summary { border-bottom: 1px dashed var(--line); }
.reveal-body { padding: 6px 18px 12px; }
.reveal-body .rsteps, .reveal-body .rfig { margin-top: 10px; }
.ref { position: relative; }
.ref-t { font: inherit; line-height: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 2px dotted currentColor; }
.ref.tip .ref-t { color: inherit; border-bottom-color: var(--line2); }
.ref-t:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ref-pop { display: none; position: absolute; inset-inline-start: 0; top: 100%; margin-top: 8px; z-index: 40; width: max-content; max-width: min(340px, 78vw);
  background: var(--bg2); color: var(--fg); border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; font-size: 15.5px; line-height: 1.5;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18); font-weight: 400; }
.ref-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.ref.open .ref-pop { display: block; }
@media (hover: hover) { .ref:hover .ref-pop { display: block; } }
.ref-from { display: block; font-size: 12.5px; letter-spacing: .3px; color: var(--muted); margin-bottom: 4px; font-family: var(--display); }
.ref-brief { display: block; }
.ref-go { display: inline-block; margin-top: 8px; font-family: var(--display); font-weight: 600; color: var(--accent); }
.ref-go::after { content: " \2192"; }
@media (max-width: 560px) {
  .ref-pop { position: fixed; inset-inline-start: 16px; inset-inline-end: 16px; bottom: 16px; top: auto; margin: 0; width: auto; max-width: none; }
  .ref-pop::before { display: none; }
}
.reveal .when-open, .reveal[open] .when-shut { display: none; }
.reveal[open] .when-open { display: inline; }
.rsteps .t.boxed { font-style: normal; font-weight: 700; border: 2px solid var(--accent); border-radius: 8px; padding: 2px 8px; justify-self: start; }

/* home page for visitors (inc/home_landing.php): the platform story in pictures. Tokens only, so dark mode follows. */
.brand .logo-mark { width: 34px; height: 34px; flex: none; border-radius: 9px; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 56px 0 48px; }
.home-hero h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.06; letter-spacing: -.02em; margin: 6px 0 16px; }
.home-hero h1 span { color: var(--accent); }
.home-hero .lede { max-width: 600px; }
.hh-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hh-cta .btn svg, .home-create .btn svg { margin-inline-end: 8px; }
.hh-points { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: 15px; }
.hh-points li { display: flex; align-items: center; gap: 6px; }
.hh-points svg { color: var(--ok); }

/* window chrome shared by the mockups */
.win-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); font-family: var(--display); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); opacity: .7; }
.win-bar span { margin-inline-start: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* hero collage: a real video frame, the build card, the verified chip */
.hv { position: relative; padding: 0 0 70px 40px; }
.hv-video { position: relative; margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #0C1322; box-shadow: 0 24px 60px rgba(20, 33, 61, .22); transform: rotate(1deg); }
.hv-video img { display: block; width: 100%; height: auto; }
.hv-play { position: absolute; left: 76%; top: 38%; transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); opacity: .92; }
.hv-play.small { width: 40px; height: 40px; }
.hv-card { position: absolute; inset-inline-start: 0; bottom: 0; width: 64%; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: 0 18px 40px rgba(20, 33, 61, .18); }
.hv-chip { position: absolute; inset-inline-end: -14px; bottom: 26px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line);
  font-family: var(--display); font-weight: 600; font-size: 14px; box-shadow: 0 10px 26px rgba(20, 33, 61, .16); }
.hv-chip svg { color: var(--ok); }
.bc-idea { border: 2px dashed var(--line2); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; }
.bc-label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.bc-idea p { margin: 4px 0 0; font-family: var(--display); font-weight: 600; font-size: 16px; }
.bc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bc-steps li { display: flex; align-items: center; gap: 9px; padding: 6px 6px; border-radius: 9px; font-size: 14px; color: var(--muted); opacity: 0; animation: bc-in .5s ease forwards; }
.bc-steps li b { color: var(--fg); font-family: var(--display); font-weight: 600; margin-inline-end: 5px; }
.bc-steps li.done svg { color: var(--ok); flex: none; }
.bc-steps li.now { background: var(--panel); }
.bc-steps li:nth-child(2) { animation-delay: .4s; } .bc-steps li:nth-child(3) { animation-delay: .8s; }
.bc-spin { width: 17px; height: 17px; flex: none; border-radius: 50%; border: 2.5px solid var(--line2); border-top-color: var(--accent); animation: bc-spin 1s linear infinite; }
@keyframes bc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bc-spin { to { transform: rotate(360deg); } }

/* three ways */
.home-ways, .home-how, .home-lesson { margin: 48px 0; }
.home-ways h2, .home-how h2, .home-lesson h2, .catalog-h { font-size: 30px; margin-bottom: 20px; }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.way { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.way-art { position: relative; height: 128px; display: grid; place-items: center; color: #fff; overflow: hidden; }
.way-art svg { position: relative; z-index: 1; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25)); }
.way-art.a1 { background: linear-gradient(135deg, #1D4ED8, #3B82F6); }
.way-art.a2 { background: linear-gradient(135deg, #B45309, #F59E0B); }
.way-art.a3 { background: linear-gradient(135deg, #6D28D9, #1D4ED8); }
.way-art .dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .22) 1.5px, transparent 1.6px); background-size: 16px 16px; }
.way-art::after { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, .12); right: -50px; bottom: -80px; }
.way-body { position: relative; padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.way-body .tag { position: absolute; top: -13px; inset-inline-end: 18px; background: var(--bg2); border: 1px solid var(--line); }
.way h3 { margin: 0; font-size: 20px; }
.way p { margin: 0; color: var(--muted); line-height: 1.6; }
.way .more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 600; }

/* feature rows: text and a picture, alternating sides */
.feat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin: 72px 0; }
.feat.rev .feat-text { order: 2; }
.feat h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; margin: 4px 0 14px; letter-spacing: -.01em; }
.feat-text > p { color: var(--muted); font-size: 17.5px; line-height: 1.65; }
.feat-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.feat-list li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.feat-list li .tag { margin-inline-start: 4px; white-space: nowrap; }
.feat-list svg { color: var(--accent); flex: none; margin-top: 3px; }
.feat-steps { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.feat-steps li { display: flex; align-items: center; gap: 12px; }
.feat-steps span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-family: var(--display); font-weight: 700; flex: none; }
.feat-art { position: relative; padding: 26px; border-radius: 24px; background: radial-gradient(circle at 20% 15%, var(--panel), transparent 60%), var(--bg); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mk { position: relative; width: 100%; max-width: 440px; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 36px rgba(20, 33, 61, .12); }
.mk .ex { position: absolute; top: -11px; inset-inline-end: 14px; font-size: 11.5px; letter-spacing: .5px; padding: 2px 9px; border-radius: 999px; background: var(--panel); color: var(--muted); border: 1px solid var(--line); }
.mk-arrow { width: 44px; height: 52px; color: var(--accent); }

.profile { padding: 18px; }
.pf-head { display: flex; align-items: center; gap: 12px; }
.pf-av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #F59E0B, #B45309); color: #fff; font-family: var(--display); font-weight: 700; font-size: 20px; }
.pf-head b { font-family: var(--display); display: block; } .pf-head small { color: var(--muted); }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pf-chips span { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--panel); }
.course { padding: 16px 18px; }
.mk-title { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; margin-bottom: 8px; color: var(--accent); }
.course ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.course li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg); font-size: 14.5px; }
.course li > span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--panel); font-size: 12.5px; font-weight: 700; flex: none; }
.course li > svg { margin-inline-start: auto; color: var(--accent); flex: none; }
.course li.known { color: var(--muted); }
.course li.known s { text-decoration-color: var(--line2); }
.course li.known em { margin-inline-start: auto; font-style: normal; font-size: 12px; text-decoration: none; color: var(--ok); white-space: nowrap; }

.studio { overflow: hidden; }
.st-body { padding: 16px 18px 18px; }
.st-body label { font-family: var(--display); font-size: 13px; color: var(--muted); }
.st-input { margin-top: 6px; padding: 10px 12px; border: 2px solid var(--accent); border-radius: 10px; font-size: 14.5px; background: var(--bg); }
.caret { display: inline-block; width: 2px; height: 1.1em; background: var(--accent); vertical-align: -3px; margin-inline-start: 2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.st-btn { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 12px; padding: 7px 14px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-family: var(--display); font-weight: 600; font-size: 14px; }
.st-tree { display: grid; gap: 4px; border-inline-start: 2px solid var(--line); padding-inline-start: 10px; }
.st-tree div { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.st-tree b { font-family: var(--display); white-space: nowrap; } .st-tree small { margin-inline-start: auto; color: var(--muted); white-space: nowrap; }
.st-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.st-chips span { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); }
.st-chips .ok { color: var(--ok-fg); background: var(--ok-bg); border-color: transparent; }
.st-chips .ok::before { content: "\2713 "; }
.st-chips .run { color: var(--accent); }
.st-chips .run::before { content: "\25CB "; }

.review { padding: 18px; display: grid; gap: 10px; }
.rv-msg { max-width: 88%; padding: 10px 12px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.rv-msg.w { background: var(--panel); border-end-start-radius: 4px; }
.rv-msg.r { justify-self: end; background: var(--bg); border: 1px solid var(--line); border-end-end-radius: 4px; }
.rv-who { display: flex; align-items: center; gap: 5px; font-family: var(--display); font-weight: 600; font-size: 12px; color: var(--accent); margin-bottom: 3px; }
.rv-code { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 8px 12px; border-radius: 10px; background: var(--ok-bg); color: var(--ok-fg); }
.rv-you { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed var(--line); }
.rv-you .rv-who { width: 100%; margin: 0; color: var(--fg); }
.rv-you .btn { pointer-events: none; min-height: 34px; }
.stamp { position: absolute; inset-inline-end: 4px; bottom: -4px; transform: rotate(-12deg); border: 3px solid var(--ok); color: var(--ok); font-family: var(--display); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 15px; padding: 3px 10px; border-radius: 8px; opacity: .9; }

.listing .ls-thumb { border-radius: 16px 16px 0 0; overflow: hidden; }
.ls-thumb img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: 60% 20%; }
.ls-body { padding: 14px 16px 16px; }
.ls-body b { font-family: var(--display); font-size: 17px; display: block; } .ls-body small { color: var(--muted); }
.ls-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.price { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--accent); }
.share { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--panel); }
.earn { max-width: 300px; align-self: flex-end; margin-top: -30px; padding: 14px 16px; }
.er-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.er-head span { font-size: 13px; color: var(--muted); } .er-head b { font-family: var(--display); font-size: 22px; color: var(--ok); } .er-head small { color: var(--muted); margin-inline-start: auto; }
.er-chart { width: 100%; height: 70px; margin-top: 6px; }
.er-chart rect { fill: var(--accent); opacity: .8; }

/* idea to finished course */
.how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.how li { position: relative; padding: 20px 16px; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; }
.how li:not(:last-child)::after { content: ""; position: absolute; top: 40px; inset-inline-end: -13px; width: 12px; height: 2px; background: var(--accent); opacity: .5; }
.how-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--accent); color: var(--on-accent); }
.how h3 { margin: 12px 0 6px; font-size: 17px; }
.how p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.55; }

/* every lesson */
.lesson-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lesson-path > div { position: relative; padding: 0 0 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg2); overflow: hidden; }
.lesson-path > div > h3, .lesson-path > div > p { padding: 0 18px; }
.lp-art { position: relative; height: 140px; display: grid; place-items: center; background: var(--bg); border-bottom: 1px solid var(--line); overflow: hidden; }
.lp-art.read svg { width: 78%; height: 100%; color: var(--fg); }
.lp-art.read .lbl { font-family: 'Patrick Hand', 'Atkinson Hyperlegible', sans-serif; font-size: 17px; fill: var(--accent); }
.lp-art.read .acc { stroke: var(--accent); }
.lp-art.watch img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.lp-art.code { place-items: start; justify-items: stretch; background: #0F1729; color: #E8EDF8; padding: 12px 14px; }
.lp-art.code pre { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.55; background: none; }
.lp-art.code .k { color: #8AB4FF; }
.lp-art.code .run { position: absolute; inset-inline-end: 12px; top: 10px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 9px; border-radius: 7px; background: #1D4ED8; color: #fff; }
.lp-art.code .outp { position: absolute; inset-inline-end: 14px; bottom: 12px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: #86EFAC; }
.lp-art.quiz { place-items: start; align-content: start; gap: 3px; padding: 10px 16px 0 64px; font-size: 13px; }
.lp-art.quiz b { font-family: var(--display); font-size: 13.5px; margin-bottom: 2px; }
.lp-art.quiz span { display: flex; align-items: center; gap: 6px; width: 100%; padding: 2px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); }
.lp-art.quiz .right { border-color: var(--ok); background: var(--ok-bg); color: var(--ok-fg); }
.lp-ic { position: absolute; inset-inline-start: 16px; top: 118px; z-index: 1; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 16px rgba(29, 78, 216, .3); }
.lesson-path h3 { margin: 30px 0 4px; font-size: 18px; }
.lesson-path p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

.home-create { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 48px 0; padding: 30px 32px; border-radius: 22px;
  background: linear-gradient(135deg, var(--panel), var(--bg2)); border: 2px solid var(--accent); }
.home-create > div { flex: 1 1 320px; }
.hc-mark { border-radius: 18px; flex: none; }
.home-create h2 { margin: 0 0 6px; font-size: 26px; }
.home-create p { margin: 0; color: var(--muted); max-width: 620px; }
.home-create.compact { border-width: 1px; border-color: var(--line); padding: 20px 24px; background: var(--bg2); }
.home-create.compact h2 { font-size: 20px; }

@media (prefers-reduced-motion: reduce) { .bc-steps li { animation: none; opacity: 1; } .bc-spin, .caret { animation: none; } }
@media (max-width: 900px) {
  .home-hero, .feat { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .home-hero { padding-top: 32px; }
  .feat { margin: 48px 0; }
  .feat.rev .feat-text { order: 0; }
  .ways { grid-template-columns: minmax(0, 1fr); }
  .how { grid-template-columns: minmax(0, 1fr); }
  .how li:not(:last-child)::after { display: none; }
  .lesson-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .hv { padding: 0; display: flex; flex-direction: column; align-items: center; }
  .hv-card { position: relative; width: 92%; margin-top: -34px; }
  .hv-chip { position: relative; inset-inline-end: auto; bottom: auto; margin-top: 12px; font-size: 13px; }
  .feat-art { padding: 18px 12px; }
  .lesson-path { grid-template-columns: minmax(0, 1fr); }
  .home-create { padding: 22px 18px; }
  .hh-cta .btn { flex: 1 1 100%; justify-content: center; }
  .earn { margin-top: 0; align-self: stretch; max-width: none; }
}

/* pricing.php and about.php */
.pricing-hero, .about-hero { text-align: center; max-width: 820px; margin: 0 auto; padding: 52px 0 18px; }
.pricing-hero h1, .about-hero h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -.02em; margin: 6px 0 14px; }
.about-hero h1 span { color: var(--accent); }
.pricing-hero .lede, .about-hero .lede { margin: 0 auto; max-width: 680px; }
.plan-switch { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 24px; padding: 5px; border-radius: 999px; background: var(--panel); }
.plan-switch a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--fg); }
.plan-switch a:hover { text-decoration: none; background: var(--bg2); }
.plans-block { margin: 40px 0 16px; scroll-margin-top: 80px; }
.plans-block h2 { font-size: 26px; margin-bottom: 18px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 26px 24px; border-radius: 20px; background: var(--bg2); border: 1px solid var(--line); }
.plan.featured { border: 2px solid var(--accent); box-shadow: 0 18px 40px rgba(29, 78, 216, .14); }
.plan-flag { position: absolute; top: -13px; inset-inline-start: 24px; padding: 3px 12px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: var(--display); font-weight: 600; font-size: 12.5px; }
.plan h3 { margin: 0; font-size: 21px; }
.plan-tag { margin: 4px 0 14px; color: var(--muted); }
.plan-price { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.plan-price b { font-family: var(--display); font-size: 42px; font-weight: 700; letter-spacing: -.02em; }
.plan-price span { color: var(--muted); }
.plan-year { margin: 2px 0 16px; font-size: 14px; color: var(--muted); min-height: 1.4em; }
.plan-cta { justify-content: center; width: 100%; }
.plan ul { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; font-size: 15.5px; }
.plan li svg { color: var(--ok); flex: none; margin-top: 3px; }
.plan li.soon { color: var(--muted); } .plan li.soon svg { color: var(--line2); }
.plan li em { font-style: normal; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--panel); color: var(--muted); white-space: nowrap; }
.pricing-note { display: flex; gap: 10px; align-items: flex-start; max-width: 820px; margin: 28px auto; padding: 14px 18px; border-radius: 14px; background: var(--panel); color: var(--fg); line-height: 1.55; }
.pricing-note svg { color: var(--accent); flex: none; margin-top: 3px; }
.faq { margin: 44px auto; }
.faq h2 { font-size: 26px; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; padding: 14px 0; font-family: var(--display); font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 14px; color: var(--muted); line-height: 1.65; }

.about-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 34px 0 10px; }
.about-numbers div { text-align: center; padding: 20px 12px; border-radius: 18px; background: var(--bg2); border: 1px solid var(--line); }
.about-numbers b { display: block; font-family: var(--display); font-size: 36px; font-weight: 700; color: var(--accent); letter-spacing: -.02em; }
.about-numbers span { color: var(--muted); font-size: 14.5px; }
.about-story { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 44px; align-items: center; margin: 56px 0; }
.about-story h2 { font-size: 30px; margin-top: 0; }
.about-story p { color: var(--muted); font-size: 17px; line-height: 1.7; }
.about-story img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 20px 44px rgba(20, 33, 61, .18); transform: rotate(1deg); }
.about-values h2 { font-size: 30px; }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.values article { padding: 22px; border-radius: 18px; background: var(--bg2); border: 1px solid var(--line); }
.v-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--accent); color: var(--on-accent); }
.values h3 { margin: 14px 0 6px; font-size: 19px; }
.values p { margin: 0; color: var(--muted); line-height: 1.6; }
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; margin: 64px 0 40px; padding: 32px; border-radius: 22px; background: var(--panel); scroll-margin-top: 80px; }
.contact h2 { font-size: 30px; margin-top: 0; }
.contact-text > p { color: var(--muted); line-height: 1.65; }
.contact-form { background: var(--bg2); border-radius: 18px; padding: 22px; border: 1px solid var(--line); }
.contact-form .form { max-width: none; }
.contact-form .flash svg { vertical-align: -3px; }
/* the spam trap: hidden in place (a left: -9999px made right-to-left pages scroll sideways on phones) */
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.foot-links a { font-weight: 600; }
.kids-link { margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: var(--panel); }
.kids-link a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; }
.msg { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; background: var(--bg2); }
.msg.done { opacity: .65; }
.msg header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.msg p { margin: 8px 0; white-space: normal; }
@media (max-width: 900px) {
  .plans, .values { grid-template-columns: minmax(0, 1fr); }
  .about-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-story, .contact { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .contact { padding: 22px 16px; }
}

/* SAT Prep page (sat.php), SAT band on the home page, plan groups on pricing.php */
.center { text-align: center; }
.kicker svg { vertical-align: -3px; margin-inline-end: 2px; }
.sat-hero .feat-art { padding: 22px; }
.dash { padding: 18px; display: grid; gap: 14px; }
.dash-top { display: flex; gap: 18px; align-items: center; }
.gauge { position: relative; width: 170px; flex: none; text-align: center; }
.gauge svg { width: 100%; height: auto; display: block; }
.gauge .g-bg { stroke: var(--panel); } .gauge .g-fg { stroke: var(--accent); }
.gauge b { position: absolute; left: 0; right: 0; top: 44px; font-family: var(--display); font-size: 34px; font-weight: 700; }
.gauge small { display: block; margin-top: -4px; color: var(--muted); font-size: 13px; }
.dash-side { flex: 1; display: grid; gap: 6px; }
.dash-side p { margin: 0; display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 9px; background: var(--bg); font-size: 14px; }
.dash-side span { color: var(--muted); } .dash-side b { font-family: var(--display); } .dash-side .up { color: var(--ok); }
.today { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--panel); }
.today > svg { color: var(--accent); flex: none; }
.today div { flex: 1; } .today b { display: block; font-family: var(--display); font-size: 15px; } .today small { color: var(--muted); }
.today .btn { pointer-events: none; min-height: 32px; }
.dash-skills { display: grid; gap: 7px; }
.dash-skills div { display: grid; grid-template-columns: 110px 1fr 42px; gap: 10px; align-items: center; font-size: 13.5px; }
.dash-skills i { height: 9px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) var(--v), var(--panel) var(--v)); }
.dash-skills b { text-align: end; font-family: var(--display); font-size: 13px; }
.sat-numbers { margin-top: 10px; }
.sat-for { margin: 64px 0 -28px; }
.sat-for h2 { font-size: clamp(26px, 3.2vw, 36px); margin: 4px 0 0; }
.hm { padding: 18px; }
.hm-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; margin: 7px 0; font-size: 14px; }
.hm-row > div { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.hm i, .hm-key i { display: block; height: 22px; border-radius: 6px; }
.hm .h0 { background: var(--panel); } .hm .h1 { background: #F59E0B; opacity: .55; } .hm .h2 { background: var(--accent); opacity: .45; } .hm .h3 { background: var(--ok); opacity: .75; }
.hm-key { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.hm-key span { display: inline-flex; align-items: center; gap: 5px; } .hm-key i { width: 14px; height: 14px; border-radius: 4px; }
.sat-video { transform: rotate(-1deg); width: 100%; max-width: 460px; }
.lesson-chips { display: flex; gap: 8px; margin-top: 6px; }
.lesson-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line); font-family: var(--display); font-weight: 600; font-size: 13.5px; }
.lesson-chips svg { color: var(--ok); }
.qcard { padding: 16px 18px; }
.q-top { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-family: var(--display); }
.q-top span { display: inline-flex; align-items: center; gap: 4px; }
.q-text { margin: 10px 0; font-size: 15.5px; line-height: 1.55; }
.q-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.q-opts span { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; }
.q-opts .right { border-color: var(--ok); background: var(--ok-bg); color: var(--ok-fg); font-weight: 700; }
.q-opts .wrong { border-color: var(--bad); color: var(--bad-fg); background: var(--bad-bg); }
.q-why { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--panel); font-size: 14px; line-height: 1.5; }
.q-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.q-actions span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 12.5px; color: var(--accent); font-family: var(--display); font-weight: 600; }
.mock { overflow: hidden; }
.mock-body { padding: 14px 16px 16px; }
.mock-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.mock-head b { display: inline-flex; align-items: center; gap: 4px; font-family: var(--display); color: var(--fg); }
.mock-head .flag { display: inline-flex; align-items: center; gap: 4px; color: var(--warn); }
.mock-grid { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; font-size: 13.5px; color: var(--muted); }
.mock-grid b { min-width: 90px; padding: 6px 12px; border: 2px solid var(--accent); border-radius: 8px; font-family: 'JetBrains Mono', monospace; color: var(--fg); }
.mock-nav { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.mock-nav i { font-style: normal; text-align: center; font-size: 11.5px; padding: 3px 0; border-radius: 6px; border: 1px solid var(--line); }
.mock-nav .done { background: var(--panel); } .mock-nav .now { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.mock-nav .marked { box-shadow: inset 0 -3px 0 var(--warn); }
.sat-parents { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; margin: 72px 0; padding: 36px; border-radius: 26px; background: var(--panel); }
.sat-parents h2 { font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; margin: 4px 0 14px; }
.sat-parents .feat-text > p { color: var(--muted); font-size: 17px; line-height: 1.65; }
.sat-parents .feat-art { background: var(--bg); }
.report { padding: 18px; }
.rp-head { display: flex; align-items: center; gap: 12px; }
.rp-head b { display: block; font-family: var(--display); } .rp-head small { color: var(--muted); }
.rp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 6px; }
.rp-stats div { padding: 10px; border-radius: 12px; background: var(--bg); text-align: center; }
.rp-stats b { display: block; font-family: var(--display); font-size: 20px; } .rp-stats small { color: var(--muted); font-size: 12.5px; }
.rp-chart { width: 100%; height: 80px; }
.rp-chart .line { stroke: var(--accent); } .rp-chart .dot { fill: var(--accent); } .rp-chart .target { stroke: var(--ok); stroke-width: 2; }
.rp-next { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; font-size: 14px; }
.rp-next svg { color: var(--warn); flex: none; margin-top: 2px; }
.how.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sat-domains { margin: 48px 0; }
.sat-domains h2 { font-size: 30px; }
.domains { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.domain { padding: 20px 18px; border-radius: 16px; color: #fff; min-height: 120px; display: flex; flex-direction: column; gap: 6px; }
.domain b { font-family: var(--display); font-size: 18px; } .domain span { opacity: .9; font-size: 14.5px; line-height: 1.5; }
.domain.a1 { background: linear-gradient(135deg, #1D4ED8, #3B82F6); } .domain.a2 { background: linear-gradient(135deg, #6D28D9, #8B5CF6); }
.domain.a3 { background: linear-gradient(135deg, #B45309, #F59E0B); } .domain.a4 { background: linear-gradient(135deg, #047857, #10B981); }
.plans-head { margin-bottom: 18px; }
.plans-head h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.plans-head.center h2 { justify-content: center; }
.plans-head h2 svg { color: var(--accent); }
.pricing-note.launch { background: var(--ok-bg); color: var(--ok-fg); }
.pricing-note.launch svg { color: var(--ok); }
.exam-notice { text-align: center; max-width: 820px; margin: 10px auto 30px; }
.sat-band { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: center; margin: 8px 0 40px; padding: 24px; border-radius: 22px;
  background: linear-gradient(135deg, #0C1322, #1639A8); color: #E8EDF8; }
.sat-band img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 16px 36px rgba(0, 0, 0, .35); }
.sat-band .kicker { color: #FDE68A; }
.sat-band h2 { color: #fff; font-size: clamp(24px, 3vw, 32px); margin: 4px 0 10px; }
.sat-band p { color: #C9D6F2; line-height: 1.6; }
.sb-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.sat-band .btn.primary, body.light .sat-band .btn.primary { background: #fff; color: #1D4ED8; border-color: #fff; }
.sat-band .btn svg { margin-inline-end: 6px; }
.sat-band .tag.ok { background: rgba(74, 222, 128, .15); color: #86EFAC; }
@media (max-width: 900px) {
  .sat-parents, .sat-band { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 22px 16px; }
  .how.four, .domains { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .how.four, .domains { grid-template-columns: minmax(0, 1fr); }
  .dash-top { flex-direction: column; }
  .q-opts { grid-template-columns: 1fr; }
  .hm-row { grid-template-columns: 1fr; gap: 4px; }
  .dash-skills div { grid-template-columns: 90px 1fr 38px; }
}
.paid-box { border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px 6px; margin: 12px 0; }
.paid-box legend { font-family: var(--display); font-weight: 600; padding: 0 6px; }
.free-tag { margin-inline-start: 8px; letter-spacing: 0; text-transform: none; font-size: 12.5px; vertical-align: 2px; }
/* Studio: reading review */
.jump { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -4px 0 16px; font-family: var(--display); font-weight: 600; font-size: 14.5px; }
.rr-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.rr-bar form.inline { margin: 0; }
.edit-text { margin: 10px 0 18px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; }
.edit-text summary { cursor: pointer; font-family: var(--display); font-weight: 600; padding: 6px 0; }
.rr-card { margin: 22px 0; padding: 18px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg2); scroll-margin-top: 80px; }
.rr-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 6px; }
.rr-head h2 { margin: 4px 0 0; font-size: 22px; }
.rr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rr-approve { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.readings-review .reading-body { max-width: none; }
.history .old-review { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 10px; }

/* Studio lesson page: tabs, the Overview steps, the video script read as slides, jobs */
.narrow.studio-lesson { max-width: 1080px; }
.studio-lesson .lesson-links { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 8px; }
.how-made { border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin: 0 0 16px; background: var(--bg2); }
.how-made .hm-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--display); font-weight: 600; }
.how-made .hm-flow > span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--panel); }
.how-made .hm-flow .hm-src { background: var(--accent); color: var(--on-accent); }
.how-made .hm-flow .hm-arrow { background: none; padding: 0; color: var(--muted); }
.how-made p:last-child { margin: 0; }
.pl-steps { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--bg2); }
.pl-steps > li { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 8px 16px; align-items: start; padding: 12px 16px; border-top: 1px solid var(--line); }
.pl-steps > li:first-child { border-top: 0; }
.pl-head { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-family: var(--display); }
.pl-head small { flex-basis: 100%; padding-inline-start: 32px; color: var(--muted); font-family: inherit; font-weight: 400; font-size: 13px; }
.pl-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; }
.pl-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pl-act form.inline { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.pl-more { flex-basis: 100%; }
.pl-more > summary { cursor: pointer; font-weight: 600; color: var(--accent); font-size: 14.5px; }
.pl-more .form { margin-top: 8px; display: grid; gap: 8px; max-width: 640px; }
.pl-jobs { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pl-jobs > li { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--bg2); }
.pl-job-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.pl-job-head form.inline { margin: 0 0 0 auto; }
.pl-jobs p { margin: 6px 0 0; } .pl-jobs .bad { color: var(--bad); }
.pl-jobs .joblog { max-height: 300px; overflow: auto; font-size: 12px; white-space: pre-wrap; }
.slide-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 12px; }
.slide-card { display: grid; grid-template-columns: 3fr 2fr; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg2); }
.slide-card .sc-screen { padding: 12px 16px; }
.slide-card .sc-screen h3 { margin: 2px 0 6px; font-size: 18px; }
.slide-card .sc-screen ul { margin: 0 0 6px; padding-inline-start: 20px; }
.slide-card .sc-voice { padding: 12px 16px; background: var(--panel); border-inline-start: 1px solid var(--line); }
.slide-card .sc-voice p:last-child { margin: 0; }
.sc-kicker { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.sc-block { font-size: 13px; white-space: pre-wrap; margin: 4px 0 8px; max-height: 260px; overflow: auto; }
.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.stat-row .stat { display: flex; flex-direction: column; min-width: 120px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg2); color: var(--muted); text-decoration: none; font-size: 13px; }
.stat-row .stat b { font-family: 'JetBrains Mono', monospace; font-size: 26px; color: var(--fg); }
.stat-row .stat.bad { border-color: var(--bad); } .stat-row .stat.bad b { color: var(--bad); }
.item-card .qn { display: inline-grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: var(--panel); font-weight: 700; }
.item-card table.pairs td { padding: 2px 10px 2px 0; vertical-align: top; }
.draft-note { background: var(--mid-bg); color: var(--mid-fg); }
@media (max-width: 700px) { .pl-steps > li, .slide-card { grid-template-columns: 1fr; } .slide-card .sc-voice { border-inline-start: 0; border-top: 1px solid var(--line); } .pl-head small { padding-inline-start: 0; } }
.slide-card .sc-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; padding: 8px 16px; border-top: 1px solid var(--line); }
.slide-card .sc-tools form.inline { margin: 0; display: inline-flex; gap: 6px; }
.sc-edit > summary, .note-box > summary { list-style: none; } .sc-edit > summary::-webkit-details-marker, .note-box > summary::-webkit-details-marker { display: none; }
.sc-edit[open] { flex-basis: 100%; }
.slide-form { margin-top: 6px; }
.slide-form label, .note-box label { font-weight: 600; }
.slide-form label .muted, .note-box label .muted { font-weight: 400; }
.form.slide-form label textarea, .form.slide-form label input:not([type=radio]):not([type=checkbox]), .form.slide-form label select, .note-box .form label textarea { font-weight: 400; }
.slide-form .slide-pic { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; gap: 10px; }
.q-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 10px; }
.note-box[open] { flex-basis: 100%; }
.note-box .form { margin-top: 4px; max-width: 760px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0 20px; }
.compare figure { margin: 0; }
.compare figcaption { margin-bottom: 6px; }
.compare .frame { aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.compare .frame iframe, .compare .frame video { width: 100%; height: 100%; border: 0; display: block; }
.compare .frame.placeholder { display: grid; place-items: center; background: var(--panel); color: var(--muted); }
@media (max-width: 700px) { .compare, .slide-form .slide-pic { grid-template-columns: 1fr; } }
.accept-box { border: 1px solid var(--accent); border-radius: 14px; padding: 14px 18px; margin: 4px 0 24px; background: var(--bg2); } .accept-box h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 20px; } .accept-box .form label.opt { margin: 8px 0 12px; }

/* F6.6 scene players: the video's exact animations, live (assets/js/scene-player.js) */
.explore { margin: 18px 0; }
.explore h2 { display: flex; align-items: center; gap: 8px; font-size: 20px; }
.explore-item { margin: 0 0 18px; } .explore-item figcaption { font-family: var(--display); font-weight: 600; margin-bottom: 6px; }
.scene-player { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #0f172a; }
.scene-player .sp-view { position: relative; overflow: hidden; width: 100%; }
.scene-player .sp-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.scene-player .sp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg2); border-top: 1px solid var(--line); }
.scene-player .sp-range { flex: 1; min-width: 140px; accent-color: var(--accent); }
.scene-player .sp-steps { display: flex; flex-wrap: wrap; gap: 4px; }
.scene-player .sp-step { min-width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; }
.scene-player .sp-step:hover { border-color: var(--accent); }
.scene-player > .muted { padding: 12px; margin: 0; color: #94a3b8; }
.scene-player.sp-error { background: var(--bg2); }
.rscene { margin: 16px 0; }

/* lesson page: where the video is online (YouTube, Cloudflare R2) */
.online-box h3 { margin: 16px 0 4px; font-size: 16px; }
table.online { width: 100%; border-collapse: collapse; margin: 6px 0 12px; }
table.online th, table.online td { text-align: start; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.online th { white-space: nowrap; width: 1%; padding-inline-end: 16px; }
table.online td.small > * { margin-inline-end: 8px; }
.online-box .playfrom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.online-box .playfrom select { max-width: 100%; }
@media (max-width: 600px) { table.online tr { display: grid; grid-template-columns: auto 1fr; } table.online td.small { grid-column: 1 / -1; border-bottom: 1px solid var(--line); } table.online th, table.online td { border-bottom: 0; } }
.online-box .r2-preview { margin: 0 0 12px; } .online-box .r2-preview summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent); } .online-box .r2-preview .frame { margin-top: 10px; max-width: 640px; }
.online-box .done-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ok); } .online-box .done-line b { color: var(--fg); } .online-box .also { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
/* Studio: the in-video question of a slide (CHECK line) */
.sc-check { grid-column: 1 / -1; border-top: 1px dashed var(--line); padding-top: 10px; }
.sc-check .ck-opts { margin: 4px 0; padding-inline-start: 20px; } .sc-check .ck-opts li.right { color: var(--ok); }
.check-edit { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 12px 0; }
.check-edit legend { padding: 0 6px; font-weight: 600; }
.check-edit .ck-type { display: flex; gap: 12px; flex-wrap: wrap; }
.check-edit .ck-opt { display: flex; align-items: center; gap: 8px; margin: 6px 0; } .check-edit .ck-opt input[type=radio] { accent-color: var(--ok); width: 18px; height: 18px; }
.check-edit .ck-opt input:not([type]) { flex: 1; }
.check-edit:has(input[name=check_type][value=number]:checked) .ck-choice { display: none; }
.check-edit:has(input[name=check_type][value=choice]:checked) .ck-number { display: none; }

/* the interactive lesson video (inc/player.php, assets/js/player.js) */
.vplayer { margin-bottom: 12px; outline: none; }
.vplayer .vp-frame { margin-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.vplayer .vp-frame:fullscreen { border-radius: 0; border: 0; aspect-ratio: auto; width: 100vw; height: 100vh; }
.vp-captions { position: absolute; left: 0; right: 0; bottom: 14%; display: flex; justify-content: center; pointer-events: none; padding: 0 5%; }
.vp-captions span { background: rgba(0, 0, 0, .78); color: #fff; font-size: clamp(14px, 2.3vw, 26px); line-height: 1.35; padding: 3px 10px; border-radius: 6px; text-align: center; }
.vp-captions.empty span { display: none; }
.vp-frame:fullscreen .vp-captions span { font-size: 34px; }
.vp-resume { position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); background: var(--accent); color: var(--on-accent); border: 0; border-radius: 999px; padding: 10px 18px; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.vp-resume span { display: block; font-weight: 400; font-size: 12px; text-decoration: underline; margin-top: 2px; }
.vp-check { position: absolute; inset: 0; background: rgba(6, 12, 26, .72); display: flex; align-items: center; justify-content: center; padding: 12px; overflow: auto; }
.vp-card { background: var(--bg2); color: var(--fg); border: 1px solid var(--line); border-radius: 16px; padding: 16px 20px; width: min(560px, 100%); box-shadow: 0 16px 50px rgba(0, 0, 0, .45); }
.vp-card .vp-kicker { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.vp-card .vp-q { font-family: Lexend, sans-serif; font-size: clamp(16px, 2.2vw, 21px); margin: 6px 0 12px; }
.vp-opts { display: grid; gap: 8px; }
.vp-opts .btn { justify-content: flex-start; text-align: start; white-space: normal; }
.vp-opts .btn.right { border-color: var(--ok); background: var(--ok-bg); color: var(--ok-fg); }
.vp-opts .btn.wrong { border-color: var(--bad); background: var(--bad-bg); color: var(--bad-fg); }
.vp-num { display: flex; gap: 8px; } .vp-num input { flex: 1; min-width: 0; font: inherit; font-size: 18px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--fg); }
.vp-fb { margin: 10px 0 0; min-height: 1em; } .vp-fb.ok { color: var(--ok-fg, var(--ok)); } .vp-fb.bad { color: var(--bad-fg, var(--bad)); }
.vp-fb:empty { display: none; }
.vp-acts { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }
.vp-bar { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--bg2); padding: 8px 10px; }
.vp-chapters { display: flex; gap: 3px; height: 14px; margin-bottom: 6px; }
.vp-ch { position: relative; flex: 1 1 0; min-width: 6px; height: 100%; padding: 0; border: 0; border-radius: 3px; background: var(--panel); cursor: pointer; overflow: visible; }
.vp-ch i { position: absolute; inset: 0; border-radius: 3px; background: var(--accent); width: 0; }
.vp-ch.past i { width: 100%; opacity: .55; } .vp-ch.on i { width: var(--fill, 0%); }
.vp-ch:hover, .vp-ch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vp-qdot { position: absolute; inset-inline-end: -6px; top: -5px; width: 15px; height: 15px; border-radius: 50%; background: var(--warn); color: #1a1300; font-size: 10px; line-height: 15px; text-align: center; font-weight: 800; z-index: 1; }
.vp-tools { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.vp-tools .vp-now { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-tools .btn[aria-pressed="true"], .vp-tools .btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.vp-speed { display: inline-flex; align-items: center; gap: 4px; } .vp-speed select { font: inherit; background: var(--field); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px; }
.vp-transcript { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); margin-top: -1px; }
.vp-transcript ol { list-style: none; margin: 0; padding: 6px; max-height: 280px; overflow: auto; position: relative; }
.vp-transcript li.vp-trh { font-weight: 700; padding: 8px 8px 2px; color: var(--muted); font-size: 13px; }
.vp-transcript button { display: block; width: 100%; text-align: start; background: none; border: 0; color: var(--fg); font: inherit; padding: 4px 8px; border-radius: 8px; cursor: pointer; }
.vp-transcript button:hover { background: var(--panel); } .vp-transcript button.on { background: var(--panel); box-shadow: inset 3px 0 0 var(--accent); }
.vp-trt { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); margin-inline-end: 6px; }
@media (max-width: 600px) { .vp-tools .btn span { display: none; } .vp-card { padding: 12px 14px; } .vp-check { align-items: flex-end; } }
.slide-card .sc-check { padding: 10px 16px; }
@media (max-width: 700px) {  /* a phone: the frame grows to the question card instead of cutting it */
  .vplayer.asking .vp-frame:not(:fullscreen) { aspect-ratio: auto; min-height: 56.25vw; }
  .vplayer.asking .vp-frame:not(:fullscreen) .vp-check { position: relative; inset: auto; min-height: 56.25vw; }
}
.style-pick { display: flex; flex-direction: column; gap: 4px; max-width: 520px; } .style-pick .style-note { font-weight: 400; line-height: 1.4; }
/* while a question is open the player waits: no jumping on the strip or in the transcript */
.vplayer.asking .vp-chapters, .vplayer.asking .vp-transcript, .vplayer.asking .vp-speed { pointer-events: none; opacity: .45; }
/* the transcript follows the voice: the sentence is shaded, the spoken word underlined */
.vp-transcript span[data-w].now { background: color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 3px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }

/* Reading and writing items (SAT R&W): the passage left, the question right on wide screens, as on the digital SAT */
.rw-item { display: grid; gap: 18px; }
@media (min-width: 900px) { .rw-item { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } .rw-item .passage { position: sticky; top: 12px; max-height: 80vh; overflow: auto; } }
.passage { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; font-size: 17px; line-height: 1.65; color: var(--fg); }
.passage .figure { margin-top: 12px; }
.rw-q .stem { margin-top: 0; font-weight: 600; }
.narrow:has(.rw-item) { max-width: 1180px; }  /* room for the passage and the question side by side */

/* My progress (2026-09-26): numbers, continue, one card per started course */
.progress-home .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.progress-home .kpis > div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.progress-home .kpis span { display: block; font-size: 13px; color: var(--muted); } .progress-home .kpis b { font-family: var(--display); font-size: 22px; }
@media (max-width: 640px) { .progress-home .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.continue-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--panel); color: var(--fg); text-decoration: none; }
.continue-card > span:first-child { display: flex; flex-direction: column; } .continue-card b { font-size: 16px; }
.course-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; }
.course-card header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .course-card header a { font-family: var(--display); font-weight: 600; font-size: 17px; margin-inline-end: auto; }
.course-card > .bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin: 10px 0 8px; } .course-card > .bar i { display: block; height: 100%; background: var(--accent); }
.course-card.complete > .bar i { background: var(--ok); }
.course-card .card-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.course-card .card-details { margin-top: 8px; } .course-card .card-details > summary { cursor: pointer; color: var(--accent); font-size: 14px; }

/* Studio course board: lessons table, filters and action bar (2026-09-26) */
.narrow.studio:has(.ltable) { max-width: 1240px; }
.bfilters { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 10px 0; display: grid; gap: 8px; }
.bf-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .bf-row input[type=search] { flex: 1 1 240px; } .bf-row select { flex: 0 1 320px; }
.bf-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .bf-label { font-size: 12px; color: var(--muted); min-width: 84px; }
.bf { font: inherit; font-size: 13px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--field); color: var(--fg); cursor: pointer; }
.bf.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .bf.zero { opacity: .55; }
.bf-result { font-size: 14px; } .bf-result #bf-count { margin-inline-end: auto; font-weight: 600; }
.ltable { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; }
.lrow { display: grid; grid-template-columns: 30px minmax(200px, 2.4fr) repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--line); font-size: 13px; }
.lrow.lhead { border-top: 0; background: var(--panel); font-size: 12px; color: var(--muted); font-weight: 600; }
.lrow.lgroup { display: block; background: var(--panel); font-weight: 600; } .lrow.lgroup.co { padding-inline-start: 24px; font-weight: 500; }
.lrow .st { font-size: 12px; } .lrow .st.ok, .lrow .st .ok { color: var(--ok); } .lrow .st.warn, .lrow .st .warn { color: var(--warn); } .lrow .st.bad { color: var(--bad); }
.lrow .lname .codes { font-size: 11px; color: var(--muted); } .lrow[hidden] { display: none; }
.abar { position: sticky; bottom: 0; z-index: 5; background: var(--bg); border: 2px solid var(--accent); border-radius: var(--radius); padding: 8px 10px; display: grid; gap: 8px; }
.abar-sel { font-size: 14px; } .abar-sel .chips { display: inline; }
.abar-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.atab { font: inherit; font-size: 13px; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--field); color: var(--fg); cursor: pointer; }
.atab small { color: var(--muted); margin-inline-start: 4px; } .atab.primary { border-color: var(--accent); } .atab.idle { opacity: .6; }
.atab.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .atab.active small { color: var(--on-accent); }
.apanels .apanel { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); padding: 12px; margin-top: -2px; }
.render-panel fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; margin: 0 0 8px; } .render-panel legend { font-weight: 600; font-size: 13px; padding: 0 4px; }
@media (max-width: 760px) { .lrow.lhead { display: none; } .lrow.le { grid-template-columns: 30px 1fr; } .lrow.le .st { grid-column: 2; display: inline-block; } .lrow.le .st::before { content: attr(data-col) ": "; color: var(--muted); } }
/* board fix 2026-09-27: actions above the list, pinned while scrolling; compact rows on phones */
.abar { position: sticky; top: 0; bottom: auto; margin-bottom: 0; }
.apanels { margin-bottom: 12px; } .btn.tiny { font-size: 11px; padding: 1px 6px; margin-inline-start: 4px; }
@media (max-width: 760px) { .lrow.le { display: flex; flex-wrap: wrap; gap: 4px 10px; } .lrow.le .lname { flex: 1 1 calc(100% - 40px); } .lrow.le .st { font-size: 11px; } }

/* Studio status page (2026-09-27) */
.status-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.status-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 8px 0; list-style: none; }
.status-card.now { border: 2px solid var(--accent); } .status-card.held { border-inline-start: 4px solid var(--warn); } .status-card.failed { border-inline-start: 4px solid var(--bad); }
.status-card p { margin: 6px 0 0; } .sc-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .sc-head .tag { margin-inline-start: auto; }
.sc-bar { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; margin: 8px 0 2px; } .sc-bar i { display: block; height: 100%; background: var(--accent); }
.status-queue { padding: 0; margin: 0; }
.status-courses { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.status-courses .scr { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(7, minmax(80px, 1fr)); gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13px; align-items: center; }
.status-courses .scr.head { border-top: 0; background: var(--panel); color: var(--muted); font-weight: 600; font-size: 12px; }
.status-courses .mini { display: block; height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 2px; } .status-courses .mini i { display: block; height: 100%; background: var(--ok); }
@media (max-width: 760px) { .status-courses .scr.head { display: none; } .status-courses .scr { grid-template-columns: 1fr 1fr; } .status-courses .scr > span:first-child { grid-column: 1 / -1; font-weight: 600; } .status-courses .scr > span[data-col]::before { content: attr(data-col) ": "; color: var(--muted); } }

/* Course status panel at the top of a Studio course board (2026-09-27) */
.cstatus { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 12px 0 16px; }
.cs-head { font-size: 17px; } .cs-big { font-family: var(--display); font-size: 30px; font-weight: 700; color: var(--accent); margin-inline-end: 4px; }
.cs-bar { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; margin: 8px 0 4px; } .cs-bar i { display: block; height: 100%; background: var(--ok); }
.cs-now { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; padding: 8px 10px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); }
.cs-now.running { border-color: var(--accent); } .cs-now.held { border-color: var(--warn); } .cs-now .icon, .cs-now svg { flex: none; margin-top: 3px; }
.cs-stages { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.cs-stages li { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.cs-stages li.done { border-color: var(--ok); } .cs-stages li.part { border-color: var(--accent); }
.cs-name { font-weight: 600; } .cs-num { font-family: var(--display); font-size: 20px; } .cs-num small { font-size: 12px; color: var(--muted); font-family: inherit; }
.cs-mini { display: block; height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; } .cs-mini i { display: block; height: 100%; background: var(--accent); } li.done .cs-mini i { background: var(--ok); }
.cs-state { font-size: 12px; } li.done .cs-state { color: var(--ok); }
.cs-next { margin: 6px 0 0; } .cs-warn { margin: 6px 0 0; color: var(--bad); display: flex; gap: 6px; align-items: flex-start; }
@media (max-width: 760px) { .cs-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-now .cs-pause { margin-inline-start: auto; } .cs-paused-lessons { margin: 6px 0; font-size: 14px; color: var(--warn); }
.pause-banner { border-inline-start: 4px solid var(--warn); }

/* Signed-in home: status strip (2026-09-28) */
.me-strip { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 20px 0 8px; display: grid; gap: 12px; }
.ms-top { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: baseline; } .ms-top h1 { margin: 0; font-size: 28px; }
.ms-nums { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; color: var(--muted); } .ms-nums b { color: var(--fg); font-family: var(--display); font-size: 18px; }
.ms-more { margin-inline-start: auto; font-weight: 600; display: inline-flex; gap: 4px; align-items: center; }
.ms-next { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--bg); color: var(--fg); text-decoration: none; }
.ms-next > span:first-child { display: flex; flex-direction: column; } .ms-next small { color: var(--muted); } .ms-next b { font-size: 16px; }
.ms-links { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 640px) { .ms-more { margin-inline-start: 0; } .ms-next { flex-direction: column; align-items: stretch; } }

/* Studio page for non-creators (2026-09-28) */
.si-hero h1 span { color: var(--accent); display: block; }
.si-steps { margin: 40px 0; } .si-steps h2 { margin-top: 4px; }
.si-flow { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.si-flow li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 6px; } .si-flow li b { font-family: var(--display); font-size: 17px; } .si-flow li > span:last-child { color: var(--muted); font-size: 15px; }
.si-art { display: grid; place-items: center; } .si-art > div { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; width: min(100%, 420px); display: grid; gap: 10px; box-shadow: 0 10px 30px color-mix(in srgb, var(--fg) 8%, transparent); }
.si-q p { font-size: 20px; margin: 4px 0; } .si-opt { display: block; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; } .si-opt.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.si-review p, .si-pace p { margin: 0; } .si-pill { display: inline-block; margin-inline-start: 6px; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 14px; }
.si-score b { font-family: var(--display); font-size: 44px; color: var(--accent); line-height: 1; } .si-bar { display: block; height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; } .si-bar i { display: block; height: 100%; background: var(--ok); }
.si-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 56px 0; } .si-numbers > div { text-align: center; padding: 20px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); } .si-numbers b { display: block; font-family: var(--display); font-size: 40px; color: var(--accent); } .si-numbers span { color: var(--muted); }
.si-plans { max-width: 760px; margin: 40px auto; text-align: center; } .si-request { max-width: 640px; margin: 40px auto 72px; background: var(--panel); border: 2px solid var(--accent); border-radius: 16px; padding: 24px; }
@media (max-width: 760px) { .si-flow, .si-numbers { grid-template-columns: minmax(0, 1fr); } }
.admin-wait ul { margin: 6px 0 0; padding-inline-start: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; } .creator-requests { margin: 12px 0 20px; }

/* Admin: users list and user page (2026-09-28) */
.users-admin .kpis, .user-admin .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; }
.users-admin .kpis > a, .user-admin .kpis > div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; color: var(--fg); text-decoration: none; display: flex; flex-direction: column; }
.users-admin .kpis span, .user-admin .kpis span { font-size: 13px; color: var(--muted); } .users-admin .kpis b, .user-admin .kpis b { font-family: var(--display); font-size: 22px; } .user-admin .kpis small { color: var(--muted); font-size: 12px; }
.ufilters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin: 12px 0 6px; }
.ufilters input[type=search] { flex: 1 1 220px; } .ufilters select { max-width: 220px; }
.utable { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.urow { display: grid; grid-template-columns: minmax(200px, 2.4fr) repeat(8, minmax(70px, 1fr)); gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line); align-items: center; font-size: 14px; color: var(--fg); text-decoration: none; }
a.urow:hover { background: var(--panel); } .urow.uhead { border-top: 0; background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 600; } .urow .tag { margin: 2px 4px 0 0; font-size: 11px; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.uhead-card { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin: 10px 0; }
.uh-id { display: flex; gap: 14px; align-items: flex-start; } .uh-id h1 { margin: 0; font-size: 26px; } .uh-id p { margin: 4px 0; } .u-avatar.big { width: 56px; height: 56px; font-size: 24px; }
.uh-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px 18px; margin: 0; flex: 1 1 360px; } .uh-facts dt { font-size: 12px; color: var(--muted); } .uh-facts dd { margin: 0; font-weight: 600; }
.uchart { width: 100%; height: auto; max-height: 180px; } .uchart rect { fill: var(--accent); } .uchart line { stroke: var(--line); } .uchart text { font-size: 9px; fill: var(--muted); }
.ubehave li { margin: 4px 0; } .manage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; } .manage-grid h3 { margin: 0 0 6px; font-size: 15px; }
@media (max-width: 760px) { .urow.uhead { display: none; } .urow { grid-template-columns: 1fr 1fr; } .urow > span:first-child { grid-column: 1 / -1; } .urow > span[data-col]::before { content: attr(data-col) ": "; color: var(--muted); font-size: 12px; } }
.user-admin .tablist { flex-wrap: wrap; overflow: visible; } .ai-card h2 { margin-top: 0; font-size: 18px; } .ai-ways { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; } .ai-ways li { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); } .ai-ways li.on { border-color: var(--ok); } .ai-ways form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-inline-start: 6px; }
/* Sign in with Google / Microsoft (inc/signin.php): full-width neutral buttons, the providers' marks in their own colours */
.oauth-row { display: grid; gap: 10px; margin: 8px 0 4px; }
.btn.oauth-btn { justify-content: center; gap: 12px; background: var(--field); border-color: var(--line2); color: var(--fg); }
.btn.oauth-btn svg { margin-right: 0; flex: none; }
.oauth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; margin: 14px 0 6px; }
.oauth-or::before, .oauth-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.oauth-as { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.oauth-as svg { flex: none; margin-top: 2px; }
.signin-list { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 8px; }
.signin-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.signin-list li > span { flex: 1 1 200px; }

/* quick video wizard (studio/studio_quick.php): one step per screen, cards to pick from, mobile first; tokens only.
   Board style swatches get their colours as --sw / --dot on the element (they picture the board, not the theme). */
.quick { max-width: 780px; }
.quick h1 svg { vertical-align: -4px; color: var(--accent); }
.qk-steps { list-style: none; display: flex; gap: 4px; margin: 16px 0 18px; padding: 0; }
.qk-steps li { flex: 1 1 0; min-width: 0; }
.qk-steps a, .qk-steps span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border-radius: 12px; color: var(--muted); text-decoration: none; position: relative; }
.qk-steps a:hover { background: var(--panel); }
.qk-steps i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--line2); font-family: var(--display); font-weight: 700; font-size: 14px; }
.qk-steps b { font-family: var(--display); font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.qk-steps em { position: absolute; top: 2px; right: calc(50% - 26px); color: var(--ok); line-height: 0; }
.qk-steps li.done i { background: var(--ok); border-color: var(--ok); color: var(--bg2); }
.qk-steps li.now i { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.qk-steps li.now b { color: var(--fg); }
.qk-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; margin: 0 0 16px; }
.qk-card h2 { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.qk-card h3 { margin: 18px 0 8px; font-size: 17px; }
.qk-tag { font-size: 12.5px; font-weight: 600; color: var(--ok-fg); background: var(--ok-bg); border-radius: 999px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 4px; }
.qk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.qk-choice { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 2px solid var(--line); border-radius: 16px; cursor: pointer; background: var(--field); min-width: 0; position: relative; }
.qk-choice:hover { border-color: var(--line2); }
.qk-choice:has(input:checked) { border-color: var(--accent); background: var(--panel); }
.qk-choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.qk-choice > input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.qk-choice b { font-family: var(--display); font-weight: 600; }
.qk-choice small { color: var(--muted); font-size: 13.5px; }
.qk-ic { color: var(--accent); }
.qk-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; align-items: center; margin: 20px 0 0; }
.qk-nav .btn.ghost:first-child { margin-right: auto; }
.qk-field { display: block; border: 0; padding: 0; margin: 16px 0; font-weight: 500; min-width: 0; }
.qk-field legend { font-family: var(--display); font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; padding: 0; }
.qk-field > input, .qk-field > textarea, .qk-field select, .qk-search, .qk-item input, .qk-item textarea, .qk-host input, .qk-host select, .qk-own-fields input, .qk-own-fields textarea {
  display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 15px; background: var(--field); color: var(--fg); border: 1px solid var(--line2); border-radius: 10px; padding: 9px 12px; box-sizing: border-box; }
.qk-field select { width: auto; display: inline-block; }
.qk-langs { max-height: 250px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; padding: 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px; }
.qk-lang { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-weight: 400; min-width: 0; }
.qk-lang:hover { background: var(--panel); }
.qk-lang:has(input:checked) { background: var(--panel); outline: 2px solid var(--accent); }
.qk-lang input { accent-color: var(--accent); }
.qk-lang .flag { font-size: 20px; line-height: 1; }
.qk-lang .muted { margin-left: auto; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qk-lang[hidden] { display: none; }
.qk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.qk-chip { position: relative; }
.qk-chip input { position: absolute; opacity: 0; }
.qk-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border: 2px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 600; font-family: var(--display); font-size: 14.5px; }
.qk-chip:has(input:checked) span { border-color: var(--accent); background: var(--panel); color: var(--fg); }
.qk-chip:has(input:focus-visible) span { outline: 2px solid var(--accent); outline-offset: 2px; }
.qk-two { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.qk-dirs { display: grid; gap: 10px; margin-top: 12px; }
.qk-dir span { color: var(--fg); font-size: 15px; line-height: 1.5; }
.qk-own .qk-own-fields { display: none; }
.qk-own:has(input:checked) .qk-own-fields { display: block; }
.qk-hosts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.qk-host { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin: 0; min-width: 0; }
.qk-host legend { font-family: var(--display); font-weight: 600; padding: 0 4px; display: flex; gap: 6px; align-items: center; }
.qk-host label { display: block; margin: 6px 0; font-size: 14px; }
.qk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.qk-item { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: var(--field); }
.qk-item.dragging { opacity: .5; border-style: dashed; border-color: var(--accent); }
.qk-grip { cursor: grab; color: var(--muted); padding-top: 8px; flex: none; }
.qk-item-body { flex: 1; min-width: 0; display: grid; gap: 6px; }
.qk-item-body input, .qk-item-body textarea { margin-top: 0; }
.qk-item-body label { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.qk-item-body label input, .qk-item-body label textarea { margin-top: 4px; color: var(--fg); font-weight: 400; } .qk-item-body label .small { font-weight: 400; }
.qk-item-tools { display: flex; flex-direction: column; gap: 2px; flex: none; }
.qk-item-tools .btn.small { min-height: 34px; padding: 4px 10px; }
.qk-item-tools .btn svg { margin: 0; }
.qk-scene-title { margin: 0; font-family: var(--display); font-weight: 600; }
.qk-num { color: var(--accent); }
.qk-board-pre pre { margin: 4px 0 0; max-height: 180px; overflow: auto; font-size: 13px; background: var(--panel); border-radius: 10px; padding: 8px 10px; white-space: pre-wrap; }
.qk-swatch { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px; height: 84px; border-radius: 12px; padding: 10px; background: var(--sw); border: 1px solid var(--line); margin-bottom: 6px; box-sizing: border-box; position: relative; overflow: hidden; }
.qk-swatch i { width: 16px; height: 16px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sw) 70%, transparent); }
.qk-stroke { position: absolute; top: 10px; left: 12px; color: var(--dot); font-family: 'Segoe Print', 'Comic Sans MS', cursive; font-size: 19px; }
.qk-vhead { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.qk-char { color: var(--accent2); font-weight: 600; text-transform: capitalize; }
.qk-play { min-height: 34px; padding: 4px 10px; }
.qk-play svg { margin: 0; }
.qk-pace label.pacing select { margin: 0 12px 8px 4px; }
.qk-wait { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 16px; background: var(--panel); margin: 6px 0 12px; }
.qk-wait p { margin: 2px 0 0; }
.qk-wait-body { flex: 1; min-width: 0; }
.qk-lab { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.qk-lab svg { color: var(--accent); flex: none; }
.qk-say, .qk-show { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
.qk-say .qk-lab, .qk-show .qk-lab { margin-top: 3px; }
.qk-progress { margin-top: 8px; }
.qk-pline { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.qk-pct { font-family: 'JetBrains Mono', monospace; color: var(--accent); }
.qk-bar { height: 10px; border-radius: 99px; background: var(--line, rgba(0,0,0,.08)); overflow: hidden; margin: 8px 0 10px; }
.qk-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); transition: width .8s ease; }
.qk-stages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .92rem; }
.qk-stages li { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.qk-stages li.done { color: var(--ok); }
.qk-stages li.now { color: var(--fg); font-weight: 600; }
.qk-stages .dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; display: inline-block; }
.qk-stages li.now .dot { background: var(--accent); border-color: var(--accent); }
.qk-offline { color: var(--warn); }
.qk-dots { display: inline-flex; gap: 5px; flex: none; }
.qk-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: qk-dot 1.2s infinite ease-in-out; }
.qk-dots i:nth-child(2) { animation-delay: .15s; } .qk-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes qk-dot { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .qk-dots i { animation: none; opacity: .7; } }
.qk-drafts { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.qk-drafts li { display: flex; min-width: 0; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--bg2); }
.qk-drafts a { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none; color: var(--fg); }
.qk-drafts a b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qk-drafts .btn svg { margin: 0; }
.qk-discard { text-align: right; margin: 8px 0 0; }
@media (max-width: 600px) {
  .qk-card { padding: 16px 14px; border-radius: 16px; }
  .qk-steps b { display: none; }
  .qk-steps em { right: calc(50% - 22px); }
  .qk-two { grid-template-columns: 1fr; }
  .qk-grid { grid-template-columns: 1fr 1fr; }
  .qk-nav .btn.big { flex: 1 1 100%; justify-content: center; }
}
@media (max-width: 380px) { .qk-grid { grid-template-columns: 1fr; } }
.studio-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 18px; } .studio-ways .muted { flex: 1 1 260px; }
.si-quick { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
h2#new-course { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ==== Arabic and other right-to-left languages (inc/i18n.php; PLAN L5b.4, L10.3) ====
   Latin text keeps Lexend and Atkinson Hyperlegible; Arabic letters fall through to IBM Plex Sans Arabic (Google Fonts
   serves its Arabic subset only to pages that show Arabic). The layout mirrors through the logical properties used
   above (margin-inline-start, inset-inline-end, text-align: start); what follows is what they cannot express. */
:root { --display: Lexend, 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif; --arabic: 'IBM Plex Sans Arabic', 'Noto Naskh Arabic', Tahoma, sans-serif; }
body { font-family: 'Atkinson Hyperlegible', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif; }
:lang(ar) { line-height: 1.75; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { line-height: 1.4; }
/* spacing between letters tears Arabic's joined script apart; capitals do not exist in it */
:lang(ar), :lang(ar) * { letter-spacing: 0 !important; }
:lang(ar) .kicker, :lang(ar) .nav-course, :lang(ar) .vp-kicker, :lang(ar) .sc-kicker { text-transform: none; }
.reading-body:lang(ar) { font-size: 19px; line-height: 1.95; }
/* arrows and chevrons point the reading direction's way */
[dir=rtl] .lucide-arrow-right, [dir=rtl] .lucide-arrow-left, [dir=rtl] .lucide-chevron-right, [dir=rtl] .lucide-chevron-left,
[dir=rtl] .lucide-arrow-big-right, [dir=rtl] .lucide-move-right, [dir=rtl] .lucide-log-in, [dir=rtl] .lucide-log-out,
[dir=rtl] .lucide-undo-2, [dir=rtl] .lucide-redo-2 { transform: scaleX(-1); }
[dir=rtl] select { background-position: left 12px center; padding: 8px 12px 8px 32px; }
[dir=rtl] .explain, [dir=rtl] .selfcheck { border-radius: 8px 0 0 8px; }
[dir=rtl] .skip { left: auto; right: -999px; border-radius: 0 0 0 8px; } [dir=rtl] .skip:focus { right: 0; }
/* code, maths and numbers stay left to right inside right-to-left text */
[dir=rtl] pre, [dir=rtl] code, [dir=rtl] .CodeMirror, [dir=rtl] .output, [dir=rtl] .rsteps .m, [dir=rtl] .katex { direction: ltr; unicode-bidi: isolate; }
[dir=rtl] pre, [dir=rtl] .CodeMirror, [dir=rtl] .output { text-align: left; }
[dir=rtl] .vp-trt, [dir=rtl] .vp-now { unicode-bidi: isolate; }
[dir=rtl] .vp-frame, [dir=rtl] .scene-player { direction: ltr; }  /* the video and the scene stage are pictures, not text */
[dir=rtl] .vp-frame .vp-check, [dir=rtl] .vp-resume { direction: rtl; }
.order-btns { direction: ltr; }
/* the language switch in the top bar (owner 2026-10-17): one button with the current language, a list of all of
   them below it. Wide screens: after the menu, badge + name; phones: beside the menu button, badge only. */
.top .brand { margin-inline-end: auto; }
.lang-menu { order: 5; position: relative; flex: none; }
.lang-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px 4px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg2); color: var(--fg); font-family: var(--display); font-size: 14px; font-weight: 600; cursor: pointer; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary:hover, .lang-menu[open] > summary { border-color: var(--accent); }
.lang-menu > summary > svg:first-child, .lang-menu > summary > .lang-badge { color: var(--accent); }
.lang-menu[open] > summary > svg:last-child { transform: rotate(180deg); }
.lang-pop { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 190px; max-width: calc(100vw - 32px); max-height: 70vh; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px color-mix(in srgb, var(--fg) 18%, transparent); z-index: 20; }
.lang-pop li { margin: 0; }
.lang-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 8px; color: var(--fg); font-size: 15px; text-align: start; }
.lang-opt svg { vertical-align: 0; }
.lang-opt > svg:first-child, .lang-opt > .lang-badge { color: var(--muted); }
a.lang-opt:hover { background: var(--panel); text-decoration: none; }
.lang-opt.on { font-weight: 700; color: var(--accent2); }
.lang-opt.on > svg:first-child, .lang-opt.on > .lang-badge { color: var(--accent); }
.lang-opt.on > svg:last-child { margin-inline-start: auto; }
/* a language without its own badge picture: its code in a box, the same colours as the pictures */
.lang-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 16px; margin: 0 1px; padding: 0 3px; border-radius: 4px; background: var(--muted); color: var(--bg2) !important; font: 700 10px/1 var(--display); }
.lang-menu > summary > .lang-badge, .lang-opt.on > .lang-badge { background: var(--accent); }
[lang=ar] > .lang-name, .lang-name[lang=ar] { font-family: 'IBM Plex Sans Arabic', var(--display); }
@media (max-width: 760px) {
  .lang-menu { order: 0; }
  .lang-menu > summary { padding: 4px 8px; min-height: 40px; }
  .lang-menu > summary > .lang-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.versions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 15px; } .versions svg { color: var(--accent); }
.lang-tag { font-size: 12px; vertical-align: 2px; }
/* phone width: the five lesson steps fit the screen in both directions (they used to push the page 20px wide) */
@media (max-width: 440px) { .step-btn { padding: 10px 4px; gap: 4px; font-size: 12.5px; min-width: 0; } .step-btn .dot { display: none; } .step-btn .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.lesson-layout > .lesson { min-width: 0; }  /* a wide code block or table scrolls inside the lesson, never widens the page */

/* UI test 2026-09-29: phones. Long addresses and CSV headers in <code> wrap instead of pushing the page sideways; the
   course board's voice picker fits the screen. */
main code { overflow-wrap: anywhere; word-break: break-word; }
.produce .voicepick { min-width: 0; max-width: 100%; box-sizing: border-box; }
.produce .voicepick label { min-width: 0; max-width: 100%; }
.produce .voicepick select { width: 100%; }
main pre { max-width: 100%; overflow-x: auto; }

/* Sketch gallery (PLAN L3.5): Quick view and the lesson page's Video tab */
.sk-gallery { margin-top: 18px; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.sk-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg2); }
.sk-card.failed { border-color: var(--warn); }
.sk-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--field); border-bottom: 1px solid var(--line); }
.sk-body { padding: 10px 12px; }
.sk-body p { margin: 4px 0; }
.sk-problems { margin: 4px 0; padding-inline-start: 18px; color: var(--muted); }
.sk-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin-top: 6px; }

/* YouTube limits card (Admin -> YouTube, My YouTube channel) */
.yt-limits .ytl-project { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.yt-limits .meter { height: 10px; border-radius: 6px; background: var(--line); overflow: hidden; margin: 6px 0; }
.yt-limits .meter span { display: block; height: 100%; background: var(--accent); }

/* Tracks (PLAN R4): whole courses in an order */
.track-courses { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 14px; }
.track-course { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--panel); }
.track-course .tc-n { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; }
.track-course .tc-body { flex: 1; min-width: 0; }
.track-course h2 { font-size: 1.15rem; margin: 0 0 4px; }
.track-order li { margin: 6px 0; }
.track-order .inline-actions { margin-inline-start: 8px; }
.track-card ol { margin: 8px 0; padding-inline-start: 20px; }

/* Reels (PLAN R5): vertical teasers */
.reel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.reel video { width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: var(--radius); }
.reel figcaption { margin-top: 6px; }
.reel-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.reel-ideas { list-style: none; padding: 0; }
.reel-ideas li { margin: 10px 0; }

.track-steps .track-step { display: flex; flex-direction: column; gap: 6px; }
.track-steps .track-step > .course-card { flex: 1; }
.track-steps .step-n { font-family: var(--display); font-weight: 600; color: var(--accent); font-size: .9rem; }

/* The Studio's own menu (studio_nav) */
.studio-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 18px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.studio-nav a { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 8px; color: var(--fg); text-decoration: none; font-family: var(--display); font-size: .86rem; white-space: nowrap; }
.studio-nav a:hover { background: var(--field); }
.studio-nav a.active { background: var(--accent); color: var(--on-accent); }
.studio-nav .view-as { margin-inline-start: auto; color: var(--muted); }

/* Catalog views (Courses, Tracks, Videos, Shorts) */
.catalog-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0; }
.catalog-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); text-decoration: none; font-family: var(--display); background: var(--panel); }
.catalog-tabs a.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.catalog-tabs a.active .muted { color: var(--on-accent); opacity: .85; }
.shorts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.short-card { aspect-ratio: 9 / 16; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 14px; border-radius: var(--radius); background: linear-gradient(160deg, var(--accent), #0f172a); color: #fff; text-decoration: none; position: relative; }
.short-card .sc-play { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); opacity: .9; }
.short-page { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.short-video { width: min(380px, 100%); aspect-ratio: 9 / 16; background: #000; border-radius: var(--radius); }
.short-side { flex: 1; min-width: 260px; }
.short-preview video { width: min(300px, 100%); aspect-ratio: 9 / 16; background: #000; border-radius: var(--radius); }

/* Single videos (video.php, inc/videos.php): the video and its words, nothing of a course */
.video-page { max-width: 960px; margin: 0 auto; padding: 0 16px 32px; }
.video-page h1 { margin: 8px 0 16px; }
.video-page .lede { margin-top: 16px; }
.video-card .thumb { position: relative; }
.video-card .vc-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); pointer-events: none; }

/* Featured on the landing page (inc/featured.php, Admin -> Featured) */
.featured { max-width: 1200px; margin: 32px auto; padding: 0 16px; }
.featured h2 { margin-bottom: 16px; }
.featured .featured-shorts { margin-top: 18px; grid-template-columns: repeat(auto-fill, minmax(150px, 190px)); }

/* ---------- Admin panel (inc/admin_shell.php, inc/admin_lists.php, admin/index.php) ---------- */
main:has(> .admin-shell) { max-width: none; padding-inline: 20px; }
.admin-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 20px; }
.admin-side { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 8px; }
.admin-side summary { display: none; }
.admin-side ul { list-style: none; margin: 0; padding: 0; }
.admin-side .side-group { margin: 14px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.admin-side a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--fg); text-decoration: none; font-size: 14px; }
.admin-side a:hover { background: var(--bg2); }
.admin-side a.active { background: var(--accent); color: var(--on-accent); }
.admin-side a span { flex: 1; min-width: 0; }
.side-badge { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--bad-bg); color: var(--bad-fg); font-size: 12px; text-align: center; }
.admin-side a.active .side-badge { background: var(--on-accent); color: var(--accent); }
.admin-main { min-width: 0; }
.admin-main > section, .admin-main .narrow { max-width: none; margin: 0; }
.admin-main > section.narrow { max-width: none; }
.admin-main .form { max-width: 1100px; }  /* full-width pages; a single form still reads as one column */
.admin-main main > section:first-child > h1:first-child, .admin-main > section > h1:first-child { margin-top: 4px; }
@media (max-width: 900px) {
  .admin-shell { grid-template-columns: 1fr; gap: 12px; }
  .admin-side { position: static; max-height: none; padding: 4px 8px; }
  .admin-side summary { display: flex; align-items: center; gap: 8px; padding: 8px 6px; cursor: pointer; font-weight: 600; }
}

.admin-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 4px 0 18px; }
.admin-head h1 { margin: 0 0 4px; }
.admin-head p { margin: 0; }
.head-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.list-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px; margin-bottom: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.lb-search { flex: 1 1 260px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--field); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); }
.lb-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font: inherit; padding: 8px 0; outline: none; }
.lb-search:focus-within { border-color: var(--accent); }
.lb-filter { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.lb-filter select { font: inherit; font-size: 14px; color: var(--fg); background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; max-width: 220px; }
.list-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 14px; }
.list-bulk select { font: inherit; font-size: 14px; color: var(--fg); background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.list-table { margin: 0; }
.list-table thead th { position: sticky; top: 0; background: var(--bg2); font-size: 13px; white-space: nowrap; }
.list-table td, .list-table th { padding: 10px 10px; }
.list-table tbody tr:hover { background: var(--bg2); }
.list-table .sel { width: 28px; }
.list-table td.actions { white-space: nowrap; text-align: end; }
.th-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.th-sort.on { color: var(--accent); }
.thumb-col { width: 104px; }
.thumb-col img { display: block; border-radius: 6px; }
.thumb-none { display: grid; place-items: center; width: 96px; height: 54px; border-radius: 6px; background: var(--bg2); color: var(--muted); }
.list-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0; font-size: 14px; }
.list-pager > span:first-child { margin-inline-end: auto; }
.list-pager .pg { min-width: 32px; padding: 5px 8px; text-align: center; border-radius: 8px; border: 1px solid var(--line); text-decoration: none; color: var(--fg); }
.list-pager .pg.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 16px 0 22px; }
.kpi { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); color: var(--fg); text-decoration: none; }
.kpi:hover { border-color: var(--accent); }
.kpi-ic { grid-row: 1 / span 3; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--bg2); color: var(--accent); }
.kpi b { font-family: var(--mono); font-size: 26px; line-height: 1.1; }
.kpi span:not(.kpi-ic) { font-size: 14px; }
.kpi small { font-size: 12px; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.dash-card { padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.dash-card h2 { margin: 0 0 12px; font-size: 16px; }
.dash-chart { width: 100%; height: auto; }
.dash-chart rect { fill: var(--accent); }
.dash-chart text { fill: var(--muted); font-size: 11px; }
.dash-list { margin: 0; padding: 0; list-style: none; }
ol.dash-list { counter-reset: d; }
.dash-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dash-list li:last-child { border-bottom: 0; }
.list-table code { white-space: nowrap; }
.list-table .btn.small { padding: 4px 9px; font-size: 13px; min-height: 0; }
.list-table .btn.small svg { width: 14px; height: 14px; }
.dash-grid { align-items: start; }
.dash-chart text { font-size: 16px; }

/* Analytics pages (admin/visits.php, finance.php, marketing.php; inc/analytics.php) */
.period-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 14px; margin-bottom: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.pb-label { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: auto; }
.pb-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.pb-presets a { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg); text-decoration: none; font-size: 13px; }
.pb-presets a.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pb-pick { display: flex; align-items: flex-end; gap: 6px; font-size: 12px; color: var(--muted); }
.pb-pick label { display: flex; flex-direction: column; gap: 2px; }
.pb-pick input, .pb-pick select, .fin-filter select { font: inherit; font-size: 13px; color: var(--fg); background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; }
.fin-filter label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.fin-filter select { max-width: 220px; }
.delta { font-size: 12px; font-weight: 700; margin-inline-start: 4px; }
.delta.up { color: var(--ok-fg); }
.delta.down { color: var(--bad-fg); }
.neg { color: var(--bad-fg); }
.dash-card.wide { margin-bottom: 14px; }
.dash-chart rect.s1 { fill: var(--accent2); }
.chart-key { display: flex; gap: 16px; margin: 4px 0 0; color: var(--muted); }
.chart-key i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; background: var(--accent); }
.chart-key i.s1 { background: var(--accent2); }
.rank-table td, .rank-table th { padding: 7px 6px; font-size: 13px; }
.rank-table td:first-child { position: relative; }
.rank-table .share { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: var(--accent); opacity: .55; }
.admin-table .num, .admin-table th.num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.funnel { display: grid; gap: 6px; margin: 0 0 16px; }
.fn-step { display: flex; justify-content: space-between; align-items: center; width: var(--w); min-width: 220px; padding: 8px 12px; border-radius: 8px; background: var(--bg2); border-inline-start: 4px solid var(--accent); font-size: 14px; }
.expense-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }
.expense-form label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.expense-form .grow { flex: 1 1 200px; }
.expense-form input, .expense-form select { font: inherit; font-size: 14px; color: var(--fg); background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.dash-chart rect.s1 { fill: var(--accent); opacity: .38; }
.chart-key i.s1 { background: var(--accent); opacity: .38; }
.dash-card.wide .dash-chart text { font-size: 20px; }

/* Short videos: the AI's popular topics (studio/shorts.php) */
.topic-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.topic-card { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.topic-card p { margin: 6px 0; }

/* One reel's page (studio/reel.php) */
.reel-manage-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.reel-grid.single { grid-template-columns: 1fr; }
.reel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.reel-history { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--line); }
.reel-history li { position: relative; padding: 8px 0 10px 18px; font-size: 14px; }
.reel-history li::before { content: ""; position: absolute; inset-inline-start: -7px; top: 13px; width: 12px; height: 12px; border-radius: 50%; background: var(--line2); }
.reel-history li.ev-published::before, .reel-history li.ev-approved::before, .reel-history li.ev-shown::before { background: var(--ok); }
.reel-history li.ev-failed::before, .reel-history li.ev-rejected::before { background: var(--bad); }
.reel-history li.ev-queued::before, .reel-history li.ev-made::before { background: var(--accent); }
.reel-history .ev-at { display: inline-block; min-width: 128px; color: var(--muted); font-family: var(--mono); font-size: 12px; }
@media (max-width: 900px) { .reel-manage-grid { grid-template-columns: 1fr; } }

/* The course page's step tabs (studio/studio_course.php): headers like the old step boxes */
.steps-tabs > .tablist { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; border: 0; margin: 14px 0 16px; }
.tab.step-tab { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 8px; row-gap: 3px; align-items: center;
  text-align: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--fg); min-width: 0; }
.step-tab .stn { grid-row: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg2); font-family: Lexend; font-weight: 700; font-size: 13px; }
.step-tab .stl { font-family: Lexend; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-tab .sts { grid-column: 1 / -1; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-tab .stbar { grid-column: 1 / -1; display: block; height: 5px; border-radius: 3px; background: var(--bg2); overflow: hidden; }
.step-tab .stbar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.step-tab.st-done { border-color: var(--ok); }
.step-tab.st-done .stn { background: var(--ok); color: var(--bg2); }
.step-tab.st-done .stbar i { background: var(--ok); }
.step-tab.st-locked { opacity: .6; }
.step-tab[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; background: var(--bg2); }
@media (max-width: 760px) { .steps-tabs > .tablist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Production boxes on the course details pages (inc/course_status.php course_production_html) */
.pboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.pbox { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); font-size: 13px; }
.pbox strong { font-family: Lexend; font-size: 20px; }
.pbox.done { border-color: var(--ok); }
.pbar { display: block; height: 5px; border-radius: 3px; background: var(--bg2); overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--accent); }
.pbox.done .pbar i { background: var(--ok); }

/* A reel's page: the posts across the page */
.reel-manage-grid { grid-template-columns: 320px minmax(0, 1fr); }
.posts-form { max-width: none !important; }
.posts-texts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.posts-texts label { display: flex; flex-direction: column; gap: 6px; }
.posts-texts textarea { min-height: 220px; font: inherit; line-height: 1.5; }
.posts-to { margin: 14px 0 4px; }
.posts-form .opt.done { opacity: .85; }
@media (max-width: 1100px) { .posts-texts { grid-template-columns: 1fr; } }

/* Admin -> AI providers: what a provider is used for */
.provider-card .uses-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-inline-start: 6px; }
.provider-card .uses-tags .tag { font-size: 11.5px; }
fieldset.uses { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin: 10px 0; }
fieldset.uses legend { font-size: 13px; color: var(--muted); padding: 0 4px; }
fieldset.uses label.opt.inline { display: inline-flex; margin: 2px 14px 2px 0; }
.uses-map td:last-child { white-space: nowrap; }

/* home: the live tutor band (inc/home_landing.php) */
.tutor-band { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; margin: 8px 0 44px; padding: 32px;
  border-radius: 22px; background: var(--surface, var(--card)); border: 1px solid var(--line); }
.tutor-band h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; margin: 6px 0 12px; }
.tb-points { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.tb-points li { display: flex; gap: 10px; align-items: flex-start; }
.tb-points li svg { color: var(--accent); flex: none; margin-top: 3px; }
.tb-demo { position: relative; display: grid; gap: 14px; }
.tb-board { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px;
  background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 18px 18px; }
.tb-title { font: 600 20px/1.3 Lexend, sans-serif; margin: 0 0 10px; }
.tb-line { margin: 6px 0; display: flex; gap: 10px; align-items: center; font-size: 16px; }
.tb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.tb-card { background: var(--card, var(--bg)); border: 2px solid var(--accent); border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px; max-width: 360px; margin-inline-start: auto;
  box-shadow: 0 12px 30px rgb(0 0 0 / .12); }
.tb-k { margin: 0; font: 700 12px Lexend, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.tb-q { margin: 0 0 4px; font-weight: 600; }
.tb-opt { display: flex; gap: 8px; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 15px; }
.tb-opt.right { border-color: var(--ok); background: var(--ok-bg, transparent); color: var(--ok); font-weight: 600; }
.tb-chip { position: absolute; inset-inline-start: -8px; bottom: -14px; }
@media (max-width: 860px) { .tutor-band { grid-template-columns: 1fr; padding: 20px; gap: 24px; } .tb-chip { position: static; justify-self: start; } }

/* the Design panel of the Render forms (inc/design_panel.php): the Quick wizard's cards inside a .form */
.design-panel .qk-choice { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.design-panel .qk-choice > b, .design-panel .qk-choice > small, .design-panel .qk-choice > .qk-char { display: block; }
.design-panel .qk-choice > input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.design-panel .qk-field { border: 0; padding: 0; margin: 0 0 16px; }
.design-panel .qk-field legend { font: 600 16px Lexend, sans-serif; margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.design-more { margin: 6px 0 14px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.design-more > summary { cursor: pointer; font-weight: 600; }
.design-more[open] > summary { margin-bottom: 10px; }
/* the Design panel inside the course board's Render form (.produce lays out its forms as rows of wide buttons) */
.produce form .design-panel, .produce form .design-more, .produce form .design-mismatch { flex: 1 1 100%; min-width: 0; }
.produce form .design-panel label.qk-choice { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: start; }
.design-panel .qk-vhead { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; width: 100%; }
.design-panel .btn.qk-play { min-width: 0; width: auto; flex: none; flex-direction: row; align-items: center; padding: 4px 10px; }
.produce form .design-more label:not(.notes):not(.opt) { display: inline-flex; }

/* the Design panel's look row: four chips, each opens its card grid (one at a time) */
.design-panel .dp-label { margin: 4px 0 6px; font-weight: 600; }
.design-panel .dp-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 12px; }
.design-panel .dp-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; min-width: 0; padding: 10px 12px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--field); color: var(--fg); cursor: pointer; font: inherit; }
.design-panel .dp-chip small { display: inline-flex; gap: 5px; align-items: center; color: var(--muted); font-size: 12.5px; }
.design-panel .dp-chip b { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.design-panel .dp-chip:hover { border-color: var(--line2); }
.design-panel .dp-chip[aria-expanded=true] { border-color: var(--accent); background: var(--panel); }
.design-panel .dp-drawer.dp-closed { display: none; }
.design-panel .dp-drawer { padding: 12px; border: 1.5px solid var(--accent); border-radius: 14px; }
.produce form .design-panel .dp-chip { min-width: 0; }
/* a caution (amber, with its icon): .flash.warn was green like a success message */
.flash.warn { background: var(--mid-bg); border-color: var(--mid, var(--mid-fg)); color: var(--fg); }
.flash.warn svg { color: var(--mid-fg); vertical-align: -3px; }

.inline-approve { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }

/* style cards with a picture of a real render (assets/img/styles) */
.qk-thumb { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); margin-bottom: 6px; }
.qk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qk-thumb.none { display: grid; place-items: center; color: var(--muted); font-size: 12.5px; }

/* Quick video, step 2: one question at a time (PLAN U3/U4); steps 3-6: the answers beside the work */
.qk-ask-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.qk-count { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.qk-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin: .3rem 0 1rem; }
.qk-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.qk-ask:not(.js) .qk-bar, .qk-ask:not(.js) .qk-count { display: none; }
.qk-ask.js .qk-nojs { display: none; }
.qk-q { border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; margin: 0 0 .7rem; background: var(--panel); }
.qk-q h3 { margin: .2rem 0 .7rem; font-size: 1.05rem; display: flex; align-items: center; gap: .45rem; }
.qk-q h3 svg { color: var(--accent); }
.qk-qhead { margin: 0; display: flex; gap: .5rem; align-items: center; }
.qk-qn { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 6px; padding: 2px 8px; }
.qk-qn:empty { display: none; }
.qk-opt-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.qk-ask.js .qk-q.open { box-shadow: 0 6px 24px color-mix(in srgb, var(--fg) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--bg); }
.qk-ask.js .qk-q.done { padding: .6rem 1rem; }
.qk-ask.js .qk-q.done h3 { margin: .15rem 0 .3rem; font-size: .98rem; }
.qk-ask.js .qk-q.done .qk-qbody, .qk-ask.js .qk-q.done .qk-qnav { display: none; }
.qk-sum { display: none; }
.qk-ask.js .qk-q.done .qk-sum { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.qk-chipv { display: inline-flex; align-items: center; gap: .35rem; max-width: 80%; padding: .2rem .65rem; border-radius: 8px; font-weight: 600; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qk-chipv::before { content: "\2713"; }
.qk-chipv.skipped { color: var(--muted); background: var(--line); font-weight: 400; }
.qk-chipv.skipped::before { content: ""; }
.qk-qnav { display: flex; justify-content: flex-end; gap: .5rem; margin: .8rem 0 0; }
.qk-ask.js:not(.all-seen) .qk-final .btn.primary { display: none; }
.qk-opts { display: grid; gap: .5rem; }
.qk-opts-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.qk-opt { display: grid; grid-template-columns: auto 1fr; column-gap: .65rem; align-items: center; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--bg); }
.qk-opt:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.qk-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.qk-opt input { position: absolute; opacity: 0; pointer-events: none; }
.qk-opt i { grid-row: span 2; width: 26px; height: 26px; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); }
.qk-opt:has(input:checked) i { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.qk-opt small { grid-column: 2; color: var(--muted); }
.qk-opt .qk-shape { grid-row: span 2; border: 2px solid currentColor; border-radius: 4px; color: var(--accent); }
.qk-shape.wide { width: 34px; height: 20px; } .qk-shape.tall { width: 18px; height: 30px; margin: 0 8px; }
.qk-variety { border: 0; padding: 0; margin: .9rem 0 0; }
.qk-variety .qk-opts { grid-template-columns: 1fr 1fr; }
.qk-variety .qk-opt b { font-size: 1.15rem; }
.qk-ages { display: flex; flex-wrap: wrap; gap: .45rem; }
.qk-age { min-width: 46px; height: 46px; border-radius: 11px; border: 1px solid var(--line); background: var(--bg); color: var(--fg); font-weight: 700; cursor: pointer; font-family: inherit; }
.qk-age:hover { border-color: var(--accent); }
.qk-age.in { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); color: var(--accent); }
.qk-age.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.qk-own-age label { display: inline-flex; align-items: center; gap: .35rem; margin: .4rem .8rem 0 0; }
.qk-own-age input { width: 5rem; }
.qk-lengths .qk-chip span { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.qk-cost { font-size: 11.5px; color: var(--muted); font-weight: 400; }
.qk-ref-now { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.quick.qk-wide { max-width: 1240px; }
.qk-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.qk-answers { position: sticky; top: 1rem; border: 1px solid var(--line); border-radius: 14px; padding: .9rem; background: var(--panel); max-height: calc(100vh - 2rem); overflow: auto; }
.qk-answers h3 { margin: 0 0 .2rem; font-size: 1rem; display: flex; gap: .4rem; align-items: center; }
.qk-answers ul { list-style: none; margin: .6rem 0 0; padding: 0; }
.qk-answers li { display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; padding: .45rem 0; border-top: 1px solid var(--line); }
.qk-answers .qk-al { grid-column: 1; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.qk-answers .qk-av { grid-column: 1; font-size: 14px; overflow-wrap: anywhere; }
.qk-answers .qk-edit { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 12.5px; white-space: nowrap; }
.qk-answers .qk-made li.now .qk-av { font-weight: 700; color: var(--accent); }
.qk-refine { margin-top: .8rem; display: grid; gap: .4rem; }
.qk-refine textarea { width: 100%; }
.qk-vertical video { width: 270px; max-width: 100%; aspect-ratio: 9 / 16; border-radius: 12px; background: #000; display: block; }
@media (max-width: 900px) {
  .qk-split { grid-template-columns: 1fr; }
  .qk-answers { position: static; max-height: none; order: 2; }
  .qk-variety .qk-opts { grid-template-columns: 1fr; }
}

/* Quick video step 6: the storyboard (PLAN U6): what is said and what is shown, side by side, with times */
.qk-sb-head { border: 1px solid var(--line); border-radius: 12px; padding: .7rem 1rem; margin: 0 0 .8rem; background: var(--panel); }
.qk-sb-head h3 { margin: 0 0 .2rem; display: flex; gap: .4rem; align-items: center; }
.qk-sb-total { margin: .4rem 0 0; }
.qk-sb-warn { color: var(--mid-fg); font-weight: 600; margin-inline-start: .4rem; }
.qk-sb { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.qk-sb textarea { width: 100%; }
.qk-sb-show { border-inline-start: 3px solid color-mix(in srgb, var(--accent) 35%, var(--line)); padding-inline-start: .8rem; }
.qk-sb-time { font-family: var(--mono); font-size: 12.5px; color: var(--muted); font-weight: 400; margin-inline-start: .4rem; }
.qk-kind { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.qk-sb-points { margin: .5rem 0 0; color: var(--muted); }
@media (max-width: 760px) { .qk-sb { grid-template-columns: 1fr; } .qk-sb-show { border-inline-start: 0; padding-inline-start: 0; } }
.job-stages { margin: .5rem 0; }

/* Quick video: every text box, number, list and file field in the theme (2026-10-04, owner: "not modern") */
.quick input[type=text], .quick input:not([type]), .quick input[type=number], .quick input[type=email], .quick input[type=url],
.quick textarea, .quick select, .qk-refine textarea {
  display: block; width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.45; color: var(--fg);
  font-weight: 400; background: var(--field); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s; }
.quick textarea { min-height: 7.5em; resize: vertical; }
.quick input::placeholder, .quick textarea::placeholder { color: var(--muted); opacity: .8; }
.quick input:hover:not(:focus), .quick textarea:hover:not(:focus), .quick select:hover:not(:focus) { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.quick input:focus, .quick textarea:focus, .quick select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
body.light .quick input[type=text], body.light .quick input:not([type]), body.light .quick input[type=number], body.light .quick textarea, body.light .quick select { background: #fff; }
.quick input[type=search].qk-search { border-radius: 999px; padding-inline-start: 18px; }
.quick .qk-two { display: grid; grid-template-columns: 2fr 1fr; gap: .8rem; }
.quick .qk-two label { display: grid; gap: .35rem; font-weight: 600; font-size: 14px; }
.quick .qk-own-age { margin-top: .6rem; }
.quick .qk-own-age label { display: inline-grid; gap: .25rem; font-size: 14px; }
.quick .qk-own-age input { width: 6rem; }
.quick input[type=file] { display: block; width: 100%; box-sizing: border-box; padding: 18px; border: 2px dashed var(--line); border-radius: 12px; background: var(--panel); font: inherit; cursor: pointer; }
.quick input[type=file]:hover { border-color: var(--accent); }
.quick input[type=file]::file-selector-button { font: inherit; font-weight: 600; margin-inline-end: 12px; padding: 8px 16px; border-radius: 999px; border: 0; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.quick #qk-count { display: block; margin-top: .35rem; text-align: end; }
.qk-file-err { color: var(--bad-fg, var(--bad)); font-weight: 600; margin: .4rem 0 0; }
@media (max-width: 600px) { .quick .qk-two { grid-template-columns: 1fr; } }

/* Picture slides: its looks open right under the video style cards (owner 2026-10-04: "like lrnova") */
.qk-looks { margin: .9rem 0 .4rem; padding: .9rem; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.qk-looks-h { margin: 0 0 .6rem; display: flex; align-items: center; gap: .4rem; color: var(--accent); }
.qk-looks .qk-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.qk-main-tall video { width: 340px; } .qk-main-tall figcaption .btn { margin-top: .6rem; }

/* Design A: the look as steps (inc/design_panel.php design_steps, assets/js/design-steps.js) */
.ds { display: grid; gap: .6rem; margin: .4rem 0 1rem; }
.ds-step { border: 1.5px solid var(--line); border-radius: 14px; background: var(--panel); }
.ds-step.open { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: var(--bg); box-shadow: 0 6px 22px color-mix(in srgb, var(--fg) 8%, transparent); }
.ds-head { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; cursor: default; }
.ds-n { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.ds-step.open .ds-n { background: var(--accent); color: var(--on-accent); }
.ds-title { flex: none; }
.ds-sum { flex: 1; min-width: 0; color: var(--accent); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-sum::before { content: "\2713  "; }
.ds-sum.empty { color: var(--muted); font-weight: 400; } .ds-sum.empty::before { content: ""; }
.ds-step.open .ds-sum, .ds-step.open .ds-edit { display: none; }
.ds-body { display: none; padding: 0 .9rem .9rem; }
.ds-step.open .ds-body { display: block; }
.ds-nav { display: flex; justify-content: flex-end; margin: .7rem 0 0; }
.ds .qk-looks { margin: 0; }
.ds-scripts { margin: .4rem 0 .8rem; }
.ds .qk-looks { border: 0; padding: 0; background: none; } .ds .qk-looks-h b, .ds .qk-looks-h svg { display: none; }

/* The voice step: provider buttons and speaker cards over the real voice fields (assets/js/voice-ui.js) */
.ds-voice .vp-hidden { display: none !important; }
.vp-provs { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .8rem; }
.vp-prov { font: inherit; font-size: 14px; padding: .45rem .9rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); color: var(--fg); cursor: pointer; }
.vp-prov:hover { border-color: var(--accent); }
.vp-prov.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.vp-cards { margin-bottom: .8rem; max-height: 340px; overflow: auto; }
.vp-card { cursor: pointer; }
.vp-card.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); box-shadow: inset 0 0 0 1px var(--accent); }
.ds-voice .voicepick { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; }
.ds-voice .voicepick > .vp-provs, .ds-voice .voicepick > .vp-cards, .ds-voice .voicepick > .why { flex-basis: 100%; }
.ds-voice .voicepick label { display: grid; gap: .25rem; font-size: 14px; font-weight: 600; }
.ds-voice .voicepick select, .ds-voice .voicepick input { font: inherit; font-weight: 400; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--field); color: var(--fg); }
.ds-voice .voicepick .notes { flex-basis: 100%; }
.ds-typed { font-family: 'Segoe UI', Inter, sans-serif !important; }
.qk-draw .qk-thumb img { object-fit: contain; background: #fff; }
.ds-hand { margin-top: .8rem; } .ds-hand .qk-choice:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.ds-hand input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.ds-hand .qk-choice::after { content: "\2610  tick to show it"; font-size: 12.5px; color: var(--muted); }
.ds-hand .qk-choice:has(input:checked)::after { content: "\2611  shown"; color: var(--accent); font-weight: 600; }

/* My account -> Invite friends (PLAN M1) */
.ref-row { display: flex; gap: 8px; max-width: 620px; }
.ref-link { flex: 1; min-width: 0; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.ref-share { display: flex; flex-wrap: wrap; gap: 8px; }
#ref-qr svg { width: 180px; height: 180px; background: #fff; border-radius: 12px; padding: 6px; }

/* an offer with a deadline (PLAN M2): one band per offer, a countdown the same for everyone */
.offer-band { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; margin: 12px auto 18px;
  max-width: 1100px; padding: 14px 18px; border-radius: var(--radius, 16px); border: 1.5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg2)); }
.ob-main { display: flex; gap: 14px; align-items: center; min-width: 0; flex: 1 1 380px; }
.ob-deal { flex: none; font: 700 18px/1.1 var(--display); color: var(--on-accent, #fff); background: var(--accent); padding: 10px 12px; border-radius: 12px; }
.ob-text { display: grid; gap: 2px; min-width: 0; } .ob-text b { font-family: var(--display); } .ob-text span { color: var(--muted); }
.ob-price s { color: var(--muted); } .ob-price b { color: var(--fg); }
.ob-side { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ob-count { font: 600 14px/1 'JetBrains Mono', monospace; } .ob-left { color: var(--muted); font-size: 13px; }

/* Curricula (PLAN V3-V7): the map tree, setup steps, the reviewer attestation */
.cur-tree { list-style: none; padding-inline-start: 1.1em; margin: .2em 0; border-inline-start: 1px solid var(--line); }
.cur-tree > li > details > summary { cursor: pointer; padding: .25em 0; }
.cur-node { padding: .3em 0 .6em 1em; }
.cur-node form.inline, .cur-out form.inline { display: inline; }
.cur-steps { padding-inline-start: 1.4em; }
.cur-steps li.done a { color: var(--ok); }
.cur-steps li.todo a { font-weight: 600; }
.cur-build { display: grid; gap: .2em; max-height: 22em; overflow: auto; margin-bottom: 1em; }
.cur-proj { margin-bottom: .6em; }
.gate-attest { display: flex; gap: .5em; align-items: flex-start; font-size: .9em; margin: .5em 0; max-width: 46em; }
.legal-notes { margin-top: 1em; }
.legal-notes p { margin: .4em 0; }

/* a number typed inside a radio choice (Studio sources: "About [40] lessons") */
.form label.opt input.src-count[type=number] { display: inline-block; width: 6.5em; height: auto; margin: 0 .35em; padding: 4px 8px; vertical-align: baseline; }
/* a one-time setup as numbered steps (Admin -> Alerts -> Telegram): done = a green tick, now = the accent, later = muted */
.setup-steps { list-style: none; counter-reset: setup; padding: 0; margin: 12px 0 20px; display: grid; gap: 10px; }
.setup-steps > li { counter-increment: setup; position: relative; padding: 12px 14px 12px 52px; padding-inline: 52px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.setup-steps > li::before { content: counter(setup); position: absolute; inset-inline-start: 14px; top: 11px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 13px/1 Lexend, sans-serif; border: 2px solid var(--line); color: var(--muted); background: var(--bg); }
.setup-steps > li.now { border-color: var(--accent); }
.setup-steps > li.now::before { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.setup-steps > li.done::before { content: '✓'; border-color: var(--ok); background: var(--ok); color: var(--on-accent); }
.setup-steps > li.later { opacity: .65; }
.setup-steps > li p { margin: 6px 0 0; }
.setup-steps .step-form { margin: 8px 0 0; max-width: 560px; }
.setup-steps details { margin-top: 6px; }
.setup-steps form.inline { margin-top: 8px; display: inline-block; }

/* Every form control in the theme (2026-10-10). Before this, a text box got the theme only inside a known wrapper
   (.form label, .q, .admin-table...) and fell back to the browser's bare box everywhere else (the curriculum Levels
   table). :where() keeps these at zero specificity, so every scoped rule above still wins. */
:where(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=file], [type=range], [type=color], [type=hidden], [type=image]), textarea, select) {
  font: inherit; font-size: 15px; color: var(--fg); background-color: var(--field); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 12px; max-width: 100%; box-sizing: border-box; min-height: 38px;
}
:where(textarea) { line-height: 1.5; resize: vertical; }
:where(input, textarea, select):where(:hover:not(:focus, :disabled)) { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
:where(input, textarea, select):where(:focus) { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
:where(input, textarea, select):where(:disabled) { opacity: .6; cursor: not-allowed; }
:where(input, textarea)::placeholder { color: var(--muted); opacity: .8; }
:where(input[type=checkbox], input[type=radio]) { accent-color: var(--accent); width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: middle; cursor: pointer; }
:where([dir=rtl]) :where(input[type=checkbox], input[type=radio]) { margin: 0 0 0 6px; }
:where(input[type=range]) { accent-color: var(--accent); }
:where(input[type=color]) { width: 44px; height: 36px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); cursor: pointer; }
:where(input[type=file]) { font: inherit; font-size: 14px; color: var(--muted); max-width: 100%; }
:where(input[type=file])::file-selector-button { font: inherit; font-weight: 600; margin-inline-end: 10px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer; }
:where(input[type=file]):hover::file-selector-button { border-color: var(--accent); }
/* a text box alone in a table cell fills the cell */
:where(td) > :where(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=file], [type=hidden], [type=number], [type=color]), select, textarea):only-child { width: 100%; }