/* Question editor in the brand colours: road navy, cloud and signal yellow. Minimal, high contrast.
   Manrope for text and controls, Unbounded (wide) only for page titles, big numbers and the wordmark. */
:root {
  --bg: #f4f6fa; /* Bulut */
  --surface: #ffffff;
  --surface-muted: #f9fafc;
  --text: #1c1f26; /* Asfalt */
  --text-muted: #4a5263;
  --text-subtle: #5e6678; /* 5.3:1 on --bg; the board's #6b7385 is below 4.5:1 there */
  --border: #dce4f2; /* Osmon */
  --border-strong: #c4cfe2;
  --border-input: #7d869a; /* 3.4:1 or more on every surface */
  --primary: #0e2a5c; /* Yo'l ko'ki */
  --primary-hover: #1c3f7a;
  --primary-soft: #dce4f2;
  --primary-border: #a9bad7;
  --on-primary: #fff; /* text on a --primary fill */
  /* Signal sariq: a fill under navy text (8.8:1) or a detail on navy; never text on white (1.6:1). */
  --accent: #ffc425;
  --accent-hover: #f5b700;
  --on-accent: #0e2a5c;
  /* The navy itself, for the brand's fills (overview hero, login page) whatever the theme. */
  --brand: #0e2a5c;
  --on-brand: #fff;
  --on-brand-muted: #dce4f2;
  --on-brand-subtle: #b9c6dd;
  --logo-ink: var(--primary);
  --success: #17804a; /* Yashil chiroq */
  --success-soft: #eff8f2;
  --success-border: #8fcaa6;
  --on-success: #fff;
  --warning: #92400e;
  --warning-soft: #fff1c7;
  --on-warning: #fff;
  /* Text red, readable on white and on --danger-soft; Qizil chiroq itself only as a fill. */
  --danger: #b42318;
  --danger-soft: #fde8e6;
  --danger-fill: #d83a2e;
  --on-danger: #fff;
  /* Translations page: a field still without Russian. */
  --pending-border: #d97706;
  --pending-bg: #fffbeb;
  /* Toasts and chart tooltips: dark on the light theme, light on the dark one. */
  --inverse: #1c1f26;
  --on-inverse: #fff;
  --shadow: 0 8px 24px rgba(28, 31, 38, 0.18);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --bg-clear: rgba(244, 246, 250, 0); /* --bg, fully transparent: where a gradient fades into it */
  --auth-bg: var(--brand);
  /* Segmented control (users page filters): the track and the chosen segment on it. */
  --seg-track: var(--border);
  --seg-thumb: var(--surface);
  --focus: 0 0 0 3px rgba(14, 42, 92, 0.3);
  --focus-ring: 2px solid var(--primary);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --sidebar: 248px;
  --topbar: 61px; /* the phone/tablet top bar, for things placed under it */
  /* Chart series (validated categorical slots 1-3) and recessive chart ink. */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a; /* under 3:1 on white: only beside a text label with the number */
  --grid: #e7ecf4;
  --font-display: Unbounded, Manrope, system-ui, sans-serif;
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}

/* Night mode: picked in the sidebar ("Tungi rejim") and kept in this browser; the page's head script sets
   data-theme before the first paint. Light by default, the computer's own setting is not followed.
   A deep navy ground, light text and lighter steps of the brand hues; fills that carry text (primary,
   success, warning, danger, toasts) take dark text. Every text pair 4.5:1 or more, field borders 3.5:1. */
:root[data-theme="dark"] {
  --bg: #0b1324;
  --surface: #121d33;
  --surface-muted: #172440;
  --text: #e8edf7; /* 13.1:1 or more on the surfaces */
  --text-muted: #b4bed0; /* 8.2:1 or more */
  --text-subtle: #98a3b8; /* 6.1:1 on --surface-muted, 5.3:1 on --primary-soft */
  --border: #24324f;
  --border-strong: #33456a;
  --border-input: #6b7a99; /* 3.5:1 or more on the surfaces */
  --placeholder: #8591a8; /* 4.8:1 or more on the fields */
  --primary: #9db9ff; /* links, active and focus: 7.9:1 or more on the surfaces, 6.9:1 on --primary-soft */
  --primary-hover: #b8ccff;
  --primary-soft: #1e2e50;
  --primary-border: #3a5590;
  --on-primary: #0b1324; /* 9.5:1 on --primary */
  --accent-hover: #ffd35c;
  --logo-ink: #fff;
  --success: #4cc38a; /* 7.6:1 on --surface, 6.1:1 on --success-soft */
  --success-soft: #123524;
  --success-border: #2e6b4c;
  --on-success: #0b1324;
  --warning: #f5b454; /* 9.2:1 on --surface, 7.6:1 on --warning-soft */
  --warning-soft: #3a2a0e;
  --on-warning: #0b1324;
  --danger: #ff8f85; /* 7.6:1 on --surface, 6.9:1 on --danger-soft */
  --danger-soft: #3d1b1a;
  --danger-fill: #ff7a6e;
  --on-danger: #0b1324;
  --pending-border: #d99a3a;
  --pending-bg: #2a2110;
  --inverse: #e8edf7;
  --on-inverse: #0b1324;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bg-clear: rgba(11, 19, 36, 0);
  --auth-bg: var(--bg);
  --seg-thumb: #33456a; /* lighter than the track, as a raised segment reads on a dark ground; text 8.1:1 */
  --focus: 0 0 0 3px rgba(157, 185, 255, 0.4);
  /* The same three hues a step for the dark surface (validated there: lightness band, CVD, 3:1). */
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --grid: #1f2b45;
  color-scheme: dark;
}
/* The browsers' own placeholder grey is under 4.5:1 on the dark fields (light mode keeps theirs). */
:root[data-theme="dark"] ::placeholder { color: var(--placeholder); opacity: 1; }

* { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.5; background: var(--bg); }
h1, h2, p { margin: 0; }
a { color: var(--primary); }
button, input, select, textarea { font: inherit; color: inherit; }
.tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-subtle); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.q-link:focus-visible, .nav-link:focus-visible, .dropzone:focus-visible { outline-offset: -2px; }

.skip-link { position: absolute; left: 12px; top: -48px; background: var(--primary); color: var(--on-primary); padding: 8px 12px; border-radius: var(--radius-sm); z-index: 10; }
.skip-link:focus { top: 12px; }

