/* ==========================================================================
   SinMathisi — design system
   Clean, quiet, mobile-first. No decorative animation.
   ========================================================================== */

:root {
  /* --- ink --- */
  --ink-900:#0B1B2B; --ink-800:#16293C; --ink-700:#2B3F53; --ink-600:#44586C;
  --ink-500:#63788C; --ink-400:#8A9CAD; --ink-300:#B4C2CE;

  /* --- surfaces --- */
  --bg:#FFFFFF; --bg-2:#F5F8FB; --bg-3:#EDF2F7; --line:#DFE7EE; --line-2:#EDF1F5;

  /* --- brand --- */
  --brand-800:#0A2E52; --brand-700:#0E3C6B; --brand:#12507F; --brand-600:#12507F;
  --brand-500:#1C6BA0; --brand-100:#DCE9F3; --brand-50:#EFF5FA;

  /* --- semantic --- */
  --ok:#0F7355; --ok-bg:#E6F4EF;
  --warn:#8A5A08; --warn-bg:#FCF3E3;
  --danger:#A82019; --danger-bg:#FBEBEA;
  --accent:#9A4E12; --accent-bg:#FBF0E6;

  /* --- shape --- */
  --r-sm:6px; --r:10px; --r-lg:14px; --r-xl:20px;
  --shadow-sm:0 1px 2px rgba(11,27,43,.06);
  --shadow:0 2px 8px rgba(11,27,43,.07);
  --shadow-lg:0 12px 32px rgba(11,27,43,.10);

  --maxw:1180px;
  --header-h:64px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin:0; background:var(--bg); color:var(--ink-700);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img, svg, video { max-width:100%; height:auto; display:block; }
a { color:var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4,h5 { color:var(--ink-900); margin:0 0 .5em; font-weight:650; letter-spacing:-.015em; line-height:1.25; }
h1 { font-size:clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); }
h2 { font-size:clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem); }
h3 { font-size:1.15rem; }
h4 { font-size:1rem; }
p { margin:0 0 1em; }
ul,ol { margin:0 0 1em; padding-left:1.25em; }
hr { border:0; border-top:1px solid var(--line); margin:2rem 0; }
small { font-size:.8125rem; }
code { font-family:var(--mono); font-size:.875em; background:var(--bg-3); padding:.15em .4em; border-radius:4px; }
:focus-visible { outline:2px solid var(--brand-500); outline-offset:2px; border-radius:4px; }

/* --------------------------------------------------------- layout */
.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:1rem; }
@media (min-width:768px){ .container { padding-inline:1.5rem; } }
.section { padding-block:2.5rem; }
@media (min-width:768px){ .section { padding-block:4rem; } }
.section--tight { padding-block:2rem; }
.section--alt { background:var(--bg-2); }
.stack > * + * { margin-top:1rem; }
.stack-sm > * + * { margin-top:.5rem; }
.stack-lg > * + * { margin-top:2rem; }
.row { display:flex; gap:1rem; flex-wrap:wrap; }
.row--between { justify-content:space-between; align-items:center; }
.row--center { align-items:center; }
.row--tight { gap:.5rem; }
.grid { display:grid; gap:1.25rem; }
.grid-2 { grid-template-columns:1fr; }
.grid-3 { grid-template-columns:1fr; }
.grid-4 { grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .grid-2{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (min-width:900px){ .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} }
.split { display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:960px){ .split { grid-template-columns:minmax(0,1fr) 340px; gap:2.5rem; } }
.split--rev { }
@media (min-width:960px){ .split--rev { grid-template-columns:300px minmax(0,1fr); } }
.text-center { text-align:center; }
.muted { color:var(--ink-500); }
.small { font-size:.875rem; }
.tiny { font-size:.8125rem; }
.mb-0{margin-bottom:0}.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}
.w-full{width:100%} .nowrap{white-space:nowrap}
.lead { font-size:1.0625rem; color:var(--ink-600); }
@media (min-width:768px){ .lead { font-size:1.1875rem; } }
.eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-500); margin-bottom:.5rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:1rem; top:.5rem; z-index:200; background:#fff; padding:.5rem 1rem; border-radius:var(--r-sm); box-shadow:var(--shadow); }

