@import url("./ui-tokens.css");

/* Temporary aliases remain only for isolated game surfaces. */
:root {
    --primary: var(--ui-accent);
    --success: var(--ui-success-text);
    --warning: var(--ui-warning-text);
    --danger: var(--ui-danger-text);
    --muted: var(--ui-text-muted);
    --bg: var(--ui-bg);
    --card-bg: var(--ui-surface);
    --border: var(--ui-border);
    --text: var(--ui-text);
    --text-bright: var(--ui-text);
    --text-muted: var(--ui-text-muted);
    --input-bg: var(--ui-input-bg);
}

/* Общие состояния управления. Не зависят от конкретного раздела кабинета. */
:where(button, input, textarea, select, summary, a):focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}

button:disabled,
button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: .52;
    transform: none !important;
    box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}

.file-manager-empty { display:grid; justify-items:center; gap:8px; min-height:220px; padding:28px 20px; text-align:center; color:var(--ui-text-muted); }
.file-manager-empty > i { color:var(--ui-accent); font-size:38px; }
.file-manager-empty > b { color:var(--ui-text); }
.file-manager-empty > p { max-width:470px; margin:0; font-size:13px; line-height:1.5; }
.file-manager-empty > button { min-height:44px; margin-top:5px; padding:8px 12px; border-color:var(--ui-accent); color:var(--ui-accent); background:transparent; box-shadow:none; }
.learning-error { margin: 0; color: var(--ui-danger-text); }

/* Reusable page pieces. The information comes first, while the same rhythm and
   hierarchy is retained as sections are gradually moved off inline markup. */
.ui-page-heading {
    margin: 0 0 var(--space-5);
}
.ui-page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ui-accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.ui-page-eyebrow i { font-size: 17px; }
.ui-page-heading h2 {
    margin: 6px 0 8px;
    color: var(--ui-text);
    font-size: var(--type-page-size);
    font-weight: 600;
    line-height: var(--type-page-line);
}
.ui-page-heading p {
    max-width: 820px;
    margin: 0;
    color: var(--ui-text-muted);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
}
.ui-empty-state {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    min-height: 210px;
    padding: 28px 20px;
    border: 1px dashed var(--ui-control-border);
    border-radius: var(--radius-surface);
    background: var(--ui-surface-alt);
    color: var(--ui-text);
    text-align: center;
}
.ui-empty-state > i {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid var(--ui-control-border);
    border-radius: 50%;
    color: var(--ui-accent);
    background: var(--ui-accent-soft);
    font-size: 24px;
}
.ui-empty-state b { color: var(--ui-text); font-size: 16px; }
.ui-empty-state p { max-width: 470px; margin: 5px 0 0; color: var(--ui-text-muted); font-size: 13px; line-height: 1.5; }
.ui-empty-state > button { margin-top: var(--space-2); }
.teacher-courses-empty { grid-column: 1 / -1; }
.teacher-courses-empty .ui-empty-state { min-height: 185px; }

/* Status is always communicated by a short label as well as colour. */
.ui-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.ui-status--success { color: var(--ui-success-text); border-color:var(--ui-success-border); background: var(--ui-success-bg); }
.ui-status--warning { color: var(--ui-warning-text); border-color:var(--ui-warning-border); background: var(--ui-warning-bg); }
.ui-status--danger { color: var(--ui-danger-text); border-color:var(--ui-danger-border); background: var(--ui-danger-bg); }
.ui-status--info { color: var(--ui-info-text); border-color:var(--ui-info-border); background: var(--ui-info-bg); }

/* Reusable form field: label, control and hint stay visually consistent. */
.ui-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    color: var(--ui-text);
    font-size: 14px;
    font-weight: 500;
}
.ui-form-field input,
.ui-form-field select,
.ui-form-field textarea { margin-bottom: 0; }
.ui-form-field small {
    color: var(--ui-text-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}
.ui-form-field:focus-within > :is(input, select, textarea) {
    border-color: var(--ui-accent);
    box-shadow: var(--ui-focus-ring);
}

.classroom-quiz-stage.quiz-theme-light { --quiz-accent:#1686d9; --quiz-accent-soft:rgba(22,134,217,.12); --quiz-panel:#ffffff; background:#eaf6ff radial-gradient(circle at 15% 15%,rgba(255,255,255,.98),transparent 28%),linear-gradient(135deg,rgba(31,150,224,.1),rgba(255,255,255,.85)); }
.classroom-quiz-stage.quiz-theme-light::before { opacity:1; background-image:linear-gradient(rgba(22,134,217,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(22,134,217,.08) 1px,transparent 1px); }
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-lobby-card,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-roster-card,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-question-card,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-results-card,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-student-lobby,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-student-question { border-color:rgba(22,134,217,.46); background:rgba(255,255,255,.94); box-shadow:0 18px 48px rgba(32,88,126,.18); }
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-lobby-card h3,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-question-card h3,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-student-lobby h3,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-student-question h3,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-section-title span,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-team-card > div,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-score-row b { color:#15283a; }
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-lobby-card p,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-section-title small,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-metrics span { color:#52687b; }
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-metrics div,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-team-card,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-player-list > div,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-host-options > div,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-score-row { background:#f6fbff; border-color:#d8e7f2; }

body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-lobby-card,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-roster-card,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-question-card,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-results-card,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-student-lobby,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-student-question { color:#f8fbff; }
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-lobby-card h3,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-question-card h3,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-student-lobby h3,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-student-question h3,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-section-title span,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-team-card > div,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-score-row b { color:#fff; }
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-lobby-card p,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-section-title small,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-metrics span { color:#d4dbe5; }

/* First visit setup: a short, optional route to a usable cabinet. */
.first-setup-backdrop { position:fixed; inset:0; z-index:100050; display:flex; align-items:center; justify-content:center; padding:22px; overflow:auto; background:var(--ui-modal-backdrop); backdrop-filter:blur(8px); }
.first-setup-card { position:relative; width:min(980px,100%); padding:32px; border:1px solid var(--ui-border); border-radius:var(--radius-surface); background:var(--ui-surface); box-shadow:var(--ui-shadow-float); }
.first-setup-heading { max-width:650px; }
.first-setup-heading > span,.first-setup-kicker { display:block; color:var(--ui-accent); font-size:12px; font-weight:600; letter-spacing:.04em; }
.first-setup-heading h2 { margin:8px 0; color:var(--ui-text); font-size:32px; line-height:40px; font-weight:600; }
.first-setup-heading p,.first-setup-telegram-card p { margin:0; color:var(--ui-text-muted); line-height:1.55; }
.first-setup-skip { position:absolute; top:16px; right:16px; min-height:44px; padding:8px 10px; color:var(--ui-text-muted); background:transparent; border:0; }
.first-setup-skip:hover { color:var(--ui-accent); background:var(--ui-accent-soft); }
.first-setup-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(250px,.8fr); gap:20px; margin-top:26px; }
.first-setup-form,.first-setup-telegram-card { padding:24px; border:1px solid var(--ui-border); border-radius:var(--radius-control); background:var(--ui-surface-alt); }
.first-setup-form { display:grid; gap:16px; }
.first-setup-field { display:grid; gap:8px; color:var(--ui-text); font-weight:500; font-size:14px; }
.first-setup-field input,.first-setup-field select { width:100%; box-sizing:border-box; min-height:44px; }
.first-setup-field small,.first-setup-toggle small { color:var(--ui-text-muted); font-weight:400; line-height:1.4; }
.first-setup-notices { display:grid; gap:10px; padding-top:5px; }
.first-setup-notices h3,.first-setup-telegram-card h3 { margin:0; color:var(--ui-text); font-size:17px; }
.first-setup-toggle { display:flex; gap:11px; align-items:flex-start; cursor:pointer; padding:10px; border:1px solid transparent; border-radius:var(--radius-control); }
.first-setup-toggle:hover { border-color:var(--ui-control-border); background:var(--ui-accent-soft); }
.first-setup-toggle input { width:17px; height:17px; accent-color:var(--ui-accent); margin-top:2px; }
.first-setup-toggle span { display:grid; gap:3px; }
.first-setup-reminder { max-width:240px; margin-top:2px; }
.first-setup-telegram-card { display:flex; flex-direction:column; align-items:flex-start; gap:14px; background:var(--ui-surface-alt); }
.first-setup-telegram-card h3 i { color:var(--ui-accent); }
.first-setup-linked { color:var(--ui-success-text); font-weight:600; }
.first-setup-trial { padding:12px; border-radius:var(--radius-control); color:var(--ui-warning-text) !important; background:var(--ui-warning-bg); font-size:13px; line-height:20px; }
.first-setup-note { margin-top:auto !important; font-size:12px; }
.first-setup-actions { display:flex; justify-content:flex-end; margin-top:22px; }
.first-setup-actions .btn-success { min-width:250px; padding:13px 18px; }
body.light-mode .first-setup-card { background:var(--ui-surface); box-shadow:var(--ui-shadow-float); }
body.light-mode .first-setup-form,body.light-mode .first-setup-telegram-card { background:var(--ui-surface-alt); }
@media (max-width:760px) { .first-setup-backdrop { align-items:flex-start; padding:12px; } .first-setup-card { padding:var(--space-4); margin:auto 0; } .first-setup-heading { padding-right:88px; } .first-setup-heading h2 { font-size:var(--type-section-size); line-height:var(--type-section-line); } .first-setup-grid { grid-template-columns:1fr; gap:var(--space-3); margin-top:18px; } .first-setup-form,.first-setup-telegram-card { padding:var(--space-4); } .first-setup-actions .btn-success { width:100%; } }

/* Teacher game library */
.games-library-intro { margin-bottom:18px; padding:24px 26px; border:1px solid rgba(230,185,83,.28); border-radius:12px; background:linear-gradient(135deg,rgba(34,54,48,.94),rgba(16,23,29,.96)); box-shadow:inset 0 1px rgba(255,255,255,.06); }
.games-library-intro > span,.game-library-kicker { color:#e4ba64; font-size:11px; font-weight:800; letter-spacing:.12em; }
.games-library-intro h3 { margin:7px 0; font-size:27px; }
.games-library-intro p { max-width:720px; margin:0; color:var(--text-muted); line-height:1.55; }
.games-library-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; }
.game-library-card { display:flex; min-height:290px; flex-direction:column; padding:24px; border:1px solid var(--border); border-radius:12px; background:linear-gradient(145deg,var(--card-bg),rgba(17,25,31,.96)); box-shadow:0 14px 30px rgba(0,0,0,.16); }
.game-library-card.quest-card { border-color:rgba(67,191,201,.38); }
.game-library-card.board-card { border-color:rgba(219,174,77,.34); }
.game-library-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.game-library-card h3 { margin:6px 0 0; font-size:25px; }
.game-library-card h3 i { color:#e2b95f; }
.game-library-card p { margin:22px 0; color:var(--text-muted); line-height:1.55; }
.game-library-badge { flex:0 0 auto; padding:6px 9px; border:1px solid rgba(225,185,98,.34); border-radius:999px; color:#e8c678; font-size:11px; font-weight:700; background:rgba(225,185,98,.08); }
.game-library-action { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:auto; border:1px solid #e5bc68; border-radius:8px; padding:12px 14px; color:#14100a !important; text-decoration:none !important; font-weight:800; background:linear-gradient(135deg,#f2d486,#bd8737); box-shadow:inset 0 1px rgba(255,255,255,.62),0 8px 16px rgba(0,0,0,.25); transition:transform .2s ease,filter .2s ease; }
.game-library-action:hover { transform:translateY(-2px); filter:brightness(1.06); }
.game-library-action .bx-right-arrow-alt { font-size:18px; }
.game-library-sets { display:grid; gap:7px; margin-top:16px; }
.game-library-set { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:9px 10px; border:1px solid rgba(255,255,255,.08); border-radius:7px; font-size:13px; background:rgba(255,255,255,.025); }
.game-library-set span,.game-library-set small { color:var(--text-muted); font-size:11px; }
.game-library-set.built-in { border-color:rgba(225,185,98,.27); background:rgba(225,185,98,.07); }
.game-library-set.built-in span { grid-column:1/-1; color:#e5bf70; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.game-library-sets-title { margin-top:4px; color:var(--text-muted); font-size:12px; }
.game-library-empty { padding:10px 2px 0; color:var(--text-muted); font-size:12px; line-height:1.45; }
@media (max-width:560px) { .games-library-intro,.game-library-card { padding:19px; } .games-library-grid { grid-template-columns:1fr; } .game-library-card { min-height:0; } }

/* Online classroom quiz */
.classroom-quiz-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-input-bg);
    color: var(--ui-text);
    text-align: left;
    box-shadow: none;
}

.classroom-quiz-option:hover:not(:disabled),
.classroom-quiz-option.selected {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
}

.classroom-quiz-option:disabled {
    cursor: default;
    opacity: 0.82;
}

.classroom-quiz-option b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
}

.classroom-quiz-leaderboard {
    display: grid;
    gap: 7px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--ui-warning-border);
    border-radius: 8px;
    background: var(--ui-warning-bg);
}

.classroom-quiz-leaderboard > b { color: var(--ui-warning-text); }

.classroom-quiz-leaderboard > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 8px;
    align-items: baseline;
    font-size: 13px;
}

.classroom-quiz-leaderboard strong { color: var(--ui-text); }
.classroom-quiz-leaderboard small { grid-column: 1 / -1; color: var(--ui-text-muted); }
.classroom-answer-section.quiz-correct { border-color: var(--ui-success-border); }
.classroom-answer-section.quiz-wrong { border-color: var(--ui-danger-border); }

/* Interactive classroom quiz */
.classroom-quiz-create { border-color: var(--ui-warning-border); }
.classroom-setup-block { margin-top:12px;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-input-bg);overflow:hidden; }
.classroom-setup-block summary { display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;min-height:44px;padding:14px;cursor:pointer;list-style:none;color:var(--ui-text);font-weight:600; }
.classroom-setup-block summary::-webkit-details-marker { display:none; }
.classroom-setup-block summary > span { display:inline-flex;align-items:center;gap:8px; }
.classroom-setup-block summary > span i { color:var(--ui-accent);font-size:19px; }
.classroom-setup-block summary > small { color:var(--ui-text-muted);font-size:12px;font-weight:500; }
.classroom-setup-block summary > i { color:var(--ui-accent);font-size:20px;transition:transform .18s ease; }
.classroom-setup-block[open] summary { border-bottom:1px solid var(--ui-border);background:var(--ui-accent-soft); }
.classroom-setup-block[open] summary > i { transform:rotate(180deg); }
.classroom-setup-block-body { padding:16px; }
.classroom-quiz-create-actions { display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px;margin-top:16px; }
.classroom-quiz-create-actions button { padding:14px; }
.classroom-template-library { display:grid;gap:22px; }
.classroom-template-library h4 { display:flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--ui-text);font-size:15px; }.classroom-template-library h4 i { color:var(--ui-accent);font-size:19px; }
.classroom-template-library + .classroom-setup-block { margin-top:18px; }
.classroom-quiz-hub { max-width:1240px; }
.classroom-quiz-hub-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin:4px 0 20px;padding:4px 2px; }
.classroom-quiz-hub-heading span { display:inline-flex;align-items:center;gap:7px;color:var(--ui-warning-text);font-size:var(--type-badge-size);font-weight:600;letter-spacing:.04em;text-transform:uppercase; }
.classroom-quiz-hub-heading h3 { margin:6px 0 7px;color:var(--ui-text);font-size:32px; }
.classroom-quiz-hub-heading p { max-width:650px;margin:0;color:var(--ui-text-muted);line-height:1.55; }
.classroom-quiz-hub-icon { flex:0 0 auto;display:grid;place-items:center;width:60px;height:60px;border:1px solid var(--ui-warning-border);border-radius:8px;background:var(--ui-warning-bg);color:var(--ui-warning-text);font-size:30px; }
.classroom-quiz-hub-grid { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:16px;align-items:start; }
.classroom-quiz-hub-grid > .card { margin:0;border-color:var(--ui-warning-border); }
.classroom-quiz-hub-grid h4 { display:flex;align-items:center;gap:8px;margin:0 0 16px;color:var(--ui-text);font-size:18px; }.classroom-quiz-hub-grid h4 i { color:var(--ui-warning-text);font-size:21px; }
.classroom-quiz-library > p { margin:-7px 0 16px;color:var(--ui-text-muted);font-size:13px;line-height:1.45; }
.classroom-quiz-template-list { display:grid;gap:12px;max-height:650px;overflow:auto;padding-right:3px; }
.classroom-template-kind { display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border:1px solid var(--ui-border);border-radius:999px;color:var(--ui-accent);font-size:var(--type-badge-size);font-weight:600; }.classroom-template-kind.quiz { color:var(--ui-warning-text);border-color:var(--ui-warning-border); }.classroom-template-kind.board { border-color:var(--ui-accent); }
.classroom-quiz-create-heading { display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:20px; }
.classroom-quiz-create-heading span { display:inline-flex;align-items:center;gap:7px;color:var(--ui-warning-text);font-size:var(--type-badge-size);font-weight:600;text-transform:uppercase;letter-spacing:.04em; }
.classroom-quiz-kicker { display:inline-flex;align-items:center;gap:7px;color:var(--quiz-accent,var(--ui-warning-text));font-size:var(--type-badge-size);font-weight:600;text-transform:uppercase;letter-spacing:.04em; }
.classroom-quiz-create-heading h3 { margin:5px 0 6px;font-size:23px; }
.classroom-quiz-create-heading p { margin:0;color:var(--ui-text-muted);max-width:620px;line-height:1.45; }
.classroom-quiz-create-icon { flex:0 0 auto;font-size:44px;color:var(--ui-warning-text);padding:11px;border:1px solid var(--ui-warning-border);border-radius:8px;background:var(--ui-warning-bg); }
.classroom-quiz-config-grid { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:14px;margin-top:14px; }
.classroom-quiz-config-field { padding:14px;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-input-bg); }
.classroom-quiz-config-field > label { display:block;margin-bottom:10px;color:var(--ui-text-muted);font-size:12px; }
.classroom-quiz-theme-choice,.classroom-quiz-mode-choice { display:flex;gap:7px;flex-wrap:wrap; }
.classroom-quiz-theme-choice button,.classroom-quiz-mode-choice button { display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:9px 11px;border:1px solid var(--ui-border);border-radius:7px;background:transparent;color:var(--ui-text-muted);box-shadow:none; }
.classroom-quiz-theme-choice button.active,.classroom-quiz-mode-choice button.active { border-color:var(--ui-accent);background:var(--ui-accent-soft);color:var(--ui-text); }
.classroom-quiz-team-count { margin-top:12px !important; }
.classroom-quiz-team-count[hidden] { display:none !important; }
.classroom-quiz-team-count select { margin:7px 0 0; }
.classroom-quiz-create-button { width:100%;margin-top:16px;padding:14px; }

.classroom-quiz-stage { --quiz-accent:#61e8f4;--quiz-accent-soft:rgba(97,232,244,.16);--quiz-panel:#121a25;position:absolute;inset:94px 0 0;z-index:3;overflow:auto;padding:32px;isolation:isolate;background:#091017;animation:quizStageEnter .42s ease both; }
.classroom-quiz-stage::before { content:"";position:absolute;inset:0;z-index:-1;opacity:.95;pointer-events:none;background-image:linear-gradient(rgba(97,232,244,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(97,232,244,.055) 1px,transparent 1px);background-size:38px 38px; }
.classroom-quiz-stage::after { content:"";position:absolute;inset:22px;border:1px solid rgba(97,232,244,.16);pointer-events:none;z-index:-1; }
.classroom-quiz-stage.quiz-theme-history { --quiz-accent:#e8b15f;--quiz-accent-soft:rgba(232,177,95,.16);--quiz-panel:#211a18;background:#171312 url('/assets/history-game/archive-night.png') center/cover; }
.classroom-quiz-stage.quiz-theme-history::before { background-image:linear-gradient(90deg,rgba(8,5,3,.9) 0%,rgba(9,6,4,.7) 54%,rgba(9,6,4,.28)),repeating-linear-gradient(0deg,rgba(232,177,95,.045) 0 1px,transparent 1px 8px);background-size:auto; }
.classroom-quiz-stage.quiz-theme-history::after { inset:auto 5% 7% auto;width:190px;height:210px;border:0;background:radial-gradient(ellipse at center,rgba(247,184,78,.28),rgba(246,170,53,.08) 36%,transparent 71%);filter:blur(1px);animation:quizHistoryLamp 4.8s infinite ease-in-out; }
.classroom-quiz-stage.quiz-theme-history .classroom-quiz-lobby-card,.classroom-quiz-stage.quiz-theme-history .classroom-quiz-roster-card,.classroom-quiz-stage.quiz-theme-history .classroom-quiz-question-card,.classroom-quiz-stage.quiz-theme-history .classroom-quiz-results-card,.classroom-quiz-stage.quiz-theme-history .classroom-quiz-student-lobby,.classroom-quiz-stage.quiz-theme-history .classroom-quiz-student-question { border-color:rgba(232,177,95,.7);background:rgba(27,18,13,.9);box-shadow:0 24px 62px rgba(0,0,0,.54); }
.classroom-quiz-stage.quiz-theme-history .classroom-quiz-question-card h3,.classroom-quiz-stage.quiz-theme-history .classroom-quiz-student-question h3 { font-family:Georgia,'Times New Roman',serif;font-weight:600;letter-spacing:.01em; }
.classroom-quiz-stage.quiz-theme-science { --quiz-accent:#9ab7ff;--quiz-accent-soft:rgba(154,183,255,.16);--quiz-panel:#101828;background:#091221 url('/assets/quiz-scenes/science-laboratory.png') center/cover; }
.classroom-quiz-stage.quiz-theme-science::before { opacity:1;background-image:radial-gradient(ellipse 65% 100% at 0 56%,rgba(3,7,13,.68),transparent 76%),linear-gradient(180deg,rgba(3,7,13,.14),rgba(3,7,13,.62));background-size:auto; }.classroom-quiz-stage.quiz-theme-science::after { inset:auto 4% 5% auto;width:220px;height:190px;border:0;background:radial-gradient(ellipse at 64% 48%,rgba(250,185,75,.26),rgba(154,183,255,.1) 35%,transparent 70%);filter:blur(1px);animation:quizScienceLamp 5.6s infinite ease-in-out; }
.classroom-quiz-stage.quiz-theme-science .classroom-quiz-lobby-card,.classroom-quiz-stage.quiz-theme-science .classroom-quiz-roster-card,.classroom-quiz-stage.quiz-theme-science .classroom-quiz-question-card,.classroom-quiz-stage.quiz-theme-science .classroom-quiz-results-card,.classroom-quiz-stage.quiz-theme-science .classroom-quiz-student-lobby,.classroom-quiz-stage.quiz-theme-science .classroom-quiz-student-question { border-color:rgba(154,183,255,.52);background:linear-gradient(145deg,rgba(13,17,23,.985),rgba(7,10,14,.965));box-shadow:0 24px 62px rgba(0,0,0,.6); }
.classroom-quiz-stage.quiz-theme-science .classroom-quiz-host-note { background:rgba(255,255,255,.045); }
.classroom-quiz-stage.quiz-theme-nature { --quiz-accent:#a5ec9c;--quiz-accent-soft:rgba(165,236,156,.15);--quiz-panel:#10231d;background:#0b1510 url('/assets/quiz-scenes/nature-greenhouse.png') center/cover; }
.classroom-quiz-stage.quiz-theme-nature::before { opacity:1;background-image:linear-gradient(90deg,rgba(5,13,8,.94) 0%,rgba(7,17,11,.76) 49%,rgba(7,17,11,.22) 100%),linear-gradient(180deg,rgba(4,12,7,.22),rgba(4,12,7,.7));background-size:auto; }.classroom-quiz-stage.quiz-theme-nature::after { inset:auto 3% 4% auto;width:270px;height:230px;border:0;background:radial-gradient(ellipse at 55% 55%,rgba(250,189,81,.22),rgba(135,235,148,.08) 34%,transparent 70%);filter:blur(1px);animation:quizNatureLamp 6.4s infinite ease-in-out; }
.classroom-quiz-stage.quiz-theme-nature .classroom-quiz-lobby-card,.classroom-quiz-stage.quiz-theme-nature .classroom-quiz-roster-card,.classroom-quiz-stage.quiz-theme-nature .classroom-quiz-question-card,.classroom-quiz-stage.quiz-theme-nature .classroom-quiz-results-card,.classroom-quiz-stage.quiz-theme-nature .classroom-quiz-student-lobby,.classroom-quiz-stage.quiz-theme-nature .classroom-quiz-student-question { border-color:rgba(165,236,156,.64);background:rgba(7,18,11,.9);box-shadow:0 24px 62px rgba(0,0,0,.55); }
.classroom-quiz-only #classroom-canvas,.classroom-quiz-only .classroom-floating-toolbar,.classroom-quiz-only .classroom-toolbar-toggle,.classroom-quiz-only .classroom-side,.classroom-quiz-only .classroom-panel-reopen,.classroom-quiz-only .classroom-hint { display:none !important; }
.classroom-quiz-only .classroom-topbar { position:absolute;z-index:6; }

.classroom-quiz-host-layout { width:min(1160px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.16fr) minmax(320px,.84fr);gap:16px; }
.classroom-quiz-host-layout.running { grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); }
.classroom-quiz-lobby-card,.classroom-quiz-roster-card,.classroom-quiz-question-card,.classroom-quiz-results-card,.classroom-quiz-student-lobby,.classroom-quiz-student-question,.classroom-quiz-finished { border:1px solid var(--quiz-accent);border-radius:8px;background:color-mix(in srgb,var(--quiz-panel) 94%,transparent);box-shadow:0 20px 55px rgba(0,0,0,.28);animation:quizCardEnter .38s ease both; }
.classroom-quiz-lobby-card,.classroom-quiz-question-card { padding:30px; }
.classroom-quiz-lobby-card h3,.classroom-quiz-question-card h3,.classroom-quiz-student-question h3 { margin:8px 0 10px;color:var(--ui-text);font-size:clamp(24px,3vw,36px);line-height:1.15; }
.classroom-quiz-lobby-card p { margin:0;color:var(--ui-text-muted);line-height:1.55; }
.classroom-quiz-metrics { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0; }
.classroom-quiz-metrics div { min-height:94px;padding:14px;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-input-bg);display:flex;flex-direction:column;justify-content:center; }
.classroom-quiz-metrics b { color:var(--ui-accent);font-size:30px;line-height:1; }
.classroom-quiz-metrics span { margin-top:6px;color:var(--ui-text-muted);font-size:12px; }
.classroom-quiz-host-actions { display:flex;gap:10px;flex-wrap:wrap;margin-top:18px; }
.classroom-quiz-host-actions button { flex:1;min-width:180px;padding:13px; }
.classroom-quiz-host-note { display:flex;gap:8px;align-items:flex-start;margin:18px 0 0;padding:11px 12px;border-left:3px solid var(--quiz-accent);background:var(--quiz-accent-soft);color:var(--ui-text);font-size:13px;line-height:1.45; }.classroom-quiz-host-note i { color:var(--quiz-accent);font-size:18px; }
.classroom-quiz-roster-card,.classroom-quiz-results-card { padding:18px; }
.classroom-quiz-section-title { display:flex;flex-direction:column;gap:3px;margin-bottom:13px; }
.classroom-quiz-section-title span { color:var(--ui-text);font-weight:600;font-size:var(--type-card-size); }
.classroom-quiz-section-title small { color:var(--ui-text-muted); }
.classroom-quiz-team-grid { display:grid;gap:10px; }
.classroom-quiz-team-card { padding:12px;border:1px solid var(--ui-border);border-left:4px solid var(--ui-accent);border-radius:8px;background:var(--ui-input-bg); }
.classroom-quiz-team-card.lime { border-left-color:var(--ui-success-text); }.classroom-quiz-team-card.amber { border-left-color:var(--ui-warning-text); }.classroom-quiz-team-card.pink { border-left-color:var(--ui-danger-text); }
.classroom-quiz-team-card > div { display:flex;justify-content:space-between;align-items:center;color:var(--ui-text);font-weight:600; }.classroom-quiz-team-card > div b { color:var(--ui-accent); }
.classroom-quiz-team-card small { display:block;margin-top:8px;color:var(--ui-text-muted); }
.classroom-quiz-player-select { display:flex;gap:8px;align-items:center;margin-top:9px;font-size:12px; }.classroom-quiz-player-select span { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.classroom-quiz-player-select select { width:120px;margin:0;padding:7px;font-size:12px; }
.classroom-quiz-player-list { display:grid;gap:7px; }.classroom-quiz-player-list > div { display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;border:1px solid var(--ui-border);border-radius:7px;background:var(--ui-input-bg); }.classroom-quiz-player-list i { color:var(--ui-accent); }.classroom-quiz-player-list span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.classroom-quiz-player-list b { color:var(--ui-success-text);font-size:var(--type-meta-size);font-weight:600; }.classroom-quiz-player-list small { color:var(--ui-text-muted);font-size:var(--type-meta-size); }
.classroom-quiz-host-options { display:grid;gap:8px;margin-top:20px; }.classroom-quiz-host-options > div { display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:center;padding:11px;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-input-bg); }.classroom-quiz-host-options b { width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--ui-accent-soft);color:var(--ui-accent); }
.classroom-quiz-scoreboard { display:grid;gap:7px; }.classroom-quiz-score-title { display:flex;align-items:center;gap:8px;margin-bottom:4px;color:var(--ui-warning-text);font-weight:600; }.classroom-quiz-score-row { display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;gap:7px;align-items:center;padding:10px;border:1px solid var(--ui-border);border-radius:7px;background:var(--ui-input-bg); }.classroom-quiz-score-row.leader { border-color:var(--ui-warning-border); }.classroom-quiz-score-row > span { color:var(--ui-text-muted);font-size:var(--type-badge-size); }.classroom-quiz-score-row b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-text); }.classroom-quiz-score-row strong { color:var(--ui-warning-text);font-size:var(--type-card-size);font-weight:600; }.classroom-quiz-score-row small { color:var(--ui-text-muted); }
.classroom-quiz-empty-score { padding:20px;border:1px dashed var(--ui-border);border-radius:8px;color:var(--ui-text-muted);line-height:1.5; }
.classroom-quiz-student-lobby,.classroom-quiz-student-question,.classroom-quiz-finished { width:min(720px,100%);margin:4vh auto;padding:clamp(24px,5vw,48px);text-align:center; }.classroom-quiz-student-lobby > i,.classroom-quiz-finished > i { display:inline-grid;place-items:center;width:58px;height:58px;margin-bottom:14px;border:1px solid var(--ui-accent);border-radius:50%;color:var(--ui-accent);font-size:30px; }.classroom-quiz-student-lobby > span,.classroom-quiz-finished > span { display:block;color:var(--ui-accent);font-weight:600;text-transform:uppercase;font-size:var(--type-badge-size);letter-spacing:.04em; }.classroom-quiz-student-lobby h3,.classroom-quiz-finished h3 { margin:8px 0;color:var(--ui-text);font-size:var(--type-page-size);font-weight:600;line-height:var(--type-page-line); }.classroom-quiz-student-lobby p,.classroom-quiz-finished p { margin:0 auto 20px;max-width:500px;color:var(--ui-text-muted);line-height:var(--type-body-line); }.classroom-quiz-student-lobby button,.classroom-quiz-finished button { width:100%;min-height:44px;padding:13px;margin-top:16px; }
.classroom-quiz-your-team { width:min(340px,100%);margin:18px auto;padding:14px;border:1px solid var(--ui-border);border-left:4px solid var(--ui-accent);border-radius:8px;background:var(--ui-input-bg);text-align:left; }.classroom-quiz-your-team.lime { border-left-color:var(--ui-success-text); }.classroom-quiz-your-team.amber { border-left-color:var(--ui-warning-text); }.classroom-quiz-your-team.pink { border-left-color:var(--ui-danger-text); }.classroom-quiz-your-team small { display:block;color:var(--ui-text-muted);font-size:var(--type-meta-size); }.classroom-quiz-your-team b { display:block;margin-top:3px;color:var(--ui-text); }
.classroom-quiz-student-question { text-align:left; }.classroom-quiz-student-question h3 { font-size:clamp(23px,4vw,36px); }.classroom-quiz-answer-options { display:grid;gap:10px;margin-top:22px; }.classroom-quiz-answer-options button { display:grid;grid-template-columns:36px minmax(0,1fr) 24px;gap:12px;align-items:center;min-height:44px;padding:14px;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-surface-alt);box-shadow:none;text-align:left;transition:transform .18s ease,border-color .18s ease,background .18s ease;animation:quizAnswerEnter .35s ease both; }.classroom-quiz-answer-options button:nth-child(2){animation-delay:.04s}.classroom-quiz-answer-options button:nth-child(3){animation-delay:.08s}.classroom-quiz-answer-options button:nth-child(4){animation-delay:.12s}.classroom-quiz-answer-options button:nth-child(5){animation-delay:.16s}.classroom-quiz-answer-options button:nth-child(6){animation-delay:.2s}.classroom-quiz-answer-options button:hover:not(:disabled) { transform:translateX(4px);border-color:var(--quiz-accent);background:var(--quiz-accent-soft); }.classroom-quiz-answer-options button.selected { border-color:var(--quiz-accent);background:var(--quiz-accent-soft); }.classroom-quiz-answer-options button b { width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--ui-surface);color:var(--quiz-accent); }.classroom-quiz-answer-options button > i { opacity:0;color:var(--quiz-accent);font-size:22px;transition:opacity .18s ease; }.classroom-quiz-answer-options button.selected > i { opacity:1; }.classroom-quiz-choice-submit { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:12px 14px;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-surface-alt); }.classroom-quiz-choice-submit span { display:inline-flex;align-items:center;gap:7px;color:var(--ui-text-muted);font-size:var(--type-badge-size); }.classroom-quiz-choice-submit span i { color:var(--quiz-accent);font-size:18px; }.classroom-quiz-choice-submit button { min-height:44px;padding:11px 15px; }.classroom-quiz-student-question textarea { height:130px;margin-top:18px; }.classroom-quiz-student-question > button { width:100%;min-height:44px;padding:13px;margin-top:10px; }.classroom-quiz-answer-sent { margin:18px 0 0;color:var(--ui-success-text);font-weight:600;text-align:center; }
.classroom-quiz-stage .classroom-quiz-score-title,.classroom-quiz-stage .classroom-quiz-score-row strong { color:var(--quiz-accent); }
@keyframes quizStageEnter { from { opacity:.25; } to { opacity:1; } } @keyframes quizCardEnter { from { opacity:0;transform:translateY(12px); } to { opacity:1;transform:translateY(0); } } @keyframes quizAnswerEnter { from { opacity:0;transform:translateX(-10px); } to { opacity:1;transform:translateX(0); } } @keyframes quizHistoryLamp { 0%,100% { opacity:.72;transform:scale(.96); } 32% { opacity:.92;transform:scale(1.03); } 35% { opacity:.55;transform:scale(.98); } 39% { opacity:.94;transform:scale(1.04); } 69% { opacity:.77;transform:scale(1); } } @keyframes quizScienceLamp { 0%,100% { opacity:.72;transform:scale(.97); } 29% { opacity:.94;transform:scale(1.03); } 33% { opacity:.56;transform:scale(.98); } 38% { opacity:.9;transform:scale(1.04); } 70% { opacity:.78;transform:scale(1); } } @keyframes quizNatureLamp { 0%,100% { opacity:.68;transform:scale(.97); } 44% { opacity:.92;transform:scale(1.035); } 48% { opacity:.67;transform:scale(.99); } 53% { opacity:.86;transform:scale(1.02); } }
.classroom-quiz-finished .classroom-quiz-scoreboard { margin-top:22px;text-align:left; }.classroom-quiz-finished > i { color:var(--ui-warning-text);border-color:var(--ui-warning-border); }

@media (max-width: 760px) {
    .classroom-quiz-create-heading { gap:10px; }.classroom-quiz-create-icon { display:none; }.classroom-quiz-config-grid,.classroom-quiz-host-layout,.classroom-quiz-host-layout.running,.classroom-quiz-create-actions { grid-template-columns:1fr; }.classroom-quiz-stage { inset:76px 0 0;padding:12px; }.classroom-quiz-lobby-card,.classroom-quiz-question-card { padding:20px; }.classroom-quiz-metrics div { min-height:78px; }.classroom-quiz-metrics b { font-size:25px; }.classroom-quiz-host-actions button { min-width:0; }.classroom-quiz-student-lobby,.classroom-quiz-student-question,.classroom-quiz-finished { margin:8px auto;padding:24px 18px; }.classroom-quiz-student-lobby h3,.classroom-quiz-finished h3 { font-size:27px; }.classroom-quiz-player-select { align-items:flex-start;flex-direction:column; }.classroom-quiz-player-select select { width:100%; }.classroom-quiz-theme-choice button { flex:1; }.classroom-quiz-mode-choice button { flex:1;min-width:130px; }.classroom-setup-block summary { grid-template-columns:minmax(0,1fr) auto; }.classroom-setup-block summary > small { grid-column:1 / 2; }.classroom-quiz-choice-submit { align-items:stretch;flex-direction:column; }.classroom-quiz-choice-submit button { width:100%; }.classroom-quiz-stage::after { inset:8px; }
}

@media (max-width: 760px) {
    .classroom-quiz-hub-icon { display:none; }
    .classroom-quiz-hub-heading { margin-bottom:14px; }
    .classroom-quiz-hub-heading h3 { font-size:27px; }
    .classroom-quiz-hub-grid { grid-template-columns:1fr; }
    .classroom-quiz-hub { padding-bottom:calc(112px + env(safe-area-inset-bottom)); }
    #tab-online-lessons.classroom-quizzes-active > h3 { display:none; }
    .classroom-quiz-theme-choice { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
    .classroom-quiz-theme-choice button { width:100%;min-width:0;padding:11px 8px;font-size:13px;white-space:nowrap; }
    .classroom-quiz-mode-choice { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
    .classroom-quiz-mode-choice button { width:100%;min-width:0; }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body { 
    font-family: var(--font-ui);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    background: var(--ui-bg);
    background-image: var(--bg-pattern); 
    background-size: 30px 30px; 
    margin: 0; padding: var(--space-6);
    color: var(--ui-text);
    transition: background var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease);
    -webkit-user-select: none; 
    user-select: none; 
}
button, input, select, textarea { font-family: var(--font-ui); }
input, textarea, .ql-editor { -webkit-user-select: text; user-select: text; }
h1, h2, h3, h4 { color: var(--ui-text); margin-top: 0; font-weight: 600; }

/* === ХЕДЕР === */
.header { 
    display: flex; justify-content: space-between; align-items: center; 
    background: var(--ui-surface); padding: 16px 20px; border-radius: var(--radius-surface);
    margin-bottom: 24px; border: 1px solid var(--ui-border);
    box-shadow: none;
}
.maintenance-banner {
    position: sticky;
    top: 0;
    z-index: 300;
    margin: 0 0 18px;
    padding: 12px 16px;
    border: 1px solid var(--ui-danger-solid);
    border-radius: 8px;
    background: var(--ui-danger-solid);
    color: var(--ui-on-danger);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--ui-danger-solid) 34%, transparent);
    animation: slideDown 0.5s ease;
}
.header-brand { display:flex; min-width:0; flex:1 1 auto; align-items:center; gap:var(--space-3); }
#mini-logo { width:32px; height:32px; border-radius:6px; object-fit:cover; }
#user-greeting { color:var(--ui-accent); font-size:var(--type-card-size); font-weight:600; letter-spacing:.04em; }
.header-actions { display:inline-flex; flex:0 0 auto; align-items:center; gap:var(--space-2); justify-content:flex-end; }
.header-logout-btn { min-height:44px; padding:8px 15px; font-size:var(--type-badge-size); }
.header-bonus-account {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface-alt);
    color: var(--ui-text);
    box-shadow: none;
    white-space: nowrap;
}
.header-bonus-account strong { color: var(--ui-text); font-size: 14px; }
.header-ai-actions { min-height:44px; padding:0 12px; border:1px solid var(--ui-border); border-radius:999px; color:var(--ui-text); background:var(--ui-surface-alt); box-shadow:none; white-space:nowrap; }.header-ai-actions strong { color:var(--ui-text); font-size:14px; }
.bonus-account-card { display:flex;align-items:center;justify-content:space-between;gap:20px;border-color:var(--ui-warning-border); }
.bonus-account-card > div:first-child { display:flex;flex-direction:column;gap:4px; }
.bonus-account-card strong { color:var(--ui-warning-text);font-size:26px; }
.bonus-account-card small { color:var(--ui-text-muted); }
.bonus-referral-copy { display:flex;gap:8px;flex:1;max-width:560px; }
.bonus-referral-copy input,
.bonus-center-link input {
    margin:0;
    background:var(--ui-input-bg) !important;
    color:var(--ui-text) !important;
    border:1px solid var(--ui-border) !important;
    box-shadow:none !important;
}
.bonus-center-modal { align-items:center;justify-content:center;padding:18px; }
.bonus-center-content { width:min(820px, 100%);max-width:820px;max-height:min(90vh, 860px);margin:0;padding:0;overflow-y:auto;border-color:var(--ui-warning-border); }
.bonus-center-close { position:absolute;right:16px;top:14px;z-index:2;width:44px;height:44px;padding:0;border:0;background:var(--ui-surface-alt);box-shadow:none;font-size:26px;line-height:1;color:var(--ui-text); }
.bonus-center-head { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px;background:var(--ui-surface-alt);border-bottom:1px solid var(--ui-border); }
.bonus-center-head span { color:var(--ui-warning-text);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:var(--type-badge-size); }
.bonus-center-head h2 { margin:5px 0 2px;font-size:38px; }
.bonus-center-head h2 small { font-size:16px;color:var(--ui-text); }
.bonus-center-head p { margin:0;color:var(--ui-text-muted);font-size:13px; }
.bonus-center-wallet { width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--ui-warning-bg);border:1px solid var(--ui-warning-border);color:var(--ui-warning-text);font-size:34px; }
.bonus-expiry-alert { display:flex;gap:10px;align-items:center;margin:18px 24px 0;padding:12px 14px;border:1px solid var(--ui-warning-border);border-radius:var(--radius-control);background:var(--ui-warning-bg);color:var(--ui-warning-text); }
.bonus-center-section { padding:24px 30px;border-bottom:1px solid var(--ui-border); }
.bonus-center-section:last-child { border-bottom:0; }
.bonus-center-section h3 { margin:0 0 16px;font-size:17px; }
.bonus-rules { display:grid;gap:10px; }
.bonus-rule { display:flex;align-items:flex-start;gap:12px;padding:13px;border-radius:8px;background:var(--ui-input-bg);border:1px solid var(--ui-border); }
.bonus-rule > i { flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--ui-accent-soft);color:var(--ui-accent);font-size:19px; }
.bonus-rule div { display:flex;flex-direction:column;gap:3px; }
.bonus-rule b { color:var(--ui-text);font-size:14px; }
.bonus-rule span { color:var(--ui-text-muted);font-size:12px;line-height:1.45; }
.bonus-rule.muted { opacity:.78; }
.bonus-center-link { display:flex;gap:8px;margin-top:14px; }
.bonus-center-link button { white-space:nowrap; }
.bonus-spend-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px; }
.bonus-spend-grid > div { display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:16px 10px;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-surface-alt); }
.bonus-spend-grid i { color:var(--ui-accent);font-size:25px; }
.bonus-spend-grid b { color:var(--ui-text);font-size:13px; }
.bonus-spend-grid span { color:var(--ui-text-muted);font-size:var(--type-meta-size); }
.bonus-center-note { margin:14px 0 0;color:var(--ui-text-muted);font-size:var(--type-meta-size);line-height:var(--type-meta-line); }
.bonus-history-list { display:grid;gap:6px; }
.bonus-history-item { display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--ui-border); }
.bonus-history-item:last-child { border-bottom:0; }
.bonus-history-icon { width:30px;height:30px;display:grid;place-items:center;border-radius:50%; }
.bonus-history-icon.positive { color:var(--ui-success-text);background:var(--ui-success-bg); }
.bonus-history-icon.negative { color:var(--ui-warning-text);background:var(--ui-warning-bg); }
.bonus-history-item div { display:flex;flex-direction:column;gap:2px; }
.bonus-history-item b { color:var(--ui-text);font-size:12px; }
.bonus-history-item small { color:var(--ui-text-muted);font-size:var(--type-meta-size); }
.bonus-history-item > strong { font-size:13px; }
.bonus-history-item > strong.positive { color:var(--ui-success-text); }
.bonus-history-item > strong.negative { color:var(--ui-warning-text); }
.bonus-history-empty,.bonus-center-loading { padding:28px;text-align:center;color:var(--ui-text-muted); }
.bonus-payment-badge { display:inline-flex;align-items:center;gap:6px;width:fit-content;padding:5px 9px;border-radius:999px;border:1px solid var(--ui-warning-border);background:var(--ui-warning-bg);color:var(--ui-warning-text);font-size:12px;font-weight:600; }
.bonus-payment-option {
    margin: 14px 0 !important;
    padding: 14px !important;
    border: 1px solid var(--ui-warning-border) !important;
    border-radius: 8px !important;
    background: var(--ui-warning-bg) !important;
}
.bonus-payment-option span { display:flex;flex-direction:column;gap:4px;line-height:1.35; }
.bonus-payment-option b { color:var(--ui-warning-text);font-size:14px; }
.bonus-payment-option b i { margin-right:5px;font-size:17px;vertical-align:-2px; }
.bonus-payment-option small { color:var(--ui-text);font-size:12px; }
.bonus-payment-option input:disabled + span { opacity:.65; }
.notification-center {
    position: relative;
}
.header-pwa-install {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--ui-surface-alt);
    color: var(--ui-text);
    border: 1px solid var(--ui-border);
    box-shadow: none;
    white-space: nowrap;
}
.header-pwa-install i { font-size:20px; }
.pwa-install-guide { align-items:center;justify-content:center;padding:18px; }
.pwa-install-guide-content {
    position:relative;
    width:min(460px,100%);
    max-width:460px;
    margin:0;
    padding:30px;
    border-color:var(--ui-control-border);
}
.pwa-install-guide-close {
    position:absolute;
    top:14px;
    right:14px;
    width:44px;
    height:44px;
    min-width:44px;
    padding:0;
    background:transparent;
    box-shadow:none;
}
.pwa-install-guide-icon {
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    margin-bottom:16px;
    border:1px solid var(--ui-success-border);
    border-radius:8px;
    background:var(--ui-success-bg);
    color:var(--ui-success-text);
    font-size:28px;
}
.pwa-install-guide-kicker { color:var(--ui-accent);font-size:var(--type-badge-size);font-weight:600;letter-spacing:.04em; }
.pwa-install-guide-content h2 { margin:6px 0 8px;color:var(--ui-text);font-size:28px; }
.pwa-install-guide-content > p { margin:0;color:var(--ui-text);line-height:1.5; }
.pwa-install-guide-steps { display:grid;gap:10px;margin:22px 0; }
.pwa-install-guide-step { display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;padding:12px;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-input-bg); }
.pwa-install-guide-step > b { width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--ui-accent-soft);color:var(--ui-accent);font-size:14px; }
.pwa-install-guide-step div { display:grid;gap:3px; }
.pwa-install-guide-step strong { color:var(--ui-text);font-size:14px; }
.pwa-install-guide-step span { color:var(--ui-text-muted);font-size:12px;line-height:1.4; }
.pwa-install-guide-done { width:100%;min-height:44px; }
.notification-main-btn {
    position: relative;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--ui-surface-alt);
    color: var(--ui-text);
    border: 1px solid var(--ui-border);
    box-shadow: none;
    white-space: nowrap;
}
.notification-main-btn i {
    font-size: 20px;
}
.notification-badge {
    position: absolute;
    right: -5px;
    top: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ui-danger-text);
    color: var(--ui-on-danger);
    font-size: var(--type-badge-size);
    line-height: 18px;
    font-weight: 600;
    box-shadow: none;
}
.notification-panel {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(380px, calc(100vw - 28px));
    max-height: min(520px, calc(100vh - 115px));
    overflow: hidden;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    box-shadow: var(--ui-shadow-float);
    z-index: 1800;
}
.notification-center.open .notification-panel {
    display: block;
}
.notification-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--ui-border);
}
.notification-panel-head b {
    color: var(--ui-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.notification-panel-head button {
    padding: 7px;
    min-width: 44px;
    min-height: 44px;
    box-shadow: none;
    background: transparent;
}
.notification-list {
    max-height: 455px;
    overflow-y: auto;
    padding: 8px;
}
.notification-item,
.notification-empty {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-input-bg);
    color: var(--ui-text);
    box-shadow: none;
    text-align: left;
    margin-bottom: 8px;
}
.notification-item:hover {
    background: var(--ui-accent-soft);
    transform: none;
    text-shadow: none;
}
.notification-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    font-size: 20px;
}
.notification-item > span {
    flex: 1 1 auto;
    min-width: 0;
}
.notification-item strong {
    display: block;
    color: var(--ui-text);
    margin-bottom: 3px;
}
.notification-item span,
.notification-empty {
    color: var(--ui-text-muted);
    font-size: 13px;
    line-height: 1.35;
}
.notification-item.danger i { color: var(--ui-danger-text); }
.notification-item.warning i { color: var(--ui-warning-text); }
.notification-item.success i { color: var(--ui-success-text); }
.theme-btn {
    width: 44px; height: 44px; min-width: 44px;
    background: transparent; border: none; font-size: 24px; cursor: pointer;
    color: var(--ui-text); box-shadow: none; padding: 0; margin: 0;
}
.theme-btn i { font-size: 24px; }
.theme-btn:hover { background: var(--ui-accent-soft); transform: none; text-shadow: none; }

/* === КНОПКИ === */
button, .theme-btn-upload { 
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; 
    min-height: 44px; background: var(--ui-surface-alt); color: var(--ui-text);
    border: 1px solid var(--ui-control-border); padding: 10px 16px; border-radius: var(--radius-control);
    cursor: pointer; font-weight: 600; font-size: 14px;
    transition: border-color var(--motion-base) var(--motion-ease), background var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease); box-shadow: none;
}
button i, .theme-btn-upload i { font-size: 20px; }
button:hover, .theme-btn-upload:hover { 
    background: var(--ui-accent-soft);
    border-color: var(--ui-accent);
    box-shadow: none;
    text-shadow: none;
    transform: none;
}
button:active:not(:disabled), .theme-btn-upload:active:not(:disabled) {
    transform: none;
}
button.btn-success { background: var(--ui-accent); color: var(--ui-on-accent); border-color: var(--ui-accent); }
button.btn-success:hover { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); text-shadow: none; }
button.btn-solid-success {
    background: var(--ui-success-bg);
    color: var(--ui-success-text);
    border-color: var(--ui-success-border);
    box-shadow: none;
}
button.btn-solid-danger {
    background: var(--ui-danger-bg);
    color: var(--ui-danger-text);
    border-color: var(--ui-danger-border);
    box-shadow: none;
}
button.btn-solid-danger:hover {
    background: color-mix(in srgb, var(--ui-danger-bg) 82%, var(--ui-danger-text));
    color: var(--ui-danger-text);
    text-shadow: none;
}

.btn-secondary,
.mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--ui-control-border);
    border-radius: 8px;
    background: var(--ui-surface-alt);
    color: var(--ui-text);
    font-weight: 600;
    cursor: pointer;
}

.btn-secondary {
    min-height: 44px;
    padding: 10px 14px;
}

.mini-btn {
    width: 44px;
    height: 44px;
    padding: 0;
}

.mini-btn.danger {
    border-color: var(--ui-danger-border);
    color: var(--ui-danger-text);
    background: var(--ui-danger-bg);
}

.table-fill-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.table-fill-size-control {
    display: inline-flex !important;
    grid-template-columns: none !important;
    flex-direction: row;
    align-items: center;
    gap: 8px !important;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
}

.table-fill-size-control span {
    color: var(--ui-text);
    font-size: 13px;
    white-space: nowrap;
}

.table-fill-size-control input {
    width: 72px;
    margin: 0;
    padding: 8px;
}

.table-fill-limit-note {
    color: var(--ui-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.table-fill-scroll {
    width: 100%;
    overflow-x: auto;
    padding: 2px 2px 8px;
}

.table-fill-builder {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    overflow: hidden;
}

.table-fill-builder th,
.table-fill-builder td {
    border-right: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
    padding: 12px;
    vertical-align: top;
}

.table-fill-builder th {
    background: var(--ui-surface-alt);
}

.table-fill-builder th:last-child,
.table-fill-builder td:last-child {
    width: 52px;
    border-right: 0;
}

.table-fill-builder tr:last-child td {
    border-bottom: 0;
}

.table-fill-col-input,
.table-fill-cell-text,
.table-fill-blank-answer,
.table-fill-item-row input {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    min-height: 44px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-input-bg);
    color: var(--ui-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    outline: none;
    box-shadow: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.table-fill-col-input:focus,
.table-fill-cell-text:focus,
.table-fill-blank-key:focus,
.table-fill-blank-answer:focus,
.table-fill-item-row input:focus {
    border-color: var(--ui-accent);
    background: var(--ui-input-bg);
}

.table-fill-col-input {
    font-weight: 600;
    background: var(--ui-surface-alt);
}

.table-fill-builder th .mini-btn {
    margin: 8px auto 0;
}

.table-fill-cell {
    min-width: 210px;
}

.table-fill-cell.is-blank {
    background: var(--ui-warning-bg);
}

.table-fill-cell-text:disabled {
    color: var(--ui-text-muted);
    background: var(--ui-surface-alt);
    border-color: var(--ui-warning-border);
}

.table-fill-blank-toggle {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: row;
    align-items: center;
    gap: 8px !important;
    margin-top: 8px;
    color: var(--ui-text);
    font-size: 13px;
    line-height: 1.2;
}

.table-fill-blank-toggle input {
    width: auto;
    margin: 0;
    accent-color: var(--ui-accent);
}

.table-fill-blank-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--ui-warning-border);
    border-radius: 6px;
    background: var(--ui-warning-bg);
}

.table-fill-blank-controls span {
    color: var(--ui-text);
    font-size: 12px;
}

.table-fill-blank-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 26px;
    padding: 4px 9px;
    border: 1px solid var(--ui-warning-border);
    border-radius: 999px;
    color: var(--ui-warning-text) !important;
    background: var(--ui-warning-bg);
    font-weight: 600;
}

.table-fill-row-actions {
    text-align: center;
    vertical-align: middle !important;
}

.table-fill-items-editor {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
}

.table-fill-items-title {
    color: var(--ui-text);
    font-weight: 600;
    margin-bottom: 2px;
}

.table-fill-item-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 10px;
    align-items: center;
    padding: 8px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface-alt);
}

.table-fill-item-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 6px;
    border: 1px solid var(--ui-control-border);
    color: var(--ui-accent);
    background: var(--ui-accent-soft);
    font-weight: 600;
}

.table-fill-task-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    margin: 12px 0 16px;
    background: var(--ui-input-bg);
    color: var(--ui-text);
}

.table-fill-task-table th,
.table-fill-task-table td {
    border: 1px solid var(--ui-border);
    padding: 10px;
    vertical-align: middle;
    text-align: left;
    max-width: 340px;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.table-fill-task-table th {
    background: var(--ui-surface-alt);
    font-weight: 600;
}

.table-fill-select {
    width: 100%;
    min-width: 180px;
    max-width: 100%;
    margin: 0;
    padding: 11px 34px 11px 12px;
    background: var(--ui-input-bg);
    color: var(--ui-text);
    border-color: var(--ui-accent);
    border-radius: 6px;
    white-space: normal;
    text-overflow: ellipsis;
}

.table-fill-task-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 12px 0 16px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
}

.table-fill-task-wrap .table-fill-task-table {
    margin: 0;
}

.table-fill-items {
    display: grid;
    gap: 8px;
    margin: 10px 0 0;
    padding-left: 0;
    list-style: none;
    color: var(--ui-text);
}

.table-fill-items li {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface-alt);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.table-fill-items li span {
    margin-left: 0;
}

.question-clickable-image {
    display: block;
    max-width: 100%;
    max-height: var(--question-image-max-height, 260px);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-control);
    cursor: zoom-in;
    object-fit: contain;
}

/* A component's visibility is state, not a per-instance visual override. */
[hidden] {
    display: none !important;
}

.analytics-noscript-pixel {
    position: absolute;
    left: -9999px;
}
.question-image-gallery { display:flex; gap:10px; flex-wrap:wrap; margin:10px 0; }
.question-image-gallery-answer { gap:12px; margin:0 0 var(--space-5); }
.question-image-placeholder-icon { color:var(--ui-accent); font-size:24px; }
.question-preview-note { margin-top:var(--space-2); color:var(--ui-text-muted); font-size:var(--type-meta-size); line-height:var(--type-meta-line); }

.text-gap-editor {
    display: grid;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--ui-control-border);
    border-radius: 10px;
    background: var(--ui-surface);
}

.text-gap-editor > label,
.text-gap-editor-field {
    display: grid;
    gap: 7px;
    color: var(--ui-text);
    font-size: 13px;
    font-weight: 600;
}

.text-gap-editor select,
.text-gap-editor input {
    margin: 0;
}

.text-gap-insert-help {
    color: var(--ui-text-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.text-gap-visual-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.text-gap-visual-editor {
    min-height: 150px;
    padding: 14px;
    border: 1px solid var(--ui-control-border);
    border-radius: 8px;
    background: var(--ui-input-bg);
    color: var(--ui-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 2.2;
    outline: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.text-gap-visual-editor:focus {
    border-color: var(--ui-accent);
    background: var(--ui-input-bg);
}

.text-gap-visual-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--ui-text-muted);
    pointer-events: none;
}

.text-gap-editor-token {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    margin: 2px 4px;
    padding: 1px 5px 1px 10px;
    border: 1px solid var(--ui-warning-border);
    border-radius: 999px;
    color: var(--ui-warning-text);
    background: var(--ui-warning-bg);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    vertical-align: middle;
    user-select: none;
}

.text-gap-editor-token button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ui-warning-bg);
    color: var(--ui-warning-text);
    box-shadow: none;
    font-size: 18px;
    line-height: 1;
}

.text-gap-preview,
.text-gap-admin-preview,
.text-gap-student-passage {
    padding: 16px;
    border: 1px solid var(--ui-border);
    border-radius: 9px;
    background: var(--ui-surface);
    color: var(--ui-text);
    line-height: 2;
    overflow-wrap: anywhere;
}

.text-gap-preview > b {
    display: block;
    margin-bottom: 7px;
    color: var(--ui-text-muted);
    font-size: 12px;
}

.text-gap-preview-blank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 30px;
    margin: 0 4px;
    padding: 2px 10px;
    border: 1px dashed var(--ui-warning-border);
    border-radius: 7px;
    color: var(--ui-warning-text);
    background: var(--ui-warning-bg);
    font-weight: 600;
    line-height: 1.2;
}

.text-gap-section-title {
    margin-bottom: 9px;
    color: var(--ui-text);
    font-weight: 600;
}

.text-gap-items-editor,
#text-gap-answer-list {
    display: grid;
    gap: 10px;
}

.text-gap-item-row {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 10px;
    align-items: center;
}

.text-gap-item-input,
.text-gap-correct-input,
.text-gap-correct-choice {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 1px solid var(--ui-control-border);
    border-radius: 7px;
    background: var(--ui-input-bg);
    color: var(--ui-text);
    font: inherit;
    font-size: 15px;
    outline: none;
    box-shadow: none;
    color-scheme: dark;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.text-gap-item-input:focus,
.text-gap-correct-input:focus,
.text-gap-correct-choice:focus {
    border-color: var(--ui-accent);
    background: var(--ui-input-bg);
    box-shadow: var(--ui-focus-ring);
}

.text-gap-item-input::placeholder,
.text-gap-correct-input::placeholder {
    color: var(--ui-text-muted);
    opacity: 0.75;
}

body.light-mode .text-gap-item-input,
body.light-mode .text-gap-correct-input,
body.light-mode .text-gap-correct-choice {
    color-scheme: light;
}

.text-gap-item-number,
.text-gap-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid var(--ui-control-border);
    border-radius: 7px;
    color: var(--ui-accent);
    background: var(--ui-accent-soft);
    font-weight: 600;
}

.text-gap-answer-row {
    display: grid !important;
    grid-template-columns: 46px minmax(115px, auto) minmax(0, 1fr);
    gap: 10px !important;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: 9px;
    background: var(--ui-surface-alt);
}

.text-gap-answer-row > span:nth-child(2) {
    color: var(--ui-text-muted);
    font-size: 12px;
    font-weight: 500;
}

.text-gap-empty {
    padding: 14px;
    border: 1px dashed var(--ui-warning-border);
    border-radius: 8px;
    color: var(--ui-warning-text);
    background: var(--ui-warning-bg);
}

.text-gap-admin-answers {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.text-gap-admin-answers span {
    padding: 5px 9px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    color: var(--ui-text);
    background: var(--ui-surface-alt);
    font-size: 12px;
    line-height: 1.3;
}

.text-gap-student-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--ui-control-border);
    border-radius: 7px;
    color: var(--ui-text);
    background: var(--ui-surface-alt);
    font-size: 13px;
}

.text-gap-student-control {
    display: inline-block;
    width: auto;
    min-width: 130px;
    max-width: min(260px, 100%);
    min-height: 44px;
    margin: 3px 5px;
    padding: 7px 10px;
    border: 1px solid var(--ui-accent);
    border-radius: 7px;
    background: var(--ui-input-bg);
    color: var(--ui-text);
    font: inherit;
    line-height: 1.2;
    vertical-align: middle;
}

@media (max-width: 600px) {
    .text-gap-editor {
        padding: 12px;
    }

    .text-gap-answer-row {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .text-gap-answer-row > span:nth-child(2) {
        grid-column: 2;
    }

    .text-gap-answer-row input,
    .text-gap-answer-row select {
        grid-column: 1 / -1;
        width: 100%;
    }

    .text-gap-student-passage {
        padding: 13px;
        line-height: 2.35;
    }

    .text-gap-student-control {
        min-width: 105px;
        max-width: 100%;
        font-size: 15px;
    }
}

#lesson-viewer {
    max-width: min(1760px, calc(100vw - 48px));
}

.lesson-viewer-back-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.lesson-viewer-back-button {
    border-color: var(--ui-border);
    color: var(--ui-text-muted);
    background: transparent;
    box-shadow: none;
}

#lesson-viewer.lesson-preview-mode .lesson-viewer-back-row {
    position: static;
    margin: 0 0 var(--space-3);
}

#lesson-viewer.lesson-preview-mode .lesson-viewer-back-button {
    border-color: var(--ui-accent);
    color: var(--ui-accent);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-float);
    backdrop-filter: blur(10px);
}

#lesson-viewer.lesson-preview-mode .lesson-viewer-back-button:hover {
    color: var(--ui-text);
    background: var(--ui-surface-alt);
}

#lesson-viewer .lesson-viewer-grid {
    flex-wrap: nowrap !important;
}

#lesson-viewer .lesson-nav-panel {
    flex: 0 0 320px !important;
}

#lesson-viewer .lesson-main-panel {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

#single-lesson-container .card {
    width: 100%;
    box-sizing: border-box;
}
button.btn-solid-success:hover {
    background: color-mix(in srgb, var(--ui-success-bg) 82%, var(--ui-success-text));
    color: var(--ui-success-text);
    text-shadow: none;
}
button.btn-danger { background: var(--ui-danger-bg); color: var(--ui-danger-text); border-color: var(--ui-danger-border); }
button.btn-danger:hover { background: color-mix(in srgb, var(--ui-danger-bg) 82%, var(--ui-danger-text)); text-shadow: none; }
.test-actions { display: flex; gap: 12px; margin-top: 10px; }
.test-actions button { flex: 1 1 0; min-height: 54px; font-size: 16px; }
.lesson-complete-btn { min-height: 54px; }

/* Поля ответа ученика должны быть заметны и до нажатия, а не только в фокусе. */
#single-lesson-container .test-question .q-answer-open,
#single-lesson-container .test-question .q-answer-short,
#single-lesson-container .test-question .q-answer-numeric-value,
#single-lesson-container .test-question .q-answer-numeric-unit,
#single-lesson-container .test-question .q-chem-reactants,
#single-lesson-container .test-question .q-chem-conditions,
#single-lesson-container .test-question .q-chem-products,
#single-lesson-container .test-question .q-answer-match {
    border: 1px solid var(--ui-control-border) !important;
    background: var(--ui-input-bg) !important;
    box-shadow: none;
}
#single-lesson-container .test-question .q-answer-open:focus,
#single-lesson-container .test-question .q-answer-short:focus,
#single-lesson-container .test-question .q-answer-numeric-value:focus,
#single-lesson-container .test-question .q-answer-numeric-unit:focus,
#single-lesson-container .test-question .q-chem-reactants:focus,
#single-lesson-container .test-question .q-chem-conditions:focus,
#single-lesson-container .test-question .q-chem-products:focus,
#single-lesson-container .test-question .q-answer-match:focus {
    border-color: var(--ui-accent) !important;
    box-shadow: var(--ui-focus-ring);
}
#single-lesson-container .test-question .test-math-answer-wrap,
#single-lesson-container .test-question .test-numeric-answer-wrap {
    border-style: solid;
    border-color: var(--ui-control-border);
    background: var(--ui-surface-alt);
}
.lesson-test-card { border-top:4px solid var(--ui-warning-border); animation:fadeIn var(--motion-slow) var(--motion-ease); }
.lesson-test-back { margin-bottom:15px; padding:0; border:0; color:var(--ui-text-muted); background:transparent; box-shadow:none; }
.lesson-test-back:hover,
.lesson-test-back:focus-visible { color:var(--ui-accent); background:transparent; }
.lesson-test-title { margin-top:0; color:var(--ui-warning-text); }
.lesson-test-intro { margin-bottom:var(--space-5); padding-bottom:15px; border-bottom:1px solid var(--ui-border); color:var(--ui-text-muted); font-size:var(--type-control-size); line-height:var(--type-control-line); }
.lesson-test-question { margin-bottom:35px; padding:0 0 var(--space-5); border-bottom:1px dashed var(--ui-border); }
.lesson-test-question-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); }
.lesson-test-question-text { min-width:0; flex:1; margin:0; color:var(--ui-text); font-size:18px; line-height:1.5; }
.lesson-test-points { display:inline-flex; flex:none; align-items:center; gap:4px; padding:4px 9px; border:1px solid var(--ui-control-border); border-radius:999px; color:var(--ui-accent); background:var(--ui-accent-soft); font-size:var(--type-badge-size); font-weight:600; white-space:nowrap; }
.lesson-test-answer-open { box-sizing:border-box; width:100%; min-height:120px; padding:15px; resize:vertical; }
.lesson-test-answer-short { box-sizing:border-box; width:100%; padding:15px; font-size:var(--type-field-size); }
.lesson-test-answer-label { display:block; margin-bottom:var(--space-2); color:var(--ui-text); font-size:var(--type-meta-size); }
.lesson-test-answer-help { margin-top:var(--space-2); color:var(--ui-text-muted); font-size:var(--type-badge-size); line-height:var(--type-badge-line); }
.lesson-test-error { display:flex; align-items:center; gap:var(--space-2); padding:var(--space-3); border:1px solid var(--ui-danger-border); border-radius:var(--radius-control); color:var(--ui-danger-text); background:var(--ui-danger-bg); }
.lesson-test-instruction { margin-bottom:14px; padding:10px 12px; border:1px dashed var(--ui-control-border); border-radius:var(--radius-control); color:var(--ui-text); background:var(--ui-accent-soft); font-size:var(--type-meta-size); line-height:1.45; }
.lesson-test-instruction b,
.lesson-test-options-title { color:var(--ui-text); }
.lesson-test-option-image { width:auto; max-width:96px; height:40px; flex:none; margin-right:10px; border:1px solid var(--ui-border); border-radius:4px; object-fit:contain; vertical-align:middle; }
.lesson-test-match-row { margin-bottom:var(--space-3); padding:15px; border:1px solid var(--ui-border); border-radius:var(--radius-control); background:var(--ui-input-bg); }
.lesson-test-match-term { display:flex; align-items:center; color:var(--ui-text); font-size:15px; }
.lesson-test-match-term span { font-weight:600; }
.lesson-test-match-select { width:100%; margin:10px 0 0; padding:12px; font-size:var(--type-control-size); }
.lesson-test-order-panel { padding:15px; border:1px solid var(--ui-border); border-radius:var(--radius-control); background:var(--ui-input-bg); }
.lesson-test-order-note { margin:0 0 15px; color:var(--ui-warning-text); font-size:var(--type-meta-size); line-height:var(--type-meta-line); }
.lesson-test-order-item { display:flex; align-items:center; margin-bottom:var(--space-2); padding:var(--space-3); border:1px solid var(--ui-border); border-radius:var(--radius-control); color:var(--ui-text); background:var(--ui-bg); font-size:15px; cursor:pointer; transition:border-color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); }
.lesson-test-order-item:hover { border-color:var(--ui-accent); background:var(--ui-accent-soft); }
.lesson-test-order-reset { min-height:40px; margin-top:10px; padding:8px 15px; border-color:var(--ui-border); color:var(--ui-text-muted); background:transparent; font-size:var(--type-badge-size); box-shadow:none; }
.lesson-test-choice { display:flex; align-items:flex-start; gap:var(--space-3); margin-bottom:10px; padding:12px 15px; border:1px solid var(--ui-border); border-radius:var(--radius-control); color:var(--ui-text); background:var(--ui-input-bg); cursor:pointer; transition:border-color var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease); }
.lesson-test-choice:hover,
.lesson-test-choice:focus-within { border-color:var(--ui-accent); background:var(--ui-accent-soft); }
.lesson-test-choice-input { width:18px; min-width:18px; height:18px; flex:none; margin:2px 0 0; accent-color:var(--ui-accent); }
.lesson-test-choice-text { min-width:0; color:var(--ui-text); font-size:15px; line-height:1.4; }
.test-question.answer-missing { margin-right:-16px; margin-left:-16px; padding:var(--space-4) !important; border:1px solid var(--ui-danger-border) !important; border-radius:var(--radius-surface); background:var(--ui-danger-bg); }
.answer-missing-message { margin:0 0 var(--space-3); color:var(--ui-danger-text); font-size:var(--type-control-size); font-weight:600; }
.homework-submit-block.answer-missing,
.homework-submit-block.answer-missing textarea,
.homework-submit-block.answer-missing input[type="file"] { border-color:var(--ui-danger-border) !important; box-shadow:none; }

.lesson-test-sticky-actions {
    position: fixed;
    z-index: 75;
    right: 24px;
    bottom: 78px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 48px);
    padding: 8px;
    border: 1px solid var(--ui-control-border);
    border-radius: 12px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-float);
    backdrop-filter: blur(12px);
}
.lesson-test-sticky-actions button {
    min-height: 44px;
    padding: 10px 14px;
    white-space: nowrap;
    box-shadow: none;
}
.lesson-test-sticky-back {
    color: var(--ui-text);
    background: transparent;
    border-color: var(--ui-border);
}
.lesson-test-sticky-back:hover {
    border-color: var(--ui-accent);
    color: var(--ui-accent);
}

.teacher-courses-library-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 25px;
    padding: 18px 20px;
    border: 1px solid var(--ui-control-border);
    border-radius: 10px;
    background: var(--ui-surface-alt);
}
.teacher-courses-library-head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--ui-text);
}
.teacher-courses-library-head h3 i { color: var(--ui-accent); }
.teacher-courses-library-head p {
    margin: 7px 0 0;
    color: var(--ui-text-muted);
    font-size: 13px;
}
.teacher-courses-create-btn { flex: 0 0 auto; min-height: 46px; }
.teacher-courses-empty-copy {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.teacher-course-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border-color: var(--ui-border);
}
.teacher-course-card.state-public { border-color: var(--ui-success-border); }
.teacher-course-card.state-unlisted,
.teacher-course-card.state-group { border-color: var(--ui-info-border); }
.teacher-course-card.state-private,
.teacher-course-card.state-draft { border-color: var(--ui-border); }
.teacher-course-cover {
    display: grid;
    width: 100%;
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    margin-bottom: var(--space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-control);
    background: var(--ui-input-bg);
}
.teacher-course-cover-image,
.course-cover-preview-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.teacher-course-cover-empty {
    padding: var(--space-3);
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
    text-align: center;
}
.teacher-course-price {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: var(--space-2);
    color: var(--ui-accent);
    font-variant-numeric: tabular-nums;
}
.teacher-course-state {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding: var(--space-2);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-control);
    color: var(--ui-text);
    background: var(--ui-surface-alt);
}
.teacher-course-state > i {
    flex: 0 0 auto;
    color: var(--ui-accent);
    font-size: 20px;
}
.teacher-course-state > div { display: grid; gap: 2px; min-width: 0; }
.teacher-course-state b {
    font-size: var(--type-control-size);
    line-height: var(--type-control-line);
    font-weight: 600;
}
.teacher-course-state span {
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
    overflow-wrap: anywhere;
}
.teacher-course-bonus { align-self: flex-start; margin-bottom: var(--space-2); }
.teacher-course-title {
    margin: 0 0 var(--space-2);
    color: var(--ui-text);
    font-size: var(--type-card-size);
    line-height: var(--type-card-line);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.teacher-course-description {
    display: -webkit-box;
    flex: 1 1 auto;
    overflow: hidden;
    margin: 0 0 var(--space-4);
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.teacher-course-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.teacher-course-action,
.teacher-course-publish {
    min-width: 0;
    min-height: 44px;
    padding: 9px 10px;
    font-size: var(--type-control-size);
    line-height: var(--type-control-line);
}
.teacher-course-action.is-wide { grid-column: 1 / -1; }
.teacher-course-publish { width: 100%; }
.course-discount-modal-content {
    max-width: 760px;
    max-height: 85vh;
    overflow-y: auto;
}
.course-discount-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--ui-text);
    font-size: var(--type-section-size);
    line-height: var(--type-section-line);
    font-weight: 600;
}
.course-discount-title i { color: var(--ui-accent); }
.course-discount-caption {
    margin: var(--space-2) 44px 0 0;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.discount-form-grid {
    display: grid;
    grid-template-columns: 160px minmax(220px, 1fr) 160px 52px;
    align-items: end;
    gap: var(--space-3);
    margin: var(--space-5) 0;
    padding: var(--space-4);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-control);
    background: var(--ui-surface-alt);
}
.course-discount-field { display: grid; gap: var(--space-2); min-width: 0; }
.course-discount-field label {
    color: var(--ui-text-muted);
    font-size: var(--type-label-size);
    line-height: var(--type-label-line);
    font-weight: 500;
}
.course-discount-field input,
.course-discount-field select {
    width: 100%;
    min-height: 44px;
    margin: 0;
}
.course-discount-save {
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
}
.course-discounts-empty {
    margin: 0;
    padding: var(--space-4);
    color: var(--ui-text-muted);
    text-align: center;
}
.course-discount-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}
.course-discount-row > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.course-discount-meta {
    margin-top: var(--space-1);
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.course-discount-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-3);
}
.course-discount-price {
    color: var(--ui-success-text);
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.course-discount-delete {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}

@media (max-width: 760px) {
    .lesson-test-sticky-actions {
        right: 12px;
        bottom: 64px;
        left: 12px;
        justify-content: stretch;
        max-width: none;
    }
    .lesson-test-sticky-actions button {
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 8px;
        font-size: 13px;
    }
    .lesson-test-sticky-actions button span {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .teacher-courses-library-head {
        flex-direction: column;
        padding: 16px;
    }
    .teacher-courses-create-btn { width: 100%; }
    .teacher-course-actions { grid-template-columns: 1fr; }
    .teacher-course-action.is-wide { grid-column: auto; }
    .discount-form-grid { grid-template-columns: 1fr; }
    .course-discount-save { width: 100%; }
    .course-discount-row { align-items: flex-start; flex-direction: column; }
    .course-discount-actions { width: 100%; justify-content: space-between; }
}

/* === ДАШБОРДЫ === */
.dashboard { display: none; max-width: 1440px; margin: 0 auto; }
.active-dashboard { display: block; animation: dashboard-enter var(--motion-slow) var(--motion-ease); }
#teacher-dashboard { max-width: 1440px; }
#student-dashboard { max-width: 1440px; }
@keyframes dashboard-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === КАРТОЧКИ === */
.card { 
    background: var(--ui-surface); border: 1px solid var(--ui-border);
    border-radius: var(--radius-surface); padding: 24px; margin-bottom: 24px;
    position: relative; transition: border-color var(--motion-base) var(--motion-ease), background var(--motion-base) var(--motion-ease);
}
.card:hover { 
    border-color: var(--ui-control-border);
    box-shadow: none;
}
.course-cover { 
    width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; 
    margin-bottom: 15px; background: var(--ui-border);
}
.public-course-hero {
    display: grid;
    grid-template-columns: minmax(240px, 340px) 1fr;
    gap: 28px;
    align-items: start;
}
.public-course-info {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--ui-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.public-course-shell { max-width:1040px; margin:0 auto; padding:var(--space-6) 18px 60px; }
.public-course-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-5); flex-wrap:wrap; }
.public-course-brand { display:inline-flex; min-height:44px; align-items:center; gap:var(--space-3); color:var(--ui-accent); font-weight:600; text-decoration:none; }
.public-course-brand img { width:44px; height:44px; border-radius:var(--radius-control); object-fit:cover; }
.public-course-login { min-height:44px; border-color:var(--ui-accent); background:transparent; color:var(--ui-accent); }
#public-course-content { border-color:var(--ui-accent); }
.catalog-section-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ui-text);
    font-size: 20px;
    font-weight: 600;
    margin: 8px 0 0;
}
.catalog-section-title i { color: var(--ui-accent); }
.trainer-catalog-row {
    grid-column: 1 / -1;
    margin: 0 0 8px;
}
.trainer-catalog-toggle {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 24px;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: var(--ui-surface-alt);
    border-color: var(--ui-control-border);
    color: var(--ui-text);
    text-align: left;
}
.trainer-catalog-toggle span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.trainer-catalog-toggle i {
    color: var(--ui-accent);
}
.trainer-catalog-toggle small {
    color: var(--ui-text-muted);
    font-weight: 600;
}
.trainer-catalog-details {
    margin-top: 10px;
    padding: 12px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
}
.trainer-price-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
}
.trainer-price-row div {
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    padding: 10px;
}
.trainer-price-row b {
    display: block;
    color: var(--ui-text);
}
.trainer-price-row span {
    color: var(--ui-success-text);
    font-weight: 600;
}

/* === ЕДИНЫЕ ПОЛЯ ФОРМ ===
   .academy-control — основной компонент для новых экранов. Список стандартных
   элементов ниже остаётся страховкой для старой разметки без класса. */
.academy-control,
input:not([type]),
input:is([type="text"], [type="password"], [type="number"], [type="email"], [type="tel"], [type="url"], [type="search"], [type="date"], [type="time"], [type="datetime-local"]),
textarea,
select {
    width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--ui-control-border); border-radius: var(--radius-control);
    margin-bottom: 15px; box-sizing: border-box; font-size: 16px; line-height: 24px;
    background: var(--ui-input-bg); color: var(--ui-text); font-family: inherit; transition: border-color var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease), background var(--motion-base) var(--motion-ease);
}
.academy-control:hover,
input:not([type]):hover,
input:is([type="text"], [type="password"], [type="number"], [type="email"], [type="tel"], [type="url"], [type="search"], [type="date"], [type="time"], [type="datetime-local"]):hover,
textarea:hover,
select:hover { border-color: color-mix(in srgb, var(--ui-accent) 52%, var(--ui-border)); }
.academy-control:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus-ring);
}
.academy-control::placeholder,
input::placeholder,
textarea::placeholder { color: var(--ui-text-muted); opacity:.82; }
.academy-control:-webkit-autofill,
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--ui-text);
    box-shadow: inset 0 0 0 1000px var(--ui-input-bg);
    caret-color: var(--ui-text);
}
input[type="file"]:not([hidden]) {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
    padding: 6px;
    border: 1px solid var(--ui-control-border);
    border-radius: var(--radius-control);
    background: var(--ui-input-bg);
    color: var(--ui-text);
    font: inherit;
}
input[type="file"]:not([hidden])::file-selector-button {
    margin-right: 12px;
    padding: 9px 14px;
    min-height: 44px;
    border: 1px solid var(--ui-control-border);
    border-radius: 6px;
    background: var(--ui-surface-alt);
    color: var(--ui-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
}
input[type="file"]:not([hidden])::file-selector-button:hover {
    background: var(--ui-accent-soft);
    border-color: var(--ui-accent);
    color: var(--ui-text);
    box-shadow: none;
}

#question-editor-form input,
#question-editor-form textarea,
#question-editor-form select {
    border-color: var(--ui-control-border) !important;
    box-shadow: none;
}

#question-editor-form input:focus,
#question-editor-form textarea:focus,
#question-editor-form select:focus {
    border-color: var(--ui-accent) !important;
    box-shadow: var(--ui-focus-ring);
}

input[type="datetime-local"] {
    color-scheme: dark;
    min-height: 44px;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(135deg);
    opacity: 0.85;
    cursor: pointer;
}
body.light-mode input[type="datetime-local"] {
    color-scheme: light;
}
body.light-mode input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: none;
}
.checkbox-container { 
    display: flex; align-items: center; gap: 12px; margin-bottom: 15px; cursor: pointer; 
    background: var(--ui-surface); padding: 12px 15px; border-radius: 6px; border: 1px solid var(--ui-border);
    line-height: 1.35;
    min-height: 44px;
}
.checkbox-container input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin: 0;
    padding: 0;
    border: 2px solid var(--ui-control-border);
    border-radius: 4px;
    background: var(--ui-input-bg);
    display: grid;
    place-content: center;
    flex: 0 0 18px;
    cursor: pointer;
}
.checkbox-container input[type="checkbox"]::before {
    content: "";
    width: 9px;
    height: 9px;
    transform: scale(0);
    transition: transform 0.12s ease-in-out;
    clip-path: polygon(14% 44%, 0 65%, 43% 100%, 100% 18%, 80% 0%, 38% 62%);
    background: var(--ui-on-accent);
}
.checkbox-container input[type="checkbox"]:checked {
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    box-shadow: none;
}
.checkbox-container input[type="checkbox"]:checked::before {
    transform: scale(1);
}
.checkbox-container span {
    min-width: 0;
}

/* === ТАБЫ === */
.tab-menu { 
    display: flex; gap: 10px; margin-bottom: 25px; 
    border-bottom: 1px solid var(--ui-border); overflow-x: auto; padding-bottom: 5px;
    scrollbar-width: none;
}
.tab-menu::-webkit-scrollbar { display: none; }
.tab-btn { 
    min-height: 44px; background: transparent; color: var(--ui-text-muted); border: none; border-bottom: 2px solid transparent;
    border-radius: 0; padding: 10px 12px; font-size: 14px; box-shadow: none; font-weight: 500;
}
.tab-btn.active { color: var(--ui-accent); border-bottom-color: var(--ui-accent); font-weight: 600; text-shadow: none; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.teacher-tab-menu {
    overflow: visible;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
}
.teacher-more-menu {
    position: relative;
    display: inline-flex;
}
.teacher-more-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    padding: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    box-shadow: var(--ui-shadow-float);
    z-index: 500;
}
.teacher-more-menu.open .teacher-more-dropdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.teacher-more-dropdown .tab-btn {
    width: 100%;
    justify-content: flex-start;
    border-bottom: 0;
    border-radius: 6px;
    padding: 10px 12px;
}
.teacher-more-dropdown .tab-btn.active,
.teacher-more-dropdown .tab-btn:hover {
    background: var(--ui-accent-soft);
    border-bottom: 0;
}
.teacher-more-group {
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface-alt);
}
.teacher-more-group + .teacher-more-group { margin-top: 6px; }
.teacher-more-group summary {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 12px;
    cursor: pointer;
    color: var(--ui-text);
    font-weight: 600;
    list-style: none;
}
.teacher-more-group summary::-webkit-details-marker { display: none; }
.teacher-more-group summary > i:first-child { color: var(--ui-accent); font-size: 20px; }
.teacher-more-group summary span { flex: 1; }
.teacher-more-group summary small {
    min-width: 22px;
    color: var(--ui-text-muted);
    font-size: var(--type-badge-size);
    font-weight: 500;
    text-align: center;
}
.teacher-more-group summary > i:last-child {
    color: var(--ui-accent);
    font-size: 19px;
    transition: transform .18s ease;
}
.teacher-more-group[open] summary {
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-accent-soft);
}
.teacher-more-group[open] summary > i:last-child { transform: rotate(180deg); }
.teacher-more-group-items {
    display: grid;
    gap: 3px;
    padding: 5px;
}
.mobile-menu-backdrop { display:none; }
.mobile-menu-heading { display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--ui-border); }
.mobile-menu-heading h2 { margin:0; font-size:18px; }
.mobile-menu-heading button { width:44px; height:44px; padding:0; font-size:28px; background:var(--ui-input-bg); border:1px solid var(--ui-border); border-radius:8px; }
.mobile-menu-content { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:10px; }
.mobile-menu-content > .tab-btn { min-height:48px; margin-bottom:6px; white-space:normal; }
body:not([data-user-role="teacher"]) #header-ai-actions { display:none !important; }
@media (max-width:1024px) {
    body.teacher-more-open, body.student-more-open { overflow:hidden; }
    .teacher-more-menu.open .mobile-menu-backdrop { display:block; position:fixed; inset:0; z-index:1400; background:var(--ui-modal-backdrop); }
    #teacher-more-panel, #student-more-panel {
        position:fixed; top:auto; bottom:var(--mobile-menu-bottom, 90px); left:10px; right:10px;
        min-width:0; max-height:calc(100dvh - var(--mobile-menu-bottom, 90px) - max(12px, env(safe-area-inset-top)));
        padding:0; gap:0; overflow:hidden; z-index:1600;
    }
    #teacher-more-panel .teacher-more-group summary { min-height:48px; }
    #teacher-more-panel .teacher-more-group-items .tab-btn { min-height:46px; padding:10px 12px; white-space:normal; }
    #teacher-more-panel .teacher-more-group[open] summary { background:var(--ui-surface-alt); }
    body.student-more-open .support-btn, body.student-more-open .quick-scroll-btn { display:none; }
    .teacher-mobile-nav, .student-mobile-nav { bottom:max(10px, env(safe-area-inset-bottom)); }
}

.student-desktop-tab-menu {
    overflow-x: visible;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
}
.student-desktop-tab-menu .tab-btn {
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
    line-height: 1.2;
}

.teacher-more-section-title {
    padding: 10px 12px 5px;
    color: var(--ui-text-muted);
    font-size: var(--type-badge-size);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.teacher-more-section-title:not(:first-child) {
    margin-top: 5px;
    border-top: 1px solid var(--ui-border);
}

.teacher-workspace {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.student-workspace {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.teacher-sidebar {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--ui-scrollbar-thumb) transparent;
    background: var(--ui-sidebar);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 14px;
}
.teacher-sidebar-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.teacher-sidebar-scroll::-webkit-scrollbar { width: 7px; }
.teacher-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.teacher-sidebar-scroll::-webkit-scrollbar-thumb {
    background: var(--ui-scrollbar-thumb);
    border-radius: 999px;
}
.teacher-sidebar-scroll::-webkit-scrollbar-thumb:hover { background: var(--ui-scrollbar-thumb-hover); }
.teacher-sidebar::-webkit-scrollbar {
    width: 7px;
}
.teacher-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.teacher-sidebar::-webkit-scrollbar-thumb {
    background: var(--ui-scrollbar-thumb);
    border-radius: 999px;
}
.teacher-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--ui-scrollbar-thumb-hover);
}
.student-sidebar {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--ui-scrollbar-thumb) transparent;
    background: var(--ui-sidebar);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 14px;
}
@media (min-width: 761px) {
    .teacher-sidebar,
    .student-sidebar {
        height: calc(100dvh - 150px);
        max-height: calc(100dvh - 150px);
        min-height: 0;
        scrollbar-gutter: stable;
    }
}
.student-sidebar::-webkit-scrollbar {
    width: 7px;
}
.student-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.student-sidebar::-webkit-scrollbar-thumb {
    background: var(--ui-scrollbar-thumb);
    border-radius: 999px;
}
.student-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--ui-scrollbar-thumb-hover);
}
.teacher-sidebar-title {
    color: var(--ui-text);
    font-weight: 600;
    padding: 8px 10px 14px;
    border-bottom: 1px solid var(--ui-border);
    margin-bottom: 12px;
}
.student-sidebar-title {
    color: var(--ui-text);
    font-weight: 600;
    padding: 8px 10px 14px;
    border-bottom: 1px solid var(--ui-border);
    margin-bottom: 12px;
}
.teacher-nav-section {
    margin: 0 0 8px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--ui-border);
}
.student-nav-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}
.teacher-nav-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--ui-text-muted);
    list-style: none;
    user-select: none;
}
.teacher-nav-group summary::-webkit-details-marker { display: none; }
.teacher-nav-group summary > span {
    color: var(--ui-text-muted);
    font-size: var(--type-badge-size);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.teacher-nav-group summary > i {
    color: var(--ui-accent);
    font-size: 18px;
    transition: transform .18s ease;
}
.teacher-nav-group[open] summary {
    color: var(--ui-text);
    background: var(--ui-accent-soft);
    border-radius: 6px;
}
.teacher-nav-group[open] summary > i { transform: rotate(180deg); }
.teacher-nav-group > .tab-btn { margin-top: 4px; }
.teacher-nav-group > summary + .tab-btn { margin-top: 2px; }
.teacher-nav-group:last-child { margin-bottom: 0; border-bottom: 0; }
}
.student-nav-section > span {
    color: var(--ui-text-muted);
    font-size: var(--type-badge-size);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 8px 10px 4px;
}
.teacher-sidebar .tab-btn {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 11px 10px;
    color: var(--ui-text);
    text-align: left;
}
.student-sidebar .tab-btn {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 11px 10px;
    color: var(--ui-text);
    text-align: left;
}
.teacher-sidebar .tab-btn.active {
    background: var(--ui-accent-soft);
    border-color: var(--ui-accent);
    color: var(--ui-accent);
}
.student-sidebar .tab-btn.active {
    background: var(--ui-accent-soft);
    border-color: var(--ui-accent);
    color: var(--ui-accent);
}
.teacher-main {
    min-width: 0;
}
.student-main {
    min-width: 0;
}
.teacher-mobile-nav {
    display: none;
}
.student-mobile-nav {
    display: none;
}
.student-more-menu {
    display: none;
}
@media (max-width: 1024px) {
    #student-dashboard > .student-more-menu .teacher-more-dropdown {
        position: fixed;
        right: 12px;
        left: 12px;
        bottom: 86px;
        top: auto;
        min-width: 0;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
    }

    body:has(#student-dashboard.active-dashboard) .support-btn {
        display: none;
    }
}
.teacher-workspace > .teacher-more-menu {
    display: none;
}
.nav-badge,
.profile-badge {
    background: var(--ui-danger-bg);
    color: var(--ui-danger-text);
    font-size: var(--type-badge-size);
    line-height: 1;
    padding: 4px 7px;
    border-radius: 999px;
    margin-left: auto;
}
#hw-badge,
.hw-badge-mobile,
.teacher-exams-badge,
.student-payment-badge,
.student-connection-badge,
.student-more-attention-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 22px;
    min-height: 22px;
    background: var(--ui-danger-solid, #C43C4C);
    color: var(--ui-on-danger);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
#hw-badge[hidden],
.hw-badge-mobile[hidden] {
    display: none;
}
.student-nav-section > summary { display:flex; align-items:center; gap:8px; }
.achievements-module {
    background: var(--ui-surface);
    border: 1px solid var(--ui-warning-border);
    border-radius: 8px;
    padding: 0;
    margin-bottom: 20px;
}
.achievements-module summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    color: var(--ui-text);
    font-weight: 600;
    list-style: none;
}
.achievements-module summary::-webkit-details-marker {
    display: none;
}
.achievements-module summary span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.achievements-module summary i {
    color: var(--ui-warning-text);
    font-size: 22px;
}
.achievements-module summary small {
    color: var(--ui-text-muted);
    font-weight: 600;
}
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 0 18px 18px;
}

.student-stats-panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}
.student-stats-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}
.student-stats-head h3 {
    margin: 0 0 6px;
    color: var(--ui-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.student-stats-head h3 i {
    color: var(--ui-accent);
}
.student-stats-head p {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: 13px;
}
.student-stats-score {
    min-width: 74px;
    text-align: center;
    color: var(--ui-success-text);
    font-size: 28px;
    font-weight: 600;
}
.student-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.student-stats-grid div {
    background: var(--ui-surface-alt);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 12px 10px;
}
.student-stats-grid b {
    display: block;
    color: var(--ui-text);
    font-size: 20px;
    margin-bottom: 4px;
}
.student-stats-grid span,
.student-course-row span,
.learning-muted,
.learning-list-item small {
    color: var(--ui-text-muted);
    font-size: 12px;
}
.student-course-progress {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}
.student-stats-details {
    margin-top: 18px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface-alt);
    overflow: hidden;
}
.student-stats-details > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    color: var(--ui-text);
    font-weight: 600;
}
.student-stats-details > summary::-webkit-details-marker { display: none; }
.student-stats-details > summary small { color: var(--ui-accent); font-weight: 600; }
.student-stats-details[open] > summary { border-bottom: 1px solid var(--ui-border); }
.student-stats-details > .student-course-progress,
.student-stats-details > .student-learning-columns { margin: 16px; }
.student-course-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
    background: var(--ui-accent-soft);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 12px;
}
.student-course-row b {
    display: block;
    color: var(--ui-text);
    margin-bottom: 4px;
}
.student-course-row strong {
    color: var(--ui-accent);
}
.student-course-row .progress-bar {
    grid-column: 1 / -1;
    height: 8px;
}
.student-course-row .progress-bar div,
.student-stats-panel .progress-bar div {
    background: var(--ui-accent);
    height: 100%;
}
.student-learning-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.student-learning-columns h4 {
    margin: 0 0 10px;
    color: var(--ui-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.student-learning-columns h4 i {
    color: var(--ui-accent);
}
.learning-list-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    margin-bottom: 8px;
    padding: 12px;
    background: var(--ui-surface-alt);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    box-shadow: none;
}
.learning-list-item.danger {
    border-color: var(--ui-danger-border);
}
.learning-list-item.success {
    border-color: var(--ui-success-border);
}
.learning-list-item b {
    display: block;
    color: var(--ui-text);
    margin-bottom: 3px;
}
.learning-list-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    color: var(--ui-text-muted);
    font-size: 12px;
    white-space: nowrap;
}
.learning-item-comment {
    margin-top: 6px;
    color: var(--ui-text);
    font-size: 12px;
}
.learning-empty-state {
    border: 1px dashed var(--ui-accent);
    border-radius: 8px;
    padding: 14px;
    background: var(--ui-accent-soft);
}
.learning-empty-state b {
    display: block;
    color: var(--ui-text);
    margin-bottom: 6px;
}
.learning-empty-state span {
    color: var(--ui-text-muted);
    font-size: 13px;
}

/* === ЛИЧНОЕ ДЕЛО УЧЕНИКА === */
.profile-section,
.student-profile-hero {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 18px;
}
.profile-section-heading,
.student-profile-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.profile-section-heading h3,
.student-profile-hero h2 {
    margin: 0 0 6px;
    color: var(--ui-text);
}
.profile-section-heading h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 19px;
}
.profile-section-heading h3 i {
    color: var(--ui-accent);
}
.profile-section-heading p,
.student-profile-hero-head p {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: 13px;
    line-height: 1.45;
}
.profile-section-count {
    min-width: 32px;
    padding: 6px 9px;
    border: 1px solid var(--ui-warning-border);
    border-radius: 999px;
    color: var(--ui-warning-text);
    font-weight: 600;
    text-align: center;
}
.student-profile-hero {
    border-color: var(--ui-accent);
    background:
        linear-gradient(135deg, var(--ui-accent-soft), transparent 48%),
        var(--ui-surface);
}
.student-profile-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--ui-accent);
    font-size: var(--type-badge-size);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.student-profile-last-seen {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    color: var(--ui-text-muted);
    font-size: 12px;
}
.student-profile-main-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.student-profile-metric {
    min-height: 84px;
    padding: 14px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface-alt);
}
.student-profile-metric b {
    display: block;
    margin-bottom: 7px;
    color: var(--ui-text);
    font-size: 27px;
    line-height: 1;
}
.student-profile-metric span {
    color: var(--ui-text-muted);
    font-size: 12px;
}
.student-profile-metric.primary { border-color: var(--ui-accent); }
.student-profile-metric.primary b { color: var(--ui-accent); }
.student-profile-metric.success { border-color: var(--ui-success-border); }
.student-profile-metric.success b { color: var(--ui-success-text); }
.student-profile-metric.warning { border-color: var(--ui-warning-border); }
.student-profile-metric.warning b { color: var(--ui-warning-text); }
.student-profile-activity {
    padding: 13px 14px 10px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface-alt);
}
.student-profile-activity > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--ui-text);
    font-size: 13px;
}
.student-profile-activity > div:first-child span {
    color: var(--ui-text-muted);
    font-size: 12px;
}
.student-activity-sparkline {
    display: grid;
    grid-template-columns: repeat(14, minmax(5px, 1fr));
    align-items: end;
    gap: 5px;
    height: 62px;
    margin-top: 8px;
}
.student-activity-sparkline > div {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 100%;
}
.student-activity-sparkline i {
    width: 100%;
    min-height: 3px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, var(--ui-success-text), var(--ui-accent));
    opacity: 0.75;
}
.student-activity-sparkline strong {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--ui-accent);
    font-size: var(--type-badge-size);
}
.student-attention-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.student-attention-list .learning-list-item {
    margin: 0;
}
.student-course-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.student-course-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    width: 100%;
    padding: 15px;
    text-align: left;
    background: var(--ui-surface-alt);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    box-shadow: none;
}
.student-course-card:hover {
    border-color: var(--ui-accent);
    background: var(--ui-surface-alt);
}
.student-course-card-title {
    color: var(--ui-text);
    font-weight: 600;
}
.student-course-card-meta {
    grid-column: 1 / -1;
    color: var(--ui-text-muted);
    font-size: 12px;
}
.student-course-card-progress {
    grid-column: 1;
    display: block;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ui-bg);
}
.student-course-card-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ui-accent), var(--ui-success-text));
}
.student-course-card strong {
    grid-column: 2;
    grid-row: 1;
    color: var(--ui-accent);
}
.student-learning-more,
.student-profile-tools {
    margin-top: 14px;
    border-top: 1px solid var(--ui-border);
}
.student-learning-more > summary,
.student-profile-tools > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 2px 0;
    color: var(--ui-text);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.student-learning-more > summary::-webkit-details-marker,
.student-profile-tools > summary::-webkit-details-marker {
    display: none;
}
.student-learning-more > summary span {
    display: flex;
    align-items: center;
    gap: 8px;
}
.student-learning-more > summary small {
    color: var(--ui-accent);
}
.student-learning-more .student-learning-columns {
    margin-top: 16px;
}
.achievements-module {
    padding: 20px;
}
.achievements-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    padding: 0;
}
.achievement-card {
    display: flex;
    flex-direction: column;
    min-height: 138px;
    padding: 14px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-input-bg);
}
.achievement-card.unlocked { border-color: var(--ui-success-border); }
.achievement-card.max { border-color: var(--ui-warning-border); }
.achievement-card.locked { opacity: 0.68; }
.achievement-card-head,
.achievement-card-progress {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.achievement-card-head h4 {
    margin: 0;
    color: var(--ui-text);
    font-size: 15px;
}
.achievement-card-head > span {
    flex: 0 0 auto;
    padding: 3px 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: var(--ui-accent);
    font-size: var(--type-badge-size);
    font-weight: 600;
}
.achievement-card p {
    flex: 1;
    margin: 9px 0 12px;
    color: var(--ui-text-muted);
    font-size: 12px;
    line-height: 1.4;
}
.achievement-card-progress {
    margin-bottom: 6px;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
}
.achievement-card-progress strong { color: var(--ui-accent); }
.achievement-card .progress-bar { height: 6px; }
.achievement-card .progress-bar div {
    height: 100%;
    background: linear-gradient(90deg, var(--ui-accent), var(--ui-success-text));
}
.student-profile-lower-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.student-level-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.student-level-label {
    display: block;
    margin-bottom: 4px;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
}
.student-level-main strong {
    color: var(--ui-accent);
    font-size: 22px;
}
.student-level-xp {
    color: var(--ui-text-muted);
    font-size: 12px;
}
.student-level-progress { height: 8px; }
.student-level-progress > div {
    height: 100%;
    background: linear-gradient(90deg, var(--ui-accent), var(--ui-success-text));
}

.quest-archive-module { margin-top: 22px; }
.quest-archive-link { color: var(--primary); font-size: 12px; text-decoration: none; white-space: nowrap; }
.quest-archive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 10px; }
.quest-archive-card { min-height: 142px; padding: 15px; border: 1px solid rgba(0, 240, 255, .2); border-radius: 8px; background: linear-gradient(145deg, rgba(14, 27, 39, .92), rgba(9, 15, 24, .92)); }
.quest-archive-card.unlocked { border-color: rgba(218, 175, 105, .56); box-shadow: inset 0 0 20px rgba(218, 175, 105, .06); }
.quest-archive-card.locked { opacity: .56; filter: grayscale(.35); }
.quest-archive-card > span { color: var(--text-muted); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.quest-archive-card h4 { margin: 10px 0 6px; color: var(--text-bright); font-family: Georgia, serif; font-size: 21px; line-height: 1; }
.quest-archive-card p { min-height: 34px; margin: 0; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.quest-archive-card strong { display: block; margin-top: 10px; color: var(--primary); font-size: 12px; }
.student-referral-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 8px;
}
.student-referral-row input,
.student-referral-row button {
    margin: 0;
}
.student-referral-row button {
    width: 46px;
    padding: 0;
}
.student-profile-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 12px;
    align-items: end;
}
.student-profile-fields label > span {
    display: block;
    margin-bottom: 6px;
    color: var(--ui-text);
    font-size: 12px;
    font-weight: 600;
}
.student-profile-fields input {
    margin: 0;
}
.student-profile-fields small {
    display: block;
    min-height: 16px;
    margin-top: 5px;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
}
.student-profile-save {
    min-height: 48px;
    margin-bottom: 21px;
    white-space: nowrap;
}
.student-notification-settings {
    margin-top: 18px;
}
.student-profile-tools > summary {
    justify-content: flex-start;
    color: var(--ui-text-muted);
    font-size: 13px;
}
.student-profile-tools > button {
    margin-top: 12px;
    box-shadow: none;
}

@media (max-width: 760px) {
    .profile-section,
    .student-profile-hero {
        padding: 15px;
        margin-bottom: 14px;
    }
    .student-profile-hero-head,
    .profile-section-heading {
        flex-direction: column;
        gap: 9px;
    }
    .student-profile-last-seen {
        align-self: flex-start;
    }
    .student-profile-main-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }
    .student-profile-metric {
        min-height: 76px;
        padding: 11px 8px;
    }
    .student-profile-metric b {
        font-size: 20px;
    }
    .student-profile-metric span {
        font-size: var(--type-badge-size);
        line-height: 1.25;
    }
    .student-profile-activity > div:first-child {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
    .student-activity-sparkline {
        gap: 3px;
        height: 54px;
    }
    .student-attention-list,
    .student-profile-lower-grid,
    .student-learning-columns,
    .student-profile-fields {
        grid-template-columns: 1fr;
    }
    .student-course-card-grid,
    .achievements-grid {
        grid-template-columns: 1fr;
    }
    .student-profile-save {
        width: 100%;
        margin: 0;
    }
    .learning-list-item {
        flex-direction: column;
    }
    .learning-list-meta {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        white-space: normal;
    }
}

/* === АВТОРИЗАЦИЯ === */
.auth-box { 
    position: relative; max-width: 400px; margin: 50px auto; 
    background: var(--ui-surface); padding: var(--space-6); border-radius: var(--radius-surface);
    border: 1px solid var(--ui-border); text-align: center;
}
.auth-brand-logo { max-width:150px; margin-bottom:var(--space-5); border-radius:var(--radius-control); }
.auth-box > h2,.auth-flow-dialog h2 { margin-top:0; }
.auth-role-choices { border:0; padding:0; margin:0 0 22px; display:grid; gap:8px; text-align:left; min-width:0; }
.auth-box:has(#auth-register.active) .auth-brand-logo, #tg-role-selector .auth-brand-logo { width:88px; margin-bottom:16px; }
.auth-role-choices legend { font-weight:650; font-size:17px; line-height:1.4; margin-bottom:12px; }
.auth-role-option { display:flex; align-items:center; gap:12px; border:1px solid var(--ui-control-border); border-radius:8px; background:var(--ui-input-bg); padding:12px; cursor:pointer; }
.auth-role-option input[type="radio"] { width:18px; height:18px; flex:0 0 18px; margin:0; accent-color:var(--ui-accent); }
.auth-role-option > i { font-size:26px; color:var(--ui-text-muted); }
.auth-role-option span { min-width:0; display:grid; gap:3px; }
.auth-role-option b { font-size:15px; }
.auth-role-option small { font-size:12px; line-height:1.45; color:var(--ui-text-muted); }
.auth-role-option:has(input:checked) { border-color:var(--ui-accent); background:var(--ui-accent-soft); }
.auth-role-option:has(input:checked) > i { color:var(--ui-accent); }
.auth-role-option:has(input:focus-visible) { outline:2px solid var(--ui-accent); outline-offset:2px; }
.auth-role-option:has(input:disabled) { opacity:.5; cursor:not-allowed; }
[data-registration-scope] [hidden], .auth-parent-hidden { display:none !important; }
.auth-parent-connect { text-align:left; }
.auth-parent-connect h3 { margin:0 0 8px; font-size:18px; }
.auth-parent-connect p { color:var(--ui-text-muted); font-size:14px; line-height:1.6; }
.auth-parent-connect input { border:1px solid var(--ui-control-border); border-radius:8px; background:var(--ui-input-bg); }
.auth-parent-connect input:focus { outline:none; border-color:var(--ui-accent); }
.auth-parent-connect [role="status"]:empty { display:none; }
.auth-parent-connect [role="status"] { color:var(--ui-warning-text); }
.auth-parent-connect details { margin-top:18px; border-top:1px solid var(--ui-border); padding-top:14px; }
.auth-parent-connect summary { cursor:pointer; font-size:14px; font-weight:600; }
.auth-parent-connect details a, .auth-parent-connect details button { display:block; margin-top:12px; font-size:14px; color:var(--ui-accent); }
.auth-parent-connect details button { padding:0; background:none; border:0; }
.auth-parent-connect .auth-parent-note { font-size:12px; }
.auth-intro { margin:0 0 var(--space-5); color:var(--ui-text-muted); font-size:var(--type-control-size); line-height:var(--type-control-line); }
.auth-tab-menu { justify-content:center; }
.auth-consent { padding:0; border:0; background:transparent; }
.auth-consent-spaced { margin-bottom:var(--space-5); }
.auth-consent > span { color:var(--ui-text-muted); font-size:var(--type-badge-size); line-height:var(--type-badge-line); }
.auth-consent a { color:var(--ui-accent); }
.auth-primary-action { width:100%; min-height:44px; padding:12px 16px; }
.auth-primary-action-spaced { margin-bottom:var(--space-3); }
.auth-secondary-link { display:block; min-height:44px; margin-top:var(--space-3); padding:10px; color:var(--ui-accent); font-size:var(--type-meta-size); line-height:var(--type-meta-line); text-align:center; text-decoration:none; }
.auth-project-link { margin-top:var(--space-4); }
.auth-demo-box { display:none; margin-top:var(--space-5); padding:var(--space-4); border:1px dashed var(--ui-border); border-radius:var(--radius-control); background:var(--ui-bg); }
.auth-demo-box > div { margin-bottom:var(--space-2); color:var(--ui-text-muted); font-size:var(--type-meta-size); line-height:var(--type-meta-line); text-align:center; }
.auth-divider { margin:var(--space-5) 0; border:0; border-top:1px solid var(--ui-border); }
.auth-flow-dialog { max-width:520px; }
.auth-flow-copy { color:var(--ui-text-muted); line-height:var(--type-body-line); }
.auth-reset-login-mode { margin-bottom:var(--space-3); }
.auth-honeypot { position:absolute; left:-9999px; opacity:0; }
.auth-challenge-row { display:grid; grid-template-columns:1fr 120px; align-items:center; gap:var(--space-2); margin-bottom:var(--space-3); }
#reset-challenge-question { min-height:44px; padding:12px; border:1px solid var(--ui-control-border); border-radius:var(--radius-control); background:var(--ui-input-bg); color:var(--ui-text); }
#reset-challenge-answer { margin:0; }
#reset-message { color:var(--ui-accent); font-size:var(--type-meta-size); line-height:var(--type-meta-line); }
#reset-step-confirm { display:none; margin-top:18px; padding-top:18px; border-top:1px solid var(--ui-border); }
.auth-field-label { display:block; margin-bottom:var(--space-2); color:var(--ui-text); font-size:var(--type-label-size); font-weight:500; line-height:var(--type-label-line); text-align:left; }
@media (max-width:760px) { .auth-box { margin:var(--space-5) auto; padding:var(--space-4); }.auth-challenge-row { grid-template-columns:1fr; } }
.tg-login-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    color: var(--ui-brand-telegram); text-decoration: none; font-weight: 600;
    font-size: 13px; margin-top: 10px; transition: 0.2s; cursor: pointer;
    width: auto; min-height:44px; box-sizing: border-box;
    background: transparent; border: 0; padding: 8px;
}
.auth-temporary-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid var(--ui-warning-border);
    border-radius: 8px;
    color: var(--ui-warning-text);
    background: var(--ui-warning-bg);
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}
.auth-temporary-notice i {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 18px;
}
.telegram-required-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid var(--ui-info-border);
    border-radius: 8px;
    background: var(--ui-info-bg);
    box-shadow: none;
}
.telegram-required-notice > div {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
.telegram-required-notice > div > i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--ui-info-text);
    font-size: 25px;
}
.telegram-required-notice b,
.telegram-required-notice span {
    display: block;
}
.telegram-required-notice b {
    color: var(--ui-text);
    font-size: 15px;
    margin-bottom: 4px;
}
.telegram-required-notice span {
    color: var(--ui-text);
    font-size: 13px;
    line-height: 1.45;
}
.telegram-required-notice button {
    flex: 0 0 auto;
    padding: 10px 13px;
}
@media (max-width: 1024px) {
    .telegram-required-notice {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 14px;
    }
    .telegram-required-notice button {
        width: 100%;
    }
}
.login-captcha-wrap {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--ui-warning-border);
    border-radius: 10px;
    background: var(--ui-warning-bg);
    text-align: left;
}
.login-captcha-wrap p {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0 0 10px;
    color: var(--ui-warning-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}
.login-captcha-question {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin-bottom: 10px;
    border: 1px solid var(--ui-info-border);
    border-radius: 10px;
    background: var(--ui-info-bg);
    color: var(--ui-text);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.login-captcha-row {
    display: grid;
    grid-template-columns: 1fr 48px;
    gap: 8px;
}
.login-captcha-row input {
    margin: 0;
}
.login-captcha-row button {
    min-width: 0;
    padding: 0;
    border-color: var(--ui-info-border);
}
.social-login-block {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin: 22px 0 4px;
}
.social-login-block > span {
    color: var(--ui-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.social-login-stack {
    width: min(230px, 100%);
    display: grid;
    gap: 8px;
    justify-items: center;
}
.social-login-row {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    text-shadow: none;
}
.social-login-row:hover,
.social-login-row:focus-visible {
    transform: none;
    text-shadow: none;
}
.social-login-yandex {
    color: var(--ui-text);
    background: var(--ui-brand-yandex-bg);
    border-color: var(--ui-brand-yandex-border);
}
.social-login-vk {
    color: var(--ui-text);
    background: var(--ui-brand-vk-bg);
    border-color: var(--ui-brand-vk-border);
}
.social-login-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    color: var(--ui-on-danger);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}
.social-login-yandex .social-login-mark {
    background: var(--ui-brand-yandex);
}
.social-login-vk .social-login-mark {
    background: var(--ui-brand-vk);
}
.telegram-widget-box,
.telegram-link-widget {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.telegram-widget-box iframe {
    border-radius: 999px;
}
.telegram-widget-fallback {
    width: 100%;
    max-width: 260px;
    min-height: 44px;
    border-color: var(--ui-brand-telegram-border);
    color: var(--ui-brand-telegram);
    background: var(--ui-brand-telegram-bg);
    box-shadow: none;
}
.telegram-widget-hint {
    display: block;
    width: 100%;
    margin-top: 6px;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: 1.35;
    text-align: center;
}
.telegram-widget-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid var(--ui-brand-telegram-border);
    border-radius: 50%;
    color: var(--ui-brand-telegram);
    font-size: 0;
    background: var(--ui-brand-telegram-bg);
}
.telegram-widget-loading::before {
    content: "\ebdc";
    font-family: boxicons;
    font-size: 22px;
}
.telegram-link-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.telegram-bot-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid var(--ui-brand-telegram-border);
    border-radius: 10px;
    background: var(--ui-brand-telegram-bg);
    color: var(--ui-brand-telegram);
    font-weight: 600;
    box-shadow: none;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.telegram-bot-link-btn:hover,
.telegram-bot-link-btn:focus-visible {
    border-color: var(--ui-brand-telegram);
    box-shadow: var(--ui-focus-ring);
    transform: none;
    outline: none;
}
.telegram-bot-link-btn.compact {
    margin-top: 10px;
}
.link-button.warning-link-button {
    margin-left: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ui-warning-text);
    text-decoration: underline;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* === СТАТИСТИКА / БЕЙДЖИ === */
.stats-badge { 
    background: transparent; border: 1px solid var(--ui-accent); color: var(--ui-accent);
    min-height: 44px; padding: 8px 15px; border-radius: var(--radius-control); font-weight: 600; margin-bottom: 20px;
    display: inline-flex; align-items: center; gap: 8px; font-size: 14px; 
    text-shadow: none; box-shadow: none;
}
#student-top-stats { cursor:pointer; transition:border-color var(--motion-fast) var(--motion-ease),background var(--motion-fast) var(--motion-ease); }
#student-top-stats > i { color:var(--ui-accent); }
#top-badge-rank { font-weight:600; letter-spacing:.04em; }
#top-badge-xp { color:var(--ui-text); font-weight:600; font-variant-numeric:tabular-nums; }
.price-tag { font-weight: 600; color: var(--ui-success-text); font-size: 20px; margin-top: 0; margin-bottom: 15px; }

.classroom-start-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.9fr) minmax(320px, 1.1fr);
    gap: 24px;
    align-items: start;
}
.classroom-template-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 16px;
}
.classroom-mode-tabs {
    display: none;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.classroom-mode-tabs button {
    flex: 1;
    min-width: 150px;
    padding: 12px;
}
.classroom-mode-tabs button.active {
    color: var(--ui-on-accent);
    background: var(--ui-accent);
    border-color: var(--ui-accent);
}
.classroom-panel-section {
    display: none;
}
.classroom-panel-section.active {
    display: block;
}
.classroom-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1200;
    max-width: none !important;
    padding: 0 !important;
    overflow: hidden;
    background: var(--ui-bg);
}
.classroom-fullscreen.active-dashboard {
    display: block;
}
.classroom-topbar,
.classroom-floating-toolbar,
.classroom-toolbar-toggle,
.classroom-side,
.classroom-hint {
    box-sizing: border-box;
    position: absolute;
    z-index: 2;
    background: color-mix(in srgb, var(--ui-surface) 88%, transparent);
    border: 1px solid var(--ui-border);
    backdrop-filter: blur(12px);
    box-shadow: var(--ui-shadow-float);
}
.classroom-floating-toolbar,
.classroom-toolbar-toggle {
    z-index: 30;
}
.classroom-topbar {
    top: 18px;
    left: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 8px;
}
.classroom-topbar h2 {
    margin: 0;
    font-size: 18px;
    color: var(--ui-text);
}
.classroom-topbar span {
    display: block;
    color: var(--ui-text-muted);
    font-size: 12px;
}
.classroom-floating-toolbar {
    left: 18px;
    right: 18px;
    top: 92px;
    transform: none;
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    max-width: none;
    padding: 10px;
    border-radius: 10px;
    overflow: visible;
    scrollbar-width: thin;
    scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-input-bg);
}
.classroom-floating-toolbar::-webkit-scrollbar {
    height: 6px;
}
.classroom-floating-toolbar::-webkit-scrollbar-track {
    background: var(--ui-input-bg);
    border-radius: 999px;
}
.classroom-floating-toolbar::-webkit-scrollbar-thumb {
    background: var(--ui-scrollbar-thumb);
    border-radius: 999px;
}
.classroom-floating-toolbar.is-collapsed {
    display: none;
}
.classroom-toolbar-toggle {
    position: absolute;
    z-index: 3;
    right: 18px;
    top: 92px;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 12px;
    display: none;
    place-items: center;
}
.classroom-toolbar-toggle.is-visible {
    display: grid;
}
.classroom-floating-toolbar button,
.classroom-toolbar-toggle,
.classroom-topbar button {
    padding: 10px 12px;
    font-size: 13px;
    flex: 0 0 auto;
}
.classroom-toolbar-menu { position:relative; flex:0 0 auto; }
.classroom-toolbar-menu summary {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid var(--ui-border);
    border-radius:7px;
    background:var(--ui-input-bg);
    color:var(--ui-text);
    cursor:pointer;
    list-style:none;
}
.classroom-toolbar-menu summary::-webkit-details-marker { display:none; }
.classroom-toolbar-menu summary::marker { display:none; }
.classroom-toolbar-menu[open] summary { border-color:var(--ui-accent); color:var(--ui-accent); }
.classroom-toolbar-menu-popover {
    position:fixed;
    top:var(--classroom-menu-top, 140px);
    right:var(--classroom-menu-right, 18px);
    z-index:8;
    display:grid;
    grid-template-columns:repeat(4, minmax(40px, 1fr));
    gap:8px;
    width:min(430px, calc(100vw - 56px));
    padding:10px;
    border:1px solid var(--ui-border);
    border-radius:8px;
    background:var(--ui-surface);
    box-shadow:var(--ui-shadow-float);
    max-height:var(--classroom-menu-max-height, calc(100dvh - 116px));
    overflow-y:auto;
}
.classroom-toolbar-menu.opens-up .classroom-toolbar-menu-popover {
    top:auto;
    bottom:var(--classroom-menu-bottom, 12px);
}
.classroom-toolbar-menu-popover > select { grid-column:span 2; min-width:0; margin:0; }
.classroom-toolbar-menu-popover > button,
.classroom-toolbar-menu-popover .classroom-brush-group,
.classroom-toolbar-menu-popover .classroom-fill-group { min-width:0; margin:0; }
.classroom-toolbar-menu-popover .classroom-brush-group { grid-column:span 2; }
.classroom-toolbar-menu-popover .classroom-fill-group { grid-column:span 2; justify-content:flex-start; }
@media (min-width:1025px) and (max-height:760px) {
    .classroom-toolbar-menu-popover {
        max-height:var(--classroom-menu-max-height, calc(100dvh - 108px));
    }
}
.classroom-guide-focus { position:relative !important; z-index:101 !important; box-shadow:0 0 0 3px var(--ui-accent),0 0 0 9px var(--ui-accent-soft),var(--ui-shadow-float) !important; }
.classroom-guide-overlay { position:absolute;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;padding:24px;background:var(--ui-modal-backdrop); }
.classroom-guide-card { width:min(540px,100%);padding:20px;border:1px solid var(--ui-accent);border-radius:8px;background:var(--ui-surface);box-shadow:var(--ui-shadow-float); }
.classroom-guide-kicker { display:flex;justify-content:space-between;gap:10px;color:var(--ui-accent);font-size:var(--type-badge-size);font-weight:600;text-transform:uppercase;letter-spacing:.04em; }.classroom-guide-card h3 { margin:8px 0;color:var(--ui-text);font-size:var(--type-section-size);font-weight:600;line-height:var(--type-section-line); }.classroom-guide-card p { margin:0;color:var(--ui-text-muted);line-height:var(--type-body-line); }.classroom-guide-actions { display:flex;justify-content:space-between;gap:10px;margin-top:18px; }.classroom-guide-actions > div { display:flex;gap:8px; }.classroom-guide-actions button { min-height:44px;padding:10px 14px; }
.classroom-topbar #classroom-video-btn.is-active {
    border-color: var(--ui-accent);
    color: var(--ui-accent);
    box-shadow: var(--ui-focus-ring);
}
.classroom-video-panel {
    position: absolute;
    z-index: 5;
    top: 92px;
    right: 18px;
    width: min(430px, calc(100vw - 36px));
    max-height: calc(100vh - 176px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ui-accent);
    border-radius: 8px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-float);
    backdrop-filter: blur(12px);
}
.classroom-video-panel[hidden] { display: none; }
.classroom-video-panel-header,
.classroom-video-panel-actions,
.classroom-video-controls {
    display: flex;
    align-items: center;
}
.classroom-video-panel-header {
    flex: 0 0 auto;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--ui-border);
    cursor: grab;
    touch-action: none;
}
.classroom-video-panel-header:active { cursor: grabbing; }
.classroom-webinar-only .classroom-video-panel-copy { display:none; }
.classroom-webinar-only .classroom-video-panel-header { padding:7px 10px; cursor:default; touch-action:auto; }
.classroom-video-panel.is-dragged { right:auto !important; bottom:auto !important; }
#classroom-canvas.is-file-dragover { outline:3px dashed var(--ui-accent); outline-offset:-14px; cursor:copy !important; }
.classroom-video-eyebrow {
    display: block;
    color: var(--ui-accent);
    font-size: var(--type-badge-size);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.classroom-video-panel-header strong {
    display: block;
    margin-top: 3px;
    color: var(--ui-text);
    font-size: 13px;
}
.classroom-video-panel-actions { gap: 7px; }
.classroom-video-panel-actions button,
.classroom-video-controls button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
}
.classroom-video-panel-actions #classroom-video-hand-summary {
    width: auto;
    min-width: 44px;
    padding: 0 8px;
    gap: 4px;
    color: var(--ui-warning-text);
    border-color: var(--ui-warning-border);
    background: var(--ui-warning-bg);
}
.classroom-video-panel-actions #classroom-video-hand-summary b { font-size: 12px; }
.classroom-video-duplicate { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--ui-warning-border); color:var(--ui-warning-text); background:var(--ui-warning-bg); font-size:12px; line-height:1.4; }
.classroom-video-duplicate[hidden] { display:none; }
.classroom-video-duplicate span { min-width:0; }
.classroom-video-duplicate i { margin-right:5px; font-size:16px; vertical-align:-2px; }
.classroom-video-duplicate button { flex:0 0 auto; min-height:44px; padding:8px 12px; border:1px solid var(--ui-warning-border); border-radius:var(--radius-control); color:var(--ui-warning-text); background:var(--ui-warning-bg); font:inherit; font-weight:600; cursor:pointer; }
.classroom-video-duplicate button:disabled { opacity:.6; cursor:wait; }
.classroom-video-controls button.is-unavailable { opacity:.55;filter:saturate(.45); }
.classroom-video-screen-help { margin:0;padding:0 12px 12px;color:var(--ui-warning-text);font-size:12px;line-height:1.45; }
.classroom-video-recording-notice { margin:0;padding:9px 12px;border-top:1px solid var(--ui-danger-border);color:var(--ui-danger-text);background:var(--ui-danger-bg);font-size:var(--type-badge-size);font-weight:600;line-height:1.4; }
.classroom-video-recording-notice::before { content:'●'; margin-right:7px; color:var(--ui-danger-text); }
#classroom-video-record-btn.is-recording { border-color:var(--ui-danger-border);color:var(--ui-danger-text);background:var(--ui-danger-bg);box-shadow:none; }
.classroom-video-record-dot { width:18px;height:18px;display:block;border:2px solid var(--ui-danger-text);border-radius:50%;position:relative;box-shadow:none; }
.classroom-video-record-dot::after { content:'';position:absolute;inset:4px;border-radius:50%;background:var(--ui-danger-text); }
.classroom-video-record-stop { width:15px;height:15px;display:block;border-radius:3px;background:var(--ui-danger-text);box-shadow:none; }
.classroom-recordings-section { margin-top:20px;padding-top:18px;border-top:1px solid var(--ui-border); }
.classroom-recordings-section > div:first-child > span { color:var(--ui-accent);font-size:var(--type-badge-size);font-weight:600;text-transform:uppercase;letter-spacing:.04em; }
.classroom-recordings-section h4 { margin:5px 0;color:var(--ui-text);font-size:18px; }.classroom-recordings-section p { margin:0;color:var(--ui-text-muted);font-size:13px;line-height:1.45; }
.classroom-recordings-list { display:grid;gap:8px;margin-top:13px; }.classroom-recording-row { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px;border:1px solid var(--ui-border);border-radius:var(--radius-control);background:var(--ui-surface-alt); }.classroom-recording-row b,.classroom-recording-row small { display:block; }.classroom-recording-row b { color:var(--ui-text); }.classroom-recording-row small { margin-top:4px;color:var(--ui-text-muted);font-size:var(--type-meta-size); }.classroom-recording-actions { display:flex;gap:7px;flex-shrink:0; }.classroom-recording-actions button { min-height:44px;padding:8px 12px; }.classroom-recording-status { font-weight:600; }.classroom-recording-status.is-recording { color:var(--ui-danger-text); }.classroom-recording-status.is-ready { color:var(--ui-success-text); }.classroom-recording-status.is-failed { color:var(--ui-danger-text); }.classroom-recordings-empty { margin-top:12px !important; }
.classroom-video-count {
    min-width: 26px;
    color: var(--ui-accent);
    font-weight: 600;
    text-align: center;
}
.classroom-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
    min-height: 158px;
    max-height: min(52vh, 430px);
    padding: 10px;
    overflow-y: auto;
    min-width: 0;
    min-height: 0;
}
.classroom-video-connection-notice {
    display: grid;
    min-height: 240px;
    place-content: center;
    justify-items: center;
    gap: 10px;
    padding: 28px;
    color: var(--ui-text-muted);
    text-align: center;
}
.classroom-video-connection-notice > i { color: var(--ui-accent); font-size: 36px; }
.classroom-video-connection-notice b { color: var(--ui-text); font-size: 17px; }
.classroom-video-connection-notice span { max-width: 440px; font-size: 14px; line-height: 1.45; }
.classroom-video-connection-notice button { margin-top: 4px; }
.classroom-video-tile {
    position: relative;
    min-height: 126px;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-media-bg);
}
.classroom-video-tile video {
    width: 100%;
    height: 100%;
    min-height: 126px;
    display: block;
    object-fit: contain;
    transform: none;
    background: var(--ui-media-bg);
}
.classroom-video-grid.has-screen-share { position:relative; display:block; height:min(52vh, 430px); max-height:none; overflow:hidden; }
.classroom-video-tile.is-screen-share { width:100%; height:100%; min-height:0; }
.classroom-video-tile.is-screen-share video { object-fit:contain; height:100%; min-height:0; }
.classroom-video-tile.is-presentation-speaker { position:absolute; right:22px; bottom:22px; z-index:3; width:clamp(150px,22%,240px); min-height:0; aspect-ratio:16 / 10; border-color:var(--ui-accent); box-shadow:var(--ui-shadow-float); }
.classroom-video-tile.is-presentation-speaker video,.classroom-video-tile.is-presentation-speaker .classroom-video-placeholder { height:100%; min-height:0; object-fit:cover; }
.classroom-video-tile.is-presentation-speaker .classroom-video-tile-actions { opacity:0; }
.classroom-video-tile.is-presentation-speaker:hover .classroom-video-tile-actions,.classroom-video-tile.is-presentation-speaker:focus-within .classroom-video-tile-actions { opacity:1; }
.classroom-video-tile.is-active-speaker { border-color:var(--ui-success-border); box-shadow:0 0 0 2px var(--ui-success-bg); }
.classroom-video-tile-label {
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 7px;
    overflow: hidden;
    color: var(--ui-on-media);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px var(--ui-media-bg);
}
.classroom-video-tile-indicators { position:absolute; top:8px; right:8px; display:flex; gap:6px; }
.classroom-video-tile-indicators i { display:grid; width:28px; height:28px; place-items:center; border-radius:50%; color:var(--ui-on-media); background:var(--ui-media-overlay); font-size:17px; }
.classroom-video-tile-indicators .bx-microphone-off { color:var(--ui-danger-text); }
.classroom-video-tile-indicators .bx-signal-1 { color:var(--ui-warning-text); }
.classroom-video-tile-actions { position:absolute; top:8px; left:8px; display:flex; gap:5px; opacity:.96; transition:opacity .16s ease; }
.classroom-video-tile:hover .classroom-video-tile-actions,.classroom-video-tile:focus-within .classroom-video-tile-actions { opacity:1; }
.classroom-video-tile-action { min-width:44px; height:44px; display:grid; place-items:center; padding:0 7px; border-color:color-mix(in srgb,var(--ui-on-media) 22%,transparent); color:var(--ui-on-media); background:var(--ui-media-overlay); }
.classroom-video-tile-action:has(span) { grid-auto-flow:column; gap:4px; }
.classroom-video-tile-action span { font-size:var(--type-badge-size); font-weight:600; white-space:nowrap; }
.classroom-video-restore-tiles { grid-column:1 / -1; justify-self:center; align-self:start; min-height:44px; padding:0 16px; border-style:dashed; color:var(--ui-accent); }
.classroom-video-placeholder {
    display: grid;
    place-items: center;
    min-height: 126px;
    padding: 16px;
    color: var(--ui-text-muted);
    text-align: center;
    font-size: 12px;
}
.classroom-video-controls {
    position: relative;
    z-index: 10;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
}
.classroom-video-controls button.is-off,
.classroom-video-controls button.is-active {
    border-color: var(--ui-danger-border);
    color: var(--ui-danger-text);
}
#classroom-video-hand-btn.is-raised {
    border-color: var(--ui-warning-border);
    color: var(--ui-warning-text);
    background: var(--ui-warning-bg);
    box-shadow: none;
}
.classroom-video-hand-marker {
    margin-left: 6px;
    color: var(--ui-warning-text);
    font-size: 16px;
    vertical-align: -2px;
}
.classroom-video-controls button.is-active {
    border-color: var(--ui-success-border);
    color: var(--ui-success-text);
}
#classroom-video-mic-btn {
    position: relative;
    overflow: hidden;
}
#classroom-video-mic-btn.is-speaking {
    border-color: var(--ui-success-border);
    color: var(--ui-success-text);
    box-shadow: var(--ui-focus-ring);
}
.classroom-video-live-mic-level {
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 5px;
    height: 3px;
    overflow: hidden;
    border-radius: 99px;
    background: var(--ui-border);
}
.classroom-video-live-mic-level span {
    display: block;
    width: calc(var(--microphone-level, 0) * 100%);
    height: 100%;
    border-radius: inherit;
    background: var(--ui-success-text);
    transition: width 90ms linear, background .15s ease;
}
#classroom-video-mic-btn.is-off .classroom-video-live-mic-level span { background: var(--ui-danger-text); }
.classroom-video-audio { display: none; }
.classroom-video-moderation { width:min(680px, calc(100vw - 32px)); max-height:min(760px, calc(100dvh - 32px)); display:flex; flex-direction:column; }
.classroom-video-moderation-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--ui-border); }
.classroom-video-moderation-header > div > span { display:block; color:var(--ui-accent); font-size:var(--type-badge-size); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.classroom-video-moderation-header > div > span i { margin-right:5px; font-size:16px; vertical-align:-1px; }
.classroom-video-moderation-header h3 { margin:5px 0 0; color:var(--ui-text); font-size:24px; }
.classroom-video-moderation-header h3 b { display:inline-grid; min-width:28px; min-height:28px; place-items:center; margin-left:5px; border-radius:50%; color:var(--ui-accent); background:var(--ui-accent-soft); font-size:14px; vertical-align:3px; }
.classroom-video-moderation-header > button { width:44px; min-width:44px; height:44px; padding:0; display:grid; place-items:center; border-radius:var(--radius-control); }
.classroom-video-moderation-note { margin:14px 0; color:var(--ui-text-muted); font-size:13px; line-height:1.5; }
.classroom-video-moderation-list { display:grid; gap:8px; min-width:0; min-height:160px; overflow-y:auto; overflow-x:hidden; padding-right:3px; }
.classroom-video-moderation-row { display:grid; grid-template-columns:minmax(0, 1fr); align-items:start; gap:10px; min-width:0; padding:11px; border:1px solid var(--ui-border); border-radius:8px; background:var(--ui-surface-alt); }
.classroom-video-moderation-person { display:flex; min-width:0; align-items:center; gap:10px; }
.classroom-video-moderation-avatar { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border:1px solid var(--ui-accent); border-radius:50%; color:var(--ui-accent); background:var(--ui-accent-soft); font-size:18px; }
.classroom-video-moderation-person b,.classroom-video-moderation-person small { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.classroom-video-moderation-person b { color:var(--ui-text); font-size:14px; }
.classroom-video-moderation-person small { margin-top:3px; color:var(--ui-text-muted); font-size:12px; }
.classroom-video-moderation-actions { display:flex; width:100%; min-width:0; flex-wrap:wrap; justify-content:flex-start; gap:7px; }
.classroom-video-moderation-actions button,.classroom-video-moderation-footer button { min-height:44px; padding:8px 12px; font-size:var(--type-badge-size); white-space:nowrap; }
.classroom-video-moderation-actions button span { margin-left:4px; }
.classroom-video-moderation-remove { width:44px; min-width:44px; padding:0 !important; display:grid; place-items:center; }
.classroom-video-raised-hands { width:min(560px, calc(100vw - 32px)); max-height:min(680px, calc(100dvh - 32px)); display:flex; flex-direction:column; }
.classroom-video-raised-hands-list { display:grid; gap:8px; min-height:150px; overflow-y:auto; }
.classroom-video-raised-hand-row { display:grid; grid-template-columns:36px minmax(0, 1fr) auto; align-items:center; gap:10px; padding:11px; border:1px solid var(--ui-border); border-radius:8px; background:var(--ui-surface-alt); }
.classroom-video-raised-hand-row > div { min-width:0; }
.classroom-video-raised-hand-row b,.classroom-video-raised-hand-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.classroom-video-raised-hand-row b { color:var(--ui-text); font-size:14px; }
.classroom-video-raised-hand-row small { margin-top:3px; color:var(--ui-text-muted); font-size:12px; }
.classroom-video-raised-hand-row button { min-height:44px; padding:8px 12px; white-space:nowrap; }
.classroom-video-moderation-empty { display:grid; min-height:150px; place-items:center; align-content:center; gap:7px; padding:20px; border:1px dashed var(--ui-border); border-radius:8px; color:var(--ui-text-muted); text-align:center; }
.classroom-video-moderation-empty i { color:var(--ui-accent); font-size:28px; }
.classroom-video-moderation-empty b,.classroom-video-moderation-empty span { display:block; }
.classroom-video-moderation-empty.is-error i { color:var(--ui-danger-text); }
.classroom-video-moderation-footer { display:flex; justify-content:space-between; gap:8px; margin-top:14px; }
.classroom-video-moderation-footer button:first-child { border-color:var(--ui-warning-border); color:var(--ui-warning-text); }
.classroom-video-device-state {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 13px;
    border: 1px solid var(--ui-danger-border);
    border-radius: 8px;
    background: var(--ui-danger-bg);
    color: var(--ui-danger-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}
.classroom-video-device-state[hidden] { display: none; }
.classroom-video-device-state > i { flex: 0 0 auto; margin-top: 1px; font-size: 19px; }
.classroom-video-permission-help {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 11px 12px;
    border: 1px solid var(--ui-warning-border);
    border-radius: 8px;
    background: var(--ui-warning-bg);
    color: var(--ui-warning-text);
    font-size: 13px;
    line-height: 1.45;
}
.classroom-video-permission-help[hidden] { display: none; }
.classroom-video-permission-help > i { flex: 0 0 auto; margin-top: 1px; font-size: 19px; }
.classroom-video-permission-help b,
.classroom-video-permission-help span { display: block; }
.classroom-video-permission-help span { margin-top: 3px; color: var(--ui-text-muted); }
.classroom-video-preflight {
    width: min(620px, 100%);
}
.classroom-video-preflight-preview {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 280px;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-media-bg);
}
.classroom-video-preflight-preview video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: var(--ui-media-bg);
}
.classroom-video-preflight-preview span {
    position: absolute;
    inset: auto 12px 12px;
    color: var(--ui-on-media);
    font-size: 13px;
    text-align: center;
    text-shadow: 0 1px 2px var(--ui-media-bg);
}
.classroom-video-preflight-toggles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.classroom-video-preflight-toggles button {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 11px 12px;
    border-color: var(--ui-accent);
    text-align: left;
}
.classroom-video-preflight-toggles button > i {
    flex: 0 0 auto;
    font-size: 22px;
    color: var(--ui-accent);
}
.classroom-video-preflight-toggles button > span { min-width: 0; }
.classroom-video-preflight-toggles b,
.classroom-video-preflight-toggles small { display: block; }
.classroom-video-preflight-toggles b { color: var(--ui-text); font-size: 14px; }
.classroom-video-preflight-toggles small { margin-top: 1px; color: var(--ui-success-text); font-size: 12px; }
.classroom-video-preflight-toggles button.is-off { border-color: var(--ui-border); }
.classroom-video-preflight-toggles button.is-off > i,
.classroom-video-preflight-toggles button.is-off small { color: var(--ui-text-muted); }
.classroom-video-backgrounds {
    margin-top: 12px;
    padding: 11px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-accent-soft);
}
.classroom-video-backgrounds-heading {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 9px;
}
.classroom-video-backgrounds-heading span { color: var(--ui-text); font-size: 14px; font-weight: 600; }
.classroom-video-backgrounds-heading i { margin-right: 5px; color: var(--ui-accent); font-size: 18px; vertical-align: -2px; }
.classroom-video-backgrounds-heading small { color: var(--ui-text-muted); font-size: 12px; text-align: right; }
.classroom-video-background-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}
.classroom-video-background-options button {
    min-width: 0;
    min-height: 54px;
    padding: 7px 5px;
    border-color: var(--ui-border);
    color: var(--ui-text-muted);
    font-size: 12px;
    line-height: 1.15;
}
.classroom-video-background-options button i,
.classroom-video-background-options button span { display: block; }
.classroom-video-background-options button i { margin-bottom: 4px; color: var(--ui-accent); font-size: 18px; }
.classroom-video-background-options button.is-active { border-color: var(--ui-accent); color: var(--ui-text); background: var(--ui-accent-soft); box-shadow:none; }
.classroom-video-background-mode { display: flex; gap: 8px; margin-top: 10px; }
.classroom-video-background-mode button { flex: 1; min-height: 44px; border: 1px solid var(--ui-border); border-radius: var(--radius-control); background: var(--ui-surface-alt); color: var(--ui-text-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.classroom-video-background-mode button i { color: var(--ui-accent); margin-right: 5px; font-size: 15px; vertical-align: -1px; }
.classroom-video-background-mode button.is-active { border-color: var(--ui-accent); color: var(--ui-text); background: var(--ui-accent-soft); }
.classroom-video-mirror-toggle { display:flex; align-items:center; gap:9px; margin-top:10px; color:var(--ui-text-muted); font-size:12px; line-height:1.35; cursor:pointer; }
.classroom-video-mirror-toggle input { width:17px; height:17px; margin:0; accent-color:var(--ui-accent); }
#classroom-video-preview.is-mirrored,
.classroom-video-tile.is-local.is-mirrored:not(.is-screen-share) video { transform:scaleX(-1); }
.classroom-video-mic-meter {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface-alt);
}
.classroom-video-mic-meter > div:first-child {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ui-text-muted);
    font-size: 13px;
}
.classroom-video-mic-meter > div:first-child i { color: var(--ui-accent); font-size: 18px; }
.classroom-video-mic-meter-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ui-border);
}
.classroom-video-mic-meter-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--ui-success-text);
    box-shadow:none;
    transition: width 80ms linear;
}
.classroom-video-preflight-actions {
    position: sticky;
    bottom: -20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 10px;
    background: var(--ui-surface);
}
.classroom-video-preflight-actions button {
    padding: 12px;
}
.classroom-video-preflight-connect {
    flex: 1;
    min-width: 200px;
}
body.classroom-open .support-btn,
body.classroom-open .quick-scroll-btn {
    display: none !important;
}
.classroom-guest-link-box {
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    gap:12px;
    align-items:center;
    margin-top:16px;
    padding:14px;
    border:1px solid var(--ui-border);
    border-radius:8px;
    background:var(--ui-surface-alt);
}
.classroom-guest-link-box b { color:var(--ui-text); }
.classroom-guest-link-box b i { color:var(--ui-accent); margin-right:5px; }
.classroom-guest-link-box p { margin:5px 0 0; color:var(--ui-text-muted); font-size:13px; line-height:1.45; }
.classroom-guest-link-box > button { min-height:44px; white-space:nowrap; }
.classroom-guest-link-output { grid-column:1 / -1; display:grid; gap:6px; }
.classroom-guest-link-output input { width:100%; box-sizing:border-box; min-height:44px; }
.classroom-guest-link-output small { color:var(--ui-text-muted); }
@media (max-width:620px) {
    .classroom-guest-link-box { grid-template-columns:1fr; }
    .classroom-guest-link-box > button { width:100%; }
}

.classroom-video-call-launch {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 16px;
    padding: 15px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface-alt);
}
.classroom-launch-intro {
    margin: -5px 0 16px;
    color: var(--ui-text-muted);
}
.classroom-launch-format-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    color: var(--ui-text);
    font-size: 15px;
}
.classroom-launch-format-title i { color: var(--ui-accent); font-size: 20px; }
.classroom-video-call-launch b,
.classroom-video-call-launch small { display: block; }
.classroom-video-call-launch b { color: var(--ui-text); }
.classroom-video-call-launch b i { color: var(--ui-accent); margin-right: 5px; }
.classroom-video-call-launch small { margin-top: 5px; color: var(--ui-text-muted); font-size: 13px; line-height: 1.45; }
.classroom-video-call-launch-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.classroom-video-call-launch-actions input,
.classroom-video-call-launch-actions button { min-width: 0; margin: 0; }
.classroom-video-call-launch-actions .classroom-permanent-link-choice {
    grid-column: 1 / -1;
    align-items: center;
    margin-top: 2px;
    cursor: pointer;
}
.classroom-video-call-launch-actions .classroom-permanent-link-choice input { width: 18px; min-width: 18px; height: 18px; }
.classroom-webinar-launch {
    border-color: var(--ui-success-border);
    background: var(--ui-success-bg);
}
.classroom-webinar-launch b i { color: var(--ui-success-text); }
.classroom-webinar-settings {
    margin-top: 2px;
    border-top: 1px solid color-mix(in srgb, var(--ui-border) 75%, transparent);
}
.classroom-webinar-settings summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-top: 11px;
    color: var(--ui-text);
    cursor: pointer;
    list-style: none;
}
.classroom-webinar-settings summary::-webkit-details-marker { display: none; }
.classroom-webinar-settings summary i { color: var(--ui-accent); font-size: 18px; }
.classroom-webinar-settings summary small { margin-left: auto; color: var(--ui-text-muted); font-size: 12px; }
.classroom-webinar-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 12px;
    margin-top: 12px;
}
.classroom-check-row,
.classroom-webinar-setting-field {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    background: var(--ui-surface);
}
.classroom-check-row input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--ui-accent); }
.classroom-check-row span,
.classroom-webinar-setting-field span { min-width: 0; }
.classroom-check-row b,
.classroom-check-row small,
.classroom-webinar-setting-field > span { display: block; }
.classroom-check-row b,
.classroom-webinar-setting-field > span { color: var(--ui-text); font-size: 13px; }
.classroom-check-row small { margin-top: 3px; color: var(--ui-text-muted); font-size: var(--type-meta-size); line-height: 1.35; }
.classroom-webinar-setting-field { align-items: center; justify-content: space-between; gap: 12px; }
.classroom-webinar-setting-field select { min-width: 0; width: 64%; margin: 0; }
@media (max-width: 700px) {
    .classroom-webinar-settings summary small { display: none; }
    .classroom-webinar-settings-grid { grid-template-columns: 1fr; }
}
.classroom-fullscreen.classroom-video-only #classroom-canvas,
.classroom-fullscreen.classroom-video-only .classroom-floating-toolbar,
.classroom-fullscreen.classroom-video-only .classroom-toolbar-toggle,
.classroom-fullscreen.classroom-video-only .classroom-side,
.classroom-fullscreen.classroom-video-only .classroom-hint,
.classroom-fullscreen.classroom-video-only #classroom-active-question {
    display: none !important;
}
.classroom-fullscreen.classroom-video-only .classroom-video-panel {
    top: 92px;
    right: 18px;
    bottom: 18px;
    left: 18px;
    width: auto;
    max-height: none;
}
.classroom-fullscreen.classroom-video-only .classroom-video-grid {
    flex: 1 1 auto;
    max-height: none;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.classroom-fullscreen.classroom-video-only .classroom-video-grid.has-screen-share,
.classroom-fullscreen.classroom-webinar-only .classroom-video-grid.has-screen-share {
    height: auto;
}
@media (max-width: 700px) {
    .classroom-video-grid.has-screen-share { height:min(48dvh,390px); }
    .classroom-video-tile.is-presentation-speaker { right:16px; bottom:16px; width:min(42%,170px); }
    .classroom-video-controls { gap:6px; padding:8px; }
}
.classroom-fullscreen.classroom-video-only.classroom-video-presentation #classroom-canvas {
    display: block !important;
    background: var(--ui-canvas-bg);
}
.classroom-fullscreen.classroom-video-only.classroom-video-presentation .classroom-video-panel {
    top: 142px;
    right: 18px;
    bottom: 18px;
    left: auto;
    width: min(30vw, 390px);
    max-height: none;
    z-index: 8;
}
.classroom-fullscreen.classroom-video-only.classroom-video-presentation .classroom-video-grid {
    grid-template-columns: 1fr;
}
.classroom-fullscreen.classroom-video-only.classroom-video-presentation.classroom-presentation-teacher .classroom-floating-toolbar {
    display: flex !important;
    top: auto;
    right: auto;
    bottom: 18px;
    left: 18px;
    width: auto;
    max-width: min(650px, calc(70vw - 42px));
    z-index: 12;
}
.classroom-presentation-banner {
    position: absolute;
    z-index: 12;
    top: 92px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: min(650px, calc(70vw - 42px));
    padding: 10px 12px;
    border: 1px solid var(--ui-accent);
    border-radius: 9px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-float);
}
.classroom-presentation-copy { min-width: 0; }
.classroom-presentation-copy span,
.classroom-presentation-copy strong,
.classroom-presentation-copy small { display: block; }
.classroom-presentation-copy span { color: var(--ui-accent); font-size: var(--type-badge-size); font-weight: 600; letter-spacing: .04em; }
.classroom-presentation-copy strong { max-width: 310px; overflow: hidden; color: var(--ui-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.classroom-presentation-copy small { margin-top: 2px; color: var(--ui-text-muted); font-size: 12px; line-height: 1.35; }
.classroom-presentation-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.classroom-presentation-actions button { min-height: 44px; padding: 8px 12px; font-size: var(--type-badge-size); white-space: nowrap; }
.classroom-presentation-actions button.is-danger { border-color: var(--ui-danger-border); color: var(--ui-danger-text); }
.classroom-presentation-student-note { color: var(--ui-accent); font-size: var(--type-badge-size); font-weight: 600; white-space: nowrap; }
@media (max-width: 780px) {
    .classroom-fullscreen.classroom-video-only.classroom-video-presentation .classroom-video-panel {
        top: auto;
        right: 8px;
        bottom: 8px;
        left: 8px;
        width: auto;
        height: 190px;
    }
    .classroom-fullscreen.classroom-video-only.classroom-video-presentation.classroom-presentation-teacher .classroom-floating-toolbar {
        top: auto;
        right: 8px;
        bottom: 206px;
        left: 8px;
        width: auto;
        max-width: none;
        overflow-x: auto;
    }
    .classroom-presentation-banner {
        top: 72px;
        right: 8px;
        left: 8px;
        max-width: none;
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
        padding: 8px 10px;
    }
    .classroom-presentation-copy strong { max-width: calc(100vw - 36px); }
    .classroom-presentation-copy small { display: none; }
}
.classroom-fullscreen.classroom-webinar-only #classroom-canvas,
.classroom-fullscreen.classroom-webinar-only .classroom-floating-toolbar,
.classroom-fullscreen.classroom-webinar-only .classroom-toolbar-toggle,
.classroom-fullscreen.classroom-webinar-only .classroom-side,
.classroom-fullscreen.classroom-webinar-only .classroom-hint,
.classroom-fullscreen.classroom-webinar-only #classroom-active-question {
    display: none !important;
}
.classroom-fullscreen.classroom-webinar-only .classroom-video-panel {
    top: 92px;
    right: 354px;
    bottom: 18px;
    left: 18px;
    width: auto;
    max-height: none;
}
.classroom-fullscreen.classroom-webinar-only .classroom-video-grid {
    flex: 1 1 auto;
    max-height: none;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.classroom-webinar-chat {
    position: absolute;
    z-index: 6;
    top: 92px;
    right: 18px;
    bottom: 18px;
    width: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--ui-accent);
    border-radius: 8px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-float);
}
.classroom-webinar-chat[hidden] { display: none; }
.classroom-webinar-chat header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 13px;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text);
}
.classroom-webinar-chat header i { color: var(--ui-accent); margin-right: 6px; }
.classroom-webinar-chat header span { color: var(--ui-accent); font-size: var(--type-badge-size); font-weight: 600; letter-spacing:.04em; }
.classroom-webinar-chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px;
}
.classroom-webinar-chat-empty { margin: 8px 0; color: var(--ui-text-muted); font-size: 13px; line-height: 1.45; }
.classroom-webinar-chat-message {
    margin-bottom: 10px;
    padding: 9px;
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    background: var(--ui-surface-alt);
}
.classroom-webinar-chat-message b,
.classroom-webinar-chat-message span { display: block; }
.classroom-webinar-chat-message b { margin-bottom: 4px; color: var(--ui-accent); font-size: 12px; }
.classroom-webinar-chat-message span { color: var(--ui-text); font-size: 13px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.classroom-webinar-chat-message.is-own { border-color: var(--ui-accent); }
.classroom-webinar-chat-recipient { color: var(--ui-text-muted); font-weight: 400; }
.classroom-webinar-chat-reply { margin-top: 7px; padding: 3px 7px; border: 0; color: var(--ui-accent); background: transparent; font-size: var(--type-meta-size); cursor: pointer; }
.classroom-webinar-chat-reply i { margin-right: 3px; }
.classroom-webinar-chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 7px;
    padding: 10px;
    border-top: 1px solid var(--ui-border);
}
.classroom-webinar-chat-form input { min-width: 0; }
.classroom-webinar-chat-form button { width:44px; min-width:44px; min-height:44px; padding:0; }
.classroom-webinar-cohost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    color: var(--ui-accent);
    font-size: 12px;
    white-space: nowrap;
}
.classroom-webinar-cohost input { width: 17px; height: 17px; accent-color: var(--ui-accent); }
.classroom-brush-group,
.classroom-fill-group {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 4px 8px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-input-bg);
    color: var(--ui-accent);
}
.classroom-brush-group i,
.classroom-fill-group i {
    font-size: 18px;
}
.classroom-floating-toolbar input[type="color"] {
    width: 44px;
    height: 44px;
    padding: 4px;
    border-radius: 8px;
    margin: 0;
}
.classroom-floating-toolbar input[type="range"] {
    width: 110px;
    margin: 0;
}
.classroom-toolbar-collapse-btn {
    margin-left: auto;
}
.classroom-floating-toolbar select {
    width: auto;
    min-width: 118px;
    height: 44px;
    margin: 0;
    padding: 0 10px;
    font-size: 12px;
    border-radius: 8px;
}
.classroom-zoom-group {
    display: inline-flex;
    gap: 6px;
    flex: 0 0 auto;
}
.classroom-floating-toolbar .active {
    color: var(--ui-on-accent);
    background: var(--ui-accent);
    border-color: var(--ui-accent);
}
#classroom-canvas {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: block;
    background: var(--ui-canvas-bg);
    border: 0;
    border-radius: 0;
    touch-action: none;
    cursor: crosshair;
}
.classroom-side {
    top: 170px;
    bottom: 24px;
    width: 280px;
    overflow-y: auto;
    padding: 16px;
    border-radius: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-input-bg);
}
.classroom-side::-webkit-scrollbar {
    width: 6px;
}
.classroom-side::-webkit-scrollbar-track {
    background: var(--ui-input-bg);
    border-radius: 999px;
}
.classroom-side::-webkit-scrollbar-thumb {
    background: var(--ui-scrollbar-thumb);
    border-radius: 999px;
}
.classroom-side-close {
    position: sticky;
    top: 0;
    float: right;
    z-index: 2;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0 0 6px 8px;
    display: inline-grid;
    place-items: center;
    background: var(--ui-accent-soft);
}
.classroom-side.left {
    left: 18px;
}
.classroom-side.right {
    right: 18px;
}
.classroom-side.is-hidden {
    display: none;
}
.classroom-panel-reopen {
    position: absolute;
    z-index: 4;
    top: 170px;
    transform: none;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--ui-accent);
    border-radius: 999px;
    background: var(--ui-surface);
    color: var(--ui-accent);
    box-shadow: var(--ui-shadow-float);
    touch-action: none;
    cursor: grab;
    user-select: none;
}
.classroom-panel-reopen.is-dragging {
    cursor: grabbing;
    opacity: 0.86;
}
.classroom-panel-reopen.left {
    left: 18px;
}
.classroom-panel-reopen.right {
    right: 18px;
}
.classroom-side h3 {
    margin: 0 0 12px;
    font-size: 16px;
    color: var(--ui-text);
}
.classroom-panel-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 6px;
    align-items: center;
    margin: 0 0 10px;
}
.classroom-collapse-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    min-height: 44px;
    padding: 5px 0;
    border: 0;
    background: transparent;
    color: var(--ui-text);
    box-shadow: none;
}
.classroom-panel-expand {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--ui-accent-soft);
}
.classroom-panel-expand i,
.classroom-side-close i,
.classroom-collapse-title i {
    font-size: 16px;
}
.classroom-collapse-title span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
}
.classroom-collapse-title.is-collapsed i:last-child {
    transform: rotate(180deg);
}
.classroom-panel-block {
    margin-bottom: 14px;
}
.classroom-panel-block.is-collapsed {
    display: none;
}
.classroom-object-editor,
.classroom-note-palette {
    position: absolute;
    z-index: 5;
    width: 280px;
    padding: 12px;
    border: 1px solid var(--ui-accent);
    border-radius: 10px;
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-float);
    backdrop-filter: blur(12px);
}
.classroom-note-palette {
    left: 50%;
    top: 150px;
    transform: translateX(-50%);
}
.stats-badge:hover { background:var(--ui-accent-soft); border-color:var(--ui-accent); box-shadow:none; }
.classroom-object-editor {
    max-height: min(680px, calc(100dvh - 112px));
    overflow: auto;
}
.classroom-object-quick-actions {
    position: absolute;
    z-index: 48;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 5px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-float);
    backdrop-filter: blur(12px);
    animation: classroom-panel-in .16s ease both;
}
.classroom-object-quick-actions button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ui-text-muted);
    box-shadow: none;
}
.classroom-object-quick-actions button:hover { background: var(--ui-accent-soft); color: var(--ui-accent); }
.classroom-object-quick-actions button.is-danger:hover { background: var(--ui-danger-bg); color: var(--ui-danger-text); }
.classroom-object-quick-actions i { font-size: 19px; }
.classroom-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    cursor: move;
    user-select: none;
    touch-action: none;
}
.classroom-editor-head button {
    padding: 6px 8px;
    cursor: pointer;
}
.classroom-object-editor textarea {
    min-height: 88px;
    resize: vertical;
    margin: 0 0 10px;
}
.classroom-object-editor #classroom-object-front,
.classroom-object-editor #classroom-object-back { min-height: 66px; }
.classroom-size-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 8px 0 10px;
}
.classroom-size-grid label {
    display: grid;
    gap: 4px;
    margin: 0;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
}
.classroom-size-grid input[type="range"] {
    width: 100%;
    margin: 0;
}
.classroom-object-editor label {
    margin: 8px 0 5px;
}
.classroom-editor-field {
    display: grid;
    gap: 6px;
    margin: 10px 0;
}
.classroom-editor-field label {
    margin: 0;
}
.classroom-editor-field input[type="range"] {
    width: 100%;
    margin: 0;
}
.classroom-editor-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.classroom-editor-color-row input[type="color"] {
    width: 54px;
    height: 44px;
    margin: 0;
    padding: 4px;
}
.classroom-editor-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.classroom-editor-actions button {
    padding: 8px 10px;
}
.classroom-editor-actions button.active {
    color: var(--ui-on-accent);
    background: var(--ui-accent);
    border-color: var(--ui-accent);
}
.classroom-editor-rotation label { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.classroom-editor-rotation output { color: var(--ui-accent); font-weight:600; }
.classroom-flashcard-flip-btn { width:100%; margin-top:8px; }
.classroom-swatch-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin: 8px 0 12px;
}
.classroom-swatch-grid button {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--ui-canvas-control-border);
}
.classroom-swatch.is-warning { background:var(--ui-board-note-warning); }
.classroom-swatch.is-success { background:var(--ui-board-note-success); }
.classroom-swatch.is-danger { background:var(--ui-board-note-danger); }
.classroom-swatch.is-info { background:var(--ui-board-note-info); }
.classroom-swatch.is-sand { background:var(--ui-board-note-sand); }
.classroom-swatch.is-violet { background:var(--ui-board-note-violet); }
.classroom-round-choice {
    width: 100%;
    padding: 10px;
}
body.light-mode .classroom-object-editor,
body.light-mode .classroom-note-palette,
body.light-mode .classroom-floating-toolbar,
body.light-mode .classroom-brush-group,
body.light-mode .classroom-fill-group,
body.light-mode .classroom-toolbar-toggle,
body.light-mode .classroom-panel-reopen,
body.light-mode .classroom-side,
body.light-mode .classroom-topbar,
body.light-mode .classroom-panel-overlay {
    background: var(--ui-surface);
    border-color: var(--ui-border);
    color: var(--ui-text);
    box-shadow: var(--ui-shadow-float);
}
body.light-mode .classroom-object-quick-actions { background: var(--ui-surface); border-color: var(--ui-border); }
body.light-mode .classroom-object-quick-actions button { color: var(--ui-text-muted); }
.classroom-panel-overlay {
    position: absolute;
    z-index: 6;
    left: 18px;
    right: 18px;
    top: 92px;
    bottom: 18px;
    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid var(--ui-accent);
    border-radius: 12px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-float);
    backdrop-filter: blur(14px);
    overflow: hidden;
}
.classroom-panel-overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ui-border);
}
.classroom-panel-overlay-head b {
    color: var(--ui-text);
    font-size: 18px;
}
.classroom-panel-overlay-body {
    overflow: auto;
    padding: 16px;
}
.classroom-panel-overlay-body .classroom-list-item {
    font-size: 16px;
}
.classroom-material-preview {
    min-height: 100%;
    color: var(--ui-text);
}
.classroom-material-preview img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 180px);
    margin: 0 auto;
    border-radius: 10px;
    object-fit: contain;
}
.classroom-material-frame {
    width: 100%;
    height: calc(100vh - 190px);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-document-bg);
}
.classroom-material-open-link {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    color: var(--ui-accent);
    font-weight: 600;
}
.classroom-lesson-preview {
    max-width: 980px;
    margin: 0 auto;
    line-height: 1.65;
    font-size: 17px;
}
.classroom-answer-card {
    padding: 0;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-bg);
    color: var(--ui-text);
    margin-bottom: 10px;
    overflow: hidden;
}
.classroom-answer-card summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    cursor: pointer;
    list-style: none;
}
.classroom-answer-card summary::-webkit-details-marker {
    display: none;
}
.classroom-answer-card[open] summary i {
    transform: rotate(180deg);
}
.classroom-answer-full {
    display: grid;
    gap: 10px;
    padding: 0 10px 10px;
}
.classroom-answer-section {
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface-alt);
}
.classroom-answer-section b {
    display: block;
    margin-bottom: 6px;
    color: var(--ui-accent);
}
.classroom-answer-section p {
    margin: 0;
    white-space: pre-wrap;
}
.classroom-answer-section.reference {
    border-color: var(--ui-success-border);
    background: var(--ui-success-bg);
}
body.light-mode .classroom-collapse-title {
    color: var(--ui-text);
}
.classroom-hint {
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--ui-text-muted);
    font-size: 12px;
    pointer-events: none;
}
.classroom-list-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-bg);
    color: var(--ui-text);
    margin-bottom: 8px;
    text-decoration: none;
}
.classroom-list-item small {
    display: block;
    color: var(--ui-text-muted);
    margin-top: 3px;
}
.classroom-video-preflight-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.classroom-video-preflight-head h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--ui-text);
    font-size: var(--type-section-size);
    line-height: var(--type-section-line);
    font-weight: 600;
}
.classroom-video-preflight-head h3 i { color: var(--ui-accent); }
.classroom-video-preflight-head button {
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}
.classroom-video-preflight-intro {
    margin: var(--space-2) 0 var(--space-4);
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.classroom-video-device-selectors { margin-top: var(--space-4); }
.classroom-loading-state {
    display: flex;
    min-height: 96px;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--ui-text-muted);
}
.classroom-locked-state {
    border-color: var(--ui-warning-border);
    color: var(--ui-text);
    background: var(--ui-warning-bg);
}
.classroom-locked-state h3,
.classroom-panel-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    color: var(--ui-text);
    font-size: var(--type-section-size);
    line-height: var(--type-section-line);
    font-weight: 600;
}
.classroom-locked-state h3 i { color: var(--ui-warning-text); }
.classroom-panel-title i { color: var(--ui-accent); }
.classroom-locked-state p {
    margin: 0;
    color: var(--ui-text);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
}
.classroom-upgrade-action { min-height: 44px; margin-top: var(--space-4); padding: 10px 14px; }
.classroom-active-list {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.classroom-session-row {
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.classroom-session-row > div:first-child,
.classroom-student-session > div { min-width: 0; }
.classroom-item-title {
    color: var(--ui-text);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.classroom-row-actions,
.classroom-template-actions,
.classroom-invite-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.classroom-row-action { min-height: 44px; padding: 10px 12px; }
.classroom-saved-rooms-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.classroom-saved-rooms-heading h3 { margin: 0 0 3px; color: var(--ui-text); font-size: var(--type-section-size); }
.classroom-saved-rooms-heading p { margin: 0; }
.classroom-saved-rooms-heading > span {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    min-width: 30px;
    min-height: 30px;
    padding: 0 8px;
    border: 1px solid var(--ui-accent);
    border-radius: 7px;
    color: var(--ui-accent);
    background: var(--ui-info-bg);
    font-weight: 600;
}
.classroom-saved-room-list { display: grid; gap: var(--space-2); }
.classroom-saved-room-row { margin: 0; }
.classroom-saved-room-delete { flex: 0 0 auto; min-height: 44px; padding: 10px 12px; }
.classroom-template-item { display: block; }
.classroom-template-item-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.classroom-template-actions { margin-top: var(--space-2); }
.classroom-template-main-action {
    flex: 1 1 150px;
    min-height: 44px;
    padding: 10px;
}
.classroom-template-delete {
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}
.classroom-empty-copy,
.classroom-invite-empty {
    margin: 0;
    padding: var(--space-3);
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.classroom-start-panel { border-color: var(--ui-accent); }
.classroom-launch-action,
.classroom-template-designer-action {
    width: 100%;
    min-height: 44px;
    margin-top: var(--space-2);
    padding: 12px 14px;
}
.classroom-start-note,
.classroom-panel-description {
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.classroom-start-note { margin: var(--space-4) 0 0; }
.classroom-templates-panel { margin-top: var(--space-5); }
.classroom-panel-description { margin: 0 0 var(--space-4); }
.classroom-template-list { display: grid; gap: var(--space-3); }
textarea.classroom-template-notes { min-height: 112px; resize: vertical; }
.classroom-student-empty {
    display: grid;
    min-height: 220px;
    place-items: center;
    align-content: center;
    gap: var(--space-2);
    color: var(--ui-text-muted);
    text-align: center;
}
.classroom-student-empty > i { color: var(--ui-accent); font-size: 42px; }
.classroom-student-empty h3 {
    margin: 0;
    color: var(--ui-text);
    font-size: var(--type-card-size);
    line-height: var(--type-card-line);
    font-weight: 600;
}
.classroom-student-empty p { max-width: 520px; margin: 0; line-height: var(--type-body-line); }
.classroom-student-heading {
    margin: 0 0 var(--space-5);
    padding-left: var(--space-4);
    border-left: 3px solid var(--ui-accent);
    color: var(--ui-text);
    font-size: var(--type-section-size);
    line-height: var(--type-section-line);
    font-weight: 600;
}
.classroom-student-session-list { display: grid; gap: var(--space-4); }
.classroom-student-session {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.classroom-student-session h3 {
    margin: 0 0 var(--space-1);
    color: var(--ui-text);
    font-size: var(--type-card-size);
    line-height: var(--type-card-line);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.classroom-student-session p {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.classroom-join-action { min-height: 44px; padding: 11px 16px; }
.classroom-material-row {
    align-items: center;
    gap: 6px;
}
.classroom-material-row a span,
.classroom-material-row > span {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.25;
}
.classroom-material-row .classroom-preview-material-btn,
.classroom-material-row .classroom-add-material-btn {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0 !important;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
}
.classroom-material-row .classroom-preview-material-btn i,
.classroom-material-row .classroom-add-material-btn i {
    font-size: 18px;
}
.classroom-student-answer-history {
    margin-top: 12px;
}
.classroom-student-answer-history summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--ui-success-border);
    border-radius: 8px;
    background: var(--ui-success-bg);
    color: var(--ui-text);
    cursor: pointer;
    list-style: none;
}
.classroom-student-answer-history summary::-webkit-details-marker {
    display: none;
}
.classroom-student-answer-history[open] summary i {
    transform: rotate(180deg);
}
.classroom-student-answer-history .classroom-answer-section {
    margin-top: 8px;
}
.classroom-test-picker {
    display: grid;
    gap: 6px;
    margin: 0 0 12px;
    padding: 10px;
    background: var(--ui-accent-soft);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
}
.classroom-test-picker label {
    color: var(--ui-text-muted);
    font-size: 12px;
    margin: 0;
}
.classroom-test-picker select {
    margin: 0;
    width: 100%;
}
.classroom-picker-action {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
}
.classroom-library-picker { margin-bottom: var(--space-2); }
.classroom-material-copy { flex: 1 1 auto; min-width: 0; }
.classroom-material-link {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
    gap: var(--space-2);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
}
.classroom-material-link > i { flex: 0 0 auto; color: var(--ui-accent); }
.classroom-material-link:hover { color: var(--ui-accent); }
.classroom-quiz-info {
    display: grid;
    gap: var(--space-1);
    margin: 0 0 var(--space-2);
    padding: 10px 12px;
    border: 1px solid var(--ui-info-border);
    border-radius: var(--radius-control);
    color: var(--ui-text);
    background: var(--ui-info-bg);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.classroom-quiz-info b { color: var(--ui-info-text); }
.classroom-question-action {
    width: 100%;
    min-height: 44px;
    text-align: left;
}
.classroom-question-options,
.classroom-choice-options {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.classroom-choice-options { margin-top: var(--space-4); }
.classroom-choice-hint {
    margin-top: var(--space-2);
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.classroom-text-gap-passage { margin-top: var(--space-3); }
.classroom-answer-input {
    width: 100%;
    min-height: 120px;
    margin-top: var(--space-3);
    resize: vertical;
}
.classroom-answer-submit {
    width: 100%;
    min-height: 44px;
    margin-top: var(--space-2);
    padding: 11px 14px;
}
.classroom-active-question-title {
    color: var(--ui-text);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.classroom-question-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: var(--space-2);
    border-radius: var(--radius-control);
}
.classroom-answer-score {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid;
    border-radius: var(--radius-control);
    font-weight: 600;
}
.classroom-answer-score.is-correct {
    border-color: var(--ui-success-border);
    color: var(--ui-success-text);
    background: var(--ui-success-bg);
}
.classroom-answer-score.is-wrong {
    border-color: var(--ui-danger-border);
    color: var(--ui-danger-text);
    background: var(--ui-danger-bg);
}
.classroom-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    padding: 18px;
    background: var(--ui-modal-backdrop);
    backdrop-filter: blur(10px);
}
.classroom-modal {
    width: min(620px, 100%);
    max-height: min(720px, 90vh);
    overflow-y: auto;
    padding: 20px;
    border: 1px solid var(--ui-accent);
    border-radius: 10px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-float);
    color: var(--ui-text);
}
.classroom-invite-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.classroom-invite-head h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--ui-text);
    font-size: var(--type-section-size);
    line-height: var(--type-section-line);
    font-weight: 600;
}
.classroom-invite-head h3 i { color: var(--ui-accent); }
.classroom-invite-close {
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}
.classroom-invite-description {
    margin: var(--space-2) 0 var(--space-4);
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.classroom-saved-room-dialog { width: min(520px, 100%); overflow: visible; }
.classroom-saved-room-dialog .classroom-invite-head { align-items: flex-start; margin-bottom: var(--space-4); }
.classroom-saved-room-dialog .classroom-invite-head > div { min-width: 0; }
.classroom-saved-room-dialog .classroom-invite-head p { margin: 5px 0 0; color: var(--ui-text-muted); font-size: 13px; line-height: 1.45; }
.classroom-saved-room-dialog > label { display: block; margin-bottom: 7px; color: var(--ui-text); font-size: 13px; font-weight: 600; }
.classroom-saved-room-dialog > input {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--ui-control-border);
    border-radius: 7px;
    background: var(--ui-input-bg);
    color: var(--ui-text);
    font: inherit;
}
.classroom-saved-room-dialog > input:focus { border-color: var(--ui-accent); outline: none; box-shadow: var(--ui-focus-ring); }
.classroom-saved-room-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }
.classroom-saved-room-dialog-actions button { min-height: 44px; margin: 0; }
.classroom-invite-actions { margin-top: var(--space-4); }
.classroom-invite-send { flex: 1 1 200px; min-height: 44px; padding: 11px 14px; }
.classroom-invite-copy { min-height: 44px; padding: 11px 14px; }
.classroom-invite-search { position:relative;display:block;margin:0 0 8px; }
.classroom-invite-search > i { position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ui-accent);font-size:20px;pointer-events:none; }
.classroom-invite-search input { width:100%;min-height:46px;margin:0;padding-left:43px;border-color:var(--ui-control-border); }
.classroom-invite-search-count { min-height:18px;margin:0 0 10px;color:var(--ui-text-muted);font-size:12px; }
.classroom-invite-groups { display:grid;gap:8px;margin:0 0 12px; }
.classroom-invite-section-title { display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:var(--ui-text);font-size:13px; }
.classroom-invite-section-title small,.classroom-invite-groups-empty { color:var(--ui-text-muted);font-size:12px; }
.classroom-invite-group-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:176px;overflow:auto; }
.classroom-group-row { min-width:0;padding:9px 10px;border-color:var(--ui-border);background:var(--ui-surface-alt); }
.classroom-group-row span { min-width:0; }
.classroom-group-row b,.classroom-group-row small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.classroom-group-row input:disabled + span { opacity:.55; }
.classroom-invite-selected { display:grid; gap:8px; margin:0 0 12px; padding:10px; border:1px solid var(--ui-border); border-radius:8px; background:var(--ui-surface-alt); }
.classroom-invite-selected > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--ui-text); font-size:13px; }
.classroom-invite-selected-count { display:grid; min-width:24px; height:24px; place-items:center; border-radius:99px; color:var(--ui-accent); background:var(--ui-accent-soft); font-weight:600; }
.classroom-invite-selected-list { display:flex; flex-wrap:wrap; gap:6px; max-height:112px; overflow:auto; }
.classroom-invite-selected-list button { display:flex; align-items:center; gap:5px; max-width:100%; min-height:44px; padding:7px 10px; border-color:var(--ui-border); border-radius:var(--radius-control); color:var(--ui-text); background:var(--ui-bg); font-size:var(--type-badge-size); }
.classroom-invite-selected-list button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.classroom-invite-selected-list button i { color:var(--ui-accent); font-size:17px; }.classroom-invite-selected-list small { color:var(--ui-text-muted); font-size:12px; }
.classroom-invite-link-note { display:flex; gap:8px; align-items:flex-start; margin:12px 0 0; padding:10px 12px; border:1px solid var(--ui-info-border); border-radius:7px; color:var(--ui-info-text); background:var(--ui-info-bg); font-size:13px; line-height:1.45; }
.classroom-invite-link-note i { color:var(--ui-info-text); font-size:18px; flex:0 0 auto; margin-top:1px; }
.classroom-student-row[hidden] { display:none; }
@media (max-width:640px) { .classroom-invite-group-list { grid-template-columns:1fr; } .classroom-invite-section-title { align-items:flex-start;flex-direction:column;gap:2px; } }
@media (max-width:760px) {
    .classroom-session-row,
    .classroom-student-session { align-items: stretch; flex-direction: column; }
    .classroom-row-actions,
    .classroom-join-action,
    .classroom-invite-actions button { width: 100%; }
    .classroom-row-actions button { flex: 1 1 140px; }
    .classroom-saved-room-row .classroom-row-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .classroom-saved-room-row .classroom-row-actions button { width: auto; min-width: 0; font-size: 14px; }
    .classroom-saved-room-row .classroom-row-actions button:first-child { grid-column: 1 / -1; }
    .classroom-template-main-action { flex-basis: 100%; }
}
.teacher-sales-promo-backdrop {
    z-index: 1600;
}
.teacher-sales-promo-modal {
    position: relative;
    width: min(720px, 100%);
    border-color: var(--ui-accent);
    background:
        linear-gradient(135deg, var(--ui-accent-soft), transparent 42%),
        var(--ui-surface);
}
.teacher-sales-promo-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 8px;
    font-size: 26px;
    line-height: 1;
}
.teacher-sales-promo-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--ui-accent);
    font-weight: 600;
    letter-spacing:.04em;
}
.teacher-sales-promo-modal h3 {
    margin: 0 44px 12px 0;
    color: var(--ui-text);
    font-size: 26px;
    line-height: 1.18;
}
.teacher-sales-promo-lead {
    margin: 0 0 16px;
    color: var(--ui-text);
    font-size: 17px;
    line-height: 1.5;
}
.teacher-sales-promo-copy {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}
.teacher-sales-promo-copy p {
    margin: 0;
    color: var(--ui-text-muted);
    line-height: 1.55;
}
.teacher-sales-promo-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin: 18px 0;
}
.teacher-sales-promo-benefits span {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface-alt);
    color: var(--ui-text);
    line-height: 1.35;
}
.teacher-sales-promo-benefits i {
    color: var(--ui-success-text);
    font-size: 20px;
    flex: 0 0 auto;
}
.teacher-sales-promo-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}
.teacher-sales-promo-actions button {
    padding: 12px 16px;
}
.classroom-student-list {
    display: grid;
    gap: 10px;
}
.classroom-student-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-bg);
    cursor: pointer;
}
.classroom-student-row input {
    width: 18px;
    height: 18px;
}
.classroom-student-row span {
    display: grid;
    gap: 2px;
}
.classroom-student-row small {
    color: var(--ui-text-muted);
}

@media (max-width: 1024px) {
    .classroom-start-grid,
    .classroom-template-form {
        grid-template-columns: 1fr;
    }
    .classroom-topbar {
        left: 8px;
        right: 8px;
        top: 8px;
        gap: 8px;
        padding: 8px;
    }
    .classroom-topbar h2 {
        font-size: 15px;
    }
    .classroom-topbar span {
        font-size: var(--type-meta-size);
    }
    .classroom-topbar button {
        padding: 8px 9px;
    }
    .classroom-topbar button:not(:first-child) {
        font-size: 0;
    }
    .classroom-topbar button i {
        font-size: 18px;
    }
    .classroom-video-panel {
        top: 72px;
        right: 8px;
        width: min(430px, calc(100vw - 16px));
        max-height: calc(100vh - 150px);
    }
    .classroom-video-grid { max-height: 42vh; }
    .classroom-modal-backdrop {
        place-items: start center;
        overflow-y: auto;
        padding: 10px;
    }
    .classroom-video-preflight {
        width: 100%;
        max-height: calc(100dvh - 20px);
        margin: auto 0;
        padding: 14px;
        box-sizing: border-box;
    }
    .classroom-video-moderation {
        width:100%;
        max-height:calc(100dvh - 20px);
        margin:auto 0;
        padding:14px;
        box-sizing:border-box;
    }
    .classroom-video-moderation-row { display:flex; align-items:flex-start; flex-direction:column; }
    .classroom-video-moderation-actions { width:100%; }
    .classroom-video-moderation-actions button { flex:1; }
    .classroom-video-moderation-footer { display:grid; grid-template-columns:1fr; }
    .classroom-video-raised-hands { width:100%; max-height:calc(100dvh - 20px); margin:auto 0; padding:14px; box-sizing:border-box; }
    .classroom-video-preflight-preview {
        aspect-ratio: 4 / 3;
        max-height: min(34dvh, 250px);
    }
    .classroom-video-preflight .classroom-template-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .classroom-video-background-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .classroom-video-preflight-actions {
        bottom: -14px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 10px 0 2px;
    }
    .classroom-video-preflight-actions button {
        min-width: 0 !important;
        width: 100%;
    }
    .classroom-video-preflight-connect {
        grid-column: 1 / -1;
        order: -1;
    }
    .classroom-video-call-launch-actions {
        grid-template-columns: 1fr;
    }
    .classroom-fullscreen.classroom-video-only .classroom-video-panel {
        top: 72px;
        right: 8px;
        bottom: 8px;
        left: 8px;
    }
    .classroom-fullscreen.classroom-webinar-only .classroom-video-panel {
        top: 72px;
        right: 8px;
        bottom: 228px;
        left: 8px;
    }
    .classroom-fullscreen.classroom-webinar-only .classroom-webinar-chat {
        top: auto;
        right: 8px;
        bottom: 8px;
        left: 8px;
        width: auto;
        height: 212px;
    }
    .classroom-webinar-cohost { font-size: var(--type-meta-size); }
    .classroom-floating-toolbar {
        top: 72px;
        left: 8px;
        right: 8px;
        transform: none;
        max-width: none;
        justify-content: flex-start;
        overflow: visible;
        flex-wrap: nowrap;
        padding: 8px;
    }
    .classroom-toolbar-toggle {
        top: 72px;
        right: 8px;
    }
    .classroom-toolbar-collapse-btn {
        display: none !important;
    }
    .classroom-floating-toolbar button,
    .classroom-floating-toolbar input[type="color"],
    .classroom-floating-toolbar select,
    .classroom-brush-group,
    .classroom-fill-group {
        flex: 0 0 auto;
    }
    .classroom-floating-toolbar input[type="range"] {
        flex: 0 0 90px;
    }
    .classroom-toolbar-menu-popover {
        position:fixed;
        top:var(--classroom-menu-top, 132px);
        right:var(--classroom-menu-right, 8px);
        left:8px;
        grid-template-columns:repeat(3, minmax(40px, 1fr));
        width:auto;
        max-height:var(--classroom-menu-max-height, calc(100dvh - 148px));
        overflow-y:auto;
    }
    .classroom-toolbar-menu.opens-up .classroom-toolbar-menu-popover {
        top:auto;
        bottom:var(--classroom-menu-bottom, 8px);
    }
    .classroom-toolbar-menu-popover > select,
    .classroom-toolbar-menu-popover .classroom-brush-group,
    .classroom-toolbar-menu-popover .classroom-fill-group { grid-column:span 3; }
    .classroom-side {
        position: absolute;
        top: auto;
        bottom: 10px;
        width: calc(50vw - 14px);
        max-height: 30vh;
        padding: 10px;
    }
    .classroom-side.left { left: 8px; }
    .classroom-side.right { right: 8px; }
    .classroom-panel-reopen {
        top: 128px;
        bottom: auto;
        transform: none;
        padding: 9px 11px;
    }
    .classroom-panel-reopen.left { left: 8px; }
    .classroom-panel-reopen.right { right: 8px; }
    .classroom-hint { display: none; }
    .classroom-guide-overlay { align-items:flex-end;padding:12px; }.classroom-guide-card { padding:16px; }.classroom-guide-card h3 { font-size:19px; }.classroom-guide-actions { flex-direction:column; }.classroom-guide-actions > div { width:100%; }.classroom-guide-actions > div button { flex:1; }
}

@media (max-width: 640px) {
    .classroom-side {
        width: calc(100vw - 16px);
        max-height: 24vh;
        left: 8px !important;
        right: 8px !important;
    }
    .classroom-side.left {
        bottom: calc(24vh + 18px);
    }
    .classroom-side.right {
        bottom: 8px;
    }
    .classroom-panel-overlay {
        left: 8px;
        right: 8px;
        top: 64px;
        bottom: 8px;
    }
    .classroom-panel-reopen span {
        display: none;
    }
}
.author-tag { 
    display: inline-flex; align-items: center; gap: 5px; background: transparent;
    padding: 4px 8px; border-radius: 4px; font-size: 12px; color: var(--ui-text-muted);
    margin-bottom: 10px; border: 1px solid var(--ui-border);
}

/* Карточка курса: компактная структура вместо набора разрозненных инлайн-стилей. */
.course-teacher-badge { display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:2px 7px; border:1px solid var(--ui-accent); border-radius:999px; color:var(--ui-accent); font-size:var(--type-badge-size); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.course-teacher-badge.is-founder { border-color:var(--ui-warning-border); color:var(--ui-warning-text); }
.course-summary { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; margin:16px 0; }
.course-summary-item { display:grid; min-height:66px; padding:10px 8px; place-content:center; border:1px solid var(--ui-border); border-radius:var(--radius-control); background:var(--ui-input-bg); text-align:center; }
.course-summary-item b { display:block; color:var(--ui-text); font-size:18px; line-height:1.1; }
.course-summary-item span { margin-top:4px; color:var(--ui-text-muted); font-size:var(--type-meta-size); line-height:var(--type-meta-line); }
.course-price-wrap { margin-bottom:4px; }
.course-price-old { color:var(--ui-text-muted); font-size:12px; text-decoration:line-through; }
.course-price { margin:0; }
.course-action-button { display:inline-flex; width:100%; min-height:44px; align-items:center; justify-content:center; gap:8px; }
.course-action-button-primary { border-color:var(--ui-accent); background:var(--ui-accent); color:var(--ui-on-accent); }
.course-action-button-installment { border-color:var(--ui-success-border); background:var(--ui-success-bg); color:var(--ui-success-text); }
.course-purchase-actions { display:grid; gap:10px; }
.course-installment-note,.course-legal-note { color:var(--ui-text-muted); font-size:var(--type-meta-size); line-height:var(--type-meta-line); text-align:center; }
.course-legal-note { margin-top:8px; }
.course-legal-note a { color:var(--ui-accent); }
.course-details-modal-content { width:min(760px, 100%); max-height:min(85vh, 900px); overflow-y:auto; }
.course-details-header { display:flex; flex-direction:column; align-items:flex-start; gap:9px; padding:2px 38px 18px 0; border-bottom:1px solid var(--ui-border); }
.course-details-header h2 { margin:0; color:var(--ui-text); font-size:clamp(22px, 4vw, 29px); line-height:1.2; }
.course-details-header .author-tag { margin:0; }
.course-details-section { margin:18px 0; padding:16px; border:1px solid var(--ui-border); border-radius:var(--radius-surface); background:var(--ui-surface-alt); }
.course-details-section h3 { margin:0 0 10px; color:var(--ui-accent); font-size:16px; }
.course-details-description { color:var(--ui-text); line-height:1.6; white-space:pre-wrap; }
.course-details-program ol { display:flex; flex-direction:column; gap:9px; margin:0; padding-left:22px; }
.course-details-program li { color:var(--ui-text); line-height:1.4; }
.course-details-footer { display:grid; gap:12px; padding-top:16px; border-top:1px solid var(--ui-border); }
.course-program-list { display:flex; flex-direction:column; gap:var(--space-2); margin:0; padding-left:22px; }
.course-program-list li { color:var(--ui-text); line-height:1.4; }
.course-empty-copy { margin:0; color:var(--ui-text-muted); }
.course-grid-empty { grid-column:1 / -1; }
.course-catalog-card,
.student-owned-course-card { display:flex; min-width:0; flex-direction:column; }
.course-cover.empty {
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--ui-border);
    background:var(--ui-input-bg);
    color:var(--ui-text-muted);
}
.course-cover.empty i { font-size:32px; }
.course-bonus-row { margin:var(--space-2) 0; }
.course-card-title { margin:0 0 var(--space-1); overflow-wrap:anywhere; }
.course-card-description { min-height:56px; margin:0 0 10px; color:var(--ui-text); font-size:var(--type-meta-size); line-height:var(--type-meta-line); }
.course-rating { margin-bottom:10px; color:var(--ui-warning-text); font-size:var(--type-control-size); }
.course-rating.empty { color:var(--ui-text-muted); font-size:var(--type-badge-size); }
.course-rating a { margin-left:10px; color:var(--ui-accent); font-size:var(--type-badge-size); }
.course-details-button { width:100%; margin-bottom:10px; border-color:var(--ui-accent); background:transparent; color:var(--ui-accent); }
.course-card-price { display:flex; align-items:baseline; margin-bottom:var(--space-4); }
.trainer-catalog-heading { display:flex; align-items:center; gap:var(--space-2); margin-bottom:10px; color:var(--ui-text); font-weight:600; }
.trainer-catalog-heading i { color:var(--ui-accent); }
.trainer-catalog-details > button { width:100%; }
.pending-auth-note { margin-bottom:var(--space-4); padding:var(--space-3); border:1px solid var(--ui-accent); border-radius:var(--radius-control); background:var(--ui-accent-soft); color:var(--ui-text); font-size:var(--type-meta-size); line-height:var(--type-meta-line); }
.pending-auth-note b { color:var(--ui-accent); }
.public-course-state { padding:40px; color:var(--ui-text-muted); text-align:center; }
.public-course-state h2 { margin-top:0; color:var(--ui-text); }
.public-course-state a { color:var(--ui-accent); }
.public-course-cover { width:100%; aspect-ratio:1; object-fit:cover; border:1px solid var(--ui-border); border-radius:var(--radius-control); }
.public-course-cover.empty { display:flex; align-items:center; justify-content:center; background:var(--ui-input-bg); color:var(--ui-text-muted); }
.public-course-cover.empty i { font-size:42px; }
.public-course-title { margin:10px 0 var(--space-2); color:var(--ui-text); font-size:var(--type-page-size); line-height:var(--type-page-line); overflow-wrap:anywhere; }
.public-course-preview-label { margin-bottom:14px; color:var(--ui-text-muted); }
.public-course-price { margin:18px 0; }
.public-course-info h3 { margin-top:0; color:var(--ui-accent); }
.public-course-description { color:var(--ui-text); line-height:1.55; white-space:pre-wrap; }
.student-owned-course-card { border-color:var(--ui-success-border); }
.student-owned-course-card.is-private { border-color:var(--ui-accent); }
.student-owned-course-card .course-card-title { margin-bottom:var(--space-2); }
.course-access-note { margin:-8px 0 14px; color:var(--ui-text-muted); font-size:var(--type-badge-size); }
.course-progress {
    display:block;
    width:100%;
    height:8px;
    margin:var(--space-4) 0;
    overflow:hidden;
    border:0;
    border-radius:999px;
    appearance:none;
    background:var(--ui-border);
}
.course-progress::-webkit-progress-bar { border-radius:999px; background:var(--ui-border); }
.course-progress::-webkit-progress-value { border-radius:999px; background:var(--ui-success-text); transition:width var(--motion-slow) var(--motion-ease); }
.course-progress::-moz-progress-bar { border-radius:999px; background:var(--ui-success-text); }
.course-progress.accent::-webkit-progress-value { background:var(--ui-accent); }
.course-progress.accent::-moz-progress-bar { background:var(--ui-accent); }
.course-progress-copy { margin:0 0 20px; color:var(--ui-text-muted); font-size:var(--type-meta-size); font-variant-numeric:tabular-nums; }
.course-card-actions { display:grid; gap:10px; }
.course-card-actions.split { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.course-card-actions button { width:100%; min-width:0; }
.student-teacher-username { color:var(--ui-text-muted); font-size:var(--type-badge-size); }
.student-teacher-status { color:var(--ui-accent); font-size:var(--type-badge-size); }
@media (max-width:560px) { .course-summary { gap:6px; } .course-summary-item { min-height:60px; padding:8px 4px; } .course-summary-item b { font-size:16px; } .course-details-section { margin:14px 0; padding:13px; } .course-details-modal-content { padding:18px; } }

/* Тариф и лимиты: сначала состояние аккаунта, затем детали и дальнейшие действия. */
.teacher-plan-card { display:grid; gap:16px; padding:22px; border:1px solid var(--ui-control-border); border-radius:var(--radius-surface); background:var(--ui-surface-alt); }
.teacher-plan-card.has-catalog { border-color:var(--ui-success-border); }
.teacher-plan-card.is-founder { border-color:var(--ui-warning-border); background:var(--ui-warning-bg); }
.teacher-plan-card-heading span { display:inline-flex; align-items:center; gap:6px; color:var(--ui-accent); font-size:var(--type-badge-size); font-weight:600; letter-spacing:.04em; }
.teacher-plan-card.is-founder .teacher-plan-card-heading span { color:var(--ui-warning-text); }
.teacher-plan-card-heading h3 { margin:6px 0 4px; color:var(--ui-text); font-size:23px; }
.teacher-plan-card-heading p { margin:0; color:var(--ui-text-muted); line-height:1.45; }
.teacher-plan-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.teacher-plan-metrics > div { display:grid; min-height:76px; align-content:center; gap:3px; padding:10px 12px; border:1px solid var(--ui-border); border-radius:var(--radius-control); background:var(--ui-input-bg); }
.teacher-plan-metrics span,.teacher-plan-metrics small { color:var(--ui-text-muted); font-size:var(--type-meta-size); line-height:var(--type-meta-line); }
.teacher-plan-metrics strong { overflow:hidden; color:var(--ui-text); font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
.teacher-plan-metrics .is-warning strong,.teacher-storage-meter.is-warning b { color:var(--ui-warning-text); }
.teacher-plan-metrics .is-danger strong,.teacher-storage-meter.is-danger b { color:var(--ui-danger-text); }
.teacher-storage-meter { display:grid; gap:7px; }
.teacher-storage-meter > div { display:flex; justify-content:space-between; gap:10px; color:var(--ui-text-muted); font-size:12px; }
.teacher-storage-meter b { color:var(--ui-accent); }
.teacher-storage-meter i { display:block; height:8px; overflow:hidden; border:1px solid var(--ui-border); border-radius:999px; background:var(--ui-input-bg); }
.teacher-storage-meter em { display:block; height:100%; border-radius:inherit; background:var(--ui-accent); box-shadow:none; }
.teacher-storage-meter.is-warning em { background:var(--ui-warning-text); box-shadow:none; }
.teacher-storage-meter.is-danger em { background:var(--ui-danger-text); box-shadow:none; }
.teacher-plan-access { display:flex; flex-wrap:wrap; gap:8px; }
.teacher-plan-access span { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border:1px solid var(--ui-border); border-radius:999px; color:var(--ui-text-muted); font-size:12px; }
.teacher-plan-access span.is-on { border-color:var(--ui-success-border); color:var(--ui-success-text); background:var(--ui-success-bg); }
.teacher-plan-notice { margin:0; padding:10px 12px; border:1px solid var(--ui-border); border-radius:var(--radius-control); color:var(--ui-text); font-size:13px; line-height:1.5; background:var(--ui-surface-alt); }
.teacher-plan-notice.is-success { border-color:var(--ui-success-border); color:var(--ui-success-text); }
.teacher-plan-notice.is-warning,.teacher-plan-renewal { border-color:var(--ui-warning-border); color:var(--ui-warning-text); background:var(--ui-warning-bg); }
.teacher-plan-renewal { padding:12px; border:1px solid var(--ui-warning-border); border-radius:var(--radius-control); }
.teacher-plan-renewal p { margin:0 0 10px; color:var(--ui-text); font-size:13px; line-height:1.45; }
.teacher-plan-action { width:fit-content; min-height:44px; }
@media (max-width:620px) { .teacher-plan-card { padding:16px; } .teacher-plan-metrics { grid-template-columns:1fr; } .teacher-plan-metrics > div { min-height:0; } .teacher-plan-action { width:100%; } }

.teacher-tariff-card { display:flex; min-width:0; min-height:100%; flex-direction:column; gap:12px; padding:18px; border:1px solid var(--ui-border); border-radius:var(--radius-surface); background:var(--ui-surface); transition:border-color var(--motion-base) var(--motion-ease), background-color var(--motion-base) var(--motion-ease); }
.teacher-tariff-card:hover { border-color:var(--ui-control-border); background:var(--ui-surface-alt); }
.teacher-tariff-card.is-addon { border-style:dashed; }
.teacher-tariff-card.is-trial { border-color:var(--ui-success-border); }
.teacher-tariff-card.is-leads { border-color:var(--ui-accent); }
.teacher-tariff-card.is-sales-main { border-color:var(--ui-success-border); box-shadow:none; }
.teacher-tariff-badge { width:fit-content; padding:5px 9px; border:1px solid var(--ui-success-border); border-radius:999px; color:var(--ui-success-text); background:var(--ui-success-bg); font-size:var(--type-badge-size); font-weight:600; }
.teacher-tariff-card h3 { margin:0; color:var(--ui-text); font-size:18px; line-height:1.3; }
.teacher-tariff-card > p { flex:1; margin:0; color:var(--ui-text-muted); line-height:1.6; }
.teacher-tariff-card .price-tag { margin:0; }
.teacher-tariff-features { display:flex; flex:1; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; color:var(--ui-text-muted); line-height:1.45; }
.teacher-tariff-features li { position:relative; padding-left:19px; }
.teacher-tariff-features li::before { position:absolute; left:0; color:var(--ui-success-text); content:'✓'; font-weight:600; }
.teacher-tariff-card label { color:var(--ui-text-muted) !important; }
.teacher-tariff-card input { margin-bottom:0 !important; }
.teacher-tariff-field-label { color:var(--ui-text-muted); font-size:var(--type-badge-size); }
.teacher-tariff-field { margin-bottom:var(--space-3) !important; }
.teacher-tariff-promo { margin-bottom:var(--space-2) !important; text-transform:uppercase; }
.teacher-tariff-field-hint { margin-bottom:var(--space-3); color:var(--ui-text-muted); font-size:var(--type-meta-size); line-height:1.4; }
.teacher-tariff-action { width:100%; min-height:44px; margin-top:auto; }
.teacher-tariff-legal { margin-top:2px; color:var(--ui-text-muted); font-size:var(--type-meta-size); line-height:var(--type-meta-line); text-align:center; }
.teacher-tariff-legal a { color:var(--ui-accent); }
.teacher-tariff-card.is-requested { outline:2px solid var(--ui-success-text); outline-offset:2px; }
.teacher-ai-package-card { padding:var(--space-4); }
.teacher-ai-package-card p { margin:0; line-height:1.55; }
.teacher-ai-package-card p + p { margin-top:var(--space-2); color:var(--ui-text-muted); font-size:var(--type-meta-size); line-height:1.5; }
.teacher-payment-explainer { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.teacher-payment-explainer > div { display:grid; grid-template-columns:32px minmax(0,1fr); gap:9px; padding:14px; border:1px solid var(--ui-border); border-radius:var(--radius-control); background:var(--ui-surface-alt); }
.teacher-payment-explainer > div > span { display:grid; width:32px; height:32px; place-items:center; border:1px solid var(--ui-control-border); border-radius:50%; color:var(--ui-accent); font-weight:600; }
.teacher-payment-explainer p { margin:0; color:var(--ui-text-muted); font-size:13px; line-height:1.5; }
.teacher-payment-explainer b { display:block; margin-bottom:3px; color:var(--ui-text); }
.teacher-payment-explainer aside { display:flex; grid-column:1 / -1; align-items:center; gap:12px; padding:14px; border:1px solid var(--ui-warning-border); border-radius:var(--radius-control); background:var(--ui-warning-bg); }
.teacher-payment-explainer aside > i { color:var(--ui-warning-text); font-size:24px; }
.teacher-payment-explainer aside p { flex:1; }
@media (max-width:760px) { .teacher-payment-explainer { grid-template-columns:1fr; } .teacher-payment-explainer aside { grid-column:auto; align-items:flex-start; flex-wrap:wrap; } .teacher-payment-explainer aside button { width:100%; } }

/* Мобильная навигация сохраняет приоритеты: основные действия видны, остальные — в «Ещё». */
@media (max-width:760px) { .teacher-main { padding-inline:12px; } .teacher-courses-library-head { gap:12px; } .teacher-courses-create-btn { width:100%; } .teacher-tariff-section > h4 { font-size:18px; } }

/* === АДМИНКА === */
.admin-panel { display:flex; flex-direction:column; gap:var(--space-5); }
.admin-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; }
.admin-page-title { margin:0; color:var(--ui-text); }
.admin-card-title { margin:0; color:var(--ui-text); }
.admin-card-title + .admin-section-note,
.admin-page-title + .admin-section-note { margin:var(--space-2) 0 0; }
.admin-card-note { margin:calc(var(--space-2) * -1) 0 0; line-height:var(--type-meta-line); }
.admin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--space-3); }
.admin-card { padding:var(--space-4); border:1px solid var(--ui-border); border-radius:var(--radius-surface); background:var(--ui-surface); }
.admin-card strong { display:block; margin-top:var(--space-2); color:var(--ui-accent); font-size:28px; line-height:1.1; }
.admin-muted { color:var(--ui-text-muted); font-size:var(--type-meta-size); }
.admin-meta-spaced { margin-top:var(--space-1); }
.admin-row-detail { margin-top:var(--space-2); }
.admin-danger-text { color:var(--ui-danger-text); }
.admin-toolbar { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.admin-toolbar-spaced { margin-bottom:var(--space-3); }
.admin-toolbar input,
.admin-toolbar select { min-width:160px; margin:0; }
.admin-table { display:flex; flex-direction:column; gap:var(--space-2); }
.admin-row { display:grid; grid-template-columns:minmax(180px,1.2fr) minmax(130px,.85fr) minmax(180px,1fr) minmax(210px,auto); align-items:center; gap:var(--space-3); padding:var(--space-3); border:1px solid var(--ui-border); border-radius:var(--radius-surface); background:var(--ui-input-bg); }
.admin-row-title { color:var(--ui-text); font-weight:600; }
.admin-actions { display:flex; justify-content:flex-end; gap:var(--space-2); flex-wrap:wrap; }
.admin-actions button { padding:9px 11px; font-size:var(--type-meta-size); }
.admin-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border:1px solid var(--ui-border); border-radius:999px; color:var(--ui-text-muted); background:var(--ui-surface-alt); font-size:var(--type-badge-size); }
.admin-login-method { display:flex; gap:6px; flex-wrap:wrap; margin-top:var(--space-2); }
.admin-status-inactive { border-color:var(--ui-warning-border); color:var(--ui-warning-text); background:var(--ui-warning-bg); }
.admin-status-archived { border-color:var(--ui-control-border); color:var(--ui-accent); background:var(--ui-accent-soft); }
.admin-promo-form { display:grid; grid-template-columns:1.1fr .9fr .7fr .7fr .7fr 1fr auto; align-items:end; gap:var(--space-2); }
.admin-promo-form input,
.admin-promo-form select { margin:0; }
.admin-plan-history { display:grid; gap:var(--space-2); margin-top:var(--space-3); }
.admin-plan-history-item { padding:var(--space-3); border:1px solid var(--ui-border); border-radius:var(--radius-surface); background:var(--ui-input-bg); }
.admin-plan-history-head { display:flex; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap; }
.admin-conversion-row,
.admin-client-error-row { display:grid; grid-template-columns:minmax(180px,1fr) auto; align-items:start; gap:var(--space-3); padding:var(--space-3); border:1px solid var(--ui-border); border-radius:var(--radius-surface); background:var(--ui-input-bg); }
.admin-conversion-row.is-failed,
.admin-client-error-row { border-color:var(--ui-danger-border); }
.admin-conversion-status { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border:1px solid var(--ui-success-border); border-radius:999px; color:var(--ui-success-text); background:var(--ui-success-bg); font-size:var(--type-badge-size); white-space:nowrap; }
.admin-conversion-row.is-failed .admin-conversion-status,
.admin-conversion-status.is-danger { border-color:var(--ui-danger-border); color:var(--ui-danger-text); background:var(--ui-danger-bg); }
.admin-client-error-row code { overflow-wrap:anywhere; color:var(--ui-text); white-space:pre-wrap; }
.admin-access-denied { border-color:var(--ui-danger-border); color:var(--ui-danger-text); background:var(--ui-danger-bg); }
.admin-access-overlay { position:fixed; inset:0; z-index:12000; display:flex; align-items:center; justify-content:center; padding:var(--space-5); background:var(--ui-modal-backdrop); }
.admin-access-dialog,
.admin-plan-dialog { overflow:auto; padding:var(--space-5); border:1px solid var(--ui-control-border); border-radius:var(--radius-surface); background:var(--ui-surface); box-shadow:var(--ui-shadow-float); }
.admin-access-dialog { width:min(760px,100%); max-height:min(760px,calc(100vh - 40px)); }
.admin-plan-dialog { width:min(620px,100%); }
.admin-access-head,
.admin-access-item-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); }
.admin-plan-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); margin-top:var(--space-4); }
.admin-plan-form label { display:grid; gap:6px; color:var(--ui-text-muted); font-size:var(--type-meta-size); }
.admin-plan-form input,
.admin-plan-form select,
.admin-plan-form textarea { margin:0; }
.admin-plan-form .admin-plan-wide { grid-column:1 / -1; }
.admin-access-summary { padding:var(--space-3); border:1px solid var(--ui-border); border-radius:var(--radius-surface); background:var(--ui-input-bg); }
.admin-access-summary.is-ready { border-color:var(--ui-success-border); background:var(--ui-success-bg); }
.admin-access-summary.is-warning { border-color:var(--ui-warning-border); background:var(--ui-warning-bg); }
.admin-access-summary strong { display:block; margin:0 0 var(--space-1); color:var(--ui-text); font-size:18px; }
.admin-access-summary-primary { margin-top:var(--space-4); }
.admin-access-summary-secondary { margin-top:var(--space-2); }
.admin-access-summary .admin-access-summary-title { font-size:15px; }
.admin-access-summary-meta { margin-top:var(--space-2); }
.admin-access-section { margin-top:var(--space-4); }
.admin-access-list { display:flex; flex-direction:column; gap:var(--space-2); margin-top:var(--space-3); }
.admin-access-exam { padding:var(--space-3); border:1px solid var(--ui-border); border-radius:var(--radius-surface); background:var(--ui-input-bg); }
.admin-access-exam h4 { margin:0; color:var(--ui-text); font-size:16px; }
.admin-access-state { flex:none; padding:4px 8px; border:1px solid var(--ui-border); border-radius:999px; color:var(--ui-text-muted); background:var(--ui-surface-alt); font-size:var(--type-badge-size); }
.admin-access-state.available { border-color:var(--ui-success-border); color:var(--ui-success-text); background:var(--ui-success-bg); }
.admin-access-state.expired,
.admin-access-state.closed { border-color:var(--ui-danger-border); color:var(--ui-danger-text); background:var(--ui-danger-bg); }
.admin-access-state.in_progress,
.admin-access-state.pending_review,
.admin-access-state.pending_release { border-color:var(--ui-warning-border); color:var(--ui-warning-text); background:var(--ui-warning-bg); }
.admin-access-actions { margin-top:var(--space-4); }
@media (max-width:760px) {
    .admin-card { padding:var(--space-3); }
    .admin-row { grid-template-columns:1fr; align-items:stretch; }
    .admin-row .admin-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch; }
    .admin-row .admin-actions button { width:100%; min-width:0; min-height:48px; padding:9px 10px; overflow-wrap:break-word; line-height:1.2; white-space:normal; }
    .admin-row .admin-actions button:last-child:nth-child(odd) { grid-column:1 / -1; }
    .admin-promo-form,
    .admin-plan-form,
    .admin-conversion-row,
    .admin-client-error-row { grid-template-columns:1fr; }
    .admin-access-overlay { align-items:flex-end; padding:10px; }
    .admin-access-dialog,
    .admin-plan-dialog { max-height:calc(100vh - 20px); padding:var(--space-4); }
    .admin-access-head,
    .admin-access-item-head { gap:var(--space-2); }
}

/* === АНАЛИТИКА УЧИТЕЛЯ === */
.analytics-loading-state {
    display:grid;
    min-height:132px;
    place-content:center;
    justify-items:center;
    gap:var(--space-2);
    padding:var(--space-5);
    color:var(--ui-text-muted);
    text-align:center;
}
.analytics-loading-state i { color:var(--ui-accent); font-size:30px; }
.analytics-error-state {
    display:flex;
    align-items:center;
    gap:var(--space-2);
    margin:0;
    padding:var(--space-3);
    border:1px solid var(--ui-danger-border);
    border-radius:var(--radius-control);
    color:var(--ui-danger-text);
    background:var(--ui-danger-bg);
}
.analytics-test-chip b.success { color:var(--ui-success-text); }
.analytics-test-chip b.warning { color:var(--ui-warning-text); }
.analytics-test-chip b.danger { color:var(--ui-danger-text); }
.analytics-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
    padding: 6px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    overflow-x: auto;
}
.analytics-tab-btn {
    flex: 0 0 auto;
    background: transparent;
    color: var(--ui-text-muted);
    border-color: transparent;
    box-shadow: none;
    padding: 10px 14px;
}
.analytics-tab-btn.active {
    color: var(--ui-text);
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
    box-shadow: var(--ui-focus-ring);
}
.analytics-view { display: none; }
.analytics-view.active { display: block; }
.analytics-toolbar,
.student-progress-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}
.student-progress-toolbar {
    justify-content: space-between;
    margin-bottom: 15px;
}
.analytics-toolbar select {
    flex: 1;
    min-width: 220px;
    margin: 0;
    padding: 15px;
    background: var(--ui-input-bg);
}
.analytics-scope-toolbar #analytics-scope-type {
    flex: 0 0 150px;
}
.analytics-scope-toolbar #analytics-course-id {
    min-width: 260px;
}
.group-analytics-kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
    color: var(--ui-accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.group-analytics-kicker i { font-size: 17px; }
.group-analytics-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.group-analytics-heading h4 {
    margin: 0;
    color: var(--ui-text);
    font-size: 22px;
}
.group-analytics-heading p {
    margin: 6px 0 0;
    color: var(--ui-text);
    font-size: 13px;
}
.group-analytics-health {
    flex: 0 0 auto;
    padding: 8px 10px;
    border: 1px solid var(--ui-info-border);
    border-radius: 7px;
    color: var(--ui-info-text);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.group-analytics-health i { margin-right: 5px; }
.group-analytics-insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px;
    margin: 0 0 18px;
}
.group-analytics-insight {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    min-height: 74px;
    padding: 13px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
}
.group-analytics-insight > i { color: var(--ui-accent); font-size: 22px; }
.group-analytics-insight.warning > i { color: var(--ui-warning-text); }
.group-analytics-insight.danger > i { color: var(--ui-danger-text); }
.group-analytics-insight.success > i { color: var(--ui-success-text); }
.group-analytics-insight b,
.group-analytics-insight span { display: block; }
.group-analytics-insight b { color: var(--ui-text); font-size: 13px; }
.group-analytics-insight span { margin-top: 4px; color: var(--ui-text); font-size: 12px; line-height: 1.35; }
.group-topic-list,
.group-score-distribution,
.group-analytics-funnel { display: grid; gap: 10px; margin-top: 14px; }
.group-topic-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ui-border);
}
.group-topic-row:last-child { border-bottom: 0; padding-bottom: 0; }
.group-topic-row b,
.group-topic-row small { display: block; }
.group-topic-row b { color: var(--ui-text); font-size: 14px; }
.group-topic-row small { color: var(--ui-text-muted); font-size: 12px; margin-top: 4px; }
.group-topic-row strong { font-size: 17px; }
.group-score-distribution > div { display: grid; gap: 5px; }
.group-score-distribution > div > div { display: flex; justify-content: space-between; gap: 12px; color: var(--ui-text); font-size: 13px; }
.group-score-distribution > div > div b { font-size: 15px; }
.group-score-distribution i,
.group-analytics-funnel i {
    display: block;
    height: 7px;
    border-radius: 7px;
    background: var(--ui-input-bg);
    overflow: hidden;
}
.group-score-distribution em,
.group-analytics-funnel em { display: block; height: 100%; border-radius: inherit; background: var(--ui-accent); }
.group-score-distribution .danger em { background: var(--ui-danger-text); }
.group-score-distribution .warning em { background: var(--ui-warning-text); }
.group-score-distribution .success em { background: var(--ui-success-text); }
.group-score-distribution small { color: var(--ui-text-muted); font-size: var(--type-meta-size); line-height:var(--type-meta-line); }
.group-analytics-funnel { grid-template-columns: repeat(6, minmax(108px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
.group-analytics-funnel-step { display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: start; gap: 8px; min-width: 108px; }
.group-analytics-funnel-step > span {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 1px solid var(--ui-accent);
    border-radius: 50%;
    color: var(--ui-accent);
    font-size: 12px;
    font-weight: 600;
}
.group-analytics-funnel-step b,
.group-analytics-funnel-step small { display: block; }
.group-analytics-funnel-step b { color: var(--ui-text); font-size: 18px; line-height: 1; }
.group-analytics-funnel-step small { min-height: 30px; margin: 4px 0 6px; color: var(--ui-text-muted); font-size: var(--type-meta-size); line-height: var(--type-meta-line); }
.compact-export-button {
    white-space: nowrap;
}
.compact-export-button i {
    font-size: 18px;
}
.analytics-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.analytics-metric-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 16px;
    min-height: 82px;
}
.analytics-metric-card span {
    display: block;
    color: var(--ui-text-muted);
    font-size: var(--type-badge-size);
    font-weight: 600;
    letter-spacing:.04em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.analytics-metric-card b {
    display: block;
    color: var(--ui-text);
    font-size: 30px;
    line-height: 1;
}
.analytics-metric-primary { border-color: var(--ui-accent); }
.analytics-metric-primary b { color: var(--ui-accent); }
.analytics-metric-success { border-color: var(--ui-success-border); }
.analytics-metric-success b { color: var(--ui-success-text); }
.analytics-metric-warning { border-color: var(--ui-warning-border); }
.analytics-metric-warning b { color: var(--ui-warning-text); }
.analytics-two-col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.analytics-panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 18px;
}
.analytics-panel summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--ui-text);
    font-weight: 600;
}
.analytics-panel summary::-webkit-details-marker { display: none; }
.analytics-panel summary b {
    color: var(--ui-accent);
    white-space: nowrap;
}
.analytics-panel h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.analytics-panel-note {
    margin: 12px 0 0;
    color: var(--ui-text-muted);
    font-size: 13px;
    line-height: 1.4;
}
.group-question-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}
.group-question-toolbar h4 { margin-bottom: 0; }
.group-question-toolbar label {
    min-width: min(100%, 330px);
    display: grid;
    gap: 7px;
    color: var(--ui-text-muted);
    font-size: 13px;
}
.group-question-toolbar select {
    min-height: 44px;
    border: 1px solid var(--ui-control-border);
    border-radius: 7px;
    background: var(--ui-input-bg);
    color: var(--ui-text);
    padding: 9px 36px 9px 12px;
}
.group-question-empty {
    min-height: 175px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    border: 1px dashed var(--ui-border);
    border-radius: 7px;
    color: var(--ui-text-muted);
    text-align: center;
}
.group-question-empty i { color: var(--ui-accent); font-size: 32px; }
.group-question-empty b { color: var(--ui-text); }
.group-question-empty span { max-width: 380px; font-size: 13px; }
.group-question-context {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 16px 0 10px;
    color: var(--ui-text-muted);
    font-size: 13px;
}
.group-question-context i { color: var(--ui-accent); font-size: 17px; }
.group-question-list { display: grid; gap: 10px; }
.group-question-card {
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-input-bg);
    overflow: hidden;
}
.group-question-card summary {
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 13px 15px;
    list-style: none;
}
.group-question-card summary::-webkit-details-marker { display: none; }
.group-question-card summary > div:first-child { min-width: 0; display: grid; gap: 5px; }
.group-question-card summary span { color: var(--ui-text-muted); font-size: 12px; }
.group-question-card summary b {
    overflow: hidden;
    color: var(--ui-text);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
}
.group-question-score { display: grid; gap: 3px; text-align: right; white-space: nowrap; }
.group-question-score strong { color: var(--ui-accent); font-size: 18px; }
.group-question-score small { color: var(--ui-text-muted); font-size: 12px; }
.group-question-score.success strong { color: var(--ui-success-text); }
.group-question-score.warning strong { color: var(--ui-warning-text); }
.group-question-score.danger strong { color: var(--ui-danger-text); }
.group-question-people-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 15px 15px;
}
.group-question-people {
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    padding: 10px;
    background: var(--ui-surface);
}
.group-question-people b {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ui-text-muted);
    font-size: 13px;
}
.group-question-people b span {
    min-width: 20px;
    padding: 1px 5px;
    border-radius: 10px;
    background: var(--ui-surface-alt);
    color: inherit;
    text-align: center;
    font-size: 12px;
}
.group-question-people > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.group-question-people button {
    min-height: 44px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: transparent;
    color: var(--ui-text);
    padding: 4px 8px;
    font-size: 12px;
}
.group-question-people button:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.group-question-people.correct b { color: var(--ui-success-text); }
.group-question-people.wrong b { color: var(--ui-danger-text); }
.group-question-people.checking b { color: var(--ui-warning-text); }
.group-question-people.not-answered b { color: var(--ui-text-muted); }
.analytics-trend-explanation {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}
.analytics-trend-explanation .analytics-panel-note {
    margin: 0;
}
.analytics-trend-selection {
    flex: 0 0 auto;
    min-width: 112px;
    padding: 7px 10px;
    border: 1px solid var(--ui-info-border);
    border-radius: 7px;
    background: var(--ui-info-bg);
    text-align: right;
}
.analytics-trend-selection span,
.analytics-trend-selection b {
    display: block;
}
.analytics-trend-selection span {
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
}
.analytics-trend-selection b {
    margin-top: 2px;
    color: var(--ui-accent);
    font-size: 12px;
}
.analytics-trend {
    display: grid;
    grid-template-columns: repeat(30, minmax(4px, 1fr));
    align-items: end;
    gap: 4px;
    height: 82px;
    margin-top: 10px;
    padding: 8px 2px 0;
    border-bottom: 1px solid var(--ui-border);
}
.analytics-trend-day {
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 3px 3px 0 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}
.analytics-trend-day > span {
    display: block;
    width: 100%;
    min-height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--ui-success-text), var(--ui-accent));
    opacity: 0.72;
    transition: opacity 0.15s ease, filter 0.15s ease;
}
.analytics-trend-day:hover > span,
.analytics-trend-day:focus-visible > span,
.analytics-trend-day.active > span {
    opacity: 1;
    filter: none;
}
.analytics-trend-day:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}
.analytics-trend-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    color: var(--ui-text-muted);
    font-size: var(--type-badge-size);
}
.student-activity-trend {
    padding: 14px;
    margin-bottom: 18px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-input-bg);
}
.student-activity-trend > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--ui-text);
}
.student-activity-trend > div:first-child span { color: var(--ui-text-muted); font-size: 12px; }
.student-activity-trend .analytics-trend { height: 110px; margin-top: 8px; }
.analytics-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.analytics-scroll-list {
    max-height: 360px;
    overflow-y: auto;
    padding-top: 14px;
    padding-right: 6px;
    scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-input-bg);
    scrollbar-width: thin;
}
.analytics-lesson-row,
.analytics-test-chip,
.analytics-student-card {
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-bg);
    padding: 12px;
}
.analytics-row-main {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--ui-text);
    font-size: 13px;
    margin-bottom: 8px;
}
.analytics-row-main span {
    min-width: 0;
}
.analytics-row-main b {
    color: var(--ui-accent);
    white-space: nowrap;
}
.analytics-mini-bar {
    background: var(--ui-input-bg);
    height: 7px;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--ui-border);
}
.analytics-mini-bar div {
    height: 100%;
    background: var(--ui-accent);
    transition: width .5s ease;
}
.analytics-test-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    padding-top: 14px;
}
.analytics-test-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
}
.analytics-test-chip span {
    min-width: 0;
    color: var(--ui-text);
}
.analytics-danger-panel {
    border-color: var(--ui-danger-border);
}
.analytics-hard-question {
    border-left: 3px solid var(--ui-danger-text);
    background: var(--ui-bg);
    border-radius: 6px;
    padding: 12px;
}
.analytics-hard-question p {
    color: var(--ui-text);
    margin: 0 0 10px;
    line-height: 1.45;
}
.analytics-hard-question div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--ui-text-muted);
    font-size: 12px;
}
.analytics-hard-question b {
    color: var(--ui-danger-text);
    white-space: nowrap;
}
.analytics-student-tools {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 16px;
}
.analytics-student-tools input {
    flex: 1;
    min-width: 180px;
    margin: 0;
}
.analytics-student-tools button {
    padding: 10px 14px;
}
.analytics-student-head {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: flex-start;
    margin-bottom: 10px;
}
.analytics-student-name {
    font-weight: 600;
    color: var(--ui-text);
}
.analytics-student-meta {
    color: var(--ui-text-muted);
    font-size: 12px;
    margin-top: 3px;
}
.analytics-student-percent {
    font-weight: 600;
}
.analytics-student-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 10px;
    margin: 12px 0 10px;
}
.analytics-student-stats div {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 5px;
    padding: 9px;
}
.analytics-student-stats b,
.analytics-student-stats span {
    display: block;
}
.analytics-student-stats b {
    color: var(--ui-text);
}
.analytics-student-stats span,
.analytics-muted {
    color: var(--ui-text-muted);
    font-size: 12px;
}
.analytics-status-line {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--ui-text-muted);
}

/* === СМАРТ-БАР === */
.smart-bar-wrap { 
    background: var(--ui-accent-soft); border: 1px solid var(--ui-border);
    border-radius: 6px; padding: 10px; margin-bottom: 15px; position: relative; overflow: hidden; 
}
.smart-bar-progress { 
    position:absolute;
    inset:0;
    z-index:1;
    width:100%;
    height:100%;
    border:0;
    appearance:none;
    background:transparent;
}
.smart-bar-progress::-webkit-progress-bar { background:transparent; }
.smart-bar-progress::-webkit-progress-value { background:var(--ui-accent); }
.smart-bar-progress::-moz-progress-bar { background:var(--ui-accent); }
.smart-bar-text { 
    position: relative; z-index: 2; font-size: 12px; font-weight: 600;
    color: var(--ui-text); text-align: center; display: flex;
    align-items: center; justify-content: center; gap: 5px; 
    text-shadow: none;
}

/* === ТОСТ === */
#custom-toast { 
    position: fixed; top: -100px; left: 50%; transform: translateX(-50%); 
    background: var(--ui-surface); color: var(--ui-text); padding: 15px 25px;
    border-radius: 8px; border: 1px solid var(--ui-accent);
    box-shadow: var(--ui-shadow-float); z-index: 9999;
    opacity: 0; pointer-events: none;
    transition: top var(--motion-base) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease);
    display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px;
}
#custom-toast.show { top: 30px; opacity: 1; pointer-events: auto; }

/* === УРОК / ЛЕЙАУТ === */
.lock-overlay { 
    position: absolute; top:0; left:0; width:100%; height:100%; 
    background: var(--ui-modal-backdrop); display: flex; flex-direction: column;
    align-items: center; justify-content: center; z-index: 10; border-radius: 8px; 
    color: var(--ui-on-danger); text-align: center; padding: 30px; backdrop-filter: blur(4px); box-sizing: border-box;
}
.lesson-content { line-height: 1.7; font-size: 16px; color: var(--ui-text); }
.lesson-content img { max-width: 100%; border-radius: 6px; margin: 15px 0; border: 1px solid var(--ui-border); }
.lesson-content img.lesson-image-zoomable { cursor: zoom-in; }
.lesson-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 18px 0 24px;
    border: 1px solid var(--ui-info-border);
    border-radius: 10px;
    background: var(--ui-surface-alt);
}
.lesson-table-scroll table {
    min-width: 680px;
    margin: 0;
    background: transparent;
}
.lesson-image-viewer-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: var(--ui-modal-backdrop);
    backdrop-filter: blur(6px);
}
.lesson-image-viewer-modal img {
    display: block;
    max-width: min(1100px, 96vw);
    max-height: 88vh;
    object-fit: contain;
    border: 1px solid var(--ui-info-border);
    border-radius: 12px;
    background: var(--ui-media-bg);
    box-shadow: var(--ui-shadow-float);
}
.lesson-image-viewer-close {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
    font-size: 30px;
    line-height: 1;
    color: var(--ui-text);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
}
.lesson-content video,
.lesson-layout-editor video,
#lesson-editor video {
    display: block;
    width: 100%;
    max-width: 960px;
    max-height: 70vh;
    margin: 16px auto 8px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-media-bg);
}
.lesson-video { margin: 18px 0; }
.lesson-video figcaption { color: var(--ui-text-muted); font-size: 12px; text-align: center; }
.lesson-video-embed {
    position: relative;
    width: 100%;
    max-width: 960px;
    aspect-ratio: 16 / 9;
    margin: 18px auto;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-media-bg);
}
.lesson-video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.lesson-offline-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px;
    border: 1px solid var(--ui-warning-border);
    border-radius: 6px;
    color: var(--ui-warning-text);
    background: var(--ui-warning-bg);
    font-size: 12px;
    line-height: 1.4;
}
.lesson-content table,
.lesson-layout-editor table,
.lesson-html-preview table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 24px;
    overflow-wrap: anywhere;
    color: var(--ui-text);
    background: var(--ui-surface-alt);
}
.lesson-content .lesson-table-scroll table {
    margin: 0;
    background: transparent;
    overflow-wrap: normal;
}
.lesson-content th,
.lesson-content td,
.lesson-layout-editor th,
.lesson-layout-editor td,
.lesson-html-preview th,
.lesson-html-preview td {
    border: 1px solid var(--ui-info-border);
    padding: 10px 12px;
    vertical-align: top;
}
.lesson-content .lesson-table-scroll th,
.lesson-content .lesson-table-scroll td {
    overflow-wrap: normal;
    word-break: normal;
}
.lesson-content th,
.lesson-layout-editor th,
.lesson-html-preview th {
    color: var(--ui-info-text);
    background: var(--ui-info-bg);
    font-weight: 600;
}
.lesson-content .lead,
.lesson-layout-editor .lead,
.lesson-html-preview .lead {
    font-size: 1.05rem;
    padding: 16px 18px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: var(--ui-info-bg);
    color: var(--ui-text);
}
.lesson-content .quote,
.lesson-layout-editor .quote,
.lesson-html-preview .quote {
    margin: 18px 0;
    padding: 16px 18px;
    border-left: 4px solid var(--ui-accent);
    background: var(--ui-accent-soft);
    border-radius: 10px;
    color: var(--ui-text);
    font-style: italic;
}
.lesson-content .note,
.lesson-layout-editor .note,
.lesson-html-preview .note {
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--ui-warning-border);
    background: var(--ui-warning-bg);
    color: var(--ui-text);
}
.lesson-content .image-placeholder,
.lesson-layout-editor .image-placeholder,
.lesson-html-preview .image-placeholder {
    margin: 18px 0;
    padding: 18px 20px;
    border: 2px dashed var(--ui-warning-border);
    border-radius: 12px;
    background: var(--ui-warning-bg);
    color: var(--ui-warning-text);
    font-weight: 600;
    text-align: center;
}
.lesson-content .image-placeholder small,
.lesson-layout-editor .image-placeholder small,
.lesson-html-preview .image-placeholder small {
    display: block;
    margin-top: 6px;
    color: var(--ui-text);
    font-weight: 500;
}
.lesson-content .grid,
.lesson-layout-editor .grid,
.lesson-html-preview .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 16px 0;
}
.lesson-content .card,
.lesson-layout-editor .card,
.lesson-html-preview .card {
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    padding: 14px 16px;
    background: var(--ui-surface-alt);
}
.lesson-content .timeline,
.lesson-layout-editor .timeline,
.lesson-html-preview .timeline {
    border-left: 3px solid var(--ui-accent);
    padding-left: 18px;
    margin: 16px 0 24px;
}
.lesson-content .timeline .event,
.lesson-layout-editor .timeline .event,
.lesson-html-preview .timeline .event {
    position: relative;
    margin: 0 0 18px;
}
.lesson-content .timeline .event::before,
.lesson-layout-editor .timeline .event::before,
.lesson-html-preview .timeline .event::before {
    content: "";
    position: absolute;
    left: -26px;
    top: .55em;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: var(--ui-accent);
}
.lesson-content .tag,
.lesson-layout-editor .tag,
.lesson-html-preview .tag {
    display: inline-block;
    font-size: .85rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
}
.lesson-content .cols,
.lesson-layout-editor .cols,
.lesson-html-preview .cols {
    columns: 2 280px;
    column-gap: 28px;
}
.lesson-content-frame {
    display: block;
    width: 100%;
    min-height: 260px;
    border: 0;
    border-radius: 10px;
    background: transparent;
}
.lesson-editor-modebar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 10px;
}
.lesson-editor-modebar button {
    padding: 8px 12px;
    font-size: 13px;
}
.lesson-editor-modebar .lesson-code-toggle {
    width: 38px;
    padding: 8px;
}
.lesson-editor-modebar button.active {
    color: var(--ui-on-accent);
    background: var(--ui-accent);
    border-color: var(--ui-accent);
}
.lesson-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1;
}
.lesson-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.lesson-title-row .lesson-title-text {
    min-width: 220px;
}
.lesson-html-source {
    display: none;
    min-height: 420px;
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
    line-height: 1.55;
    white-space: pre;
}
.lesson-layout-toolbar {
    display: none;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface-alt);
}
.lesson-layout-toolbar button {
    width: 38px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--ui-bg);
    color: var(--ui-text);
    box-shadow: none;
}
.lesson-layout-toolbar button:hover {
    color: var(--ui-on-accent);
    background: var(--ui-accent);
}
.lesson-layout-toolbar button.active {
    color: var(--ui-on-accent);
    background: var(--ui-accent);
    border-color: var(--ui-accent);
    box-shadow: none;
}
.lesson-layout-size-select,
.lesson-layout-heading-select {
    height: 44px;
    width: 52px;
    flex: 0 0 52px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--ui-accent);
    border-radius: 6px;
    background: var(--ui-bg);
    color: var(--ui-text);
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    appearance: none;
    cursor: pointer;
}
.lesson-layout-heading-select {
    width: 44px;
    flex-basis: 44px;
}
.lesson-layout-size-select:hover,
.lesson-layout-heading-select:hover {
    color: var(--ui-on-accent);
    background: var(--ui-accent);
}
.lesson-layout-heading-select.active {
    color: var(--ui-on-accent);
    background: var(--ui-accent);
    box-shadow: none;
}
.lesson-layout-size-select:focus,
.lesson-layout-heading-select:focus {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}
.lesson-layout-editor {
    display: none;
    min-height: 520px;
    max-height: 72vh;
    overflow: auto;
    padding: 22px;
    border-radius: 4px;
    background: var(--ui-bg);
    color: var(--ui-text);
    outline: none;
    line-height: 1.65;
}
.lesson-layout-editor:focus {
    box-shadow: inset 0 0 0 1px var(--ui-accent), var(--ui-focus-ring);
}
.lesson-layout-editor img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
}
.lesson-layout-editor img.lesson-layout-image-selected {
    outline: 3px solid var(--ui-accent);
    outline-offset: 4px;
    box-shadow: var(--ui-focus-ring);
}
.lesson-layout-editor figure {
    margin: 18px 0;
}
.lesson-image-delete-btn {
    position: fixed;
    z-index: 10020;
    display: none;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid var(--ui-danger-border);
    border-radius: 8px;
    background: var(--ui-danger-bg);
    color: var(--ui-danger-text);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--ui-shadow-float);
}
.lesson-image-delete-btn:hover {
    background: var(--ui-danger-text);
    color: var(--ui-on-danger);
}
.lesson-html-preview {
    margin: -10px 0 25px;
    padding: 20px;
    border: 1px solid var(--ui-accent);
    border-radius: 8px;
    background: var(--ui-surface);
}
.lesson-viewer-grid {
    min-height: calc(100vh - 170px);
    flex-wrap: nowrap !important;
}
.lesson-nav-panel {
    height: calc(100vh - 120px);
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 0 0 320px !important;
}
.lesson-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}
.lesson-nav-close,
.lesson-mobile-program-btn,
.lesson-mobile-nav-backdrop {
    display: none;
}
.lesson-nav-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-input-bg);
    scrollbar-width: thin;
}
.lesson-nav-list::-webkit-scrollbar { width: 8px; }
.lesson-nav-list::-webkit-scrollbar-track { background: var(--ui-input-bg); border-radius: 8px; }
.lesson-nav-list::-webkit-scrollbar-thumb { background: var(--ui-scrollbar-thumb); border-radius: 8px; }
.lesson-tone-accent,
.lesson-tone-draft {
    --lesson-tone-text:var(--ui-accent);
    --lesson-tone-bg:var(--ui-accent-soft);
    --lesson-tone-border:var(--ui-accent);
}
.lesson-tone-neutral {
    --lesson-tone-text:var(--ui-text-muted);
    --lesson-tone-bg:var(--ui-surface-alt);
    --lesson-tone-border:var(--ui-border);
}
.lesson-tone-success {
    --lesson-tone-text:var(--ui-success-text);
    --lesson-tone-bg:var(--ui-success-bg);
    --lesson-tone-border:var(--ui-success-border);
}
.lesson-tone-warning {
    --lesson-tone-text:var(--ui-warning-text);
    --lesson-tone-bg:var(--ui-warning-bg);
    --lesson-tone-border:var(--ui-warning-border);
}
.lesson-tone-danger {
    --lesson-tone-text:var(--ui-danger-text);
    --lesson-tone-bg:var(--ui-danger-bg);
    --lesson-tone-border:var(--ui-danger-border);
}
.lesson-attention-summary {
    padding:var(--space-3);
    border:1px solid var(--ui-danger-border);
    border-radius:var(--radius-control);
    background:var(--ui-danger-bg);
    color:var(--ui-text);
    font-size:var(--type-meta-size);
    line-height:var(--type-meta-line);
}
.lesson-attention-summary b { display:block; margin-bottom:var(--space-1); color:var(--ui-danger-text); }
.lesson-attention-summary span { color:var(--ui-text-muted); }
.lesson-nav-item {
    padding:var(--space-3);
    border:1px solid var(--lesson-tone-border);
    border-radius:var(--radius-control);
    background:var(--lesson-tone-bg);
    cursor:pointer;
    transition:border-color var(--motion-base) var(--motion-ease), background var(--motion-base) var(--motion-ease);
}
.lesson-nav-item.is-locked { opacity:.72; }
.lesson-nav-item-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-2);
    margin-bottom:var(--space-1);
}
.lesson-nav-item-head span { color:var(--ui-text); font-size:var(--type-control-size); font-weight:600; }
.lesson-nav-item.is-locked .lesson-nav-item-head span { color:var(--ui-text-muted); }
.lesson-nav-item-head i { color:var(--lesson-tone-text); font-size:20px; }
.lesson-nav-item-title {
    overflow:hidden;
    color:var(--ui-text-muted);
    font-size:var(--type-badge-size);
    line-height:var(--type-badge-line);
    text-overflow:ellipsis;
    white-space:nowrap;
}
.lesson-nav-item-badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:var(--space-2); }
.lesson-nav-badge {
    padding:2px 6px;
    border:1px solid var(--ui-border);
    border-radius:999px;
    color:var(--ui-text-muted);
    font-size:var(--type-badge-size);
    line-height:var(--type-badge-line);
}
.lesson-nav-badge.state {
    border-color:var(--lesson-tone-border);
    background:var(--lesson-tone-bg);
    color:var(--lesson-tone-text);
    font-weight:600;
}
.lesson-nav-badge.draft { border-color:var(--ui-accent); background:var(--ui-accent-soft); color:var(--ui-accent); }
.lesson-nav-item.active-lesson-nav {
    border-left:6px solid var(--lesson-tone-text);
    background:linear-gradient(90deg, var(--lesson-tone-bg), var(--ui-surface));
}
.lesson-locked-card,
.lesson-reading-card { border-top:4px solid var(--lesson-tone-border); animation:fadeIn var(--motion-slow) var(--motion-ease); }
.lesson-locked-title { margin-top:0; color:var(--ui-warning-text); }
.lesson-locked-intro { color:var(--ui-text); line-height:var(--type-body-line); }
.lesson-requirements-panel {
    margin:18px 0;
    padding:var(--space-4);
    border:1px solid var(--ui-border);
    border-left:3px solid var(--ui-warning-border);
    border-radius:var(--radius-control);
    background:var(--ui-input-bg);
}
.lesson-requirements-panel > b { display:block; margin-bottom:var(--space-3); color:var(--ui-text); }
.lesson-requirements-list { margin:0; padding-left:18px; line-height:1.45; }
.lesson-requirements-list li { margin-bottom:var(--space-2); color:var(--ui-text); }
.lesson-requirements-list li.is-complete { color:var(--ui-success-text); }
.lesson-materials-card {
    margin-bottom:30px;
    padding:var(--space-5);
    border:1px solid var(--ui-border);
    border-left:3px solid var(--ui-accent);
    border-radius:var(--radius-control);
    background:var(--ui-input-bg);
}
.lesson-materials-card h4 { display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-4); color:var(--ui-accent); }
.lesson-materials-list { display:flex; flex-direction:column; gap:var(--space-3); }
.lesson-material-link {
    display:flex;
    min-height:44px;
    align-items:center;
    gap:var(--space-3);
    padding:10px 15px;
    border:1px solid var(--ui-border);
    border-radius:var(--radius-control);
    background:var(--ui-surface-alt);
    color:var(--ui-text);
    text-decoration:none;
    transition:border-color var(--motion-base) var(--motion-ease), background var(--motion-base) var(--motion-ease);
}
.lesson-material-link:hover { border-color:var(--ui-accent); background:var(--ui-accent-soft); }
.lesson-material-link i { color:var(--ui-accent); font-size:20px; }
.lesson-issue-banner,
.lesson-stop-notice,
.lesson-test-notice,
.lesson-test-draft-notice {
    margin-bottom:var(--space-4);
    padding:var(--space-3) var(--space-4);
    border:1px solid var(--lesson-tone-border);
    border-radius:var(--radius-control);
    background:var(--lesson-tone-bg);
    color:var(--ui-text);
}
.lesson-issue-row { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; }
.lesson-issue-copy { display:flex; align-items:flex-start; gap:10px; flex:1 1 360px; }
.lesson-issue-copy > i { color:var(--lesson-tone-text); font-size:24px; }
.lesson-issue-copy b { color:var(--lesson-tone-text); }
.lesson-issue-copy p { margin:var(--space-1) 0 0; color:var(--ui-text-muted); font-size:var(--type-meta-size); line-height:var(--type-meta-line); }
.lesson-issue-row button { min-height:44px; padding:10px 12px; }
.lesson-stop-notice { line-height:1.45; }
.lesson-stop-notice > b { color:var(--ui-warning-text); }
.lesson-stop-notice > p { margin:var(--space-1) 0 0; color:var(--ui-text-muted); font-size:var(--type-meta-size); }
.lesson-stop-requirements { display:grid; gap:7px; margin-top:10px; }
.lesson-stop-requirement { display:flex; align-items:flex-start; gap:var(--space-2); color:var(--ui-text); }
.lesson-stop-requirement.is-complete { color:var(--ui-success-text); }
.lesson-stop-requirement i { font-size:20px; line-height:1.25; }
.lesson-reading-title { margin-top:0; padding-bottom:var(--space-4); border-bottom:1px solid var(--ui-border); color:var(--ui-text); }
.lesson-reading-content { max-width:75ch; margin-bottom:30px; font-size:var(--type-reading-size); line-height:var(--type-reading-line); }
.lesson-test-details { margin-top:var(--space-5); }
.lesson-test-details-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-4); }
.lesson-test-details-head h4 { margin:0; color:var(--ui-text-muted); font-size:var(--type-label-size); letter-spacing:.04em; text-transform:uppercase; }
.lesson-test-summary { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.lesson-answer-note {
    margin-top:var(--space-3);
    padding:var(--space-3);
    border-left:3px solid var(--lesson-tone-border);
    border-radius:var(--radius-control);
    background:var(--lesson-tone-bg);
}
.lesson-answer-note-label { margin-bottom:var(--space-1); color:var(--lesson-tone-text); font-size:var(--type-badge-size); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.lesson-answer-note-copy { color:var(--ui-text); font-size:var(--type-control-size); white-space:pre-wrap; }
.lesson-answer-solution { margin-top:var(--space-3); border:1px solid var(--ui-accent); border-radius:var(--radius-control); background:var(--ui-accent-soft); }
.lesson-answer-solution summary { min-height:44px; padding:10px 12px; color:var(--ui-accent); font-weight:600; cursor:pointer; }
.lesson-answer-solution div { padding:0 12px 12px; color:var(--ui-text); line-height:1.5; white-space:pre-wrap; }
.lesson-teacher-comment { margin-top:var(--space-3); padding:10px 15px; border-left:3px solid var(--ui-accent); border-radius:var(--radius-control); background:var(--ui-accent-soft); font-size:var(--type-control-size); }
.lesson-test-answer-card { margin-bottom:var(--space-3); overflow:hidden; border:1px solid var(--lesson-tone-border); border-radius:var(--radius-control); background:var(--ui-input-bg); }
.lesson-test-answer-card summary { display:flex; min-height:44px; align-items:center; justify-content:space-between; gap:var(--space-3); padding:14px 15px; cursor:pointer; list-style:none; }
.lesson-test-answer-card summary b { color:var(--ui-text); font-size:var(--type-body-size); }
.lesson-test-answer-status { color:var(--lesson-tone-text); font-size:var(--type-badge-size); font-weight:600; white-space:nowrap; }
.lesson-test-answer-body { padding:0 15px 15px; }
.lesson-test-question { margin-bottom:10px; color:var(--ui-text); font-size:var(--type-body-size); }
.lesson-student-answer { padding:var(--space-3); border:1px solid var(--ui-border); border-radius:var(--radius-control); background:var(--ui-surface-alt); }
.lesson-student-answer span { display:block; margin-bottom:6px; color:var(--ui-text-muted); font-size:var(--type-badge-size); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.lesson-student-answer div { color:var(--ui-text); font-size:var(--type-control-size); white-space:pre-wrap; }
.lesson-test-block { margin-top:40px; padding-top:20px; border-top:2px dashed var(--ui-border); }
.lesson-test-block > h3 { margin-top:0; color:var(--ui-accent); }
.lesson-test-notice { padding:var(--space-5); text-align:center; color:var(--lesson-tone-text); font-size:var(--type-body-size); }
.lesson-test-notice > i { font-size:24px; vertical-align:middle; }
.lesson-test-notice span { color:var(--ui-text); font-size:var(--type-control-size); }
.lesson-test-result { padding:var(--space-5); border:2px solid var(--lesson-tone-border); border-radius:var(--radius-control); background:var(--ui-surface); text-align:center; }
.lesson-test-result h2 { margin:0; color:var(--lesson-tone-text); font-size:var(--type-page-size); line-height:var(--type-page-line); }
.lesson-test-result p { margin:var(--space-1) 0 0; color:var(--ui-text-muted); }
.lesson-test-result div { margin-top:var(--space-3); color:var(--ui-text); font-size:var(--type-control-size); }
.lesson-test-draft-notice { color:var(--ui-text); }
.lesson-reading-toolbar {
    display: none;
}
.student-teacher-card {
    cursor: pointer;
}
.student-teacher-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.student-teacher-card-side {
    display: flex;
    align-items: center;
    gap: 8px;
}
.student-teacher-details {
    display: none;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ui-border);
}
.student-teacher-details.open {
    display: block;
}
.student-teacher-details-loading,
.student-teacher-details-empty {
    color: var(--ui-text-muted);
    font-size: 13px;
    line-height: 1.45;
}
.student-teacher-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.student-teacher-summary span {
    padding: 6px 10px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    color: var(--ui-text);
    font-size: 12px;
}
.student-teacher-summary b {
    color: var(--ui-accent);
}
.student-teacher-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.student-teacher-course-card {
    position: relative;
    padding: 12px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-input-bg);
}
.student-teacher-course-cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--ui-border);
    margin-bottom: 10px;
    background: var(--ui-bg);
}
.student-teacher-course-cover.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-accent);
    font-size: 28px;
}
.student-teacher-course-status {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 3px 8px;
    border: 1px solid var(--ui-accent);
    border-radius: 999px;
    color: var(--ui-accent);
    font-size: var(--type-badge-size);
    font-weight: 600;
}
.student-teacher-course-card h4 {
    margin: 0 0 7px;
    color: var(--ui-text);
}
.student-teacher-course-card p {
    margin: 0 0 12px;
    color: var(--ui-text-muted);
    font-size: 13px;
    line-height: 1.45;
}
.question-admin-card {
    background: var(--ui-surface);
    padding: 15px;
    border-radius: 6px;
    border: 1px solid var(--ui-border);
    margin-bottom: 15px;
    position: relative;
    transition: border-color 0.16s ease, background 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}
.question-admin-card.is-draggable {
    padding-left: 50px;
    cursor: grab;
}
.question-admin-card.is-draggable:active {
    cursor: grabbing;
}
.question-admin-card.dragging {
    opacity: 0.55;
    transform: scale(0.995);
}
.question-admin-card.drag-over {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
}
.question-drag-handle {
    display: none;
}
.questions-drag-mode .question-drag-handle {
    display: flex;
    position: absolute;
    left: 12px;
    top: 12px;
    width: 28px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-accent);
    background: var(--ui-bg);
    cursor: grab;
}
.questions-drag-mode .question-drag-handle i {
    font-size: 20px;
}
.math-question-label { display:block; margin-bottom:var(--space-2); color:var(--ui-text-muted); font-size:var(--type-meta-size); }
.math-question-label-spaced { margin-top:var(--space-3); }
.math-question-label span { color:var(--ui-text); }
.question-option-row,
.question-order-row { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-2); padding:var(--space-2); border:1px solid var(--ui-border); border-radius:var(--radius-control); background:var(--ui-surface-alt); }
.question-option-input { min-width:0; flex:1; margin-bottom:0; }
.question-option-thumbnail { width:auto; max-width:90px; height:30px; border:1px solid var(--ui-border); border-radius:4px; object-fit:contain; }
.question-option-upload { flex:none; margin:0; padding:10px; }
.question-option-remove { flex:none; min-width:44px; min-height:44px; padding:10px; }
.question-match-equals { color:var(--ui-text-muted); }
.questions-empty-state { margin:0; padding:var(--space-5); color:var(--ui-text-muted); font-size:var(--type-control-size); text-align:center; }
.questions-list-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:15px; padding-bottom:10px; border-bottom:1px solid var(--ui-border); }
.questions-list-head h4 { margin:0; }
.questions-sort-toggle { min-height:40px; padding:8px 12px; font-size:var(--type-badge-size); }
.questions-sort-toggle.is-active { border-color:var(--ui-accent); color:var(--ui-text); background:var(--ui-surface); box-shadow:none; }
.questions-sort-help { display:flex; align-items:flex-start; gap:var(--space-2); margin-bottom:14px; padding:10px 12px; border:1px dashed var(--ui-control-border); border-radius:var(--radius-control); color:var(--ui-text); background:var(--ui-accent-soft); font-size:var(--type-meta-size); line-height:var(--type-meta-line); }
.questions-sort-help > i { flex:none; margin-top:2px; color:var(--ui-accent); }
.question-admin-actions { position:absolute; top:10px; right:10px; display:flex; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
.question-admin-actions button { min-width:40px; min-height:36px; padding:5px 10px; }
.question-admin-meta { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-2); padding-right:185px; color:var(--ui-text-muted); font-size:var(--type-meta-size); }
.question-points-badge,
.question-partial-credit-badge,
.question-feedback-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border:1px solid var(--ui-control-border); border-radius:999px; font-size:var(--type-badge-size); font-weight:600; }
.question-points-badge { color:var(--ui-accent); background:var(--ui-accent-soft); }
.question-partial-credit-badge { border-color:var(--ui-warning-border); color:var(--ui-warning-text); background:var(--ui-warning-bg); }
.question-admin-text { margin-bottom:10px; color:var(--ui-text); font-size:var(--type-control-size); line-height:var(--type-control-line); }
.question-admin-group { margin:-4px 0 10px; color:var(--ui-accent); font-size:var(--type-badge-size); }
.question-reference-preview { padding:var(--space-2); border:1px solid var(--ui-border); border-radius:var(--radius-control); color:var(--ui-text-muted); background:var(--ui-bg); font-size:var(--type-badge-size); line-height:var(--type-badge-line); }
@media (max-width:620px) {
    .question-admin-meta { padding-top:42px; padding-right:0; }
    .question-admin-actions { left:10px; }
    .question-option-row,
    .question-order-row { align-items:stretch; flex-wrap:wrap; }
    .question-option-input { flex-basis:calc(100% - 44px); }
}

@media (min-width: 761px) and (max-width: 1024px) {
    body { padding: var(--space-5); }
}

@media (max-width: 760px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
    }

    body {
        padding: var(--space-4);
        padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
        background-size: 24px 24px;
    }

    .dashboard {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #teacher-dashboard,
    #student-dashboard,
    .teacher-main,
    .student-main,
    .tab-content.active {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .teacher-main,
    .student-main,
    .card,
    .telegram-required-notice,
    #teacher-subscription-block {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .header {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        grid-template-areas:
            "logo greeting"
            "actions actions";
        padding: 12px;
        gap: 10px;
        align-items: center;
    }

    .maintenance-banner {
        margin-bottom: 14px;
        padding: 11px 12px;
        font-size: 13px;
    }

    .header > div {
        max-width: 100%;
        flex-wrap: wrap;
    }

    .header-brand {
        display: contents !important;
    }

    #mini-logo {
        grid-area: logo;
        width: 28px !important;
        height: 28px !important;
        flex: 0 0 auto;
    }

    #user-greeting {
        grid-area: greeting;
        display: block;
        min-width: 0;
        font-size: 14px !important;
        line-height: 1.2;
        letter-spacing: 0 !important;
        overflow: visible;
        white-space: normal;
        overflow-wrap: anywhere;
        text-overflow: clip;
    }

    .header-actions {
        grid-area: actions;
        flex: 0 0 auto;
        flex-wrap: nowrap !important;
        gap: 8px;
        justify-self: end;
        margin-left: 0;
    }

    .notification-main-btn {
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
    }

    .header-bonus-account {
        min-width: 54px;
        padding: 0 10px;
    }

    .header-bonus-account span { display: none; }
    .header-ai-actions { min-width:54px; padding:0 10px; }
    .header-ai-actions span { display:none; }

    .bonus-account-card {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
        min-width: 0;
    }
    .bonus-account-card > div:first-child {
        min-width: 0;
    }
    .bonus-referral-copy {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        width: 100%;
        max-width: none;
        min-width: 0;
    }
    .bonus-referral-copy input {
        grid-column: 1 / -1;
        min-width: 0;
    }
    .bonus-referral-copy button {
        width: 100%;
        min-width: 0;
        white-space: normal;
    }
    .bonus-center-modal { padding:0;align-items:stretch; }
    .bonus-center-content { width:100%;max-width:none;max-height:100vh;border-radius:0; }
    .bonus-center-head { padding:24px 20px; }
    .bonus-center-head h2 { font-size:30px; }
    .bonus-center-wallet { width:58px;height:58px;font-size:28px; }
    .bonus-center-section { padding:20px; }
    .bonus-center-link { flex-direction:column; }
    .bonus-spend-grid { grid-template-columns:1fr; }

    .notification-main-btn span:not(.notification-badge) {
        display: none;
    }

    .header-pwa-install {
        width:44px;
        height:44px;
        min-width:44px;
        padding:0 !important;
        gap:0;
    }
    .header-pwa-install span { display:none; }
    .pwa-install-guide { padding:10px;align-items:flex-end; }
    .pwa-install-guide-content { max-width:none;max-height:calc(100vh - 20px);overflow-y:auto;padding:24px 18px 18px; }
    .pwa-install-guide-content h2 { font-size:25px; }

    .notification-panel {
        position: fixed;
        top: 76px;
        right: 10px;
        left: 10px;
        width: auto;
        max-height: calc(100vh - 110px);
    }

    .header-actions .theme-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        padding: 0 !important;
    }

    .header-logout-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        padding: 0 !important;
        gap: 0;
    }

    .header-logout-btn span {
        display: none;
    }

    button,
    .theme-btn-upload {
        padding: 10px 12px;
        font-size: 13px;
    }

    .test-actions {
        flex-direction: column;
    }

    .test-actions button {
        width: 100%;
    }

    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="datetime-local"],
    textarea,
    select {
        font-size: 16px;
        padding: 11px;
    }

    .card {
        padding: 15px;
        margin-bottom: 14px;
    }

    .tab-menu {
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 6px;
        margin-left: -10px;
        margin-right: -10px;
        padding-left: 10px;
        padding-right: 10px;
        scrollbar-width: thin;
    }

    .teacher-tab-menu {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    #teacher-dashboard {
        padding-bottom: 86px;
    }

    #student-dashboard {
        padding-bottom: 86px;
    }

    #student-dashboard > .tab-menu {
        display: none;
    }

    .teacher-workspace {
        display: block;
    }

    .student-workspace {
        display: block;
    }

    .teacher-sidebar {
        display: none;
    }

    .student-sidebar {
        display: none;
    }

    .teacher-main {
        width: 100%;
    }

    .student-main {
        width: 100%;
    }

    .teacher-mobile-nav {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        z-index: 1500;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
        padding: 6px;
        background: var(--ui-sidebar);
        border: 1px solid var(--ui-border);
        border-radius: 8px;
        box-shadow: var(--ui-shadow-float);
        backdrop-filter: blur(10px);
    }

    .student-mobile-nav {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        z-index: 1500;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
        padding: 6px;
        background: var(--ui-sidebar);
        border: 1px solid var(--ui-border);
        border-radius: 8px;
        box-shadow: var(--ui-shadow-float);
        backdrop-filter: blur(10px);
    }

    .teacher-workspace > .teacher-more-menu {
        display: block;
    }

    #student-dashboard > .student-more-menu {
        display: block;
    }

    .teacher-mobile-nav .tab-btn,
    .student-mobile-nav .tab-btn {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 3px;
        align-items: center;
        justify-content: center;
        padding: 8px 4px;
        border: 1px solid transparent;
        border-radius: 6px;
        font-size: var(--type-badge-size);
        min-width: 0;
        white-space: normal;
    }

    .teacher-mobile-nav .tab-btn i,
    .student-mobile-nav .tab-btn i {
        font-size: 20px;
    }

    .teacher-mobile-nav .tab-btn.active,
    .student-mobile-nav .tab-btn.active {
        background: var(--ui-accent-soft);
        border-color: var(--ui-accent);
    }

    .teacher-mobile-nav .nav-badge,
    .student-mobile-nav .nav-badge,
    .teacher-mobile-nav .profile-badge,
    .student-mobile-nav .profile-badge {
        position: absolute;
        top: 3px;
        right: 8px;
        margin: 0;
        padding: 3px 6px;
        font-size: var(--type-badge-size);
    }

    .tab-btn {
        white-space: nowrap;
        font-size: 13px;
        padding: 9px 10px;
    }

    .teacher-more-dropdown {
        position: fixed;
        right: 12px;
        left: 12px;
        bottom: 86px;
        top: auto;
        min-width: 0;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        z-index: 1600;
        padding: 10px;
    }

    .teacher-more-group { border-color: var(--ui-border); }
    .teacher-more-group summary { min-height: 54px; padding: 0 14px; }
    .teacher-more-group summary > i:first-child { font-size: 22px; }
    .teacher-more-group-items { padding: 6px; gap: 4px; }
    .teacher-more-group-items .tab-btn { min-height: 44px; padding: 10px 12px; }

    body.teacher-more-open .support-btn,
    body.teacher-more-open .quick-scroll-btn {
        display: none;
        pointer-events: none;
    }

    #viewer-course-title {
        font-size: 20px;
        margin-bottom: 14px !important;
        line-height: 1.25;
    }

    .lesson-mobile-program-btn {
        display: flex;
        width: 100%;
        justify-content: space-between;
        margin-bottom: 16px;
        border-color: var(--ui-accent);
        background: var(--ui-surface);
        box-shadow: none;
    }

    .lesson-mobile-nav-backdrop.mobile-open {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--ui-modal-backdrop);
        z-index: 1400;
    }

    .lesson-viewer-grid {
        display: block !important;
        flex-wrap: wrap !important;
    }

    .lesson-nav-panel {
        position: fixed !important;
        left: 0;
        top: 0 !important;
        bottom: 0;
        width: min(86vw, 360px);
        min-width: 0 !important;
        height: 100vh;
        flex-basis: auto !important;
        max-height: none;
        border-radius: 0 10px 10px 0 !important;
        z-index: 1500;
        transform: translateX(-110%);
        transition: transform 0.22s ease;
        overflow: hidden;
        box-shadow: var(--ui-shadow-float);
        box-sizing: border-box;
    }

    .lesson-nav-panel.mobile-open {
        transform: translateX(0);
    }

    .lesson-nav-close {
        display: inline-flex;
        padding: 7px;
        min-width: 44px;
        min-height: 44px;
        box-shadow: none;
        background: transparent;
    }

    .lesson-nav-list {
        max-height: calc(100vh - 74px);
        padding-right: 4px;
    }

    .lesson-reading-toolbar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(92px + env(safe-area-inset-bottom, 0px));
        z-index: 1320;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
        padding: 8px;
        border: 1px solid var(--ui-control-border);
        border-radius: 14px;
        background: var(--ui-surface);
        box-shadow: var(--ui-shadow-float);
        backdrop-filter: blur(10px);
    }

    .lesson-reading-toolbar button {
        min-width: 0;
        min-height: 48px;
        padding: 7px 5px;
        border-radius: 10px;
        box-shadow: none;
        font-size: var(--type-badge-size);
        line-height: 1.1;
    }

    .lesson-reading-toolbar button i {
        display: block;
        margin-bottom: 3px;
        font-size: 18px;
    }

    .lesson-reading-toolbar button:disabled {
        opacity: 0.45;
    }

    #single-lesson-container .card {
        border-radius: 7px;
        padding-bottom: 92px;
    }

    #lesson-viewer {
        max-width: none;
        width: 100%;
    }

    #lesson-viewer .lesson-viewer-grid {
        flex-wrap: wrap !important;
    }

    #lesson-viewer .lesson-main-panel {
        width: 100% !important;
        min-width: 0 !important;
    }

    .table-fill-task-wrap {
        margin-left: -4px;
        margin-right: -4px;
        max-width: calc(100vw - 28px);
    }

    .table-fill-task-table {
        min-width: 720px;
        font-size: 14px;
    }

    .table-fill-task-table th,
    .table-fill-task-table td {
        padding: 9px;
        max-width: 260px;
    }

    .table-fill-select {
        min-width: 160px;
        font-size: 14px;
    }

    #single-lesson-container h2 {
        font-size: 20px;
        line-height: 1.25;
    }

    .lesson-content {
        font-size: 15px;
        line-height: 1.65;
    }

    .support-btn {
        right: 12px;
        bottom: 12px;
        padding: 10px 12px;
        font-size: 12px;
    }

    .quick-scroll-btn {
        right: 12px;
        bottom: 66px;
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
}

@media (min-width: 761px) and (max-width: 1024px) {
    #student-dashboard {
        padding-bottom: 96px;
    }

    #student-dashboard > .tab-menu {
        display: none;
    }

    #student-dashboard .student-workspace {
        display: block;
    }

    #student-dashboard .student-sidebar {
        display: none;
    }

    #student-dashboard .student-main {
        width: 100%;
    }

    .student-mobile-nav {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: 14px;
        z-index: 1500;
        width: min(720px, calc(100vw - 32px));
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
        padding: 8px;
        background: var(--ui-sidebar);
        border: 1px solid var(--ui-border);
        border-radius: 8px;
        box-shadow: var(--ui-shadow-float);
        backdrop-filter: blur(10px);
    }

    .student-mobile-nav .tab-btn {
        flex-direction: row;
        min-width: 0;
        white-space: normal;
        padding: 10px 8px;
        border: 1px solid transparent;
        border-radius: 6px;
        font-size: 13px;
    }

    .student-mobile-nav .tab-btn.active {
        background: var(--ui-accent-soft);
        border-color: var(--ui-accent);
    }

    #student-dashboard > .student-more-menu {
        display: block;
    }
}

/* === QUILL EDITOR === */
.ql-toolbar.ql-snow { border-color: var(--ui-border) !important; background: var(--ui-surface-alt); border-top-left-radius: 4px; border-top-right-radius: 4px; }
.ql-container.ql-snow { border-color: var(--ui-border) !important; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.ql-editor { min-height: 300px; color: var(--ui-text); line-height: 1.7; }
.ql-editor img { max-width: 100%; height: auto; border-radius: 6px; }
.ql-snow .ql-picker { color: var(--ui-text) !important; }
.ql-snow .ql-picker-options { background: var(--ui-surface) !important; border-color: var(--ui-border) !important; }
.ql-snow .ql-stroke { stroke: var(--ui-text) !important; }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill: var(--ui-text) !important; }

/* === ПОДДЕРЖКА / ПЛАВАЮЩАЯ КНОПКА === */
.support-btn { 
    position: fixed; bottom: 25px; right: 25px; 
    background: var(--ui-accent-soft); color: var(--ui-accent); border: 1px solid var(--ui-accent);
    min-height:44px; padding: 12px 20px; border-radius: 999px; text-decoration: none; font-weight: 600;
    display: flex; align-items: center; gap: 8px; transition: 0.3s; 
    box-shadow: var(--ui-shadow-float); backdrop-filter: blur(5px); z-index: 100;
}
#support-unread-badge { margin-left:6px; padding:2px 7px; border-radius:999px; background:var(--ui-danger-text); color:var(--ui-on-danger); font-size:var(--type-badge-size); font-weight:600; line-height:var(--type-badge-line); }
.support-modal { z-index:9999; }
.msg-bubble { position:relative; max-width:85%; padding:10px 15px; border-radius:var(--radius-surface); font-size:var(--type-control-size); line-height:1.4; overflow-wrap:anywhere; }
.msg-user { align-self:flex-end; border-bottom-right-radius:2px; background:var(--ui-accent); color:var(--ui-on-accent); }
.msg-admin { align-self:flex-start; border:1px solid var(--ui-border); border-bottom-left-radius:2px; background:var(--ui-input-bg); color:var(--ui-text); }
.msg-time { margin-top:5px; color:inherit; font-size:var(--type-meta-size); line-height:var(--type-meta-line); opacity:.72; text-align:right; }
.quick-scroll-btn {
    position: fixed;
    right: 25px;
    bottom: 88px;
    width: 46px;
    height: 46px;
    min-width: 46px;
    padding: 0 !important;
    border-radius: 999px;
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    border: 1px solid var(--ui-accent);
    box-shadow: var(--ui-shadow-float);
    backdrop-filter: blur(8px);
    z-index: 120;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}
.quick-scroll-btn.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.quick-scroll-btn i { font-size: 24px; }

@media (max-width: 760px) {
    .support-btn {
        right: 12px;
        bottom: 96px;
        width: auto;
        min-width: 44px;
        height: 44px;
        padding: 0 14px;
        justify-content: center;
        gap: 0;
        font-size: var(--type-badge-size);
        z-index: 1400;
    }

    .support-btn i {
        display: none;
    }

    .support-btn #support-unread-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        margin: 0 !important;
    }

    .quick-scroll-btn {
        display: none;
    }
}

@media (min-width: 761px) and (max-width: 1024px) {
    .support-btn {
        right: 16px;
        bottom: 96px;
        width: auto;
        min-width: 44px;
        height: 44px;
        padding: 0 14px;
        justify-content: center;
        gap: 0;
        font-size: var(--type-badge-size);
    }

    .support-btn i { display: none; }
    .support-btn #support-unread-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        margin: 0 !important;
    }
}

/* === МОДАЛЬНЫЕ ОКНА === */
.modal {
    display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%;
    box-sizing: border-box; padding: 16px;
    overflow-y: auto;
    background-color: var(--ui-modal-backdrop); backdrop-filter: blur(5px);
}
.modal-content {
    background-color: var(--ui-surface); margin: 5% auto; padding: 24px;
    border: 1px solid var(--ui-border); border-radius: var(--radius-surface); width: 90%; max-width: 600px;
    max-height: 80vh; overflow-y: auto; color: var(--ui-text); position: relative; box-shadow: var(--ui-shadow-float);
}
.policy-dialog h2 { margin-top:0; color:var(--ui-accent); }
.policy-dialog-meta { color:var(--ui-text-muted); font-size:var(--type-badge-size); line-height:var(--type-badge-line); }
.policy-dialog-copy { color:var(--ui-text); font-size:var(--type-control-size); line-height:var(--type-control-line); }
.policy-dialog-links { display:grid; gap:var(--space-3); margin-top:var(--space-4); }
.policy-dialog-links a { display:inline-flex; min-height:44px; align-items:center; gap:var(--space-2); color:var(--ui-accent); }
.review-modal { align-items:center; justify-content:center; }
.review-dialog { max-width:480px; border-color:var(--ui-warning-border); }
.review-dialog h3,.reviews-dialog h3 { margin-top:0; color:var(--ui-text); }
.review-rating { margin-bottom:var(--space-5); }
.review-rating > p { margin:0 0 var(--space-2); color:var(--ui-text-muted); font-size:var(--type-meta-size); line-height:var(--type-meta-line); }
#review-stars-container { display:flex; gap:var(--space-1); }
.star-btn { display:grid; width:44px; min-width:44px; height:44px; padding:0; place-items:center; border:0; border-radius:var(--radius-control); background:transparent; color:var(--ui-warning-text); font-family:boxicons!important; font-size:28px; box-shadow:none; cursor:pointer; }
.star-btn:hover,.star-btn:focus-visible { background:var(--ui-warning-bg); color:var(--ui-warning-text); }
.review-comment-label { display:block; margin-bottom:var(--space-2); color:var(--ui-text); font-size:var(--type-label-size); font-weight:500; line-height:var(--type-label-line); }
#review-text { box-sizing:border-box; width:100%; min-height:120px; margin:0 0 var(--space-5); padding:12px; resize:vertical; }
#submit-review-btn { width:100%; min-height:44px; padding:12px 16px; }
.reviews-dialog { max-width:600px; max-height:80vh; overflow-y:auto; }
#reviews-list-container { margin-top:var(--space-5); }
.reviews-empty { color:var(--ui-text-muted); }
.course-review { margin-bottom:var(--space-5); padding-bottom:var(--space-5); border-bottom:1px solid var(--ui-border); }
.course-review:last-child { margin-bottom:0; padding-bottom:0; border-bottom:0; }
.course-review-head { display:flex; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-2); }
.course-review-head b { color:var(--ui-text); }
.course-review-head span { color:var(--ui-warning-text); font-size:var(--type-body-size); white-space:nowrap; }
.course-review > p { margin:0; color:var(--ui-text); font-size:var(--type-control-size); line-height:var(--type-body-line); }
.course-review-reply { margin-top:var(--space-2); padding:var(--space-2); border-left:2px solid var(--ui-accent); border-radius:0 4px 4px 0; background:var(--ui-accent-soft); color:var(--ui-text); font-size:var(--type-meta-size); line-height:var(--type-meta-line); }
.modal[style*="display: block"],
.modal[style*="display: flex"] {
    animation: modal-backdrop-enter var(--motion-base) var(--motion-ease);
}
.modal[style*="display: block"] .modal-content,
.modal[style*="display: flex"] .modal-content {
    animation: modal-content-enter var(--motion-slow) var(--motion-ease);
}
.student-teacher-course-action { width:100%; }
.platform-modal-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.platform-modal-head h3 { margin:0; }
.platform-modal-close { display:grid; width:44px; min-width:44px; height:44px; padding:0; place-items:center; }
.platform-modal-copy { color:var(--ui-text-muted); line-height:1.6; }
.platform-modal-warning { padding:var(--space-3); border:1px solid var(--ui-warning-border); border-radius:var(--radius-control); color:var(--ui-warning-text); background:var(--ui-warning-bg); font-size:var(--type-meta-size); line-height:1.5; }
.platform-modal-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-4); }
.platform-modal-actions > button { min-height:44px; padding:12px; }
.platform-modal-primary { flex:1; min-width:180px; }
.platform-form-stack { display:grid; gap:var(--space-2); margin-top:var(--space-3); }
.platform-form-stack > :is(input,textarea) { margin:0; }
.platform-textarea-large { min-height:110px; resize:vertical; }
.profile-completion-warning { display:flex; align-items:flex-start; gap:var(--space-2); margin-bottom:var(--space-2); padding:var(--space-2); border:1px solid; border-radius:var(--radius-control); font-size:var(--type-meta-size); line-height:1.5; }
.profile-completion-warning > i { flex:none; margin-top:2px; }
.profile-completion-warning.is-danger { border-color:var(--ui-danger-border); color:var(--ui-danger-text); background:var(--ui-danger-bg); }
.profile-completion-warning.is-warning { border-color:var(--ui-warning-border); color:var(--ui-warning-text); background:var(--ui-warning-bg); }
.pending-teacher-invite-note { margin-bottom:var(--space-4); padding:var(--space-3); border:1px solid var(--ui-control-border); border-radius:var(--radius-surface); color:var(--ui-text); background:var(--ui-accent-soft); font-size:var(--type-meta-size); line-height:1.45; }
.pending-teacher-invite-note b { color:var(--ui-accent); }
.maintenance-banner-icon { font-size:18px; vertical-align:middle; }
@keyframes modal-backdrop-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes modal-content-enter {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Support chat: a clear neutral window edge without the harsh neon outline. */
#supportModal .support-modal-window {
    display: flex;
    flex-direction: column;
    width: min(400px, calc(100vw - 32px));
    max-width: 400px;
    height: min(500px, calc(100dvh - 48px));
    max-height: none;
    margin: 24px auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-float);
}

#supportModal .support-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    color: var(--ui-on-accent);
    background: var(--ui-accent);
}

#supportModal .support-chat-history {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    overflow-y: auto;
    background: var(--ui-bg);
}
#supportModal .support-chat-empty { margin-top:var(--space-5); color:var(--ui-text-muted); font-size:var(--type-meta-size); text-align:center; }
#supportModal .support-chat-attachment { display:block; margin-top:var(--space-2); }
#supportModal .support-chat-attachment img { display:block; max-width:100%; max-height:220px; border:1px solid var(--ui-control-border); border-radius:var(--radius-surface); }

#supportModal .support-chat-composer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    border-top: 1px solid var(--ui-border);
    background: var(--ui-surface);
}
#supportModal .support-modal-header h3 { margin:0; color:var(--ui-on-accent); }

#supportModal .support-attachment-status {
    min-height: 18px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 15px 12px;
    color: var(--ui-text-muted);
    background: var(--ui-surface);
    font-size: 12px;
}

#supportModal .support-attachment-status > span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#supportModal .support-attachment-status > button { width:44px; min-width:44px; height:44px; padding:0; display:inline-grid; place-items:center; border:1px solid var(--ui-border); border-radius:var(--radius-control); background:var(--ui-input-bg); color:var(--ui-text); box-shadow:none; }
#supportModal .support-attachment-status > button:hover,#supportModal .support-attachment-status > button:focus-visible { border-color: var(--ui-accent); color: var(--ui-accent); }

#supportModal .support-attachment-button {
    margin: 0;
    padding: 10px 11px;
    cursor: pointer;
}

#supportModal .support-message-input {
    flex: 1;
    min-width: 0;
    margin: 0;
    border: 1px solid var(--ui-control-border);
    border-radius: 7px;
    background: var(--ui-input-bg);
    color: var(--ui-text);
    font-size: 14px;
    box-shadow: none;
}

#supportModal .support-message-input::placeholder { color: var(--ui-text-muted); }

#supportModal .support-message-input:focus {
    border-color: var(--ui-accent);
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

#supportModal .support-send-button {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 15px;
    border-radius: 6px;
}
.close-modal { display:grid; float:right; width:44px; min-width:44px; height:44px; margin:0; padding:0; place-items:center; border:0; border-radius:var(--radius-control); background:transparent; color:var(--ui-text-muted); font-size:28px; font-weight:600; line-height:1; cursor:pointer; box-shadow:none; transition:color var(--motion-fast) var(--motion-ease),background var(--motion-fast) var(--motion-ease); }
.close-modal:hover { color: var(--ui-danger-text); }
#supportModal .support-modal-close { width:44px; min-width:44px; height:44px; margin:0; padding:0; display:inline-grid; place-items:center; border:1px solid var(--ui-control-border); border-radius:var(--radius-control); background:transparent; color:var(--ui-on-accent); font-size:26px; line-height:1; box-shadow:none; }
#supportModal .support-modal-close:hover,#supportModal .support-modal-close:focus-visible { border-color: var(--ui-on-accent); color: var(--ui-on-accent); background: var(--ui-accent-hover); }

.test-answer-reveal-modal {
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.test-answer-reveal-modal .modal-content {
    width: min(100%, 480px);
    margin: 0;
    padding: 24px;
    border-color: var(--ui-accent);
}

.test-answer-reveal-modal h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 42px 10px 0;
    color: var(--ui-text);
}

.test-help-modal-intro,
#test-answer-reveal-modal-description {
    color: var(--ui-text-muted);
    line-height: 1.55;
}

#test-answer-reveal-modal-title {
    display: block;
    margin-top: 20px;
    color: var(--ui-accent);
}

.test-help-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    color: var(--ui-text-muted);
    background: transparent;
    border: 1px solid var(--ui-border);
    font-size: 24px;
    line-height: 1;
}

.test-help-modal-close:hover {
    color: var(--ui-danger-text);
    border-color: var(--ui-danger-border);
}

.inline-help-button,
button[data-homework-file-limit-hint] {
    width: 44px !important;
    min-width: 44px;
    height: 44px;
    display: inline-grid !important;
    place-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--ui-accent) !important;
    border-radius: 50% !important;
    background: var(--ui-accent-soft) !important;
    color: var(--ui-accent) !important;
    font-size: var(--type-control-size) !important;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
}
button[data-homework-file-limit-hint]:empty::before { content: "?"; }

#lesson-file-limit-hint,
#q-image-limit-hint,
[data-homework-file-limit-hint]:not(button) {
    display: block !important;
    width: auto !important;
    min-width: 0;
    height: auto;
    margin: var(--space-1) 0 var(--space-3) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ui-text-muted) !important;
    font-size: var(--type-meta-size) !important;
    font-weight: 400;
    line-height: var(--type-meta-line) !important;
    cursor: help;
    box-shadow: none !important;
}

#lesson-file-limit-hint:focus-visible,
#q-image-limit-hint:focus-visible,
[data-homework-file-limit-hint]:not(button):focus-visible {
    border-radius: var(--radius-control) !important;
    outline: 2px solid var(--ui-accent);
    outline-offset: 3px;
}

.compact-help-modal {
    position: relative;
    max-width: 480px;
}

.compact-help-modal h3 {
    margin: 0 44px 12px 0;
}

.compact-help-modal p {
    margin: 0;
    color: var(--ui-text);
    line-height: 1.6;
}

.classroom-template-form input,
.classroom-template-form select,
#classroom-template-notes,
.calendar-field input,
.calendar-field select,
.calendar-field textarea,
.calendar-student-combobox input,
.course-form-visible input:not([type="checkbox"]):not([type="file"]),
.course-form-visible textarea,
.course-form-visible select {
    border-color: var(--ui-control-border) !important;
    box-shadow: none;
}

.classroom-template-form input:focus,
.classroom-template-form select:focus,
#classroom-template-notes:focus,
.calendar-field input:focus,
.calendar-field select:focus,
.calendar-field textarea:focus,
.calendar-student-combobox input:focus,
.course-form-visible input:focus,
.course-form-visible textarea:focus,
.course-form-visible select:focus {
    border-color: var(--ui-accent) !important;
    box-shadow: var(--ui-focus-ring);
}

.ui-framed-field {
    padding: 0;
    border: 0;
    background: transparent;
}
.ui-framed-field > span {
    color: var(--ui-text-muted);
    font-size: 14px;
    line-height: 1.35;
}
.ui-framed-field input:not([type="checkbox"]),
.ui-framed-field select,
.ui-framed-field textarea {
    width: 100%;
    margin: 0;
    border-color: var(--ui-control-border);
    box-shadow: none;
}
.ui-framed-field textarea {
    min-height: 120px;
    resize: vertical;
}
.ui-framed-field:focus-within { box-shadow: none; }

.teacher-leads-card {
    border-left: 3px solid var(--ui-accent) !important;
}
.teacher-leads-title { margin:0; }
.teacher-lead-subject-option { margin:0; }
.teacher-leads-locked { max-width:760px; border-left:3px solid var(--ui-warning-border); }
.teacher-leads-copy { margin:8px 0 0; color:var(--ui-text-muted); line-height:var(--type-body-line); }
.teacher-leads-loading { color:var(--ui-text-muted); }
.teacher-leads-error { color:var(--ui-danger-text); border-color:var(--ui-danger-border); background:var(--ui-danger-bg); }
.standalone-homework-card {
    border-left: 3px solid var(--ui-accent) !important;
}
.teacher-leads-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.lead-toggle-btn {
    min-width: 220px;
    min-height: 52px;
    padding: 12px 16px;
    justify-content: center;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: none;
}
.lead-toggle-btn.enabled {
    color: var(--ui-success-text);
    border-color: var(--ui-success-border);
    background: var(--ui-success-bg);
}
.lead-toggle-btn.disabled {
    color: var(--ui-danger-text);
    border-color: var(--ui-danger-border);
    background: var(--ui-danger-bg);
}
.lead-telegram-status { margin-top:14px; color:var(--ui-success-text); font-size:var(--type-meta-size); }
.lead-telegram-warning { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:14px; padding:12px; border:1px solid var(--ui-warning-border); border-radius:var(--radius-control); background:var(--ui-warning-bg); }
.lead-telegram-warning span { color:var(--ui-warning-text); font-size:var(--type-meta-size); }
.lead-telegram-warning button { min-height:44px; padding:9px 12px; }
.lead-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 18px;
}
.lead-time-picker {
    position: relative;
}
.lead-time-trigger {
    width: 100%;
    min-height: 64px;
    display: grid;
    grid-template-columns: 38px 1fr 24px;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--ui-control-border);
    border-radius: 8px;
    background: var(--ui-input-bg);
    color: var(--ui-text);
    box-shadow: none;
    text-align: left;
}
.lead-time-trigger:hover,
.lead-time-picker.open .lead-time-trigger {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
}
.lead-time-trigger-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ui-control-border);
    border-radius: 8px;
    color: var(--ui-accent);
    background: var(--ui-accent-soft);
    font-size: 21px;
}
.lead-time-trigger-copy {
    display: grid;
    gap: 1px;
}
.lead-time-trigger-copy small {
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    font-weight: 600;
}
.lead-time-trigger-copy strong {
    color: var(--ui-text);
    font-size: 22px;
    line-height: 1.15;
}
.lead-time-chevron {
    color: var(--ui-accent);
    font-size: 23px;
    transition: transform 0.18s ease;
}
.lead-time-picker.open .lead-time-chevron {
    transform: rotate(180deg);
}
.lead-time-popover {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 80;
    box-sizing: border-box;
    width: min(390px, calc(100vw - 62px));
    padding: 14px;
    border: 1px solid var(--ui-control-border);
    border-radius: 8px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-float);
}
.lead-time-picker.open .lead-time-popover {
    display: grid;
    gap: 13px;
}
.lead-time-popover-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--ui-border);
}
.lead-time-popover-head > div {
    display: flex;
    gap: 10px;
    align-items: baseline;
}
.lead-time-popover-head small,
.lead-time-part > span {
    color: var(--ui-text-muted);
    font-size: 12px;
}
.lead-time-popover-head strong {
    color: var(--ui-accent);
    font-size: 22px;
}
.lead-time-popover-head .icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
}
.lead-time-part {
    display: grid;
    gap: 7px;
}
.lead-time-options {
    display: grid;
    gap: 5px;
}
.lead-time-hours {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.lead-time-minutes {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.lead-time-options button {
    min-width: 0;
    min-height: 44px;
    padding: 5px 2px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-input-bg);
    color: var(--ui-text);
    box-shadow: none;
    font-size: 13px;
}
.lead-time-options button:hover {
    border-color: var(--ui-accent);
    color: var(--ui-accent);
}
.lead-time-options button.selected {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    box-shadow: none;
    font-weight: 600;
}
.lead-time-done {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    color: var(--ui-success-text);
    border-color: var(--ui-success-border);
    background: var(--ui-success-bg);
}
.lead-subjects-field {
    margin-top: 18px;
}
.lead-subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}
.lead-support-note {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--ui-warning-border);
    border-radius: 8px;
    background: var(--ui-warning-bg);
    color: var(--ui-warning-text);
    font-size: 13px;
    line-height: 1.45;
}
.lead-support-note i {
    margin-top: 2px;
    flex: 0 0 auto;
}

.standalone-homework-form {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-4);
}
.standalone-homework-mode-switch { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); margin:0; padding:0; border:0; }
.standalone-homework-mode-switch legend { grid-column:1/-1; margin-bottom:2px; color:var(--ui-text); font-weight:600; }
.standalone-homework-mode-switch label { display:flex; align-items:flex-start; gap:10px; min-width:0; padding:14px; border:1px solid var(--ui-control-border); border-radius:8px; background:var(--ui-input-bg); cursor:pointer; }
.standalone-homework-mode-switch label:has(input:checked) { border-color:var(--ui-accent); background:var(--ui-accent-soft); box-shadow:var(--ui-focus-ring); }
.standalone-homework-mode-switch input { flex:0 0 auto; margin-top:3px; accent-color:var(--ui-accent); }
.standalone-homework-mode-switch span { display:grid; gap:4px; min-width:0; }
.standalone-homework-mode-switch small,.standalone-homework-template-head small { color:var(--ui-text-muted); line-height:1.45; }
.standalone-homework-structured { display:grid; gap:var(--space-3); padding:var(--space-4); border:1px solid var(--ui-border); border-radius:8px; background:var(--ui-surface-alt); }
.standalone-homework-template-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); }
.standalone-homework-template-head > div { display:grid; gap:4px; }
.standalone-homework-template-head button { flex:0 0 auto; min-height:44px; }
.student-structured-homework-action { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
.student-structured-homework-action button { min-height:44px; }
.standalone-homework-summary {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
    list-style: none;
}
.standalone-homework-summary::-webkit-details-marker { display: none; }
.standalone-homework-summary h3,
.standalone-homework-history-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--ui-text);
    font-size: var(--type-card-size);
    line-height: var(--type-card-line);
    font-weight: 600;
}
.standalone-homework-summary h3 i,
.standalone-homework-history-title i { color: var(--ui-accent); }
.standalone-homework-card[open] .standalone-homework-summary > i { transform: rotate(180deg); }
.standalone-homework-summary > i { transition: transform var(--motion-fast) var(--motion-ease); }
.standalone-homework-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}
.standalone-homework-create {
    min-height: 44px;
    justify-self: start;
    padding: 11px 18px;
}
.lead-section-label { margin-bottom:8px; color:var(--ui-text-muted); font-size:var(--type-meta-size); }
.lead-save-btn { min-height:44px; margin-top:18px; padding:12px 18px; }
.lead-source-list,.lead-source-form,.lead-request-list { display:grid; gap:10px; }
.lead-source-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px; border:1px solid var(--ui-border); border-radius:var(--radius-control); background:var(--ui-input-bg); }
.lead-source-row > div { min-width:0; overflow-wrap:anywhere; }
.lead-source-row button { min-height:44px; padding:9px 12px; }
.lead-source-form textarea { min-height:96px; }
.lead-source-form-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.lead-source-form-footer span { color:var(--ui-text-muted); font-size:var(--type-meta-size); }
.lead-source-form-footer button { min-height:44px; padding:10px 14px; }
.lead-request-list { margin-top:16px; gap:8px; }
.lead-request-row { padding-top:8px; border-top:1px solid var(--ui-border); color:var(--ui-text-muted); font-size:var(--type-meta-size); overflow-wrap:anywhere; }

.standalone-homework-file-queue,
.lesson-homework-file-queue {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 8px;
    padding: 7px 9px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-input-bg);
    color: var(--ui-text);
    font-size: var(--type-meta-size);
}

.standalone-homework-file-queue > span,
.lesson-homework-file-queue > span {
    flex: 1 1 auto;
}
.homework-file-empty,
.homework-file-meta { color: var(--ui-text-muted); }
.homework-file-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.homework-file-meta {
    flex: 0 0 auto;
    white-space: nowrap;
}

.standalone-homework-file-queue button,
.lesson-homework-file-queue button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-color: var(--ui-border);
    background: transparent;
    color: var(--ui-text-muted);
    box-shadow: none;
}

.standalone-homework-file-queue button:hover,
.standalone-homework-file-queue button:focus-visible,
.lesson-homework-file-queue button:hover,
.lesson-homework-file-queue button:focus-visible {
    border-color: var(--ui-danger-border);
    color: var(--ui-danger-text);
}
.lesson-homework-preview,
.lesson-homework-editor,
.lesson-homework-state,
.lesson-homework-result {
    margin-top: var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-control);
    color: var(--ui-text);
    background: var(--ui-surface);
}
.lesson-homework-preview {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    border-color: var(--ui-info-border);
    color: var(--ui-info-text);
    background: var(--ui-info-bg);
}
.lesson-homework-editor {
    border-color: var(--ui-control-border);
    background: var(--ui-surface-alt);
}
.lesson-homework-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    color: var(--ui-text);
    font-size: var(--type-card-size);
    line-height: var(--type-card-line);
    font-weight: 600;
}
.lesson-homework-title i { color: var(--ui-accent); }
textarea.lesson-homework-answer {
    box-sizing: border-box;
    width: 100%;
    min-height: 150px;
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    resize: vertical;
}
textarea.lesson-homework-answer.is-compact { min-height: 130px; }
.lesson-homework-file-input {
    display: block;
    width: 100%;
    margin: 0 0 var(--space-2);
}
.lesson-homework-limit { margin-bottom: var(--space-4) !important; }
.lesson-homework-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.lesson-homework-actions button {
    min-height: 44px;
    padding: 11px 16px;
}
.lesson-homework-draft { flex: 1 1 180px; }
.lesson-homework-submit { flex: 2 1 180px; }
.lesson-homework-state {
    text-align: center;
    color: var(--ui-warning-text);
    border-color: var(--ui-warning-border);
    background: var(--ui-warning-bg);
}
.lesson-homework-state-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.lesson-homework-state-title i { font-size: 24px; }
.lesson-homework-state > span {
    color: var(--ui-text);
    font-size: var(--type-control-size);
    line-height: var(--type-control-line);
}
.lesson-homework-result.is-approved,
.lesson-homework-comment.is-approved {
    border-color: var(--ui-success-border);
    background: var(--ui-success-bg);
}
.lesson-homework-result.is-rejected,
.lesson-homework-comment.is-rejected {
    border-color: var(--ui-danger-border);
    background: var(--ui-danger-bg);
}
.lesson-homework-result-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.lesson-homework-result-icon {
    display: grid;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 24px;
}
.lesson-homework-result.is-approved .lesson-homework-result-icon,
.lesson-homework-result.is-approved h3,
.lesson-homework-comment.is-approved > b { color: var(--ui-success-text); }
.lesson-homework-result.is-rejected .lesson-homework-result-icon,
.lesson-homework-result.is-rejected h3,
.lesson-homework-comment.is-rejected > b { color: var(--ui-danger-text); }
.lesson-homework-result h3 {
    margin: 0 0 var(--space-1);
    font-size: var(--type-card-size);
    line-height: var(--type-card-line);
    font-weight: 600;
}
.lesson-homework-result-copy {
    color: var(--ui-text);
    font-size: var(--type-control-size);
    line-height: var(--type-control-line);
}
.lesson-homework-response {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-control);
    background: var(--ui-surface);
}
.lesson-homework-response summary {
    min-height: 44px;
    padding: 11px var(--space-4);
    color: var(--ui-text-muted);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.lesson-homework-response-content {
    display: grid;
    gap: var(--space-3);
    padding: 0 var(--space-4) var(--space-4);
    color: var(--ui-text);
    font-size: var(--type-control-size);
    line-height: var(--type-control-line);
    white-space: pre-wrap;
}
.lesson-homework-answer-file {
    display: inline-flex;
    width: fit-content;
    min-height: 44px;
    align-items: center;
    gap: var(--space-2);
    color: var(--ui-accent);
    font-weight: 600;
}
.lesson-homework-comment {
    margin-top: var(--space-4);
    padding: var(--space-3);
    border-left: 4px solid;
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    color: var(--ui-text);
    font-size: var(--type-control-size);
    line-height: var(--type-control-line);
}
.lesson-homework-comment p { margin: var(--space-2) 0 0; }
.lesson-homework-retry {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--ui-border);
}
.lesson-homework-retry h4 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    color: var(--ui-text);
    font-size: var(--type-body-size);
    font-weight: 600;
}
.lesson-homework-retry p {
    margin: 0 0 var(--space-3);
    color: var(--ui-text-muted);
    font-size: var(--type-control-size);
    line-height: var(--type-control-line);
}
.lesson-complete-state,
.lesson-complete-btn {
    width: 100%;
    min-height: 44px;
    margin-top: var(--space-5);
    padding: 12px 16px;
    font-size: var(--type-body-size);
    font-weight: 600;
}
.lesson-complete-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    color: var(--ui-success-text);
    text-align: center;
}
@media (max-width: 760px) {
    .lesson-homework-preview,
    .lesson-homework-editor,
    .lesson-homework-state,
    .lesson-homework-result { padding: var(--space-4); }
    .lesson-homework-actions { flex-direction: column; }
    .lesson-homework-actions button { width: 100%; flex-basis: auto; }
}
.homework-target-combobox {
    position: relative;
    display: flex;
}
.homework-target-results {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 45;
    max-height: 250px;
    overflow-y: auto;
    padding: 6px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-accent);
    border-radius: 8px;
    box-shadow: var(--ui-shadow-float);
}
.homework-target-results.open {
    display: block;
}
.homework-target-results button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 0;
    box-shadow: none;
    background: transparent;
    color: var(--ui-text);
    text-align: left;
}
.homework-target-results button:hover,
.homework-target-results button.is-active {
    background: var(--ui-accent-soft);
}
.homework-target-results b,
.homework-target-results span,
.homework-target-results p {
    display: block;
}
.homework-target-results span,
.homework-target-results p {
    color: var(--ui-text-muted);
    font-size: 12px;
    margin: 0;
}

.teacher-groups-search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 560px;
    margin: 0 0 14px;
}
.teacher-groups-search > i,
.teacher-group-student-picker > i {
    position: absolute;
    z-index: 2;
    left: 13px;
    color: var(--ui-accent);
    font-size: 19px;
    pointer-events: none;
}
.teacher-groups-search input,
.teacher-group-student-picker input {
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding-left: 43px;
    border: 1px solid var(--ui-control-border);
    border-radius: 8px;
    color: var(--ui-text);
    background: var(--ui-surface-alt);
}
.teacher-groups-search input:focus,
.teacher-group-student-picker input:focus {
    border-color: var(--ui-accent);
    box-shadow: var(--ui-focus-ring);
}
.teacher-groups-search-empty {
    margin: 0;
    padding: 16px;
    border: 1px dashed var(--ui-accent);
    border-radius: 8px;
    color: var(--ui-text-muted);
    text-align: center;
}
.teacher-group-student-picker {
    position: relative;
    display: flex;
    flex: 1 1 280px;
    min-width: 220px;
}
.teacher-group-student-picker > i {
    top: 50%;
    transform: translateY(-50%);
}
.teacher-group-student-results {
    display: none;
    position: absolute;
    z-index: 70;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: min(360px, 48vh);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-float);
}
.teacher-group-student-results.open {
    display: block;
}
.teacher-group-student-results button {
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border: 0;
    border-radius: 6px;
    color: var(--ui-text);
    background: transparent;
    box-shadow: none;
    text-align: left;
}
.teacher-group-student-results button:hover,
.teacher-group-student-results button:focus-visible {
    outline: 1px solid var(--ui-accent);
    background: var(--ui-accent-soft);
}
.teacher-group-student-results button > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.teacher-group-student-results button b,
.teacher-group-student-results button small {
    overflow-wrap: anywhere;
}
.teacher-group-student-results button small,
.teacher-group-student-empty {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    font-weight: 500;
}
.teacher-group-student-results button > i {
    flex: 0 0 auto;
    color: var(--ui-accent);
    font-size: 20px;
}
.teacher-group-student-empty {
    padding: 12px;
    text-align: center;
}

.test-search-picker {
    position: relative;
    width: 100%;
}
.test-search-picker > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 13px;
    color: var(--ui-accent);
    font-size: 19px;
    pointer-events: none;
    transform: translateY(-50%);
}
input.test-search-picker-input {
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 12px 42px 12px 43px;
    border: 1px solid var(--ui-control-border);
    border-radius: 8px;
    color: var(--ui-text);
    background: var(--ui-input-bg);
}
.test-search-picker-input:focus {
    border-color: var(--ui-accent);
    box-shadow: var(--ui-focus-ring);
}
.test-search-picker-native {
    display: none !important;
}
.test-search-picker-results {
    display: none;
    position: absolute;
    z-index: 80;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: min(430px, 55vh);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-float);
}
.test-search-picker-results.open {
    display: block;
}
.test-search-picker-results button {
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border: 0;
    border-radius: 6px;
    color: var(--ui-text);
    background: transparent;
    box-shadow: none;
    text-align: left;
}
.test-search-picker-results button:hover,
.test-search-picker-results button:focus-visible {
    outline: 1px solid var(--ui-accent);
    background: var(--ui-accent-soft);
}
.test-search-picker-results button > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}
.test-search-picker-results button b,
.test-search-picker-results button small {
    overflow-wrap: anywhere;
}
.test-search-picker-results button small,
.test-search-picker-empty,
.test-search-picker-more {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    font-weight: 500;
}
.test-search-picker-results button > i {
    flex: 0 0 auto;
    color: var(--ui-accent);
    font-size: 20px;
}
.test-search-picker-empty,
.test-search-picker-more {
    padding: 12px;
    text-align: center;
}
.test-import-search {
    position: relative;
    display: block;
    margin: 14px 0 10px;
}
.test-import-search > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 13px;
    color: var(--ui-accent);
    font-size: 19px;
    pointer-events: none;
    transform: translateY(-50%);
}
.test-import-search input {
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding-left: 43px;
    border: 1px solid var(--ui-control-border);
    border-radius: 8px;
    color: var(--ui-text);
    background: var(--ui-input-bg);
}
.test-import-search-empty {
    margin: 0;
    padding: 12px;
    color: var(--ui-text-muted);
    text-align: center;
}
.standalone-homework-history {
    margin-bottom: 18px;
}
.standalone-homework-history-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.standalone-homework-history-head p {
    margin: 7px 0 0;
    color: var(--ui-text-muted);
    font-size: 13px;
    line-height: 1.45;
}
.standalone-homework-total {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid var(--ui-accent);
    border-radius: 999px;
    color: var(--ui-accent);
    font-size: 12px;
    font-weight: 600;
}
.standalone-homework-history-list {
    display: grid;
    gap: 10px;
}
.standalone-homework-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 12px;
    background: var(--ui-input-bg);
}
.standalone-homework-row-main {
    min-width: 0;
}
.standalone-homework-row-title {
    display: block;
    color: var(--ui-text);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.standalone-homework-row-meta {
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.standalone-homework-file-size {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    color: var(--ui-warning-text);
    font-size: 12px;
}
.standalone-homework-row-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    color: var(--ui-text-muted);
    font-size: 12px;
}
.standalone-homework-row-stats button {
    padding: 8px 10px;
}
.student-standalone-homework-list {
    display: grid;
    gap: var(--space-4);
}
.student-standalone-homework-empty { padding: var(--space-7); }
.student-standalone-homework-card { border-left: 3px solid var(--ui-accent); }
.student-standalone-homework-card.status-approved { border-left-color: var(--ui-success-border); }
.student-standalone-homework-card.status-rejected { border-left-color: var(--ui-danger-border); }
.student-standalone-homework-card.status-submitted { border-left-color: var(--ui-warning-border); }
.student-standalone-homework-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.student-standalone-homework-head h3 {
    margin: var(--space-1) 0;
    color: var(--ui-text);
    font-size: var(--type-card-size);
    line-height: var(--type-card-line);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.student-standalone-homework-teacher,
.student-standalone-homework-due {
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.student-standalone-homework-description {
    margin: var(--space-4) 0;
    color: var(--ui-text);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.student-standalone-homework-resources {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0;
}
.homework-resource-action {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: var(--space-2);
    padding: 9px 12px;
    text-decoration: none;
}
.student-standalone-homework-comment {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    border-left: 3px solid var(--ui-warning-border);
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    color: var(--ui-text);
    background: var(--ui-warning-bg);
}
.student-standalone-homework-comment > b { color: var(--ui-warning-text); }
.student-standalone-homework-comment p {
    margin: var(--space-2) 0 0;
    line-height: var(--type-body-line);
    white-space: pre-wrap;
}
.student-standalone-homework-answer {
    margin: var(--space-3) 0;
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-control);
    background: var(--ui-surface-alt);
}
.student-standalone-homework-answer summary {
    min-height: 44px;
    padding: 11px var(--space-3);
    color: var(--ui-accent);
    font-weight: 600;
    cursor: pointer;
}
.student-standalone-homework-answer > div {
    padding: 0 var(--space-3) var(--space-3);
    color: var(--ui-text);
    white-space: pre-wrap;
}
.student-standalone-homework-answer > a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    margin: 0 var(--space-3) var(--space-3);
    color: var(--ui-accent);
}
.student-standalone-homework-form {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
}
.student-standalone-homework-form textarea { min-height: 112px; }
.student-standalone-homework-submit {
    min-height: 44px;
    justify-self: start;
    padding: 10px 16px;
}

@media (max-width: 760px) {
    .lead-toggle-btn,
    .teacher-leads-head > div,
    .standalone-homework-history-head,
    .standalone-homework-row,
    .standalone-homework-row-main,
    .standalone-homework-row-stats {
        width: 100%;
    }
    .standalone-homework-row,
    .standalone-homework-history-head {
        flex-direction: column;
    }
    .standalone-homework-row-stats {
        justify-content: flex-start;
    }
    .standalone-homework-form-grid { grid-template-columns: 1fr; }
    .standalone-homework-mode-switch { grid-template-columns:1fr; }
    .standalone-homework-template-head { flex-direction:column; }
    .standalone-homework-template-head button { width:100%; }
    .standalone-homework-create,
    .student-standalone-homework-submit { width: 100%; }
    .student-standalone-homework-head { flex-direction: column; }
}

.course-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.course-form-field {
    margin-bottom: 15px;
}

.course-form-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0 12px;
    padding: 7px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface-alt);
}
.course-form-steps button {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--ui-text-muted);
    box-shadow: none;
    font-size: 12px;
}
.course-form-steps button span {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: var(--type-badge-size);
    font-weight: 600;
}
.course-form-steps button b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.course-form-steps button:hover,
.course-form-steps button.active {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
}
.course-form-stage {
    display: grid;
    gap: 14px;
    margin-bottom: 12px;
    padding: 18px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
}
.course-form-stage[hidden] { display:none; }
.course-form-stage > header { display:grid; gap:4px; }
.course-form-stage > header p { margin:0; color:var(--ui-accent); font-size:var(--type-badge-size); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.course-form-stage > header h4 { margin:0; color:var(--ui-text); font-size:19px; }
.course-form-stage > header span { color:var(--ui-text-muted); font-size:13px; line-height:1.45; }
.course-form-stage > #course-sales-fields { margin-bottom:0; }
.course-form-stage > #course-submit-btn,
.course-form-stage > #course-cancel-btn { margin-top:0 !important; }
.course-form-stage-actions { display:flex; justify-content:flex-end; padding-top:2px; }
.course-form-stage-actions button { min-height:44px; }
.course-form-finish-note { display:flex; gap:9px; align-items:flex-start; padding:12px; border:1px solid var(--ui-warning-border); border-radius:8px; color:var(--ui-warning-text); background:var(--ui-warning-bg); font-size:13px; line-height:1.45; }
.course-form-finish-note i { flex:0 0 auto; margin-top:1px; font-size:17px; }
.course-preview-eyebrow { margin:0; color:var(--ui-accent); font-size:var(--type-badge-size); font-weight:600; letter-spacing:.04em; text-align:center; }
.lesson-stop-copy { color:var(--ui-danger-text); font-weight:600; }
.course-create-program-btn { width:100%; min-height:44px; border-color:var(--ui-accent); color:var(--ui-accent); background:var(--ui-accent-soft); box-shadow:none; }
.course-create-program-btn:hover { background:var(--ui-accent-soft); }

/* Shared teacher workspace building blocks. Keep layout and palette out of HTML. */
.platform-section-title {
    display:flex;
    align-items:center;
    gap:var(--space-2);
    margin:30px 0 20px;
    color:var(--ui-text);
}
.platform-section-title.compact { margin:0 0 15px; }
.platform-field-label {
    display:block;
    margin-bottom:var(--space-2);
    color:var(--ui-text-muted);
    font-size:var(--type-label-size);
    font-weight:500;
    line-height:var(--type-label-line);
}
.platform-help-text {
    margin:var(--space-2) 0 0;
    color:var(--ui-text-muted);
    font-size:var(--type-meta-size);
    line-height:var(--type-meta-line);
}
.platform-action-wide {
    width:100%;
    min-height:44px;
    padding:12px 16px;
}
.platform-action-wide + .platform-action-wide { margin-top:var(--space-3); }
.platform-divider {
    height:1px;
    margin:var(--space-4) 0;
    border:0;
    background:var(--ui-border);
}
.teacher-groups-create-card { margin-bottom:20px; }
.teacher-groups-empty,
.teacher-students-empty,
.teacher-group-members-empty { color:var(--ui-text-muted); font-size:var(--type-meta-size); }
.teacher-group-card { border-left:3px solid var(--ui-accent); }
.teacher-group-card-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-3); }
.teacher-group-card-head h4 { margin:0; color:var(--ui-text); }
.teacher-group-count { color:var(--ui-text-muted); font-size:var(--type-badge-size); }
.teacher-group-card-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.teacher-group-card-actions button { min-height:40px; padding:8px 12px; }
.teacher-group-members { margin-bottom:var(--space-3); }
.teacher-group-member-chip { display:inline-flex; align-items:center; gap:6px; margin:3px; padding:5px 8px; border:1px solid var(--ui-border); border-radius:999px; color:var(--ui-text); background:var(--ui-surface-alt); font-size:var(--type-badge-size); }
.teacher-group-member-remove { display:grid; width:28px; min-width:28px; height:28px; padding:0; place-items:center; border:0; color:var(--ui-danger-text); background:transparent; box-shadow:none; }
.teacher-group-member-remove:hover,
.teacher-group-member-remove:focus-visible { color:var(--ui-danger-text); background:var(--ui-danger-bg); }
.teacher-group-add-row { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.teacher-student-note-input { flex:1; min-width:220px; margin:0; font-size:var(--type-meta-size); }
.teacher-student-note-save { min-width:44px; min-height:44px; padding:8px 10px; }
.teacher-groups-create-row,
.teacher-invite-link-row {
    display:flex;
    gap:var(--space-3);
    flex-wrap:wrap;
}
.teacher-invite-link-row { margin-top:var(--space-3); }
.teacher-groups-create-row input,
.teacher-invite-link-row input {
    flex:1 1 240px;
    min-width:0;
    margin-bottom:0;
}
.teacher-builder-layout {
    display:grid;
    grid-template-columns:minmax(300px, 3fr) minmax(250px, 2fr);
    gap:40px;
    align-items:start;
}
.lesson-markdown-editor {
    display: none;
}
.lesson-markdown-help {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--ui-border);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: var(--ui-surface-alt);
    color: var(--ui-text-muted);
    font-size: 13px;
    line-height: 1.45;
}
.lesson-markdown-help b { color: var(--ui-accent); white-space: nowrap; }
.lesson-markdown-help code {
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: Consolas, "Courier New", monospace;
}
.lesson-markdown-tools {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
}
.lesson-markdown-tools select {
    min-height: 38px;
    width: auto;
    margin: 0;
    padding: 6px 32px 6px 10px;
    border-radius: 7px;
    background: var(--ui-bg);
    color: var(--ui-text);
}
.lesson-markdown-tools button { min-height: 38px; padding: 7px 10px; }
#lesson-markdown-source {
    display: block;
    width: 100%;
    min-height: 420px;
    margin: 0;
    padding: 16px;
    box-sizing: border-box;
    resize: vertical;
    border: 1px solid var(--ui-border);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
    line-height: 1.55;
}
#lesson-markdown-source:focus { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.lesson-reading-content .lesson-markdown-code,
.lesson-html-preview .lesson-markdown-code,
.classroom-lesson-preview .lesson-markdown-code {
    margin: 18px 0;
    overflow: auto;
    border: 1px solid #34475a;
    border-radius: 9px;
    background: #17212b;
    color: #d9e5ef;
    font: 14px/1.6 Consolas, "Courier New", monospace;
    white-space: pre;
}
.lesson-markdown-code .lesson-code-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 37px;
    padding: 0 10px 0 14px;
    border-bottom: 1px solid #34475a;
    background: #202d3a;
    color: #9eb1c2;
    font: 600 12px/1 Inter, system-ui, sans-serif;
}
.lesson-markdown-code code { display: block; padding: 14px 16px; font: inherit; }
.lesson-code-copy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 27px;
    padding: 4px 8px;
    border: 1px solid #52677b;
    border-radius: 6px;
    background: transparent;
    color: #d9e5ef;
    font: 600 12px/1 Inter, system-ui, sans-serif;
    cursor: pointer;
}
.lesson-code-copy:hover { border-color: #8addd5; color: #8addd5; }
.lesson-code-copy:focus { outline: 2px solid #8addd5; outline-offset: 2px; }
.lesson-code-token.lesson-code-comment { color: #7f9b8b; }
.lesson-code-token.lesson-code-string { color: #d9b97e; }
.lesson-code-token.lesson-code-number { color: #c79bf0; }
.lesson-code-token.lesson-code-keyword { color: #83d6ff; font-weight: 600; }

.analytics-metric-action { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.analytics-metric-action small { display: block; margin-top: 8px; color: var(--ui-text-muted); }
.analytics-metric-action:hover, .analytics-metric-action:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.teacher-builder-layout > * { min-width:0; }
@media (max-width:1024px) {
    .teacher-builder-layout { grid-template-columns:minmax(0, 1fr); gap:var(--space-5); }
}
.course-contact-card,
.lesson-settings-card {
    margin-bottom:var(--space-4);
    padding:var(--space-4);
    border:1px solid var(--ui-border);
    border-radius:var(--radius-control);
    background:var(--ui-input-bg);
}
.course-contact-row,
.course-installment-row {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--space-3);
}
.course-installment-row { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.course-contact-row > *,
.course-installment-row > *,
.test-create-field > * { margin-bottom:0; }
.course-contact-row > :is(select, input) {
    height: 68px;
    min-height: 68px;
}
#new-desc { min-height:120px; }
.course-form-grid > * { min-width:0; }
.course-installment-card {
    margin-bottom:var(--space-4);
    padding:var(--space-3);
    border:1px solid var(--ui-border);
    border-radius:var(--radius-control);
    background:var(--ui-input-bg);
}
.course-installment-card .checkbox-container {
    margin:0 0 var(--space-3);
    padding:0;
    border:0;
    background:transparent;
}
.course-plan-hint {
    margin:-8px 0 var(--space-3);
    color:var(--ui-text-muted);
    font-size:var(--type-meta-size);
    line-height:var(--type-meta-line);
}
.course-plan-hint.warning { color:var(--ui-warning-text); }
#sales-plan-hint,
#visibility-plan-hint,
#course-group-access-wrap,
#course-cancel-btn { display:none; }
.course-group-access { margin-bottom:var(--space-3); }
.course-access-modal-content { max-width: 680px; }
.course-access-caption { margin: -8px 0 12px; color: var(--ui-text-muted); }
.course-access-notice { margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--ui-info-border); border-radius: var(--radius-control); color: var(--ui-info-text); background: var(--ui-info-bg); font-size: var(--type-meta-size); line-height: var(--type-meta-line); }
.course-access-grant { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-bottom: 8px; }
.course-access-grant label { align-self: center; font-weight: 600; }
.course-access-search-wrap { position: relative; min-width: 0; }
.course-access-search-wrap > i { position: absolute; z-index: 1; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ui-text-muted); font-size: 19px; pointer-events: none; }
.course-access-search-wrap input { width: 100%; min-width: 0; margin: 0; padding-left: 40px; }
.course-access-search-results { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: 320px; overflow-y: auto; padding: 6px; border: 1px solid var(--ui-border); border-radius: var(--radius-control); background: var(--ui-surface); box-shadow: var(--ui-shadow-float); }
.course-access-search-result { display: grid; width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; border: 0; border-radius: 6px; color: var(--ui-text); background: transparent; text-align: left; }
.course-access-search-result:hover, .course-access-search-result:focus { background: var(--ui-surface-alt); }
.course-access-search-result > i { color: var(--ui-accent); font-size: 21px; }
.course-access-search-result span, .course-access-search-result b, .course-access-search-result small { display: block; min-width: 0; }
.course-access-search-result small, .course-access-search-result em { color: var(--ui-text-muted); font-size: var(--type-meta-size); font-style: normal; }
.course-access-search-empty { margin: 0; padding: 10px; color: var(--ui-text-muted); }
.course-access-help { margin: 0 0 14px; color: var(--ui-text-muted); font-size: var(--type-meta-size); line-height: var(--type-meta-line); }
.course-access-groups { display: grid; gap: 8px; margin-bottom: 16px; }
.course-access-groups h3, .course-access-members-title { margin: 4px 0 0; font-size: var(--type-body-size); }
.course-access-groups > p { margin: -2px 0 2px; color: var(--ui-text-muted); font-size: var(--type-meta-size); }
.course-access-group-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--ui-info-border); border-radius: var(--radius-control); background: var(--ui-info-bg); }
.course-access-group-row b, .course-access-group-row span { display: block; }
.course-access-group-row span { margin-top: 3px; color: var(--ui-text-muted); font-size: var(--type-meta-size); }
.course-access-members { display: grid; gap: 8px; }
.course-access-member { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--ui-border); border-radius: var(--radius-control); background: var(--ui-surface-alt); }
.course-access-member b, .course-access-member span { display: block; }
.course-access-member span, .course-access-protected, .course-access-empty { color: var(--ui-text-muted); font-size: var(--type-meta-size); }
.course-access-member .course-access-login { margin: 3px 0; color: var(--ui-text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.course-access-member .btn-danger { padding: 7px 10px; font-size: var(--type-meta-size); }
@media (max-width: 560px) { .course-access-grant { grid-template-columns: 1fr; } .course-access-grant label { align-self: auto; } .course-access-group-row { align-items: flex-start; flex-direction: column; } }
.course-preview-panel {
    min-width:0;
    height:fit-content;
    padding:var(--space-5);
    border:1px solid var(--ui-border);
    border-radius:var(--radius-panel);
    background:var(--ui-surface);
}
.course-preview-card {
    margin-top:var(--space-4);
    border-color:var(--ui-accent);
    pointer-events:none;
}
.course-preview-image {
    display:flex;
    width:100%;
    aspect-ratio:1;
    align-items:center;
    justify-content:center;
    margin-bottom:var(--space-4);
    overflow:hidden;
    border:1px solid var(--ui-border);
    border-radius:var(--radius-control);
    background:var(--ui-input-bg);
    color:var(--ui-text-muted);
    font-size:var(--type-meta-size);
}
.course-preview-title { margin:var(--space-2) 0; }
.course-preview-old-price {
    display:none;
    margin:-10px 0 var(--space-4);
    color:var(--ui-text-muted);
    font-size:var(--type-body-size);
    text-decoration:line-through;
}
.lesson-course-select {
    margin-bottom:20px;
    padding:12px;
    background:var(--ui-input-bg);
    font-size:var(--type-body-size);
}
.teacher-lessons-list { margin-bottom:35px; }
.teacher-lessons-list-title { margin-bottom:var(--space-3); }
.teacher-lessons-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}
.teacher-lessons-create {
    min-height: 44px;
    padding: 10px 14px;
}
.teacher-lessons-filter {
    min-height: 44px;
    margin: 0;
    padding: 8px 0;
    border: 0;
    color: var(--ui-text-muted);
    background: transparent;
    cursor: pointer;
}
.teacher-lessons-filter > span {
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.teacher-lesson-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    border-color: var(--ui-border);
}
.teacher-lesson-card.is-focused {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}
.teacher-lesson-main {
    flex: 1 1 260px;
    min-width: 0;
}
.lesson-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-1);
    color: var(--ui-text);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    font-weight: 600;
}
.lesson-title-row .lesson-title-text { min-width: 0; overflow-wrap: anywhere; }
.lesson-status-badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    gap: var(--space-1);
    padding: 3px 7px;
    border: 1px solid;
    border-radius: 999px;
    font-size: var(--type-badge-size);
    line-height: var(--type-badge-line);
    font-weight: 500;
}
.lesson-status-badge.is-published {
    border-color: var(--ui-success-border);
    color: var(--ui-success-text);
    background: var(--ui-success-bg);
}
.lesson-status-badge.is-draft {
    border-color: var(--ui-warning-border);
    color: var(--ui-warning-text);
    background: var(--ui-warning-bg);
}
.lesson-status-badge.is-stop { border-color:var(--ui-danger-border); color:var(--ui-danger-text); background:var(--ui-danger-bg); }
.teacher-lesson-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.teacher-lesson-meta span { display: inline-flex; align-items: center; gap: var(--space-1); }
.teacher-lesson-meta .is-homework i { color: var(--ui-accent); }
.teacher-lesson-meta .is-test i { color: var(--ui-warning-text); }
.teacher-lesson-meta .is-stop i { color: var(--ui-danger-text); }
.teacher-lesson-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.teacher-lesson-icon-action,
.teacher-lesson-status-action {
    min-height: 44px;
    padding: 9px 12px;
    font-size: var(--type-control-size);
    line-height: var(--type-control-line);
}
.teacher-lesson-icon-action {
    width: 44px;
    min-width: 44px;
    padding-inline: 0;
}
.teacher-lessons-filter-empty {
    margin: 0;
    padding: var(--space-5);
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
    text-align: center;
}
.copy-lesson-modal-content { max-width: 520px; }
.copy-lesson-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--ui-text);
    font-size: var(--type-section-size);
    line-height: var(--type-section-line);
    font-weight: 600;
}
.copy-lesson-title i { color: var(--ui-accent); }
.copy-lesson-caption {
    margin: var(--space-2) 44px 0 0;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.copy-lesson-label {
    display: block;
    margin: var(--space-5) 0 var(--space-2);
    color: var(--ui-text-muted);
    font-size: var(--type-label-size);
    line-height: var(--type-label-line);
    font-weight: 500;
}
.copy-lesson-select { width: 100%; min-height: 44px; margin: 0; }
.copy-lesson-hint {
    margin: var(--space-3) 0 0;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.copy-lesson-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
}
.copy-lesson-actions button { min-height: 44px; }
.lesson-editor-card { border-color:var(--ui-accent); }
.lesson-editor-shell {
    margin-bottom:var(--space-5);
    border:1px solid var(--ui-border);
    border-radius:var(--radius-control);
    background:var(--ui-input-bg);
}
#lesson-editor { min-height:300px; color:var(--ui-text); }
#lesson-layout-image-input,
#lesson-video-input,
#lesson-html-preview,
#lesson-attached-files-current,
#lesson-selected-files,
#cancel-edit-btn { display:none; }
.lesson-settings-card { padding:var(--space-5); background:var(--ui-surface-alt); }
.lesson-stop-option {
    border-color:var(--ui-danger-border);
    background:var(--ui-danger-bg);
}
.lesson-test-select { margin-bottom:0; background:var(--ui-input-bg); }
.lesson-test-actions {
    display:flex;
    align-items:center;
    gap:var(--space-3);
    flex-wrap:wrap;
    margin-top:var(--space-3);
}
.lesson-test-actions button { padding:8px 12px; font-size:var(--type-meta-size); }
.lesson-test-actions small { color:var(--ui-text-muted); font-size:var(--type-meta-size); }
.lesson-attachment-label { margin-bottom:0; }
.lesson-file-limit-hint { margin:6px 0 10px; }
.lesson-file-input { margin-bottom:var(--space-3); background:var(--ui-input-bg); }
.lesson-upload-progress-card,
.lesson-save-message,
.lesson-files-panel {
    margin: 0 0 var(--space-5);
    padding: var(--space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-control);
    color: var(--ui-text);
    background: var(--ui-surface-alt);
}
.lesson-upload-progress-card {
    border-color: var(--ui-info-border);
    background: var(--ui-info-bg);
}
.lesson-upload-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    color: var(--ui-text);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
    font-weight: 600;
}
.lesson-upload-progress-head > span:last-child {
    flex: 0 0 auto;
    color: var(--ui-info-text);
    font-variant-numeric: tabular-nums;
}
.lesson-upload-progress-meter {
    display: block;
    width: 100%;
    height: 8px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--ui-input-bg);
    color: var(--ui-accent);
}
.lesson-upload-progress-meter::-webkit-progress-bar { background: var(--ui-input-bg); }
.lesson-upload-progress-meter::-webkit-progress-value { background: var(--ui-accent); }
.lesson-upload-progress-meter::-moz-progress-bar { background: var(--ui-accent); }
.lesson-save-message {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
    font-weight: 600;
}
.lesson-save-message.is-info {
    border-color: var(--ui-info-border);
    color: var(--ui-info-text);
    background: var(--ui-info-bg);
}
.lesson-save-message.is-error {
    border-color: var(--ui-danger-border);
    color: var(--ui-danger-text);
    background: var(--ui-danger-bg);
}
.lesson-files-panel.is-pending {
    border-color: var(--ui-success-border);
    background: var(--ui-success-bg);
}
.lesson-files-panel.is-attached { border-left: 3px solid var(--ui-accent); }
.lesson-files-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    color: var(--ui-text);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
    font-weight: 600;
}
.lesson-files-panel-head > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.lesson-files-panel.is-pending .lesson-files-panel-head i { color: var(--ui-success-text); }
.lesson-files-panel.is-attached .lesson-files-panel-head i { color: var(--ui-accent); }
.lesson-files-clear {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 9px 12px;
    border-color: var(--ui-border);
    color: var(--ui-text-muted);
    background: transparent;
}
.lesson-files-list { display: flex; flex-direction: column; gap: var(--space-2); }
.lesson-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-control);
    background: var(--ui-surface);
}
.lesson-file-main,
.lesson-file-link {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
    overflow: hidden;
    color: var(--ui-text);
    text-decoration: none;
}
.lesson-file-main > i { flex: 0 0 auto; color: var(--ui-success-text); }
.lesson-file-link > i { flex: 0 0 auto; color: var(--ui-accent); }
.lesson-file-link:hover { color: var(--ui-accent); }
.lesson-file-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lesson-file-size {
    flex: 0 0 auto;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    white-space: nowrap;
}
.lesson-file-remove {
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}
.lesson-files-hint {
    margin-top: var(--space-2);
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
@media (max-width:760px) {
    .teacher-lessons-toolbar,
    .teacher-lesson-card { align-items: stretch; flex-direction: column; }
    .teacher-lesson-card { gap:var(--space-3); margin-bottom:var(--space-3); }
    .teacher-lessons-create,
    .teacher-lessons-filter,
    .teacher-lesson-main,
    .teacher-lesson-actions { width: 100%; }
    .teacher-lesson-main { flex:0 1 auto; min-height:0; }
    .teacher-lesson-actions { justify-content: flex-start; gap:var(--space-2); }
    .teacher-lesson-status-action { flex: 1 1 160px; }
    .copy-lesson-actions { flex-direction: column-reverse; }
    .copy-lesson-actions button { width: 100%; }
    .lesson-file-row { align-items: flex-start; }
    .lesson-file-main { flex-wrap: wrap; }
    .lesson-file-size { width: 100%; padding-left: 28px; }
}
.lesson-shell {
    display: grid;
    gap: var(--space-5);
}
.lesson-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
}
.lesson-panel {
    min-width: 0;
    padding: var(--space-5);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-surface);
    color: var(--ui-text);
    background: var(--ui-surface);
    box-shadow: none;
}
.lesson-panel h3,
.lesson-panel h4 { margin-top: 0; color: var(--ui-text); }
.lesson-panel h3 {
    font-size: var(--type-card-size);
    line-height: var(--type-card-line);
    font-weight: 600;
}
.lesson-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.lesson-panel-heading h3 { margin: 0; }
.lesson-panel-heading .inline-help-button { flex: 0 0 auto; margin: 0 !important; }
.lesson-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
}
.lesson-form-grid > label,
.lesson-panel > label:not(.checkbox-container) {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}
.lesson-form-grid input,
.lesson-form-grid select,
.lesson-panel > label:not(.checkbox-container) input,
.lesson-panel > label:not(.checkbox-container) select,
.lesson-panel > label:not(.checkbox-container) textarea {
    width: 100%;
    min-height: 44px;
    margin: 0;
    border-color: var(--ui-control-border);
    background: var(--ui-input-bg);
}
.lesson-mini {
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.lesson-chip {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: var(--space-1);
    margin: 0 0 var(--space-2);
    padding: 5px 8px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    color: var(--ui-text);
    background: var(--ui-surface-alt);
    font-size: var(--type-badge-size);
    line-height: var(--type-badge-line);
    font-weight: 500;
}
.lesson-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.lesson-actions button { min-height: 44px; }
.lesson-request { border-left: 3px solid var(--ui-accent); }
.lesson-request.pending_teacher { border-left-color: var(--ui-warning-border); }
.lesson-request.paid,
.lesson-request.confirmed { border-left-color: var(--ui-success-border); }
.lesson-request.rejected,
.lesson-request.cancelled { border-left-color: var(--ui-danger-border); }
.lesson-slot-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.lesson-slot-list label {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: var(--space-2);
    padding: 9px;
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-control);
    color: var(--ui-text);
    background: var(--ui-input-bg);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.lesson-time-input {
    min-height: 44px;
    border: 1px solid var(--ui-control-border);
    border-radius: var(--radius-control);
    color: var(--ui-text);
    background: var(--ui-input-bg);
    color-scheme: inherit;
}
.lesson-schedule-grid { display: grid; grid-template-columns:minmax(0,1fr); gap: var(--space-3); }
.lesson-day-card {
    display: grid;
    grid-template-columns: 72px minmax(260px, 1fr);
    align-items: start;
    gap: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-control);
    background: var(--ui-surface-alt);
}
.lesson-day-name {
    padding-top: 6px;
    color: var(--ui-text);
    font-size: var(--type-card-size);
    line-height: var(--type-card-line);
    font-weight: 600;
}
.lesson-day-body,
.lesson-day-ranges { display: grid; min-width:0; gap: var(--space-2); }
.lesson-hours-row {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(110px, 1fr) 44px;
    align-items: center;
    gap: var(--space-2);
}
.lesson-hours-row button {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}
.lesson-timeline {
    position: relative;
    height: 12px;
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: var(--ui-input-bg);
}
.lesson-timeline span {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: var(--ui-accent);
    box-shadow: none;
}
.lesson-timeline-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-1);
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    font-variant-numeric: tabular-nums;
}
.lesson-sync-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: 10px 12px;
    border: 1px solid var(--ui-info-border);
    border-radius: var(--radius-control);
    color: var(--ui-info-text);
    background: var(--ui-info-bg);
    font-size: var(--type-meta-size);
    line-height: var(--type-meta-line);
}
.lesson-sync-note.has-bottom-space { margin-bottom: var(--space-3); }
.lesson-sync-note.has-top-space { margin-top: var(--space-3); }
.lesson-sync-note.is-compact { margin: var(--space-2) 0; }
.lesson-sync-note i { flex: 0 0 auto; margin-top: 2px; font-size: 16px; }
.lesson-sync-note b,
.lesson-sync-note span { display: block; }
.lesson-sync-note span { color: var(--ui-text-muted); font-weight: 500; }
.lesson-day-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.lesson-text-action {
    min-height: 44px;
    border-color: transparent;
    color: var(--ui-accent);
    background: transparent;
}
.lesson-text-action:hover,
.lesson-text-action:focus-visible {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
}
.lesson-locked-copy,
.lesson-offer-copy {
    color: var(--ui-text);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
}
.lesson-upgrade-action { min-height: 44px; margin-top: var(--space-4); }
.lesson-working-hours-hint { margin: 0 0 var(--space-3); }
.lesson-offer-description { min-height: 112px !important; resize: vertical; }
.lesson-offer-schedules-panel {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    background: var(--ui-surface-alt);
}
#lesson-offer-cancel-edit { display: none; }
#lesson-offer-cancel-edit.is-visible { display: inline-flex; }
.lesson-alternative-modal.is-open { display: flex; }
.lesson-alternative-modal-content { max-width: 560px; }
#lesson-alt-slots { display: grid; gap: var(--space-2); }
#lesson-alt-slots input { width: 100%; min-height: 44px; margin: 0; }
.lesson-alternative-add { min-height: 44px; margin: var(--space-2) 0; }
.lesson-alternative-comment { min-height: 96px; resize: vertical; }
.student-offer-message { min-height: 96px; margin-top: var(--space-3); resize: vertical; }
.student-offer-submit { min-height: 44px; margin-top: var(--space-2); }
@media(max-width:760px) {
    .lesson-panel { padding: var(--space-4); }
    .lesson-grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .lesson-day-card { grid-template-columns: minmax(0,1fr); min-width:0; gap: var(--space-2); padding: var(--space-3); }
    .lesson-day-name { padding-top: 0; }
    .lesson-hours-row { display: flex; align-items: stretch; gap: 6px; }
    .lesson-hours-row button { flex: 0 0 44px; }
    .lesson-time-input {
        flex: 1 1 0;
        box-sizing: border-box;
        width: 0;
        min-width: 0 !important;
        padding: 10px 7px;
    }
    .lesson-day-actions { display: grid; grid-template-columns: 1fr; }
    .lesson-day-actions button,
    .lesson-actions button,
    .student-offer-submit { width: 100%; justify-content: center; }
    .lesson-sync-note { padding: 9px 10px; }
}
.teacher-test-subjects-panel {
    margin-bottom:18px;
    border-left:3px solid var(--ui-accent);
}
.teacher-test-subjects-heading {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--space-3);
    flex-wrap:wrap;
}
.teacher-test-subjects-heading h4 { margin:0 0 6px; }
.teacher-test-subjects-heading p {
    max-width:720px;
    margin:0;
    color:var(--ui-text-muted);
    font-size:var(--type-meta-size);
    line-height:var(--type-meta-line);
}
#teacher-test-subjects { margin-top:var(--space-4); }
#test-editor-box { display:none; }
.test-editor-heading {
    position: sticky;
    z-index: 40;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -4px -4px 18px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface);
}
.test-editor-title { margin:0; color:var(--ui-accent); }
.test-editor-back-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 11px;
    border: 1px solid var(--ui-control-border);
    border-radius: 7px;
    color: var(--ui-accent);
    background: var(--ui-surface-alt);
    box-shadow: none;
    font-size: var(--type-meta-size);
    font-weight: 600;
}
.test-editor-back-button:hover,
.test-editor-back-button:focus-visible { border-color:var(--ui-accent); background:var(--ui-accent-soft); }
@media (max-width: 620px) {
    .test-editor-heading { top: 4px; align-items: flex-start; }
    .test-editor-back-button span { display:none; }
    .test-editor-back-button { padding:8px 10px; }
}
.question-editor-label { margin-bottom:10px; }
.question-type-select { margin-bottom:20px; background:var(--ui-input-bg); }
#q-partial-credit-settings,
#q-ref-container { display:none; }
.question-reference-container { margin-bottom:20px; }
.question-reference-answer {
    width:100%;
    min-height:120px;
    box-sizing:border-box;
    padding:12px;
    border:1px dashed var(--ui-control-border);
    border-radius:var(--radius-control);
    background:var(--ui-input-bg);
    color:var(--ui-text);
}
.question-add-option {
    min-height:44px;
    margin-bottom:20px;
    padding:9px 15px;
    border-color:var(--ui-control-border);
    background:transparent;
    color:var(--ui-text-muted);
    box-shadow:none;
    font-size:var(--type-meta-size);
}
.teacher-tests-list-title {
    margin-top:40px;
    padding-top:20px;
    border-top:1px solid var(--ui-border);
}
.teacher-profile-card { max-width:500px; }
.teacher-profile-title {
    margin:0 0 20px;
    padding-bottom:var(--space-4);
    border-bottom:1px solid var(--ui-border);
}
.teacher-profile-card > label { margin-bottom:var(--space-2); }
.teacher-profile-section { margin-top:20px; }
.course-card-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
    gap:var(--space-5);
}
.course-card-grid.spacious { margin-bottom:50px; }
.student-teachers-card-title { margin-bottom:var(--space-4); }
.student-teacher-invite-row {
    display:flex;
    gap:var(--space-3);
    flex-wrap:wrap;
}
.student-teacher-invite-row input {
    flex:1 1 240px;
    min-width:0;
    margin-bottom:0;
}
.student-teachers-list { margin-top:20px; }
.student-bonus-help { margin-top:var(--space-4); }
.student-profile-oauth { margin-top:20px; }
.linked-accounts-section { margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--ui-border); }
.linked-accounts-title { margin:0 0 var(--space-2); }
.linked-accounts-copy,
.linked-accounts-empty { margin:0 0 var(--space-2); color:var(--ui-text-muted); font-size:var(--type-meta-size); line-height:1.5; }
.linked-account-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-2); padding:var(--space-3); border:1px solid var(--ui-border); border-radius:var(--radius-surface); background:var(--ui-accent-soft); }
.linked-account-main { min-width:0; }
.linked-account-name { display:block; color:var(--ui-text); }
.linked-account-description { display:block; margin-top:2px; color:var(--ui-text-muted); font-size:var(--type-badge-size); line-height:var(--type-badge-line); }
.linked-account-action { flex:none; min-height:40px; padding:9px 12px; white-space:nowrap; }
@media (max-width:520px) {
    .linked-account-row { align-items:stretch; flex-direction:column; }
    .linked-account-action { width:100%; }
}
.lesson-viewer-title {
    margin-bottom:30px;
    padding-bottom:var(--space-4);
    border-bottom:1px solid var(--ui-border);
    color:var(--ui-text);
}
.lesson-mobile-current { color:var(--ui-text); font-weight:600; }
.lesson-viewer-grid {
    display:flex;
    align-items:flex-start;
    gap:30px;
}
.lesson-nav-panel {
    position:sticky;
    top:90px;
    min-width:280px;
    padding:var(--space-4);
    border:1px solid var(--ui-border);
    border-radius:var(--radius-panel);
    background:var(--ui-surface);
}
.lesson-nav-header h3 { margin:0; font-size:var(--type-section-size); }
.lesson-nav-list { display:flex; flex-direction:column; gap:var(--space-3); }
.lesson-main-panel { width:100%; min-width:300px; }

@media (max-width:760px) {
    .teacher-builder-layout { grid-template-columns:1fr; gap:var(--space-5); }
    .course-contact-row,
    .course-installment-row { grid-template-columns:1fr; }
    .course-preview-panel { padding:var(--space-4); }
    .course-card-grid { grid-template-columns:1fr; }
}

.course-sales-card {
    padding: 16px !important;
    border-color: var(--ui-border) !important;
    background: var(--ui-surface-alt) !important;
}

.course-sales-heading h4 {
    margin: 0 0 6px;
    color: var(--ui-text);
}

.course-sales-heading p {
    margin: 0 0 14px;
    color: var(--ui-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.course-installment-checkbox {
    display: none !important;
}

#course-installment-fields {
    gap: 12px !important;
    margin-bottom: 12px;
}

@media (max-width: 760px) {

    .course-form-grid {
        grid-template-columns: 1fr;
    }
    .course-form-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .course-form-stage {
        padding:14px;
    }
    .course-form-stage-actions button { width:100%; }
}

/* === Расписание === */
.calendar-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    margin-bottom: 18px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
}
.calendar-toolbar h3 {
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.calendar-toolbar p {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: 13px;
}
.calendar-toolbar-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.calendar-toolbar-actions button,
.calendar-list-actions button {
    padding: 10px 12px;
}
.calendar-toolbar-actions button[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}
.calendar-week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 18px;
    overflow-x: visible;
}
.calendar-day {
    min-height: 260px;
    min-width: 0;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 10px;
}
.calendar-day.today,
.calendar-month-day.today,
.calendar-month-agenda-day.today {
    border-color: var(--ui-accent);
    box-shadow: var(--ui-focus-ring);
}
.calendar-day-head {
    color: var(--ui-text);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ui-border);
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.calendar-day-head span,
.calendar-month-date span {
    color: var(--ui-accent);
    font-size: var(--type-meta-size);
    font-weight: 600;
}
.calendar-day-events {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.calendar-event {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    text-align: left;
    border-radius: 6px;
    color: var(--ui-text);
    background: var(--ui-info-bg);
    border-color: var(--ui-info-border);
    box-shadow: none;
}
.calendar-event span,
.calendar-event small {
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    max-width: 100%;
    overflow-wrap: anywhere;
}
.calendar-event b {
    line-height: 1.25;
    max-width: 100%;
    overflow-wrap: anywhere;
}
.calendar-event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.calendar-conflict-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border: 1px solid var(--ui-danger-border);
    border-radius: 999px;
    color: var(--ui-danger-text);
    background: var(--ui-danger-bg);
    font-size: var(--type-badge-size);
    font-style: normal;
    font-weight: 600;
    line-height: 1.35;
}
.calendar-event-audience,
.calendar-list-audience {
    display: inline-flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    width: fit-content;
    padding: 3px 6px;
    border-radius: 5px;
    color: var(--ui-text) !important;
    background: var(--ui-surface-alt);
    font-weight: 600;
}
.calendar-event-audience i,
.calendar-list-audience i {
    color: var(--ui-accent);
    font-size: 15px;
}
.calendar-event-audience span,
.calendar-list-audience span {
    color: var(--ui-text-muted) !important;
    font-size: var(--type-badge-size);
    font-weight: 600;
}
.calendar-event-audience.is-empty,
.calendar-list-audience.is-empty {
    color: var(--ui-text-muted) !important;
    font-weight: 500;
}
.calendar-repeat-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    padding: 2px 6px;
    border: 1px solid var(--ui-info-border);
    border-radius: 999px;
    color: var(--ui-info-text);
    background: var(--ui-info-bg);
    font-size: var(--type-badge-size);
    font-style: normal;
    font-weight: 600;
    vertical-align: middle;
}
.calendar-event:hover,
.calendar-event:focus-visible {
    transform: none;
    text-shadow: none;
    background: var(--ui-info-bg);
    border-color: var(--ui-info-border);
    box-shadow: var(--ui-focus-ring);
}
.calendar-event:hover span,
.calendar-event:hover small,
.calendar-event:focus-visible span,
.calendar-event:focus-visible small {
    color: var(--ui-text-muted);
    text-shadow: none;
}
.calendar-event-selectable {
    position: relative;
    padding-left: 38px;
}
.calendar-event.selected,
.calendar-list-item.selected {
    border-color: var(--ui-danger-border);
    background: var(--ui-danger-bg);
    box-shadow: var(--ui-focus-ring);
}
.calendar-select-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ui-danger-text);
    font-style: normal;
    font-size: 22px;
}
.calendar-event .calendar-select-mark {
    position: absolute;
    left: 10px;
    top: 10px;
}
.calendar-event-ongoing,
.calendar-list-item-ongoing {
    position: relative;
    border-color: var(--ui-info-border);
    background: var(--ui-info-bg);
    box-shadow: inset 3px 0 0 var(--ui-accent);
}
.calendar-event-ongoing:hover,
.calendar-event-ongoing:focus-visible {
    background: var(--ui-info-bg);
    box-shadow: inset 3px 0 0 var(--ui-accent), var(--ui-focus-ring);
}
.calendar-now-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    color: var(--ui-on-accent);
    background: var(--ui-accent);
    font-size: var(--type-badge-size);
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: 2px;
    text-shadow: none;
}
.calendar-event-consultation { background: var(--ui-success-bg); border-color: var(--ui-success-border); }
.calendar-event-individual_lesson { background: var(--ui-info-bg); border-color: var(--ui-info-border); }
.calendar-event-group_lesson { background: var(--ui-event-group-bg); border-color: var(--ui-event-group-text); }
.calendar-event-homework { background: var(--ui-warning-bg); border-color: var(--ui-warning-border); }
.calendar-event-exam { background: var(--ui-danger-bg); border-color: var(--ui-danger-border); }
.calendar-event-personal { background: var(--ui-surface-alt); border-color: var(--ui-border); }
.calendar-event-completed { border-color: var(--ui-success-border); }
.calendar-event-missed { border-color: var(--ui-danger-border); background: var(--ui-danger-bg); }
.calendar-empty,
.calendar-muted {
    color: var(--ui-text-muted);
    font-size: 13px;
}
.calendar-list-panel,
.notification-settings-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 18px;
}
.notification-settings-card.compact {
    padding: 16px;
}
.calendar-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    align-items: stretch;
}
.calendar-save-settings {
    margin-top: 12px;
    width: auto;
    min-width: 240px;
}
.calendar-inline-input {
    display: flex;
    align-items: center;
    gap: 8px;
}
.calendar-inline-input input {
    flex: 1;
}
.calendar-inline-input small {
    color: var(--ui-text-muted);
    font-size: 12px;
}
.calendar-segment {
    display: inline-flex;
    padding: 4px;
    gap: 4px;
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
}
.calendar-segment button {
    border-color: transparent;
    box-shadow: none;
    padding: 8px 12px;
}
.calendar-segment button.active {
    border-color: var(--ui-accent);
    color: var(--ui-text);
    background: var(--ui-accent-soft);
}
.calendar-month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    overflow-x: visible;
    margin-bottom: 18px;
}
.calendar-month-weekday {
    color: var(--ui-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    padding: 0 8px 4px;
}
.calendar-month-day {
    min-height: 138px;
    min-width: 0;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.calendar-month-day:hover,
.calendar-month-day:focus-visible,
.calendar-month-agenda-day:hover,
.calendar-month-agenda-day:focus-visible {
    border-color: var(--ui-accent);
    box-shadow: var(--ui-focus-ring);
    outline: none;
}
.calendar-month-day.muted {
    opacity: 0.45;
}
.calendar-month-date {
    color: var(--ui-text);
    font-weight: 600;
    margin-bottom: 8px;
}
.calendar-month-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.calendar-month-events .calendar-event {
    padding: 7px;
}
.teacher-tariffs-stack {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.teacher-tariff-section {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 18px;
}
.teacher-tariff-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--ui-text);
}
.teacher-tariff-section p {
    margin: -6px 0 16px;
    color: var(--ui-text-muted);
    font-size: 13px;
}
.teacher-tariff-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.teacher-addon-section {
    border-style: dashed;
    background: var(--ui-accent-soft);
}
.calendar-month-agenda {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.calendar-month-agenda-day {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.calendar-audience-row {
    display: grid;
    grid-template-columns: minmax(130px, 180px) 1fr;
    gap: 10px;
}
.calendar-student-combobox {
    position: relative;
    display: flex;
}
.calendar-student-combobox input[type="text"] {
    width: 100%;
}
.calendar-student-results {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 40;
    max-height: 240px;
    overflow-y: auto;
    background: var(--ui-surface);
    border: 1px solid var(--ui-accent);
    border-radius: 8px;
    box-shadow: var(--ui-shadow-float);
    padding: 6px;
}
.calendar-student-results.open {
    display: block;
}
.calendar-student-results button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 0;
    box-shadow: none;
    background: transparent;
    color: var(--ui-text);
    text-align: left;
}
.calendar-student-results button:hover {
    background: var(--ui-accent-soft);
}
.calendar-student-results span,
.calendar-student-results p {
    color: var(--ui-text-muted);
    margin: 0;
    font-size: 12px;
}
.calendar-options-box {
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    padding: 14px;
}
.calendar-options-box h4 {
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.student-calendar-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.student-calendar-card {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 14px;
    padding: 16px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
}
.student-calendar-card.calendar-event-individual_lesson { border-left: 4px solid var(--ui-info-border); }
.student-calendar-card.calendar-event-group_lesson { border-left: 4px solid var(--ui-event-group-text); }
.student-calendar-date {
    color: var(--ui-accent);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.25;
}
.student-calendar-body span,
.student-calendar-body small,
.student-calendar-body p {
    display: block;
    color: var(--ui-text-muted);
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 5px;
}
.student-calendar-body b {
    display: block;
    color: var(--ui-text);
    font-size: 18px;
    line-height: 1.25;
    margin-bottom: 6px;
}
.calendar-list-panel h4,
.notification-settings-card h4 {
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.notification-settings-card p {
    margin: -6px 0 14px;
    color: var(--ui-text-muted);
    font-size: 13px;
}
.notification-push-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 6px;
}
.notification-push-actions button {
    width: auto;
    min-height: 44px;
}
.notification-settings-card .notification-push-hint {
    margin: 0 0 14px;
}
.calendar-list-item {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-top: 1px solid var(--ui-border);
}
.calendar-list-item-selectable {
    cursor: pointer;
    padding: 12px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
}
.calendar-list-item-selectable:hover {
    border-color: var(--ui-danger-border);
    background: var(--ui-danger-bg);
}
.calendar-list-item-completed {
    border-left: 3px solid var(--ui-success-text);
    padding-left: 12px;
}
.calendar-list-item-missed {
    border-left: 3px solid var(--ui-danger-text);
    padding-left: 12px;
}
.calendar-list-item-ongoing {
    padding-left: 12px;
}
.calendar-list-item:first-of-type {
    border-top: 0;
}
.calendar-list-item b,
.calendar-list-item span,
.calendar-list-item p {
    display: block;
}
.calendar-list-item b {
    color: var(--ui-text);
    margin-bottom: 4px;
}
.calendar-list-item span,
.calendar-list-item p {
    color: var(--ui-text-muted);
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
}
.calendar-list-item .calendar-conflict-badge {
    margin-left: 5px;
    vertical-align: middle;
}
.calendar-list-audience-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.calendar-list-audience-row > span:not(.calendar-list-audience)::before {
    content: '·';
    margin-right: 6px;
}
.calendar-list-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.calendar-modal-content {
    max-width: 860px;
    max-height: 86vh;
    overflow-y: auto;
}
.calendar-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.calendar-field,
.calendar-toggle {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--ui-text-muted);
    font-size: 12px;
}
.calendar-field input,
.calendar-field select,
.calendar-field textarea {
    margin-bottom: 0;
}
.calendar-field textarea {
    min-height: 90px;
    resize: vertical;
}
.calendar-field-wide {
    grid-column: 1 / -1;
}
.calendar-form-section {
    padding: 16px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-input-bg) 72%, transparent);
}
.calendar-form-section > h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    color: var(--ui-text);
}
.calendar-form-section > h4 i { color: var(--ui-accent); }
.calendar-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.calendar-primary-slot { grid-template-columns: minmax(180px, 1.3fr) minmax(130px, .8fr) minmax(150px, .9fr); }
.calendar-date-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    gap: 6px;
}
.calendar-date-control input { min-width: 0; }
.calendar-date-control button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    color: var(--ui-accent);
    box-shadow: none;
}
.calendar-additional-slots { display: grid; gap: 10px; margin-top: 12px; }
.calendar-schedule-slot {
    display: grid;
    grid-template-columns: 34px minmax(180px, 1.3fr) minmax(130px, .8fr) 42px;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px dashed color-mix(in srgb, var(--ui-accent) 42%, var(--ui-border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--ui-accent) 4%, transparent);
}
.calendar-schedule-slot-number {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    align-self: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    color: var(--ui-accent);
    font-weight: 600;
}
.calendar-remove-slot {
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    color: var(--ui-danger-text);
    border-color: color-mix(in srgb, var(--ui-danger-text) 48%, transparent);
    box-shadow: none;
}
.calendar-add-slot-button {
    width: fit-content;
    margin-top: 12px;
    padding: 10px 14px;
    color: var(--ui-accent);
    border-style: dashed;
    box-shadow: none;
}
.calendar-repeat-row {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) minmax(190px, .7fr);
    gap: 12px;
    align-items: end;
    margin-top: 14px;
}
.calendar-section-help {
    margin: 10px 0 0;
    color: var(--ui-text-muted);
    font-size: 12px;
    line-height: 1.5;
}
.calendar-toggle {
    flex-direction: row;
    align-items: center;
    padding: 12px;
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text);
}
.calendar-toggle input {
    width: 18px;
    height: 18px;
}
.calendar-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 18px;
}
.teacher-student-stats-modal {
    max-width: 900px;
}
.student-stats-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-right: 36px;
}
.student-stats-modal-head h3 {
    margin: 0 0 8px;
}
.student-stats-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.student-stats-head-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ui-accent);
    font-size: 12px;
    font-weight: 600;
}
.student-stats-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .9fr);
    gap: 10px;
    margin-top: 14px;
}
.student-management-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-bg);
}
.student-management-ai {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    border-color: var(--ui-info-border);
    background: var(--ui-info-bg);
}
.student-management-parent {
    align-items: flex-start;
    background: var(--ui-success-bg);
}
.student-management-card-copy {
    min-width: 0;
}
.student-management-card-copy > span,
.student-course-access-panel > div > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ui-accent);
    font-size: var(--type-badge-size);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.student-management-card-copy h4 {
    margin: 5px 0 4px;
    color: var(--ui-text);
    font-size: 16px;
}
.student-management-card-copy p,
.student-course-access-panel p {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: 12px;
    line-height: 1.45;
}
.student-management-card-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.student-management-ai .student-management-card-actions {
    width: 100%;
    justify-content: flex-start;
}
.student-management-ai .student-management-card-actions button {
    max-width: 100%;
}
.student-management-card button {
    min-height: 44px;
    padding: 8px 10px;
    font-size: 12px;
}
.student-management-card button small {
    color: inherit;
    font-size: var(--type-badge-size);
    opacity: .82;
}
.student-engagement-card {
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--ui-info-border);
    border-radius: 10px;
    background: var(--ui-info-bg);
}
.student-engagement-card.paused { border-color: var(--ui-warning-border); }
.student-engagement-card.inactive { border-color: var(--ui-border); background: var(--ui-bg); }
.student-engagement-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.student-engagement-head > div:first-child { min-width:0; }
.student-engagement-head span { display:inline-flex; align-items:center; gap:5px; color:var(--ui-accent); font-size:var(--type-badge-size); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.student-engagement-head h4 { margin:5px 0 4px; color:var(--ui-text); font-size:16px; }
.student-engagement-head p { max-width:660px; margin:0; color:var(--ui-text-muted); font-size:12px; line-height:1.45; }
.student-engagement-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; flex:0 0 auto; }
.student-engagement-actions button { min-height:44px; padding:8px 12px; font-size:var(--type-badge-size); white-space:nowrap; }
.student-engagement-archive { color:var(--ui-text-muted); border-color:var(--ui-border); box-shadow:none; }
.student-engagement-suggestion { display:flex; width:fit-content; margin-top:12px; padding:8px 10px; border:1px solid var(--ui-warning-border); border-radius:7px; color:var(--ui-warning-text); background:var(--ui-warning-bg); font-size:12px; line-height:1.4; }
.student-engagement-summary { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.student-engagement-summary span { padding:7px 9px; border:1px solid var(--ui-border); border-radius:7px; color:var(--ui-text-muted); font-size:12px; }
.student-engagement-summary b { color:var(--ui-text); }
.student-activity-calendar { display:grid; grid-template-columns:repeat(30, minmax(0, 1fr)); gap:4px; margin-top:12px; }
.student-activity-day { min-height:24px; border:1px solid var(--ui-border); border-radius:4px; background:var(--ui-surface-alt); }
.student-activity-day.visited { background:var(--ui-accent); }
.student-activity-day.completed { background:var(--ui-success-text); box-shadow:none; }
.student-activity-legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:9px; color:var(--ui-text-muted); font-size:var(--type-meta-size); }
.student-activity-legend span { display:inline-flex; align-items:center; gap:5px; }
.student-activity-legend i { width:9px; height:9px; border-radius:3px; background:var(--ui-surface-alt); }
.student-activity-legend i.visited { background:var(--ui-accent); }
.student-activity-legend i.completed { background:var(--ui-success-text); }
.student-course-access-panel {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--ui-border);
}
.student-course-access-panel > div:first-child {
    margin-bottom: 11px;
}
.teacher-student-card-managed {
    display: grid;
    grid-template-columns: minmax(170px, .8fr) minmax(240px, 1.2fr) auto;
    align-items: center;
}
.teacher-student-card-managed .teacher-student-head {
    width: auto;
}
.teacher-student-note-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.teacher-student-note-row input {
    min-width: 0 !important;
}
.teacher-student-manage-btn {
    white-space: nowrap;
}
.student-stats-back {
    flex: 0 0 auto;
    padding: 8px 11px;
    color: var(--ui-text-muted);
    background: transparent;
    border-color: var(--ui-border);
    box-shadow: none;
}
.student-stats-back span {
    font-size: 18px;
    line-height: 1;
}
.student-stats-back em {
    font-style: normal;
}
.student-stats-tabs {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    gap: 6px;
    margin: 18px 0;
    padding: 5px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-bg);
}
.student-stats-tab {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 10px 8px;
    white-space: normal;
    line-height: 1.4;
    color: var(--ui-text-muted);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.student-stats-tab i { flex-shrink:0; }
.student-stats-tab.active {
    color: var(--ui-text);
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
}
.student-stats-key-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.student-stats-key-metrics > div {
    padding: 15px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-bg);
}
.student-stats-key-metrics b,
.student-stats-key-metrics span {
    display: block;
}
.student-stats-key-metrics b {
    color: var(--ui-accent);
    font-size: 25px;
}
.student-stats-key-metrics span {
    margin-top: 5px;
    color: var(--ui-text-muted);
    font-size: 12px;
}
.student-stats-alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}
.student-stats-alert,
.student-stats-all-good {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    color: var(--ui-text-muted);
    font-size: 12px;
}
.student-stats-alert.warning {
    color: var(--ui-warning-text);
    border-color: var(--ui-warning-border);
}
.student-stats-alert.danger {
    color: var(--ui-danger-text);
    border-color: var(--ui-danger-border);
}
.student-stats-all-good {
    margin-top: 12px;
    color: var(--ui-success-text);
    border-color: var(--ui-success-border);
}
.student-stats-section-head {
    margin: 20px 0 8px;
}
.student-stats-section-head h4 {
    margin: 0;
}
.student-stats-activity-list {
    display: grid;
    gap: 6px;
}
.student-stats-activity-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--ui-border);
}
.student-stats-activity-row > i {
    color: var(--ui-accent);
    font-size: 20px;
}
.student-stats-activity-row b,
.student-stats-activity-row span {
    display: block;
}
.student-stats-activity-row b {
    color: var(--ui-text);
    font-size: 13px;
}
.student-stats-activity-row span,
.student-stats-activity-row time {
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
}
.student-stats-course-list,
.student-stats-homework-list {
    display: grid;
    gap: 9px;
}
.student-stats-course-row,
.student-stats-homework-row {
    overflow: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-bg);
}
.student-stats-course-row > summary,
.student-stats-homework-row > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px;
    cursor: pointer;
    list-style: none;
}
.student-stats-course-row > summary::-webkit-details-marker,
.student-stats-homework-row > summary::-webkit-details-marker {
    display: none;
}
.student-stats-course-row summary b,
.student-stats-course-row summary span,
.student-stats-homework-row summary b,
.student-stats-homework-row summary span {
    display: block;
}
.student-stats-course-row summary b,
.student-stats-homework-row summary b {
    color: var(--ui-text);
}
.student-stats-course-row summary span,
.student-stats-homework-row summary span {
    margin-top: 3px;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
}
.student-stats-course-progress {
    flex: 0 0 180px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.student-stats-course-progress > span {
    width: 38px;
    margin: 0 !important;
    color: var(--ui-accent) !important;
    font-weight: 600;
    text-align: right;
}
.student-stats-course-progress > div {
    flex: 1;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ui-input-bg);
}
.student-stats-course-progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--ui-accent), var(--ui-success-text));
}
.student-stats-course-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 13px 13px;
}
.student-stats-course-details span {
    padding: 5px 8px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
}
.student-stats-course-details .warning {
    color: var(--ui-warning-text);
}
.student-stats-course-details .danger {
    color: var(--ui-danger-text);
}
.student-stats-homework-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.student-stats-homework-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}
.student-stats-homework-head h4,
.student-stats-homework-head p {
    margin: 0;
}
.student-stats-homework-head p {
    margin-top: 4px;
    color: var(--ui-text-muted);
    font-size: 12px;
    line-height: 1.45;
}
.student-stats-homework-head > span {
    flex: 0 0 auto;
    padding: 6px 9px;
    border: 1px solid var(--ui-accent);
    border-radius: 999px;
    color: var(--ui-accent);
    font-size: 12px;
    font-weight: 600;
}
.student-stats-homework-summary span {
    padding: 7px 10px;
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    color: var(--ui-text-muted);
    font-size: 12px;
}
.student-stats-homework-summary b {
    color: var(--ui-text);
}
.student-stats-homework-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: -2px 0 12px;
    padding: 9px 10px;
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    color: var(--ui-text-muted);
    background: var(--ui-accent-soft);
    font-size: var(--type-meta-size);
    line-height: 1.45;
}
.student-stats-homework-note i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--ui-accent);
    font-size: 16px;
}
.student-stats-homework-row.pending {
    border-left: 3px solid var(--ui-warning-text);
}
.student-stats-homework-row.approved {
    border-left: 3px solid var(--ui-success-text);
}
.student-stats-homework-row.rejected {
    border-left: 3px solid var(--ui-danger-text);
}
.student-stats-homework-row summary strong {
    color: var(--ui-accent);
    font-size: 12px;
    white-space: nowrap;
}
.student-stats-homework-body {
    padding: 0 13px 13px;
}
.student-stats-answer {
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    background: var(--ui-surface);
}
.student-stats-answer small,
.student-stats-comment span {
    display: block;
    margin-bottom: 5px;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
}
.student-stats-answer p {
    margin: 0;
    color: var(--ui-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.55;
}
.student-stats-file-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    color: var(--ui-accent);
}
.student-stats-comment {
    display: block;
    margin-top: 10px;
}
.student-stats-comment textarea {
    min-height: 70px;
    margin: 0;
}
.student-stats-homework-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 9px;
}
.student-stats-send-result {
    width: 100%;
    margin-top: 9px;
}
.student-payment-summary,
.student-payment-entry-card,
.student-payment-history {
    margin-bottom: 16px;
    padding: 18px;
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-surface);
    background: var(--ui-surface);
}
.student-payment-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.student-payment-summary > div:first-child { display: grid; gap: 5px; }
.student-payment-summary span,
.student-payment-summary small,
.student-payment-entry-card p,
.student-payment-row span,
.student-payment-row time { color: var(--ui-text-muted); }
.student-payment-summary strong { color: var(--ui-text); font-size: 30px; }
.student-payment-summary.positive { border-color: var(--ui-success-border); }
.student-payment-summary.positive strong,
.student-payment-row.positive > strong,
.student-payment-row.positive > i { color: var(--ui-success-text); }
.student-payment-summary.negative { border-color: var(--ui-danger-border); }
.student-payment-summary.negative strong,
.student-payment-row.negative > strong,
.student-payment-row.negative > i { color: var(--ui-danger-text); }
.student-payment-totals { display: flex; flex-wrap: wrap; gap: 8px; }
.student-payment-totals span { display: grid; min-width: 120px; gap: 2px; padding: 9px 11px; border: 1px solid var(--ui-border); border-radius: var(--radius-control); }
.student-payment-totals b { color: var(--ui-text); }
.student-payment-entry-card > div:first-child > span { color: var(--ui-accent); font-size: var(--type-badge-size); font-weight: 600; letter-spacing:.04em; text-transform: uppercase; }
.student-payment-entry-card h4 { margin: 6px 0; color: var(--ui-text); }
.student-payment-entry-card p { margin: 0; line-height: 1.5; }
.student-payment-entry-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.student-payment-entry-form label { display: grid; gap: 6px; color: var(--ui-text-muted); font-size: var(--type-badge-size); font-weight: 600; }
.student-payment-entry-form label.wide { grid-column: 1 / -1; }
.student-payment-entry-form input,
.student-payment-entry-form select { min-height: 44px; margin: 0; border: 1px solid var(--ui-control-border); border-radius: 8px; background: var(--ui-input-bg); }
.student-payment-entry-form button { width: fit-content; }
.student-payment-history { padding-block: 10px; }
.student-payment-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto 34px; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--ui-border); }
.student-payment-row:last-child { border-bottom: 0; }
.student-payment-row > i { font-size: 22px; }
.student-payment-row > div { display: grid; gap: 3px; min-width: 0; }
.student-payment-row b { color: var(--ui-text); }
.student-payment-row strong { white-space: nowrap; }
.student-payment-row time { font-size: var(--type-meta-size); white-space: nowrap; }
.student-payment-cancel { width: 44px; min-width:44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--ui-text-muted); }
.student-payment-cancel:hover { border-color: color-mix(in srgb, var(--ui-danger-text) 55%, transparent); color: var(--ui-danger-text); background: color-mix(in srgb, var(--ui-danger-text) 8%, transparent); }
.student-payment-error { color: var(--ui-danger-text); }
@media (max-width: 680px) {
    .student-payment-summary { align-items: stretch; flex-direction: column; }
    .student-payment-entry-form { grid-template-columns: 1fr; }
    .student-payment-entry-form label.wide { grid-column: auto; }
    .student-payment-entry-form button { width: 100%; }
    .student-payment-row { grid-template-columns: 26px minmax(0, 1fr) auto 34px; }
    .student-payment-row time { grid-column: 2 / 4; }
    .student-payment-cancel { grid-column: 4; grid-row: 1 / 3; }
}
.hw-review-group {
    padding: 0;
    overflow: hidden;
}
.hw-review-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    cursor: pointer;
    list-style: none;
}
.hw-review-summary::-webkit-details-marker { display: none; }
.hw-review-summary-copy { min-width: 0; flex: 1 1 auto; }
.hw-review-student,
.hw-review-type {
    color: var(--ui-text-muted);
    font-size: 12px;
}
.hw-review-student { margin-bottom: 5px; }
.hw-review-title {
    color: var(--ui-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}
.hw-review-type { margin-top: 5px; }
.hw-review-summary-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}
.hw-review-count-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--hw-review-status-color, var(--ui-danger-text));
    border-radius: 999px;
    background: color-mix(in srgb, var(--hw-review-status-color, var(--ui-danger-text)) 12%, transparent);
    color: var(--hw-review-status-color, var(--ui-danger-text));
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}
.hw-review-chevron { color: var(--ui-text-muted); font-size: 24px; }
.hw-review-group[open] .hw-review-chevron { transform: rotate(180deg); }
.hw-review-body {
    padding: 0 20px 20px;
    border-top: 1px solid var(--ui-border);
}
@media (max-width: 760px) {
    .hw-review-summary {
        align-items: flex-start;
        gap: 10px;
        padding: 15px 14px;
    }
    .hw-review-summary-actions { gap: 7px; padding-top: 1px; }
    .hw-review-count-badge { min-height: 30px; padding: 5px 8px; }
    .hw-review-chevron { font-size: 22px; line-height: 30px; }
    .hw-review-body { padding: 0 14px 16px; }
}
.hw-review-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 0 4px;
    padding: 11px 12px;
    border: 1px solid var(--ui-success-border);
    border-radius: 7px;
    color: var(--ui-success-text);
    background: var(--ui-success-bg);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    animation: hwReviewAlertIn 160ms ease-out;
}
.hw-review-alert[hidden] {
    display: none;
}
.hw-review-alert.error {
    color: var(--ui-danger-text);
    border-color: var(--ui-danger-border);
    background: var(--ui-danger-bg);
}
.hw-review-alert i {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 18px;
}
.hw-readable-block {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
}
.hw-readable-block.compact {
    margin-top: 0;
}
.hw-readable-block.reference {
    border-color: var(--ui-success-border);
    background: var(--ui-success-bg);
}
.hw-readable-block span {
    display: block;
    margin-bottom: 7px;
    color: var(--ui-text-muted);
    font-size: var(--type-badge-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.hw-readable-block.reference span {
    color: var(--ui-success-text);
}
.hw-readable-block div {
    color: var(--ui-text);
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.hw-review-empty {
    padding:50px 20px;
    color:var(--ui-text-muted);
    text-align:center;
}
.hw-review-empty > i { display:block; margin-bottom:10px; color:var(--ui-success-text); font-size:48px; }
.hw-review-item {
    margin-top:14px;
    padding:var(--space-4);
    border:1px solid var(--ui-border);
    border-radius:var(--radius-control);
    background:var(--ui-bg);
}
.hw-review-item-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); }
.hw-review-item-kind { color:var(--ui-accent); font-size:var(--type-badge-size); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.hw-review-item-kind.test { color:var(--ui-warning-text); }
.hw-review-item-kind.homework { color:var(--ui-success-text); }
.hw-review-question { margin-top:var(--space-2); color:var(--ui-text); font-size:var(--type-body-size); font-weight:600; }
.hw-review-comment { min-height:120px; margin:14px 0 10px; resize:vertical; font-size:var(--type-control-size); }
.hw-review-form-row { display:flex; align-items:flex-end; gap:var(--space-3); flex-wrap:wrap; }
.hw-review-form-label { flex:1 1 190px; min-width:0; margin:0; }
.hw-review-form-label span { display:block; margin-bottom:6px; color:var(--ui-text-muted); font-size:var(--type-badge-size); }
.hw-review-form-label input,
.hw-review-form-label select { margin:0; }
.hw-review-save { min-height:44px; padding:10px 16px; }
.hw-review-file-block { margin-top:15px; padding-top:15px; border-top:1px dashed var(--ui-border); }
.hw-review-file-link { display:inline-flex; min-height:44px; align-items:center; text-decoration:none; }
.hw-review-assignment { margin-bottom:12px; color:var(--ui-text-muted); font-size:var(--type-meta-size); line-height:var(--type-meta-line); white-space:pre-wrap; }
.hw-review-due { margin-bottom:12px; color:var(--ui-warning-text); font-size:var(--type-badge-size); }
.hw-review-teacher-file { color:var(--ui-accent); font-size:var(--type-meta-size); }
.hw-review-group.is-test { border-left:3px solid var(--ui-warning-border); }
.hw-review-group.is-standalone { border-left:3px solid var(--ui-accent); }
.hw-review-group.is-homework { border-left:3px solid var(--ui-success-border); }
.hw-review-count-badge[data-hw-review-state="ready"] { border-color:var(--ui-success-border); background:var(--ui-success-bg); color:var(--ui-success-text); }
.hw-review-count-badge[data-hw-review-state="pending"] { border-color:var(--ui-danger-border); background:var(--ui-danger-bg); color:var(--ui-danger-text); }
.hw-review-send { width:100%; min-height:44px; margin-top:16px; padding:13px; }
.hw-review-send:disabled { opacity:.55; cursor:not-allowed; }
.hw-review-pending-hint { margin-top:var(--space-2); color:var(--ui-text-muted); font-size:var(--type-badge-size); text-align:center; }
.hw-review-pending-hint[hidden] { display:none; }
@media (max-width:760px) {
    .hw-review-item { padding:var(--space-3); }
    .hw-review-form-row { align-items:stretch; flex-direction:column; }
    .hw-review-form-label,
    .hw-review-save { width:100%; }
}
@keyframes hwReviewAlertIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.student-feed-filters {
    display: flex;
    gap: 7px;
    margin: 12px 0;
    overflow-x: auto;
}
.student-feed-filters button {
    flex: 0 0 auto;
    min-height:44px;
    padding: 7px 11px;
    color: var(--ui-text-muted);
    background: transparent;
    border-color: var(--ui-border);
    box-shadow: none;
    font-size: 12px;
}
.student-feed-filters button.active {
    color: var(--ui-accent);
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
}
.student-feed-filter-help {
    margin: -3px 0 12px;
    color: var(--ui-text-muted);
    font-size: 12px;
    line-height: 1.45;
}
.student-feed-list {
    display: grid;
    gap: 6px;
}
.student-feed-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(160px, 1.1fr) minmax(160px, .9fr) minmax(130px, auto) 18px;
    align-items: center;
    gap: 14px;
    padding: 12px 13px;
    color: inherit;
    text-align: left;
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    box-shadow: none;
}
.student-feed-row:hover {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
}
.student-feed-identity b,
.student-feed-identity span {
    display: block;
}
.student-feed-identity b {
    color: var(--ui-text);
}
.student-feed-identity span {
    margin-top: 3px;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
}
.student-feed-progress {
    display: flex;
    align-items: center;
    gap: 9px;
}
.student-feed-progress > div {
    flex: 1;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--ui-input-bg);
}
.student-feed-progress i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--ui-accent), var(--ui-success-text));
}
.student-feed-progress strong {
    width: 38px;
    font-size: 13px;
    text-align: right;
}
.student-feed-progress strong.success { color: var(--ui-success-text); }
.student-feed-progress strong.warning { color: var(--ui-warning-text); }
.student-feed-progress strong.danger { color: var(--ui-danger-text); }
.student-feed-alerts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    flex-wrap: wrap;
}
.student-feed-alert {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 6px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    font-size: var(--type-badge-size);
}
.student-feed-alert.warning { color: var(--ui-warning-text); }
.student-feed-alert.danger { color: var(--ui-danger-text); }
.student-feed-alert.muted { color: var(--ui-text-muted); }
.student-feed-ok {
    color: var(--ui-success-text);
    font-size: var(--type-meta-size);
}
.student-feed-chevron {
    color: var(--ui-text-muted);
    font-size: 18px;
}
.student-test-report-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.student-test-report-toolbar select {
    max-width: 320px;
    margin: 0;
}
.analytics-student-details-btn {
    padding: 10px 12px;
    font-size: 12px;
}
.analytics-student-details-btn {
    width: 100%;
    margin-top: 12px;
}
.student-test-report-card {
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-bg);
    margin-bottom: 10px;
    overflow: hidden;
}
.student-test-report-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    cursor: pointer;
    list-style: none;
}
.student-test-report-card > summary::-webkit-details-marker {
    display: none;
}
.student-test-report-card > summary b {
    color: var(--ui-text);
}
.student-test-report-card > summary span,
.student-test-report-score span {
    display: block;
    color: var(--ui-text-muted);
    font-size: 12px;
    margin-top: 4px;
}
.student-test-report-score {
    text-align: right;
    flex-shrink: 0;
}
.student-test-report-score strong {
    color: var(--ui-accent);
    font-size: 20px;
}
.student-test-report-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px 14px;
}
.student-test-report-meta span {
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    padding: 5px 9px;
    color: var(--ui-text-muted);
    font-size: 12px;
}
.student-test-report-meta .warning {
    border-color: var(--ui-warning-border);
    color: var(--ui-warning-text);
}
.student-test-question-list {
    display: grid;
    gap: 10px;
    padding: 0 14px 14px;
}
.student-test-question {
    border: 1px solid var(--ui-border);
    border-left-width: 3px;
    border-radius: 8px;
    padding: 12px;
    background: var(--ui-surface);
}
.student-test-question summary {
    display: block;
    cursor: pointer;
    list-style: none;
}
.student-test-question summary::-webkit-details-marker {
    display: none;
}
.student-test-question.correct {
    border-left-color: var(--ui-success-text);
}
.student-test-question.wrong {
    border-left-color: var(--ui-danger-text);
}
.student-test-question.pending {
    border-left-color: var(--ui-warning-text);
}
.student-test-question-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px 12px;
    color: var(--ui-text);
}
.student-test-question-head b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.student-test-question-head span {
    color: var(--ui-text-muted);
    font-size: 12px;
    white-space: nowrap;
}
.student-test-question-text {
    margin-top: 10px;
    line-height: 1.5;
    color: var(--ui-text);
}
.student-test-question-image {
    max-width: 240px;
    max-height: 160px;
    object-fit: contain;
    display: block;
    margin-top: 10px;
    border-radius: 6px;
    border: 1px solid var(--ui-border);
}
.student-test-answer-block {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
}
.student-test-answer-block small {
    display: block;
    color: var(--ui-text-muted);
    font-size: var(--type-badge-size);
    font-weight:600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}
.student-test-answer-block.reference {
    color: var(--ui-success-text);
    border-color: var(--ui-success-border);
    background: var(--ui-success-bg);
}
.student-test-answer-block.comment {
    color: var(--ui-info-text);
    border-color: var(--ui-info-border);
    background: var(--ui-info-bg);
}
.student-test-answer-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ui-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.55;
}

@media (max-width: 760px) {
    .classroom-mode-tabs {
        display: flex;
    }

    .teacher-student-stats-modal {
        width: 100%;
        max-width: none;
        max-height: none;
        height: 100vh;
        min-height: 100vh;
        margin: 0;
        padding: 18px 14px calc(96px + env(safe-area-inset-bottom));
        border-radius: 0;
        box-sizing: border-box;
    }

    .student-stats-modal-head {
        padding-right: 30px;
    }

    .student-stats-head-label {
        display: none;
    }

    .student-stats-workbench {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .student-management-card,
    .student-management-parent {
        align-items: stretch;
        flex-direction: column;
    }

    .student-management-card-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .student-engagement-head {
        flex-direction: column;
    }

    .student-engagement-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .student-engagement-actions button {
        width: 100%;
    }

    .student-activity-calendar {
        gap: 3px;
    }

    .student-activity-day {
        min-height: 19px;
    }

    .student-management-card button {
        width: 100%;
    }

    .student-stats-back {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
    }

    .student-stats-back em {
        display: none;
    }

    .student-stats-tabs {
        position: static;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        margin: 14px auto;
        background: var(--ui-surface);
        scrollbar-width: none;
    }

    .student-stats-tabs::-webkit-scrollbar {
        display: none;
    }

    .student-stats-tab {
        flex: 1 1 calc(33.333% - 6px);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 0;
        padding: 9px 11px;
        font-size: 12px;
    }

    .student-stats-tab i {
        display: inline-block;
        margin: 0;
        font-size: 16px;
    }

    .student-stats-homework-head {
        align-items: center;
    }

    .student-stats-key-metrics {
        gap: 7px;
    }

    .student-stats-key-metrics > div {
        padding: 11px 9px;
    }

    .student-stats-key-metrics b {
        font-size: 20px;
    }

    .student-stats-activity-row {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .student-stats-activity-row time {
        grid-column: 2;
    }

    .student-stats-course-row > summary,
    .student-stats-homework-row > summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .student-stats-course-progress {
        width: 100%;
        flex-basis: auto;
    }

    .student-stats-homework-actions {
        grid-template-columns: 1fr;
    }

    .teacher-student-card-managed {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .teacher-student-card-managed .teacher-student-head {
        width: 100%;
    }

    .teacher-student-card-managed .teacher-student-actions {
        display: block;
    }

    .teacher-student-manage-btn {
        width: 100%;
    }

    .student-feed-row {
        grid-template-columns: minmax(0, 1fr) auto 16px;
        gap: 8px;
        padding: 11px;
    }

    .student-feed-progress {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    .student-feed-alerts {
        grid-column: 2;
        grid-row: 1;
    }

    .student-feed-chevron {
        grid-column: 3;
        grid-row: 1 / 3;
    }

    .analytics-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 8px;
        margin-bottom: 18px;
    }

    .analytics-toolbar select {
        width: 100%;
        min-width: 0;
        padding: 12px 10px;
    }

    .analytics-scope-toolbar #analytics-scope-type {
        grid-column: 1 / -1;
        width: 100%;
    }

    .analytics-scope-toolbar #analytics-course-id {
        grid-column: 1;
    }

    .group-analytics-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .group-analytics-heading h4 { font-size: 20px; }

    .group-analytics-health {
        align-self: flex-start;
    }

    .group-analytics-insights {
        grid-template-columns: 1fr;
    }

    .compact-export-button {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .compact-export-button span {
        display: none;
    }

    .student-progress-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 44px;
        align-items: start;
    }

    .analytics-panel {
        padding: 14px;
    }

    .analytics-panel summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .analytics-panel summary b {
        white-space: normal;
        font-size: 13px;
    }

    .group-question-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .group-question-toolbar label { min-width: 0; }

    .group-question-card summary {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .group-question-score {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        text-align: left;
        white-space: normal;
    }

    .group-question-people-grid { grid-template-columns: 1fr; padding: 0 11px 11px; }

    .group-question-card summary { padding: 12px; }

    .analytics-trend-explanation {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .analytics-trend-selection {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    .analytics-trend-selection b {
        margin: 0;
    }

    .analytics-trend {
        gap: 3px;
        height: 72px;
    }

    .calendar-toolbar {
        flex-direction: column;
        padding: 14px;
        gap: 12px;
    }
    .calendar-toolbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        gap: 8px;
        justify-content: stretch;
    }
    .calendar-toolbar-actions button {
        min-width: 0;
        width: 100%;
        justify-content: center;
        padding: 10px 8px;
    }
    .calendar-toolbar-actions .calendar-segment,
    .calendar-toolbar-actions .calendar-bulk-button,
    .calendar-toolbar-actions .btn-success {
        grid-column: 1 / -1;
    }
    .calendar-segment {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .calendar-week-grid {
        display: flex;
        flex-direction: column;
        overflow-x: visible;
    }
    .calendar-day {
        min-height: 0;
    }
    .calendar-month-grid {
        display: none;
    }
    .calendar-form-grid {
        grid-template-columns: 1fr;
    }
    .calendar-section-grid,
    .calendar-primary-slot,
    .calendar-repeat-row { grid-template-columns: 1fr; }
    .calendar-form-section { padding: 13px; }
    .calendar-schedule-slot { grid-template-columns: 30px minmax(0, 1fr) 42px; }
    .calendar-schedule-slot .calendar-field:first-of-type { grid-column: 2 / 3; }
    .calendar-schedule-slot .calendar-field:nth-of-type(2) { grid-column: 2 / 3; }
    .calendar-remove-slot { grid-column: 3; grid-row: 1 / 3; align-self: center; }
    .calendar-audience-row {
        grid-template-columns: 1fr;
    }
    .calendar-student-results {
        position: static;
        margin-top: 8px;
        max-height: 220px;
    }
    .calendar-list-item {
        flex-direction: column;
    }
    .calendar-list-actions {
        width: 100%;
    }
    .calendar-list-actions button {
        flex: 1;
    }
    .calendar-modal-content {
        width: 100%;
        max-width: none;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
        padding: 18px 16px 0;
    }
    .calendar-modal-actions {
        position: sticky;
        bottom: 0;
        margin: 18px -16px 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        background: var(--ui-surface);
        border-top: 1px solid var(--ui-border);
        justify-content: stretch;
    }
    .calendar-modal-actions button {
        flex: 1 1 100%;
    }
    .calendar-save-settings {
        width: 100%;
        min-width: 0;
    }
    .student-calendar-card {
        grid-template-columns: 1fr;
    }
    .student-stats-head {
        flex-direction: column;
    }
    .student-stats-grid,
    .student-learning-columns {
        grid-template-columns: 1fr;
    }
    .student-course-row,
    .learning-list-item {
        grid-template-columns: 1fr;
    }
    .learning-list-item {
        flex-direction: column;
    }
    .learning-list-meta {
        align-items: flex-start;
        white-space: normal;
    }
    .discount-form-grid {
        grid-template-columns: 1fr !important;
    }
    .discount-form-grid button {
        width: 100%;
    }
    .trainer-catalog-toggle {
        grid-template-columns: 1fr 24px;
    }
    .trainer-catalog-toggle small {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .public-course-hero,
    .public-course-info {
        grid-template-columns: 1fr;
    }
}
.exam-page-heading,
.exam-section-heading,
.exam-card-title-row,
.exam-review-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.exam-page-heading {
    margin-bottom: 24px;
}

.exam-page-heading h2,
.exam-section-heading h3,
.exam-review-heading h2 {
    margin: 0;
    color: var(--ui-text);
}

.exam-page-heading h2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.exam-page-heading h2 i {
    color: var(--ui-accent);
}

.exam-page-heading p,
.exam-section-heading p {
    margin: 7px 0 0;
    color: var(--ui-text-muted);
}

.exam-assignment-form {
    margin-bottom: 24px;
    border-color: var(--ui-border);
}

.exam-form-grid,
.exam-option-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.exam-form-grid label,
.exam-wide-field,
.exam-dependent-setting {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.exam-form-grid label > span,
.exam-wide-field > span,
.exam-dependent-setting > span,
.exam-score-editor label > span {
    color: var(--ui-text);
    font-size: 13px;
    font-weight: 600;
}

.exam-field-note {
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    line-height: 1.4;
}

.exam-form-grid input,
.exam-form-grid select,
.exam-wide-field textarea,
.exam-dependent-setting input {
    margin: 0;
    border-color: var(--ui-control-border);
    background: var(--ui-input-bg);
}

.exam-date-input input {
    width: 100%;
    min-height: 66px;
    color-scheme: dark;
}

.exam-search-picker {
    position: relative;
}

.exam-search-picker .exam-search-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 14px;
    color: var(--ui-accent);
    font-size: 19px;
    pointer-events: none;
    transform: translateY(-50%);
}

.exam-search-picker > input[type="text"] {
    width: 100%;
    min-height: 66px;
    padding-left: 44px;
    border: 1px solid var(--ui-control-border);
    border-radius: 8px;
    background: var(--ui-input-bg);
}

.exam-search-picker > input[type="text"]:focus {
    border-color: var(--ui-accent);
    box-shadow: var(--ui-focus-ring);
}

.exam-search-results {
    display: none;
    position: absolute;
    z-index: 70;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: min(430px, 55vh);
    overflow-y: auto;
    padding: 7px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-float);
}

.exam-search-results.open {
    display: block;
}

.exam-search-group + .exam-search-group {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ui-border);
}

.exam-search-group-title {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    color: var(--ui-accent);
    font-size: 12px;
    font-weight: 600;
}

.exam-search-group-title span {
    margin-left: auto;
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
}

.exam-search-results button {
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 11px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: var(--ui-text);
    text-align: left;
}

.exam-search-results button:hover,
.exam-search-results button:focus-visible {
    background: var(--ui-accent-soft);
    outline: 1px solid var(--ui-accent);
}

.exam-search-results button > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.exam-search-results button b,
.exam-search-results button small {
    overflow-wrap: anywhere;
}

.exam-search-results button small {
    color: var(--ui-text-muted);
    font-size: var(--type-meta-size);
    font-weight: 500;
}

.exam-search-results button > i {
    flex: 0 0 auto;
    color: var(--ui-accent);
    font-size: 20px;
}

.exam-search-empty,
.exam-search-more {
    padding: 13px 11px;
    color: var(--ui-text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.exam-wide-field {
    margin-top: 16px;
}

.exam-wide-field textarea {
    min-height: 92px;
}

.exam-setting-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 84px;
    padding: 16px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-input-bg);
    cursor: pointer;
}

.exam-setting-card input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    flex: 0 0 auto;
}

.exam-setting-card span {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.exam-setting-card b {
    color: var(--ui-text);
}

.exam-setting-card small {
    color: var(--ui-text-muted);
    line-height: 1.4;
}

.exam-dependent-setting {
    display: none;
    justify-content: center;
    padding: 14px 16px;
    border: 1px dashed var(--ui-accent);
    border-radius: 10px;
}

.exam-dependent-setting.visible {
    display: flex;
}

.exam-score-explanation {
    color: var(--ui-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.exam-submit-assignment {
    width: 100%;
    margin-top: 18px;
    padding: 14px;
}

.exam-filter-bar {
    display: flex;
    gap: 8px;
    padding: 6px;
    margin-bottom: 18px;
    overflow-x: auto;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface);
}

.exam-filter-bar button {
    min-width: max-content;
    padding: 10px 15px;
    border: 0;
    box-shadow: none;
    background: transparent;
    color: var(--ui-text-muted);
}

.exam-filter-bar button.active {
    color: var(--ui-text);
    background: var(--ui-accent-soft);
    box-shadow: inset 0 0 0 1px var(--ui-accent);
}

.exam-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.exam-overview-grid > div {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
}

.exam-overview-grid span,
.exam-overview-grid small {
    display: block;
    color: var(--ui-text-muted);
    font-size: 12px;
    line-height: 1.35;
}

.exam-overview-grid b {
    display: block;
    margin: 5px 0;
    color: var(--ui-accent);
    font-size: 26px;
    line-height: 1;
}

.exam-lane,
.exam-history-panel {
    margin-bottom: 14px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface);
}

.exam-lane {
    padding: 14px;
}

.exam-lane-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.exam-lane-heading > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.exam-lane-heading h3 {
    margin: 0;
    color: var(--ui-text);
    font-size: 18px;
}

.exam-lane-heading span,
.exam-history-panel summary b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    font-size: 12px;
    font-weight: 600;
}

.exam-lane-heading p {
    max-width: 520px;
    margin: 0;
    color: var(--ui-text-muted);
    font-size: 13px;
    line-height: 1.4;
}

.exam-compact-list {
    display: grid;
    gap: 9px;
}

.exam-soft-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px;
    border: 1px dashed var(--ui-border);
    border-radius: 8px;
    color: var(--ui-text-muted);
    background: var(--ui-bg);
    font-size: 13px;
}

.exam-soft-empty i {
    color: var(--ui-accent);
    font-size: 20px;
}

.exam-history-panel {
    overflow: hidden;
}

.exam-history-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    cursor: pointer;
    list-style: none;
}

.exam-history-panel summary::-webkit-details-marker {
    display: none;
}

.exam-history-panel summary span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ui-text);
    font-weight: 600;
}

.exam-history-panel .exam-compact-list,
.exam-history-panel .exam-soft-empty {
    margin: 0 14px 14px;
}

.exam-card-list {
    display: grid;
    gap: 14px;
}

.exam-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    border: 1px solid var(--ui-border);
    border-left: 4px solid var(--ui-accent);
    border-radius: 12px;
    background: var(--ui-surface);
}

.exam-card.warning {
    border-left-color: var(--ui-warning-text);
}

.exam-card.success {
    border-left-color: var(--ui-success-text);
}

.exam-card.danger {
    border-left-color: var(--ui-danger-text);
}

.exam-compact-card {
    gap: 14px;
    padding: 14px;
    border-radius: 8px;
}

.exam-compact-card.history {
    border-left-width: 3px;
}

.exam-compact-card.history .exam-card-title-row h3 {
    font-size: 15px;
}

.exam-card-main {
    min-width: 0;
    flex: 1;
}

.exam-card-title-row {
    align-items: center;
}

.exam-card-title-row h3 {
    margin: 0;
    color: var(--ui-text);
    overflow-wrap: anywhere;
}

.exam-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 5px 9px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    color: var(--ui-text);
    font-size: 12px;
    font-weight: 600;
}

.exam-status.warning {
    color: var(--ui-warning-text);
    border-color: color-mix(in srgb, var(--ui-warning-text) 50%, transparent);
}

.exam-status.success {
    color: var(--ui-success-text);
    border-color: color-mix(in srgb, var(--ui-success-text) 50%, transparent);
}

.exam-status.danger {
    color: var(--ui-danger-text);
    border-color: color-mix(in srgb, var(--ui-danger-text) 50%, transparent);
}

.exam-card-person,
.exam-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 10px;
    color: var(--ui-text-muted);
    font-size: 13px;
}

.exam-card-person i,
.exam-card-meta i {
    margin-right: 5px;
    color: var(--ui-accent);
}

.exam-student-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    padding: 3px 0;
    border: 0;
    background: transparent;
    color: var(--ui-text-muted);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.exam-student-profile-link:hover,
.exam-student-profile-link:focus-visible {
    color: var(--ui-accent);
}

.exam-student-profile-link:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.exam-student-profile-link i {
    margin-right: 0;
}

.exam-student-profile-link small {
    color: var(--ui-text-muted);
    font-size: 12px;
    font-weight: 500;
}

.exam-card-student-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 5px;
    max-width: min(100%, 680px);
    padding: 5px 8px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: var(--ui-surface-alt);
    color: var(--ui-text-muted);
    overflow-wrap: anywhere;
}

.exam-card-student-note i {
    flex: 0 0 auto;
    margin: 1px 0 0;
}

.exam-card-score {
    margin-top: 12px;
    color: var(--ui-success-text);
    font-size: 16px;
    font-weight: 600;
}

.exam-card-instructions {
    max-width: 900px;
    margin: 12px 0 0;
    color: var(--ui-text);
    line-height: 1.5;
}

.exam-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    flex: 0 0 auto;
}

.exam-card-actions button {
    white-space: nowrap;
}

.exam-empty,
.exam-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 180px;
    color: var(--ui-text-muted);
    text-align: center;
}

.exam-empty i,
.exam-loading i {
    color: var(--ui-accent);
    font-size: 34px;
}

.exam-empty b {
    color: var(--ui-text);
    font-size: 18px;
}

.exam-stats-grid,
.exam-review-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.exam-stats-grid > div,
.exam-review-summary > div {
    min-height: 92px;
    padding: 16px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface);
}

.exam-trend-card {
    padding: 18px;
    margin-bottom: 20px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: var(--ui-surface);
}

.exam-trend-card .exam-section-heading {
    margin-bottom: 10px;
}

.exam-trend-chart {
    width: 100%;
    height: 180px;
    overflow: visible;
}

.exam-trend-chart line {
    stroke: var(--ui-border);
    stroke-width: 0.7;
}

.exam-trend-chart polyline {
    fill: none;
    stroke: var(--ui-accent);
    stroke-width: 1.8;
    vector-effect: non-scaling-stroke;
}

.exam-trend-chart circle {
    fill: var(--ui-success-text);
    stroke: var(--ui-surface);
    stroke-width: 0.8;
    vector-effect: non-scaling-stroke;
}

.exam-trend-legend {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.exam-trend-legend button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--ui-border);
    background: var(--ui-input-bg);
    box-shadow: none;
    color: var(--ui-text-muted);
    white-space: nowrap;
}

.exam-trend-legend b {
    color: var(--ui-accent);
}

.exam-stats-grid span,
.exam-review-summary span {
    display: block;
    color: var(--ui-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing:.04em;
    text-transform: uppercase;
}

.exam-stats-grid b,
.exam-review-summary b {
    display: block;
    margin-top: 8px;
    color: var(--ui-accent);
    font-size: 25px;
}

.exam-attempt-header {
    position: sticky;
    z-index: 10;
    top: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    margin-bottom: 18px;
    border: 1px solid var(--ui-border);
    border-bottom-color: var(--ui-accent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
    backdrop-filter: blur(14px);
}

.exam-attempt-header > button {
    background: transparent;
    box-shadow: none;
}

.exam-attempt-header span,
.exam-countdown-wrap span {
    color: var(--ui-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing:.04em;
    text-transform: uppercase;
}

.exam-attempt-header h2 {
    margin: 3px 0 0;
}

.exam-countdown-wrap {
    min-width: 112px;
    text-align: right;
}

.exam-countdown-wrap b {
    display: block;
    margin-top: 3px;
    color: var(--ui-accent);
    font-size: 25px;
    font-variant-numeric: tabular-nums;
}

.exam-countdown-wrap b.danger {
    color: var(--ui-danger-text);
}

.exam-instructions {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid var(--ui-info-border);
    border-radius: 10px;
    background: var(--ui-info-bg);
    color: var(--ui-text);
    line-height: 1.5;
}

.exam-instructions i {
    flex: 0 0 auto;
    color: var(--ui-info-text);
    font-size: 20px;
}

.exam-question {
    padding: 22px;
    margin-bottom: 16px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: var(--ui-surface);
}

.exam-question-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.exam-question-heading h3 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: var(--ui-text);
    font-size: clamp(17px, 1.8vw, 21px);
    line-height: 1.45;
}

.exam-question-heading h3 > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: 1px solid var(--ui-accent);
    border-radius: 8px;
    color: var(--ui-accent);
}

.exam-question-heading > b {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--ui-accent-soft);
    color: var(--ui-accent);
    font-size: 12px;
}

.exam-question-controls textarea,
.exam-question-controls input[type="text"],
.exam-question-controls select {
    margin: 0;
    color: var(--ui-text);
    border-color: var(--ui-control-border);
    background: var(--ui-input-bg);
}

.exam-question-controls textarea {
    width: 100%;
    min-height: 130px;
}

.exam-choice-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px;
    margin-bottom: 9px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-input-bg);
    cursor: pointer;
}

.exam-choice-option:has(input:checked) {
    border-color: var(--ui-accent);
    background: var(--ui-accent-soft);
}

.exam-choice-option input {
    width: 19px;
    height: 19px;
    margin: 1px 0 0;
    flex: 0 0 auto;
}

.exam-choice-option img,
.exam-match-row img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
}

.exam-match-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr);
    gap: 14px;
    align-items: center;
    padding: 13px;
    margin-bottom: 9px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-input-bg);
}

.exam-match-row > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.exam-order-box {
    display: grid;
    gap: 9px;
}

.exam-order-box .order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 13px;
    margin: 0;
    border: 1px solid var(--ui-border);
    background: var(--ui-input-bg);
    box-shadow: none;
    color: var(--ui-text);
    text-align: left;
}

.exam-order-box .order-item.selected-order {
    border-color: var(--ui-accent);
    opacity: 0.72;
}

.exam-order-box .order-item b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 999px;
    background: var(--ui-accent);
    color: var(--ui-on-accent);
}

.exam-reset-order {
    justify-self: start;
    background: transparent;
    box-shadow: none;
    color: var(--ui-text-muted);
}

.exam-attempt-actions {
    position: sticky;
    z-index: 9;
    bottom: 12px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
    backdrop-filter: blur(14px);
}

.exam-overlay {
    position: fixed;
    z-index: 10020;
    inset: 0;
    box-sizing: border-box;
    display: none;
    padding: 24px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--ui-modal-backdrop);
}

.exam-overlay.open {
    display: block;
}

.exam-overlay-dialog {
    box-sizing: border-box;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--ui-accent);
    border-radius: 14px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-float);
}

.exam-extension-heading p {
    margin: 6px 0 0;
    color: var(--ui-text-muted);
}

.exam-extension-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    margin-top: 20px;
    border: 1px solid var(--ui-success-border);
    border-radius: 10px;
    background: var(--ui-success-bg);
}

.exam-extension-note > i {
    margin-top: 2px;
    color: var(--ui-accent);
    font-size: 24px;
}

.exam-extension-note div {
    display: grid;
    gap: 4px;
}

.exam-extension-note span,
.exam-extension-field small {
    color: var(--ui-text-muted);
}

.exam-extension-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0;
}

.exam-extension-presets button {
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-bg);
    color: var(--ui-text);
}

.exam-extension-presets button:hover,
.exam-extension-presets button:focus-visible {
    border-color: var(--ui-accent);
}

.exam-extension-field {
    display: grid;
    gap: 8px;
}

.exam-extension-field > span {
    font-weight: 700;
}

.exam-extension-field > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.exam-extension-field input {
    width: min(220px, 100%);
    min-height: 46px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-bg);
    color: var(--ui-text);
    font: inherit;
}

.exam-extension-field input:focus {
    border-color: var(--ui-accent);
    outline: none;
}

.exam-extension-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.exam-review-heading > div > span {
    color: var(--ui-accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing:.04em;
    text-transform: uppercase;
}

.exam-review-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 20px;
}

.exam-review-question {
    padding: 20px;
    margin-top: 14px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-bg);
}

.exam-review-release {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-top: 14px;
    border: 1px solid var(--ui-success-border);
    border-radius: 10px;
    background: var(--ui-success-bg);
}

.exam-review-release > i {
    color: var(--ui-success-text);
    font-size: 28px;
}

.exam-review-release > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exam-review-release span {
    color: var(--ui-text-muted);
    line-height: 1.4;
}

.exam-review-question-title,
.exam-score-editor label > div,
.exam-result-question-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.exam-review-question-title h3,
.exam-result-question h3 {
    margin: 0;
    color: var(--ui-text);
    font-size: 18px;
    line-height: 1.45;
}

.exam-review-question-title > span {
    flex: 0 0 auto;
    color: var(--ui-accent);
    font-weight: 600;
}

.exam-answer-panel,
.exam-reference-panel,
.exam-readable-block {
    padding: 14px;
    margin-top: 14px;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface);
}

.exam-answer-panel > span,
.exam-reference-panel > span,
.exam-readable-block > span {
    display: block;
    margin-bottom: 8px;
    color: var(--ui-text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.exam-answer-panel p,
.exam-reference-panel p,
.exam-readable-block > div {
    margin: 8px 0 0;
    color: var(--ui-text);
    line-height: 1.58;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.exam-readable-block.reference {
    border-color: var(--ui-success-border);
    background: var(--ui-success-bg);
}

.exam-readable-block.reference > span {
    color: var(--ui-success-text);
}

.exam-readable-block.comment {
    border-color: var(--ui-info-border);
    background: var(--ui-info-bg);
}

.exam-readable-block.comment > span {
    color: var(--ui-info-text);
}

.exam-score-editor {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 14px;
    margin-top: 15px;
}

.exam-score-editor label {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.exam-score-editor input,
.exam-score-editor textarea {
    margin: 0;
    border-color: var(--ui-control-border);
}

.exam-score-editor input {
    width: 90px;
}

.exam-score-editor input.invalid {
    border-color: var(--ui-danger-border);
}

.exam-score-editor label > div {
    align-items: center;
    justify-content: flex-start;
}

.exam-review-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    margin-top: 18px;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    background: var(--ui-surface);
}

.exam-review-footer p {
    margin: 0;
    color: var(--ui-text-muted);
    font-size: 13px;
}

.exam-result-hero {
    padding: 26px;
    margin-top: 20px;
    border: 1px solid var(--ui-success-border);
    border-radius: 12px;
    background: var(--ui-success-bg);
    text-align: center;
}

.exam-result-hero span,
.exam-result-hero small {
    display: block;
    color: var(--ui-text-muted);
}

.exam-result-hero b {
    display: block;
    margin: 8px 0;
    color: var(--ui-success-text);
    font-size: clamp(24px, 5vw, 40px);
}

.exam-result-question {
    padding: 16px;
    margin-top: 12px;
    border: 1px solid var(--ui-border);
    border-left: 4px solid var(--ui-danger-text);
    border-radius: 9px;
    background: var(--ui-bg);
}

.exam-result-question.success {
    border-left-color: var(--ui-success-text);
}

.exam-result-question.warning {
    border-left-color: var(--ui-warning-text);
}

.exam-result-question-title > b {
    flex: 0 0 auto;
    color: var(--ui-accent);
}

.exam-result-question p {
    color: var(--ui-text);
    line-height: 1.5;
}

.exam-result-question p span {
    color: var(--ui-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing:.04em;
    text-transform: uppercase;
}

.exam-reference-details {
    margin-top: 12px;
}

.exam-reference-details summary {
    cursor: pointer;
    color: var(--ui-text);
    font-weight: 600;
    list-style: none;
}

.exam-reference-details summary::-webkit-details-marker {
    display: none;
}

.ai-test-generator {
    max-width: 1120px;
    padding: 0;
    overflow: hidden;
    border-color: var(--ui-border);
    background: var(--ui-surface);
}
.ai-test-generator-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    margin: 0;
    padding: 22px 24px;
    align-items: center;
}
.ai-test-generator-head h4 { margin: 5px 0 4px; font-size: 20px; }
.ai-test-generator-head p { max-width: 620px; margin: 0; }
.ai-test-generator-head-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; padding: 6px; border: 1px solid var(--ui-border); border-radius: 12px; background: var(--ui-surface-alt); }
.ai-test-manual-button { min-height: 44px; padding: 9px 14px; white-space: nowrap; }
.ai-credit-badge { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-color: var(--ui-border); font-size: 12px; }
.ai-test-generator-toggle {
    min-height: 44px;
    padding: 9px 14px;
    border-color: var(--ui-accent);
    box-shadow: none;
    white-space: nowrap;
}
#ai-test-generator-body {
    max-width: 900px;
    padding: 24px;
    border-top: 1px solid var(--ui-border);
}
.ai-test-generator-steps { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: var(--ui-text); font-size: 12px; line-height: 1.35; }
.ai-test-generator-steps span { display: inline-flex; align-items: center; gap: 7px; }.ai-test-generator-steps b { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: var(--ui-on-accent); background: var(--ui-accent); font-size: var(--type-badge-size); font-weight:600; }.ai-test-generator-steps > i { color: var(--ui-accent); }
.ai-test-generator-grid { grid-template-columns: minmax(0, 1fr) minmax(190px, .48fr); gap: 14px; }
.ai-test-instructions { grid-column: 1 / -1; }
.ai-test-instructions textarea { min-height: 88px !important; }
#question-editor-home .ai-test-field {
    min-width: 0;
    gap: 8px;
    color: var(--ui-text);
    font-size: 13px;
}
#question-editor-home .ai-test-field > input,
#question-editor-home .ai-test-field > select,
#question-editor-home .ai-test-field > textarea {
    display: block;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    max-width: none;
    margin: 0 !important;
    min-height: 44px;
    border-color: var(--ui-control-border) !important;
    color: var(--ui-text) !important;
    background: var(--ui-input-bg) !important;
    box-shadow: none;
}
#question-editor-home .ai-test-field > textarea { min-height: 150px; }
#question-editor-home .ai-test-field > input::placeholder,#question-editor-home .ai-test-field > textarea::placeholder { color: var(--ui-text-muted); opacity: 1; }
#question-editor-home .ai-test-field > input:focus,
#question-editor-home .ai-test-field > select:focus,
#question-editor-home .ai-test-field > textarea:focus {
    border-color: var(--ui-accent) !important;
    box-shadow: var(--ui-focus-ring);
}
.ai-test-generator-options { margin: 20px 0 0; padding: 0; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-surface-alt); }
.ai-test-generator-options > summary { display: flex; min-height:44px; align-items: center; gap: 7px; padding: 13px 14px; color: var(--ui-text); cursor: pointer; font-size: var(--type-label-size); font-weight: 600; list-style: none; }.ai-test-generator-options > summary::-webkit-details-marker { display: none; }.ai-test-generator-options > summary::before { content: '\e9b1'; color: var(--ui-accent); font-family: boxicons!important; font-size: 17px; }.ai-test-generator-options > summary span { color: var(--ui-text-muted); font-size: var(--type-meta-size); font-weight: 400; }.ai-test-generator-options[open] > summary { border-bottom: 1px solid var(--ui-border); }.ai-test-generator-options[open] > summary::before { content: '\ea57'; }
.ai-test-generator-options > p { margin: 14px 14px 0; color: var(--ui-text-muted); font-size: 12px; line-height: 1.45; }.ai-test-generator-options > .ai-test-generator-grid { padding: 14px; }
.ai-test-generator-actions { gap: 14px; margin-top: 22px; }.ai-test-generator-actions button { min-height: 44px; padding: 10px 16px; }.ai-test-generator-actions small { max-width: 360px; }
.ai-test-image-source { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: -3px 0 2px; padding: 12px; border: 1px dashed var(--ui-control-border); border-radius: 8px; background: var(--ui-surface-alt); }
.ai-test-image-source .btn-secondary { min-height: 44px; padding: 8px 12px; }.ai-test-image-source > span { flex: 1 1 190px; color: var(--ui-text-muted); font-size: var(--type-meta-size); line-height: var(--type-meta-line); }.ai-test-image-source > b { padding: 5px 8px; border-radius: 999px; color: var(--ui-warning-text); background: var(--ui-warning-bg); font-size: var(--type-badge-size); font-weight:600; white-space: nowrap; }
.ai-test-change-target { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 0; border: 0; color: var(--ui-text-muted); background: transparent; box-shadow: none; font-size: 12px; }.ai-test-change-target:hover { color: var(--ui-accent); background: transparent; box-shadow: none; }
.materials-loading > i { animation: materials-folder-pulse 1.6s ease-in-out infinite; }
@keyframes materials-folder-pulse { 0%,100% { transform: translateY(0); opacity: .62; } 50% { transform: translateY(-5px); opacity: 1; } }
#test-editor-box input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
#test-editor-box textarea,
#test-editor-box select {
    box-sizing: border-box;
    border-color: var(--ui-control-border) !important;
    border-radius: 7px;
    background: var(--ui-input-bg) !important;
    box-shadow: none;
}
#test-editor-box input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):focus,
#test-editor-box textarea:focus,
#test-editor-box select:focus {
    border-color: var(--ui-accent) !important;
    box-shadow: var(--ui-focus-ring);
}
@media (max-width: 760px) {
    .ai-test-generator-head { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
    .ai-test-generator-head-actions { justify-content: space-between; width: 100%; box-sizing: border-box; }
    .ai-test-generator-head-actions { flex-wrap: wrap; }.ai-test-manual-button { flex: 1 1 100%; }
    #ai-test-generator-body { padding: 18px; }
    .ai-test-image-source { align-items: flex-start; flex-direction: column; }
    .ai-test-generator-steps { align-items: flex-start; flex-direction: column; gap: 8px; }.ai-test-generator-steps > i { display: none; }
}
.ai-action-packs-modal {
    position: relative;
    width: min(860px, calc(100vw - 30px));
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--ui-control-border);
    background: var(--ui-surface);
}
.ai-action-packs-modal > .close-modal { position: absolute; z-index: 2; top: 17px; right: 20px; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 7px; color: var(--ui-text-muted); font-size: 30px; line-height: 1; }
.ai-action-packs-modal > .close-modal:hover { color: var(--ui-text); background: var(--ui-surface-alt); }
.ai-action-packs-head { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 13px; padding: 23px 54px 18px 22px; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface-alt); }
.ai-action-packs-icon { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--ui-control-border); border-radius: 13px; color: var(--ui-accent); background: var(--ui-accent-soft); box-shadow: none; font-size: 25px; }
.ai-action-packs-head > div > span { color: var(--ui-accent); font-size: var(--type-badge-size); font-weight: 600; letter-spacing: .04em; }
.ai-action-packs-head h3 { margin: 3px 0 6px; color: var(--ui-text); font-size: 25px; }
.ai-action-packs-head p { max-width: 650px; margin: 0; color: var(--ui-text-muted); font-size: 13px; line-height: 1.45; }
.ai-action-packs-balance { display: flex; gap: 9px; flex-wrap: wrap; padding: 15px 22px 4px; color: var(--ui-text); font-size: 13px; }
.ai-action-packs-balance span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--ui-border); border-radius: 7px; background: var(--ui-surface-alt); }
.ai-action-packs-balance i,.ai-action-packs-balance b { color: var(--ui-accent); }
.ai-action-packs-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 22px 19px; }
.ai-action-pack { position: relative; gap: 12px; min-height: 245px; padding: 16px; border-color: var(--ui-border); background: var(--ui-surface-alt); box-shadow: none; }
.ai-action-pack.is-featured { border-color: var(--ui-accent); background: var(--ui-accent-soft); box-shadow: none; }
.ai-action-pack-badge { position: absolute; top: -10px; left: 14px; padding: 4px 7px; border: 1px solid var(--ui-accent); border-radius: 999px; color: var(--ui-on-accent); background: var(--ui-accent); font-size: var(--type-badge-size); font-weight: 600; letter-spacing: .04em; }
.ai-action-pack-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--ui-border); }
.ai-action-pack-top b { color: var(--ui-text); font-size: 14px; }
.ai-action-pack-top i { color: var(--ui-accent); font-size: 20px; }
.ai-action-pack > strong { margin-top: 2px; color: var(--ui-text); font-size: 29px; }
.ai-action-pack > strong small { color: var(--ui-text-muted); font-size: 12px; }
.ai-action-pack-price { display: grid; gap: 2px; color: var(--ui-accent); font-size: 19px; font-weight: 600; }
.ai-action-pack-price small { color: var(--ui-text-muted); font-size: var(--type-meta-size); font-weight: 400; }
.ai-action-pack > em { display: flex; align-items: flex-start; gap: 6px; min-height: 32px; color: var(--ui-text-muted); font-size: var(--type-meta-size); line-height: var(--type-meta-line); }
.ai-action-pack > em i { margin-top: 1px; color: var(--ui-accent); font-size: 14px; }
.ai-action-pack button { min-height: 44px; margin-top: auto; border-radius: var(--radius-control); }
.ai-action-packs-foot { display: flex; align-items: center; gap: 8px; padding: 13px 22px; border-top: 1px solid var(--ui-border); color: var(--ui-text-muted); background: var(--ui-surface-alt); font-size: var(--type-meta-size); line-height: var(--type-meta-line); }
.ai-action-packs-foot > i { color: var(--ui-success-text); font-size: 16px; }.ai-action-packs-foot a { margin-left: auto; color: var(--ui-accent); white-space: nowrap; }
@media (max-width: 640px) { .ai-action-packs-head { padding: 19px 48px 16px 16px; }.ai-action-packs-list { grid-template-columns: 1fr; padding: 14px 16px; }.ai-action-pack { min-height: 0; }.ai-action-packs-balance { padding: 13px 16px 1px; }.ai-action-packs-foot { align-items: flex-start; padding: 12px 16px; }.ai-action-packs-foot a { margin-left: 0; } }
.materials-workspace-toolbar { display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); margin:var(--space-4) 0; padding:10px var(--space-3); border:1px solid var(--ui-border); border-radius:var(--radius-control); background:var(--ui-surface); }.materials-workspace-toolbar>div { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }.materials-workspace-toolbar button { min-height:44px; padding:10px 12px; box-shadow:none; }.materials-workspace-toolbar #materials-breadcrumb button { border:0; padding:10px 4px; color:var(--ui-accent); background:transparent; }.materials-workspace-toolbar #materials-breadcrumb b { color:var(--ui-text); font-size:var(--type-meta-size); }.materials-workspace-toolbar [hidden] { display:none; }
.materials-upload-card { margin:16px 0 20px; padding:24px; border:1px solid var(--ui-border); border-radius:var(--radius-surface); background:var(--ui-surface); }
.materials-upload-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }.materials-upload-card h3 { margin:0 0 8px; color:var(--ui-text); }.materials-upload-card p,.materials-upload-form small { margin:0; color:var(--ui-text-muted); font-size:13px; line-height:20px; }.materials-upload-heading p { max-width:720px; }.materials-upload-heading button { display:inline-flex; align-items:center; gap:5px; min-height:44px; padding:10px 12px; border:0; color:var(--ui-text); background:transparent; box-shadow:none; white-space:nowrap; }
.materials-upload-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }.materials-upload-form label { display:grid; gap:8px; color:var(--ui-text); font-size:14px; font-weight:500; }.materials-upload-form label>small { color:var(--ui-text-muted); font-size:13px; font-weight:400; }.materials-upload-form .materials-file-field,.materials-upload-form .materials-url-field,.materials-upload-foot { grid-column:1 / -1; }.materials-upload-form input,.materials-upload-form select { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--ui-control-border); border-radius:var(--radius-control); background:var(--ui-input-bg); color:var(--ui-text); }.materials-upload-form input[type=file] { padding:7px; }.materials-upload-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:2px; }.materials-upload-foot small { max-width:760px; }.materials-upload-foot .btn-success { flex:0 0 auto; min-height:44px; padding:10px 14px; white-space:nowrap; }
.materials-file-field { position:relative; }
.materials-file-label { display:grid; gap:var(--space-1); color:var(--ui-text); font-size:var(--type-label-size); font-weight:500; line-height:var(--type-label-line); }.materials-file-label small { color:var(--ui-text-muted); font-size:var(--type-meta-size); font-weight:400; line-height:var(--type-meta-line); }
.materials-file-input { position:absolute !important; width:1px !important; height:1px !important; min-height:0 !important; margin:-1px !important; padding:0 !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }
.materials-dropzone { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; min-height:82px; padding:13px 15px; border:1px dashed var(--ui-control-border); border-radius:var(--radius-control); background:var(--ui-surface-alt); color:var(--ui-text); cursor:pointer; transition:border-color var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease); }
.materials-dropzone:hover,.materials-dropzone:focus-visible,.materials-dropzone.is-dragging { outline:0; border-color:var(--ui-accent); background:var(--ui-accent-soft); box-shadow:var(--ui-focus-ring); }
.materials-dropzone.has-file { border-style:solid; border-color:var(--ui-success-border); background:var(--ui-success-bg); }
.materials-dropzone>i { color:var(--ui-accent); font-size:29px; }.materials-dropzone.has-file>i { color:var(--ui-success-text); }
.materials-dropzone span { display:grid; gap:3px; min-width:0; }.materials-dropzone b { color:var(--ui-text); font-size:var(--type-label-size); font-weight:600; }.materials-dropzone span small { color:var(--ui-text-muted); font-size:var(--type-meta-size); font-weight:400; }.materials-dropzone em { max-width:310px; overflow:hidden; color:var(--ui-accent); font-size:var(--type-meta-size); font-style:normal; font-weight:600; text-align:right; text-overflow:ellipsis; white-space:nowrap; }.materials-dropzone.has-file em { color:var(--ui-success-text); }
.materials-upload-queue { display:grid; gap:var(--space-2); margin:var(--space-3) 0 0; padding:0; list-style:none; }.materials-upload-queue[hidden] { display:none; }.materials-upload-queue li { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--space-2); min-height:52px; padding:var(--space-2); border:1px solid var(--ui-border); border-radius:var(--radius-control); background:var(--ui-surface-alt); }.materials-upload-queue li>i { color:var(--ui-accent); font-size:20px; }.materials-upload-queue span { display:grid; min-width:0; gap:var(--space-1); }.materials-upload-queue b,.materials-upload-queue small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.materials-upload-queue b { color:var(--ui-text); font-size:var(--type-label-size); font-weight:600; }.materials-upload-queue small { color:var(--ui-text-muted); font-size:var(--type-meta-size); line-height:var(--type-meta-line); }.materials-upload-queue button { display:grid; width:44px; min-width:44px; height:44px; padding:0; place-items:center; border:1px solid var(--ui-danger-border); border-radius:var(--radius-control); color:var(--ui-danger-text); background:transparent; box-shadow:none; }.materials-upload-queue button:hover { background:var(--ui-danger-bg); }
.materials-library-controls { display:flex; align-items:center; gap:10px; margin-bottom:14px; }.materials-library-controls label { display:flex; flex:1 1 320px; min-width:220px; align-items:center; gap:8px; padding:0 11px; border:1px solid var(--ui-border); border-radius:var(--radius-control); background:var(--ui-surface); color:var(--ui-text-muted); }.materials-library-controls input,.materials-library-controls select { min-height:44px; border:0; outline:0; background:transparent; color:var(--ui-text); }.materials-library-controls input { width:100%; min-width:0; }.materials-library-controls select { flex:0 0 210px; width:210px; padding:0 10px; border:1px solid var(--ui-border); border-radius:var(--radius-control); background:var(--ui-surface); }
.materials-grid,.classroom-library-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--space-3); }.materials-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:var(--space-3); min-height:96px; padding:var(--space-4); border:1px solid var(--ui-border); border-radius:var(--radius-control); background:var(--ui-surface); }.materials-card>i { margin-top:2px; color:var(--ui-accent); font-size:24px; }.materials-card-main { min-width:0; }.materials-card b,.materials-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.materials-card b { color:var(--ui-text); font-size:var(--type-label-size); font-weight:600; }.materials-card small { margin-top:var(--space-1); color:var(--ui-text-muted); font-size:var(--type-meta-size); line-height:var(--type-meta-line); }.materials-tags { display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:var(--space-2); }.materials-tags em { max-width:140px; overflow:hidden; text-overflow:ellipsis; padding:4px 7px; border-radius:999px; background:var(--ui-accent-soft); color:var(--ui-accent); font-size:var(--type-badge-size); line-height:var(--type-badge-line); font-style:normal; white-space:nowrap; }.materials-card-actions { display:flex; gap:var(--space-2); }.materials-card-actions button { width:44px; min-width:44px; height:44px; padding:0; border-color:var(--ui-border); color:var(--ui-accent); background:transparent; box-shadow:none; }.materials-card-actions button.is-danger { border-color:var(--ui-danger-border); color:var(--ui-danger-text); }
.materials-folder-card { display:flex; align-items:center; gap:var(--space-2); min-height:96px; padding:var(--space-3); border:1px solid var(--ui-control-border); border-radius:var(--radius-control); background:var(--ui-surface-alt); }.materials-folder-open { display:flex; flex:1; align-items:center; min-width:0; gap:var(--space-3); padding:var(--space-2); border:0; text-align:left; background:transparent; box-shadow:none; }.materials-folder-open>i { color:var(--ui-warning-text); font-size:32px; }.materials-folder-open span { min-width:0; }.materials-folder-open b,.materials-folder-open small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.materials-folder-open b { color:var(--ui-text); font-weight:600; }.materials-folder-open small { margin-top:var(--space-1); color:var(--ui-text-muted); font-size:var(--type-meta-size); line-height:var(--type-meta-line); }.materials-folder-menu { width:44px; min-width:44px; height:44px; padding:0; border:0; color:var(--ui-text-muted); background:transparent; box-shadow:none; }
.materials-move-modal { z-index:10020; }.materials-move-dialog { width:min(440px, calc(100vw - 32px)); overflow:hidden; border:1px solid var(--ui-control-border); border-radius:var(--radius-surface); background:var(--ui-surface); box-shadow:var(--ui-shadow-float); }.materials-move-dialog header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--ui-border); background:var(--ui-surface-alt); }.materials-move-dialog header span { display:block; color:var(--ui-accent); font-size:var(--type-badge-size); font-weight:600; line-height:var(--type-badge-line); letter-spacing:.04em; }.materials-move-dialog h2 { margin:var(--space-1) 0 0; color:var(--ui-text); font-size:var(--type-section-size); font-weight:600; line-height:var(--type-section-line); }.materials-move-dialog header button { display:grid; width:44px; min-width:44px; height:44px; padding:0; place-items:center; border:1px solid var(--ui-border); border-radius:var(--radius-control); color:var(--ui-text); background:var(--ui-input-bg); box-shadow:none; }.materials-move-dialog-body { display:grid; gap:var(--space-4); padding:var(--space-5); }.materials-move-dialog-body>p { display:flex; gap:var(--space-2); align-items:flex-start; margin:0; color:var(--ui-text); font-size:var(--type-meta-size); line-height:var(--type-meta-line); }.materials-move-dialog-body>p i { color:var(--ui-accent); font-size:20px; }.materials-move-dialog-body label { display:grid; gap:var(--space-2); color:var(--ui-text); font-size:var(--type-label-size); font-weight:500; line-height:var(--type-label-line); }.materials-move-dialog-body select { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--ui-control-border); border-radius:var(--radius-control); background:var(--ui-input-bg); color:var(--ui-text); }.materials-move-dialog-body select:focus { border-color:var(--ui-accent); outline:0; box-shadow:var(--ui-focus-ring); }.materials-move-dialog footer { display:flex; justify-content:flex-end; gap:var(--space-2); padding:var(--space-4) var(--space-5); border-top:1px solid var(--ui-border); }.materials-move-dialog footer button { min-height:44px; padding:10px 16px; box-shadow:none; }
.classroom-library-overlay {
    position: absolute;
    z-index: 80;
    inset: 0;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    padding: 86px 16px 16px;
    background: var(--ui-modal-backdrop);
    backdrop-filter: blur(5px);
}
.classroom-library-dialog {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    width: min(940px, 100%);
    height: min(700px, 100%);
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--ui-accent);
    border-radius: 12px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-float);
}
.classroom-library-dialog .classroom-panel-overlay-head {
    min-height: 64px;
    padding: 10px 14px;
    background: linear-gradient(90deg, var(--ui-accent-soft), transparent);
}
.classroom-library-dialog .classroom-panel-overlay-head > div { min-width: 0; }
.classroom-library-dialog .classroom-panel-overlay-head span {
    display: block;
    margin-bottom: 2px;
    color: var(--ui-accent);
    font-size: var(--type-badge-size);
    font-weight: 600;
    letter-spacing: .04em;
}
.classroom-library-dialog .classroom-panel-overlay-head b {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.classroom-library-dialog [data-classroom-library-close] {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border-color: var(--ui-border);
    border-radius: 8px;
    color: var(--ui-accent);
    background: var(--ui-input-bg);
    box-shadow: none;
    font-size: 22px;
}
.classroom-library-tools {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(150px, .55fr) minmax(150px, .55fr);
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ui-border);
}
.classroom-library-tools label {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--ui-accent);
}
.classroom-library-tools input,
.classroom-library-tools select {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--ui-control-border);
    border-radius: 8px;
    background: var(--ui-input-bg);
    color: var(--ui-text);
}
.classroom-library-list {
    min-height: 0;
    align-content: start;
    grid-auto-rows: max-content;
    padding: 12px 14px 16px;
    overflow: auto;
    max-height: none;
}
.classroom-library-list .materials-card { align-self:start; min-height:76px; padding:10px; }
.classroom-shared-pdf {
    position: absolute;
    z-index: 42;
    top: clamp(82px, 12vh, 130px);
    left: 50%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(820px, calc(100vw - 56px));
    height: min(680px, calc(100dvh - 180px));
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 94px);
    min-width: 340px;
    min-height: 280px;
    overflow: hidden;
    resize: both;
    transform: translateX(-50%);
    border: 1px solid var(--ui-accent);
    border-radius: 11px;
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-float);
}
.classroom-shared-pdf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 8px 10px 8px 13px;
    cursor: move;
    user-select: none;
    border-bottom: 1px solid var(--ui-border);
    background: linear-gradient(90deg, var(--ui-accent-soft), transparent);
}
.classroom-shared-pdf-head > div:first-child { min-width: 0; }
.classroom-shared-pdf-head span,
.classroom-shared-pdf-head strong { display: block; }
.classroom-shared-pdf-head span { color:var(--ui-accent); font-size:var(--type-badge-size); font-weight:600; line-height:var(--type-badge-line); letter-spacing:.04em; }
.classroom-shared-pdf-head strong { overflow: hidden; margin-top: 2px; color: var(--ui-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.classroom-shared-pdf-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.classroom-shared-pdf-actions a,
.classroom-shared-pdf-actions button {
    display: grid;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--ui-border);
    border-radius: 7px;
    color: var(--ui-accent);
    background: var(--ui-input-bg);
    box-shadow: none;
    text-decoration: none;
}
.classroom-shared-pdf-actions button.is-danger { border-color: var(--ui-danger-border); color: var(--ui-danger-text); }
.classroom-shared-pdf-body { position: relative; min-height: 0; overflow: hidden; background: var(--ui-surface-alt); }
.classroom-shared-pdf-body iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--ui-document-bg); }
.classroom-shared-pdf-loading { position: absolute; z-index: 1; inset: 0; display: grid; place-content: center; gap: 8px; color: var(--ui-text-muted); background: var(--ui-surface-alt); font-size: var(--type-meta-size); text-align: center; pointer-events: none; }
.classroom-shared-pdf-loading i { color: var(--ui-accent); font-size: 25px; }
.classroom-shared-pdf footer { padding:8px 12px; overflow:hidden; color:var(--ui-text-muted); font-size:var(--type-meta-size); line-height:var(--type-meta-line); text-overflow:ellipsis; white-space:nowrap; }
.classroom-shared-pdf.is-minimized { top: auto !important; right: 18px !important; bottom: 18px !important; left: auto !important; width: min(420px, calc(100vw - 36px)); height: 56px; min-height: 56px; resize: none; transform: none !important; }
.classroom-shared-pdf.is-minimized .classroom-shared-pdf-body,
.classroom-shared-pdf.is-minimized footer { display: none; }
.classroom-shared-pdf.is-maximized { inset: 78px 14px 14px !important; width: auto; height: auto; max-width: none; min-height: 0; resize: none; transform: none !important; }
body.light-mode .classroom-library-dialog,
body.light-mode .classroom-shared-pdf { border-color:var(--ui-accent); background:var(--ui-surface); box-shadow:var(--ui-shadow-float); }
.teacher-material-preview-modal { position:fixed; inset:0; z-index:10050; display:grid; place-items:center; padding:20px; background:var(--ui-modal-backdrop); backdrop-filter:blur(6px); animation:modal-backdrop-enter var(--motion-base) var(--motion-ease) both; }
.teacher-material-preview-dialog { display:flex; flex-direction:column; width:min(1180px,100%); height:min(850px,calc(100dvh - 40px)); overflow:hidden; border:1px solid var(--ui-control-border); border-radius:10px; background:var(--ui-surface); box-shadow:var(--ui-shadow-float); animation:modal-content-enter var(--motion-slow) var(--motion-ease) both; }
.teacher-material-preview-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 18px; border-bottom:1px solid var(--ui-border); background:var(--ui-surface-alt); }
.teacher-material-preview-dialog header span { display:block; color:var(--ui-accent); font-size:var(--type-badge-size); font-weight:600; line-height:var(--type-badge-line); letter-spacing:.04em; }.teacher-material-preview-dialog header h2 { margin:var(--space-1) 0 0; color:var(--ui-text); font-size:var(--type-card-size); font-weight:600; line-height:var(--type-card-line); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.teacher-material-preview-dialog header>div:last-child { display:flex; align-items:center; gap:var(--space-2); }.teacher-material-preview-dialog header a,.teacher-material-preview-dialog header button { display:grid; width:44px; min-width:44px; height:44px; padding:0; place-items:center; border:1px solid var(--ui-border); border-radius:var(--radius-control); color:var(--ui-accent); background:var(--ui-input-bg); box-shadow:none; text-decoration:none; }.teacher-material-preview-dialog header button { color:var(--ui-text); font-size:22px; }
.teacher-material-preview-body { flex:1; min-height:0; overflow:auto; padding:var(--space-4); }.teacher-material-preview-frame { width:100%; height:calc(100% - 44px); min-height:480px; border:1px solid var(--ui-border); border-radius:var(--radius-control); background:var(--ui-surface); }.teacher-material-preview-image,.teacher-material-preview-video { display:block; max-width:100%; max-height:100%; margin:auto; border-radius:var(--radius-control); object-fit:contain; }.teacher-material-preview-video { width:min(100%,960px); }.teacher-material-pdf-viewer { display:grid; gap:var(--space-2); height:100%; min-height:0; }.teacher-material-pdf-stage { position:relative; display:grid; min-height:480px; place-items:center; overflow:auto; border:1px solid var(--ui-border); border-radius:var(--radius-control); background:var(--ui-surface-alt); }.teacher-material-pdf-stage img { display:block; max-width:100%; height:auto; object-fit:contain; }.teacher-material-pdf-stage img:not([src]) { display:none; }.teacher-material-pdf-loading { display:flex; gap:var(--space-2); align-items:center; justify-content:center; min-height:180px; padding:var(--space-5); color:var(--ui-text-muted); font-size:var(--type-label-size); text-align:center; }.teacher-material-pdf-loading[hidden] { display:none; }.teacher-material-pdf-controls { display:flex; align-items:center; justify-content:center; gap:var(--space-3); min-height:44px; }.teacher-material-pdf-controls button { display:inline-flex; align-items:center; gap:var(--space-1); min-height:44px; padding:10px 12px; border-color:var(--ui-border); background:var(--ui-input-bg); color:var(--ui-text); box-shadow:none; }.teacher-material-pdf-controls span { min-width:130px; color:var(--ui-text-muted); font-size:var(--type-meta-size); line-height:var(--type-meta-line); text-align:center; }.teacher-material-preview-note { display:flex; gap:var(--space-2); align-items:flex-start; margin:var(--space-3) 0 0; color:var(--ui-text); font-size:var(--type-meta-size); line-height:var(--type-meta-line); }.teacher-material-preview-note i { color:var(--ui-accent); font-size:20px; }.teacher-material-preview-download { display:grid; max-width:600px; margin:10vh auto 0; padding:var(--space-6); justify-items:center; border:1px solid var(--ui-border); border-radius:var(--radius-control); text-align:center; background:var(--ui-surface-alt); }.teacher-material-preview-download>i { color:var(--ui-accent); font-size:42px; }.teacher-material-preview-download h3 { margin:var(--space-3) 0 var(--space-2); color:var(--ui-text); }.teacher-material-preview-download p { margin:0; color:var(--ui-text-muted); line-height:var(--type-body-line); }.teacher-material-preview-download a { display:inline-flex; gap:var(--space-2); align-items:center; min-height:44px; margin-top:var(--space-4); padding:10px 16px; border:1px solid var(--ui-accent); border-radius:var(--radius-control); color:var(--ui-accent); font-weight:600; text-decoration:none; }
@media (max-width:760px) { .materials-upload-card { padding:var(--space-4); }.materials-upload-heading,.materials-upload-foot { align-items:flex-start; flex-direction:column; }.materials-upload-heading button { align-self:flex-end; }.materials-upload-form { grid-template-columns:1fr; }.materials-upload-form .materials-file-field,.materials-upload-form .materials-url-field,.materials-upload-foot { grid-column:span 1; }.materials-upload-foot .btn-success { width:100%; }.materials-dropzone { grid-template-columns:auto minmax(0,1fr); }.materials-dropzone em { grid-column:2; max-width:none; text-align:left; }.materials-library-controls,.classroom-library-tools { display:grid; grid-template-columns:1fr; }.materials-library-controls label,.materials-library-controls select { width:100%; min-width:0; }.materials-library-controls select { flex-basis:auto; }.materials-grid,.classroom-library-list { grid-template-columns:1fr; }.classroom-library-overlay { padding:66px 8px 8px; }.classroom-library-dialog { height:100%; border-radius:var(--radius-control); }.classroom-library-tools { max-height:146px; overflow:auto; }.classroom-shared-pdf { top:72px; left:8px; width:calc(100vw - 16px); height:calc(100dvh - 152px); min-width:0; min-height:240px; resize:none; transform:none; }.classroom-shared-pdf footer { display:none; }.classroom-shared-pdf.is-maximized { inset:64px 4px 4px !important; }.classroom-shared-pdf.is-minimized { right:8px !important; bottom:8px !important; width:calc(100vw - 16px); } }
@media (max-width:760px) { .teacher-material-preview-modal { padding:8px; }.teacher-material-preview-dialog { height:calc(100dvh - 16px); }.teacher-material-preview-dialog header { padding:var(--space-3); }.teacher-material-preview-frame { min-height:360px; }.teacher-material-preview-body { padding:var(--space-2); } }
.teacher-files-page { max-width: 980px; }
.test-builder-start { margin:18px 0; padding:20px; border:1px solid var(--ui-control-border); border-radius:var(--radius-control); background:var(--ui-surface-alt); }.test-builder-start>span { color:var(--ui-accent); font-size:var(--type-badge-size); font-weight:600; letter-spacing:.04em; }.test-builder-start h4 { margin:6px 0; color:var(--ui-text); font-size:var(--type-card-size); font-weight:600; }.test-builder-start p { max-width:690px; margin:0 0 14px; color:var(--ui-text-muted); line-height:var(--type-body-line); }.test-builder-start>div { display:flex; gap:9px; flex-wrap:wrap; }.test-builder-start button { min-height:44px; padding:9px 13px; box-shadow:none; }
.teacher-files-heading { margin-bottom: 18px; }
.teacher-files-heading h2 { margin: 4px 0 8px; color: var(--ui-text); }
.teacher-files-heading p { margin: 0; color: var(--ui-text-muted); line-height: 1.5; }
.file-manager-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 14px 16px; border: 1px solid var(--ui-control-border); border-radius: 8px; background: var(--ui-surface-alt); }
.file-manager-total span { color: var(--ui-accent); font-size: var(--type-meta-size); font-weight: 600; }
.file-manager-total b { color: var(--ui-text); font-size: 18px; }
.file-manager-total small { color: var(--ui-text-muted); font-size: 12px; font-weight: 400; }
.file-manager-summary span { display: block; margin-top: 4px; color: var(--ui-text-muted); font-size: var(--type-meta-size); line-height: var(--type-meta-line); }
.file-manager-category { margin-top: 14px; padding: 16px; border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-surface); }
.file-manager-category > div > h3 { margin: 0; color: var(--ui-text); font-size: 16px; }
.file-manager-category > div > p { margin: 6px 0 12px; color: var(--ui-text-muted); font-size: 12px; line-height: 1.5; }
.file-manager-homework { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.file-manager-homework > div { min-width: 0; }
.file-manager-homework > button { flex: 0 0 auto; padding: 9px 12px; border-color: var(--ui-warning-border); background: transparent; color: var(--ui-warning-text); box-shadow: none; }

@media (max-width: 760px) {
    .teacher-file-manager { width: calc(100% - 16px); margin: 8px auto; padding: 18px; }
    .file-manager-summary { grid-template-columns: 1fr; }
    .file-manager-total,.file-manager-homework { align-items: stretch; flex-direction: column; }
    .file-manager-homework > button { width: 100%; }
}

@media (max-width: 760px) {
    .exam-page-heading,
    .exam-card,
    .exam-review-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .exam-page-heading > button,
    .exam-card-actions button,
    .exam-review-footer button {
        width: 100%;
    }

    .exam-form-grid,
    .exam-option-grid,
    .exam-score-editor {
        grid-template-columns: 1fr;
    }

    .exam-search-results {
        max-height: 45vh;
    }

    .exam-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .exam-overview-grid {
        grid-template-columns: 1fr;
    }

    .exam-lane-heading {
        flex-direction: column;
    }

    .exam-compact-card {
        align-items: stretch;
    }

    .exam-card-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .exam-card-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .exam-attempt-header {
        grid-template-columns: auto 1fr;
        padding: 12px;
    }

    .exam-attempt-header > button {
        width: 44px;
        min-height: 44px;
        overflow: hidden;
        white-space: nowrap;
    }

    .exam-attempt-header > button i {
        margin-right: 20px;
    }

    .exam-countdown-wrap {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-width: 0;
        padding-top: 8px;
        border-top: 1px solid var(--ui-border);
        text-align: left;
    }

    .exam-countdown-wrap b {
        margin: 0;
        font-size: 22px;
    }

    .exam-question {
        padding: 15px;
    }

    .exam-question-heading {
        flex-direction: column;
    }

    .exam-question-heading h3,
    .exam-review-question-title h3,
    .exam-result-question h3 {
        font-size: 17px;
        line-height: 1.42;
    }

    .exam-match-row {
        grid-template-columns: 1fr;
    }

    .exam-attempt-actions {
        bottom: 84px;
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .exam-attempt-actions > button:first-child {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        white-space: nowrap;
        color: transparent;
        font-size: 0;
    }

    .exam-attempt-actions > button:first-child i {
        color: var(--ui-accent);
        margin: 0;
        font-size: 22px;
    }

    .exam-overlay {
        padding: 8px;
    }

    .exam-overlay-dialog {
        max-width: 100%;
        padding: 16px;
    }

    .exam-review-summary {
        grid-template-columns: 1fr 1fr;
    }

    .exam-review-question {
        padding: 14px;
    }

    .exam-review-footer {
        bottom: calc(76px + env(safe-area-inset-bottom));
    }
}

body.light-mode .file-manager-list { background:var(--ui-surface); }

.classroom-quiz-stage.quiz-theme-light { --quiz-accent:#1686d9; --quiz-accent-soft:rgba(22,134,217,.12); --quiz-panel:#fff; background:#eaf6ff radial-gradient(circle at 15% 15%,rgba(255,255,255,.98),transparent 28%),linear-gradient(135deg,rgba(31,150,224,.1),rgba(255,255,255,.85)); }
.classroom-quiz-stage.quiz-theme-light::before { opacity:1; background-image:linear-gradient(rgba(22,134,217,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(22,134,217,.08) 1px,transparent 1px); }
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-lobby-card,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-roster-card,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-question-card,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-results-card,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-student-lobby,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-student-question { border-color:rgba(22,134,217,.46); background:rgba(255,255,255,.94); box-shadow:0 18px 48px rgba(32,88,126,.18); }
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-lobby-card h3,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-question-card h3,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-student-lobby h3,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-student-question h3,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-section-title span,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-team-card > div,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-score-row b { color:#15283a; }
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-lobby-card p,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-section-title small,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-metrics span { color:#52687b; }
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-metrics div,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-team-card,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-player-list > div,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-host-options > div,
.classroom-quiz-stage.quiz-theme-light .classroom-quiz-score-row { background:#f6fbff; border-color:#d8e7f2; }

body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-lobby-card,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-roster-card,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-question-card,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-results-card,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-student-lobby,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-student-question { color:#f8fbff; }
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-lobby-card h3,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-question-card h3,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-student-lobby h3,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-student-question h3,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-section-title span,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-team-card > div,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-score-row b { color:#fff; }
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-lobby-card p,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-section-title small,
body.light-mode .classroom-quiz-stage:not(.quiz-theme-light) .classroom-quiz-metrics span { color:#d4dbe5; }
/* Teacher home */
.teacher-home { max-width: 1180px; margin: 0 auto; }
.teacher-home-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:8px 0 26px; }
.teacher-home-eyebrow { display:block; margin-bottom:var(--space-2); color:var(--ui-accent); font-size:var(--type-badge-size); font-weight:600; line-height:var(--type-badge-line); letter-spacing:.04em; text-transform:uppercase; }
.teacher-home-hero h2,.teacher-home-guide h3 { margin:0; color:var(--ui-text); }
.teacher-home-hero h2 { font-size:clamp(25px,3vw,36px); }
.teacher-home-hero p,.teacher-home-guide p { margin:9px 0 0; color:var(--ui-text-muted); line-height:1.55; }
.teacher-home-primary { flex:0 0 auto; padding:13px 18px; }
.teacher-home-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.teacher-home-actions button,.teacher-home-secondary button { border:1px solid var(--ui-border); background:var(--ui-surface); color:var(--ui-text); text-align:left; box-shadow:none; transition:border-color var(--motion-fast) var(--motion-ease),background var(--motion-fast) var(--motion-ease); }
.teacher-home-actions button { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; min-height:112px; padding:17px; }
.teacher-home-actions button:hover,.teacher-home-secondary button:hover { transform:none; border-color:var(--ui-accent); background:var(--ui-surface-alt); }
.teacher-home-actions button>i:first-child { display:grid; place-items:center; width:42px; height:42px; border-radius:8px; background:var(--ui-accent-soft); color:var(--ui-accent); font-size:23px; }
.teacher-home-actions button>i:last-child { color:var(--ui-text-muted); font-size:20px; }
.teacher-home-actions span { display:flex; min-width:0; flex-direction:column; gap:5px; }
.teacher-home-actions b { color:var(--ui-text); font-size:15px; }
.teacher-home-actions small { color:var(--ui-text-muted); line-height:1.35; }
.teacher-home-guide { display:grid; grid-template-columns:minmax(0,.85fr) minmax(360px,1.15fr); gap:34px; margin-top:20px; padding:28px; border:1px solid var(--ui-border); border-radius:8px; background:var(--ui-surface-alt); }
.teacher-home-guide-copy>button { margin-top:20px; padding:11px 15px; }
.teacher-home-steps { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.teacher-home-steps li { display:flex; align-items:center; gap:14px; padding:13px 15px; border:1px solid var(--ui-border); border-radius:8px; background:var(--ui-surface); }
.teacher-home-steps li>span { display:grid; flex:0 0 36px; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--ui-accent); color:var(--ui-on-accent); font-weight:600; }
.teacher-home-steps div { display:flex; flex-direction:column; gap:4px; }
.teacher-home-steps b { color:var(--ui-text); }
.teacher-home-steps small { color:var(--ui-text-muted); line-height:1.35; }
.teacher-home-secondary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:20px; }
.teacher-home-secondary button { display:grid; grid-template-columns:36px 1fr; gap:2px 11px; padding:17px; }
.teacher-home-secondary i { grid-row:1/3; color:var(--ui-accent); font-size:25px; }
.teacher-home-secondary b { color:var(--ui-text); }
.teacher-home-secondary span { color:var(--ui-text-muted); font-size:12px; }
@media (max-width:1024px) { .teacher-home-actions,.teacher-home-secondary { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) {
    .teacher-home { padding-bottom:18px; }
    .teacher-home-hero { align-items:stretch; flex-direction:column; }
    .teacher-home-primary { width:100%; }
    .teacher-home-actions,.teacher-home-secondary { grid-template-columns:1fr; }
    .teacher-home-actions button { min-height:92px; }
    .teacher-home-guide { grid-template-columns:1fr; gap:22px; padding:20px; }
}
.calendar-payment-help {
    margin: 10px 0 0;
    color: var(--ui-text-muted);
    font-size: 12px;
    line-height: 1.5;
}
.calendar-payment-unavailable {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border: 1px solid var(--ui-warning-border);
    border-radius: 8px;
    color: var(--ui-warning-text);
    background: var(--ui-warning-bg);
    font-size: 12px;
    line-height: 1.45;
}
.calendar-payment-unavailable[hidden] { display: none !important; }
.calendar-payment-unavailable i { flex: 0 0 auto; margin-top: 1px; color: var(--ui-warning-text); font-size: 17px; }
.calendar-payment-unavailable .link-button { min-height:44px; margin-left: auto; padding: 8px; color: var(--ui-accent); font-size: var(--type-badge-size); font-weight: 600; text-decoration: underline; }
.calendar-payment-badge { display:inline-flex; align-items:center; gap:3px; margin-left:4px; color:var(--ui-text-muted); font-style:normal; font-size:var(--type-badge-size); font-weight:500; white-space:nowrap; }
.calendar-payment-badge.is-paid { color:var(--ui-success-text); }
.calendar-payment-badge.is-pending { color:var(--ui-warning-text); }
.calendar-payment-badge.is-overdue { color:var(--ui-danger-text); }
.calendar-options-box.is-disabled {
    opacity: .58;
    border-style: dashed;
}

/* Unified teacher schedule: actual calendar, incoming requests and booking settings. */
.teacher-schedule-shell { max-width:1180px; margin:0 auto; }
.teacher-schedule-head { margin-bottom:18px; }
.teacher-schedule-head span { color:var(--ui-accent); font-size:var(--type-badge-size); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.teacher-schedule-head h2 { margin:6px 0; color:var(--ui-text); font-size:clamp(25px,3vw,34px); }
.teacher-schedule-head p { margin:0; color:var(--ui-text-muted); line-height:1.5; }
.teacher-schedule-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:20px; padding:6px; border:1px solid var(--ui-border); border-radius:8px; background:var(--ui-surface); }
.teacher-schedule-tabs button { position:relative; min-height:46px; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 13px; border:1px solid transparent; background:transparent; color:var(--ui-text-muted); box-shadow:none; }
.teacher-schedule-tabs button:hover { color:var(--ui-text); background:var(--ui-input-bg); }
.teacher-schedule-tabs button.active { border-color:var(--ui-accent); background:var(--ui-accent-soft); color:var(--ui-accent); }
.teacher-schedule-tabs button>i { font-size:19px; }
.teacher-schedule-tabs em { position:static; min-width:20px; margin-left:2px; font-style:normal; }
.teacher-schedule-view { display:none; }
.teacher-schedule-view.active { display:block; }
@media (max-width:620px) {
    .teacher-schedule-head { padding:0 3px; }
    .teacher-schedule-tabs { position:sticky; top:0; z-index:20; grid-template-columns:repeat(3,max-content); overflow-x:auto; justify-content:start; }
    .teacher-schedule-tabs button { min-width:120px; }
}

.tab-content.academy-feature-loading {
    position: relative;
    min-height: 180px;
}

.tab-content.academy-feature-loading::after {
    content: "Открываем раздел…";
    position: absolute;
    top: 18px;
    left: 50%;
    z-index: 5;
    padding: 9px 14px;
    border: 1px solid var(--ui-info-border);
    border-radius: 8px;
    color: var(--ui-info-text);
    font-size: 13px;
    font-weight: 600;
    background: var(--ui-info-bg);
    box-shadow: none;
    transform: translateX(-50%);
    pointer-events: none;
}
.lesson-content-image { display:block; max-width:100%; height:auto; margin:var(--space-3) 0; border:1px solid var(--ui-border); border-radius:var(--radius-control); }
.student-stats-load-state { display:flex; align-items:center; gap:var(--space-2); margin:0; padding:var(--space-3); color:var(--ui-text-muted); }
.student-stats-load-state i { color:var(--ui-accent); font-size:20px; }
.student-stats-load-state.is-error { border:1px solid var(--ui-danger-border); border-radius:var(--radius-control); color:var(--ui-danger-text); background:var(--ui-danger-bg); }
.student-stats-load-state.is-error i { color:inherit; }

.mobile-nav-label-short { display:none; }
@media (max-width:420px) {
    .mobile-nav-label-full { display:none; }
    .mobile-nav-label-short { display:inline; }
}
@media (max-width:380px) {
    .teacher-mobile-nav,
    .student-mobile-nav { grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; }
    .teacher-mobile-nav .tab-btn,
    .student-mobile-nav .tab-btn { padding:8px 1px; font-size:var(--type-badge-size); min-height:54px; }
    .lesson-hours-row { display:grid; grid-template-columns:minmax(0,1fr) 44px; }
    .lesson-hours-row .lesson-time-input { grid-column:1; width:100%; }
    .lesson-hours-row button { grid-column:2; grid-row:1 / 3; }
}

/* Mobile lesson viewer: keep preview controls in the document flow and the
   reading surface free from overlapping floating actions. */
@media (max-width:760px) {
    body:has(#lesson-viewer.active-dashboard) {
        padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    }

    body:has(#lesson-viewer.active-dashboard) > .support-btn {
        display: none;
    }

    #lesson-viewer.lesson-preview-mode .lesson-viewer-back-row {
        position: static;
        inset: auto;
        margin: 0 0 var(--space-3);
    }

    #lesson-viewer.lesson-preview-mode .lesson-viewer-back-button {
        width: 100%;
        justify-content: flex-start;
    }

    #lesson-viewer .lesson-viewer-title {
        margin: 0 0 var(--space-3) !important;
        padding: 0 0 var(--space-3);
        font-size: 20px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    #lesson-viewer .lesson-mobile-program-btn {
        margin: 0 0 var(--space-4);
    }

    #lesson-viewer .lesson-reading-card {
        margin-bottom: 0;
        padding: 20px 16px 28px;
        border-radius: 8px;
    }

    #lesson-viewer .lesson-reading-title {
        margin: 0 0 20px;
        padding-bottom: 14px;
        font-size: 21px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    #lesson-viewer .lesson-reading-content {
        max-width: none;
        margin-bottom: var(--space-5);
        font-size: 16px;
        line-height: 1.65;
        overflow-wrap: anywhere;
    }

    #lesson-viewer.lesson-preview-mode .lesson-reading-toolbar {
        display: none;
    }

    #lesson-viewer:not(.lesson-preview-mode) .lesson-reading-toolbar {
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    #lesson-viewer:not(.lesson-preview-mode) #single-lesson-container .card {
        padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    }
}

/* One file workspace; library membership and physical storage are separate actions. */
.file-workspace-modes { display:flex; gap:8px; margin:16px 0 20px; border-bottom:1px solid var(--ui-border); padding-bottom:12px; }
.classroom-library-overlay.teacher-library-picker { position:fixed; z-index:10010; }
.file-workspace-modes button { min-height:44px; border-radius:8px; }
.file-workspace-modes [aria-selected="true"] { color:var(--ui-accent); border-color:var(--ui-accent); background:var(--ui-accent-soft); }
#file-library-panel[hidden], #file-all-panel[hidden], #file-inventory-more[hidden] { display:none; }
#file-all-panel > p { color:var(--ui-text-muted); max-width:80ch; }
#file-storage-summary { margin:16px 0; font-weight:600; }
.file-inventory-filters { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.file-inventory-filters label { display:grid; gap:6px; flex:1 1 145px; color:var(--ui-text-muted); font-size:var(--type-label-size); min-width:0; }
.file-inventory-filters label:first-child { flex:2 1 280px; }
.file-inventory-filters > label { align-self:flex-end; }
.file-extra-filters { flex:3 1 550px; min-width:0; }
.file-extra-filters > summary { cursor:pointer; font-size:var(--type-label-size); color:var(--ui-text-muted); margin-bottom:8px; }
.file-extra-filters > div { display:flex; flex-wrap:wrap; gap:12px; }
.file-extra-filters label:first-child { flex:1 1 145px; }
.file-inventory-filters input, .file-inventory-filters select { width:100%; min-height:44px; min-width:0; padding:10px 12px; border:1px solid var(--ui-control-border); border-radius:8px; background:var(--ui-input-bg); color:var(--ui-text); font:inherit; }
.file-inventory-filters input:focus, .file-inventory-filters select:focus { outline:2px solid var(--ui-accent); outline-offset:2px; }
.file-inventory-row { display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--ui-border); }
.file-inventory-copy { flex:1; min-width:0; display:grid; gap:5px; overflow-wrap:anywhere; }
.file-inventory-copy small, .file-inventory-copy span { color:var(--ui-text-muted); font-size:var(--type-meta-size); }
.file-inventory-row button { min-height:44px; flex-shrink:0; border-radius:8px; }
.file-details-dialog { width:min(680px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; background:var(--ui-surface); border:1px solid var(--ui-border); border-radius:8px; color:var(--ui-text); }
.file-details-dialog header { display:flex; align-items:flex-start; gap:16px; justify-content:space-between; }
.file-details-dialog h2 { margin:0; font-size:var(--type-section-size); overflow-wrap:anywhere; }
.file-details-dialog p { color:var(--ui-text-muted); overflow-wrap:anywhere; }
.file-details-dialog button { min-height:44px; border-radius:8px; }
.file-usage-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.file-usage-list button { display:grid; grid-template-columns:1fr auto; text-align:left; width:100%; gap:4px 12px; padding:12px; background:var(--ui-input-bg); }
.file-usage-list small { color:var(--ui-text-muted); grid-column:1 / -1; }
.file-usage-list span { overflow-wrap:anywhere; }
.file-details-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.file-details-actions .is-danger { color:var(--ui-danger-text); border-color:var(--ui-danger-border); }
.material-preview-status.is-warning { color:var(--ui-warning-text); }
.materials-card-actions [aria-pressed="true"], #teacher-materials-favorites[aria-pressed="true"] { color:var(--ui-accent); border-color:var(--ui-accent); background:var(--ui-accent-soft); }
.teacher-material-pdf-controls [hidden] { display:none; }
#file-inventory-more { margin-top:16px; min-height:44px; }
.file-cleanup-tools { margin-top:24px; padding:16px; border:1px solid var(--ui-border); border-radius:8px; }
.file-cleanup-tools summary { cursor:pointer; color:var(--ui-text-muted); }
.file-cleanup-tools p { max-width:80ch; color:var(--ui-text-muted); }
.classroom-document-presentation .classroom-side,
.classroom-document-presentation .classroom-panel-reopen,
.classroom-document-presentation .classroom-object-editor,
.classroom-document-presentation .classroom-object-quick-actions { display:none !important; }
.classroom-document-presentation .classroom-presentation-actions button[hidden] { display:none; }
.classroom-document-presentation:not(.classroom-video-only) .classroom-presentation-banner { left:88px; right:18px; max-width:none; justify-content:space-between; }
@media (max-width:780px) {
    .file-inventory-row { flex-wrap:wrap; gap:8px; }
    .file-inventory-copy { flex-basis:100%; }
    .file-inventory-filters label { flex-basis:calc(50% - 6px); }
    .file-inventory-filters label:first-child { flex-basis:100%; }
    .file-details-dialog { padding:16px; }
    .classroom-document-presentation:not(.classroom-video-only) .classroom-presentation-banner { left:8px; right:8px; }
}