/* Layout */
.topbar { display: none; }
.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.main { padding: 32px 40px 0; max-width: 1120px; width: 100%; margin: 0 auto; }
.main:focus { box-shadow: none; }

/* Sidebar */
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); }
.sidebar-head { padding: 20px 20px 12px; }
/* Lockup: the mark beside the lowercase wordmark, "boshqaruv paneli" under it in the sidebar. */
.logo { display: flex; align-items: center; gap: 10px; color: var(--logo-ink); text-decoration: none; }
.logo-mark { display: block; width: 36px; height: 36px; flex-shrink: 0; }
.logo-text { display: grid; gap: 3px; min-width: 0; }
.wordmark { font-family: var(--font-display); font-size: 17px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; }
.wordmark b { font-weight: 700; }
.logo-caption { font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--text-subtle); }
.logo-on-dark { color: var(--on-brand); }
.logo-on-dark .logo-caption { color: var(--on-brand-subtle); }
/* Night mode: the yellow mark wherever the navy one is shown (its square would vanish into the dark ground). */
.logo-mark-night { display: none; }
:root[data-theme="dark"] .logo-mark-day { display: none; }
:root[data-theme="dark"] .logo-mark-night { display: block; }
.label-sm { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.topic-progress { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-subtle); }
.bar { flex: 1; height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.done .bar > span { background: var(--success); }
.sidebar-foot { margin-top: auto; padding: 10px 20px 14px; border-top: 1px solid var(--border); display: grid; gap: 6px; font-size: 13px; }
.sidebar-user { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sidebar-foot a { color: var(--text-muted); }
.link-btn { background: none; border: 0; padding: 0; color: var(--text-muted); text-decoration: underline; cursor: pointer; }

/* Controls */
.input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-input); border-radius: var(--radius-sm); background: var(--surface); transition: border-color 150ms, box-shadow 150ms; }
.input:hover { border-color: var(--text-subtle); }
.input:focus, .input:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--focus); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input-sm { min-height: 36px; padding: 6px 10px; font-size: 14px; }
textarea.input { resize: vertical; line-height: 1.5; }
.input-number { max-width: 160px; font-size: 18px; font-weight: 600; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 150ms, border-color 150ms; white-space: nowrap; }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: 16px; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
/* The yellow call to action: rare, one per page at most (the overview's "continue" button). */
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-muted); }
.btn-ghost { background: transparent; color: var(--primary); padding: 0 10px; }
.btn-ghost:hover { background: var(--primary-soft); }
.btn-danger-ghost { background: transparent; color: var(--danger); }
.btn-danger-ghost:hover { background: var(--danger-soft); }
.icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-subtle); cursor: pointer; }
.icon-btn:hover { background: var(--danger-soft); color: var(--danger); }

/* Toasts */
.toasts { position: fixed; top: 20px; right: 24px; display: grid; gap: 8px; z-index: 20; max-width: min(440px, calc(100vw - 32px)); }
.toast { display: flex; align-items: flex-start; gap: 8px; padding: 12px 8px 12px 16px; border-radius: var(--radius); background: var(--inverse); color: var(--on-inverse); font-weight: 500; box-shadow: var(--shadow); transition: opacity 300ms, transform 300ms; }
.toast > span { flex: 1; padding-top: 2px; }
.toast-success { background: var(--success); color: var(--on-success); }
.toast-error { background: var(--danger-fill); color: var(--on-danger); }
.toast-warning { background: var(--warning); color: var(--on-warning); }
.toast-info { background: var(--primary); color: var(--on-primary); }
.toast-close { flex-shrink: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: inherit; cursor: pointer; opacity: 0.85; }
/* Tinted with the toast's own text colour: white on the light theme's fills, dark on the night ones. */
.toast-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 16%, transparent); }
.toast-close:focus-visible { outline: 2px solid currentColor; outline-offset: 0; }
.toast-hide { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.toast a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.toast a:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; border-radius: 2px; }

/* Topic page */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-head-text { flex: 1; min-width: 0; display: grid; gap: 6px; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--text-subtle); }
/* Unbounded is wide: smaller than a text face would be, and long words may break rather than overflow. */
h1 { font-family: var(--font-display); font-size: 26px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: break-word; }
.progress-lg { display: flex; align-items: center; gap: 12px; margin-top: 6px; color: var(--text-muted); max-width: 520px; }
.progress-lg .bar { height: 8px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
/* Wide tables scroll inside their card instead of widening the page. */
.list-card { padding: 0; overflow-x: auto; margin-bottom: 40px; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--surface-muted); min-height: 60px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); cursor: pointer; }
.check-all { flex: none; white-space: nowrap; min-height: 44px; padding-right: 8px; }
.check input, .q-check { width: 18px; height: 18px; flex-shrink: 0; margin: 0; accent-color: var(--primary); cursor: pointer; }
/* The strip around a row's checkbox is part of its target: easier to hit than the box alone. */
.q-check-hit { align-self: stretch; display: flex; align-items: center; padding: 0 10px; margin: 0 -10px; cursor: pointer; }
.bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bulk-actions select { max-width: 280px; }
.q-list { list-style: none; margin: 0; padding: 0; }
.q-item { display: flex; align-items: center; gap: 12px; padding-left: 20px; border-bottom: 1px solid var(--border); }
.q-item:last-child { border-bottom: 0; }
.q-item:hover { background: var(--surface-muted); }
.q-item { scroll-margin: 96px 0; }
.q-item:target, .q-item:has(:target) { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); }
.q-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px 20px 12px 0; color: var(--text); text-decoration: none; }
.q-number { width: 56px; flex-shrink: 0; font-weight: 600; color: var(--text-muted); }
.q-thumb { width: 56px; height: 40px; flex-shrink: 0; border-radius: 6px; object-fit: cover; background: var(--bg); }
.q-thumb-empty { background: repeating-linear-gradient(45deg, var(--bg), var(--bg) 4px, var(--surface-muted) 4px, var(--surface-muted) 8px); }
.q-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.q-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex-shrink: 0; max-width: 40%; }
.q-hit { display: block; margin-top: 4px; font-size: 14px; color: var(--text-muted); }
.badge { white-space: nowrap; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--bg); color: var(--text-muted); }
.badge-warn { background: var(--warning-soft); color: var(--warning); }
/* Signal yellow, as a fill with navy text (8.8:1): the question is in the app's "Qiyin savollar". */
.badge-hard { background: var(--accent); color: var(--on-accent); }
.chevron { color: var(--text-subtle); flex-shrink: 0; }

