:root {
  --ink: #183149;
  --muted: #63788b;
  --line: #dce6e9;
  --paper: #ffffff;
  --canvas: #f2f7f6;
  --nav: #132b40;
  --blue: #2876c7;
  --blue-dark: #1c5da1;
  --mint: #e8f7f0;
  --green: #19815f;
  --amber: #f2b64b;
  --rose: #b23c3b;
  --shadow: 0 12px 32px rgba(29, 57, 78, .07);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.55; }
a { color: var(--blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #f2b64b; outline-offset: 3px; }
.app { display: grid; grid-template-columns: 254px minmax(0, 1fr); min-height: 100vh; }
.side { display: flex; flex-direction: column; min-height: 100vh; padding: 25px 17px 20px; color: #f7fbff; background: var(--nav); }
.brand { display: flex; align-items: center; gap: 11px; margin: 1px 8px 31px; color: #fff; font-size: 18px; font-weight: 800; line-height: 1.1; }
.brand:hover { text-decoration: none; }
.brand b { color: #7ee0bf; }
.brand small { display: block; margin-top: 6px; color: #aebdca; font-size: 11px; font-weight: 500; letter-spacing: .04em; }
.brand-mark { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 14px; color: #143047; background: #7ee0bf; font-size: 23px; }
.nav-caption { margin: 0 10px 7px; color: #8fa7b8; font-size: 10px; font-weight: 850; letter-spacing: .13em; }
.side nav { display: grid; gap: 5px; }
.side nav a { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 10px 12px; border-radius: 11px; color: #d3e0e8; font-size: 14px; font-weight: 650; transition: background .16s ease, color .16s ease; }
.side nav a:hover, .side nav a.active { color: #fff; background: #26455f; text-decoration: none; }
.nav-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 99px; background: #7390a4; }
.side nav a.active .nav-dot { background: #7ee0bf; box-shadow: 0 0 0 4px rgba(126,224,191,.12); }
.logout-form { margin-top: auto; padding-top: 25px; }
.logout-form button { width: 100%; min-height: 42px; border: 1px solid #365268; border-radius: 10px; color: #e2edf3; background: transparent; cursor: pointer; }
.logout-form button:hover { background: #203e57; }
.main { width: 100%; max-width: 1500px; padding: 28px clamp(18px, 3vw, 46px) 52px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 24px; }
.top > div:first-child > strong { font-size: 19px; }
.eyebrow, .section-kicker { color: #648197; font-size: 11px; font-weight: 800; letter-spacing: .105em; text-transform: uppercase; }
.user-chip { display: flex; align-items: center; gap: 9px; color: #4e6679; font-size: 13px; font-weight: 650; }
.avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #15533f; background: #bcebd8; font-weight: 800; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 17px; }
.card { min-width: 0; padding: 21px; border: 1px solid var(--line); border-radius: 19px; background: var(--paper); box-shadow: var(--shadow); }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 11px; font-size: clamp(25px, 3vw, 36px); line-height: 1.2; letter-spacing: -.025em; }
h2 { margin-bottom: 10px; font-size: 21px; line-height: 1.28; letter-spacing: -.015em; }
h3 { margin-bottom: 8px; font-size: 17px; line-height: 1.35; }
.muted { color: var(--muted); }
.hero { position: relative; overflow: hidden; border: 0; color: #fff; background: linear-gradient(125deg, #163953, #2876c7); }
.hero::after { position: absolute; right: -52px; bottom: -100px; width: 270px; height: 270px; border: 35px solid rgba(126,224,191,.13); border-radius: 50%; content: ""; }
.hero h1 { max-width: 680px; margin: 9px 0; font-size: clamp(28px, 3.4vw, 43px); }
.hero-kicker { color: #a8e9d2; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hero-copy { max-width: 600px; color: #e2f1f7; font-size: 16px; }
.hero .muted { color: #d7e7f1; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 19px 0 14px; }
.hero-meta { color: #c3deed; font-size: 12px; }
.hero-meta span { padding: 0 5px; color: #83dbb8; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 43px; padding: 10px 15px; border: 0; border-radius: 11px; font-weight: 750; text-align: center; cursor: pointer; transition: transform .13s ease, background .13s ease, box-shadow .13s ease; }
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn.primary { color: #fff; background: var(--blue); box-shadow: 0 5px 13px rgba(40,118,199,.18); }
.btn.primary:hover { background: var(--blue-dark); }
.btn.secondary { color: #255477; background: #eaf3f8; }
.btn.secondary:hover { background: #dcecf4; }
.btn.danger { color: #9b3434; background: #fff0ef; }
.btn.ok { color: #176746; background: #e8f7ef; }
.btn.light { color: #18425e; background: #fff; }
.btn.ghost-light { border: 1px solid rgba(255,255,255,.42); color: #fff; background: rgba(255,255,255,.08); }
.btn.small { min-height: 34px; padding: 7px 10px; border-radius: 9px; font-size: 12px; }
.btn.full { width: 100%; }
.text-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 14px; font-weight: 750; }
.daily-card { display: flex; flex-direction: column; align-items: flex-start; }
.daily-card .metric { margin: 8px 0 2px; }
.metric { margin: 6px 0; color: var(--ink); font-size: 32px; font-weight: 850; line-height: 1.15; }
.metric small { color: var(--muted); font-size: 14px; font-weight: 650; }
.daily-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: auto 0 13px; color: #527084; font-size: 11px; font-weight: 650; }
.step-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.section-head h1, .section-head h2 { margin: 3px 0 0; }
.module-grid { margin-top: 18px; }
.module-card { display: flex; flex-direction: column; gap: 12px; }
.module-art { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; }
.module-icon { display: block; width: 64px; height: 64px; object-fit: contain; }
.module-card .module-art .module-icon { width: 70px; height: 70px; }
.intro-art .module-icon { width: 82px; height: 82px; }
.pill { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; padding: 5px 10px; border-radius: 999px; color: #315c74; background: #eaf3f7; font-size: 11px; font-weight: 800; }
.score-badge { flex: 0 0 auto; color: #16805d; font-size: 14px; font-weight: 850; }
.module-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.module-title h3 { margin: 0; }
.module-card > p { min-height: 42px; margin: 0; font-size: 13px; }
.module-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: #688093; font-size: 11px; font-weight: 650; }
.module-card > .btn { align-self: flex-start; margin-top: auto; }
.progress { width: 100%; height: 9px; overflow: hidden; border-radius: 99px; background: #e7eef0; }
.progress > span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, #27a87b, #6bd0ac); }
.progress-row { margin: 16px 0; }
.progress-row .module-title { margin-bottom: 7px; }
.progress-row .module-title span { color: var(--muted); font-size: 12px; text-align: right; }
.stat-card { display: flex; align-items: center; gap: 13px; }
.stat-icon { display: grid; width: 43px; height: 43px; flex: 0 0 auto; place-items: center; border-radius: 14px; color: #167a5a; background: #e3f6ed; font-size: 20px; font-weight: 900; }
.stat-card strong { font-size: 23px; }
.stat-card strong small { color: var(--muted); font-size: 12px; }
.page-intro { display: flex; align-items: center; gap: 19px; padding: 20px 24px; border-color: #d8e9ec; background: linear-gradient(110deg, #eaf7f3, #f7fbff); }
.page-intro h1 { margin: 4px 0 8px; font-size: clamp(24px, 3vw, 34px); }
.page-intro p { margin: 0; }
.intro-art { display: grid; width: 104px; height: 104px; flex: 0 0 auto; place-items: center; border-radius: 26px; background: #fff; }
.lesson-panel { padding: 25px; }
.lesson-title-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.lesson-title-row h1 { margin: 3px 0 5px; }
.lesson-title-row p { margin-bottom: 0; }
.lesson-card { display: grid; grid-template-columns: 33px minmax(0, 1fr); gap: 13px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.lesson-card:last-child { border-bottom: 0; }
.lesson-index { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; color: #17694d; background: #e3f5ec; font-size: 13px; font-weight: 850; }
.lesson-content h2 { margin: 1px 0 10px; }
.lesson-body { color: #3b566c; font-size: 16px; line-height: 1.75; }
.lesson-visual { overflow: hidden; margin: 12px 0 15px; border: 1px solid #e2edf0; border-radius: 16px; background: #f4f9fc; }
.lesson-visual img { display: block; width: 100%; height: auto; max-height: 280px; object-fit: contain; }
.lesson-visual figcaption { padding: 9px 13px 11px; color: #547286; background: #fff; font-size: 12px; font-weight: 700; }
.source-note { margin: 10px 0 0; color: #718596; font-size: 11px; line-height: 1.5; }
.coach-card { align-self: start; background: linear-gradient(160deg, #fff, #eef8f4); }
.study-steps { display: grid; gap: 14px; margin: 20px 0 23px; padding-left: 20px; }
.study-steps li { padding-left: 4px; color: #6a7f8e; }
.study-steps b { display: block; color: #24475f; }
.study-steps span { display: block; font-size: 13px; }
.coach-card .text-link { display: flex; justify-content: center; }
.exam-shell { width: min(880px, 100%); margin: 0 auto; }
.exam-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0 14px; background: var(--canvas); }
.timer { min-width: 96px; padding: 7px 13px; border: 1px solid #d6e3e9; border-radius: 12px; color: #164c71; background: #fff; font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 850; text-align: center; }
.question { margin: 13px 0; font-size: clamp(20px, 2.4vw, 27px); font-weight: 780; line-height: 1.4; }
.question-visual { max-width: 540px; margin: 15px auto; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #f4f9fc; }
.question-visual img { display: block; width: 100%; max-height: 300px; object-fit: contain; }
.option { display: grid; grid-template-columns: 20px 31px minmax(0, 1fr); align-items: start; gap: 11px; margin: 10px 0; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #fff; cursor: pointer; transition: border .13s ease, background .13s ease; }
.option:hover { border-color: #8cb8d5; background: #f7fbfd; }
.option input { width: 17px; height: 17px; margin: 3px 0 0; accent-color: var(--green); }
.option strong { color: #31627e; }
.option span { color: #29465d; }
.answer-instruction { margin-bottom: 12px; }
.answer-form { margin-top: 14px; }
.answer-form > .btn { margin-top: 5px; }
.module-filter { display: flex; align-items: center; gap: 8px; }
.module-filter label { color: var(--muted); font-size: 12px; font-weight: 700; }
.module-filter select { max-width: 220px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; }
.feedback-panel { width: min(880px, 100%); margin: 0 auto 17px; padding: 20px; border: 1px solid #cce7d8; border-radius: 18px; background: #f3fbf6; box-shadow: var(--shadow); }
.feedback-panel.bad { border-color: #f2d6d3; background: #fff8f6; }
.feedback-title { display: flex; align-items: center; gap: 12px; }
.feedback-title h2 { margin: 2px 0; }
.feedback-mark { display: grid; width: 43px; height: 43px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: #29a477; font-size: 22px; font-weight: 900; }
.feedback-panel.bad .feedback-mark { color: #8c4c20; background: #ffe2ac; }
.question-echo { margin: 18px 0 10px; color: #39576e; font-size: 14px; font-weight: 700; }
.answer-review { display: grid; gap: 8px; }
.review-option { display: grid; grid-template-columns: 19px 20px minmax(0,1fr); align-items: start; gap: 8px; padding: 10px; border: 1px solid #eadfdb; border-radius: 11px; color: #715553; background: #fff; font-size: 13px; }
.review-option.is-correct { border-color: #b7e0cb; color: #245940; background: #f6fcf8; }
.review-option.was-selected { box-shadow: inset 3px 0 #edb448; }
.review-symbol { font-weight: 900; }
.review-option small { grid-column: 3; color: #6e8290; font-size: 10px; }
.explanation-box { margin-top: 13px; padding: 15px; border-radius: 13px; background: #fff; }
.explanation-box p { margin: 5px 0 10px; color: #314f65; }
.support-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 11px; }
.support-card { padding: 12px 14px; border: 1px solid #e1e9e9; border-radius: 12px; background: #fff; }
.support-card summary { color: #315b76; font-size: 13px; font-weight: 750; cursor: pointer; }
.support-card p { margin: 9px 0 0; color: #506c7e; font-size: 13px; }
.readiness-card { color: #fff; background: linear-gradient(155deg,#19405b,#267e83); }
.readiness-card .section-kicker, .readiness-card .source-note { color: #d2e9e8; }
.readiness-card .metric { margin: 13px 0; color: #fff; font-size: 28px; }
.readiness-facts { display: grid; gap: 7px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.22); font-size: 12px; }
.official-card { background: linear-gradient(145deg,#fff,#f0f7fd); }
.official-card h3 { margin: 8px 0; }
.official-note { margin-top: 17px; padding: 14px; border: 1px solid #dce9ee; border-radius: 13px; background: #f5fafb; }
.official-note p { margin: 7px 0; color: #62798a; font-size: 12px; }
.official-note a { font-size: 12px; font-weight: 750; }
.admin-shortcuts { align-self: start; }
.admin-link { display: grid; grid-template-columns: 31px 1fr 18px; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.admin-link:hover { text-decoration: none; }
.admin-link > span { color: #2d9a77; font-size: 12px; font-weight: 850; }
.admin-link strong, .admin-link small { display: block; }
.admin-link strong { font-size: 13px; }
.admin-link small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.admin-link b { color: var(--blue); }
.filter-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 13px 0; }
.filter-row label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.filter-row input, .filter-row select { min-width: 175px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; background: #fff; }
th, td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: #557084; background: #f5f9fa; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
td { font-size: 13px; }
tr:last-child td { border-bottom: 0; }
.action-cell { min-width: 142px; }
.action-cell form { margin-top: 7px; }
.form-grid { display: grid; gap: 14px; }
.form-grid label { display: grid; gap: 6px; color: #36546a; font-size: 13px; font-weight: 700; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid #d4e0e5; border-radius: 10px; color: var(--ink); background: #fff; font: inherit; font-weight: 450; }
.form-grid textarea { min-height: 90px; resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: #62a0ce; }
.form-grid .card { padding: 14px; box-shadow: none; }
.form-grid .card span { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--muted); font-size: 12px; }
.form-grid .card span input, .check-label input { width: auto; min-height: 0; accent-color: var(--green); }
.check-label { display: flex !important; align-items: center; gap: 9px !important; }
.alert { margin: 12px 0; padding: 12px 15px; border: 1px solid transparent; border-radius: 11px; }
.alert.ok { border-color: #cce8d8; color: #176341; background: #eef9f2; }
.alert.danger { border-color: #f0d1ce; color: #8f3030; background: #fff4f2; }
.empty-state { max-width: 720px; margin: 0 auto; text-align: center; }
.login-wrap { display: grid; min-height: 100vh; place-items: center; padding: 20px; background: radial-gradient(circle at 10% 10%, #dff5eb, transparent 36%), var(--canvas); }
.login-card { width: min(450px, 100%); padding: 30px; }
.login-card h1 { margin-bottom: 5px; }
.login-card .form-grid { margin-top: 20px; }
.landing { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(320px,440px); align-items: center; gap: clamp(28px,6vw,90px); min-height: 100vh; max-width: 1240px; margin: 0 auto; padding: clamp(25px,5vw,72px); }
.landing-copy { max-width: 690px; }
.landing-brand { display: inline-flex; align-items: center; gap: 11px; margin-bottom: clamp(42px,8vh,90px); color: var(--ink); font-size: 21px; font-weight: 850; }
.landing-brand:hover { text-decoration: none; }
.landing-brand b { color: #218461; }
.landing-mark { display: grid; width: 47px; height: 47px; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(145deg,#1b587b,#25a07b); box-shadow: 0 10px 25px rgba(30,93,112,.22); font-size: 23px; }
.landing-copy .section-kicker { color: #17805d; }
.landing-copy h1 { max-width: 650px; margin: 10px 0 17px; font-size: clamp(38px,5.1vw,64px); line-height: 1.05; letter-spacing: -.045em; }
.landing-lead { max-width: 560px; color: #536e81; font-size: 18px; line-height: 1.65; }
.landing-highlights { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin-top: 29px; }
.landing-highlights > div { display: grid; gap: 4px; padding: 15px; border: 1px solid #dbe8e9; border-radius: 15px; background: rgba(255,255,255,.78); color: #637c8d; font-size: 11px; font-weight: 650; }
.landing-number { color: #17496a; font-size: 23px; font-weight: 850; }
.landing-note { max-width: 560px; margin-top: 20px; color: #748899; font-size: 12px; line-height: 1.55; }
.landing .login-card { width: 100%; padding: 31px; border-color: rgba(213,226,232,.9); box-shadow: 0 22px 65px rgba(27,55,77,.12); }
.landing .login-card h2 { margin: 7px 0 5px; font-size: 25px; }
.landing .login-card > .muted { margin-bottom: 0; }
.landing .login-card .form-grid { margin-top: 21px; }
.login-footnote { margin: 16px 0 0; color: #788b99; font-size: 12px; line-height: 1.5; }
.profile-card h1 { margin: 5px 0 8px; }
.profile-card > .muted { margin-bottom: 20px; }
.profile-summary { align-self: start; text-align: center; background: linear-gradient(160deg,#fff,#f0f8f5); }
.profile-avatar { display: grid; width: 68px; height: 68px; place-items: center; margin: 0 auto 12px; border-radius: 23px; color: #fff; background: linear-gradient(145deg,#1b587b,#25a07b); font-size: 28px; font-weight: 850; }
.profile-summary h2 { margin: 0; }
.profile-summary > .muted { margin: 5px 0 18px; }
.profile-detail { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 12px; text-align: left; }
.profile-detail span { color: var(--muted); }
.profile-detail strong { color: var(--ink); }
.profile-summary .source-note { text-align: left; }
.section-divider { width: 100%; height: 1px; margin: 24px 0; border: 0; background: var(--line); }
.table-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.table-actions form { margin: 0; }
.table-actions .btn { white-space: nowrap; }
.install { display: grid; min-height: 100vh; place-items: center; padding: 20px; }
.install-card { width: min(720px, 100%); padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.kbd { padding: 2px 6px; border-radius: 5px; background: #edf2f5; font-family: ui-monospace, monospace; }
@media (max-width: 1050px) {
  .app { grid-template-columns: 214px minmax(0,1fr); }
  .side { padding-right: 13px; padding-left: 13px; }
  .main { padding-right: 20px; padding-left: 20px; }
  .span-3 { grid-column: span 6; }
  .span-4 { grid-column: span 6; }
  .span-8 { grid-column: span 12; }
}
@media (max-width: 850px) {
  .landing { grid-template-columns: 1fr; gap: 22px; width: min(650px,100%); min-height: 100vh; padding: 27px 20px 35px; }
  .landing-brand { margin-bottom: 28px; }
  .landing-copy h1 { font-size: clamp(36px,8vw,52px); }
}
@media (max-width: 720px) {
  .app { display: block; }
  .side { min-height: 0; padding: 13px 14px 10px; }
  .brand { margin: 0 5px 12px; }
  .side nav { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
  .side nav a { flex: 0 0 auto; min-height: 38px; padding: 8px 10px; font-size: 12px; }
  .nav-dot { width: 6px; height: 6px; }
  .logout-form { position: absolute; top: 16px; right: 14px; margin: 0; padding: 0; }
  .logout-form button { width: auto; min-height: 35px; padding: 5px 9px; font-size: 11px; }
  .main { padding: 17px 14px 35px; }
  .top { margin-bottom: 16px; }
  .top > div:first-child > strong { font-size: 16px; }
  .user-chip { font-size: 11px; }
  .grid { gap: 12px; }
  .span-3, .span-4, .span-6, .span-8, .span-12 { grid-column: span 12; }
  .card { padding: 17px; border-radius: 16px; }
  .hero { padding: 20px; }
  .hero-meta { line-height: 1.7; }
  .page-intro { align-items: flex-start; gap: 12px; padding: 16px; }
  .intro-art { width: 66px; height: 66px; border-radius: 19px; }
  .intro-art .module-icon { width: 56px; height: 56px; }
  .lesson-panel { padding: 17px; }
  .lesson-title-row { align-items: flex-start; gap: 11px; }
  .lesson-title-row .module-icon { width: 48px; height: 48px; }
  .lesson-card { grid-template-columns: 27px minmax(0,1fr); gap: 8px; }
  .lesson-index { width: 25px; height: 25px; }
  .lesson-body { font-size: 15px; }
  .lesson-visual img { max-height: 210px; }
  .module-filter { align-items: flex-start; flex-direction: column; }
  .module-filter select { max-width: 100%; }
  .section-head { flex-direction: column; }
  .support-grid { grid-template-columns: 1fr; }
  .filter-row { align-items: stretch; flex-direction: column; }
  .filter-row input, .filter-row select { min-width: 0; }
  .exam-head { top: 0; }
  .landing { gap: 18px; padding: 21px 16px 28px; }
  .landing-brand { margin-bottom: 22px; }
  .landing-lead { font-size: 15px; }
  .landing-highlights { gap: 7px; margin-top: 18px; }
  .landing-highlights > div { padding: 11px 9px; font-size: 10px; }
  .landing-number { font-size: 19px; }
  .landing .login-card { padding: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}