/* ===== Дизайн-токены (из макета) ===== */
:root {
    --blue: #2563EB;
    --blue-dark: #1D4ED8;
    --ink: #0F172A;
    --muted: #64748B;
    --light: #EFF5FF;
    --ring: #9EC1FF;
    --star: #E5A500;
    --white: #FFFFFF;
    --ok: #15803D;
    --bad: #B42318;
    --radius-lg: 28px;
    --radius-md: 18px;
    --surface: #FFFFFF;
    --hero: #2563EB;
    --tint-blue: #DBE8FF;
    --tint-soft: #F7FAFF;
    --tint-ok: #DCFCE7;
    --tint-warn: #FEF3C7;
    --tint-bad: #FEE4E2;
    --tint-violet: #EDE9FE;
    --line: #E2E8F0;
    --warn-text: #92400E;
    --violet-text: #6D28D9;
    --font: 'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--light);
    color: var(--ink);
    font-family: var(--font);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.35;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }
h1, h2, h3 { margin: 0; font-weight: 900; }
h1:focus { outline: none; }
p { margin: 0; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 16px; position: relative; }

/* ===== Типографика ===== */
.display { font-size: clamp(40px, 5.4vw, 78px); line-height: 1.02; letter-spacing: -0.02em; margin-top: 18px; }
.h2 { font-size: clamp(32px, 4vw, 54px); line-height: 1.05; letter-spacing: -0.015em; margin: 14px 0 0; }
.h2-dark { color: var(--ink); }
.h3 { font-size: 28px; }
.lead { font-size: clamp(20px, 1.7vw, 24px); margin-top: 24px; max-width: 640px; }
.lead-dark { color: var(--ink); }
.label {
    font-size: 16px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue);
}
.label-light { color: var(--white); opacity: 0.85; }
.muted { color: var(--muted); }
.small { font-size: 16px; }
.block { display: block; }
.accent { color: var(--blue); }
.pre { white-space: pre-line; }
.stat { font-size: 42px; font-weight: 900; line-height: 1.05; margin-top: 6px; }
.stat-lg { font-size: clamp(48px, 5vw, 76px); font-weight: 900; line-height: 1; letter-spacing: -0.03em; margin: 10px 0 6px; }
.stat-xl { font-size: clamp(72px, 7vw, 112px); font-weight: 900; line-height: 1; letter-spacing: -0.04em; color: var(--blue); margin: 10px 0 6px; }

/* ===== Кнопки ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 10px 22px; border-radius: 16px; border: 3px solid transparent;
    font-family: var(--font); font-size: 18px; font-weight: 900; cursor: pointer; text-align: center;
}
.btn:disabled { opacity: 0.6; cursor: default; }
.btn-lg { min-height: 60px; padding: 14px 28px; font-size: 20px; border-radius: 18px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-dark); color: var(--white); }
.btn-light { background: var(--surface); color: var(--blue); }
.btn-light:hover { color: var(--blue-dark); }
.btn-outline-light { border-color: rgba(255, 255, 255, 0.6); color: var(--white); background: transparent; }
.btn-outline-light:hover { color: var(--white); border-color: var(--white); }
.pill {
    display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.14); color: var(--white); border: 0;
    font-family: var(--font); font-size: 17px; font-weight: 800; cursor: pointer;
}
.pill:hover { color: var(--white); background: rgba(255, 255, 255, 0.24); }
.pill.active { background: var(--surface); color: var(--blue); }
.link { font-weight: 900; }
.row-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }

/* ===== Карточки и списки ===== */
.card { background: var(--surface); border-radius: var(--radius-lg); padding: 28px; }
.card-selected { box-shadow: 0 0 0 4px var(--ring); }
.card h3 { font-size: 28px; margin: 12px 0 8px; line-height: 1.1; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.list { display: flex; flex-direction: column; gap: 10px; }
.list-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 14px 18px; border-radius: var(--radius-md); background: var(--light); color: var(--ink);
}
.list-link:hover { color: var(--ink); box-shadow: 0 0 0 3px var(--ring); }
.row-warn { box-shadow: 0 0 0 3px var(--ring); }
.tag {
    flex-shrink: 0; padding: 6px 12px; border-radius: 999px; background: var(--surface); color: var(--blue);
    font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.progress { height: 12px; border-radius: 999px; background: var(--light); overflow: hidden; margin: 12px 0 6px; }
.progress > div { height: 100%; background: var(--blue); border-radius: 999px; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.grid-wide { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* ===== Декор: полупрозрачные круги на синем ===== */
.circle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.05); pointer-events: none; }
.circle-a { width: 600px; height: 600px; top: -260px; right: -200px; }
.circle-b { width: 380px; height: 380px; bottom: -180px; left: -140px; }

/* ===== Лендинг ===== */
.hero, .section-blue { position: relative; overflow: hidden; background: var(--hero); color: var(--white); }
.hero { padding: 24px 0 clamp(64px, 9vw, 120px); }
.section { padding: clamp(64px, 8vw, 112px) 0; position: relative; overflow: hidden; }
.section-light { background: var(--light); }
.section .grid-3, .section .grid-2 { margin-top: 40px; color: var(--ink); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; align-items: center; }
.split .grid-2 { margin-top: 0; }
.landing-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.landing-nav { display: flex; gap: 24px; font-size: 19px; font-weight: 800; }
.landing-nav a, .landing-nav a:hover { color: var(--white); }
.landing-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; align-items: center; margin-top: clamp(48px, 7vw, 96px); }
.hero-cards { display: flex; flex-direction: column; gap: 16px; color: var(--ink); max-width: 480px; }
.hero-cards .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(28px, 5vw, 56px); }
.footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 56px; }

/* ===== Логотип ===== */
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--white); }
.logo:hover { color: var(--white); }
.logo-mark {
    display: inline-flex; align-items: center; justify-content: center; border-radius: 30%;
    background: linear-gradient(180deg, #4C8DFF 0%, #1D4ED8 100%); border: 2px solid rgba(255, 255, 255, 0.35);
    color: var(--white); font-weight: 900;
}
.logo-name { font-size: 26px; font-weight: 900; }

/* ===== Кабинет ===== */
.cabinet-top { background: var(--hero); color: var(--white); padding: 16px 0 0; }
.cabinet-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cabinet-user { display: flex; align-items: center; gap: 10px; }
.cabinet-user form { margin: 0; }
.avatar {
    width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--blue);
    display: inline-flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 900;
}
.page-hero { position: relative; overflow: hidden; background: var(--hero); color: var(--white); padding: 40px 0 112px; }
.page-hero-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.hero-title { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.02em; margin-top: 10px; }
.hero-text { font-size: clamp(20px, 1.6vw, 24px); margin-top: 12px; }
.page-body { margin-top: -72px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 24px; }

/* ===== Задания ===== */
.task-card { display: flex; flex-direction: column; gap: 18px; }
.task-done { box-shadow: none; }
.statement { font-size: 21px; white-space: pre-line; }
.math-text .katex { font-size: 1.05em; }
.answer-form, .review-form, .form { display: flex; flex-direction: column; gap: 10px; }
.answer-form .row-actions { margin-top: 6px; justify-content: space-between; }
.field-label { font-size: 15px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.input {
    width: 100%; min-height: 56px; padding: 12px 18px; border-radius: 16px; border: 3px solid var(--ring);
    font-family: var(--font); font-size: 20px; font-weight: 700; color: var(--ink); background: var(--surface);
}
.input:focus { outline: none; border-color: var(--blue); }
.input-short { max-width: 160px; }
.textarea { min-height: 120px; resize: vertical; line-height: 1.4; }
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--blue); }
.result {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
    padding: 16px 18px; border-radius: var(--radius-md); background: var(--light);
}
.result-ok { box-shadow: inset 6px 0 0 var(--ok); }
.result-bad { box-shadow: inset 6px 0 0 var(--bad); }
.result-pending { box-shadow: inset 6px 0 0 var(--ring); }
.result-badge { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-weight: 900; }
.delta { color: var(--blue); }
.comment { padding: 16px 18px; border-radius: var(--radius-md); border: 3px solid var(--ring); }
.solution summary { cursor: pointer; font-weight: 900; color: var(--blue); }
.solution .math-text { margin-top: 10px; white-space: pre-line; }
.review { padding: 20px 0; border-top: 3px solid var(--light); display: flex; flex-direction: column; gap: 12px; }
.review:first-of-type { border-top: 0; }
.answer-box { padding: 16px 18px; border-radius: var(--radius-md); background: var(--light); }
.alert { padding: 12px 16px; border-radius: 14px; background: var(--tint-bad); color: var(--bad); }
.field-error { color: var(--bad); font-size: 16px; }

/* ===== Вход ===== */
.auth { position: relative; overflow: hidden; min-height: 100vh; background: var(--hero); display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.auth-box { position: relative; width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 24px; align-items: center; }
.auth-card { width: 100%; display: flex; flex-direction: column; gap: 20px; }

.page-message { max-width: 640px; margin: 96px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

/* ===== Ошибка Blazor ===== */
#blazor-error-ui {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    padding: 14px 20px; background: var(--ink); color: var(--white);
}
#blazor-error-ui .reload { color: var(--ring); margin-left: 8px; }

@media (max-width: 640px) {
    html, body { font-size: 17px; }
    .card { padding: 20px; border-radius: 22px; }
    .landing-nav { display: none; }
    .page-hero { padding: 28px 0 96px; }
}

/* ===== Информатика: код, файлы ===== */
.mono { font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace; font-weight: 600; }
.textarea-short { min-height: 72px; }
.code-like { font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace; font-size: 16px; font-weight: 600; white-space: pre-wrap; }
.files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.file {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
    border-radius: 14px; border: 3px solid var(--ring); background: var(--surface); color: var(--ink); font-weight: 800;
}
.file:hover { border-color: var(--blue); color: var(--ink); }
.input-file { font-family: var(--font); font-size: 17px; }
.chosen-files { margin: 0; padding-left: 22px; }
.result-partial { box-shadow: inset 6px 0 0 var(--star); }

/* ===== Формы преподавателя ===== */
.btn-outline { background: var(--surface); color: var(--blue); border-color: var(--blue); }
.btn-outline:hover { color: var(--blue-dark); border-color: var(--blue-dark); }
.btn-sm { min-height: 44px; padding: 6px 14px; font-size: 16px; border-radius: 12px; flex-shrink: 0; }
.link-button { background: none; border: 0; padding: 6px; color: var(--blue); font-family: var(--font); font-size: 17px; font-weight: 900; cursor: pointer; min-height: 44px; }
.link-button:hover { color: var(--blue-dark); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-wide { grid-column: span 2; }
.align-start { align-items: start; }
.stack { display: flex; flex-direction: column; gap: 20px; }
select.input { appearance: auto; }
.task-pick { margin-top: 14px; max-height: 70vh; overflow-y: auto; padding: 4px; }
.pick-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--light); }
.pick-selected { box-shadow: 0 0 0 3px var(--ring); background: var(--surface); }
.pick-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pick-text .label { font-size: 14px; }
.selected-list { margin: 0; padding-left: 26px; display: flex; flex-direction: column; gap: 4px; }
.selected-list li { padding: 2px 0; }
.selected-list li > * { vertical-align: middle; }
.selected-list li { display: list-item; }
.selected-list li span { margin-right: 8px; }
@media (max-width: 640px) {
    .field-wide { grid-column: auto; }
}

/* ===== Администрирование ===== */
.textarea.tall { min-height: 220px; }
.preview { position: sticky; top: 16px; }
.notice { padding: 12px 16px; border-radius: 14px; background: var(--light); color: var(--ok); }
.search-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; max-width: 520px; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 10px 12px; border-bottom: 3px solid var(--light); }
.table td { padding: 12px; border-bottom: 2px solid var(--light); vertical-align: middle; }
.table .center { text-align: center; }
.role-check { width: 24px; height: 24px; accent-color: var(--blue); cursor: pointer; }
.role-check:disabled { cursor: not-allowed; }
@media (max-width: 900px) { .preview { position: static; } }

/* ===== Картинки в условиях ===== */
.rich-text { display: flex; flex-direction: column; gap: 14px; }
.rich-text .math-text { white-space: pre-line; }
.content-img { display: block; max-width: 100%; height: auto; border-radius: 12px; border: 2px solid var(--light); }
.label-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.textarea.uploading { border-color: var(--star); }

/* ===== Визуальный редактор и HTML-условия ===== */
.html-editor .jodit-container:not(.jodit_inline) { border-radius: 16px; border: 3px solid var(--ring); font-family: var(--font); }
.html-editor .jodit-workplace { font-family: var(--font); font-size: 19px; font-weight: 700; color: var(--ink); }
.html-content { line-height: 1.45; }
.html-content > :first-child { margin-top: 0; }
.html-content > :last-child { margin-bottom: 0; }
.html-content p { margin: 0 0 12px; }
.html-content ul, .html-content ol { margin: 0 0 12px; padding-left: 26px; }
.html-content img { max-width: 100%; height: auto; border-radius: 12px; }
.html-content table, .html-editor table { border-collapse: collapse; margin: 0 0 12px; max-width: 100%; }
.html-content th, .html-content td, .html-editor th, .html-editor td { border: 2px solid var(--ring); padding: 8px 12px; text-align: left; }
.html-content th { background: var(--light); font-weight: 900; }
.html-content.statement { white-space: normal; }
.html-content.code-like { white-space: normal; }
.html-content pre, .html-content code { font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace; }
.html-content pre {
    margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--light); color: var(--ink);
    font-size: 16px; line-height: 1.45; white-space: pre; overflow-x: auto; tab-size: 4;
}
.html-content pre code { font-size: inherit; background: none; padding: 0; }
.html-content :not(pre) > code { padding: 1px 6px; border-radius: 6px; background: var(--light); font-size: 0.92em; }
.html-content table { display: block; overflow-x: auto; max-width: 100%; }
.html-content .table-scroll { overflow-x: auto; }

/* ===== Две колонки в условии (таблица и картинка рядом) ===== */
/* Колонки всегда стоят рядом; широкая таблица прокручивается внутри своей колонки, а картинка сжимается. */
.infa-cols { display: flex; flex-wrap: nowrap; gap: 24px; align-items: flex-start; margin: 0 0 12px; }
.infa-col { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow-x: auto; }
.infa-col > :last-child { margin-bottom: 0; }
.infa-col img { display: block; max-width: 100%; height: auto; }
.infa-col table { width: auto !important; max-width: none; }
/* В редакторе показываем границы колонок пунктиром, чтобы было видно, куда вставлять. */
.html-editor .infa-cols { padding: 6px; border: 2px dashed var(--ring); border-radius: 12px; }
.html-editor .infa-col { flex: 1 1 0; padding: 6px; border: 2px dashed var(--light); border-radius: 8px; min-height: 60px; }
/* Только на телефоне колонки встают друг под другом. */
@media (max-width: 640px) {
    .infa-cols { flex-direction: column; }
    .infa-col { width: 100%; }
}

/* ===== Выбор размера таблицы ===== */
.infa-table-picker { padding: 10px; font-family: var(--font); }
.infa-table-picker-label { font-weight: 800; margin-bottom: 8px; color: var(--ink); }
.infa-table-picker-grid { display: grid; grid-template-columns: repeat(10, 18px); gap: 3px; }
.infa-table-picker-grid button { width: 18px; height: 18px; padding: 0; border: 1px solid var(--ring); border-radius: 3px; background: var(--surface); cursor: pointer; }
.infa-table-picker-grid button.on { background: var(--blue); border-color: var(--blue); }
.html-editor [data-infa-ph] { color: var(--muted); font-style: italic; }