.empty { text-align: center; padding: 56px 24px; display: grid; justify-items: center; gap: 10px; }
.empty h1, .empty h2 { font-size: 20px; }
.empty p { color: var(--text-muted); margin-bottom: 8px; }

/* Question form */
/* Wraps on narrow screens instead of squeezing a long topic name. */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 14px; color: var(--text-subtle); margin-bottom: 6px; }
.breadcrumb > * { min-width: 0; overflow-wrap: anywhere; }
.breadcrumb a { color: var(--text-muted); }
.form-title { margin-bottom: 20px; }
.form-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.form-head-text { display: grid; gap: 6px; min-width: 0; }
.form-head .form-meta { margin: 0; }
.sibling-nav { display: flex; gap: 4px; margin-left: -10px; }
.view-prefs { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 14px; }
.form-meta { font-size: 13px; margin: -12px 0 20px; }
.form-meta a { color: var(--text-muted); font-weight: 600; }
mark { background: var(--warning-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.q-form { display: grid; gap: 16px; }
.section-title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; margin-bottom: 16px; }
.step { width: 26px; height: 26px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.optional { font-size: 13px; font-weight: 400; color: var(--text-subtle); }
.req { color: var(--danger); }
.grid-meta { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 20px; }
.number-source { color: var(--text-muted); }
.number-check-box { display: grid; justify-items: start; gap: 8px; margin-top: 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--warning); font-size: 14px; font-weight: 500; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; align-content: start; }
.field > label { font-size: 14px; font-weight: 600; }
.help { font-size: 13px; color: var(--text-subtle); }
.help-strong { color: var(--text-muted); font-weight: 600; }
.field-error { font-size: 13px; font-weight: 500; color: var(--danger); margin-top: 6px; }

.error-summary { border: 1px solid var(--danger); background: var(--danger-soft); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 16px; }
.error-summary h2 { font-size: 15px; color: var(--danger); margin-bottom: 6px; }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary a { color: var(--danger); font-weight: 500; }

.draft-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 12px 12px 20px; margin-bottom: 16px; border: 1px solid var(--primary-border); border-radius: var(--radius); background: var(--primary-soft); color: var(--primary); font-weight: 500; }
.draft-banner p { flex: 1 1 280px; }

.dropzone { position: relative; display: flex; align-items: center; justify-content: center; min-height: 140px; border: 2px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-muted); cursor: pointer; transition: border-color 150ms, background 150ms; overflow: hidden; }
.dropzone:hover, .dropzone.dragging { border-color: var(--primary); background: var(--primary-soft); }
.dropzone img { max-width: 100%; max-height: 320px; display: block; }
/* Without an image: one compact row; with one it grows to the preview. */
.dropzone:not(.has-image) { min-height: 56px; justify-content: flex-start; border-width: 1.5px; }
.dz-empty { display: flex; align-items: center; gap: 10px; padding: 8px 16px; color: var(--text-muted); text-align: left; }
.dz-empty svg { flex-shrink: 0; color: var(--primary); }
.dz-empty strong { color: var(--text); }
.dz-replace { display: none; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: rgba(28, 31, 38, 0.78); color: #fff; font-size: 13px; white-space: nowrap; pointer-events: none; }
.dropzone.has-image:hover .dz-replace, .dropzone.has-image:focus-visible .dz-replace { display: block; }
.dropzone + .help { margin-top: 8px; }
[data-clear-image] { margin-top: 4px; color: var(--danger); }

/* Answer columns: Uzbek always, Russian and Cyrillic when switched on in the view preferences. */
.q-form { --answer-cols: 2; }
/* The classes sit on <html>, set by base.html before the page is drawn, so nothing jumps on load. */
.show-cyrl .q-form { --answer-cols: 3; }
.hide-ru .q-form { --answer-cols: 1; }
.hide-ru.show-cyrl .q-form { --answer-cols: 2; }
.answers-head, .answer-row { display: grid; grid-template-columns: 44px 40px repeat(var(--answer-cols), minmax(0, 1fr)) 40px; gap: 10px; align-items: center; }
/* Top-aligned, so the circle and F-key stay beside the first line of a long, wrapped answer. */
.answer-row { align-items: start; }
textarea.answer-input { resize: none; overflow: hidden; height: 44px; line-height: 1.5; }
.answers-head { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-subtle); margin-bottom: 6px; }
.answers { display: grid; gap: 8px; margin-bottom: 8px; }
.answers-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.answers-foot .kbd-hint { margin-left: auto; }
.answers.has-error .answer-row { border-color: var(--danger); }
.answer-row { padding: 6px; border: 1px solid transparent; border-radius: var(--radius); }
.answer-row:has(input[type="radio"]:checked) { background: var(--success-soft); border-color: var(--success-border); }
.correct { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; cursor: pointer; }
.correct input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.correct-ui { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--text-subtle); background: var(--surface); color: transparent; display: inline-flex; align-items: center; justify-content: center; transition: all 150ms; }
.correct:hover .correct-ui { border-color: var(--success); }
.correct input:checked + .correct-ui { background: var(--success); border-color: var(--success); color: var(--on-success); }
.correct input:focus-visible + .correct-ui { outline: var(--focus-ring); outline-offset: 2px; }
.answer-key { font-size: 13px; font-weight: 700; line-height: 44px; color: var(--primary); text-align: center; }
.remove-answer { margin-top: 2px; }