/* --------------------------------------------------------- header */
.site-header {
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line);
}
.site-header__inner { display:flex; align-items:center; gap:1rem; height:var(--header-h); }
.logo { display:inline-flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.0625rem; color:var(--ink-900); letter-spacing:-.02em; }
.logo:hover { text-decoration:none; }
.logo__mark { width:30px; height:30px; flex:0 0 auto; }
.logo__mark rect, .logo__mark path { }
.nav { display:none; margin-inline-start:auto; align-items:center; gap:.25rem; }
@media (min-width:1024px){ .nav { display:flex; } }
.nav a {
  display:inline-flex; align-items:center; padding:.5rem .7rem; border-radius:var(--r-sm);
  color:var(--ink-600); font-size:.9375rem; font-weight:500;
}
.nav a:hover { background:var(--bg-2); color:var(--ink-900); text-decoration:none; }
.nav a.is-active { color:var(--brand); background:var(--brand-50); }
.header-actions { display:flex; align-items:center; gap:.5rem; margin-inline-start:auto; }
@media (min-width:1024px){ .header-actions { margin-inline-start:.75rem; } }
.burger {
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  border:1px solid var(--line); background:#fff; border-radius:var(--r-sm); cursor:pointer;
}
@media (min-width:1024px){ .burger { display:none; } }
.burger span { display:block; width:17px; height:1.5px; background:var(--ink-700); position:relative; }
.burger span::before, .burger span::after { content:""; position:absolute; left:0; width:17px; height:1.5px; background:var(--ink-700); }
.burger span::before { top:-5px; } .burger span::after { top:5px; }
.mobile-nav { display:none; border-top:1px solid var(--line); background:#fff; padding:.75rem 0 1.25rem; }
.mobile-nav.is-open { display:block; }
@media (min-width:1024px){ .mobile-nav { display:none !important; } }
.mobile-nav a { display:block; padding:.65rem .25rem; color:var(--ink-700); font-weight:500; border-bottom:1px solid var(--line-2); }
.mobile-nav a:last-child { border-bottom:0; }

/* --------------------------------------------------------- buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.625rem 1.125rem; border-radius:var(--r-sm); border:1px solid transparent;
  font-family:inherit; font-size:.9375rem; font-weight:600; line-height:1.3;
  cursor:pointer; text-decoration:none; white-space:nowrap; transition:background-color .12s, border-color .12s, color .12s;
}
.btn:hover { text-decoration:none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity:.55; cursor:not-allowed; }
.btn--primary { background:var(--brand); color:#fff; }
.btn--primary:hover { background:var(--brand-700); }
.btn--dark { background:var(--ink-900); color:#fff; }
.btn--dark:hover { background:var(--ink-800); }
.btn--outline { background:#fff; border-color:var(--line); color:var(--ink-800); }
.btn--outline:hover { border-color:var(--ink-300); background:var(--bg-2); }
.btn--ghost { background:transparent; color:var(--ink-600); }
.btn--ghost:hover { background:var(--bg-2); color:var(--ink-900); }
.btn--danger { background:var(--danger); color:#fff; }
.btn--danger:hover { filter:brightness(.92); }
.btn--ok { background:var(--ok); color:#fff; }
.btn--ok:hover { filter:brightness(.94); }
.btn--sm { padding:.4rem .75rem; font-size:.8125rem; }
.btn--lg { padding:.8rem 1.5rem; font-size:1rem; }
.btn--block { width:100%; }
.btn-group { display:flex; gap:.5rem; flex-wrap:wrap; }

/* --------------------------------------------------------- cards */
.card { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.25rem; }
.card--flat { border-radius:var(--r); }
.card--pad-lg { padding:1.75rem; }
.card__title { font-size:1.0625rem; font-weight:650; color:var(--ink-900); margin:0 0 .35rem; }
.card-link { display:block; color:inherit; }
.card-link:hover { text-decoration:none; border-color:var(--ink-300); }

/* course card */
.course-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; color:inherit; height:100%; }
.course-card:hover { text-decoration:none; border-color:var(--brand-500); }
.course-card__media { position:relative; aspect-ratio:16/9; background:var(--brand-800); overflow:hidden; }
.course-card__media img { width:100%; height:100%; object-fit:cover; }
.course-card__ph { width:100%; height:100%; display:grid; place-items:center; background:linear-gradient(135deg,var(--brand-800),var(--brand-500)); color:#fff; font-size:1.5rem; font-weight:700; letter-spacing:.04em; }
.course-card__body { padding:1rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.course-card__title { font-size:1rem; font-weight:650; color:var(--ink-900); line-height:1.35; margin:0; }
.course-card__meta { margin-top:auto; padding-top:.6rem; border-top:1px solid var(--line-2); display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.8125rem; color:var(--ink-500); }
.course-card__price { font-weight:700; color:var(--ink-900); font-size:.9375rem; }
.course-card__price--free { color:var(--ok); }

/* --------------------------------------------------------- badges */
.badge {
  display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .5rem;
  border-radius:100px; font-size:.75rem; font-weight:650; line-height:1.5;
  background:var(--bg-3); color:var(--ink-600); white-space:nowrap;
}
.badge--brand { background:var(--brand-50); color:var(--brand); }
.badge--ok { background:var(--ok-bg); color:var(--ok); }
.badge--warn { background:var(--warn-bg); color:var(--warn); }
.badge--danger { background:var(--danger-bg); color:var(--danger); }
.badge--accent { background:var(--accent-bg); color:var(--accent); }
.badge--outline { background:#fff; border:1px solid var(--line); color:var(--ink-600); }

/* --------------------------------------------------------- alerts */
.alert { display:flex; gap:.65rem; padding:.85rem 1rem; border-radius:var(--r-sm); border:1px solid; font-size:.9375rem; }
.alert p:last-child { margin-bottom:0; }
.alert--success { background:var(--ok-bg); border-color:#BFE3D6; color:#0B5C44; }
.alert--error   { background:var(--danger-bg); border-color:#F0C7C4; color:#8C1A14; }
.alert--warning { background:var(--warn-bg); border-color:#EBD9B4; color:#6F4806; }
.alert--info    { background:var(--brand-50); border-color:var(--brand-100); color:var(--brand-700); }
.flash-stack { position:sticky; top:calc(var(--header-h) + .5rem); z-index:50; }
.flash-stack > * + * { margin-top:.5rem; }

/* --------------------------------------------------------- forms */
.field { margin-bottom:1.1rem; }
.label { display:block; font-size:.875rem; font-weight:600; color:var(--ink-800); margin-bottom:.35rem; }
.label .req { color:var(--danger); }
.hint { font-size:.8125rem; color:var(--ink-500); margin-top:.3rem; }
.input, .select, .textarea {
  width:100%; padding:.625rem .75rem; font-family:inherit; font-size:.9375rem; color:var(--ink-900);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); line-height:1.5;
  transition:border-color .12s, box-shadow .12s;
}
.input:focus, .select:focus, .textarea:focus {
  outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px var(--brand-50);
}
.input::placeholder, .textarea::placeholder { color:var(--ink-400); }
.textarea { min-height:120px; resize:vertical; }
.select { 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 fill='%2363788C' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .75rem center; padding-right:2.25rem; }
.is-invalid { border-color:var(--danger) !important; }
.field-error { color:var(--danger); font-size:.8125rem; margin-top:.3rem; }
.check { display:flex; gap:.6rem; align-items:flex-start; font-size:.9375rem; color:var(--ink-700); cursor:pointer; }
.check input { margin-top:.25rem; width:16px; height:16px; accent-color:var(--brand); flex:0 0 auto; }
.check-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.5rem .75rem; }
fieldset { border:0; padding:0; margin:0 0 1.25rem; }
legend { font-size:.875rem; font-weight:600; color:var(--ink-800); padding:0; margin-bottom:.5rem; }
.form-grid { display:grid; gap:0 1rem; grid-template-columns:1fr; }
@media (min-width:640px){ .form-grid--2 { grid-template-columns:1fr 1fr; } }
.form-actions { display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; padding-top:.5rem; }

/* --------------------------------------------------------- tables */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff; }
.table { width:100%; border-collapse:collapse; font-size:.875rem; }
.table th, .table td { padding:.7rem .85rem; text-align:start; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.table th { background:var(--bg-2); color:var(--ink-600); font-weight:650; font-size:.8125rem; white-space:nowrap; }
.table tbody tr:last-child td { border-bottom:0; }
.table tbody tr:hover { background:var(--bg-2); }
.table td strong { color:var(--ink-900); }

/* --------------------------------------------------------- progress */
.progress { height:6px; background:var(--bg-3); border-radius:100px; overflow:hidden; }
.progress__bar { height:100%; background:var(--brand); border-radius:100px; }
.progress__bar--ok { background:var(--ok); }
.progress-label { display:flex; justify-content:space-between; font-size:.75rem; color:var(--ink-500); margin-bottom:.3rem; }

/* --------------------------------------------------------- avatar */
.avatar { width:40px; height:40px; border-radius:100px; background:var(--brand-100); color:var(--brand-700);
  display:inline-grid; place-items:center; font-weight:700; font-size:.875rem; flex:0 0 auto; overflow:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar--lg { width:64px; height:64px; font-size:1.25rem; }
.avatar--sm { width:30px; height:30px; font-size:.75rem; }

/* --------------------------------------------------------- dashboard shell */
.shell { display:grid; grid-template-columns:1fr; gap:0; min-height:calc(100vh - var(--header-h)); }
@media (min-width:1024px){ .shell { grid-template-columns:250px minmax(0,1fr); } }
.sidebar { background:var(--bg-2); border-inline-end:1px solid var(--line); padding:1.25rem 0; }
.sidebar__group + .sidebar__group { margin-top:1.5rem; }
.sidebar__label { padding:0 1.25rem; font-size:.6875rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-400); margin-bottom:.4rem; }
.sidebar a { display:flex; align-items:center; gap:.6rem; padding:.55rem 1.25rem; color:var(--ink-600); font-size:.9375rem; font-weight:500; border-inline-start:2px solid transparent; }
.sidebar a:hover { background:var(--bg-3); color:var(--ink-900); text-decoration:none; }
.sidebar a.is-active { color:var(--brand); background:#fff; border-inline-start-color:var(--brand); font-weight:600; }
.sidebar__count { margin-inline-start:auto; background:var(--brand); color:#fff; border-radius:100px; padding:.05rem .4rem; font-size:.6875rem; font-weight:700; }
.shell__main { padding:1.5rem 1rem 3rem; min-width:0; }
@media (min-width:768px){ .shell__main { padding:2rem 2rem 4rem; } }
.page-head { display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-start; justify-content:space-between; margin-bottom:1.5rem; }
.page-head h1 { font-size:1.5rem; margin:0; }
.page-head p { margin:.25rem 0 0; color:var(--ink-500); font-size:.9375rem; }

/* --------------------------------------------------------- stats */
.stat { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.1rem; }
.stat__value { font-size:1.75rem; font-weight:700; color:var(--ink-900); line-height:1.1; letter-spacing:-.02em; }
.stat__label { font-size:.8125rem; color:var(--ink-500); margin-top:.2rem; }

/* --------------------------------------------------------- hero */
.hero { background:linear-gradient(180deg,var(--brand-50) 0%, #fff 100%); border-bottom:1px solid var(--line-2); }
.hero__inner { padding-block:2.5rem 3rem; display:grid; gap:2rem; grid-template-columns:1fr; align-items:center; }
@media (min-width:960px){ .hero__inner { grid-template-columns:1.05fr .95fr; padding-block:4rem 4.5rem; gap:3rem; } }
.hero h1 { margin-bottom:.75rem; }
.hero__cta { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.5rem; }
.hero__points { list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.5rem; }
.hero__points li { display:flex; gap:.6rem; align-items:flex-start; font-size:.9375rem; color:var(--ink-600); }
.hero__points li::before { content:""; width:16px; height:16px; margin-top:.28rem; flex:0 0 auto; border-radius:100px; background:var(--ok-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230F7355' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m4.5 8.2 2.3 2.3 4.7-5'/%3E%3C/svg%3E"); }
.hero__panel { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.25rem; box-shadow:var(--shadow-lg); }

/* --------------------------------------------------------- level tiles */
.tile { display:flex; flex-direction:column; gap:.35rem; padding:1.1rem 1.15rem; background:#fff; border:1px solid var(--line); border-radius:var(--r); color:inherit; }
.tile:hover { text-decoration:none; border-color:var(--brand-500); background:var(--brand-50); }
.tile__title { font-weight:650; color:var(--ink-900); }
.tile__meta { font-size:.8125rem; color:var(--ink-500); }

/* --------------------------------------------------------- steps */
.steps { counter-reset:step; display:grid; gap:1.25rem; }
.step { position:relative; padding-inline-start:3rem; }
.step::before {
  counter-increment:step; content:counter(step);
  position:absolute; inset-inline-start:0; top:0; width:2rem; height:2rem; border-radius:100px;
  background:var(--brand-50); color:var(--brand); display:grid; place-items:center; font-weight:700; font-size:.875rem;
}
.step h3 { font-size:1rem; margin-bottom:.2rem; }
.step p { font-size:.9375rem; color:var(--ink-600); margin:0; }

/* --------------------------------------------------------- curriculum */
.unit { border:1px solid var(--line); border-radius:var(--r); background:#fff; overflow:hidden; }
.unit + .unit { margin-top:.75rem; }
.unit > summary { padding:.9rem 1.1rem; cursor:pointer; display:flex; align-items:center; gap:.75rem; font-weight:650; color:var(--ink-900); list-style:none; }
.unit > summary::-webkit-details-marker { display:none; }
.unit > summary::after { content:"+"; margin-inline-start:auto; color:var(--ink-400); font-weight:400; font-size:1.25rem; line-height:1; }
.unit[open] > summary { border-bottom:1px solid var(--line-2); }
.unit[open] > summary::after { content:"−"; }
.unit__count { font-weight:500; font-size:.8125rem; color:var(--ink-500); }
.lesson-row { display:flex; align-items:center; gap:.75rem; padding:.65rem 1.1rem; border-bottom:1px solid var(--line-2); font-size:.9375rem; color:var(--ink-700); }
.lesson-row:last-child { border-bottom:0; }
a.lesson-row:hover { background:var(--bg-2); text-decoration:none; }
.lesson-row__icon { width:20px; height:20px; flex:0 0 auto; color:var(--ink-400); }
.lesson-row__title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lesson-row__right { margin-inline-start:auto; display:flex; align-items:center; gap:.5rem; font-size:.8125rem; color:var(--ink-500); }
.lesson-row.is-done .lesson-row__icon { color:var(--ok); }
.lesson-row.is-current { background:var(--brand-50); font-weight:600; color:var(--brand-700); }

/* --------------------------------------------------------- video */
.video-wrap { position:relative; aspect-ratio:16/9; background:#000; border-radius:var(--r); overflow:hidden; }
.video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-empty { display:grid; place-items:center; height:100%; color:#95A6B5; font-size:.9375rem; text-align:center; padding:1rem; }

/* --------------------------------------------------------- prose */
.prose { color:var(--ink-700); font-size:1rem; line-height:1.75; }
.prose h2 { margin-top:2rem; font-size:1.3rem; }
.prose h3 { margin-top:1.5rem; font-size:1.1rem; }
.prose ul, .prose ol { padding-inline-start:1.35rem; }
.prose li + li { margin-top:.35rem; }
.prose blockquote { margin:1.25rem 0; padding:.75rem 1rem; border-inline-start:3px solid var(--brand-100); background:var(--bg-2); color:var(--ink-600); border-radius:0 var(--r-sm) var(--r-sm) 0; }
.prose table { width:100%; border-collapse:collapse; margin:1.25rem 0; font-size:.9375rem; }
.prose th, .prose td { border:1px solid var(--line); padding:.5rem .7rem; text-align:start; }
.prose th { background:var(--bg-2); }
.prose img { border-radius:var(--r-sm); margin:1.25rem 0; }
.prose a { text-decoration:underline; }

/* --------------------------------------------------------- quiz */
.q-card { border:1px solid var(--line); border-radius:var(--r); padding:1.25rem; background:#fff; }
.q-card + .q-card { margin-top:1rem; }
.q-card__num { font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-400); margin-bottom:.4rem; }
.q-card__text { font-weight:600; color:var(--ink-900); margin-bottom:.85rem; }
.q-opt { display:flex; gap:.7rem; align-items:flex-start; padding:.65rem .8rem; border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; font-size:.9375rem; }
.q-opt + .q-opt { margin-top:.5rem; }
.q-opt:hover { border-color:var(--brand-500); background:var(--brand-50); }
.q-opt input { margin-top:.2rem; accent-color:var(--brand); flex:0 0 auto; }
.q-opt.is-correct { border-color:#9FD6C3; background:var(--ok-bg); }
.q-opt.is-wrong { border-color:#EEB9B5; background:var(--danger-bg); }
.q-timer { font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink-900); }
.score-ring { width:104px; height:104px; border-radius:100px; display:grid; place-items:center; font-size:1.5rem; font-weight:700; color:#fff; }

/* --------------------------------------------------------- empty state */
.empty { text-align:center; padding:2.5rem 1rem; border:1px dashed var(--line); border-radius:var(--r); background:var(--bg-2); }
.empty h3 { font-size:1.0625rem; margin-bottom:.35rem; }
.empty p { color:var(--ink-500); font-size:.9375rem; margin-bottom:1rem; }

/* --------------------------------------------------------- misc */
.breadcrumb { display:flex; flex-wrap:wrap; gap:.4rem; font-size:.8125rem; color:var(--ink-500); margin-bottom:1rem; }
.breadcrumb a { color:var(--ink-500); }
.breadcrumb span::after { content:"/"; margin-inline-start:.4rem; color:var(--ink-300); }
.chip-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; padding:.35rem .75rem; border:1px solid var(--line); border-radius:100px; font-size:.8125rem; color:var(--ink-600); background:#fff; }
.chip:hover { text-decoration:none; border-color:var(--brand-500); color:var(--brand); }
.chip.is-active { background:var(--brand); border-color:var(--brand); color:#fff; }
.pagination { display:flex; gap:.35rem; justify-content:center; margin-top:2rem; flex-wrap:wrap; }
.pagination a, .pagination span { display:inline-grid; place-items:center; min-width:36px; height:36px; padding:0 .5rem; border:1px solid var(--line); border-radius:var(--r-sm); font-size:.875rem; color:var(--ink-600); background:#fff; }
.pagination a:hover { border-color:var(--brand-500); text-decoration:none; }
.pagination .is-active { background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
.divider-text { display:flex; align-items:center; gap:1rem; color:var(--ink-400); font-size:.8125rem; margin:1.25rem 0; }
.divider-text::before, .divider-text::after { content:""; flex:1; height:1px; background:var(--line); }
.kv { display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; font-size:.875rem; }
.kv dt { color:var(--ink-500); } .kv dd { margin:0; color:var(--ink-900); font-weight:500; }

/* --------------------------------------------------------- auth pages */
.auth-wrap { min-height:calc(100vh - var(--header-h)); display:grid; place-items:center; padding:2rem 1rem 4rem; background:var(--bg-2); }
.auth-card { width:100%; max-width:440px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:1.75rem; box-shadow:var(--shadow); }
.auth-card--wide { max-width:600px; }
.auth-card h1 { font-size:1.5rem; margin-bottom:.35rem; }

/* --------------------------------------------------------- footer */
.site-footer { background:var(--ink-900); color:#A9BAC9; padding-block:3rem 2rem; margin-top:auto; font-size:.9375rem; }
.site-footer h4 { color:#fff; font-size:.8125rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.85rem; }
.site-footer a { color:#A9BAC9; }
.site-footer a:hover { color:#fff; }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li + li { margin-top:.45rem; }
.footer-grid { display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:640px){ .footer-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .footer-grid { grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; } }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:2.5rem; padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.8125rem; color:#8496A6; }
.lang-switch { display:inline-flex; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; }
.lang-switch a { padding:.3rem .55rem; font-size:.75rem; font-weight:650; color:var(--ink-500); background:#fff; }
.lang-switch a.is-active { background:var(--brand); color:#fff; }
.lang-switch a:hover { text-decoration:none; }
.site-footer .lang-switch { border-color:rgba(255,255,255,.2); }
.site-footer .lang-switch a { background:transparent; color:#A9BAC9; }
.site-footer .lang-switch a.is-active { background:rgba(255,255,255,.14); color:#fff; }

body { display:flex; flex-direction:column; min-height:100vh; }
main { flex:1 0 auto; }

@media print { .site-header, .site-footer, .sidebar, .btn { display:none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }