:root {
  --navy-950: #021027;
  --navy-900: #021027;
  --navy-800: #1c569b;
  --blue-600: #1c569b;
  --blue-700: #1c569b;
  --cyan-500: #49aef7;
  --sky-200: #a4dffb;
  --canvas: #f0f7f9;
  --ink: #021027;
  --muted: rgba(2, 16, 39, 0.62);
  --line: rgba(164, 223, 251, 0.72);
  --line-strong: #a4dffb;
  --surface: #ffffff;
  --surface-soft: #f0f7f9;
  --surface-blue: rgba(164, 223, 251, 0.28);
  --success: #087443;
  --success-bg: #e8f8ef;
  --danger: #b42318;
  --danger-bg: #fff0ef;
  --warning: #8b5a00;
  --warning-bg: #fff7dc;
  --shadow: 0 24px 70px rgba(15, 31, 58, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--canvas); font-family: Tahoma, "Segoe UI", Arial, sans-serif; font-size: 16px; }
button, input, select { font: inherit; }
button, label, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(73, 174, 247, 0.42); outline-offset: 2px; }

.app-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); width: 100%; min-height: 100vh; margin: 0; background: var(--surface); }
.sidebar { position: sticky; top: 0; align-self: start; height: 100vh; padding: 24px 18px; overflow-y: auto; color: #fff; background: radial-gradient(circle at 10% 5%, rgba(73, 174, 247, 0.3), transparent 30%), linear-gradient(165deg, #1c569b 0%, #021027 72%); }
.brand-block { display: flex; align-items: center; gap: 11px; padding: 0 6px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); direction: ltr; text-align: left; }
.brand-mark { display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 13px; color: var(--navy-950); background: linear-gradient(135deg, #a4dffb, #49aef7); font-size: 0.88rem; font-weight: 950; letter-spacing: 0.05em; box-shadow: 0 8px 22px rgba(73, 174, 247, 0.28); }
.brand-block strong { display: block; font-size: 1.05rem; }
.brand-block span:last-child { display: block; margin-top: 2px; color: rgba(164, 223, 251, 0.75); font-size: 0.78rem; }
.sidebar-heading { display: flex; align-items: center; justify-content: space-between; margin: 24px 7px 10px; color: rgba(164, 223, 251, 0.75); font-size: 0.8rem; font-weight: 800; }
.sidebar-heading small { min-width: 25px; padding: 3px 7px; border-radius: 999px; color: #a4dffb; background: rgba(73, 174, 247, 0.18); text-align: center; }
.unit-list { display: grid; gap: 7px; }
.unit-tab { display: grid; grid-template-columns: 35px minmax(0, 1fr); gap: 10px; align-items: center; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 13px; color: rgba(240, 247, 249, 0.82); background: transparent; cursor: pointer; text-align: right; }
.unit-tab:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.unit-tab.active { color: #fff; border-color: rgba(164, 223, 251, 0.35); background: rgba(73, 174, 247, 0.22); }
.unit-index { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; color: rgba(164, 223, 251, 0.65); background: rgba(255, 255, 255, 0.07); direction: ltr; font-size: 0.78rem; font-weight: 900; }
.unit-tab.active .unit-index { color: var(--navy-950); background: #49aef7; }
.unit-name { min-width: 0; font-weight: 800; }
.unit-name small { display: block; margin-top: 2px; color: rgba(164, 223, 251, 0.62); font-size: 0.72rem; font-weight: 500; }
.unit-tab.active .unit-name small { color: #a4dffb; }
.sidebar-note { margin: 24px 7px 0; padding-top: 16px; border-top: 1px solid rgba(164, 223, 251, 0.16); color: rgba(164, 223, 251, 0.62); font-size: 0.78rem; line-height: 1.75; }
.unit-picker-mobile { display: none; }

.main-content { width: 100%; max-width: none; margin: 0; padding: 30px clamp(20px, 3vw, 52px) 48px; }
.page-header { padding: 4px 2px 20px; }
.eyebrow { display: inline-flex; padding: 6px 11px; border-radius: 999px; color: var(--blue-700); background: var(--surface-blue); direction: ltr; font-size: 0.82rem; font-weight: 900; }
h1 { margin: 10px 0 7px; direction: ltr; font-size: clamp(2.15rem, 5vw, 3.65rem); line-height: 1.05; text-align: left; letter-spacing: -0.035em; }
h2 { margin: 0; font-size: 1.08rem; }
.subtitle { max-width: 850px; margin: 0; color: var(--muted); line-height: 1.85; }
.setup, .history { padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 7px 25px rgba(24, 42, 75, 0.055); }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.section-copy { margin: 6px 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.7; }
.compact-actions, .setup-footer, .sticky-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 8px; }
.category-card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; align-items: start; min-height: 66px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); cursor: pointer; direction: ltr; text-align: left; transition: border-color 0.16s, background 0.16s, transform 0.16s; }
.category-card:hover { border-color: #49aef7; transform: translateY(-1px); }
.category-card:has(input:checked) { border-color: #49aef7; background: var(--surface-blue); }
.category-card input { grid-row: 1 / 3; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--blue-600); }
.category-card span { grid-column: 2; min-width: 0; overflow-wrap: anywhere; font-size: 0.88rem; font-weight: 800; line-height: 1.35; }
.category-card small { grid-column: 2; justify-self: start; padding: 3px 7px; border-radius: 999px; color: #1c569b; background: #fff; direction: rtl; font-size: 0.74rem; line-height: 1.35; white-space: nowrap; }
.setup-footer { justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.selection-summary { color: var(--muted); font-size: 0.86rem; }

.btn { min-height: 42px; padding: 9px 15px; border: 1px solid transparent; border-radius: 11px; cursor: pointer; font-weight: 850; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { cursor: not-allowed; opacity: 0.52; transform: none; }
.btn-primary { color: #fff; background: linear-gradient(135deg, #1c569b, #021027); box-shadow: 0 8px 18px rgba(28, 86, 155, 0.22); }
.btn-primary:hover { background: linear-gradient(135deg, #49aef7, #1c569b); box-shadow: 0 10px 23px rgba(28, 86, 155, 0.3); }
.btn-secondary { color: #021027; border-color: #a4dffb; background: rgba(164, 223, 251, 0.38); }
.btn-quiet { color: #1c569b; border-color: var(--line-strong); background: #fff; }
.btn-text { color: #1c569b; background: transparent; }
.btn-danger { color: #fff; background: var(--danger); }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin: 15px 0; }
.stat { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); text-align: center; }
.stat-label { display: block; margin-bottom: 4px; color: var(--muted); font-size: 0.75rem; }
.stat strong { direction: ltr; font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.sticky-controls { position: sticky; top: 10px; z-index: 10; justify-content: center; margin-bottom: 12px; padding: 8px; border: 1px solid rgba(199, 211, 227, 0.92); border-radius: 14px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 10px 28px rgba(20, 36, 64, 0.1); backdrop-filter: blur(14px); }
.progress-panel { margin-bottom: 14px; padding: 12px 14px; border: 1px solid #a4dffb; border-radius: 14px; background: var(--surface-blue); }
.progress-head { display: flex; justify-content: space-between; margin-bottom: 8px; color: #1c569b; font-size: 0.87rem; font-weight: 850; }
.progress-track { height: 9px; overflow: hidden; border-radius: 999px; background: #a4dffb; }
.progress-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue-600), var(--cyan-500)); transition: width 0.25s; }

.result { display: none; margin: 14px 0; padding: 16px; border: 1px solid transparent; border-radius: 15px; font-weight: 800; line-height: 1.8; }
.result.good { display: block; color: var(--success); border-color: #b5e5ca; background: var(--success-bg); }
.result.mid { display: block; color: var(--warning); border-color: #ead797; background: var(--warning-bg); }
.result.bad { display: block; color: var(--danger); border-color: #efc0bc; background: var(--danger-bg); }
.breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 8px; margin-top: 12px; font-weight: 600; }
.breakdown div { padding: 9px 10px; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 10px; background: rgba(255, 255, 255, 0.72); }
.quiz { display: grid; gap: 12px; }
.start-placeholder { display: grid; gap: 6px; justify-items: center; padding: 34px 20px; border: 1px dashed #a4dffb; border-radius: 17px; color: var(--muted); background: var(--surface-soft); text-align: center; line-height: 1.8; }
.start-placeholder strong { color: #1c569b; font-size: 1.05rem; }
.question { padding: 16px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 6px 20px rgba(20, 37, 67, 0.05); }
.question-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: start; direction: ltr; }
.question-number { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 11px; color: #1c569b; background: var(--surface-blue); font-size: 0.86rem; font-weight: 950; font-variant-numeric: tabular-nums; }
.question-text { direction: ltr; text-align: left; font-family: "Segoe UI", Arial, sans-serif; font-size: 1.02rem; font-weight: 800; line-height: 1.75; }
.question-text[dir="rtl"] { direction: rtl; text-align: right; font-family: Tahoma, "Segoe UI", Arial, sans-serif; }
.tag { display: inline-block; margin-top: 6px; padding: 4px 8px; border-radius: 999px; color: #1c569b; background: rgba(164, 223, 251, 0.32); direction: ltr; font-size: 0.75rem; font-weight: 800; }
.translate-btn { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 11px; color: #1c569b; background: var(--surface-soft); cursor: pointer; }
.translate-btn:hover { color: #1c569b; border-color: #49aef7; background: var(--surface-blue); }
.translate-btn svg { width: 21px; height: 21px; }
.translation-box { display: none; margin-top: 10px; padding: 11px 13px; border: 1px solid #a4dffb; border-radius: 11px; color: #1c569b; background: #f0f7f9; direction: rtl; text-align: right; line-height: 1.8; }
.translation-box.show { display: block; }
.translation-title { margin-bottom: 3px; color: #1c569b; font-size: 0.8rem; font-weight: 900; }
.options { display: grid; gap: 7px; margin-top: 11px; }
.option { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; cursor: pointer; line-height: 1.7; transition: border-color 0.15s, background 0.15s; }
.option:hover { border-color: #a4dffb; background: #f0f7f9; }
.option:has(input:checked) { border-color: #49aef7; background: var(--surface-blue); }
.option span { flex: 1; }
.option input { flex: 0 0 auto; margin-top: 5px; accent-color: var(--blue-600); }
.option[dir="ltr"] { text-align: left; }
.option[dir="rtl"] { text-align: right; }
.option.correct, .option.correct:has(input:checked) { color: var(--success); border-color: #76c99b; background: var(--success-bg); }
.option.wrong, .option.wrong:has(input:checked) { color: var(--danger); border-color: #eca29c; background: var(--danger-bg); }
.answer { display: none; margin-top: 9px; padding: 9px 11px; border-radius: 10px; color: #021027; background: var(--surface-soft); line-height: 1.65; }
.submit-row { display: flex; justify-content: center; margin: 20px 0; }
.btn-submit { min-width: 210px; min-height: 48px; }
.review-note { text-align: center; color: #1c569b; font-weight: 800; }
.history { margin-top: 20px; }
.history ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.history li { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: #1c569b; background: var(--surface-soft); font-size: 0.86rem; line-height: 1.7; }
.empty-state { margin: 0; padding: 18px; border: 1px dashed var(--line-strong); border-radius: 11px; color: var(--muted); background: var(--surface-soft); text-align: center; }
.site-footer { margin-top: 28px; padding: 18px 12px 4px; border-top: 1px solid #a4dffb; color: #1c569b; text-align: center; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.01em; }
.hidden { display: none !important; }

.confirm-dialog { width: min(440px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 18px; color: var(--ink); background: #fff; box-shadow: 0 25px 80px rgba(5, 16, 35, 0.35); }
.confirm-dialog::backdrop { background: rgba(6, 18, 40, 0.58); backdrop-filter: blur(3px); }
.confirm-dialog form { padding: 22px; }
.dialog-kicker { color: #1c569b; font-size: 0.8rem; font-weight: 900; }
.confirm-dialog h2 { margin-top: 7px; font-size: 1.28rem; }
.confirm-dialog p { margin: 10px 0 20px; color: var(--muted); line-height: 1.8; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 920px) {
  .app-layout { display: block; }
  .sidebar { position: static; height: auto; padding: 15px 18px; overflow: visible; }
  .brand-block { padding-bottom: 14px; }
  .sidebar-heading, .unit-list, .sidebar-note { display: none; }
  .unit-picker-mobile { display: grid; gap: 6px; margin-top: 13px; }
  .unit-picker-mobile label { color: #a4dffb; font-size: 0.78rem; font-weight: 800; }
  .unit-picker-mobile select { width: 100%; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 11px; color: #fff; background: var(--navy-800); }
  .unit-picker-mobile option { color: var(--ink); background: #fff; }
  .main-content { padding: 24px 14px 38px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 620px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .category-grid { grid-template-columns: 1fr; }
  .setup-footer { align-items: stretch; }
  .setup-footer .btn, .selection-summary { width: 100%; text-align: center; }
  .sticky-controls .btn { flex: 1; }
  .question-head { grid-template-columns: auto minmax(0, 1fr); }
  .translate-btn { grid-column: 1 / -1; width: 100%; height: 38px; }
  .dialog-actions .btn { flex: 1; }
}