.video-field { display: grid; gap: 10px; justify-items: start; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.video-field video { width: 100%; max-width: 560px; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); }
.video-progress { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 560px; }
.video-progress .bar { height: 8px; }
.video-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-danger-text { color: var(--danger); }
.btn-danger-text:hover { background: var(--danger-soft); }
.video-field.dragging { outline: 2px dashed var(--primary); outline-offset: 6px; border-radius: var(--radius); }
.video-note { font-size: 14px; font-weight: 600; color: var(--success); }
.free-sample { display: grid; gap: 6px; margin-top: 16px; }
.switch:has(input:disabled) { cursor: not-allowed; color: var(--text-subtle); }
.switch:has(input:disabled) .switch-ui { opacity: 0.45; }
.cyrl-field, .cyrl-input, .cyrl-col { display: none; }
.show-cyrl .cyrl-field { display: grid; margin-top: 16px; }
.show-cyrl .cyrl-input, .show-cyrl .cyrl-col { display: block; }
.hide-ru .ru-field, .hide-ru .ru-input, .hide-ru .ru-col { display: none; }
.hide-ru .lang-grid { grid-template-columns: minmax(0, 1fr); }

.options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 16px 24px; }
.switch { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; position: relative; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-ui { width: 40px; height: 24px; border-radius: 999px; background: var(--border-input); position: relative; transition: background 150ms; flex-shrink: 0; }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 150ms; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.switch input:checked + .switch-ui { background: var(--primary); }
.switch input:checked + .switch-ui::after { transform: translateX(16px); background: var(--on-primary); }
.switch input:focus-visible + .switch-ui { outline: var(--focus-ring); outline-offset: 2px; }
.switch-sm { gap: 8px; font-size: 14px; }
.switch-sm .switch-ui { width: 34px; height: 20px; }
.switch-sm .switch-ui::after { top: 3px; left: 3px; width: 14px; height: 14px; }
.switch-sm input:checked + .switch-ui::after { transform: translateX(14px); }
/* "Tungi rejim": a button with role="switch", drawn from data-theme on <html>, so it is right from the first paint. */
.theme-toggle { justify-self: start; min-height: 36px; padding: 0; border: 0; background: none; text-align: left; }
.theme-toggle:focus-visible { outline: none; }
.theme-toggle:focus-visible .switch-ui { outline: var(--focus-ring); outline-offset: 2px; }
:root[data-theme="dark"] .theme-toggle .switch-ui { background: var(--primary); }
:root[data-theme="dark"] .theme-toggle .switch-ui::after { transform: translateX(14px); background: var(--on-primary); }

.form-actions { position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 16px 0 24px; margin-top: 8px; background: linear-gradient(to bottom, var(--bg-clear), var(--bg) 30%); }
.spacer { flex: 1; }
.kbd-hint { font-size: 13px; color: var(--text-subtle); }
kbd { font-family: inherit; font-size: 12px; padding: 1px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); }
.saving .form-actions .btn, .waiting .form-actions .btn { opacity: 0.6; pointer-events: none; }
.saving .form-actions .btn.is-submitting, .waiting .form-actions .btn.is-submitting { opacity: 1; }
/* Phones only: the edit form's secondary actions, at the end of the page instead of beside Saqlash. */
.form-end { display: none; }

/* Section navigation */
.main-nav { display: grid; gap: 2px; padding: 4px 12px 12px; }
.nav-link { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 500; text-decoration: none; }
.nav-link:hover { background: var(--surface-muted); color: var(--text); }
.nav-link.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav-badge { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; text-align: center; }
.menu-button .icon-close, .menu-button[aria-expanded="true"] .icon-open { display: none; }
.menu-button[aria-expanded="true"] .icon-close { display: inline; }
.user-name { font-weight: 600; color: var(--text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Public documents */
.doc-page { padding: 32px 16px; }
.doc { max-width: 720px; margin: 0 auto; display: grid; gap: 12px; line-height: 1.65; }
.doc .logo { margin-bottom: 12px; }
.doc h2 { font-size: 18px; margin-top: 12px; }
.doc ul { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.doc hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }

/* Login: the white card on brand navy (night: the dark card on the dark ground), the lockup (yellow mark) above it. */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--auth-bg); }
:root:has(.auth-page) { background: var(--auth-bg); } /* also behind the overscroll on phones */
.auth-main { width: 100%; max-width: 400px; display: grid; gap: 24px; }
.auth-main > .logo { justify-self: center; }
.auth-main .logo-mark { width: 44px; height: 44px; }
.auth-main .wordmark { font-size: 21px; }
.auth-card { display: grid; gap: 12px; padding: 32px; }
.auth-card h1 { font-size: 22px; }
.auth-form { display: grid; gap: 16px; margin-top: 8px; }
.auth-form .btn { width: 100%; }
.auth-card .error-summary { margin: 0; }
.auth-card .error-summary p { color: var(--danger); font-weight: 500; }