/* ===== Расписание ===== */
.hero-actions { margin-top: 0; }
.day .h3 { font-size: 22px; margin-bottom: 12px; }
.day-empty { padding-top: 18px; padding-bottom: 18px; }
.day-empty .h3 { margin-bottom: 4px; color: var(--muted); }
.lesson { padding: 14px 18px; border-radius: var(--radius-md); background: var(--light); display: flex; flex-direction: column; gap: 12px; }
.lesson-main { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.lesson-time { min-width: 120px; font-size: 22px; font-weight: 900; color: var(--blue); }
.lesson-info { flex: 1 1 260px; min-width: 0; }
.lesson-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.lesson-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lesson-cancelled { opacity: 0.6; }
.lesson-cancelled .lesson-time { text-decoration: line-through; }
.lesson-done { box-shadow: inset 6px 0 0 var(--ok); }
.lesson-missed { box-shadow: inset 6px 0 0 var(--bad); }
.tag-paid { color: var(--ok); }
.tag-unpaid { color: var(--bad); }
.input-compact { min-height: 44px; width: auto; padding: 6px 12px; font-size: 16px; }
.danger { color: var(--bad); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== Просмотр ДЗ преподавателем ===== */
.section-title { margin-top: 8px; }
.matrix td, .matrix th { white-space: nowrap; }
.cell { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 10px; font-weight: 900; background: var(--light); color: var(--muted); }
.cell-correct { background: var(--tint-ok); color: var(--ok); }
.cell-partial { background: var(--tint-warn); color: var(--warn-text); }
.cell-wrong { background: var(--tint-bad); color: var(--bad); }
.cell-pending { background: var(--light); color: var(--blue); }
.answer-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.answer-compare .answer-box { margin-top: 6px; }

/* ===== Сетка недели (расписание преподавателя) ===== */
.schedule-layout { display: flex; gap: 20px; align-items: flex-start; }
.week-card { flex: 1 1 auto; min-width: 0; padding: 16px; }
.schedule-panel {
    flex: 0 0 360px; width: 360px; position: sticky; top: 16px;
    display: flex; flex-direction: column; gap: 16px;
    max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px;
}
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.field-row .field { min-width: 0; }

/* Внутри панели всё компактнее, чтобы помещалось в 360 px. */
.schedule-panel .input { min-width: 0; min-height: 46px; padding: 8px 12px; font-size: 17px; border-width: 2px; border-radius: 12px; }
.schedule-panel .textarea { min-height: 84px; }
.schedule-panel .field-label { font-size: 13px; }
.schedule-panel .btn-block { min-height: 52px; font-size: 18px; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.panel-head .h3 { font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; }
.icon-button { flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--light); color: var(--ink); font-size: 18px; font-weight: 900; cursor: pointer; }
.icon-button:hover { background: var(--ring); }
.panel-meta { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 16px; margin-top: -6px; }
.panel-meta .tag { align-self: flex-start; white-space: normal; text-transform: none; letter-spacing: 0; font-size: 14px; }
.tag-series { background: var(--light); color: var(--blue); }
.panel-section { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 3px solid var(--light); }
.panel-label { font-size: 13px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.panel-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.panel-footer .link-button { padding: 4px 0; min-height: 36px; font-size: 16px; }

/* Статус: четыре кнопки 2×2 */
.segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.seg { min-height: 42px; padding: 6px 8px; border-radius: 12px; border: 2px solid var(--light); background: var(--surface); color: var(--ink); font-family: var(--font); font-size: 15px; font-weight: 800; cursor: pointer; }
.seg:hover { border-color: var(--ring); }
.seg.on { color: var(--white); border-color: transparent; }
.seg-scheduled.on { background: var(--blue); }
.seg-done.on { background: var(--ok); }
.seg-missed.on { background: var(--bad); }
.seg-cancelled.on { background: var(--muted); }

/* Переключатель */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 800; min-height: 44px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; flex-shrink: 0; width: 46px; height: 26px; border-radius: 999px; background: var(--ring); transition: background 0.15s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); transition: transform 0.15s; }
.switch input:checked + .switch-track { background: var(--ok); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Дни недели постоянного занятия */
.weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.weekday { min-height: 40px; border-radius: 10px; border: 2px solid var(--ring); background: var(--surface); font-family: var(--font); font-size: 15px; font-weight: 900; color: var(--ink); cursor: pointer; padding: 0; }
.weekday.on { background: var(--blue); border-color: var(--blue); color: var(--white); }
.radio-group { display: flex; flex-direction: column; gap: 2px; }
.radio-group .check { min-height: 36px; }

.week-scroll { overflow-x: auto; }
.week {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(118px, 1fr));
    grid-template-rows: auto calc(var(--hours) * var(--hour-h));
    min-width: 900px;
}
.week-corner { border-bottom: 3px solid var(--light); }
.week-day-head { display: flex; flex-direction: column; align-items: center; padding: 6px 0 10px; border-bottom: 3px solid var(--light); }
.week-dow { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.week-date { font-size: 24px; font-weight: 900; }
.week-day-head.is-today .week-date { color: var(--white); background: var(--blue); border-radius: 999px; min-width: 40px; text-align: center; }

.week-hours { position: relative; }
.week-hour-label { height: var(--hour-h); font-size: 13px; font-weight: 800; color: var(--muted); transform: translateY(-8px); text-align: right; padding-right: 8px; }
.week-hour-label:first-child { transform: none; }

.week-col {
    position: relative;
    border-left: 2px solid var(--light);
    background-image: repeating-linear-gradient(to bottom, var(--light) 0, var(--light) 2px, transparent 2px, transparent var(--hour-h));
}
.week-col.is-today { background-color: var(--tint-soft); }
.week-slot {
    position: absolute; left: 0; right: 0; height: var(--hour-h);
    border: 0; background: transparent; cursor: pointer; padding: 0;
}
.week-slot:hover { background: rgba(37, 99, 235, 0.06); }
.week-slot:focus-visible { outline: 3px solid var(--ring); outline-offset: -3px; }

.week-lesson {
    position: absolute; left: 4px; right: 4px; z-index: 1;
    display: flex; flex-direction: column; gap: 1px; overflow: hidden;
    padding: 4px 8px; border-radius: 10px; border: 0; text-align: left; cursor: pointer;
    font-family: var(--font); color: var(--ink); background: var(--tint-blue); box-shadow: inset 4px 0 0 var(--blue);
}
.week-lesson:hover { filter: brightness(0.97); }
.week-lesson.is-selected { outline: 3px solid var(--blue); outline-offset: 1px; }
.week-lesson.status-done { background: var(--tint-ok); box-shadow: inset 4px 0 0 var(--ok); }
.week-lesson.status-missed { background: var(--tint-bad); box-shadow: inset 4px 0 0 var(--bad); }
.week-lesson.status-cancelled { background: var(--light); box-shadow: inset 4px 0 0 var(--muted); opacity: 0.65; }
.week-lesson.status-cancelled .wl-who { text-decoration: line-through; }
.wl-time { display: flex; justify-content: space-between; gap: 4px; font-size: 12px; font-weight: 800; color: var(--muted); }
.wl-who { font-size: 15px; font-weight: 900; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-meta { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-paid { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 6px; font-size: 12px; font-weight: 900; }
.wl-paid.paid { background: var(--ok); color: var(--white); }
.wl-paid.unpaid { background: var(--surface); color: var(--bad); border: 2px solid var(--bad); }

.week-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; align-items: center; }
.week-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend-box { display: inline-block; width: 16px; height: 16px; border-radius: 4px; background: var(--tint-blue); }
.legend-box.status-done { background: var(--tint-ok); }
.legend-box.status-missed { background: var(--tint-bad); }
.legend-box.status-cancelled { background: var(--light); border: 2px solid var(--muted); }

@media (max-width: 1100px) {
    .schedule-layout { flex-direction: column; }
    .schedule-panel { flex: 1 1 auto; width: 100%; position: static; max-height: none; }
}
.wl-repeat { margin-left: auto; margin-right: 4px; color: var(--blue); font-weight: 900; }
.week-legend .wl-repeat { margin: 0; }

/* ===== Аватарки и профиль ===== */
.avatar-img {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
    border-radius: 50%; background: var(--light); color: var(--blue); font-weight: 900; line-height: 1;
}
.avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-on-blue { background: var(--surface); border: 2px solid rgba(255, 255, 255, 0.6); }
.user-badge { display: inline-flex; align-items: center; gap: 10px; color: var(--white); font-weight: 800; }
.user-badge:hover { color: var(--white); }
.user-badge-name { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .user-badge-name { display: none; } }

.profile-card { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.profile-avatar { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 0 0 auto; }
.profile-avatar-actions { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.profile-fields { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.counter { align-self: flex-end; }
.notice-card { display: flex; flex-direction: column; gap: 6px; box-shadow: 0 0 0 4px var(--ring); }
.notice-bad { box-shadow: 0 0 0 4px #FDA29B; }

/* Окно обрезки аватарки */
.cropper:empty { display: none; }
.cropper { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cropper-canvas { border-radius: 16px; cursor: grab; touch-action: none; box-shadow: 0 0 0 3px var(--ring); background: var(--light); }
.cropper-canvas:active { cursor: grabbing; }
.cropper-zoom { display: flex; align-items: center; gap: 10px; font-weight: 800; width: 280px; }
.cropper-zoom input { flex: 1; accent-color: var(--blue); }
.cropper-actions { display: flex; gap: 10px; }

/* Модерация */
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.compare-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; border-radius: var(--radius-md); background: var(--light); }
.compare-new { background: var(--surface); box-shadow: inset 0 0 0 3px var(--ring); }
.changed { color: var(--blue); font-weight: 900; }
.moderation-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.moderation-actions .input { flex: 1 1 260px; min-height: 48px; }

/* ===== Профили людей ===== */
.public-profile { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.public-profile-info { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.public-profile .about { font-size: 21px; overflow-wrap: anywhere; }
.role-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.people-filters { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.people-search { flex: 1 1 280px; }
.role-filter { display: flex; flex-wrap: wrap; gap: 6px; }
/* Переключатели-фильтры: невыбранные — без рамки, выбранный — в синей рамке. */
.pill-light {
    min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 3px solid transparent;
    background: var(--surface); color: var(--muted); font-family: var(--font); font-size: 16px; font-weight: 800; cursor: pointer;
}
.pill-light:hover { color: var(--ink); }
.pill-light.on { border-color: var(--blue); color: var(--blue); font-weight: 900; box-shadow: 0 0 0 3px var(--ring); }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.person { display: flex; gap: 16px; align-items: center; color: var(--ink); padding: 20px; }
.person:hover { color: var(--ink); box-shadow: 0 0 0 3px var(--ring); }
.person-info { min-width: 0; }
.person-about { margin-top: 4px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.profile-link { margin-left: 8px; font-weight: 800; }

/* ===== Рейтинг: звания и топ ===== */
.tier { display: inline-flex; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 900; letter-spacing: 0.04em; }
.tier-bronze { background: #F6E3D3; color: #8A4B1C; }
.tier-silver { background: #E8EDF3; color: #475569; }
.tier-gold { background: #FDF0C4; color: #8A6100; }
.tier-platinum { background: #DDF4F1; color: #0F6B63; }
.tier-diamond { background: #E3E8FF; color: #3730A3; }
.rating-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border-radius: var(--radius-md); background: var(--light); }
.rating-tile .stat-lg { margin: 0; }
.leaderboard .rank { font-size: 20px; font-weight: 900; width: 70px; }
.rank-1 { color: var(--star); }
.rank-2 { color: #64748B; }
.rank-3 { color: #B4693A; }
.leaderboard tr.is-me td { background: var(--light); }
.leader { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.leader:hover { color: var(--blue); }

/* ===== Достижения ===== */
.achievements-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.achievement {
    --rarity: #94A3B8;
    display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: var(--radius-md);
    background: var(--surface); box-shadow: inset 0 0 0 3px var(--rarity);
}
.achievement-img {
    flex-shrink: 0; width: 72px; height: 72px; border-radius: 18px; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--light); box-shadow: 0 0 0 3px var(--rarity); font-size: 34px; color: var(--rarity);
}
.achievement-img img { width: 100%; height: 100%; object-fit: contain; }
.achievement-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.achievement-rarity { font-size: 13px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rarity); }
.rarity-common { --rarity: #94A3B8; }
.rarity-rare { --rarity: #2563EB; }
.rarity-epic { --rarity: #7C3AED; }
.rarity-legendary { --rarity: #E5A500; background: var(--tint-warn); }

.achievements-admin { display: flex; flex-direction: column; gap: 12px; }
.achievement-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-md); }
.achievement-row .achievement { flex: 1 1 320px; }
.achievement-row.is-selected { background: var(--light); }
.achievement-row.is-archived { opacity: 0.6; }
.row-actions.compact { margin-top: 0; gap: 8px; }
.pick-list { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
.pick-person { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: 12px; border: 2px solid transparent; background: var(--light); font-family: var(--font); font-size: 16px; font-weight: 800; color: var(--ink); text-align: left; cursor: pointer; }
.pick-person.on { border-color: var(--blue); background: var(--surface); }
.pick-person:disabled { opacity: 0.55; cursor: default; }
.holder { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 2px solid var(--light); }

/* ===== Меню кабинета ===== */
/* Одна и та же белая панель: на ПК стоит справа во всю высоту, на телефоне и планшете выезжает шторкой. */
html { scrollbar-gutter: stable; } /* страница не «прыгает», когда появляется полоса прокрутки */
.cabinet-top .cabinet-user { gap: 8px; }
.menu-button {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto;
    border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.14); color: var(--white); cursor: pointer;
}
.menu-button:hover { background: rgba(255, 255, 255, 0.24); }
.side-open { display: none; }

.cabinet-side {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(320px, 86vw);
    display: flex; flex-direction: column; padding: 18px 14px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); box-shadow: -12px 0 40px rgba(15, 23, 42, 0.18);
    /* Закрытая шторка остаётся в пределах экрана (только прозрачная) — иначе на телефоне появлялась прокрутка вбок. */
    transform: scale(0.97); transform-origin: right center; opacity: 0; visibility: hidden; transition: transform 0.22s ease, opacity 0.22s ease, visibility 0s linear 0.22s;
    scrollbar-width: thin; scrollbar-color: var(--tint-blue) transparent;
}
html.menu-open .cabinet-side { transform: none; opacity: 1; visibility: visible; transition: transform 0.22s ease, opacity 0.22s ease; }
.side-backdrop { display: none; }
html.menu-open .side-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(15, 23, 42, 0.45); }
html.menu-open { overflow: hidden; }

.side-user {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 0 0 14px 6px; margin-bottom: 4px; border-bottom: 2px solid var(--light);
}
.side-user .user-badge { flex: 1 1 auto; min-width: 0; color: var(--ink); }
.side-user .user-badge:hover { color: var(--blue); }
.side-user .user-badge-name { display: inline; max-width: none; min-width: 0; }
.side-user .avatar-on-blue { background: var(--light); border-color: var(--ring); }
.side-hide {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--light); color: var(--blue); cursor: pointer;
}
.side-hide:hover { background: var(--tint-blue); }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-group {
    margin: 14px 14px 4px; font-size: 12px; font-weight: 900;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.side-link {
    display: flex; align-items: center; width: 100%; min-height: 42px; padding: 8px 14px; border: 0; border-radius: 12px;
    background: transparent; color: var(--ink); font-family: inherit; font-size: 17px; font-weight: 800; text-align: left; cursor: pointer;
}
.side-link:hover { background: var(--light); color: var(--ink); }
.side-link.active { background: var(--blue); color: var(--white); }
.side-logout { margin: auto 0 0; padding-top: 12px; }
.side-logout .side-link { color: var(--muted); }

/* ПК: панель встаёт в сетку справа. */
@media (min-width: 1100px) {
    .cabinet {
        display: grid; grid-template-columns: minmax(0, 1fr) 264px;
        grid-template-areas: "top side" "main side"; grid-template-rows: auto 1fr; min-height: 100vh;
    }
    .cabinet-top { grid-area: top; }
    .cabinet-main { grid-area: main; min-width: 0; }
    .cabinet-top .cabinet-user, .menu-button, .side-backdrop { display: none !important; }
    .cabinet-side {
        grid-area: side; position: sticky; top: 0; bottom: auto; align-self: start; height: 100vh; width: auto; z-index: auto;
        padding: 20px 14px; border-left: 2px solid var(--tint-blue); box-shadow: none; transform: none; opacity: 1; visibility: visible; transition: none;
    }
    html.menu-open { overflow: auto; }

    /* Меню скрыто: контент на всю ширину, в шапке — кнопка «Меню». */
    html.side-collapsed .cabinet { grid-template-columns: minmax(0, 1fr) 0; }
    html.side-collapsed .cabinet-side { display: none; }
    html.side-collapsed .side-open { display: inline-flex; margin-left: auto; }
    html.side-collapsed .cabinet-top .cabinet-user { display: flex !important; }
}

/* ===== Уровни Эло (как на FACEIT) ===== */
.level-wrap { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.level { position: relative; display: inline-flex; width: 40px; height: 40px; flex-shrink: 0; }
.level svg { width: 100%; height: 100%; }
.level-track { fill: var(--tint-soft); stroke: var(--line); stroke-width: 4; }
.level-arc { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.level-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 900; }
.level-1 { color: #94A3B8; }
.level-2 { color: #16A34A; }
.level-4 { color: #E5A500; }
.level-8 { color: #F97316; }
.level-10 { color: #DC2626; }
.level-10 .level-track { fill: var(--tint-bad); }
.level-godlike {
    display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px;
    background: linear-gradient(90deg, #7C3AED 0%, #DB2777 50%, #E5A500 100%);
    color: var(--white); font-size: 15px; font-weight: 900; letter-spacing: 0.12em;
    box-shadow: 0 0 0 3px #F5D0FE, 0 4px 18px rgba(219, 39, 119, 0.35);
}
.level-elo { font-weight: 900; white-space: nowrap; }
.level-lg .level { width: 64px; height: 64px; }
.level-lg .level-num { font-size: 26px; }
.level-lg .level-godlike { padding: 10px 18px; font-size: 20px; }
.level-stat { display: flex; align-items: center; gap: 12px; margin-top: 8px; min-width: 0; }
.ink { color: var(--ink); }
.tag-auto { background: var(--tint-blue); color: var(--blue); margin: 4px 0; }
.unlocked .achievements-grid { margin-top: 10px; }

/* ===== Админка: ручное Эло ===== */
.elo-edit { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.elo-edit-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 140px auto; align-items: center; gap: 14px;
    padding: 12px 16px; border-radius: 16px; background: var(--light);
}
.elo-input { margin: 0; text-align: center; font-weight: 900; }
.plain-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 640px) {
    .elo-edit-row { grid-template-columns: minmax(0, 1fr) auto; }
    .elo-edit-row .elo-input { grid-column: 1; }
}
.elo-cell { display: inline-flex; margin-right: 10px; vertical-align: middle; }
.elo-cell .level { width: 32px; height: 32px; }
.elo-cell .level-num { font-size: 14px; }

/* ===== Тренировка ===== */
.kim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 8px; }
.kim-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 132px; padding: 16px;
    border: 3px solid transparent; border-radius: 18px; background: var(--light); color: var(--ink);
    font-family: inherit; text-align: left; cursor: pointer;
}
.kim-tile:hover:not(:disabled) { border-color: var(--ring); }
.kim-tile:disabled { cursor: default; opacity: 0.55; }
.kim-tile.is-done { background: var(--tint-ok); }
.kim-num { font-size: 24px; font-weight: 900; color: var(--blue); line-height: 1; }
.kim-name {
    font-size: 15px; font-weight: 800; line-height: 1.25; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.kim-progress { display: block; width: 100%; height: 8px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.kim-progress > span { display: block; height: 100%; background: var(--blue); border-radius: 999px; }

/* ===== Пробник ===== */
.mock-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; position: sticky; top: 8px; z-index: 3; }
.mock-num {
    width: 46px; height: 46px; border: 3px solid transparent; border-radius: 12px; background: var(--light);
    color: var(--ink); font-family: inherit; font-size: 17px; font-weight: 900; cursor: pointer;
}
.mock-num.answered { background: var(--blue); color: var(--white); }
.mock-num.on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--ring); }
.mock-review { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mock-review-item { padding: 12px 18px; border-radius: 16px; background: var(--light); }
.mock-review-item[open] { padding-bottom: 18px; }
.mock-review-item > summary { display: flex; align-items: center; gap: 16px; cursor: pointer; font-weight: 800; list-style: none; }
.mock-review-item > summary::-webkit-details-marker { display: none; }
.mock-review-item > :not(summary) { margin-top: 12px; }
.mock-review-num { min-width: 48px; font-weight: 900; color: var(--blue); }
.mock-review-score { margin-left: auto; font-weight: 900; white-space: nowrap; }
.ok-text { color: var(--ok); }
.table tr.is-me td { background: var(--light); }
.inline-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.invite-row { align-items: flex-start; }
.invite-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.invite-url { margin-top: 4px; font-size: 14px; padding: 8px 12px; min-height: 0; }

/* ===== Уведомления ===== */
.bell {
    position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px; background: var(--light); color: var(--blue);
}
.bell:hover { background: var(--tint-blue); color: var(--blue); }
.bell-on-blue { background: rgba(255, 255, 255, 0.14); color: var(--white); }
.bell-on-blue:hover { background: rgba(255, 255, 255, 0.24); color: var(--white); }
.bell-count {
    position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    background: #DC2626; color: var(--white); font-size: 12px; font-weight: 900; line-height: 22px; text-align: center;
    box-shadow: 0 0 0 2px var(--white);
}
.notif-list { display: flex; flex-direction: column; gap: 6px; }
.notif { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; color: var(--ink); }
a.notif:hover { background: var(--light); color: var(--ink); }
.notif.is-new { background: var(--tint-blue); box-shadow: inset 4px 0 0 var(--blue); }
.notif-icon {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 15px; background: var(--light); color: var(--blue);
}
.notif-star { background: var(--tint-warn); color: var(--warn-text); }
.notif-ok { background: var(--tint-ok); color: var(--ok); }
.notif-lesson { background: var(--tint-violet); color: var(--violet-text); }
.notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.child-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin: 16px 0; }

/* ===== План на сегодня ===== */
.plan-goal { padding: 6px 14px; border-radius: 999px; background: var(--light); color: var(--blue); font-weight: 900; white-space: nowrap; }
.plan-goal.is-done { background: var(--tint-ok); color: var(--ok); }
.plan-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.plan-item {
    display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px;
    border-radius: 16px; background: var(--light); color: var(--ink); border: 3px solid transparent;
}
.plan-item:hover { color: var(--ink); border-color: var(--ring); }
.plan-badge { font-weight: 900; color: var(--blue); white-space: nowrap; }
.plan-mistakes .plan-badge { color: var(--warn-text); }
.plan-mock .plan-badge { color: var(--violet-text); }
.stage-dots { display: inline-flex; gap: 4px; }
.stage-dots > span { width: 10px; height: 10px; border-radius: 50%; background: var(--tint-blue); }
.stage-dots > span.on { background: var(--blue); }

/* ===== Статистика ученика ===== */
.chart { width: 100%; height: auto; display: block; margin-top: 8px; overflow: visible; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-level { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; }
.chart-axis { fill: var(--muted); font-size: 12px; font-weight: 700; }
.chart-value { fill: var(--ink); font-size: 13px; font-weight: 900; }
.chart-line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-mock { fill: var(--surface); stroke: var(--blue); stroke-width: 2; }
.chart-last { fill: var(--blue); stroke: var(--white); stroke-width: 2; }
.chart-hit { fill: transparent; cursor: default; }
.chart-hit:hover { fill: rgba(37, 99, 235, 0.15); }
.chart-bar { fill: #9EC1FF; }
.chart-bar.is-current, .chart:not(.chart-wide) .chart-bar { fill: var(--blue); }
.chart-hitbox { fill: transparent; }
g:hover > .chart-bar { fill: #1D4ED8; }
.compact-list { margin-top: 12px; }

.kim-heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-top: 8px; }
.heat-cell {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; color: var(--ink);
    border: 2px solid var(--white);
}
.heat-num { font-size: 13px; font-weight: 800; color: var(--muted); }
.heat-value { font-size: 20px; font-weight: 900; line-height: 1.1; }
.heat-flag { font-size: 11px; font-weight: 800; color: #B45309; }
.heat-weak2, .heat-legend .heat-weak2 { background: #FCA5A5; }
.heat-weak1, .heat-legend .heat-weak1 { background: #FEE2E2; }
.heat-mid, .heat-legend .heat-mid { background: #F1F5F9; }
.heat-strong1, .heat-legend .heat-strong1 { background: #DBEAFE; }
.heat-strong2, .heat-legend .heat-strong2 { background: #93C5FD; }
.heat-none, .heat-legend .heat-none { background: var(--surface); border: 2px dashed #CBD5E1; }
.heat-empty { background: var(--surface); border: 2px dashed #E2E8F0; opacity: 0.6; }
.heat-empty .heat-value { font-size: 12px; color: var(--muted); }
.heat-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.heat-legend span { display: inline-flex; align-items: center; gap: 6px; }
.heat-legend i { display: inline-block; width: 22px; height: 14px; border-radius: 4px; }
.logo-img { display: block; width: auto; max-width: 100%; }
@media (max-width: 640px) { .cabinet-bar .logo-img { height: 36px !important; } }

/* ===== Неуверенность в ответе ===== */
.unsure-box { padding: 12px 16px; border-radius: 14px; background: var(--tint-warn); color: var(--warn-text); }
.cell-unsure { position: relative; }
.cell-unsure::after {
    content: "?"; position: absolute; top: -6px; right: -8px; width: 16px; height: 16px; border-radius: 50%;
    background: #F59E0B; color: var(--white); font-size: 11px; font-weight: 900; line-height: 16px; text-align: center;
}
.unsure-toggle { display: flex; flex-direction: column; gap: 6px; }

/* ===== Сообщить об ошибке / вопрос преподавателю ===== */
.task-tools { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--light); }
.task-report, .question-box { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.task-report textarea, .question-box textarea { width: 100%; }
.muted-link { color: var(--muted); font-size: 14px; }
.question-thread { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.q-msg { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 14px; max-width: 88%; }
.q-msg.from-me { background: var(--light); align-self: flex-end; }
.q-msg.from-teacher { background: var(--tint-blue); box-shadow: inset 4px 0 0 var(--blue); align-self: flex-start; }
.q-author { font-size: 13px; font-weight: 800; }
.tag-open { background: var(--tint-warn); color: var(--warn-text); }
.report-card { display: flex; flex-direction: column; gap: 10px; }
.question-reply { margin-top: 16px; }
.rank-num { min-width: 24px; font-weight: 900; color: var(--muted); text-align: right; }
.is-me-row { background: var(--light); border-radius: 14px; }
.add-member { margin-top: 16px; }
.add-member select { flex: 1; min-width: 0; }
.section-gap { margin-top: 24px; }
.is-archived { opacity: 0.6; }

/* ===== Материалы занятия ===== */
.material-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.material-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.material-list a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-button.small { width: 30px; height: 30px; font-size: 14px; border-radius: 9px; }
.file-pick { position: relative; cursor: pointer; align-self: flex-start; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.material-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pdf-frame { width: 100%; height: min(80vh, 900px); border-radius: 16px; overflow: hidden; border: 2px solid var(--light); background: var(--tint-soft); }
.pdf-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.exam-edit { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.exam-defaults { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 8px; }
.link-button.small { font-size: 13px; }
.preview-label { margin: 18px 0 8px; }
.pick-scroll { max-height: 320px; overflow-y: auto; }
.include-parents { margin: 16px 0; }

/* Кнопка «Войти на занятие» на карточке в сетке недели */
.wl-join {
    position: absolute; right: 8px; z-index: 2; width: 24px; height: 22px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--blue); font-size: 11px; font-weight: 900;
    box-shadow: 0 0 0 2px var(--ring);
}
.wl-join:hover { background: var(--blue); color: var(--white); }
.wl-join.is-live { background: var(--blue); color: var(--white); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--blue); }
.lesson-actions .btn-outline { background: var(--surface); }

/* ===== Импорт заданий ===== */
.import-source { min-height: 280px; font-size: 14px; }
.import-files { margin-top: 10px; max-height: 260px; overflow-y: auto; }
.import-help { margin-top: 16px; }
.import-help pre { white-space: pre-wrap; background: var(--light); padding: 12px; border-radius: 12px; }
.import-table td { vertical-align: top; }
.import-statement { max-width: 380px; }
.row-error td { background: var(--tint-bad); }
.auto-pick-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; margin-top: 8px; }
.auto-pick-row .field { display: flex; flex-direction: column; gap: 4px; }
.auto-pick-row .check { min-height: 48px; }
.kim-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin-top: 12px; }
.auto-pick .notice { margin-top: 12px; }

/* ===== Оплаты ===== */
.pay-card { padding: 16px; border-radius: 16px; background: var(--light); display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pay-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pay-amount { font-size: 24px; font-weight: 900; color: var(--blue); white-space: nowrap; }
.pay-confirm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.pay-confirm .field { display: flex; flex-direction: column; gap: 4px; }
.receipt-row { align-items: center; flex-wrap: wrap; }
.receipt-url { max-width: 220px; min-height: 36px; padding: 6px 10px; font-size: 14px; }
.balance-card { display: flex; flex-direction: column; gap: 14px; }
.balance-nums { display: flex; gap: 28px; flex-wrap: wrap; }
.tariff-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.tariff-option {
    display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; border: 3px solid var(--light);
    background: var(--surface); font-family: inherit; text-align: left; cursor: pointer; color: var(--ink);
}
.tariff-option.on { border-color: var(--blue); box-shadow: 0 0 0 3px var(--ring); }
.pay-details { padding: 16px; border-radius: 16px; background: var(--light); display: flex; flex-direction: column; gap: 10px; }
.pay-details .mono { font-size: 18px; }

/* ===== Лига и монеты ===== */
.league-tiers { display: flex; gap: 4px; margin: 4px 0 14px; flex-wrap: wrap; }
.league-dot { width: 28px; height: 28px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 900; background: var(--light); color: var(--muted); }
.league-dot.passed { background: var(--tint-blue); color: var(--blue); }
.league-dot.on { background: var(--blue); color: var(--white); box-shadow: 0 0 0 3px var(--ring); }
.league-table { display: flex; flex-direction: column; gap: 4px; }
.league-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; }
.league-row .league-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.league-row.zone-promote { background: var(--tint-ok); }
.league-row.zone-demote { background: var(--tint-bad); }
.league-row.is-me-row { box-shadow: inset 0 0 0 3px var(--ring); background: var(--tint-blue); }
.league-line { font-size: 12px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 12px; }
.league-line.promote { color: var(--ok); }
.league-line.demote { color: var(--bad); }
.coin-balance { font-size: 22px; font-weight: 900; color: var(--warn-text); }
.shop-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--light); margin-bottom: 12px; }
.earn-list { margin: 6px 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.tg-manual { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--light); }
.tg-manual code { padding: 4px 8px; border-radius: 8px; background: var(--surface); font-size: 15px; }

/* ===== Полировка: общие правки вёрстки ===== */
/* Сводки из трёх цифр: на ПК и планшете — три в ряд, на телефоне — первая крупно, две под ней. */
@media (min-width: 760px) {
    .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.stat-grid > .card { display: flex; flex-direction: column; gap: 4px; }
.stat-grid > .card > .link { margin-top: auto; }

/* Карточка занятия: кнопка «Войти» справа, а не отдельной строкой. */
.lesson { flex-direction: row; flex-wrap: wrap; align-items: center; }
.lesson > .lesson-main { flex: 1 1 320px; min-width: 0; }
.lesson > .lesson-actions { margin-left: auto; }
.lesson > :not(.lesson-main):not(.lesson-actions) { flex-basis: 100%; }

/* Ссылки-действия под заданием — в одну строку. */
.task-tools { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 4px 20px; }
.task-tools > * { flex: 0 1 auto; }
.task-tools > .question-box:has(textarea), .task-tools > .task-report:has(textarea) { flex-basis: 100%; }

@media (max-width: 640px) {
    .container { padding: 0 14px; }
    .cabinet-top { padding-top: 12px; }
    .page-hero { padding: 18px 0 84px; }
    .page-hero-inner { gap: 16px; align-items: flex-start; }
    .hero-title { font-size: 34px; }
    .hero-text { font-size: 17px; margin-top: 8px; }
    .page-hero .btn-lg { min-height: 50px; padding: 10px 20px; font-size: 18px; }
    .page-body { margin-top: -64px; gap: 16px; padding-bottom: 48px; }
    .h3 { font-size: 24px; }
    .card h3 { font-size: 24px; }

    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .stat-grid > .card:first-child { grid-column: 1 / -1; }
    .stat-grid > .card { padding: 16px; }
    .stat-grid .label { font-size: 13px; }
    .stat-grid .stat-lg { font-size: 40px; }
    .stat-grid .stat-xl { font-size: 60px; }
    .stat-grid .muted { font-size: 15px; }

    /* Приглашения: ссылка и кнопки под текстом, а не сбоку. */
    .invite-row { flex-direction: column; align-items: stretch; }
    .invite-row .row-actions { justify-content: flex-start; }

    /* Таблицы на телефоне листаются вбок целиком, ячейки не ломаются по слову. */
    .table-wrap .table th, .table-wrap .table td { white-space: nowrap; }
    .table td { padding: 10px 8px; }

    .lesson > .lesson-actions { margin-left: 0; }
    .lesson-time { min-width: 0; font-size: 19px; }
    .list-row { padding: 12px 14px; }
}
@media (min-width: 900px) { .lesson-time { min-width: 180px; } }

/* ===== Расписание препода на телефоне: один день вместо недели ===== */
.day-tabs { display: none; }
@media (max-width: 760px) {
    .day-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px; }
    .day-tab {
        display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 4px; min-height: 64px;
        border: 2px solid transparent; border-radius: 14px; background: var(--light); color: var(--ink);
        font-family: inherit; cursor: pointer;
    }
    .day-tab-dow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
    .day-tab-date { font-size: 20px; font-weight: 900; line-height: 1.1; }
    .day-tab-dot { min-height: 16px; font-size: 12px; font-weight: 900; color: var(--blue); }
    .day-tab.is-today { border-color: var(--ring); }
    .day-tab.on { background: var(--blue); color: var(--white); border-color: var(--blue); }
    .day-tab.on .day-tab-dow, .day-tab.on .day-tab-dot { color: var(--white); }

    .week-card { padding: 12px; }
    .week { min-width: 0; grid-template-columns: 48px minmax(0, 1fr); }
    .week .day-off, .week .week-corner, .week .week-day-head { display: none; }
    .week-legend { gap: 6px 12px; }
}

/* ===== Навигация по заданиям домашки ===== */
.hw-nav { padding: 12px 16px; }
.hw-num { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.hw-num:hover { border-color: var(--ring); color: inherit; }
.hw-num.answered { color: var(--white); }
.hw-num.hw-ok { background: var(--ok); }
.hw-num.hw-partial { background: var(--star); }
.hw-num.hw-bad { background: var(--bad); }
.hw-num.hw-pending { background: var(--blue); }
.task-card { scroll-margin-top: 96px; }
@media (max-width: 640px) {
    .hw-nav { gap: 6px; padding: 10px; }
    .hw-nav .mock-num { width: 40px; height: 40px; font-size: 16px; }
}

/* ===== Кабинет родителя ===== */
.child-card { display: flex; flex-direction: column; gap: 4px; }
.child-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.child-card .child-stats { margin: 12px 0; }
.child-stats .label { font-size: 13px; margin-bottom: 4px; }
.child-teachers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 14px; border-top: 2px solid var(--light); }
.child-teachers .label { font-size: 13px; }

/* Имя в боковой панели не обрезаем раньше времени. */
.side-user { gap: 6px; }
.side-user .user-badge { gap: 8px; }
.side-user .user-badge-name { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balance-card > .btn { align-self: flex-start; }
.balance-card .card-head { margin-bottom: 0; }
a.pick-row, a.pick-row:hover { color: var(--ink); }
.card > h2.h3 + .field-label, .card > h2.h3 + .field { margin-top: 12px; }
.pick-row { flex-wrap: wrap; }
.pick-row > .pick-text { flex: 1 1 220px; }
/* Неактивная кнопка «Войти на занятие» (откроется за час до начала). */
.btn-disabled { background: var(--light); color: var(--muted); border-color: transparent; cursor: not-allowed; flex-direction: column; gap: 0; line-height: 1.1; }
.page-hero .btn-disabled { background: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.85); }
.join-hint { font-size: 13px; font-weight: 800; opacity: 0.85; }

/* Декоративный круг в синей шапке страницы не обрезаем по границе с верхней полосой:
   шапка страницы «дорисовывает» его поверх полосы с логотипом (по бокам и снизу по-прежнему обрезаем). */
.page-hero { overflow-x: clip; overflow-y: visible; clip-path: inset(-160px 0 0 0); }
.cabinet-bar { position: relative; z-index: 2; }


/* ===== Тёмная тема ===== */
/* Включается классом theme-dark на <html> (переключатель в левом верхнем углу, выбор запоминается). */
html { color-scheme: light; }
html.theme-dark {
    color-scheme: dark;
    --blue: #3B82F6;
    --blue-dark: #60A5FA;
    --ink: #E5EAF3;
    --muted: #94A3B8;
    --light: #0B1220;
    --surface: #141D2F;
    --ring: #2F4A7A;
    --ok: #4ADE80;
    --bad: #F87171;
    --hero: #1A2F6B;
    --tint-blue: #1C2B4D;
    --tint-soft: #111A2B;
    --tint-ok: #12301F;
    --tint-warn: #3A2E10;
    --tint-bad: #3B1717;
    --tint-violet: #2A2150;
    --line: #263248;
    --warn-text: #FCD34D;
    --violet-text: #C4B5FD;
}
html.theme-dark .circle { background: rgba(255, 255, 255, 0.04); }
html.theme-dark .card, html.theme-dark .cabinet-side { box-shadow: 0 0 0 1px #1E293B; }
html.theme-dark .cabinet-side { border-left-color: #1E293B; }
html.theme-dark .btn-light { background: var(--white); color: #1E3A8A; }
html.theme-dark .pill.active { background: var(--white); color: #1E3A8A; }
html.theme-dark .avatar-on-blue { background: var(--surface); }
html.theme-dark .bell-count { box-shadow: 0 0 0 2px var(--surface); }
html.theme-dark .alert { color: #FCA5A5; }
html.theme-dark .content-img, html.theme-dark .html-content img { background: #FFFFFF; } /* картинки к заданиям обычно на белом */
html.theme-dark .heat-cell:not(.heat-none):not(.heat-empty) { color: #0F172A; }
html.theme-dark .heat-cell:not(.heat-none):not(.heat-empty) .heat-num { color: #334155; }
html.theme-dark .heat-none, html.theme-dark .heat-empty { background: transparent; }
html.theme-dark .level-track { fill: var(--surface); stroke: var(--line); }
html.theme-dark .chart-bar { fill: #3B5B9A; }
html.theme-dark .rarity-legendary { background: #2A230E; }
/* Визуальный редактор заданий оставляем светлым — так условие выглядит, как его увидит ученик в светлой теме. */
html.theme-dark .html-editor .jodit-container, html.theme-dark .html-editor .jodit-workplace { background: #FFFFFF; color: #0F172A; }

/* Переключатель темы */
.theme-toggle {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border: 0; border-radius: 12px; background: rgba(255, 255, 255, 0.14); color: var(--white); cursor: pointer;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.24); }
.theme-toggle .icon-sun { display: none; }
html.theme-dark .theme-toggle .icon-sun { display: block; }
html.theme-dark .theme-toggle .icon-moon { display: none; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.auth-theme { position: absolute; top: 16px; left: 16px; z-index: 2; }
@media (max-width: 640px) {
    .brand { gap: 8px; }
    .cabinet-bar .logo-img { height: 30px !important; }
    .cabinet-top .theme-toggle, .cabinet-top .menu-button, .cabinet-top .bell { width: 40px; height: 40px; }
    .cabinet-top .cabinet-user { gap: 6px; }
}
html.theme-dark .heat-none, html.theme-dark .heat-empty { border-color: #34435E; }
html.theme-dark .heat-legend .heat-none { border-color: #5B6B88; }

/* ===== Витрина преподавателя ===== */
.headline { font-size: 19px; color: var(--muted); max-width: 640px; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.social {
    display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 999px;
    color: var(--white); font-weight: 900; font-size: 16px; background: var(--blue);
}
.social:hover { color: var(--white); filter: brightness(1.08); }
.social-telegram { background: #229ED9; }
.social-vk { background: #0077FF; }
.social-tiktok { background: #111827; box-shadow: inset 0 0 0 2px #25F4EE; }
.social-youtube { background: #E62117; }
.social-rutube { background: #100943; box-shadow: inset 0 0 0 2px #ED143B; }
.social-website { background: var(--blue); }

.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.result-tile { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--radius-md); background: var(--light); }
.result-tile .label { font-size: 13px; }
.result-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.result-main .stat-lg { margin: 0; }
.result-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 16px; }
.own-results { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.own-result { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: var(--radius-md); background: var(--light); }
.own-score {
    display: inline-flex; align-items: center; justify-content: center; min-width: 58px; height: 58px; padding: 0 8px; border-radius: 16px;
    background: var(--blue); color: var(--white); font-size: 26px; font-weight: 900;
}
.platform-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 12px; }
.platform-stats > div { padding: 14px 16px; border-radius: var(--radius-md); background: var(--light); }

/* Редактор витрины */
.align-self-start { align-self: flex-start; }
.social-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.sc-rows { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.sc-row { display: grid; gap: 8px; align-items: end; padding: 10px; border-radius: 14px; background: var(--light); }
.sc-own { grid-template-columns: 110px minmax(0, 1fr) 100px auto; align-items: center; }
.sc-students { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.sc-students .field { gap: 4px; min-width: 0; }
.sc-students .field-label { font-size: 12px; }
.sc-students .sc-note { grid-column: span 2; }
.sc-row .input-compact { width: 100%; min-width: 0; }
.sc-remove { justify-self: end; }
@media (max-width: 640px) {
    .sc-own { grid-template-columns: 90px minmax(0, 1fr) 70px auto; }
    .sc-students .sc-note { grid-column: 1 / -1; }
}

/* ===== Страница занятия: запись, материалы, ДЗ ===== */
.lesson-block { display: flex; flex-direction: column; gap: 12px; }
.lesson-block .card-head { margin-bottom: 0; }
.recording { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lesson-edit { padding-top: 12px; border-top: 2px solid var(--light); }
.lesson-edit .input { flex: 1 1 260px; min-height: 46px; font-size: 17px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.material-chip { display: inline-flex; align-items: center; gap: 4px; }
.lesson-extras { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.extra { padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 800; }
.extra-rec { color: var(--bad); }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.recording-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.recording-fields .input { min-height: 46px; font-size: 16px; }

/* ===================== Главная страница (лендинг) ===================== */
.lp-hero { padding-bottom: 0; }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: end; margin-top: clamp(24px, 4vw, 48px); }
.lp-hero-text { padding-bottom: clamp(48px, 7vw, 96px); }
.lp-hero-text .display { font-size: clamp(38px, 4.6vw, 66px); }
.lp-chip-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lp-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 18px; border-radius: 999px; background: var(--white); color: var(--blue); font-weight: 900; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; }
html.theme-dark .lp-chip { color: #1E3A8A; }
.lp-chip-blue { background: var(--blue); color: var(--white); }
html.theme-dark .lp-chip-blue { color: var(--white); }
.lp-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 28px; font-size: 17px; opacity: 0.95; }
.lp-trust strong { font-size: 22px; font-weight: 900; margin-right: 4px; }
.lp-hero-photo { position: relative; align-self: end; justify-self: center; width: min(100%, 600px); }
.lp-hero-photo img { display: block; width: 100%; height: auto; }
.lp-float {
    position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 18px;
    background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 800; line-height: 1.2;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22); animation: lp-bob 5s ease-in-out infinite;
}
.lp-float-num { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; height: 52px; border-radius: 14px; background: var(--blue); color: var(--white); font-size: 24px; font-weight: 900; }
.lp-float-0 { left: -36px; bottom: 16%; }
.lp-float-1 { right: -12px; top: 14%; animation-delay: -2.5s; }
@keyframes lp-bob { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .lp-float { animation: none; } }

.lp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.lp-head + * { margin-top: 32px; }
.lp-pill-note { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 18px; border-radius: 999px; border: 2px solid var(--ring); color: var(--blue); font-weight: 800; }
.lp-pill-note-light { border-color: rgba(255, 255, 255, 0.5); color: var(--white); }
.lp-center-head { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; }
.lp-center-lead { margin-left: auto; margin-right: auto; text-align: center; }

/* Результаты */
.lp-results-section { padding: clamp(48px, 6vw, 80px) 0; }
.lp-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.lp-result { display: flex; flex-direction: column; gap: 2px; }
.lp-result-num { font-size: clamp(48px, 5vw, 68px); font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: var(--blue); }
.lp-result-unit { font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; color: var(--ink); margin-top: 6px; }
.lp-result p { margin-top: 10px; }

/* Обо мне */
.lp-about { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px; color: var(--ink); }
.lp-about .card h3 { font-size: 24px; }
.lp-own { display: flex; flex-direction: column; gap: 6px; }
.lp-own p { font-size: 19px; }
.lp-tags { display: flex; gap: 8px; margin: 12px 0 10px; }
.lp-tags span { padding: 6px 14px; border-radius: 12px; background: var(--light); color: var(--blue); font-weight: 900; }
.lp-note { margin-top: 24px; font-size: 20px; font-weight: 800; opacity: 0.95; }

/* Этапы */
.lp-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-stage {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 300px; padding: 24px;
    border-radius: var(--radius-lg); background: var(--hero); color: var(--white);
}
.lp-stage-num { position: absolute; right: -6px; top: -24px; font-size: 130px; font-weight: 900; line-height: 1; color: rgba(255, 255, 255, 0.1); }
.lp-stage-tag { align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: var(--white); color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
html.theme-dark .lp-stage-tag { color: #1E3A8A; }
.lp-stage-tag span { opacity: 0.6; }
.lp-stage h3 { font-size: 28px; line-height: 1.1; margin-top: 18px; padding-bottom: 12px; border-bottom: 3px solid rgba(255, 255, 255, 0.3); }
.lp-stage p { font-size: 17px; opacity: 0.95; }

/* Родителям / формат */
.lp-cards5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.lp-cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 32px; color: var(--ink); }
.lp-cards5 .card, .lp-cards4 .card { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.lp-cards5 p, .lp-cards4 p { font-size: 17px; }
.lp-dots-line { margin-top: 22px; font-weight: 800; color: var(--muted); }
.lp-dots-line i { font-style: normal; margin: 0 8px; color: var(--ring); }
.lp-support { margin-top: 56px; }
.lp-support-title { font-size: clamp(30px, 3.4vw, 44px); margin-top: 12px; }
.lp-support-title span { font-size: 15px; font-weight: 800; opacity: 0.7; margin-left: 8px; }
.lp-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; color: var(--ink); }
.lp-quotes .card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; }
.lp-quotes strong { font-size: 19px; }

/* Отзывы */
.lp-carousel-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lp-rating { margin-right: 6px; color: var(--muted); font-weight: 800; }
.lp-rating strong { color: var(--star); }
.lp-arrow {
    width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--blue); color: var(--white);
    font-size: 20px; font-weight: 900; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.lp-arrow:hover { background: var(--blue-dark); }
.lp-carousel {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, calc((100% - 32px) / 3)); gap: 16px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0; padding: 6px 2px 18px;
    scrollbar-width: thin; scrollbar-color: var(--ring) transparent; outline: none;
}
.lp-carousel:focus-visible { box-shadow: 0 0 0 3px var(--ring); border-radius: 12px; }
.lp-review { scroll-snap-align: start; display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.lp-review-head { display: flex; align-items: center; gap: 12px; }
.lp-review-ava { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--tint-blue); color: var(--blue); font-weight: 900; font-size: 20px; }
.lp-stars { margin-left: auto; color: var(--star); letter-spacing: 1px; white-space: nowrap; }
.lp-review-text {
    font-size: 17px; line-height: 1.5; white-space: pre-line; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;
}
.lp-review.open .lp-review-text { -webkit-line-clamp: unset; display: block; }
.lp-review-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.lp-more { padding: 0; min-height: 36px; font-size: 16px; }
.lp-shot { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 4px 10px 4px 4px; border: 2px solid var(--ring); border-radius: 12px; background: var(--surface); color: var(--blue); font-family: inherit; font-weight: 900; font-size: 14px; cursor: zoom-in; }
.lp-shot img { width: 44px; height: 44px; object-fit: cover; object-position: top left; border-radius: 8px; background: #fff; }
.lp-lightbox { border: 0; padding: 0; border-radius: 18px; max-width: min(92vw, 900px); background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); }
.lp-lightbox::backdrop { background: rgba(15, 23, 42, 0.7); }
.lp-lightbox img { display: block; max-width: 100%; max-height: 86vh; }
.lp-lightbox form { position: absolute; top: 8px; right: 8px; margin: 0; }
.lp-lightbox-close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(15, 23, 42, 0.7); color: #fff; font-size: 18px; cursor: pointer; }

/* Начнём бесплатно */
.lp-start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; color: var(--ink); }
.lp-start .card { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.lp-start h3 { font-size: 28px; }
.lp-free { background: var(--blue); color: var(--white); text-transform: none; letter-spacing: 0; font-size: 16px; padding: 8px 16px; border-radius: 12px; }
.lp-contact { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 16px; padding: 24px 28px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.12); }
.lp-contact-title { display: block; font-size: 24px; }
.lp-contact-sub { opacity: 0.9; }
.lp-contact-actions { margin-top: 0; }
.lp-footer-link { color: var(--white); text-decoration: underline; }
.lp-footer-link:hover { color: var(--white); }

@media (max-width: 1100px) {
    .lp-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-cards5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lp-cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-about { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-carousel { grid-auto-columns: minmax(280px, calc((100% - 16px) / 2)); }
}
@media (max-width: 760px) {
    .lp-hero-grid { grid-template-columns: 1fr; gap: 0; }
    .lp-hero-text { padding-bottom: 24px; }
    .lp-hero-photo { width: min(92%, 440px); }
    .lp-float { font-size: 12px; padding: 6px 10px 6px 6px; }
    .lp-float-num { min-width: 42px; height: 42px; font-size: 19px; }
    .lp-float-0 { left: -8px; }
    .lp-float-1 { right: -8px; }
    .lp-stages, .lp-cards5, .lp-cards4, .lp-about, .lp-quotes, .lp-start { grid-template-columns: 1fr; }
    .lp-stage { min-height: 0; }
    .lp-carousel { grid-auto-columns: 86%; }
    .lp-head .lp-carousel-nav { width: 100%; }
    .lp-rating { flex: 1; }
}

/* Заявка на пробное занятие */
.lp-start { grid-template-columns: 1fr; }
.lp-trial { flex-direction: row !important; justify-content: space-between; align-items: center !important; gap: 20px; flex-wrap: wrap; }
.lp-trial > div { flex: 1 1 420px; display: flex; flex-direction: column; gap: 8px; }
.lp-lead { gap: 8px; }
.lp-lead-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 12px 14px; align-items: end; width: 100%; margin-top: 8px; }
.lp-lead-form .field { gap: 6px; }
.lp-lead-form .btn { min-height: 56px; }
.lp-lead-form .field-error { position: absolute; }
.lp-lead-form .field { position: relative; padding-bottom: 0; }
.lp-lead-error, .lp-consent { grid-column: 1 / -1; }
.lp-consent { margin-top: 4px; }
@media (max-width: 760px) {
    .lp-lead-form { grid-template-columns: 1fr; }
    .lp-lead-form .field-error { position: static; }
}
.lead-row { flex-wrap: wrap; align-items: flex-start; }
.lead-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 260px; }
.lead-contact { align-self: flex-start; }
.lead-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 1 1 380px; justify-content: flex-end; }
.lead-edit .input { width: auto; min-height: 44px; }
.lead-edit input.input { flex: 1 1 200px; }

/* ===== Полировка 2: защита от вылезаний за край ===== */
/* Карточки в сетках не растягивают колонку по длинному содержимому — на телефоне это давало сдвиг вбок. */
.grid-2 > *, .grid-3 > *, .stat-grid > *, .form-grid > *, .lp-results > *, .results-grid > * { min-width: 0; }
.grid-2, .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid-wide { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
/* Шторка меню (закрытая) стоит за правым краем — не даём ей создавать прокрутку вбок. */
.list-row > span:first-child, .list-row > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.list-row.check { justify-content: flex-start; cursor: pointer; }
.check + .panel-label, .list + .panel-label { margin-top: 14px; }
/* Редактор витрины: строки результатов учеников — ровная таблица, комментарий отдельной строкой. */
.sc-students { grid-template-columns: 90px 96px minmax(120px, 1fr) 90px 110px 100px 100px 40px; align-items: end; }
.sc-students .sc-note { grid-column: 1 / -2; grid-row: 2; }
.sc-students .sc-remove { grid-column: -2; grid-row: 1; align-self: end; margin-bottom: 4px; }
@media (max-width: 1100px) {
    .sc-students { grid-template-columns: repeat(3, minmax(0, 1fr)) 40px; }
    .sc-students .sc-note { grid-column: 1 / -1; grid-row: auto; }
    .sc-students .sc-remove { grid-column: -2; grid-row: 1; }
    .sc-students .sc-empty { display: none; }
}
/* Лендинг на телефоне: цифры и короткие карточки — по две в ряд, чтобы страница не была бесконечной. */
@media (max-width: 760px) {
    .lp-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .lp-results .lp-result { padding: 16px; }
    .lp-result-num { font-size: 40px; }
    .lp-result-unit { font-size: 12px; }
    .lp-result p { font-size: 14px; margin-top: 6px; }
    .lp-cards5, .lp-cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .lp-cards5 .card, .lp-cards4 .card { padding: 16px; }
    .lp-cards5 p, .lp-cards4 p { font-size: 15px; }
    .lp-cards5 .label, .lp-cards4 .label { font-size: 12px; }
}
@media (max-width: 340px) {
    .lp-cards5, .lp-cards4 { grid-template-columns: 1fr; }
}
/* Сводки цифр: правило выше для .grid-3 не должно перебивать раскладку «первая крупно, две рядом». */
@media (min-width: 760px) { .grid-3.stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-3.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lead-edit select.input { flex: 1 1 140px; }

/* ===== Телефон: «причёсанная» мобильная версия ===== */
.tabbar { display: none; }
@media (max-width: 760px) {
    /* Нижняя панель разделов, как в приложениях. Полное меню — по кнопке «Ещё». */
    .tabbar {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 2px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        background: var(--surface); border-top: 2px solid var(--tint-blue);
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
    }
    .tab {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        min-width: 0; min-height: 54px; padding: 4px 2px; border: 0; border-radius: 14px;
        background: none; color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 800;
        line-height: 1.1; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .tab:hover { color: var(--blue); }
    .tab.active { color: var(--blue); background: var(--light); }
    .cabinet-main { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
    .cabinet-top .menu-button { display: none; } /* меню теперь в нижней панели */
    #blazor-error-ui { bottom: calc(68px + env(safe-area-inset-bottom)); }
}

@media (max-width: 640px) {
    /* Шапка страницы компактнее — до контента меньше листать. */
    .page-hero { padding: 18px 0 84px; }
    .page-hero-inner { gap: 16px; }
    .hero-title { font-size: 34px; margin-top: 6px; }
    .hero-text { font-size: 17px; margin-top: 8px; }
    .page-body { margin-top: -64px; padding-bottom: 32px; gap: 16px; }
    .btn-lg { min-height: 52px; padding: 10px 22px; font-size: 18px; border-radius: 16px; }
    .page-hero .btn-lg { width: 100%; }

    /* Карточки и поля: меньше воздуха по краям, шрифт полей не меньше 16px (iOS не зумит). */
    .card { padding: 18px 16px; border-radius: 20px; }
    .card h3, .h3 { font-size: 22px; }
    .card-head { margin-bottom: 10px; }
    .input { min-height: 50px; padding: 10px 14px; font-size: 17px; border-radius: 14px; }
    .statement { font-size: 19px; }
    .row-actions { gap: 10px; margin-top: 18px; }
    .answer-form .row-actions > .btn { flex: 1 1 auto; }

    /* Кнопки недели в расписании: три в ряд, «Новое занятие» — на всю ширину. */
    .hero-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
    .hero-actions .btn { min-height: 46px; padding: 8px 10px; font-size: 16px; }
    .hero-actions .btn:last-child { grid-column: 1 / -1; }

    /* Переключатели-«таблетки»: одной строкой с прокруткой вбок, а не в два этажа. */
    .role-filter {
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin: 0 -14px; padding: 4px 14px; scroll-padding: 0 14px;
    }
    .role-filter::-webkit-scrollbar { display: none; }
    .role-filter > * { flex: 0 0 auto; }

    /* Номера заданий в пробнике и домашке: липкая полоса сверху в одну строку. */
    .mock-nav {
        top: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin: 0 -14px; padding: 10px 14px; border-radius: 0 0 18px 18px;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
    }
    .mock-nav::-webkit-scrollbar { display: none; }
    .mock-nav .mock-num { flex: 0 0 auto; width: 42px; height: 42px; font-size: 16px; }
    .task-card { scroll-margin-top: 80px; }

    /* Тренировка: номера КИМ в две колонки. */
    .kim-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .kim-tile { min-height: 116px; padding: 12px; border-radius: 16px; gap: 4px; }
    .kim-num { font-size: 20px; }
    .kim-name { font-size: 14px; }
    .kim-tile .small { font-size: 13px; }

    /* Таблицы → карточки: каждая строка — плашка, подписи берутся из заголовков колонок. */
    .table-wrap:has(.table-stack) { overflow: visible; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
    .table-stack thead { display: none; }
    .table-stack tr { padding: 10px 14px; margin-bottom: 10px; border-radius: 16px; background: var(--light); }
    .table-stack tr:last-child { margin-bottom: 0; }
    .table-stack td {
        min-height: 34px; padding: 6px 0; border: 0; text-align: right; overflow-wrap: anywhere;
    }
    .table-stack td::after { content: ""; display: table; clear: both; }
    .table-stack td::before {
        content: attr(data-label); float: left; max-width: 45%; margin: 3px 12px 0 0;
        font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: left;
    }
    .table-stack td:not([data-label])::before { content: none; }
    /* Первая колонка (обычно имя) — заголовок карточки. */
    .table-stack td:first-child { text-align: left; font-size: 18px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 2px solid var(--surface); }
    .table-stack td:first-child::before { content: none; }
    .table-stack td.center { text-align: right; }
    .table-wrap .table-stack td { white-space: normal; padding: 6px 0; }

    /* Строки списков: если справа длинный результат — он уходит под имя, а не ломается в столбик. */
    .list-row { flex-wrap: wrap; }
    .list-row > .leader { flex: 1 1 190px; min-width: 0; }
    .list-row > .result-badge { margin-left: auto; text-align: right; }
}

/* Смена пароля */
.password-card { max-width: 560px; }