:root {
  color-scheme: dark;
  --bg: #0b1326;
  --sidebar: #0e192d;
  --surface: #132039;
  --surface-2: #172740;
  --line: #2a3b54;
  --line-soft: rgba(174,201,226,.13);
  --text: #f3f8ff;
  --muted: #9db0c7;
  --accent: #7be6cf;
  --accent-deep: #0d554e;
  --accent-bright: #acfff0;
  --secondary: #a9b7ff;
  --danger: #ffc0bf;
  --danger-bg: rgba(215,93,99,.12);
  --radius: 22px;
  --shadow: 0 20px 70px rgba(0,0,0,.18);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; font-size: 15px; line-height: 1.5; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.app-shell { display: grid; grid-template-columns: 284px minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--sidebar); border-right: 1px solid var(--line-soft); display: flex; flex-direction: column; min-width: 0; z-index: 20; }
.brand { display: flex; gap: 12px; align-items: center; padding: 29px 22px 24px; }
.brand-mark { width: 47px; height: 47px; flex: none; display: grid; place-items: center; font-weight: 900; font-size: 29px; letter-spacing: -3px; line-height: 1; border-radius: 15px; background: var(--accent); color: #072e35; position: relative; box-shadow: 0 8px 24px rgba(122,230,207,.1); }
.brand-mark span { font-size: 12px; color:#07504c; position: absolute; top: 4px; right: 5px; letter-spacing:0; }
.brand-name { font-size: 23px; font-weight: 850; line-height: 1.1; letter-spacing: -.7px; }
.brand-caption { color: var(--muted); font-size: 11px; margin-top: 6px; }
.sidebar-split { height: 1px; background: var(--line-soft); margin: 0 19px 16px; }
.nav-home { background: transparent; border: 0; color: var(--muted); text-align: left; display: flex; align-items: center; gap: 12px; width: calc(100% - 28px); margin: 0 14px; padding: 12px 14px; border-radius: 12px; font-weight: 700; }
.nav-home span:first-child { font-size: 22px; line-height: 1; }
.nav-home.active,.nav-home:hover { background: rgba(123,230,207,.12); color: var(--accent-bright); }
.home-arrow { margin-left: auto; font-weight: 500; }
.nav-heading { display: flex; justify-content: space-between; color: #728ba8; letter-spacing: 1.6px; font-size: 10px; padding: 25px 28px 8px; font-weight: 900; }
.module-nav { overflow-y: auto; padding: 0 14px 15px; flex: 1 1 auto; scrollbar-width: thin; scrollbar-color: #3d5a70 transparent; }
.module-block { border-radius: 12px; margin-bottom: 4px; }
.module-toggle { border:0; background: transparent; text-align: left; color: var(--text); border-radius: 11px; width:100%; padding: 11px 11px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 750; }
.module-toggle:hover, .module-toggle[aria-expanded="true"] { background: rgba(255,255,255,.045); }
.module-icon { font-size: 18px; width: 24px; }
.module-chevron { margin-left: auto; color: #7192a7; transition: transform .2s; }
.module-toggle[aria-expanded="true"] .module-chevron { transform: rotate(180deg); }
.lesson-list { padding: 2px 3px 10px 18px; display: grid; gap: 3px; }
.lesson-link { display: flex; gap: 10px; align-items: center; color: var(--muted); border: 0; background: transparent; text-align: left; padding: 9px 12px; width: 100%; border-radius: 10px; font-size: 12.5px; }
.lesson-link:hover { color: var(--text); background: rgba(255,255,255,.05); }
.lesson-link.active { background: rgba(123,230,207,.1); color: var(--accent-bright); font-weight: 750; }
.lesson-dot { height: 7px; width: 7px; border: 1.5px solid #7188a0; border-radius: 50%; flex: none; }
.lesson-dot.done { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(123,230,207,.07); }
.sidebar-footer { padding: 20px 24px 24px; border-top: 1px solid var(--line-soft); }
.small-kicker { color: #8ca5bc; letter-spacing: 1.4px; font-weight: 850; font-size: 10px; }
.footer-progress { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 7px 0 9px; }
.footer-progress strong { font-size: 27px; letter-spacing: -.9px; }
.footer-progress span { font-size: 11px; color: var(--muted); }
.progress-track { height: 7px; border-radius: 999px; background: #30435c; overflow: hidden; }
.progress-fill { width: 0%; background: linear-gradient(90deg,var(--accent),#a4dbfc); height: 100%; border-radius: 999px; transition: width .25s; }
.privacy-note { font-size: 10px; color: #8299b3; margin-top: 12px; line-height: 1.45; }
.content-shell { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; min-height: 77px; gap: 12px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); padding: 0 clamp(18px, 5vw, 60px); }
.breadcrumb { color: var(--muted); font-size: 13px; font-weight: 600; }
.breadcrumb-dot { color: #50768b; padding: 0 7px; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.pill { border: 1px solid #315349; background: rgba(123,230,207,.07); color: var(--accent); padding: 6px 11px; font-size: 12px; border-radius: 99px; font-weight: 750; white-space: nowrap; }
.reset-button { border:0; background:transparent; color:#90aac3; font-size:12px; text-decoration: underline; text-underline-offset: 3px; }
.reset-button:hover { color:var(--text); }
.mobile-menu { display:none; }
.main-content { width: 100%; max-width: 1170px; padding: clamp(26px,4.6vw,58px) clamp(18px,5vw,60px); margin: 0 auto; flex: 1; }
.page-footer { text-align:center; color:#7189a4; font-size:11px; padding:25px 15px 28px; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:2px; font-size:11px; font-weight:900; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size: clamp(35px,5.5vw,57px); line-height:1.08; margin: 17px 0 15px; letter-spacing:-2.1px; font-weight:850; }
h2 { font-size: 25px; letter-spacing:-.5px; }
h3 { font-size: 18px; }
p { color: var(--muted); }
.hero { position: relative; isolation:isolate; overflow:hidden; border:1px solid rgba(123,230,207,.17); border-radius: 27px; background: radial-gradient(circle at 93% 12%,rgba(121,212,216,.16),transparent 35%), linear-gradient(115deg,#142841,#17253e 75%,#122439); padding: clamp(24px,4vw,47px); min-height: 286px; }
.hero:after { content: 'а'; position:absolute; right:2%; top:-69px; font-size:345px; line-height:1; color:rgba(123,230,207,.07); z-index:-1; font-family:Georgia,serif; transform:rotate(-16deg); }
.hero p { font-size:16px; line-height:1.7; max-width:560px; color:#bfcfe3; margin-bottom:25px; }
.hero h1 span { color:var(--accent); }
.hero-actions { display:flex; flex-wrap:wrap; gap:11px; }
.primary-button,.secondary-button,.ghost-button { display:inline-flex; gap:9px; align-items:center; justify-content:center; border-radius:12px; font-weight:800; border:1px solid transparent; padding:12px 20px; min-height:45px; text-align:center; }
.primary-button { background: var(--accent); color:#092a34; box-shadow: 0 6px 24px rgba(123,230,207,.1); }
.primary-button:hover:not(:disabled) { background:#9cf4e2; }
.secondary-button { background:rgba(255,255,255,.055); color:var(--text); border-color:rgba(255,255,255,.14); }
.secondary-button:hover:not(:disabled) { background:rgba(255,255,255,.105); }
.ghost-button { background:transparent; color: var(--accent); border-color:#37665d; }
.ghost-button:hover:not(:disabled) { background:rgba(123,230,207,.08); }
.stats-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:18px 0 43px; }
.stat-card { padding:22px 24px; border:1px solid var(--line-soft); background:var(--surface); border-radius:17px; }
.stat-icon { font-size:21px; margin-bottom:9px; }
.stat-value { font-size:29px; font-weight:850; line-height:1.1; letter-spacing:-.5px; }
.stat-caption { color:var(--muted); font-size:12px; margin-top:6px; }
.section-header { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 17px; }
.section-header h2 { margin:0; }
.section-header p { margin:0; font-size:12px; }
.modules-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.module-card { display:flex; flex-direction:column; align-items:flex-start; text-align:left; background:var(--surface); border:1px solid var(--line-soft); color:var(--text); padding:24px; border-radius:19px; transition:transform .16s,border-color .16s; min-height:192px; }
.module-card:hover { transform:translateY(-2px); border-color:#557a8c; }
.module-card-top { display:flex; justify-content:space-between; width:100%; align-items:center; margin-bottom:17px; }
.module-big-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; background:rgba(123,230,207,.09); font-size:24px; }
.module-progress { font-size:12px; color:var(--accent); font-weight:800; }
.module-card h3 { margin: 0 0 6px; font-size:19px; }
.module-card p { font-size:13px; margin:0 0 17px; }
.module-card-bottom { width:100%; margin-top:auto; }
.module-card-bottom .progress-track { height:5px; }
.lesson-head { margin-bottom:24px; }
.lesson-head h1 { font-size:clamp(30px,4.3vw,46px); margin-top:13px; }
.lesson-head p { margin:0; font-size:14px; }
.meta-row { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:15px 0 0; }
.meta-badge { display:inline-flex; background:#1b2f49; border:1px solid #31455c; color:#b6cce0; border-radius:99px; font-size:11px; font-weight:750; padding:5px 10px; }
.rule-card, .exercise-card, .result-card { border:1px solid var(--line-soft); background:var(--surface); border-radius:22px; padding: clamp(21px,3.2vw,34px); margin-bottom:18px; }
.rule-kicker { font-size:12px; letter-spacing:1.2px; color:var(--accent); font-weight:900; margin-bottom:11px; }
.rule-body { font-size:17px; line-height:1.68; color:var(--text); max-width:740px; margin:0 0 20px; }
.example-row { display:flex; gap:10px; flex-wrap:wrap; }
.example-chip { font-size:12px; color:#c3d6eb; padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.055); }
.exercise-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.exercise-caption { color:var(--accent); font-weight:850; font-size:13px; }
.exercise-progress { font-size:12px; color:var(--muted); font-weight:750; }
.segment-track { display:grid; gap:5px; margin-bottom:24px; height:6px; grid-auto-flow:column; grid-auto-columns:1fr; }
.segment { background:#2a3d54; border-radius:9px; }
.segment.completed { background:var(--accent); }
.segment.current { background:#607f91; }
.question-title { font-size: clamp(19px,2.7vw,25px); letter-spacing:-.3px; line-height:1.4; margin:0 0 22px; }
.answer-options { display:grid; gap:10px; }
.answer-option { display:flex; align-items:center; gap:12px; border:1px solid #33465d; color:var(--text); background:#182942; padding:13px 16px; border-radius:13px; text-align:left; width:100%; transition:border-color .12s,background .12s; }
.answer-option:hover:not(:disabled) { border-color:#6b95a5; }
.answer-option.selected { border-color:var(--accent); background:rgba(123,230,207,.09); }
.answer-option.correct { border-color:#69e3b3; background:rgba(105,227,179,.13); }
.answer-option.wrong { border-color:#de8691; background:var(--danger-bg); }
.option-letter { display:grid; place-items:center; border:1px solid #52667c; border-radius:8px; color:#b7cbdc; min-width:28px; height:28px; font-size:12px; font-weight:800; }
.answer-entry { width:100%; max-width:520px; background:#182942; border:1px solid #435a70; border-radius:12px; padding:15px 17px; color:var(--text); font-size:17px; outline:none; }
.answer-entry:focus { border-color:var(--accent); }
.answer-entry::placeholder { color:#7790a8; }
.exercise-controls { display:flex; flex-wrap:wrap; justify-content:space-between; gap:11px; align-items:center; margin-top:22px; }
.text-link-button { border:0; background:transparent; color:#aebdfd; font-size:13px; font-weight:750; padding:10px 0; }
.text-link-button:hover { color:var(--text); }
.hint-block { background:rgba(169,183,255,.085); border:1px solid rgba(169,183,255,.23); color:#d2dcff; border-radius:11px; padding:13px 17px; margin-top:13px; font-size:13px; }
.feedback { padding:16px 17px; border-radius:12px; margin-top:18px; border:1px solid #436e61; background:rgba(123,230,207,.075); color:#c8f5e9; }
.feedback.incorrect { border-color:#7b4c5b; background:var(--danger-bg); color:#ffe1e2; }
.feedback strong { display:block; margin-bottom:5px; }
.feedback p { color:inherit; margin:0; font-size:13px; line-height:1.6; }
.lesson-navigation { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:24px; }
.result-card { text-align:center; max-width:710px; margin:35px auto 0; padding:45px 28px; }
.result-icon { font-size:54px; }
.result-card h1 { font-size:36px; margin:15px 0 8px; }
.result-card p { max-width:500px; margin:0 auto 24px; }
.result-score { font-size:54px; font-weight:900; color:var(--accent); letter-spacing:-2px; margin-bottom:8px; }
.result-actions { display:flex; justify-content:center; gap:11px; flex-wrap:wrap; }
.empty-state { background:var(--surface); padding:50px 25px; border-radius:20px; text-align:center; border:1px solid var(--line-soft); }
.empty-state .empty-icon { font-size:43px; }
.empty-state h2 { margin:13px 0 9px; }
.empty-state p { max-width:500px; margin:0 auto 23px; }
@media(max-width:1060px){ .app-shell{grid-template-columns:244px minmax(0,1fr)} .brand{padding-left:18px;padding-right:12px}.brand-name{font-size:21px} .hero:after{right:-5%;font-size:280px;} }
@media(max-width:780px){
  .app-shell{display:block}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:min(300px,86vw);transform:translateX(-105%);transition:transform .22s ease;box-shadow:var(--shadow);}
  .sidebar.open{transform:translateX(0)}
  .screen-overlay:not([hidden]) { display:block;position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:19; }
  .mobile-menu{display:inline-grid;place-items:center;flex:none;background:#19283c;color:var(--text);border:1px solid var(--line);width:38px;height:38px;border-radius:10px; }
  .topbar{padding:0 18px;min-height:65px;}
  .topbar-actions{gap:8px}
  .reset-button{display:none}
  .main-content{padding:26px 18px}
  .hero:after{font-size:240px;right:-9%;top:-40px}
}
@media(max-width:540px){
  h1{font-size:35px;letter-spacing:-1.2px}
  .breadcrumb{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
  .pill{font-size:10px;padding:6px 9px}
  .hero{padding:25px 20px;min-height:0}
  .hero p{font-size:14px}
  .hero:after{font-size:170px;top:0;right:-25px}
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:29px}
  .stat-card{padding:16px}
  .stat-card:last-child{grid-column:1/-1}
  .stat-value{font-size:24px}
  .modules-grid{grid-template-columns:1fr;gap:11px}
  .module-card{min-height:0;padding:20px}
  .rule-body{font-size:15px}
  .primary-button,.secondary-button,.ghost-button{padding:11px 13px;font-size:13px}
  .exercise-controls{align-items:stretch}
  .exercise-controls .primary-button{flex:1}
  .result-card h1{font-size:30px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}