/* Overview */
.hero { display: grid; gap: 14px; margin-bottom: 16px; }
.hero-numbers { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
/* Big numbers (.hero-value, .stat-value) never wrap: they shrink with their card instead. 100cqi is the
   card's content width and --fit-em the width of the longest value expected ("1 234 567" in Unbounded is
   5.7em), so that value always fits; on a wide card the size stops at the design size. */
.hero, .stat { container-type: inline-size; }
.hero-value { --fit-em: 5.8; font-family: var(--font-display); font-size: clamp(20px, calc(100cqi / var(--fit-em)), 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.hero-label { font-size: 17px; color: var(--text-muted); }
.hero .progress-lg { max-width: none; }
.hero-next { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.hero-topic { font-size: 17px; font-weight: 600; }
.hero-done { color: var(--success); font-weight: 600; }
/* Overview hero in navy: light text, yellow progress and call to action. */
.hero-brand { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.hero-brand .hero-label, .hero-brand .progress-lg { color: var(--on-brand-muted); }
.hero-brand .eyebrow, .hero-brand .muted { color: var(--on-brand-subtle); }
.hero-brand .bar { background: rgba(255, 255, 255, 0.2); }
.hero-brand .bar > span { background: var(--accent); }
.hero-brand .hero-next { border-top-color: rgba(255, 255, 255, 0.18); }
.hero-brand .hero-done { color: var(--accent); }
.hero-brand :focus-visible { outline-color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.stat { display: grid; gap: 4px; align-content: start; text-decoration: none; color: var(--text); transition: border-color 150ms; }
a.stat { position: relative; padding-right: 44px; }
a.stat:hover { border-color: var(--primary); }
/* An arrow marks the cards that open a page; a card that is only a count has none and no hover. */
a.stat::after { content: ""; position: absolute; top: 26px; right: 22px; width: 8px; height: 8px; border-top: 2px solid var(--text-subtle); border-right: 2px solid var(--text-subtle); transform: rotate(45deg); }
a.stat:hover::after { border-color: var(--primary); }
.stat-static { background: var(--surface-muted); }
.stat-value { --fit-em: 5.8; --max-size: 26px; --arrow-room: 0px; font-family: var(--font-display); font-size: clamp(12px, calc((100cqi - var(--arrow-room)) / var(--fit-em)), var(--max-size)); font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; white-space: nowrap; margin-right: var(--arrow-room); }
/* Two counts in one value, "1 276 / 1 276" (7.3em). */
.stat-value.pair { --fit-em: 7.4; }
.stat-label { color: var(--text-muted); }
.stat-warn .stat-value { color: var(--warning); }
.section-title.flush { margin: 0; }
.q-meta { display: block; font-size: 13px; color: var(--text-subtle); margin-top: 2px; }
.empty-inline { padding: 20px; }
.gaps { display: grid; gap: 10px; margin-bottom: 16px; }
.gap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gap-list a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--bg); color: var(--primary); font-size: 14px; font-weight: 600; text-decoration: none; }
.gap-list a:hover { background: var(--primary-soft); }
.gap-list li.muted { align-self: center; padding: 0 6px; font-size: 14px; }
.empty-icon { color: var(--success); }

/* Translations */
.translate-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.translate-head .q-number { width: auto; font-size: 18px; color: var(--text); }
.translate-head .btn { margin-left: auto; }
.translate-image { max-width: 100%; max-height: 260px; border-radius: var(--radius); margin-bottom: 16px; display: block; }
.translate-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; padding: 12px 0; border-top: 1px solid var(--border); }
.translate-head + .translate-row, .translate-image + .translate-row, .section-title + .translate-row { border-top: 0; }
.source { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-muted); }
.correct-label { color: var(--success); font-weight: 600; }
/* Still without Russian: tinted until something is typed. */
.translate-card .input:placeholder-shown { border-color: var(--pending-border); background: var(--pending-bg); }
.translate-card .input:placeholder-shown:focus { background: var(--surface); }
.q-form .section-title { margin-top: 12px; }

/* Topic management and team */
.form-stack { display: grid; gap: 18px; }
.q-form.narrow { max-width: 560px; }
.narrow-card { max-width: 560px; display: grid; gap: 12px; justify-items: start; margin: 8px 0 40px; }
.reorder { display: flex; flex-direction: column; gap: 8px; }
.reorder .icon-btn { width: 36px; height: 28px; }
.icon-btn-neutral:hover { background: var(--primary-soft); color: var(--primary); }
.icon-btn:disabled { opacity: 0.35; cursor: default; background: transparent; }
.topic-row .q-link { padding-left: 4px; }
.topic-progress-wide { width: 180px; flex-shrink: 0; }

/* Savollar page */
.find-card { display: grid; gap: 8px; margin-bottom: 16px; }
/* A whole card that opens a page (Savollar → Qiyin savollar). */
/* Savollar jadvali: every question number as a tile, coloured by its state. */
.grid-card { margin-bottom: 16px; }
.grid-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-input); background: var(--surface); color: var(--text); font-weight: 600; font-size: 14px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chip .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--tile-bg); border: 1px solid var(--tile-border); }
.chip-chala, .tile-chala { --tile-bg: var(--warning-soft); --tile-border: var(--warning); --tile-text: var(--warning); }
.chip-hidden, .tile-hidden { --tile-bg: var(--surface-muted); --tile-border: var(--border-input); --tile-text: var(--text-subtle); }
.chip-ready, .tile-ready { --tile-bg: var(--surface); --tile-border: var(--border); --tile-text: var(--text); }
.chip-missing, .tile-missing { --tile-bg: transparent; --tile-border: var(--border-input); --tile-text: var(--text-subtle); }
.num-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.tile > a, .tile > span { display: grid; place-items: center; min-height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--tile-border); background: var(--tile-bg); color: var(--tile-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.tile-chala > a { border-width: 2px; }
.tile-missing > span { border-style: dashed; }
.tile > a:hover { border-color: var(--primary); }
.num-grid[data-show="chala"] .tile:not(.tile-chala),
.num-grid[data-show="hidden"] .tile:not(.tile-hidden),
.num-grid[data-show="ready"] .tile:not(.tile-ready),
.num-grid[data-show="missing"] .tile:not(.tile-missing),
.num-grid[data-show="no-image"] .tile:not(.lacks-image),
.num-grid[data-show="no-russian"] .tile:not(.lacks-russian) { display: none; }
.chip-sep { align-self: stretch; width: 1px; margin: 4px 2px; background: var(--border); }
.incomplete-field { flex-basis: 100%; }
/* Qiyin savollar: the grid's tiles are checkboxes; a checked tile is in the app's hard section. */
.hard-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 16px; position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 8px 0; }
.hard-bar .spacer { flex: 1; }
.chip-hard { --tile-bg: var(--accent); --tile-border: var(--accent-hover); }
.pick-grid .tile > label { position: relative; display: grid; place-items: center; min-height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.pick-grid .tile > label:hover { border-color: var(--primary); }
.pick-grid .tile input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pick-grid .tile:has(input:focus-visible) > label { outline: var(--focus-ring); outline-offset: 2px; }
.pick-grid .tile-off > label { background: var(--surface-muted); color: var(--text-subtle); border-style: dashed; }
.pick-grid .tile:has(input:checked) > label { background: var(--accent); border-color: var(--accent-hover); color: var(--on-accent); }
.num-grid[data-show="hard"] .tile:not(:has(input:checked)) { display: none; }
.num-grid[data-show="noru"] .tile:not(.tile-noru), .num-grid[data-show="ru"] .tile:not(.tile-ru) { display: none; }
.tile-current > a { outline: 3px solid var(--primary); outline-offset: 2px; }
.tile:target > a { outline: 3px solid var(--primary); outline-offset: 2px; }

/* Question form: the question as the app shows it (text, picture, answers) on the left, its settings and the
   save buttons beside it; on narrower screens the settings follow and the save bar sticks to the bottom. */
.edit-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
.edit-top .breadcrumb { margin: 0; }
.q-edit { display: grid; gap: 16px; align-items: start; }
.q-edit-main { display: grid; gap: 16px; min-width: 0; }
.q-edit-card { display: grid; gap: 24px; }
.q-edit-block { display: grid; gap: 10px; }
.q-edit-block + .q-edit-block { padding-top: 20px; border-top: 1px solid var(--border); }
.q-edit-label { font-size: 16px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.q-edit-card #id_text_uz { font-size: 17px; font-weight: 600; line-height: 1.45; }
.q-edit-card .dropzone img { max-height: 300px; }
.q-edit-extra > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; list-style: none; }
.q-edit-extra > summary::-webkit-details-marker { display: none; }
.q-edit-extra > summary::before { content: "▸"; color: var(--text-subtle); }
.q-edit-extra[open] > summary::before { content: "▾"; }
.q-edit-extra[open] > summary { margin-bottom: 16px; }
.side-card { display: grid; gap: 18px; }
.side-card .field { gap: 6px; }
.side-switches { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--border); }
.side-switches .help { margin: 0 0 10px; }
.side-switches .incomplete-field { margin-top: 4px; }
.side-actions { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.side-actions .kbd-hint { font-size: 12px; text-align: center; }
.side-meta { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--border); }
.side-meta .sibling-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0; }
.side-meta .btn-danger-ghost { justify-self: start; padding-left: 0; }
.saving .side-actions .btn, .waiting .side-actions .btn { opacity: 0.6; pointer-events: none; }
@media (min-width: 1100px) {
  .q-edit { grid-template-columns: minmax(0, 1fr) 320px; }
  .q-edit-side { position: sticky; top: 16px; }
  /* Only the question form: its buttons are in the side column there. Every other form keeps its bar. */
  [data-question-form] > .form-actions { display: none; }
}
@media (max-width: 1099px) {
  .side-actions { display: none; }
}

/* One question as the app shows it, opened from the grid. */
.view-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 16px; }
.view-bar .spacer { flex: 1; }
.back-btn { margin-bottom: 8px; }
.sibling-label { font-size: 13px; align-self: center; }
.q-view { display: grid; gap: 16px; margin-bottom: 12px; }
.q-view-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; }
.q-view-number { font-size: 18px; font-weight: 700; }
.q-view-text { font-family: inherit; font-size: 20px; line-height: 1.45; font-weight: 700; letter-spacing: 0; }
.q-view-body { display: grid; gap: 20px; align-items: start; }
.q-view-main { display: grid; gap: 16px; align-content: start; }
@media (min-width: 960px) { .q-view-body.has-image { grid-template-columns: minmax(300px, 45%) minmax(0, 1fr); } }
/* Small enough that the question, picture and answers fit one screen; a click opens it full size. */
.q-view-figure { all: unset; position: relative; display: block; cursor: zoom-in; border-radius: var(--radius); }
.q-view-figure:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.q-view-image { display: block; width: 100%; max-height: 58vh; object-fit: contain; background: var(--surface-muted); border-radius: var(--radius); border: 1px solid var(--border); }
@media (max-width: 959px) { .q-view-image { max-height: 36vh; } }
.q-view-zoom-hint { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(14, 22, 38, 0.72); color: #fff; font-size: 12px; font-weight: 600; }
.zoom-dialog { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.zoom-dialog::backdrop { background: rgba(8, 12, 20, 0.82); }
.zoom-dialog img { display: block; max-width: 96vw; max-height: 88vh; object-fit: contain; border-radius: var(--radius); cursor: zoom-out; }
.zoom-dialog form { display: flex; justify-content: center; margin-top: 10px; }
.q-view-answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.q-view-answers li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.q-view-answers li.is-correct { border: 2px solid var(--success); background: var(--success-soft); }
.q-view-key { font-weight: 700; color: var(--text-muted); min-width: 24px; }
.q-view-answer { flex: 1; }
.q-view-explanation p { color: var(--text-muted); }
/* The question view in Latin, Cyrillic or Russian: one switch, the other languages' texts hidden. */
.lang-switch { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.lang-switch button { position: relative; border: 0; background: transparent; color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.lang-switch button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }
.lang-missing { display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--warning); vertical-align: middle; }
.q-view [data-l] { display: none; }
.q-view[data-lang="uz"] [data-l="uz"], .q-view[data-lang="cyrl"] [data-l="cyrl"], .q-view[data-lang="ru"] [data-l="ru"] { display: inline; }
.lang-none { color: var(--text-subtle); font-weight: 500; font-size: 15px; }
.incomplete-note p { flex: 1 1 240px; }
.incomplete-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid var(--warning); background: var(--warning-soft); color: var(--text); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; }

.link-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; color: var(--text); text-decoration: none; }
.link-card:hover { border-color: var(--border-strong); }
.link-card-text { display: grid; gap: 2px; }
.link-card .chevron { flex: none; color: var(--text-subtle); }
.find-label { font-size: 15px; font-weight: 600; }
.find-row { display: flex; gap: 8px; }
.find-row .input { min-width: 0; font-size: 16px; }
.topic-filter { max-width: 260px; }
.row-add { flex-shrink: 0; margin-right: 12px; }
.topic-steps { margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--border-strong); display: inline-flex; gap: 14px; }
.breadcrumb .topic-steps a { color: var(--primary); }
.q-item.inactive .q-text { color: var(--text-subtle); }
.member-row { padding: 10px 20px; gap: 14px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
/* A narrow row puts the buttons on a line of their own instead of squeezing the name. */
.member-row .q-text { flex: 1 1 220px; }
.badge-info { background: var(--primary-soft); color: var(--primary); }
.password-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.has-error .input { border-color: var(--danger); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Statistics */
.group-title { font-size: 20px; font-weight: 700; margin: 28px 0 12px; }
.card-title { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.stat-muted .stat-value { color: var(--text-subtle); }
.stack { display: grid; gap: 16px; margin-bottom: 40px; }
.data-table td a { font-weight: 600; }
/* A bigger target than the "№12" text itself, without making the row taller. */
.num-link { display: inline-block; padding: 10px 8px; margin: -10px -8px; }
tr[data-row-link] { cursor: pointer; }
tr[data-row-link]:hover td { background: var(--surface-muted); }
.stat .help { margin-top: 4px; }

.split { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface); }
.split-seg { display: block; height: 100%; }
.seg-ios { background: var(--series-1); }
.seg-android { background: var(--series-2); }
.seg-web { background: var(--series-3); }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.chart { margin: 0; }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 14px; }
.chart-head h3 { font-size: 16px; font-weight: 600; }
.chart-total { font-size: 13px; color: var(--text-subtle); }
.chart-total strong { color: var(--text); font-size: 15px; }
.columns-wrap { display: grid; grid-template-columns: auto 1fr; gap: 8px; height: 160px; }
.y-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; color: var(--text-subtle); text-align: right; padding-bottom: 1px; }
.columns { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--grid); background: linear-gradient(var(--grid) 1px, transparent 1px) top / 100% 50%; }
.col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; }
.col-bar { display: block; width: 100%; max-width: 24px; background: var(--series-1); border-radius: 4px 4px 0 0; transition: filter 150ms; }
.col:hover .col-bar { filter: brightness(1.15); }
.tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 6px 10px; border-radius: var(--radius-sm); background: var(--inverse); color: var(--on-inverse); font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms; z-index: 2; }
.tip strong { font-size: 14px; margin-right: 4px; }
.col:hover .tip { opacity: 1; }
.col:first-child .tip { left: 0; transform: none; }
.col:last-child .tip { left: auto; right: 0; transform: none; }
.x-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-subtle); margin: 6px 0 0 28px; }
.table-view { margin-top: 12px; font-size: 14px; }
.table-view summary { cursor: pointer; color: var(--text-muted); }
.table-view table { margin-top: 8px; width: 100%; border-collapse: collapse; }
.table-view td, .table-view th { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: left; }

.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hbars li { display: grid; grid-template-columns: minmax(96px, 0.8fr) 2fr auto; align-items: center; gap: 12px; font-size: 14px; }
.hbar-track { height: 10px; border-radius: 0 4px 4px 0; overflow: hidden; }
.hbar { display: block; height: 100%; min-width: 2px; background: var(--series-1); border-radius: 0 4px 4px 0; }
.hbar-value { white-space: nowrap; }

.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-subtle); padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-muted); }
.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table .num { text-align: right; white-space: nowrap; }
.data-table code { font-size: 13px; color: var(--text-muted); }
.list-card .data-table th:first-child, .list-card .data-table td:first-child { padding-left: 20px; }
.meter { display: inline-block; width: 60px; height: 6px; border-radius: 999px; background: var(--danger-soft); vertical-align: middle; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--danger-fill); }

.segmented { display: inline-flex; max-width: 100%; overflow-x: auto; padding: 4px; gap: 4px; border-radius: var(--radius); background: var(--seg-track); margin-bottom: 16px; }
.seg { white-space: nowrap; padding: 6px 14px; border-radius: var(--radius-sm); color: var(--text-muted); font-weight: 500; text-decoration: none; }
.seg.active { background: var(--seg-thumb); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.list-filters { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.list-filters .segmented { margin-bottom: 0; }
/* Shown only on phones, where the wide column it replaces is hidden. */
.compact-only { display: none; }
.code-search { display: flex; gap: 8px; }
.code-search .input { width: 240px; text-transform: uppercase; }
.code-search .input::placeholder { text-transform: none; }
.code-title { font-size: 0.9em; letter-spacing: 0.04em; }
.badge-success { background: var(--success-soft); color: var(--success); }
.narrow-card.wide { max-width: 720px; }
.grant-form { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 12px; align-items: end; width: 100%; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0 40px; }

/* Screen sizes: wide monitor, laptop, tablet landscape (sidebar stays), tablet portrait (menu button), phone. */
@media (min-width: 1600px) {
  .main { max-width: 1240px; padding: 40px 48px 0; }
}

@media (max-width: 1100px) {
  .app { --sidebar: 224px; }
  /* The lockup a size down, to fit the narrower sidebar. */
  .sidebar-head .logo-mark { width: 32px; height: 32px; }
  .sidebar-head .wordmark { font-size: 16px; }
  .main { padding: 24px 24px 0; }
  .form-actions .kbd-hint { display: none; }
  .topic-progress-wide { width: 140px; }
  /* Table columns that only fit beside the sidebar on a laptop or wider. */
  .wide-up { display: none; }
}

@media (max-width: 860px) {
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 15; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .topbar .logo-mark { width: 32px; height: 32px; }
  .topbar .wordmark { font-size: 16px; }
  /* Rows sized to their content, so the open menu doesn't stretch to fill the screen. */
  .app { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .sidebar { display: none; position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .sidebar.open { display: flex; }
  .sidebar-head { display: none; }
  .main-nav { padding-top: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .sidebar-foot { margin-top: 0; }
  .main { padding: 20px 20px 0; }
  .answers-foot .kbd-hint { display: none; }
  /* Under the top bar, so they never cover the menu button. */
  .toasts { top: calc(var(--topbar) + 12px); right: 20px; }
  .hero-next { flex-direction: column; align-items: stretch; }
  .chart-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .member-row { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .main { padding: 16px 16px 0; }
  /* The chala list's button goes under the question instead of squeezing its text. */
  .chala-rows .q-item { flex-wrap: wrap; row-gap: 0; }
  .chala-rows .q-link { flex-basis: 100%; padding-bottom: 6px; }
  .chala-rows .row-add { margin: 0 0 12px; }
  h1 { font-size: 21px; }
  .page-head { flex-direction: column; align-items: stretch; }
  .form-actions { flex-wrap: wrap; gap: 8px; }
  .form-actions .spacer { display: none; }
  .form-actions .btn { flex: 1 1 auto; }
  .form-actions .btn-primary { order: 10; }
  /* Under the top bar, not at the bottom where the sticky save buttons are. */
  .toasts { top: calc(var(--topbar) + 8px); bottom: auto; right: 16px; left: 16px; max-width: none; }
  .grid-meta, .grid-2 { grid-template-columns: 1fr; }
  .answers-head { display: none; }
  /* The circle, F-key and remove button on their own line, the fields full width below. */
  .answer-row, .show-cyrl .answer-row, .hide-ru .answer-row { grid-template-columns: 44px auto minmax(0, 1fr) 44px; gap: 6px 8px; }
  .answer-row .correct { grid-column: 1; grid-row: 1; }
  .answer-row .answer-key { grid-column: 2; grid-row: 1; text-align: left; }
  .answer-row .answer-input { grid-column: 1 / -1; }
  .answer-row .remove-answer { grid-column: 4; grid-row: 1; justify-self: end; margin-top: 0; }
  .topic-progress-wide { display: none; }
  .compact-only { display: block; }
  /* Topic page: number, text with its badges below, image on the right; no empty image boxes. */
  .question-rows .q-item { align-items: stretch; }
  .question-rows .q-check-hit { align-items: flex-start; padding-top: 11px; }
  .question-rows .q-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 6px; align-items: start; }
  .question-rows .q-number { width: auto; min-width: 2.6em; }
  .question-rows .q-thumb { grid-column: 3; grid-row: 1 / span 2; }
  .question-rows .q-thumb-empty, .question-rows .chevron { display: none; }
  .question-rows .q-text { grid-column: 2; }
  .question-rows .q-badges { grid-column: 2; justify-content: flex-start; max-width: none; }
  .bulk-actions { flex-wrap: wrap; width: 100%; }
  .bulk-actions [data-selected-count] { flex-basis: 100%; }
  .bulk-actions select { flex: 1 1 100%; max-width: none; }
  .bulk-actions .btn { flex: 1 1 100%; }
  /* The edit form: only Saqlash stays on screen; the rest waits at the end of the page. */
  .hide-phone { display: none; }
  .form-end { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 32px; padding-top: 16px; border-top: 1px solid var(--border-strong); }
  .side-meta .btn-danger-ghost { display: none; } /* the phone layout has it at the very end (.form-end) */
  /* Tables that become one small card per row; each cell names itself (data-label). */
  .data-table.stack-sm thead { display: none; }
  .data-table.stack-sm, .stack-sm tbody, .stack-sm tr { display: block; }
  .data-table.stack-sm tr { padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .data-table.stack-sm tr:last-child { border-bottom: 0; }
  .data-table.stack-sm td, .list-card .data-table.stack-sm td:first-child { display: block; position: relative; min-height: 26px; padding: 3px 0 3px 116px; border: 0; text-align: left; white-space: normal; }
  .data-table.stack-sm td[data-label]::before { content: attr(data-label); position: absolute; left: 0; top: 5px; width: 108px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-subtle); }
  .data-table.stack-sm td.stack-head, .list-card .data-table.stack-sm td.stack-head { padding: 0 0 6px; font-size: 15px; }
  .data-table.stack-sm td.stack-action { padding: 8px 0 0; }
  .data-table.stack-sm td.stack-action:empty, .data-table.stack-sm td.wide-up { display: none; }
  .data-table.stack-sm td.stack-action .btn { width: 100%; }
  .data-table.stack-sm tr[data-row-link]:hover td { background: none; }
  .data-table.stack-sm tr[data-row-link]:hover { background: var(--surface-muted); }
  /* Users: two short lines per device (code and last activity; platform and tests), the subscription below if any. */
  .data-table.stack-compact tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 16px; }
  .data-table.stack-compact td, .list-card .data-table.stack-compact td:first-child { min-height: 0; padding: 0; }
  .data-table.stack-compact td[data-label]::before { content: none; }
  .data-table.stack-compact .c-code { grid-area: 1 / 1; padding: 0; }
  .data-table.stack-compact .c-seen { grid-area: 1 / 2; text-align: right; font-size: 13px; color: var(--text-subtle); }
  .data-table.stack-compact .c-platform { grid-area: 2 / 1; font-size: 14px; }
  .data-table.stack-compact .c-tests { grid-area: 2 / 2; text-align: right; font-size: 13px; color: var(--text-subtle); }
  .data-table.stack-compact .c-tests::after { content: " ta test"; }
  .data-table.stack-compact .c-sub { grid-area: 3 / 1 / 4 / 3; padding-top: 4px; }
  .data-table.stack-compact .c-sub:not(:has(.badge)) { display: none; }
  .topic-row .q-number { width: 28px; }
  .topic-row .chevron { display: none; }
  .q-item { padding-left: 16px; }
  .stats .card { padding: 16px; }
  .stat-value { --max-size: 22px; }
  /* The card's padding here no longer clears a link card's arrow: the number keeps out of its way. */
  a.stat .stat-value { --arrow-room: 20px; }
  .card { padding: 18px; }
  /* The section's note goes under its title instead of squeezing it into two lines. */
  .section-title { flex-wrap: wrap; row-gap: 2px; }
  .section-title .optional { flex-basis: 100%; padding-left: 36px; }
  .list-card { padding: 0; }
  .translate-row { grid-template-columns: 1fr; }
  .grant-form { grid-template-columns: 1fr; }
  .list-filters, .code-search { width: 100%; }
  .segmented { display: flex; width: 100%; }
  /* Five filters (users page) fit across a 360px phone. */
  .seg { flex: 1 1 auto; text-align: center; padding: 6px 5px; font-size: 14px; }
  .code-search .input, .topic-filter { width: 100%; max-width: none; }
  .list-toolbar { flex-wrap: wrap; }
  .find-row .btn { padding: 0 14px; }
  .view-prefs { width: 100%; }
  .sibling-nav { margin-left: 0; }
  .q-badges { max-width: none; }
}

/* Below 360px half-width cards can't hold words like "Foydalanuvchilar": one card per row. */
@media (max-width: 359px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  /* Five filters don't fit across: they wrap to a second row instead of hiding the last one. */
  .segmented { flex-wrap: wrap; overflow-x: visible; }
}

/* Touch screens (phones, tablets): fingers need 44px targets; 16px text stops iOS zooming into fields. */
@media (pointer: coarse) {
  .input, .input-sm { font-size: 16px; }
  .nav-link, .theme-toggle { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .icon-btn { width: 44px; height: 44px; }
  .reorder .icon-btn { width: 44px; height: 36px; }
  /* Shortcuts that need a keyboard: Ctrl+V, Enter / Alt+Enter, Cmd/Ctrl+Enter. */
  .keyboard-hint, .keyboard-only, .kbd-hint { display: none; }
  .check input, .q-check { width: 24px; height: 24px; }
  .q-check-hit { padding: 0 12px; margin: 0 -12px; }
  .gap-list a { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}