/* Шрифты дизайна: Nunito — интерфейс, JetBrains Mono — код */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Атрибут hidden скрывает элемент независимо от display у класса (.btn, .alert и т.д.) */
[hidden] {
    display: none !important;
}

/* Шкала вертикальных отступов страниц */
:root {
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #0B0E14;
    color: #E6EAF2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card {
    background: #131823;
    border: 1px solid #2A3345;
    border-radius: 12px;
    padding: 32px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.auth-card h1 {
    font-size: 22px;
    margin-bottom: 6px;
    color: #F4F6FB;
}

.auth-card .subtitle {
    color: #8B95A7;
    font-size: 14px;
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    color: #8B95A7;
    margin-bottom: 6px;
}

.form-group input {
    width: 100%;
    padding: 10px 12px;
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 8px;
    color: #E6EAF2;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}

.form-group input:focus {
    border-color: #4F5FE8;
}

.btn {
    display: inline-block;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: #4F5FE8;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
}

.btn:hover {
    background: #4350D6;
}

.btn-block {
    width: 100%;
    margin-top: 8px;
}

.btn-danger {
    background: #dc2626;
}

.btn-danger:hover {
    background: #b91c1c;
}

.btn-outline {
    background: transparent;
    border: 1px solid #2A3345;
    color: #E6EAF2;
}

.btn-outline:hover {
    background: #2A3345;
}

/* Необратимое действие (удаление) — в списке не выделяется заливкой, но отличается цветом */
.btn-outline-danger {
    border-color: rgba(239, 68, 68, 0.5);
    color: #fca5a5;
}

.btn-outline-danger:hover {
    background: rgba(239, 68, 68, 0.15);
}

.alert {
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.4);
    color: #fca5a5;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
}

.page-login {
    flex-direction: column;
    gap: 24px;
}

.page-tasks {
    display: block;
    flex: 1;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px;
}

/* Широкая страница: расписание, сообщения и все разделы администрирования
   (одна ширина у всех разделов — меню .subnav везде раскладывается одинаково) */
.container-wide {
    max-width: 1200px;
}

.page-tasks header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.page-tasks h2 {
    font-size: 20px;
    color: #F4F6FB;
}

.task-list {
    display: grid;
    gap: 12px;
}

.task-card {
    background: #131823;
    border: 1px solid #2A3345;
    border-radius: 10px;
    padding: 16px 18px;
}

.task-card h3 {
    font-size: 15px;
    color: #EEF1F7;
    margin-bottom: 6px;
}

.task-card p {
    font-size: 13px;
    color: #8B95A7;
    margin-bottom: 10px;
}

.task-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
}

.badge {
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
}

.badge-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

.badge-in_progress {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.badge-completed {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.badge-assignees {
    background: #2A3345;
    color: #C3CAD7;
}

.empty {
    text-align: center;
    color: #6E7A8E;
    padding: 48px 0;
    font-size: 15px;
}

.loader {
    text-align: center;
    color: #8B95A7;
    padding: 48px 0;
}

.nav-link {
    color: #8B95A7;
    text-decoration: none;
    transition: color 0.15s;
}

.nav-link:hover {
    color: #8B9CFF;
}

.alert-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #86efac;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.page-profile {
    display: block;
    flex: 1;
}

.page-profile header {
    margin-bottom: 20px;
}

.page-profile h2 {
    font-size: 20px;
    color: #F4F6FB;
}

.profile-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #131823;
    border: 1px solid #2A3345;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.profile-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #4F5FE8;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-info h3 {
    font-size: 18px;
    color: #EEF1F7;
    margin-bottom: 8px;
}

.profile-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
}

/* Группа карточек разной высоты (разделы статистики, настройки).
   Раньше это была сетка auto-fit: строка сетки равна самой высокой карточке, поэтому
   карточка следующей строки («Статистика») начиналась ниже самой высокой соседки
   («Практика») — с пустым местом над ней. Колонки (column flow) укладывают карточки
   друг под другом без пустых строк; на узком экране — одна колонка. */
.profile-sections {
    columns: 2 300px;
    column-gap: 16px;
    margin-bottom: 8px;
}

.profile-sections > *,
.profile-sections > .panel {
    break-inside: avoid;
    margin-bottom: 16px;
}

.section-title {
    font-size: 16px;
    color: #F4F6FB;
    margin: 28px 0 12px;
}

a.task-card {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s;
}

a.task-card:hover {
    border-color: #4F5FE8;
}

.progress {
    height: 6px;
    background: #2A3345;
    border-radius: 999px;
    overflow: hidden;
    margin: 10px 0;
}

.progress-bar {
    height: 100%;
    background: #4F5FE8;
}

/* Карточка задания: заголовок → метаданные → условие → ответ, единый шаг отступов */
.homework-task {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    background: #131823;
    border: 1px solid #2A3345;
    border-radius: 10px;
    padding: 18px 20px;
}

.homework-task > * {
    margin: 0;
}

.homework-task h3 {
    font-size: 15px;
    color: #EEF1F7;
}

.homework-task .task-text {
    font-size: 14px;
    color: #C3CAD7;
    white-space: pre-wrap;
}

.homework-task #result:empty {
    display: none;
}

.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px 12px;
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 8px;
    color: #E6EAF2;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s;
}

.form-group textarea {
    min-height: 80px;
    resize: vertical;
}

/* Единая стрелка выпадающих списков во всех формах и фильтрах (.filters, окна выбора и т.д.):
   встроенная стрелка браузера заменена своей — внутри правой части поля, по центру */
.form-group select,
.rte-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238B95A7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    text-overflow: ellipsis;
    cursor: pointer;
}

.rte-select {
    padding-right: 26px;
    background-position: right 8px center;
}

.form-group select:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Строка «Найдено: N · Страница X из Y» перед списком */
.list-info {
    margin-bottom: var(--space-md);
}

.form-group textarea:focus,
.form-group select:focus {
    border-color: #4F5FE8;
}

.form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
}

.check-list {
    max-height: 260px;
    overflow-y: auto;
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 8px;
    padding: 8px 12px;
}

.check-list label {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
    font-size: 14px;
    color: #E6EAF2;
    cursor: pointer;
}

.panel {
    background: #131823;
    border: 1px solid #2A3345;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.check-list input {
    width: auto;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 10px;
    background: rgba(79, 95, 232, 0.15);
    border: 1px solid rgba(79, 95, 232, 0.4);
    border-radius: 999px;
    font-size: 13px;
    color: #C9D1FF;
}

.chip-remove {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #C9D1FF;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.chip-remove:hover {
    background: rgba(79, 95, 232, 0.35);
}

.modal {
    margin: auto;
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    padding: 20px;
    background: #131823;
    color: #E6EAF2;
    border: 1px solid #2A3345;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.modal::backdrop {
    background: rgba(11, 14, 20, 0.7);
}

.modal-header,
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.modal-header {
    margin-bottom: 16px;
}

.modal-header h3 {
    font-size: 16px;
    color: #F4F6FB;
}

.modal-close {
    font-size: 20px;
}

.modal-list {
    max-height: 50vh;
}

.modal-more {
    display: flex;
    gap: 12px;
    align-items: center;
    min-height: 8px;
    margin: 10px 0;
}

.modal-footer {
    margin-top: 8px;
}

.badge-danger {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
}

.hint {
    color: #8B95A7;
    font-size: 12px;
}

.muted {
    opacity: 0.55;
}

.form-row,
.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.filters .form-group {
    margin-bottom: 0;
}

.modal-wide {
    width: min(720px, calc(100vw - 32px));
}

.inline-check {
    display: flex !important;
    gap: 8px;
    align-items: center;
    cursor: pointer;
}

.inline-check input {
    width: auto;
}

/* Группа флажков настройки (например, проверки краткого ответа): по одному в строке */
.check-options {
    display: grid;
    gap: var(--space-xs);
    justify-items: start;
}

code {
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 4px;
    padding: 1px 6px;
    color: #C9D1FF;
}

/* Шапка страницы: «назад» → заголовок → описание → метаданные → содержимое */
.page-head {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-xl);
}

.page-head .breadcrumb {
    align-self: flex-start;
    margin-bottom: var(--space-xl);
    font-size: 14px;
}

.page-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.page-title-row h2 {
    font-size: 20px;
    color: #F4F6FB;
}

.page-head .page-description {
    margin-top: var(--space-sm);
    color: #8B95A7;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.page-head .task-meta {
    margin-top: var(--space-lg);
    align-items: center;
}

.page-head .task-meta:empty {
    display: none;
}

/* Меню разделов (администрирование). На всю ширину контейнера страницы: на широком экране —
   одна строка, при нехватке места пункты переносятся на следующие строки (без прокрутки). */
.subnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #2A3345;
}

.subnav-link {
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 8px;
    color: #8B95A7;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.subnav-link:focus-visible {
    outline: 2px solid #4F5FE8;
    outline-offset: 2px;
}

.subnav-link:hover {
    background: #131823;
    color: #E6EAF2;
}

.subnav-link.active {
    background: #2A3345;
    color: #F4F6FB;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.admin-grid .panel {
    margin-bottom: 0;
}

.admin-link {
    display: block;
    padding: 6px 0;
    color: #C9D1FF;
    text-decoration: none;
}

.admin-link:hover {
    color: #F4F6FB;
}

.panel-title {
    font-size: 16px;
    color: #F4F6FB;
    margin-bottom: 12px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #2A3345;
    font-size: 14px;
}

.stat-row:last-of-type {
    border-bottom: none;
}

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.alert-info {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #fcd34d;
}

.confirm-text {
    color: #C3CAD7;
    margin-bottom: 16px;
}

/* Предупреждение необратимого действия в окне подтверждения */
.confirm-details {
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.35);
    color: #fca5a5;
    font-size: 14px;
}

/* Неактивная кнопка окна (например, пока не введено подтверждение удаления) */
.modal .btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Ошибка заполнения формы в модальном окне */
.field-error {
    margin: -6px 0 12px;
    color: #fca5a5;
    font-size: 13px;
}

.appeal-recipient {
    margin-bottom: 12px;
    font-size: 13px;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.table th,
.table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #2A3345;
}

.table th {
    color: #8B95A7;
    font-weight: 600;
}


/* --- Условие задачи (общие стили для редактора и отображения) --- */

.rich-content {
    font-size: 14px;
    line-height: 1.6;
    color: #C3CAD7;
    overflow-wrap: anywhere;
}

.homework-task .task-text.rich-content,
.task-text.rich-content {
    white-space: normal;
}

.rich-content > * + * {
    margin-top: 8px;
}

.rich-content p:empty::before {
    content: "\200b";
}

.rich-content .rc-plain {
    white-space: pre-wrap;
}

.rich-content h3, .rich-content h4, .rich-content h5, .rich-content h6,
.rich-content h1, .rich-content h2 {
    color: #EEF1F7;
    line-height: 1.3;
    margin-top: 14px;
}

.rich-content h1, .rich-content h3 { font-size: 20px; }
.rich-content h2, .rich-content h4 { font-size: 17px; }
.rich-content h5 { font-size: 15px; }
.rich-content h6 { font-size: 14px; }

.rich-content ul,
.rich-content ol {
    padding-left: 24px;
}

.rich-content li > p {
    margin: 0;
}

.rich-content blockquote {
    border-left: 3px solid #4F5FE8;
    padding: 4px 12px;
    color: #8B95A7;
}

.rich-content hr {
    border: none;
    border-top: 1px solid #2A3345;
    margin: 16px 0;
}

.rich-content a {
    color: #8B9CFF;
}

.rich-content mark {
    background: #fde047;
    color: #0B0E14;
    border-radius: 2px;
}

.rich-content pre {
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 8px;
    padding: 10px 12px;
    overflow-x: auto;
}

.rich-content pre code {
    background: none;
    padding: 0;
    white-space: pre;
}

.rich-content .rc-table,
.rich-content .tableWrapper {
    overflow-x: auto;
    margin: 12px 0;
}

.rich-content table {
    border-collapse: collapse;
    min-width: 50%;
}

.rich-content td,
.rich-content th {
    border: 1px solid #3A4560;
    padding: 6px 10px;
    vertical-align: top;
    min-width: 40px;
    position: relative;
}

.rich-content th {
    background: #1A2030;
    color: #EEF1F7;
    font-weight: 600;
    text-align: left;
}

.rich-content td > p,
.rich-content th > p {
    margin: 0;
}

.rc-figure {
    margin: 12px 0;
    display: flex;
}

.rc-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    background: #fff;
}

.rc-align-left { justify-content: flex-start; }
.rc-align-center { justify-content: center; }
.rc-align-right { justify-content: flex-end; }

/* --- Rich Text Editor --- */

.modal-editor {
    width: min(980px, calc(100vw - 32px));
}

.rte {
    border: 1px solid #2A3345;
    border-radius: 8px;
    background: #0B0E14;
}

.rte [hidden] {
    display: none !important;
}

.rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    border-bottom: 1px solid #2A3345;
    background: #0F131B;
    border-radius: 8px 8px 0 0;
    position: sticky;
    top: -20px;
    z-index: 2;
}

.rte-context {
    border-radius: 0;
    background: #1b2840;
    top: 26px;
}

.rte-group {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
    padding-right: 6px;
    border-right: 1px solid #2A3345;
}

.rte-group:last-child {
    border-right: none;
}

.rte-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #C3CAD7;
    font-size: 13px;
    cursor: pointer;
}

.rte-btn:hover:not(:disabled) {
    background: #1A2030;
}

.rte-btn.is-active {
    background: rgba(79, 95, 232, 0.25);
    border-color: #4F5FE8;
    color: #fff;
}

.rte-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.rte-select {
    height: 30px;
    background: #0B0E14;
    color: #E6EAF2;
    border: 1px solid #2A3345;
    border-radius: 6px;
    font-size: 13px;
    padding: 0 6px;
    max-width: 160px;
}

.rte-color {
    width: 30px;
    height: 30px;
    padding: 2px;
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 6px;
    cursor: pointer;
}

.rte-label {
    font-size: 12px;
    color: #8B95A7;
    margin-right: 4px;
}

.rte-content .ProseMirror {
    min-height: 220px;
    max-height: 55vh;
    overflow-y: auto;
    padding: 12px 14px;
    outline: none;
}

.rte-content .ProseMirror p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
    color: #6E7A8E;
    float: left;
    height: 0;
    pointer-events: none;
}

.rte-content .ProseMirror .rc-figure.ProseMirror-selectednode img {
    outline: 3px solid #4F5FE8;
}

.rte-content .ProseMirror .selectedCell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(79, 95, 232, 0.2);
    pointer-events: none;
}

.rte-busy {
    opacity: 0.7;
    cursor: progress;
}

/* --- Выбор пользователей (UserSelector) --- */

.select-dialog .modal-header {
    margin-bottom: 12px;
}

.select-info {
    margin-bottom: 8px;
}

.select-list {
    display: grid;
    gap: 8px;
    max-height: 52vh;
    overflow-y: auto;
    min-height: 120px;
    transition: opacity 0.15s;
}

.select-list.is-loading {
    opacity: 0.5;
}

.select-list .empty {
    padding: 32px 0;
}

.select-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 10px;
}

.select-card.is-selected {
    border-color: #4F5FE8;
    background: rgba(79, 95, 232, 0.08);
}

.select-card-body {
    flex: 1;
    min-width: 0;
}

.select-card-name {
    font-size: 14px;
    font-weight: 600;
    color: #EEF1F7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-card-meta {
    font-size: 12px;
    color: #8B95A7;
}

.select-card .badge {
    font-size: 11px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #4F5FE8;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.select-selected-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
    margin: 6px 0;
}

.select-card-selected {
    padding: 8px 10px;
}

.select-actions {
    margin-top: 8px;
}

.pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 12px 0 4px;
}

.pagination:empty {
    display: none;
}

.page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    background: #0B0E14;
    color: #C3CAD7;
    border: 1px solid #2A3345;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.page-btn:hover:not(:disabled) {
    border-color: #4F5FE8;
}

.page-btn.is-current {
    background: #4F5FE8;
    border-color: #4F5FE8;
    color: #fff;
}

.page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.page-gap {
    color: #6E7A8E;
    padding: 0 2px;
}

/* --- Статистика учеников --- */

.stat-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.stat-tile {
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 10px;
    padding: 12px 14px;
}

.stat-tile-value {
    font-size: 22px;
    font-weight: 700;
    color: #EEF1F7;
    font-variant-numeric: tabular-nums;
}

.stat-tile-label {
    font-size: 12px;
    color: #8B95A7;
    margin-top: 2px;
}

.stat-row strong {
    font-variant-numeric: tabular-nums;
}

.table-wrap {
    overflow-x: auto;
}

.table td.num,
.table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.table tbody tr:hover {
    background: rgba(42, 51, 69, 0.35);
}

.student-link {
    color: #E6EAF2;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-link:hover .select-card-name {
    color: #A9B5FF;
}

/* элементы панели редактора внутри .form-group не растягиваются общими стилями полей */
.form-group .rte-select,
.form-group .rte-color {
    width: auto;
    padding: 0 6px;
    height: 30px;
    font-size: 13px;
}

.form-group .rte-color {
    width: 30px;
    padding: 2px;
}


.form-actions-split {
    justify-content: space-between;
    flex-wrap: wrap;
}

/* --- Аккордеон (details/summary) --- */

.accordion-list {
    display: grid;
    gap: 10px;
}

.accordion-item {
    background: #131823;
    border: 1px solid #2A3345;
    border-radius: 10px;
}

.accordion-item.is-current {
    border-color: #4F5FE8;
}

.accordion-item > summary {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    border-radius: 10px;
}

.accordion-item > summary::-webkit-details-marker {
    display: none;
}

.accordion-item > summary::before {
    content: "▶";
    font-size: 10px;
    color: #8B95A7;
    transition: transform 0.15s;
    align-self: center;
}

.accordion-item[open] > summary::before {
    transform: rotate(90deg);
}

.accordion-item > summary:hover {
    background: #1A2030;
}

.accordion-item > summary:focus-visible {
    outline: 2px solid #4F5FE8;
    outline-offset: 2px;
}

.accordion-title {
    font-size: 15px;
    font-weight: 600;
    color: #EEF1F7;
}

.accordion-meta {
    font-size: 13px;
    color: #8B95A7;
}

.accordion-body {
    display: grid;
    gap: var(--space-sm);
    padding: 4px 18px 18px;
}

.homework-task-list {
    padding-left: 22px;
    display: grid;
    gap: 6px;
    font-size: 14px;
}

.homework-task-list li span + span {
    margin-left: 8px;
}

/* --- Текущие и выполненные (ученик) --- */

.sections {
    display: grid;
    gap: 32px;
}

.list-section {
    display: grid;
    gap: var(--space-sm);
}

.list-section .section-title {
    margin-bottom: 0;
    font-size: 16px;
    color: #EEF1F7;
}

.done-group {
    background: transparent;
}

.done-group > summary .accordion-title {
    font-size: 14px;
    color: #8B95A7;
}

.done-group .accordion-body {
    padding: 4px 0 0;
}

.task-card.is-done {
    background: #0F131B;
    border-color: #1A2030;
    opacity: 0.72;
    filter: saturate(0.6);
}

.task-card.is-done:hover {
    opacity: 0.95;
}

.task-card.is-done h3 {
    color: #C3CAD7;
}

.done-mark {
    color: #4ade80;
    margin-right: 6px;
}

.empty-sm {
    padding: 16px 0;
    font-size: 14px;
    text-align: left;
}

/* --- Выбор из списка (пользователи, задачи) --- */

.select-card:hover:not(.is-disabled) {
    border-color: #3A4560;
}

.select-card.is-disabled {
    opacity: 0.55;
}

.select-card-preview {
    font-size: 12px;
    color: #8B95A7;
    margin: 2px 0 4px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.select-card-meta.task-meta {
    gap: 8px;
    font-size: 12px;
    color: #8B95A7;
    margin-top: 2px;
}

.select-card-actions {
    display: flex;
    gap: 2px;
    align-items: center;
}

.select-card-actions .chip-remove:disabled {
    opacity: 0.3;
    cursor: default;
}

.select-selected-list.is-ordered {
    grid-template-columns: 1fr;
}

.select-position {
    min-width: 22px;
    font-size: 12px;
    color: #6E7A8E;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.task-number {
    min-width: 52px;
    height: 36px;
    padding: 0 8px;
    border-radius: 8px;
    background: rgba(79, 95, 232, 0.15);
    color: #A9B5FF;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    white-space: nowrap;
}

.task-number.is-empty {
    background: #1A2030;
    color: #6E7A8E;
}

.select-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0 12px;
}

.selector-field {
    margin-bottom: var(--space-sm);
}

/* --- Форма домашней работы --- */

.form-section {
    border-top: 1px solid #2A3345;
    padding-top: var(--space-md);
    margin-bottom: var(--space-md);
}

.form-section-title {
    font-size: 15px;
    color: #EEF1F7;
    margin-bottom: var(--space-sm);
}

.form-section .inline-check {
    margin-top: var(--space-xs);
}

.random-block {
    margin-top: var(--space-md);
    background: #0F131B;
}

.random-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.random-row {
    display: grid;
    grid-template-columns: 40px minmax(48px, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 8px;
    font-size: 14px;
}

.random-row .hint {
    white-space: nowrap;
}

.random-row.is-empty {
    opacity: 0.5;
}

.random-label {
    font-weight: 600;
    color: #E6EAF2;
}

.random-row input {
    width: 100%;
    padding: 4px 6px;
    background: #131823;
    border: 1px solid #2A3345;
    border-radius: 6px;
    color: #E6EAF2;
    font-size: 14px;
}

.random-row input.is-invalid {
    border-color: #f87171;
}

.random-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.random-head .form-group {
    max-width: 220px;
    margin-bottom: 0;
}

/* --- Адаптивность --- */

@media (max-width: 720px) {
    .container {
        padding: 16px;
    }

    .subnav-link {
        padding: 8px 12px;
    }

    .page-tasks header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .filters,
    .form-row {
        grid-template-columns: 1fr 1fr;
    }

    .select-card {
        flex-wrap: wrap;
    }

    .select-card-body {
        flex-basis: calc(100% - 70px);
    }

    .select-selected-list {
        grid-template-columns: 1fr;
    }

    .modal,
    .modal-wide,
    .modal-editor {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        padding: 14px;
    }

    .table th,
    .table td {
        padding: 8px;
    }
}

@media (max-width: 440px) {
    .filters,
    .form-row {
        grid-template-columns: 1fr;
    }

    .random-grid {
        grid-template-columns: 1fr 1fr;
    }

    .random-row {
        grid-template-columns: 32px 1fr;
    }

    .random-row .hint {
        grid-column: 2;
    }
}


/* --- Форма ДЗ: способ добавления задач --- */

.source-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.source-btn {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 18px 16px;
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 12px;
    color: #E6EAF2;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}

.source-btn:hover {
    border-color: #4F5FE8;
    background: #141d33;
}

.source-btn:focus-visible {
    outline: 2px solid #4F5FE8;
    outline-offset: 2px;
}

.source-btn.is-active {
    border-color: #4F5FE8;
    background: rgba(79, 95, 232, 0.12);
}

.source-icon {
    font-size: 26px;
    line-height: 1;
}

.source-title {
    font-size: 15px;
    font-weight: 600;
}

.source-hint {
    font-size: 12px;
    color: #8B95A7;
}

.source-panel {
    display: grid;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding: var(--space-md);
    background: #0F131B;
    border: 1px solid #2A3345;
    border-radius: 12px;
}

.selected-tasks {
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px dashed #2A3345;
}

.selected-tasks .selector-field {
    margin-bottom: var(--space-xs);
}

/* Дополнительная настройка: компактный переключатель, визуально вторичный */
.compact-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #8B95A7;
    cursor: pointer;
    user-select: none;
}

.compact-toggle input {
    width: 14px;
    height: 14px;
    accent-color: #4F5FE8;
}

.compact-toggle:hover {
    color: #E6EAF2;
}

@media (max-width: 520px) {
    .source-switch {
        grid-template-columns: 1fr;
    }
}

.table-link {
    color: #E6EAF2;
    font-weight: 600;
    text-decoration: none;
}

.table-link:hover {
    color: #A9B5FF;
    text-decoration: underline;
}

/* --- Практика --- */

.page-lead {
    margin: -8px 0 var(--space-lg);
    color: #8B95A7;
    font-size: 14px;
    line-height: 1.5;
}

.page-crumb {
    margin-bottom: var(--space-lg);
    font-size: 14px;
    color: #6E7A8E;
}

/* Большие почти квадратные кнопки: главные страницы, экзамены, способы практики.
   .big-tiles — две колонки; .big-tiles-auto — столько колонок, сколько помещается
   (на телефоне — две). Число в углу (.big-tile-count) — счетчик раздела. */
.big-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 260px));
    gap: var(--space-md);
    margin-bottom: 32px;
}

.big-tile {
    aspect-ratio: 1 / 0.9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    text-align: center;
    background: linear-gradient(160deg, #131823, #0F131B);
    border: 1px solid #2A3345;
    border-radius: 16px;
    color: #EEF1F7;
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.big-tile:hover:not(:disabled) {
    border-color: #4F5FE8;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.big-tile:focus-visible {
    outline: 2px solid #4F5FE8;
    outline-offset: 3px;
}

.big-tile:disabled {
    opacity: 0.6;
    cursor: progress;
}

.big-tile-icon {
    font-size: 52px;
    line-height: 1;
}

.big-tile-title {
    font-size: 20px;
    font-weight: 700;
}

.big-tile-hint {
    font-size: 12px;
    color: #8B95A7;
}

.big-tiles-auto {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
}

/* Четыре плитки (способы практики): в ряд на всю ширину, на планшете и телефоне — 2 × 2 (без «3 + 1»).
   Размер заголовка зависит от ширины самой плитки, поэтому длинные слова («Официальные»)
   помещаются целиком и в узких плитках. */
.big-tiles-quad {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* высота — по самой высокой плитке ряда (плитка с пропорциями не растягивается до высоты ряда) */
.big-tiles-quad .big-tile {
    container-type: inline-size;
    aspect-ratio: auto;
    min-height: 168px;
}

.big-tiles-quad .big-tile-title {
    font-size: clamp(13px, 13cqi, 20px);
}

/* Пять плиток: в ряд на широком экране, на планшете — 3 + 2, на телефоне — 2 + 2 + 1 (последняя во всю ширину) */
.big-tiles-five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .big-tiles-five {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .big-tiles-five .big-tile {
        grid-column: span 2;
    }

    .big-tiles-five .big-tile:nth-child(n + 4) {
        grid-column: span 3;
    }
}

.big-tile {
    position: relative;
    min-width: 0;
}

.big-tile-title {
    overflow-wrap: anywhere;
}

.big-tile-count {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    background: #4F5FE8;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 26px;
    font-variant-numeric: tabular-nums;
}

.big-tile-accent {
    border-color: rgba(79, 95, 232, 0.55);
    background: linear-gradient(160deg, #26305a, #0F131B);
}

.bank-task-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.homework-task.is-selected {
    border-color: #4F5FE8;
}

.selection-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 24px;
    background: #131823;
    border-top: 1px solid #4F5FE8;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.35);
}

.selection-bar .form-actions {
    margin-top: 0;
}

/* Выбор способа проверки и проверяющего (практика): карточки .select-card с видимой радиокнопкой */
.review-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--space-xs);
    margin: var(--space-sm) 0;
}

.review-mode,
.reviewer-option {
    cursor: pointer;
    min-width: 0;
}

.review-mode input,
.reviewer-option input {
    width: auto;
    flex-shrink: 0;
    margin: 0;
    accent-color: #4F5FE8;
}

.review-mode .select-card-name,
.reviewer-option .select-card-name {
    display: block;
}

.review-mode .select-card-meta {
    display: block;
    margin-top: 2px;
}

.reviewer-picker {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid #2A3345;
}

.reviewer-picker-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
    font-size: 14px;
}

.reviewer-search {
    margin-bottom: var(--space-xs);
}

/* Много проверяющих — список прокручивается внутри панели */
.reviewer-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: var(--space-xs);
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.reviewer-option .select-card-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reviewer-summary {
    margin: var(--space-sm) 0 0;
    font-size: 14px;
    color: #C3CAD7;
    line-height: 1.5;
}

.reviewer-empty .form-actions {
    margin-top: var(--space-xs);
}

/* Кнопка отправки неактивна, пока проверяющий не выбран */
.reviewer-picker .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    /* аватар и имя — в одной строке и на телефоне (общее правило .select-card переносит содержимое) */
    .review-mode,
    .reviewer-option {
        flex-wrap: nowrap;
    }

    .review-mode .select-card-body,
    .reviewer-option .select-card-body {
        flex-basis: auto;
    }
}

.self-review {
    padding: 12px;
    background: #0F131B;
    border: 1px dashed #4F5FE8;
    border-radius: 10px;
}

.score-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.score-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid #2A3345;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.score-option:has(input:checked) {
    border-color: #4F5FE8;
    background: rgba(79, 95, 232, 0.2);
}

.practice-group-title {
    font-size: 14px;
    color: #8B95A7;
    margin: var(--space-sm) 0 var(--space-xs);
}

/* --- Мои ученики --- */

.student-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-md);
}

.student-card {
    display: grid;
    gap: var(--space-sm);
    padding: 16px 18px;
    background: #131823;
    border: 1px solid #2A3345;
    border-radius: 12px;
}

.student-card .form-actions {
    margin-top: 0;
}

.student-stats .stat-row {
    font-size: 13px;
    padding: 5px 0;
}

.stat-tile-link {
    text-decoration: none;
    transition: border-color 0.15s;
}

.stat-tile-link:hover {
    border-color: #4F5FE8;
}

/* --- Профиль --- */

.profile-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.progress-list {
    display: grid;
    gap: var(--space-md);
}

.progress-item {
    display: grid;
    gap: 6px;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

@media (max-width: 720px) {
    .big-tiles-quad {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .big-tiles-five .big-tile,
    .big-tiles-five .big-tile:nth-child(n + 4) {
        grid-column: auto;
    }

    .big-tiles-five .big-tile:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        min-height: 120px;
    }

    .profile-card {
        flex-wrap: wrap;
    }

    .profile-actions {
        margin-left: 0;
        width: 100%;
    }

    .selection-bar {
        padding: 10px 16px;
    }
}

@media (max-width: 600px) {
    .big-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 380px) {
    .big-tile-icon {
        font-size: 40px;
    }

    .big-tile-title {
        font-size: 16px;
    }
}

.progress-item .progress {
    margin: 0;
}

/* шкала самооценки: общий стиль полей .form-group input не применяется к переключателям */
.score-option input {
    width: auto;
    padding: 0;
    margin: 0;
    accent-color: #4F5FE8;
}

.score-option {
    min-width: 48px;
    justify-content: center;
}

.result-note {
    font-size: 13px;
    color: #8B95A7;
}

/* --- Шапка ---
   Брейкпоинты шапки:
   > 1024px — полная шапка: пункты с подписями, имя и роль пользователя;
   721–1024px (планшеты) — компактнее отступы, у пользователя только аватар;
   ≤ 720px — мобильная: бургер, логотип, колокольчик и нижняя панель (как у остальных страниц).
   Длинная шапка (.navbar-wide — больше 4 пунктов, у администратора) в полном виде
   занимает ~1400px, в компактном ~1000px: компактная — до 1500px, на ≤ 1024px пункты
   уходят в бургер-меню. */

.navbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(19, 24, 35, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid #2A3345;
}

.navbar-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 1200px;
    height: 64px;
    margin: 0 auto;
    padding: 0 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 700;
    color: #F4F6FB;
    text-decoration: none;
}

.brand-text span {
    color: #8B9CFF;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, #4F5FE8, #8B5CF6);
    color: #fff;
    font-size: 15px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.nav-item {
    padding: 8px 12px;
    border-radius: 8px;
    color: #8B95A7;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.nav-item:hover {
    background: #1A2030;
    color: #E6EAF2;
}

.nav-item.active {
    background: rgba(79, 95, 232, 0.16);
    color: #F4F6FB;
}

.nav-item:focus-visible,
.nav-user:focus-visible {
    outline: 2px solid #4F5FE8;
    outline-offset: 2px;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.nav-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.nav-user:hover,
.nav-user.active {
    background: #1A2030;
    border-color: #2A3345;
}

.nav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #4F5FE8;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.nav-user-text {
    display: grid;
    line-height: 1.2;
    max-width: 160px;
}

.nav-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #EEF1F7;
    font-size: 14px;
    font-weight: 600;
}

.nav-user-role {
    color: #8B9CFF;
    font-size: 12px;
}

.icon {
    display: block;
    flex-shrink: 0;
}

/* длинной шапке на широком экране — больше места, чем у контента страниц */
.navbar-wide .navbar-inner {
    max-width: 1400px;
}

@media (max-width: 1500px) {
    .navbar-wide .navbar-inner {
        gap: 12px;
        padding: 0 16px;
    }

    .navbar-wide .nav-item {
        padding: 8px 10px;
    }

    .navbar-wide .nav-user {
        padding: 4px;
    }

    .navbar-wide .nav-user-text {
        display: none;
    }
}

@media (max-width: 1024px) {
    .navbar-inner {
        gap: 12px;
        padding: 0 16px;
    }

    .nav-item {
        padding: 8px 10px;
    }

    .nav-user {
        padding: 4px;
    }

    .nav-user-text {
        display: none;
    }
}

.nav-burger,
.bottom-nav,
.nav-drawer,
.nav-drawer-backdrop {
    display: none;
}

.nav-burger {
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid #2A3345;
    border-radius: 10px;
    color: #E6EAF2;
    cursor: pointer;
}

/* Длинная шапка (7 пунктов у администратора) на узком десктопе — плотнее */
@media (min-width: 1025px) and (max-width: 1140px) {
    .navbar-wide .navbar-inner {
        gap: 8px;
    }

    .navbar-wide .nav-item {
        padding: 8px 7px;
        font-size: 13px;
    }
}

/* Бургер-меню: на телефонах всегда, на планшетах — если пунктов шапки много
   (.navbar-wide, у администратора) и они не помещаются в одну строку */
@media (max-width: 1024px) {
    .navbar-wide .nav-links {
        display: none;
    }

    .navbar-wide .nav-burger {
        display: inline-flex;
    }

    .nav-drawer-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 70;
        background: rgba(11, 14, 20, 0.7);
    }

    .nav-drawer:not([hidden]) {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 80;
        width: min(300px, 85vw);
        padding: calc(16px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom));
        background: #131823;
        border-right: 1px solid #2A3345;
        overflow-y: auto;
        animation: drawer-in 0.2s ease-out;
    }

    body.menu-open {
        overflow: hidden;
    }
}

@media (max-width: 720px) {
    .nav-burger {
        display: inline-flex;
    }
}

.notif {
    position: relative;
}

.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #8B95A7;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.notif-bell:hover,
.notif-bell[aria-expanded="true"] {
    background: #1A2030;
    color: #F4F6FB;
}

/* есть непрочитанные: иконка светлее, счетчик в углу */
.notif-bell.has-unread {
    color: #E6EAF2;
}

.notif-bell:focus-visible,
.nav-burger:focus-visible {
    outline: 2px solid #4F5FE8;
    outline-offset: 2px;
}

.notif-badge {
    position: absolute;
    top: 3px;
    right: 1px;
    box-shadow: 0 0 0 2px #131823;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #4F5FE8;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.notif-badge-sm {
    top: -6px;
    right: -10px;
}

.notif-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 360px;
    background: #131823;
    border: 1px solid #2A3345;
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.notif-dropdown-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #2A3345;
    color: #EEF1F7;
}

.link-btn {
    background: none;
    border: none;
    color: #8B9CFF;
    font-size: 13px;
    cursor: pointer;
}

.link-btn:hover {
    text-decoration: underline;
}

.notif-list {
    max-height: 380px;
    overflow-y: auto;
}

.notif-dropdown-foot {
    display: block;
    padding: 12px;
    text-align: center;
    border-top: 1px solid #2A3345;
    color: #A9B5FF;
    font-size: 14px;
    text-decoration: none;
}

.notif-dropdown-foot:hover {
    background: #1A2030;
}

.notif-empty {
    padding: 24px 14px;
    text-align: center;
    color: #6E7A8E;
    font-size: 14px;
}

.notif-item {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    color: #C3CAD7;
    text-decoration: none;
    border-bottom: 1px solid #1A2030;
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item:hover,
.notif-item:focus-visible {
    background: #1A2030;
    outline: none;
}

.notif-item.is-unread {
    background: rgba(79, 95, 232, 0.07);
}

.notif-dot {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid #3A4560;
}

.notif-item.is-unread .notif-dot {
    background: #8B9CFF;
    border-color: #8B9CFF;
}

.notif-body {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.notif-title {
    font-size: 14px;
    color: #E6EAF2;
}

.notif-item.is-unread .notif-title {
    font-weight: 600;
    color: #F4F6FB;
}

.notif-message {
    font-size: 13px;
    color: #8B95A7;
    overflow-wrap: anywhere;
}

.notif-time {
    font-size: 12px;
    color: #6E7A8E;
}

/* Toast (showToast в common.js): справа сверху, не блокирует интерфейс.
   Цвет — тип сообщения: success — зеленый, error — красный, warning — оранжевый, info — синий */
.toast-stack {
    position: fixed;
    top: 76px;
    right: 16px;
    z-index: 1000;
    display: grid;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}

.toast {
    --toast-accent: #3b82f6;
    display: flex;
    align-items: flex-start;
    background: #131823;
    border: 1px solid #3A4560;
    border-left: 4px solid var(--toast-accent);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
}

.toast-success { --toast-accent: #22c55e; }
.toast-error { --toast-accent: #ef4444; }
.toast-warning { --toast-accent: #f59e0b; }
.toast-info { --toast-accent: #3b82f6; }

.toast.is-visible {
    opacity: 1;
    transform: none;
}

.toast-icon {
    display: flex;
    flex-shrink: 0;
    margin: 12px 0 0 12px;
    color: var(--toast-accent);
}

.toast-body {
    flex: 1;
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px 6px 12px 10px;
    text-align: left;
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
}

button.toast-body {
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    .toast {
        transition: none;
    }
}

.toast-title {
    font-size: 14px;
    font-weight: 600;
    color: #F4F6FB;
}

.toast-message {
    font-size: 13px;
    line-height: 1.4;
    color: #C3CAD7;
    overflow-wrap: anywhere;
}

.toast-title + .toast-message {
    color: #8B95A7;
}

.toast-close {
    padding: 8px 12px;
    background: none;
    border: none;
    color: #8B95A7;
    font-size: 18px;
    cursor: pointer;
}

/* --- Мобильная навигация --- */

@media (max-width: 720px) {
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    .navbar {
        padding-top: env(safe-area-inset-top);
    }

    .navbar-inner {
        height: 56px;
        padding: 0 12px;
    }

    .navbar .nav-links,
    .navbar .nav-user {
        display: none;
    }

    .notif-dropdown {
        position: fixed;
        top: calc(64px + env(safe-area-inset-top));
        left: 8px;
        right: 8px;
        width: auto;
    }

    /* под шапкой (56px + вырез экрана), чтобы не закрывать меню и колокольчик */
    .toast-stack {
        top: calc(64px + env(safe-area-inset-top));
        left: 12px;
        right: 12px;
        width: auto;
    }

    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        padding-bottom: env(safe-area-inset-bottom);
        background: #131823;
        border-top: 1px solid #2A3345;
    }

    .bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 8px 2px;
        min-height: 56px;
        background: none;
        border: none;
        color: #8B95A7;
        font-family: inherit;
        font-size: 11px;
        text-decoration: none;
        cursor: pointer;
    }

    .bottom-nav-item.active {
        color: #F4F6FB;
    }

    .bottom-nav-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 22px;
        font-size: 20px;
        line-height: 1;
    }

}

@keyframes drawer-in {
    from { transform: translateX(-100%); }
    to { transform: none; }
}

.nav-drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 4px 8px 16px;
    border-bottom: 1px solid #2A3345;
    margin-bottom: 8px;
}

.nav-drawer-close {
    background: none;
    border: none;
    color: #8B95A7;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.nav-drawer-links {
    display: grid;
    gap: 2px;
}

.nav-drawer-link {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 10px;
    border-radius: 8px;
    color: #C3CAD7;
    text-decoration: none;
    font-size: 15px;
}

.nav-drawer-link:hover,
.nav-drawer-link.active {
    background: #1A2030;
    color: #F4F6FB;
}

/* --- Главные страницы --- */

.dash-head {
    margin-bottom: var(--space-lg);
}

.dash-section {
    margin-bottom: 32px;
}


.section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.notif-panel {
    padding: 0;
    overflow: hidden;
    margin-bottom: 0;
}

.notif-page {
    display: grid;
    gap: var(--space-lg);
}

.notif-group .section-title {
    margin-bottom: var(--space-xs);
}

.notif-settings {
    margin-top: var(--space-lg);
}

.settings-group-title {
    font-size: 13px;
    color: #8B95A7;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: var(--space-md) 0 var(--space-xs);
}

.notif-option {
    display: flex;
    padding: 6px 0;
}

.inline-field {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.form-group .inline-field input {
    width: 90px;
}

.reminder-hours {
    margin-top: var(--space-sm);
}

/* Список пользователей: вся карточка — ссылка на профиль */
.user-cards {
    display: grid;
    gap: 8px;
}

.user-card-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #131823;
    border: 1px solid #2A3345;
    border-radius: 12px;
    color: #E6EAF2;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.user-card-link:hover {
    background: #1A2030;
    border-color: #3A4560;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.user-card-link:focus-visible {
    outline: 2px solid #4F5FE8;
    outline-offset: 2px;
}

.user-card-main {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.empty-action {
    display: grid;
    justify-items: center;
    gap: 12px;
}

/* --- Статистика ученика --- */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.stats-head {
    margin-bottom: var(--space-lg);
}

.stats-head h2 {
    margin-bottom: 4px;
}

.stats-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: var(--space-md);
    align-items: start;
}

.stats-summary .panel {
    margin-bottom: 0;
}

.section-head {
    flex-wrap: wrap;
}

/* Зоны выполнения (пороги — на сервере): зеленая, желтая, красная, серая */
.zone-high { --zone: #22c55e; --zone-bg: rgba(34, 197, 94, 0.1); }
.zone-medium { --zone: #eab308; --zone-bg: rgba(234, 179, 8, 0.1); }
.zone-low { --zone: #ef4444; --zone-bg: rgba(239, 68, 68, 0.1); }
.zone-no_data { --zone: #3A4560; --zone-bg: transparent; }

.progress[class*="zone-"] .progress-bar {
    background: var(--zone);
}

.zone-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 12px;
    color: #8B95A7;
}

.zone-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--zone);
    vertical-align: -1px;
}

.type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.type-card {
    display: grid;
    gap: 6px;
    align-content: start;
    padding: 12px;
    background: #131823;
    border: 1px solid #2A3345;
    border-left: 4px solid var(--zone);
    border-radius: 10px;
}

.type-card.zone-no_data {
    opacity: 0.7;
}

.type-card .progress {
    margin: 0;
}

.type-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.type-card-number {
    font-weight: 700;
    color: #EEF1F7;
}

.type-card-percent {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--zone);
}

.zone-no_data .type-card-percent {
    color: #6E7A8E;
}

.type-card-details,
.type-card-note {
    font-size: 12px;
    color: #8B95A7;
}

.type-card-note {
    color: #6E7A8E;
}

/* Уровень подготовки */
.tabs {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 10px;
}

.tab {
    padding: 5px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #8B95A7;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.tab.active {
    background: #2A3345;
    color: #F4F6FB;
}

.level-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 12px;
}

.level-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #4F5FE8, #8B5CF6);
    color: #fff;
    font-size: 24px;
    font-weight: 800;
}

.level-title {
    font-size: 18px;
    font-weight: 700;
    color: #F4F6FB;
}

.level-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
    gap: 4px;
    margin: 8px 0 12px;
}

.level-step {
    height: 6px;
    border-radius: 999px;
    background: #2A3345;
}

.level-step.is-done {
    background: #8B9CFF;
}

/* Слабые места */
.weak-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.weak-spot {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 14px;
    background: #131823;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 12px;
}

.weak-spot .progress {
    margin: 0;
}

.weak-spot .btn {
    justify-self: start;
}

.weak-spot-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.weak-spot-percent {
    font-weight: 700;
    color: #f87171;
}

.weak-spot-text {
    font-size: 13px;
    color: #C3CAD7;
    line-height: 1.5;
}

/* Краткая статистика в профиле — ссылка на страницу статистики */
.stats-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}

.stats-link:hover,
.stats-link:focus-visible {
    border-color: #4F5FE8;
    transform: translateY(-1px);
    outline: none;
}

.stats-link-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.stats-link-more {
    font-size: 13px;
    color: #A9B5FF;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .stats-summary {
        grid-template-columns: 1fr;
    }

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

/* --- Вложения задач --- */

.task-attachments {
    margin-top: 4px;
}

.attachments-title {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #8B95A7;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.attachment-list {
    display: grid;
    gap: 6px;
    list-style: none;
}

.attachment-editor:not(:empty) {
    margin-bottom: 10px;
}

.attachment {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 8px;
    font-size: 13px;
}

.attachment.is-error {
    border-color: rgba(220, 38, 38, 0.5);
}

.attachment.is-error .hint {
    color: #fca5a5;
}

.attachment-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #E6EAF2;
}

a.attachment-name {
    color: #A9B5FF;
    text-decoration: none;
}

a.attachment-name:hover {
    text-decoration: underline;
}

.attachment progress {
    width: 80px;
    accent-color: #4F5FE8;
}

.attachment-download {
    padding: 2px 6px;
    border-radius: 6px;
    color: #8B95A7;
    text-decoration: none;
}

.attachment-download:hover {
    background: #1A2030;
    color: #F4F6FB;
}

.file-pick {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1.3;
    cursor: pointer;
}

.file-pick .icon {
    vertical-align: baseline;
}

.file-pick:active {
    transform: translateY(1px);
}

.file-pick:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

.file-pick:focus-within {
    outline: 2px solid #4F5FE8;
    outline-offset: 2px;
}

input[aria-invalid="true"] {
    border-color: #dc2626 !important;
}

/* кнопка выбора файла — label внутри .form-group, общий стиль подписей не применяется */
.form-group .file-pick {
    display: inline-flex;
    margin-bottom: 0;
    color: #E6EAF2;
    font-size: 13px;
    font-weight: 600;
}

.form-group .visually-hidden {
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.exam-settings {
    margin-top: var(--space-sm);
}

/* --- Дедлайн (deadline_picker.js): пресеты, дата и время по МСК, итог --- */
.deadline-picker {
    display: grid;
    gap: 10px;
}

.deadline-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip-btn {
    padding: 6px 12px;
    border: 1px solid #2A3345;
    border-radius: 999px;
    background: transparent;
    color: #C3CAD7;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.chip-btn:hover {
    background: #131823;
}

.chip-btn.is-active {
    background: rgba(79, 95, 232, 0.2);
    border-color: #4F5FE8;
    color: #E4E8FF;
}

.chip-btn:focus-visible {
    outline: 2px solid #4F5FE8;
    outline-offset: 2px;
}

.deadline-fields {
    display: grid;
    grid-template-columns: minmax(0, 220px) minmax(0, 140px);
    gap: 12px;
}

.deadline-fields .form-group {
    margin-bottom: 0;
}

.deadline-fields input {
    color-scheme: dark;
}

.deadline-zone {
    margin: 0;
}

.deadline-summary {
    margin: 0;
    font-size: 14px;
    color: #C3CAD7;
}

.deadline-summary strong {
    color: #F4F6FB;
}

.deadline-summary.is-error {
    color: #fca5a5;
}

@media (max-width: 480px) {
    .deadline-fields {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Аватар пользователя: изображение внутри круга вместо инициалов --- */
.nav-avatar.has-image,
.profile-avatar.has-image {
    background: #131823;
    overflow: hidden;
}

.nav-avatar img,
.profile-avatar img,
img.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

img.user-avatar.avatar-img {
    width: 36px;
    height: 36px;
    background: #131823;
}

.avatar-editor {
    display: grid;
    gap: 8px;
    justify-items: start;
}

.avatar-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.profile-avatar.is-preview {
    outline: 2px dashed #4F5FE8;
    outline-offset: 3px;
}

/* --- Расписание занятий ---
   Календарь месяца (7 колонок), справа — занятия выбранного дня. На телефоне
   в ячейке остаются число и точки занятий, список занятий — под календарем. */

.schedule-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
}

.schedule-head h2 {
    margin-bottom: 12px;
}

.schedule-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.cal-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cal-nav-btn {
    width: 36px;
    padding: 6px 0;
    font-size: 18px;
    line-height: 1;
}

.cal-month {
    min-width: 170px;
    text-align: center;
    font-size: 18px;
    color: #F4F6FB;
}

.schedule-filter select {
    min-width: 200px;
    padding: 8px 34px 8px 12px;
    background: #0B0E14 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238B95A7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px;
    border: 1px solid #2A3345;
    border-radius: 8px;
    color: #E6EAF2;
    font: inherit;
    font-size: 14px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.schedule-filter select:focus-visible {
    outline: 2px solid #4F5FE8;
    outline-offset: 2px;
}

.schedule-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-lg);
    align-items: start;
}

.calendar {
    position: relative;
    background: #131823;
    border: 1px solid #2A3345;
    border-radius: 12px;
    padding: 12px;
}

.cal-weekdays,
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.cal-weekdays {
    margin-bottom: 6px;
}

.cal-weekdays span {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #6E7A8E;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cal-day {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    height: 112px;
    padding: 6px;
    background: #0F131B;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}

.cal-day:hover {
    border-color: #3A4560;
}

.cal-day.is-other-month {
    opacity: 0.45;
}

.cal-day.has-lessons {
    background: linear-gradient(160deg, #23305a, #1a2440);
}

.cal-day.is-selected {
    border-color: #4F5FE8;
    box-shadow: inset 0 0 0 1px #4F5FE8;
}

.cal-day-btn {
    align-self: flex-start;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #C3CAD7;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.cal-day.is-weekend .cal-day-btn {
    color: #8B95A7;
}

.cal-day.is-today .cal-day-btn {
    background: #4F5FE8;
    color: #fff;
}

.cal-day-btn:focus-visible,
.cal-lesson:focus-visible,
.lesson-card:focus-visible {
    outline: 2px solid #A9B5FF;
    outline-offset: 2px;
}

.cal-lessons {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 0;
}

.cal-lesson {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 3px 6px;
    border: none;
    border-left: 3px solid #8B9CFF;
    border-radius: 4px;
    background: rgba(79, 95, 232, 0.18);
    color: #E4E8FF;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cal-lesson:hover {
    background: rgba(79, 95, 232, 0.32);
}

.cal-lesson-title,
.cal-lesson-time {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.25;
}

.cal-lesson-title {
    font-weight: 600;
}

.cal-lesson-time {
    color: #A9B5FF;
}

.cal-lesson.is-cancelled {
    border-left-color: #6E7A8E;
    background: rgba(100, 116, 139, 0.16);
    color: #8B95A7;
}

.cal-lesson.is-cancelled .cal-lesson-title {
    text-decoration: line-through;
}

.cal-more {
    font-size: 11px;
    color: #A9B5FF;
    padding-left: 6px;
}

.cal-dots {
    display: none;
}

.cal-loading {
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 12px;
    color: #8B95A7;
}

.day-panel {
    position: sticky;
    top: 80px;
    margin-bottom: 0;
}

.day-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.day-panel-head .panel-title {
    margin-bottom: 0;
}

.day-empty {
    padding: 12px 0;
}

.lesson-list {
    list-style: none;
    display: grid;
    gap: 8px;
}

.lesson-card {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 10px 12px;
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-left: 4px solid #4F5FE8;
    border-radius: 8px;
    color: #E6EAF2;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s;
}

.lesson-card:hover {
    border-color: #4F5FE8;
}

.lesson-card-time {
    font-size: 13px;
    font-weight: 700;
    color: #A9B5FF;
}

.lesson-card-title {
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.lesson-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 12px;
    color: #8B95A7;
}

.lesson-card.is-cancelled {
    border-left-color: #6E7A8E;
    opacity: 0.75;
}

.lesson-card.is-cancelled .lesson-card-title {
    text-decoration: line-through;
}

.schedule-zone {
    margin-top: 12px;
}

.lesson-details .stat-row span:last-child {
    text-align: right;
    overflow-wrap: anywhere;
}

.lesson-details .hint {
    display: block;
}

/* Ученик занятия и кнопка «Удалить из занятия» (на телефоне кнопка переносится под имя) */
.lesson-student {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.lesson-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 16px;
}

/* Ссылка на занятие: кнопка «Перейти к занятию» и сам адрес (длинный адрес переносится) */
.lesson-item {
    display: grid;
    gap: 6px;
}

.lesson-join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
}

.lesson-join-compact {
    justify-self: start;
}

.lesson-link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

.lesson-link-url {
    max-width: 100%;
    font-size: 12px;
    color: #8B95A7;
    overflow-wrap: anywhere;
    word-break: break-all;
}

@media (max-width: 720px) {
    .lesson-join {
        width: 100%;
        min-height: 44px;
    }

    .lesson-link {
        align-items: stretch;
        width: 100%;
    }
}

.lesson-form-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scope-options,
.repeat-options {
    display: grid;
    gap: 8px;
    margin: 4px 0 16px;
    padding: 12px;
    border: 1px solid #2A3345;
    border-radius: 8px;
}

.scope-options legend,
.repeat-options legend {
    padding: 0 6px;
    font-size: 13px;
    color: #8B95A7;
}

.scope-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.scope-option input,
.weekday-chip input {
    accent-color: #4F5FE8;
}

.repeat-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.repeat-weekly {
    display: grid;
    gap: 12px;
    margin-top: 4px;
}

.repeat-weekly .form-group {
    margin-bottom: 0;
    max-width: 240px;
}

.weekday-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.weekday-chip {
    position: relative;
    cursor: pointer;
}

.weekday-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.weekday-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 36px;
    border: 1px solid #2A3345;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #C3CAD7;
    transition: background 0.15s, border-color 0.15s;
}

.weekday-chip input:checked + span {
    background: #4F5FE8;
    border-color: #4F5FE8;
    color: #fff;
}

.weekday-chip input:focus-visible + span {
    outline: 2px solid #A9B5FF;
    outline-offset: 2px;
}

@media (max-width: 1024px) {
    .schedule-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .day-panel {
        position: static;
    }
}

@media (max-width: 720px) {
    .schedule-head .page-lead {
        margin-bottom: var(--space-sm);
    }

    .calendar {
        padding: 8px;
    }

    .cal-weekdays,
    .cal-grid {
        gap: 2px;
    }

    .cal-day {
        height: 56px;
        align-items: center;
        padding: 4px 2px;
    }

    .cal-day-btn {
        align-self: center;
    }

    .cal-lessons {
        display: none;
    }

    .cal-dots {
        display: flex;
        gap: 3px;
        justify-content: center;
    }

    .cal-dots i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #8B9CFF;
    }

    .cal-dots i.is-cancelled {
        background: #6E7A8E;
    }

    .cal-month {
        min-width: 0;
        font-size: 16px;
    }

    .schedule-toolbar,
    .schedule-filter,
    .schedule-filter select {
        width: 100%;
    }

    .cal-nav {
        width: 100%;
        justify-content: space-between;
    }

    .lesson-form-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lesson-form-row .form-group:last-child {
        grid-column: 1 / -1;
    }
}

/* --- Курсы --- */

.course-hero {
    position: relative;
    margin-bottom: 28px;
    padding: 28px;
    border: 1px solid #2A3345;
    border-radius: 16px;
    background:
        radial-gradient(circle at 85% 15%, rgba(79, 95, 232, 0.28), transparent 45%),
        linear-gradient(160deg, #131823, #131c2e);
    overflow: hidden;
}

.course-hero h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 10px;
    font-size: 28px;
    color: #F4F6FB;
}

.course-hero p {
    max-width: 640px;
    color: #C3CAD7;
    font-size: 15px;
    line-height: 1.6;
}

.course-hero-kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #A9B5FF;
}

.course-hero-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    align-items: center;
}

.course-hero-card {
    display: grid;
    gap: 14px;
    padding: 18px;
    background: rgba(11, 14, 20, 0.7);
    border: 1px solid #2A3345;
    border-radius: 12px;
}

.course-hero-facts {
    list-style: none;
    display: grid;
    gap: 6px;
    font-size: 13px;
    color: #C3CAD7;
}

.course-hero-facts li::before {
    content: "✓";
    margin-right: 8px;
    color: #34d399;
    font-weight: 700;
}

.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-md);
}

.course-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background: linear-gradient(160deg, #131823, #0F131B);
    border: 1px solid #2A3345;
    border-radius: 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.course-card:hover {
    border-color: #4F5FE8;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.course-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.course-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 14px;
    background: rgba(79, 95, 232, 0.18);
    font-size: 30px;
}

.course-hero h2 .course-icon {
    width: 44px;
    height: 44px;
    font-size: 26px;
}

.course-title {
    font-size: 20px;
}

.course-title a {
    color: #F4F6FB;
    text-decoration: none;
}

.course-title a:hover {
    text-decoration: underline;
}

.course-subtitle {
    color: #8B95A7;
    font-size: 14px;
}

.course-description {
    color: #C3CAD7;
    font-size: 14px;
    line-height: 1.55;
}

.course-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
}

.course-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 10px;
}

.course-price-label {
    color: #8B95A7;
    font-size: 13px;
}

.course-price-value {
    font-size: 18px;
    font-weight: 700;
    color: #F4F6FB;
}

.course-price-value.is-free {
    color: #34d399;
}

.course-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.btn-enrolled,
.btn-enrolled:hover {
    background: rgba(16, 185, 129, 0.16);
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: #6ee7b7;
    cursor: default;
}

.course-enrolled-count {
    font-size: 14px;
    color: #C3CAD7;
}

/* Кнопка записи и счетчик — одной группой (заменяются вместе после записи) */
.enroll-control {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Запись недоступна: кнопка видна, но неактивна. Подсказка title — на обертке:
   неактивная кнопка не получает событий мыши */
.btn-disabled-wrap {
    display: inline-block;
    cursor: not-allowed;
}

.btn-unavailable,
.btn-unavailable:hover {
    background: #2A3345;
    color: #8B95A7;
    cursor: not-allowed;
    pointer-events: none;
}

.course-section {
    margin-bottom: 28px;
}

.course-section .section-title {
    margin-top: 0;
}

.module-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.module-card {
    padding: 16px;
    background: #131823;
    border: 1px solid #2A3345;
    border-radius: 12px;
}

.module-number {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #A9B5FF;
}

.module-title {
    margin: 4px 0 10px;
    font-size: 16px;
    color: #F4F6FB;
}

.module-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
}

.module-topics li {
    padding: 3px 9px;
    border-radius: 999px;
    background: #0B0E14;
    border: 1px solid #2A3345;
    font-size: 12px;
    color: #C3CAD7;
}

.module-summary {
    font-size: 13px;
    color: #C3CAD7;
    line-height: 1.5;
}

/* Схема подготовки: шаги со стрелками (на телефоне — столбиком) */
.process-steps {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.process-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 999px;
    font-size: 14px;
}

.process-step:not(:last-child)::after {
    content: "→";
    margin-left: 6px;
    color: #6E7A8E;
}

.process-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #4F5FE8;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.principles {
    list-style: none;
    display: grid;
    gap: 8px;
}

.principles li {
    position: relative;
    padding-left: 26px;
    font-size: 14px;
    line-height: 1.5;
    color: #C3CAD7;
}

.principles li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #34d399;
    font-weight: 700;
}

@media (max-width: 720px) {
    .course-hero {
        padding: 20px;
    }

    .course-hero h2 {
        font-size: 22px;
    }

    .course-hero-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .process-steps {
        flex-direction: column;
        align-items: stretch;
    }

    .process-step {
        border-radius: 10px;
    }

    .process-step:not(:last-child)::after {
        content: "↓";
        margin-left: auto;
    }

    .course-actions .btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* --- Страница «404 Not Found» --- */

.navbar-minimal .navbar-inner {
    justify-content: space-between;
}

.page-not-found {
    padding: 48px 16px;
}

.not-found {
    width: 100%;
    max-width: 520px;
    text-align: center;
}

.not-found-code {
    font-size: clamp(96px, 22vw, 160px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, #8B9CFF, #4F5FE8 45%, #22d3ee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    user-select: none;
}

.not-found-code span {
    display: inline-block;
    /* у вложенного элемента свой фон: иначе текст с background-clip остается прозрачным */
    background: linear-gradient(135deg, #A9B5FF, #4F5FE8);
    -webkit-background-clip: text;
    background-clip: text;
    animation: not-found-float 3s ease-in-out infinite;
}

@keyframes not-found-float {
    50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
    .not-found-code span {
        animation: none;
    }
}

.not-found h1 {
    margin: 16px 0 10px;
    font-size: 26px;
    color: #F4F6FB;
}

.not-found p {
    color: #8B95A7;
    font-size: 15px;
    line-height: 1.6;
}

.not-found-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

@media (max-width: 480px) {
    .not-found-actions .btn {
        flex: 1 1 100%;
    }
}

/* --- Администрирование: карточки разделов ---
   Вся карточка — ссылка на раздел (растянутая ссылка заголовка), быстрые действия
   лежат поверх нее и остаются отдельными ссылками. */

.page-tasks .admin-head {
    display: block;
}

.admin-head h2 {
    margin-bottom: 12px;
}

.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: var(--space-md);
}

.admin-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 120px;
    padding: 18px;
    background: linear-gradient(160deg, #131823, #0F131B);
    border: 1px solid #2A3345;
    border-radius: 14px;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.admin-card:hover {
    border-color: #4F5FE8;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.admin-card:focus-within {
    border-color: #4F5FE8;
}

.admin-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(79, 95, 232, 0.16);
    font-size: 22px;
}

.admin-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.admin-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.admin-card-link {
    color: #F4F6FB;
    text-decoration: none;
}

.admin-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.admin-card-link:focus-visible {
    outline: none;
}

.admin-card-link:focus-visible::after {
    outline: 2px solid #A9B5FF;
    outline-offset: 2px;
}

.admin-card-title .badge {
    font-size: 12px;
}

.admin-card-text {
    font-size: 13px;
    line-height: 1.5;
    color: #8B95A7;
}

.admin-card-links {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.admin-card-action {
    padding: 4px 10px;
    border: 1px solid #2A3345;
    border-radius: 999px;
    background: #0B0E14;
    color: #C9D1FF;
    font-size: 12px;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.admin-card-action:hover,
.admin-card-action:focus-visible {
    border-color: #4F5FE8;
    background: rgba(79, 95, 232, 0.16);
    outline: none;
}

.admin-card-arrow {
    align-self: center;
    color: #6E7A8E;
    font-size: 18px;
    transition: transform 0.15s, color 0.15s;
}

.admin-card:hover .admin-card-arrow {
    color: #A9B5FF;
    transform: translateX(3px);
}

@media (max-width: 480px) {
    .admin-cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-card {
        min-height: 0;
        padding: 14px;
    }
}

/* --- Свой аватар: вся область — кнопка выбора изображения ---
   Наведение (или фокус с клавиатуры) затемняет изображение и показывает камеру.
   На устройствах без наведения камера видна всегда — маленьким значком в углу. */

.avatar-button {
    position: relative;
    width: 72px;
    height: 72px;
    padding: 0;
    border: none;
    font-family: inherit;
    font-size: 30px;
    cursor: pointer;
}

.avatar-button.has-image {
    overflow: visible;
}

.avatar-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(11, 14, 20, 0.6);
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

.avatar-button:hover .avatar-overlay,
.avatar-button:focus-visible .avatar-overlay {
    opacity: 1;
}

.avatar-button:active .avatar-overlay {
    opacity: 1;
    background: rgba(11, 14, 20, 0.75);
}

.avatar-button:focus-visible {
    outline: 2px solid #A9B5FF;
    outline-offset: 3px;
}

@media (hover: none) {
    .avatar-overlay {
        inset: auto -2px -2px auto;
        width: 28px;
        height: 28px;
        background: #4F5FE8;
        border: 2px solid #131823;
        opacity: 1;
    }

    .avatar-overlay svg {
        width: 15px;
        height: 15px;
    }

    .avatar-button:active {
        transform: scale(0.96);
    }

    .avatar-button:active .avatar-overlay {
        background: #4350D6;
    }
}

/* --- Файлы развернутого ответа --- */

.answer-files {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: -4px 0 16px;
}

.answer-files-label {
    font-size: 13px;
    color: #8B95A7;
}

.answer-file-list {
    flex-basis: 100%;
}

.answer-file-list:empty {
    display: none;
}

.answer-files > .hint {
    flex-basis: 100%;
}

.answer-attachments {
    margin: 0 0 12px;
}


/* --- Решение работы по одному заданию (TaskRunner) --- */
/* Состояния заданий: смысл цвета одинаков в кнопках, легенде и значке задания */
.state-empty { --state: #3A4560; --state-bg: transparent; --state-text: #C3CAD7; }
.state-saved { --state: #22c55e; --state-bg: rgba(34, 197, 94, 0.12); --state-text: #4ade80; }
.state-dirty { --state: #f59e0b; --state-bg: transparent; --state-text: #fbbf24; }
.state-files { --state: #60a5fa; --state-bg: rgba(59, 130, 246, 0.12); --state-text: #93c5fd; }
.state-error { --state: #ef4444; --state-bg: rgba(239, 68, 68, 0.15); --state-text: #f87171; }
.state-review { --state: #f59e0b; --state-bg: rgba(245, 158, 11, 0.15); --state-text: #fbbf24; }
.state-correct { --state: #22c55e; --state-bg: rgba(34, 197, 94, 0.2); --state-text: #4ade80; }
.state-partial { --state: #eab308; --state-bg: rgba(234, 179, 8, 0.15); --state-text: #facc15; }
.state-wrong { --state: #ef4444; --state-bg: rgba(239, 68, 68, 0.15); --state-text: #f87171; }
.state-missed { --state: #3A4560; --state-bg: transparent; --state-text: #8B95A7; }

.task-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.task-nav-btn {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 2px solid var(--state);
    border-radius: 10px;
    background: var(--state-bg);
    color: var(--state-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}

.task-nav-btn:hover {
    transform: translateY(-1px);
}

.task-nav-btn.is-current {
    box-shadow: 0 0 0 2px #0B0E14, 0 0 0 4px #4F5FE8;
}

/* несохраненный ответ — точка в углу */
.task-nav-btn.state-dirty::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--state);
}

.task-nav-btn:focus-visible {
    outline: 2px solid #A9B5FF;
    outline-offset: 2px;
}

.task-nav-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-bottom: var(--space-md);
}

.task-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border: 2px solid var(--state);
    border-radius: 3px;
    background: var(--state-bg);
    vertical-align: -1px;
}

.task-runner-task {
    padding: 20px;
}

.task-runner-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 12px;
}

.task-runner-head h3 {
    flex: 1 1 260px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.task-state-badge {
    padding: 3px 10px;
    border: 1px solid var(--state);
    border-radius: 999px;
    background: var(--state-bg);
    color: var(--state-text);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.task-save-row {
    margin-top: 0;
}

.task-help-actions,
.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.result-actions {
    margin-bottom: var(--space-md);
}

.task-runner-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: var(--space-sm);
    border-top: 1px solid #2A3345;
}

.work-submit {
    margin-top: var(--space-lg);
}

.self-review-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 12px;
    margin-bottom: 8px;
}

/* --- XP и уровень подготовки --- */
.xp-total {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #2A3345;
    border-radius: 10px;
    background: #0B0E14;
    color: #E6EAF2;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s;
}

.xp-total:hover,
.xp-total:focus-visible {
    border-color: #4F5FE8;
}

.xp-label {
    font-size: 12px;
    font-weight: 700;
    color: #A9B5FF;
    letter-spacing: 0.05em;
}

.xp-value {
    font-size: 28px;
    font-weight: 800;
    color: #F4F6FB;
    font-variant-numeric: tabular-nums;
}

.xp-of {
    font-size: 16px;
    font-weight: 600;
    color: #8B95A7;
}

.xp-link {
    margin-left: auto;
    font-size: 13px;
    color: #A9B5FF;
}

.xp-progress {
    height: 10px;
}

.xp-rules {
    margin-top: 12px;
    font-size: 13px;
    color: #8B95A7;
}

.xp-rules summary {
    cursor: pointer;
    color: #C3CAD7;
}

.xp-rules ul {
    margin: 8px 0 0 18px;
}

.xp-list {
    list-style: none;
    max-height: 60vh;
    overflow-y: auto;
}

.xp-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
    padding: 10px 0;
    border-bottom: 1px solid #2A3345;
}

.xp-amount {
    font-weight: 700;
    color: #4ade80;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.xp-item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}

.xp-item-name {
    color: #EEF1F7;
}

.xp-item-date {
    white-space: nowrap;
}

/* --- Прогноз экзамена --- */
.forecast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}

.forecast-card {
    padding: 14px;
    border: 1px solid #2A3345;
    border-radius: 10px;
    background: #0B0E14;
}

.forecast-card.is-empty {
    border-style: dashed;
}

.forecast-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 12px;
}

.forecast-exam {
    font-size: 15px;
    font-weight: 700;
    color: #F4F6FB;
}

.forecast-main {
    margin-top: 6px;
    font-size: 26px;
    font-weight: 800;
    color: #F4F6FB;
    font-variant-numeric: tabular-nums;
}

.forecast-of {
    font-size: 15px;
    font-weight: 600;
    color: #8B95A7;
}

.forecast-sub {
    color: #A9B5FF;
    font-size: 14px;
    margin-bottom: 4px;
}

.forecast-note {
    margin: 8px 0 4px;
    font-weight: 600;
    color: #C3CAD7;
}

/* Текущий уровень по прогнозу: цвет зоны (.zone-high / .zone-medium / .zone-low) */
.forecast-level {
    display: inline-block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--zone);
}

/* Таблица учеников в статистике назначений: заголовки переносятся, чтобы все колонки
   (включая прогноз) помещались в ширину страницы; значения — в одну строку */
.students-overview th,
.students-overview th.num {
    white-space: normal;
    vertical-align: bottom;
}

.students-overview th,
.students-overview td {
    padding-left: 8px;
    padding-right: 8px;
}

/* длинное имя ученика переносится, а не расширяет таблицу */
.students-overview .select-card-name {
    white-space: normal;
    overflow-wrap: break-word;
}

/* Прогноз в таблице учеников: компактная плашка цвета уровня */
.forecast-cell {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--zone);
    background: var(--zone-bg);
    color: #EEF1F7;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* перенос — только между названием экзамена и значением */
.forecast-cell-exam,
.forecast-cell-value {
    white-space: nowrap;
}

.forecast-cell-exam {
    color: #8B95A7;
    font-weight: 500;
}

.forecast-cell-mark {
    color: var(--zone);
}

/* --- Бесконечный рандом и официальные варианты --- */
.random-filters {
    max-width: 320px;
}

.random-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: var(--space-md);
}

.random-pager .pagination {
    margin: 0;
}

.year-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.year-group {
    margin-bottom: 0;
    padding: 0;
}

.year-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
    list-style: none;
}

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

.year-summary::after {
    content: "▾";
    margin-left: auto;
    color: #8B95A7;
    transition: transform 0.15s;
}

.year-group:not([open]) .year-summary::after {
    transform: rotate(-90deg);
}

.year-title {
    font-size: 18px;
    font-weight: 700;
    color: #F4F6FB;
}

.variant-list {
    list-style: none;
    padding: 0 20px 14px;
}

.variant-row,
.variant-admin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.variant-row {
    padding: 10px 0;
    border-top: 1px solid #2A3345;
}

.variant-row > div,
.variant-admin-row > div {
    min-width: 0;
}

.variant-name {
    font-weight: 600;
    color: #EEF1F7;
}

.form-row-actions {
    align-self: end;
    margin-top: 0;
}

/* Строка полей с кнопкой отправки в конце (официальные варианты): поля и кнопка выровнены
   по нижнему краю — по линии полей ввода, даже если подпись поля переносится на две строки.
   Отступ снизу — у строки, а не у полей, поэтому кнопка не опускается ниже полей.
   Не помещается — элементы переносятся, кнопка остается справа от последнего поля или
   уходит на новую строку целиком. */
.form-row-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: var(--space-md);
}

.form-row-inline > .form-group {
    flex: 1 1 120px;
    min-width: 0;
    margin-bottom: 0;
}

.form-row-inline > .form-group-wide {
    flex: 3 1 200px;
}

.form-row-inline > .form-row-actions {
    flex: 0 0 auto;
}

.modal-footer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* --- Статистика назначений (администратор) --- */
.stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: var(--space-md);
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    border: 1px solid #2A3345;
    border-left: 4px solid var(--card-accent, #4F5FE8);
    border-radius: 10px;
    background: #131823;
}

.stat-card.tone-good { --card-accent: #22c55e; }
.stat-card.tone-info { --card-accent: #60a5fa; }
.stat-card.tone-bad { --card-accent: #ef4444; }
.stat-card.tone-warn { --card-accent: #f59e0b; }

.stat-card-icon {
    font-size: 18px;
}

.stat-card-value {
    font-size: 26px;
    font-weight: 800;
    color: #F4F6FB;
    font-variant-numeric: tabular-nums;
}

.stat-card-label {
    font-size: 13px;
    color: #8B95A7;
}

.stats-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.week-chart {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: end;
    gap: 6px;
    height: 160px;
    margin-bottom: 10px;
}

.week-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-width: 0;
}

.week-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    flex: 1;
    width: 100%;
}

.week-bar {
    width: 40%;
    max-width: 14px;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
}

.week-assigned,
.week-dot-assigned {
    background: #4F5FE8;
}

.week-completed,
.week-dot-completed {
    background: #22c55e;
}

.week-label {
    margin-top: 4px;
    font-size: 10px;
    color: #8B95A7;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .stats-columns {
        grid-template-columns: 1fr;
    }

    .task-runner-task {
        padding: 14px;
    }

    .task-nav-btn {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .forecast-main {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .xp-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .xp-item-date {
        grid-column: 2;
    }

    .week-label {
        font-size: 9px;
    }

    .variant-admin-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* --- Чат ученика с кураторами (/messages) ---
   Слева — диалоги, справа — сообщения выбранного диалога и поле ввода.
   На телефоне видна одна колонка: список или открытый диалог (кнопка «←» — к списку). */

/* Заголовок страницы: название и пояснение — с тем же отступом, что у других разделов */
.chat-head h2 {
    margin-bottom: 12px;
}

.chat-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
}

.chat-threads {
    padding: 8px;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

.chat-thread-list {
    display: grid;
    gap: 4px;
}

.chat-thread-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.chat-thread-item:hover {
    background: #1A2030;
}

.chat-thread-item.is-active {
    background: rgba(79, 95, 232, 0.16);
    border-color: rgba(79, 95, 232, 0.45);
}

.chat-thread-main {
    display: grid;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.chat-thread-name {
    font-weight: 600;
    color: #F4F6FB;
    overflow-wrap: anywhere;
}

.chat-thread-preview {
    font-size: 13px;
    color: #8B95A7;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-thread-side {
    display: grid;
    justify-items: end;
    gap: 4px;
    flex-shrink: 0;
}

.chat-unread {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #4F5FE8;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 420px;
    max-height: calc(100vh - 220px);
    padding: 16px;
}

.chat-thread-head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: 12px;
    border-bottom: 1px solid #2A3345;
}

.chat-peer {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

/* имя собеседника и его роль */
.chat-peer > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.chat-back {
    display: none;
}

.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 4px;
}

.chat-empty {
    margin: auto;
    text-align: center;
}

.chat-earlier {
    text-align: center;
}

.chat-msg {
    align-self: flex-start;
    max-width: min(640px, 85%);
    padding: 10px 12px;
    border-radius: 12px;
    background: #1A2030;
    border: 1px solid #2A3345;
}

.chat-msg.is-own {
    align-self: flex-end;
    background: rgba(79, 95, 232, 0.18);
    border-color: rgba(79, 95, 232, 0.45);
}

.chat-msg.is-appeal {
    border-left: 3px solid #f59e0b;
}

.chat-msg-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
    color: #8B95A7;
}

.chat-msg-author {
    font-weight: 600;
    color: #C3CAD7;
}

.chat-msg-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.chat-msg-context {
    margin-bottom: 6px;
    font-size: 13px;
    color: #C3CAD7;
    overflow-wrap: anywhere;
}

.chat-msg-quote {
    margin: 0 0 6px;
    padding: 4px 8px;
    border-left: 2px solid #6E7A8E;
    font-size: 13px;
    color: #8B95A7;
    overflow-wrap: anywhere;
}

/* длинные сообщения и слова без пробелов переносятся, переносы строк сохраняются */
.chat-msg-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.chat-msg-actions {
    margin-top: 6px;
}

.chat-readonly {
    text-align: center;
}

.chat-composer {
    display: grid;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid #2A3345;
}

.chat-composer-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.chat-composer textarea {
    flex: 1;
    min-height: 44px;
    max-height: 200px;
    padding: 10px 12px;
    resize: vertical;
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 8px;
    color: #E6EAF2;
    font: inherit;
    font-size: 14px;
}

.chat-composer textarea:focus {
    outline: none;
    border-color: #4F5FE8;
}

.chat-reply-to {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: #0B0E14;
    font-size: 13px;
    color: #8B95A7;
}

.chat-reply-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Отправитель: сообщения куратора и ученика различаются акцентом слева и подписью роли */
.chat-msg.is-from-curator:not(.is-own) {
    border-left: 3px solid #22c55e;
}

.chat-msg.is-from-student:not(.is-own):not(.is-appeal) {
    border-left: 3px solid #6E7A8E;
}

.chat-msg-role {
    padding: 0 6px;
    border-radius: 6px;
    background: #0B0E14;
    font-size: 11px;
    color: #8B95A7;
}

.chat-msg-status {
    margin-left: auto;
    color: #8B95A7;
}

/* непрочитанные до открытия диалога — подсветка до следующего обновления */
.chat-msg.is-unread {
    box-shadow: 0 0 0 1px rgba(79, 95, 232, 0.55);
    background: #2c3a55;
}

.chat-msg-kind {
    font-size: 12px;
    color: #8B95A7;
    align-self: center;
}

.chat-msg-context {
    display: grid;
    gap: 4px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #0B0E14;
    border: 1px solid #2A3345;
}

.chat-context-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.chat-context-label {
    flex-shrink: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6E7A8E;
}

.chat-context-row.is-unavailable {
    color: #8B95A7;
    font-style: italic;
}

.chat-context-actions {
    margin-top: 4px;
}

/* Разделители: день и «Новые сообщения» */
.chat-day,
.chat-new-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0;
    font-size: 12px;
    color: #8B95A7;
}

.chat-day::before,
.chat-day::after,
.chat-new-divider::before,
.chat-new-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid #2A3345;
}

.chat-new-divider {
    color: #A9B5FF;
}

.chat-new-divider::before,
.chat-new-divider::after {
    border-top-color: rgba(79, 95, 232, 0.55);
}

.chat-composer[aria-busy="true"] textarea {
    opacity: 0.7;
}

.chat-send-error {
    margin: 0;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.45);
    color: #fca5a5;
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* планшет: список диалогов уже, сообщения шире */
@media (max-width: 1024px) and (min-width: 721px) {
    .chat-layout {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: var(--space-md);
    }

    .chat-msg {
        max-width: 92%;
    }
}

@media (max-width: 720px) {
    .chat-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .chat-composer-row {
        align-items: stretch;
    }

    .chat-composer-row .btn {
        min-height: 44px;
    }

    .chat-layout.is-thread-open .chat-threads,
    .chat-layout:not(.is-thread-open) .chat-thread {
        display: none;
    }

    .chat-back {
        display: inline-block;
    }

    .chat-threads {
        max-height: none;
    }

    /* диалог — на высоту экрана над нижней панелью: сообщения прокручиваются внутри */
    .chat-thread {
        min-height: 360px;
        height: calc(100vh - 230px);
        height: calc(100dvh - 230px);
        max-height: none;
    }

    .chat-msg {
        max-width: 92%;
    }
}

/* Опасная зона профиля (удаление пользователя) — визуально отделена от обычных действий */
.danger-zone {
    border-color: rgba(220, 38, 38, 0.45);
}

.danger-zone .panel-title {
    color: #fca5a5;
}

/* Банк заданий: задание, открытое по ссылке из обращения в чате (?task_id=) */
.focused-task {
    margin-bottom: var(--space-lg);
    border-color: rgba(79, 95, 232, 0.55);
}

.focused-task .task-card {
    margin-bottom: 0;
}

/* Профиль: блок «Telegram-уведомления» и его состояния */
.tg-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-weight: 600;
    color: #F4F6FB;
}

.tg-dot {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #6E7A8E;
}

.tg-status.is-pending .tg-dot {
    background: #f59e0b;
}

.tg-status.is-connected .tg-dot {
    background: #22c55e;
}

.tg-status.is-error .tg-dot {
    background: #ef4444;
}

.tg-settings .form-actions {
    flex-wrap: wrap;
}

.tg-problem {
    overflow-wrap: anywhere;
}

/* --- Домашняя работа в PDF (/admin/homeworks/{id}/pdf) ---
   Документ сохраняется в PDF из окна печати браузера. Две версии:
   .pdf-print — для принтера: белый лист, черный текст, без фонов и теней, поле ответа под заданием;
   .pdf-notes — конспект в стиле сайта (те же карточки .homework-task, .rich-content, бейджи).
   В PDF каждое задание начинается с новой страницы.
   На экране — предпросмотр с панелью действий; панель и сообщения на бумагу не попадают. */

.homework-actions {
    flex-wrap: wrap;
}

.pdf-choice {
    display: grid;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.pdf-choice-option {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #2A3345;
    border-radius: 10px;
    background: #0B0E14;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.pdf-choice-option:hover,
.pdf-choice-option:focus-visible {
    border-color: #4F5FE8;
    background: rgba(79, 95, 232, 0.12);
    outline: none;
}

.pdf-choice-title {
    font-weight: 600;
    color: #F4F6FB;
}

.pdf-choice-footer {
    justify-content: flex-end;
}

.pdf-page {
    display: block;
    page: homework-print;
}

.pdf-page.pdf-notes {
    page: homework-notes;
}

.pdf-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 12px 24px;
    background: #131823;
    border-bottom: 1px solid #2A3345;
}

.pdf-toolbar-text {
    display: grid;
    gap: 2px;
    min-width: 0;
    color: #F4F6FB;
}

.pdf-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.pdf-toolbar .btn {
    margin: 0;
}

.pdf-sheet {
    max-width: 210mm;
    margin: var(--space-xl) auto;
    padding: 0 16px;
}

.pdf-status {
    margin-bottom: var(--space-md);
}

.pdf-doc {
    overflow-wrap: anywhere;
}

.pdf-doc-head > * + * {
    margin-top: 8px;
}

.pdf-kicker {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pdf-title {
    font-size: 26px;
    line-height: 1.25;
}

.pdf-description {
    white-space: pre-wrap;
    line-height: 1.5;
}

.pdf-task {
    margin-top: var(--space-md);
}

/* задание короче примерно половины листа не разрывается между страницами (homework_pdf.js) */
.pdf-task.pdf-task-keep {
    break-inside: avoid;
}

.pdf-task-head {
    display: grid;
    gap: 6px;
    break-after: avoid;
}

.pdf-task-title {
    font-size: 16px;
    line-height: 1.35;
}

.pdf-empty {
    font-style: italic;
}

/* условие: длинный код переносится, таблицы и изображения не выходят за лист */
.pdf-doc .rich-content pre,
.pdf-doc .rich-content pre code {
    white-space: pre-wrap;
    overflow: visible;
}

.pdf-doc .rich-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.pdf-doc .rich-content pre code {
    border: none;
}

.pdf-doc .rich-content .rc-table {
    overflow: visible;
}

.pdf-doc .rich-content table {
    max-width: 100%;
}

.pdf-doc .rich-content tr,
.pdf-doc .rc-figure {
    break-inside: avoid;
}

.pdf-doc .rc-figure img {
    max-height: 230mm;
    object-fit: contain;
}

/* Версия для печати: на экране — белый лист */
.pdf-print .pdf-doc {
    padding: 15mm 14mm;
    background: #fff;
    color: #000;
    font-size: 15px;
}

.pdf-print .pdf-doc-head {
    padding-bottom: 12px;
    border-bottom: 2px solid #000;
}

.pdf-print .pdf-facts,
.pdf-print .pdf-task-meta {
    font-size: 13px;
}

.pdf-student {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px;
    padding-top: 8px;
    font-size: 14px;
}

.pdf-fill {
    flex: 1 1 60mm;
    height: 7mm;
    border-bottom: 1px solid #000;
}

.pdf-fill.pdf-fill-short {
    flex: 0 1 35mm;
}

.pdf-print .pdf-task {
    gap: 10px;
    margin-top: 18px;
    padding: 12px 0 0;
    background: none;
    border: none;
    border-top: 1.5px solid #000;
    border-radius: 0;
}

/* первое задание отделено линией шапки документа */
.pdf-print .pdf-task:first-child {
    border-top: none;
    padding-top: 0;
}

.pdf-print .pdf-task-title,
.pdf-print .rich-content,
.pdf-print .rich-content * {
    color: #000 !important;
}

.pdf-print .rich-content th,
.pdf-print .rich-content pre,
.pdf-print .rich-content mark,
.pdf-print .rich-content .rc-figure img {
    background: none !important;
}

.pdf-print .rich-content td,
.pdf-print .rich-content th,
.pdf-print .rich-content pre {
    border-color: #000;
}

.pdf-print .rich-content blockquote {
    border-left-color: #000;
}

.pdf-print .rich-content hr {
    border-top-color: #000;
}

/* выделение маркером — подчеркиванием, без заливки */
.pdf-print .rich-content mark {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.pdf-print .rich-content .rc-figure img,
.pdf-print .rich-content pre,
.pdf-print .rich-content code {
    border-radius: 0;
}

.pdf-answer {
    display: flex;
    flex-direction: column;
    padding: 6px 10px 10px;
    border: 1px solid #000;
    break-inside: avoid;
    break-before: avoid;
}

.pdf-answer-label {
    font-size: 13px;
    font-weight: 600;
}

.pdf-answer-line {
    display: block;
    height: 9mm;
    border-bottom: 1px solid #999;
}

.pdf-answer-short {
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
    padding: 0 10px 8px;
}

.pdf-answer-short .pdf-answer-line {
    flex: 1;
    height: 12mm;
}

/* Ответы ко всем заданиям в конце документа (homework_pdf.js) */
.pdf-answers {
    margin-top: var(--space-lg);
}

.pdf-answers-title {
    font-size: 20px;
    margin-bottom: 10px;
}

.pdf-answers-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.pdf-answers-table th,
.pdf-answers-table td {
    padding: 6px 10px;
    border: 1px solid #000;
    text-align: left;
    vertical-align: top;
}

.pdf-answers-table tr {
    break-inside: avoid;
}

.pdf-answers-num {
    width: 3em;
    text-align: center !important;
}

/* критерии развернутого ответа бывают многострочными */
.pdf-answers-value {
    width: 45%;
    white-space: pre-wrap;
    font-weight: 600;
}

.pdf-print .pdf-answers,
.pdf-print .pdf-answers * {
    color: #000;
}

.pdf-notes .pdf-answers,
.pdf-notes .pdf-answers * {
    color: #fff;
}

.pdf-notes .pdf-answers-table th,
.pdf-notes .pdf-answers-table td {
    border-color: #2A3345;
}

/* Версия для конспекта: цвета и карточки сайта.
   Фон листа браузер берет у корневого элемента: без print-color-adjust на <html> при выключенной
   «Печати фона» (так по умолчанию) лист печатается белым и белая шапка на нем не видна.
   Поэтому фон задан и <html>, и самой шапке — белые название и дата всегда на темном фоне. */
html.pdf-root-notes {
    background: #0B0E14;
}

.pdf-notes .pdf-doc-head {
    padding-bottom: var(--space-md);
    border-bottom: 1px solid #2A3345;
    background: #0B0E14;
}

/* карточка, перенесенная на следующую страницу, — с рамкой и отступами на каждой части */
.pdf-notes .pdf-task {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* текст вне условий заданий (шапка, подписи, бейджи) — белый */
.pdf-notes .pdf-doc-head,
.pdf-notes .pdf-doc-head *,
.pdf-notes .pdf-task-head,
.pdf-notes .pdf-task-head *,
.pdf-notes .pdf-empty {
    color: #fff;
}

@media (max-width: 720px) {
    .pdf-toolbar {
        padding: 10px 16px;
    }

    .pdf-sheet {
        margin-top: var(--space-md);
    }

    .pdf-print .pdf-doc {
        padding: 20px 16px;
    }
}

@page homework-print {
    size: A4;
    margin: 15mm 14mm 16mm;

    @bottom-right {
        content: counter(page) " / " counter(pages);
        font-size: 9pt;
        color: #000;
    }
}

@page homework-notes {
    size: A4;
    margin: 12mm 12mm 14mm;
    background: #0B0E14;

    @bottom-right {
        content: counter(page) " / " counter(pages);
        font-size: 9pt;
        color: #fff;
    }
}

@media print {
    .pdf-toolbar,
    .pdf-status,
    .toast-stack {
        display: none !important;
    }

    .pdf-page {
        min-height: 0;
    }

    .pdf-sheet {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .pdf-print,
    .pdf-print .pdf-doc {
        padding: 0;
        background: #fff;
    }

    /* каждое задание — с новой страницы; разделитель между заданиями — сам разрыв страницы */
    .pdf-task + .pdf-task {
        break-before: page;
        margin-top: 0;
    }

    .pdf-print .pdf-task + .pdf-task {
        padding-top: 0;
        border-top: none;
    }

    /* ответы — на отдельных страницах в конце, их легко не раздавать ученикам */
    .pdf-answers {
        break-before: page;
        margin-top: 0;
    }

    /* конспект печатается с фоном и цветами сайта */
    html.pdf-root-notes,
    .pdf-notes,
    .pdf-notes * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* --- Задачи-программы: редактор кода, тесты, результат автопроверки --- */

.code-editor-holder {
    border: 1px solid #2A3345;
    border-radius: 8px;
    overflow: hidden;
    background: #0F131B;
}

.code-editor-holder:focus-within {
    border-color: #4F5FE8;
    box-shadow: 0 0 0 2px rgba(79, 95, 232, 0.35);
}

.code-editor-holder .cm-editor {
    min-height: 180px;
    max-height: 60vh;
}

.code-editor-holder .cm-editor.cm-focused {
    outline: none;
}

.code-editor-holder .cm-scroller {
    overflow: auto;
}

/* запасное поле, если редактор не загрузился */
.code-textarea {
    width: 100%;
    min-height: 180px;
    padding: 10px 12px;
    border: none;
    background: #0F131B;
    color: #E6EAF2;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    tab-size: 4;
    resize: vertical;
}

.code-output,
.code-answer-view {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

.code-output {
    margin: 4px 0 0;
    padding: 8px 10px;
    max-height: 240px;
    overflow: auto;
    background: #0F131B;
    border: 1px solid #2A3345;
    border-radius: 6px;
    color: #E6EAF2;
}

.code-section {
    margin: 4px 0 16px;
    padding: 16px;
    border: 1px solid #2A3345;
    border-radius: 10px;
    background: rgba(11, 14, 20, 0.5);
}

.code-tests-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin-bottom: 10px;
}

.code-tests-head h4 {
    font-size: 15px;
    color: #EEF1F7;
}

.test-case-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.test-case {
    padding: 12px;
    border: 1px solid #2A3345;
    border-radius: 8px;
    background: #131823;
}

.test-case-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 8px;
}

.test-case-tools {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.test-case-io {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.test-case-io .form-group {
    margin-bottom: 0;
}

.test-case-io textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

.test-case-actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-top: 12px;
}

.code-check {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #2A3345;
    border-radius: 10px;
    background: rgba(11, 14, 20, 0.6);
}

.code-check.state-passed { border-color: rgba(34, 197, 94, 0.5); }
.code-check.state-failed,
.code-check.state-error { border-color: rgba(239, 68, 68, 0.5); }

.code-check-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.code-check-title {
    font-weight: 600;
    color: #EEF1F7;
}

.code-check > .hint {
    margin-top: 6px;
}

.code-tests {
    list-style: none;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.code-test-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 4px 0;
    font-size: 14px;
}

summary.code-test-head {
    cursor: pointer;
}

.code-test-icon {
    width: 1.2em;
    font-weight: 700;
}

.code-test.is-ok .code-test-icon { color: #4ade80; }
.code-test.is-fail .code-test-icon { color: #f87171; }

.code-test-verdict {
    color: #8B95A7;
}

.code-test-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 4px 0 8px 1.7em;
}

@media (max-width: 720px) {
    .test-case-io,
    .code-test-body {
        grid-template-columns: 1fr;
    }

    .test-case-tools {
        margin-left: 0;
    }

    .code-editor-holder .cm-editor {
        min-height: 140px;
    }
}

/* --- Полноэкранный просмотр изображений --- */

/* изображения условий открываются на весь экран (common.js, openImageViewer) */
.rich-content img[role="button"] {
    cursor: zoom-in;
}

.rich-content img[role="button"]:focus-visible {
    outline: 3px solid #8B9CFF;
    outline-offset: 3px;
}

.rc-image-broken img {
    cursor: default;
    min-height: 48px;
    min-width: 120px;
    background: #131823;
}

/* фоновая страница не прокручивается, пока открыт просмотр */
html.has-image-viewer,
html.has-image-viewer body {
    overflow: hidden;
}

.image-viewer {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: #F4F6FB;
    overflow: hidden;
    cursor: zoom-out;
}

.image-viewer::backdrop {
    background: rgba(2, 6, 23, 0.92);
}

.image-viewer-figure {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: max(56px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
             max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

/* максимально крупно, без растягивания и обрезки: пропорции сохраняются */
.image-viewer-img {
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    width: auto;
    height: auto;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    cursor: default;
    touch-action: pinch-zoom;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}

.image-viewer-caption {
    max-width: min(900px, 100%);
    font-size: 14px;
    color: #C3CAD7;
    text-align: center;
    cursor: default;
}

.image-viewer-error {
    padding: 16px 20px;
    border-radius: 8px;
    background: #131823;
    color: #fca5a5;
}

.image-viewer-close {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 1;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(248, 250, 252, 0.35);
    border-radius: 50%;
    background: rgba(11, 14, 20, 0.85);
    color: #F4F6FB;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.image-viewer-close:hover {
    background: rgba(79, 95, 232, 0.6);
}

.image-viewer-close:focus-visible {
    outline: 3px solid #8B9CFF;
    outline-offset: 2px;
}

@media print {
    .image-viewer {
        display: none;
    }
}

.hint.is-warning {
    color: #fbbf24;
}

/* --- Просмотр условия задачи (окно поверх страницы) --- */

.task-preview {
    display: grid;
    gap: var(--space-sm);
    max-height: min(70vh, 720px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.task-preview-title {
    font-weight: 600;
    color: #EEF1F7;
}

/* кнопка «Условие» в карточке окна выбора задач */
.select-card .btn[data-item-action] {
    flex-shrink: 0;
}

/* --- Кнопки: загрузка и основное действие «Решить» --- */

.btn.is-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: progress;
}

.btn-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* «Решить»: главное действие страницы — крупнее обычной кнопки, во всю ширину панели,
   те же цвет, скругление и шрифт, что у .btn */
.btn-solve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 16px;
    box-shadow: 0 6px 16px rgba(79, 95, 232, 0.3);
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}

.btn-solve:hover:not(:disabled) {
    background: #4350D6;
    box-shadow: 0 8px 20px rgba(79, 95, 232, 0.4);
    transform: translateY(-1px);
}

.btn-solve:active:not(:disabled) {
    transform: none;
}

.btn-solve:focus-visible {
    outline: 3px solid #A9B5FF;
    outline-offset: 2px;
}

.btn-solve:disabled {
    background: #2A3345;
    color: #8B95A7;
    box-shadow: none;
    cursor: not-allowed;
}

.btn-solve.is-loading:disabled {
    background: #4350D6;
    color: #fff;
    cursor: progress;
}

.btn-solve-icon {
    font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
    .btn-solve,
    .btn-solve:hover:not(:disabled) {
        transition: none;
        transform: none;
    }

    .btn-spinner {
        animation-duration: 2s;
    }
}

/* --- Практика: «Составить свой вариант» ---
   Широкий экран: список заданий и панель варианта рядом (панель компактная и прилипает при прокрутке,
   длинный список номеров прокручивается внутри нее). Планшет и телефон — одна колонка,
   панель сверху и сворачивается. */

.builder-modes {
    margin-bottom: var(--space-md);
}

.builder-modes .source-btn {
    text-align: center;
}

.builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    grid-template-areas: "main side";
    gap: var(--space-lg);
    align-items: start;
}

.builder-main {
    grid-area: main;
    min-width: 0;
}

.builder-side {
    grid-area: side;
    position: sticky;
    top: 16px;
    display: grid;
    gap: var(--space-sm);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-bottom: 0;
    padding: 16px;
}

.builder-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
}

.builder-side-head .panel-title {
    margin: 0;
    font-size: 16px;
}

.builder-side-toggle {
    display: none;
}

.builder-side-body {
    display: grid;
    gap: var(--space-md);
}

.builder-task {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-sm);
    align-items: start;
    padding: 14px 16px;
    background: #131823;
    border: 1px solid #2A3345;
    border-radius: 12px;
    transition: border-color 0.15s;
}

.builder-task.is-selected {
    border-color: #4F5FE8;
    background: linear-gradient(0deg, rgba(79, 95, 232, 0.08), rgba(79, 95, 232, 0.08)), #131823;
}

.builder-task-body {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.builder-task-title {
    font-size: 15px;
    color: #EEF1F7;
    overflow-wrap: anywhere;
}

.builder-task-preview {
    color: #8B95A7;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.builder-task-actions {
    display: grid;
    gap: 6px;
    justify-items: stretch;
}

.builder-task-actions .btn {
    min-height: 36px;
    white-space: nowrap;
}

.builder-task-actions .is-added {
    border-color: #4F5FE8;
    color: #C9D1FF;
}

.task-list.is-loading,
#taskList.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* счетчики количества по номерам */
.builder-counts {
    display: grid;
    gap: var(--space-xs);
}

/* длинный список номеров (ЕГЭ — 27) прокручивается отдельно: состав и «Решить» остаются на виду */
.count-rows {
    display: grid;
    gap: 6px;
    max-height: min(46vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

.count-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 10px;
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 8px;
}

.count-row.is-empty {
    opacity: 0.55;
}

.count-row.is-invalid {
    border-color: #f87171;
}

.count-available {
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.count-row .counter,
.count-row .counter input {
    min-width: 0;
}

.count-row.is-invalid .count-available {
    color: #fca5a5;
}

.count-label {
    font-weight: 700;
    color: #E6EAF2;
    white-space: nowrap;
}

.counter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.counter-btn {
    width: 36px;
    height: 36px;
    border: 1px solid #2A3345;
    border-radius: 8px;
    background: #131823;
    color: #E6EAF2;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}

.counter-btn:hover:not(:disabled) {
    border-color: #4F5FE8;
}

.counter-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.counter input {
    width: 52px;
    height: 36px;
    padding: 0 4px;
    text-align: center;
    background: #131823;
    border: 1px solid #2A3345;
    border-radius: 8px;
    color: #E6EAF2;
    font-size: 15px;
    -moz-appearance: textfield;
}

.counter input::-webkit-outer-spin-button,
.counter input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.count-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    margin-top: 4px;
}

.builder-counts .btn-block {
    margin-top: 0;
    min-height: 44px;
}

/* состав варианта */
.builder-variant {
    display: grid;
    gap: var(--space-xs);
    padding-top: var(--space-sm);
    border-top: 1px solid #2A3345;
}

.builder-variant-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
}

.builder-variant-head h4 {
    font-size: 14px;
    color: #EEF1F7;
}

.variant-list {
    display: grid;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.variant-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 8px;
}

.variant-position {
    color: #8B95A7;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.variant-item-body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.variant-item-title {
    font-size: 13px;
    font-weight: 600;
    color: #E6EAF2;
    overflow-wrap: anywhere;
}

.variant-item .task-meta {
    gap: 6px;
    font-size: 11px;
    color: #8B95A7;
}

.variant-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.variant-item-actions .chip-remove {
    width: 32px;
    height: 32px;
    font-size: 18px;
}

.variant-item-actions .chip-remove:focus-visible,
.counter-btn:focus-visible {
    outline: 2px solid #4F5FE8;
    outline-offset: 2px;
}

.variant-empty {
    padding: 8px 0;
}

.builder-solve-hint:empty {
    display: none;
}

/* «Решить» прилипает к низу прокручиваемой панели */
.builder-side .btn-solve {
    position: sticky;
    bottom: 0;
}

@media (max-width: 960px) {
    .builder-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "side" "main";
    }

    .builder-side {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .count-rows {
        max-height: none;
        overflow: visible;
    }

    /* на телефоне внизу экрана — панель навигации: кнопка остается в конце панели варианта */
    .builder-side .btn-solve {
        position: static;
    }

    .builder-side-toggle {
        display: inline-block;
        min-height: 36px;
    }

    .builder-side.is-collapsed .builder-side-body {
        display: none;
    }
}

@media (max-width: 600px) {
    /* два способа — рядом и компактно, чтобы список заданий был ближе */
    .builder-modes {
        grid-template-columns: 1fr 1fr;
    }

    .builder-modes .source-btn {
        padding: 12px 8px;
    }

    .builder-modes .source-title {
        font-size: 14px;
    }

    .builder-modes .source-hint {
        display: none;
    }

    .builder-task {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .builder-task-actions {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
    }

    .builder-task-actions .btn {
        white-space: normal;
    }

    .count-row {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .counter input {
        width: 40px;
    }

    .counter-btn {
        width: 36px;
        height: 40px;
    }
}

/* --- Практика: банк заданий (решение по одному) --- */

.bank-answer {
    margin-top: var(--space-md);
}

.bank-actions {
    flex-wrap: wrap;
}

.bank-actions .btn {
    min-height: 40px;
}

.bank-verdict {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.bank-solution {
    display: grid;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding: var(--space-md);
    background: #0F131B;
    border: 1px solid #2A3345;
    border-left: 3px solid #4F5FE8;
    border-radius: 10px;
}

.bank-solution-block h4 {
    font-size: 13px;
    color: #C9D1FF;
    margin-bottom: 6px;
}

.bank-solution-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.bank-reference-code {
    max-height: 420px;
}

.kum-file-row {
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--space-xs);
}


/* =====================================================================
   Дизайн 2026: цвета «Графит» + форма и раскладка «Яркого».
   Токены и компоненты. Слой стоит в конце файла и переопределяет базовые стили выше.
   ===================================================================== */

:root {
    --bg: #0B0E14;
    --surface: #131823;
    --surface-2: #1A2030;
    --field: #0F131B;
    --line: #222A38;
    --line-strong: #2A3345;
    --text: #E6EAF2;
    --text-strong: #F4F6FB;
    --text-muted: #8B95A7;
    --accent: #4F5FE8;
    --accent-hover: #5D6CF0;
    --accent-soft: #1E2547;
    --accent-text: #A9B5FF;
    --font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
    font-family: var(--font);
    font-size: 15.5px;
    line-height: 1.5;
    background: var(--bg);
    color: var(--text);
}

code,
pre,
.mono {
    font-family: var(--font-mono);
}

/* --- Иконки (static/icons.svg) и цветные плашки --- */

.icon {
    display: inline-block;
    vertical-align: -0.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 16px;
    background: var(--accent-soft);
    color: var(--accent-text);
}

.icon-chip .icon {
    display: block;
}

.icon-chip-xl {
    width: 96px;
    height: 96px;
    border-radius: 30px;
}

.icon-chip.tone-indigo { background: #1E2547; color: #A9B5FF; }
.icon-chip.tone-orange { background: #2E2118; color: #FFB37A; }
.icon-chip.tone-violet { background: #261E3D; color: #C4A5FF; }
.icon-chip.tone-green { background: #12302A; color: #5EE0B5; }
.icon-chip.tone-yellow { background: #2D2614; color: #F5C76B; }
.icon-chip.tone-pink { background: #33192A; color: #FF8FC0; }

.with-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.attachment-icon {
    display: inline-flex;
    color: var(--accent-text);
}

/* --- Шапка: отдельная скругленная карточка --- */

.navbar {
    padding: 14px 24px 8px;
    background: rgba(11, 14, 20, 0.86);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: none;
}

.navbar-inner {
    max-width: 1180px;
    height: auto;
    min-height: 64px;
    gap: 22px;
    padding: 10px 12px 10px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
}

.navbar-wide .navbar-inner {
    max-width: 1400px;
}

.brand {
    gap: 10px;
    font-size: 20px;
    font-weight: 900;
    color: var(--text-strong);
}

.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    transform: rotate(-6deg);
}

.brand-mark .icon {
    display: block;
    stroke-width: 3;
}

.nav-item {
    padding: 9px 16px;
    border-radius: 12px;
    color: #9AA4B5;
    font-size: 14.5px;
    font-weight: 700;
}

.nav-item:hover {
    background: var(--surface-2);
    color: var(--text);
}

.nav-item.active {
    background: var(--accent-soft);
    color: #C9D1FF;
    font-weight: 800;
}

.notif-bell {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--text);
}

.notif-bell:hover,
.notif-bell[aria-expanded="true"] {
    background: #222A3A;
}

.notif-badge {
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    background: #E8590C;
    font-weight: 900;
    box-shadow: 0 0 0 2px var(--surface);
}

.nav-user {
    border-radius: 16px;
}

.nav-user:hover,
.nav-user.active {
    background: var(--surface-2);
    border-color: var(--line-strong);
}

.nav-avatar {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: #2E2118;
    color: #FFB37A;
    font-size: 14px;
    font-weight: 900;
}

.nav-avatar img {
    border-radius: inherit;
}

.nav-user-name {
    font-weight: 800;
}

.nav-user-role {
    color: var(--text-muted);
}

.nav-burger {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border-color: var(--line-strong);
    background: var(--surface-2);
}

.notif-dropdown {
    border-radius: 20px;
}

@media (max-width: 1500px) {
    .navbar-wide .navbar-inner {
        gap: 12px;
    }

    .navbar-wide .nav-item {
        padding: 8px 10px;
    }
}

@media (min-width: 1025px) and (max-width: 1140px) {
    .navbar-wide .nav-item {
        padding: 8px 7px;
        font-size: 13px;
    }
}

@media (max-width: 1024px) {
    .navbar-inner {
        gap: 12px;
    }

    .nav-item {
        padding: 8px 10px;
    }
}

@media (max-width: 720px) {
    .navbar {
        padding: calc(8px + env(safe-area-inset-top)) 10px 6px;
    }

    .navbar-inner {
        min-height: 56px;
        padding: 6px 8px 6px 12px;
        border-radius: 18px;
    }

    .bottom-nav {
        background: var(--surface);
        border-top: 1px solid var(--line);
    }

    .bottom-nav-item {
        font-weight: 800;
    }

    .bottom-nav-item.active {
        color: #C9D1FF;
    }
}

.nav-drawer-link {
    border-radius: 12px;
    font-weight: 700;
}

.nav-drawer-link .icon {
    color: var(--accent-text);
}

.nav-drawer-link:hover,
.nav-drawer-link.active {
    background: var(--accent-soft);
}

/* --- Страница: ширина, заголовки, вкладки разделов --- */

.container {
    max-width: 1180px;
    padding: 28px 24px 64px;
}

.page-tasks h2,
.page-profile h2,
.page-title-row h2 {
    font-size: 30px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text-strong);
}

.section-title {
    font-size: 19px;
    font-weight: 900;
}

.panel-title {
    font-size: 18px;
    font-weight: 900;
}

.panel-title-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-title-icon .icon-chip {
    width: 34px;
    height: 34px;
    border-radius: 11px;
}

.page-lead,
.page-head .page-description {
    font-size: 15px;
    color: var(--text-muted);
}

.page-head .breadcrumb,
.breadcrumb {
    font-weight: 800;
}

.subnav {
    width: fit-content;
    max-width: 100%;
    gap: 4px;
    padding: 6px;
    margin-bottom: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
}

.subnav-link {
    padding: 9px 11px;
    border-radius: 12px;
    color: #9AA4B5;
    font-weight: 800;
}

.subnav-link:hover {
    background: var(--surface-2);
}

.subnav-link.active {
    background: var(--accent-soft);
    color: #C9D1FF;
}

/* --- Карточки --- */

.panel,
.task-card,
.homework-task,
.profile-card,
.modal {
    background: var(--surface);
    border-color: var(--line);
    border-radius: 24px;
}

.panel,
.homework-task {
    padding: 24px;
}

.task-card {
    padding: 18px 20px;
}

.task-card h3,
.homework-task h3 {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--text-strong);
}

a.task-card:hover,
.user-card-link:hover {
    border-color: #3A4560;
    background: var(--surface);
}

.user-card-link {
    border-radius: 20px;
    background: var(--surface);
    border-color: var(--line);
}

.modal {
    padding: 24px;
}

.alert {
    border-radius: 14px;
    font-weight: 700;
}

.progress {
    height: 8px;
    background: var(--line);
}

/* --- Кнопки --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.btn-sm {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 13.5px;
}

.btn-lg {
    min-height: 52px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 900;
}

.btn-outline {
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    color: var(--text);
}

.btn-outline:hover {
    background: #222A3A;
    border-color: #3A4560;
}

.btn-outline-danger {
    background: transparent;
}

/* --- Поля ввода --- */

.form-group label {
    font-size: 13.5px;
    font-weight: 800;
    color: #C3CAD7;
}

.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.form-group textarea,
.form-group select {
    min-height: 46px;
    padding-top: 11px;
    padding-bottom: 11px;
    padding-left: 14px;
    background-color: var(--field);
    border-color: var(--line-strong);
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
}

.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
.form-group textarea {
    padding-right: 14px;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(79, 95, 232, 0.25);
}

/* --- Бейджи статусов --- */

.badge {
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 800;
    white-space: nowrap;
}

.badge-pending { background: #2E2118; color: #FFB37A; }
.badge-in_progress { background: #1E2547; color: #A9B5FF; }
.badge-completed { background: #12302A; color: #5EE0B5; }
.badge-assignees { background: var(--surface-2); color: #C3CAD7; }
.badge-danger { background: #351A1E; color: #FF8A8A; }

/* --- Таблицы --- */

.table th {
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.table th,
.table td {
    border-color: var(--line);
}

/* --- Плитки разделов: иконка в цветной плашке, текст слева --- */

.big-tiles {
    gap: 16px;
    margin-bottom: 24px;
}

.big-tiles-auto {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
}

.big-tile {
    aspect-ratio: auto;
    min-height: 150px;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    padding: 20px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    color: var(--text);
}

.big-tile:hover:not(:disabled) {
    border-color: #3A4560;
}

.big-tile-icon {
    font-size: 36px;
}

.big-tile-title {
    font-size: 17px;
    overflow-wrap: normal;
    hyphens: auto;
    font-weight: 900;
    line-height: 1.25;
    color: var(--text-strong);
}

.big-tile-hint {
    font-size: 13.5px;
    color: var(--text-muted);
}

/* место под счетчик в углу — только у плитки со счетчиком */
.big-tile-count ~ .big-tile-title {
    padding-right: 36px;
}

.big-tile-count {
    top: 20px;
    right: 20px;
    background: #2E2118;
    color: #FFB37A;
    font-weight: 900;
}

.big-tile-accent {
    background: var(--accent);
    border-color: var(--accent);
}

.big-tile-accent:hover:not(:disabled) {
    border-color: var(--accent-hover);
}

.big-tile-accent .big-tile-title {
    color: #fff;
}

.big-tile-accent .big-tile-hint {
    color: #E4E8FF;
}

.big-tile-accent .icon-chip {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.big-tiles-quad .big-tile-title {
    font-size: clamp(14px, 9cqi, 17px);
}

/* --- Баннер главных страниц --- */

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    padding: 32px 36px;
    border-radius: 28px;
    background: var(--accent);
    color: #fff;
}

.hero::before,
.hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.hero::before {
    right: -60px;
    top: -80px;
    width: 280px;
    height: 280px;
    background: rgba(255, 255, 255, 0.08);
}

.hero::after {
    right: 140px;
    bottom: -120px;
    width: 220px;
    height: 220px;
    background: rgba(255, 255, 255, 0.06);
}

.hero-body {
    flex: 1 1 420px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.hero-chip {
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 13px;
    font-weight: 800;
}

.hero-chip:empty {
    display: none;
}

.page-tasks .hero .hero-title {
    font-size: 34px;
    font-weight: 900;
    line-height: 1.15;
    color: #fff;
}

.hero-text {
    font-size: 16px;
    color: #E4E8FF;
}

.hero-progress {
    max-width: 420px;
    height: 10px;
    margin-top: 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

.hero-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 5px;
    background: #F5C76B;
    transition: width 0.3s;
}

.hero-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 16px;
    background: #fff;
    color: #1B2240;
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
    transition: transform 0.15s;
}

.hero-action:hover {
    transform: translateY(-1px);
}

.hero-action:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 720px) {
    .hero {
        padding: 22px 20px;
        border-radius: 24px;
    }

    .page-tasks .hero .hero-title {
        font-size: 26px;
    }

    .hero-action {
        width: 100%;
        justify-content: center;
    }
}

/* --- Главные: сроки и события --- */

.dash-columns {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .dash-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dash-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.dash-columns .dash-card {
    margin-bottom: 0;
}

.dash-card .section-head {
    align-items: center;
}

.dash-card .panel-title {
    margin-bottom: 0;
}

.dash-card .notif-panel {
    margin: 0;
    background: none;
    border: none;
    border-radius: 0;
}

.deadline-list {
    display: grid;
    gap: 10px;
}

.deadline-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s;
}

.deadline-row:hover {
    background: #1F2638;
}

.deadline-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.date-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: none;
    border-radius: 16px;
    background: var(--field);
    border: 1px solid var(--line-strong);
    line-height: 1.05;
}

.date-box b {
    font-size: 20px;
    font-weight: 900;
    color: var(--text-strong);
}

.date-box span {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-muted);
}

.deadline-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.deadline-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.deadline-meta {
    font-size: 13.5px;
    color: var(--text-muted);
}

@media (max-width: 480px) {
    .deadline-row {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* срок — отдельной строкой под названием */
    .deadline-main {
        flex-basis: calc(100% - 70px);
    }

    .deadline-row .badge {
        margin-left: 70px;
    }
}

/* телефон: плитки разделов — по две в ряд, компактнее */
@media (max-width: 720px) {
    .big-tiles-auto {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .big-tiles-auto .big-tile {
        min-height: 0;
        gap: 10px;
        padding: 14px;
        border-radius: 20px;
    }

    .big-tiles-auto .icon-chip {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .big-tiles-auto .big-tile-title {
        font-size: 15.5px;
    }

    .big-tiles-auto .big-tile-hint {
        font-size: 12.5px;
    }

    .big-tiles-auto .big-tile-count {
        top: 14px;
        right: 14px;
    }
}

/* --- Администрирование, способ добавления задач, карточки статистики --- */

.admin-card {
    gap: 16px;
    padding: 22px;
    background: var(--surface);
    border-color: var(--line);
    border-radius: 24px;
}

.admin-card:hover {
    border-color: #3A4560;
}

.admin-card-title {
    font-size: 17px;
    font-weight: 900;
}

.admin-card-text {
    font-size: 13.5px;
}

.admin-card-action {
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 12px;
    background: var(--surface-2);
    font-size: 13px;
    font-weight: 800;
}

.source-btn {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    padding: 16px 18px;
    text-align: left;
    background: var(--surface-2);
    border-radius: 20px;
}

.source-btn .icon-chip {
    grid-row: span 2;
}

.source-title {
    font-weight: 800;
}

.stat-card {
    border-radius: 18px;
    border-left-width: 1px;
    background: var(--surface);
}

.stat-card .icon-chip {
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
    border-radius: 13px;
}

.stat-card-value {
    font-weight: 900;
}

/* --- Вход --- */

.login-layout {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    min-height: 100vh;
}

.login-promo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 1 1 480px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    min-height: 420px;
    margin: 16px;
    padding: 40px;
    border-radius: 32px;
    background: var(--accent);
    color: #fff;
}

.login-promo::before,
.login-promo::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
}

.login-promo::before {
    right: -90px;
    top: -90px;
    width: 360px;
    height: 360px;
    background: rgba(255, 255, 255, 0.08);
}

.login-promo::after {
    left: -60px;
    bottom: -120px;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.06);
}

.brand-lg {
    font-size: 24px;
    color: #fff;
}

.brand-lg .brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #fff;
    color: var(--accent);
}

.login-promo-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 480px;
}

.login-promo-title {
    font-size: 40px;
    font-weight: 900;
    line-height: 1.1;
}

.login-promo-text {
    font-size: 17px;
    color: #E4E8FF;
}

.login-promo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.login-promo-tags span {
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 13.5px;
    font-weight: 800;
}

.login-main {
    flex: 1 1 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}

.login-main .auth-card {
    max-width: 400px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
}

.login-main .auth-card h1 {
    font-size: 30px;
    font-weight: 900;
}

.login-main .auth-card .subtitle {
    font-size: 15px;
}

.login-note {
    margin-top: 16px;
    text-align: center;
    font-size: 13.5px;
}

@media (max-width: 720px) {
    .login-promo {
        min-height: 0;
        gap: 20px;
        margin: 12px;
        padding: 28px;
        border-radius: 26px;
    }

    .login-promo-title {
        font-size: 28px;
    }

    .login-main {
        padding: 24px 16px 40px;
    }
}

/* --- 404 и «Нет доступа» --- */

.not-found {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 32px;
}

.not-found-code,
.not-found-code span {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--accent);
    font-weight: 900;
}

.not-found h1 {
    font-weight: 900;
}

.toast {
    border-radius: 16px;
}

/* Уведомления и выпадающее окно колокольчика — под шапкой-карточкой (она выше прежней) */
.toast-stack {
    top: 100px;
}

@media (max-width: 720px) {
    .toast-stack,
    .notif-dropdown {
        top: calc(78px + env(safe-area-inset-top));
    }
}

/* Восемь плиток (главная администратора): 4 + 4, на планшете — по три, на телефоне — по две */
.big-tiles-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 800px) {
    .big-tiles-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .big-tiles-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =====================================================================
   Дизайн 2026: общие элементы страниц по макетам (заголовок с действиями,
   вкладки-переключатели, цветные метки, полоска прогресса, строки списков).
   ===================================================================== */

.page-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.page-head-row h2 {
    margin: 0;
}

.page-head-row .page-lead {
    margin: 6px 0 0;
}

.ui-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
    padding: 6px;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    box-sizing: border-box;
}

.ui-tab {
    padding: 9px 16px;
    border: none;
    border-radius: 12px;
    background: none;
    color: #9AA4B5;
    font: inherit;
    font-size: 14.5px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.ui-tab:hover {
    color: var(--text);
    background: var(--surface-2);
}

.ui-tab.active,
.ui-tab[aria-selected="true"] {
    background: var(--accent-soft);
    color: #C9D1FF;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--surface-2);
    color: #C3CAD7;
    border: none;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
    white-space: nowrap;
}

.chip.tone-indigo { background: #1E2547; color: #A9B5FF; }
.chip.tone-orange { background: #2E2118; color: #FFB37A; }
.chip.tone-green { background: #12302A; color: #5EE0B5; }
.chip.tone-violet { background: #261E3D; color: #C4A5FF; }
.chip.tone-yellow { background: #2D2614; color: #F5C76B; }
.chip.tone-pink { background: #33192A; color: #FF8FC0; }
.chip.tone-red { background: #351A1E; color: #FF8A8A; }
.chip.tone-plain { background: none; color: #C3CAD7; }

.icon-chip.tone-red { background: #351A1E; color: #FF8A8A; }
.icon-chip.tone-gray { background: var(--surface-2); color: #C3CAD7; }

.bar {
    height: 8px;
    border-radius: 4px;
    background: var(--line);
    overflow: hidden;
}

.bar > span {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--accent);
}

.bar.tone-green > span { background: #3DBE8B; }
.bar.tone-yellow > span { background: #F5C76B; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    gap: 16px;
}

/* строка списка: метка слева, текст, статус справа */
.list-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s;
}

a.list-row:hover {
    background: #1F2638;
    color: var(--text);
}

a.list-row:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.list-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.list-row-title {
    font-weight: 800;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.list-row-meta {
    font-size: 13.5px;
    color: var(--text-muted);
}

.list-row .chip-num {
    min-width: 44px;
    justify-content: center;
}

.card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.card-head .panel-title {
    margin: 0;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stack-lg {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.stack > *,
.stack-lg > * {
    margin-top: 0;
    margin-bottom: 0;
}

/* сворачиваемая карточка «Выполненные …»: заголовок и «Показать» справа */
.fold-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
}

.fold-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 24px;
    list-style: none;
    cursor: pointer;
    border-radius: 24px;
    font-weight: 900;
    color: var(--text-strong);
}

.fold-card > summary::-webkit-details-marker {
    display: none;
}

.fold-card > summary::after {
    content: "Показать";
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 800;
}

.fold-card[open] > summary::after {
    content: "Скрыть";
}

.fold-card > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.fold-card-body {
    padding: 0 24px 24px;
}

.fold-card-plain {
    background: none;
    border: none;
}

.fold-card-plain > summary {
    padding: 12px 0 0;
}

.fold-card-plain .fold-card-body {
    padding: 12px 0 0;
}

/* --- Домашние работы ученика: карточки с прогрессом --- */

a.task-card.hw-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border-radius: 24px;
    color: var(--text);
}

.hw-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.hw-card-title {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.3;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.hw-card-desc {
    font-size: 14px;
    color: var(--text-muted);
}

.hw-card-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
}

.hw-card-progress-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-muted);
}

.due-soon { color: #FFB37A; }
.due-over { color: #FF8A8A; }
.due-done { color: #5EE0B5; }

a.task-card.list-row {
    display: flex;
    padding: 14px 16px;
    border: none;
    border-radius: 18px;
    background: var(--surface-2);
}

a.task-card.list-row:hover {
    background: #1F2638;
}

/* --- Шапка по макету: ширина как у контента, имя и роль видны на десктопе --- */

.navbar-wide .navbar-inner {
    max-width: 1180px;
    gap: 22px;
    padding: 10px 12px 10px 18px;
}

.navbar-wide .nav-item {
    padding: 9px 16px;
}

.navbar-wide .nav-user,
.nav-user {
    padding: 0;
    border: none;
    background: none;
}

.nav-user:hover,
.nav-user.active {
    background: none;
}

.nav-user:hover .nav-avatar,
.nav-user.active .nav-avatar {
    box-shadow: 0 0 0 2px var(--accent);
}

.nav-avatar {
    width: 44px;
    height: 44px;
    font-size: 15px;
}

.navbar-wide .nav-user-text {
    display: grid;
}

.nav-user-name {
    font-size: 14px;
    color: var(--text);
}

.nav-user-role {
    font-size: 12.5px;
}

.nav-actions {
    gap: 10px;
}

@media (max-width: 1180px) {
    .navbar-wide .navbar-inner,
    .navbar-inner {
        gap: 12px;
    }

    .navbar-wide .nav-item,
    .nav-item {
        padding: 8px 10px;
    }

    .navbar-wide .nav-user-text,
    .nav-user-text {
        display: none;
    }
}

/* --- Уведомления: иконка по типу, заголовок, текст, время справа --- */

.container-narrow {
    max-width: 860px;
}

.link-accent {
    color: var(--accent-text);
    font-size: 14.5px;
    font-weight: 800;
    text-decoration: none;
}

.link-accent:hover {
    color: #C9D1FF;
}

.notif-item {
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    border-bottom: none;
    border-radius: 18px;
    color: var(--text);
}

.notif-item .icon-chip {
    width: 44px;
    height: 44px;
    border-radius: 14px;
}

.notif-item:hover,
.notif-item:focus-visible {
    background: var(--surface-2);
}

.notif-item.is-unread {
    background: #161C2E;
}

.notif-body {
    flex: 1;
    gap: 0;
}

.notif-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-strong);
}

.notif-item.is-unread .notif-title {
    font-weight: 800;
}

.notif-message {
    font-size: 14px;
    color: var(--text-muted);
}

.notif-time {
    font-size: 12.5px;
    color: var(--text-muted);
    white-space: nowrap;
}

.notif-page-panel {
    padding: 10px;
}

.notif-page-panel .notif-item + .notif-item {
    margin-top: 2px;
}

.notif-group-title {
    margin: 0;
    padding: 14px 14px 4px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.notif-page-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
}

.notif-page-foot .link-accent {
    margin-left: auto;
}

/* выпадающее окно колокольчика и события на главных — компактнее */
.notif-list .notif-item,
.dash-card .notif-item {
    padding: 12px;
}

.notif-list {
    padding: 6px;
}

.dash-card .notif-panel .notif-item {
    padding: 12px 0;
    background: none;
}

.dash-card .notif-panel .notif-item .icon-chip {
    width: 40px;
    height: 40px;
    border-radius: 13px;
}

/* на главных время — под текстом события, как в макете */
.notif-time-below {
    display: none;
}

.dash-card .notif-panel .notif-time {
    display: none;
}

.dash-card .notif-panel .notif-time.notif-time-below {
    display: block;
    margin-top: 2px;
}

.notif-dropdown-head {
    padding: 14px 16px;
    border-bottom-color: var(--line);
}

.notif-dropdown-foot {
    border-top-color: var(--line);
    font-weight: 800;
}

.link-btn {
    color: var(--accent-text);
    font-weight: 800;
}

/* --- Аватары: скругленный квадрат с цветом, как в макете --- */

.user-avatar {
    border-radius: 14px;
    background: #1E2547;
    color: #A9B5FF;
    font-weight: 900;
}

.deadline-row .user-avatar {
    width: 44px;
    height: 44px;
}

.avatar-tone-1 { background: #12302A; color: #5EE0B5; }
.avatar-tone-2 { background: #261E3D; color: #C4A5FF; }
.avatar-tone-3 { background: #2E2118; color: #FFB37A; }

.dash-card .notif-panel {
    padding: 0;
    box-shadow: none;
}

/* --- Решение работы (TaskRunner) по макету --- */

/* цвета состояний в стиле макета: решено — мягкий индиго, проверено — зеленый и т. д. */
.task-nav-btn.state-empty,
.task-nav-btn.state-missed { --state-bg: var(--surface-2); --state-text: #8B95A7; }
.task-nav-btn.state-saved,
.task-nav-btn.state-files { --state-bg: #1E2547; --state-text: #A9B5FF; }
.task-nav-btn.state-dirty { --state-bg: #2E2118; --state-text: #FFB37A; }
.task-nav-btn.state-error,
.task-nav-btn.state-wrong { --state-bg: #351A1E; --state-text: #FF8A8A; }
.task-nav-btn.state-review,
.task-nav-btn.state-partial { --state-bg: #2D2614; --state-text: #F5C76B; }
.task-nav-btn.state-correct { --state-bg: #12302A; --state-text: #5EE0B5; }

.task-nav {
    gap: 8px;
    margin: 0;
}

.task-nav-btn {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 900;
}

.task-nav-btn.is-current {
    background: var(--accent);
    color: #fff;
    box-shadow: none;
}

.task-nav-btn.state-dirty::after {
    top: 4px;
    right: 4px;
    background: #FFB37A;
}

.task-nav-legend {
    gap: 4px 14px;
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

.task-nav-legend:empty {
    display: none;
}

.task-dot {
    border: none;
    border-radius: 4px;
    background: var(--state-bg);
}

.task-dot.state-empty,
.task-dot.state-missed { background: var(--line-strong); }
.task-dot.state-saved,
.task-dot.state-files { background: #A9B5FF; }
.task-dot.state-dirty { background: #FFB37A; }
.task-dot.state-error,
.task-dot.state-wrong { background: #FF8A8A; }
.task-dot.state-review,
.task-dot.state-partial { background: #F5C76B; }
.task-dot.state-correct { background: #5EE0B5; }

.runner-grid-card {
    margin-bottom: 24px;
    padding: 18px;
}

/* список заданий слева (домашняя работа) */
.runner-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.runner-aside {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 18px;
}

.runner-layout > .task-runner-current {
    flex: 999 1 560px;
    min-width: 0;
}

.runner-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 6px 12px;
}

.runner-progress-line {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 800;
}

.runner-progress-line span + span {
    color: var(--text-muted);
}

.task-nav-list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
}

.task-nav-btn.task-nav-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: auto;
    flex: none;
    padding: 10px 12px;
    border-radius: 14px;
    background: none;
    color: #C3CAD7;
    font-size: 14.5px;
    font-weight: 700;
    text-align: left;
}

.task-nav-btn.task-nav-row:hover {
    transform: none;
    background: var(--surface-2);
    color: var(--text);
}

.task-nav-btn.task-nav-row.is-current {
    background: var(--accent-soft);
    color: var(--text-strong);
}

.task-nav-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 10px;
    background: var(--state-bg);
    color: var(--state-text);
    font-weight: 900;
    font-size: 14px;
}

.task-nav-row.is-current .task-nav-num {
    background: var(--accent);
    color: #fff;
}

.task-nav-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-nav-row.state-dirty::after {
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

.runner-aside .task-nav-legend {
    padding: 0 6px;
}

/* текущее задание */
.task-runner-task {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}

.task-runner-task > * {
    margin-top: 0;
    margin-bottom: 0;
}

.task-runner-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.task-runner-chips [data-status] {
    margin-left: auto;
}

.task-state-badge.chip {
    border: none;
    background: var(--state-bg);
    color: var(--state-text);
}

.task-state-badge.chip.state-empty,
.task-state-badge.chip.state-missed { background: var(--surface-2); color: var(--text-muted); }
.task-state-badge.chip.state-saved,
.task-state-badge.chip.state-files { background: #1E2547; color: #A9B5FF; }
.task-state-badge.chip.state-dirty { background: #2E2118; color: #FFB37A; }
.task-state-badge.chip.state-correct { background: #12302A; color: #5EE0B5; }

.page-tasks .task-runner-title,
.task-runner-title {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.3;
    color: var(--text-strong);
    overflow-wrap: anywhere;
}

.task-runner-task .task-text {
    color: #D5DBE6;
}

.task-runner-task .form-group {
    margin: 0;
}

.answer-short input {
    max-width: 280px;
}

.task-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.task-actions .task-help-actions {
    display: contents;
}

.task-actions .btn-sm {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    font-size: 15px;
}

.task-actions .hint {
    font-size: 13.5px;
    color: var(--text-muted);
}

.task-runner-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding: 0;
    border-top: none;
}

/* «Готовы сдать работу?» */
.submit-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding: 24px;
    border: 1px solid #2E3A6B;
    border-radius: 24px;
    background: #151B30;
}

.submit-card-text {
    display: flex;
    flex-direction: column;
}

.submit-card-title {
    font-weight: 900;
    color: var(--text-strong);
}

.submit-card-text .hint {
    font-size: 14px;
    color: var(--text-muted);
}

/* заголовок страницы работы: «← Назад», название, строка сведений и метка срока справа */
.work-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.work-head .breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    color: var(--accent-text);
    font-size: 14px;
    font-weight: 800;
}

.work-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.work-head-row h2 {
    margin: 0;
}

.work-head .page-description,
.work-head .work-meta {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 15px;
}

.work-head .chip-lg {
    padding: 6px 14px;
    font-size: 14px;
}

@media (max-width: 720px) {
    .task-runner-task {
        padding: 18px;
    }

    .task-runner-steps .btn {
        padding: 0 14px;
    }

    .answer-short input {
        max-width: none;
    }
}

.work-head > *,
.work-head-row h2,
.page-tasks .work-head h2 {
    margin-top: 0;
    margin-bottom: 0;
}

.work-head .breadcrumb {
    text-decoration: none;
}

.work-head .breadcrumb:hover {
    color: #C9D1FF;
}

/* --- Карточки выбора (способ проверки, проверяющий, ученики) --- */

.select-card {
    gap: 14px;
    padding: 14px 18px;
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: 18px;
}

.select-card.is-selected {
    border-color: var(--accent);
    background: #1B2236;
}

.select-card-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-strong);
}

.select-card-meta {
    font-size: 13.5px;
    color: var(--text-muted);
}

.review-mode input,
.reviewer-option input {
    width: 20px;
    height: 20px;
}

.submit-card.review-choice {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.review-choice .panel-title {
    margin: 0;
    font-size: 19px;
}

.review-choice .hint {
    margin: 0;
    font-size: 14px;
}

.review-modes {
    gap: 12px;
    margin: 4px 0 0;
}

/* «← Назад» над заголовком — как в макете: акцентная ссылка, отступ 10px */
.page-head .breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: var(--accent-text);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.page-head.work-head .breadcrumb {
    margin-bottom: 0;
}

.page-head .page-description {
    font-size: 15px;
}

/* --- Практика: строки вариантов и плитки статистики --- */

.practice-row .icon-chip {
    width: 44px;
    height: 44px;
    border-radius: 14px;
}

.mini-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mini-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 18px;
    border-radius: 18px;
    background: var(--surface-2);
}

.mini-stat-value {
    font-size: 26px;
    font-weight: 900;
    line-height: 1.2;
    color: var(--text-strong);
}

.mini-stat-label {
    font-size: 13.5px;
    color: var(--text-muted);
}

.big-tile-accent .big-tile-title,
.big-tile-accent .big-tile-hint {
    color: #fff;
}

/* --- Фильтры над списками: поля в ряд, счетчик справа --- */

.panel.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    padding: 20px;
    margin-bottom: 24px;
}

.panel.filters .form-group {
    flex: 1 1 200px;
    min-width: 0;
    margin: 0;
}

.filters-count {
    flex: none;
    min-height: 46px;
    padding: 0 16px;
}

.filters-count:empty {
    display: none;
}

/* --- Банк заданий --- */

.bank-card {
    position: relative;
}

.bank-position {
    position: absolute;
    top: 26px;
    right: 24px;
    z-index: 1;
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 800;
}

.bank-card .task-runner-chips {
    padding-right: 140px;
}

.bank-answer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.bank-answer-inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
}

.bank-answer-inline .answer-short {
    flex: 0 1 260px;
}

.bank-answer-inline .answer-short input {
    max-width: none;
}

.bank-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bank-actions .btn {
    min-height: 46px;
}

.bank-verdict {
    gap: 14px;
    margin: 0;
    padding: 14px 16px;
    border-radius: 18px;
    background: #351A1E;
    color: #FFD5D5;
}

.bank-verdict.is-correct {
    background: #12302A;
    color: #D7F5EA;
}

.bank-verdict .icon-chip {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}

.bank-verdict.is-correct b { color: #5EE0B5; }
.bank-verdict.is-wrong b { color: #FF8A8A; }

.bank-solution {
    margin: 0;
    padding: 18px;
    background: var(--field);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 16px;
}

.random-pager {
    margin-top: 24px;
    gap: 12px;
}

@media (max-width: 720px) {
    .bank-position {
        position: static;
        margin-bottom: 8px;
    }

    .bank-card .task-runner-chips {
        padding-right: 0;
    }
}

/* --- Составить свой вариант: по макету --- */

.builder-modes .source-btn {
    text-align: left;
}

.source-btn[aria-checked="true"] {
    border: 2px solid var(--accent);
    background: #161C2E;
}

.builder-layout {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    gap: 20px;
}

.panel.builder-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 24px;
}

.builder-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 6px;
}

.builder-filters .form-group {
    flex: 1 1 160px;
    min-width: 0;
    margin: 0;
}

.builder-main .list-info {
    font-size: 13.5px;
    color: var(--text-muted);
}

.builder-main .task-list {
    gap: 12px;
}

.builder-task.list-row {
    display: flex;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: var(--surface-2);
}

.builder-task.list-row.is-selected {
    border-color: #2E3A6B;
    background: #161C2E;
}

.builder-task .builder-task-title {
    margin: 0;
    font-size: 15.5px;
}

.builder-task-preview {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-muted);
}

.builder-task-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.builder-toggle {
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0 10px;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent-text);
}

.builder-toggle:hover {
    background: #26306A;
    color: #fff;
}

.builder-toggle.is-added {
    background: #12302A;
    color: #5EE0B5;
}

.builder-side {
    gap: 14px;
    padding: 24px;
    border-color: #2E3A6B;
    border-radius: 24px;
}

.builder-side-head .panel-title {
    font-size: 19px;
}

.variant-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface-2);
    border: none;
    border-radius: 14px;
}

.variant-position.chip {
    background: var(--field);
    color: #C3CAD7;
    font-size: 13px;
    font-weight: 900;
    min-width: 0;
}

.variant-item-title {
    padding: 0;
    border: none;
    background: none;
    color: var(--text-strong);
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.variant-item-title:hover {
    color: var(--accent-text);
}

.variant-item .chip-remove {
    width: 28px;
    height: 28px;
    color: var(--text-muted);
}

.builder-solve-row {
    display: flex;
    gap: 10px;
}

.builder-solve-row .btn-solve {
    flex: 1;
    width: auto;
    min-height: 46px;
    border-radius: 14px;
    box-shadow: none;
}

.builder-solve-row .btn-outline {
    min-height: 46px;
}

@media (max-width: 720px) {
    .builder-task.list-row {
        flex-wrap: wrap;
    }

    .builder-task-actions {
        margin-left: auto;
    }
}

.builder-side-head .builder-side-toggle {
    display: none;
}

@media (max-width: 960px) {
    .builder-side-head .builder-side-toggle {
        display: inline-flex;
    }
}

/* страницы списка: кнопки страниц в стиле макета */
.page-btn {
    min-width: 38px;
    height: 38px;
    border-radius: 12px;
    border-color: var(--line-strong);
    background: var(--surface-2);
    color: var(--text);
    font-weight: 800;
}

.page-btn.is-current {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* --- Официальные варианты: год — заголовок, варианты — карточки --- */

.year-list {
    gap: 24px;
    margin-bottom: 24px;
}

.year-group {
    background: none;
    border: none;
}

.year-summary {
    padding: 0 0 14px;
}

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

.year-title {
    font-size: 19px;
    font-weight: 900;
}

.official-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.official-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
}

.official-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.official-card-title {
    font-size: 17px;
    font-weight: 900;
    color: var(--text-strong);
}

.official-card-meta {
    font-size: 14px;
    color: var(--text-muted);
}

.official-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.panel.random-filters {
    max-width: none;
}

/* --- Отдельная задача: условие слева, ответ справа --- */

.work-head .task-runner-chips:empty {
    display: none;
}

.task-page-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 20px;
    align-items: start;
}

.task-condition,
.task-answer-card,
.task-result.panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}

.task-condition .panel-title,
.task-result .panel-title {
    margin: 0;
}

.task-answer-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.task-answer-card .form-group {
    margin: 0;
}

.code-answer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.code-answer-head label {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    color: var(--text-strong);
}

.task-result:empty {
    display: none;
}

@media (max-width: 900px) {
    .task-page-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

#answerFiles:empty {
    display: none;
}

/* --- Курсы: баннер каталога, карточки с обложкой, страница курса --- */

.course-hero {
    isolation: isolate;
    margin-bottom: 24px;
    padding: 36px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--surface);
}

.course-hero::before,
.course-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
}

.course-hero::before {
    right: -60px;
    top: -70px;
    width: 260px;
    height: 260px;
    background: #1E2547;
}

.course-hero::after {
    right: 150px;
    bottom: -110px;
    width: 200px;
    height: 200px;
    background: #2E2118;
}

.course-hero h2 {
    margin: 14px 0 10px;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.15;
}

.course-hero p {
    color: #C3CAD7;
    font-size: 16px;
}

.course-grid {
    gap: 16px;
}

.course-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
}

.course-cover {
    display: flex;
    align-items: flex-end;
    height: 140px;
    padding: 20px 22px;
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    text-decoration: none;
}

.course-cover-accent { background: var(--accent); color: #fff; }
.course-cover-orange { background: #2E2118; color: #FFB37A; }
.course-cover-pink { background: #33192A; color: #FF8FC0; }

.course-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
    padding: 20px 22px 22px;
}

.course-card .course-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.course-card .course-title {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
}

.course-card .course-title a {
    color: var(--text-strong);
    text-decoration: none;
}

.course-card .course-description {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.course-card .course-actions {
    margin-top: auto;
}

/* страница курса */
.hero.course-hero-detail {
    display: flex;
    grid-template-columns: none;
}

.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.course-hero-detail .hero-text {
    max-width: 640px;
    margin: 0;
}

.hero-enroll {
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.hero-enroll .btn,
.hero-enroll .btn-unavailable {
    min-height: 52px;
    padding: 0 26px;
    border-radius: 16px;
    background: #fff;
    color: #1B2240;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
}

.hero-enroll .btn-unavailable {
    opacity: 0.7;
}

.hero-enroll .hint,
.hero-enroll .course-enrolled-count {
    color: #E4E8FF;
}

.course-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    gap: 20px;
    align-items: start;
}

.course-layout .course-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.course-layout .panel-title {
    margin: 0;
}

.module-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.module-card {
    padding: 0;
    border: none;
    background: none;
}

.module-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 4px 6px;
}

.module-card .module-title {
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    color: var(--text-strong);
}

.module-card .module-topics {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.module-card .module-topics li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border: none;
    border-radius: 14px;
    background: none;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}

.module-card .module-topics li:hover {
    background: var(--surface-2);
}

.module-topics .task-nav-num {
    --state-bg: var(--surface-2);
    --state-text: var(--text-muted);
}

.module-summary {
    margin: 0;
    padding: 4px 12px;
    color: var(--text-muted);
    font-size: 14px;
}

.course-process .process-steps {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.course-process .process-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    border: none;
    background: none;
}

.course-process .process-step::after {
    display: none;
}

.course-process .process-step .icon-chip {
    width: 42px;
    height: 42px;
    border-radius: 13px;
}

.course-process .process-step-title {
    font-weight: 800;
    color: var(--text-strong);
}

.course-process .principles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--line);
    font-size: 13.5px;
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .course-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-enroll {
        align-items: stretch;
    }
}

.course-process .process-step {
    justify-content: flex-start;
    text-align: left;
}

.hero-enroll .enroll-control {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

@media (max-width: 900px) {
    .hero-enroll .enroll-control {
        align-items: stretch;
    }
}

/* --- Расписание: неделя карточками дней (макет), месяц — сеткой --- */

.schedule-toolbar {
    margin-bottom: 20px;
    gap: 12px;
}

.cal-nav {
    gap: 10px;
}

.cal-nav-btn {
    width: 44px;
    padding: 0;
}

.cal-month {
    min-width: 0;
    margin: 0 4px;
    font-size: 18px;
    font-weight: 900;
}

.calendar {
    padding: 14px;
    border-color: var(--line);
    border-radius: 24px;
    background: var(--surface);
}

.schedule-layout.is-week {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.is-week .calendar {
    padding: 0;
    border: none;
    background: none;
}

.is-week .cal-weekdays {
    display: none;
}

.is-week .cal-grid {
    gap: 10px;
}

.cal-day.week-day {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 300px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
}

.cal-day.week-day.is-today {
    border-color: var(--accent);
    background: #151B30;
}

.cal-day.week-day.is-selected:not(.is-today) {
    border-color: #3A4560;
}

.week-day-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    height: auto;
    padding: 0 2px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--text);
    cursor: pointer;
}

.week-day-head:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.week-day-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-muted);
}

.is-today .week-day-name {
    color: var(--accent-text);
}

.week-day-num {
    font-size: 22px;
    font-weight: 900;
    color: var(--text-strong);
}

.cal-lessons.week-lessons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.week-lessons .cal-lesson {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 14px;
    background: #1E2547;
    color: #C9D1FF;
    font-size: 13.5px;
    text-align: left;
}

.week-lessons .cal-lesson.is-past {
    background: #12302A;
    color: #BFF0DE;
}

.week-lessons .cal-lesson.is-cancelled {
    background: #2E2118;
    color: #FFB37A;
}

.week-lessons .cal-lesson-time {
    font-weight: 900;
    color: inherit;
}

.week-lessons .cal-lesson-title {
    font-weight: 700;
    white-space: normal;
    overflow: visible;
}

.week-lessons .cal-lesson-state {
    font-size: 12.5px;
    opacity: 0.8;
}

.is-week .day-panel {
    padding: 24px;
}

/* строки занятий дня: плашка времени, название, сведения, метка */
.lesson-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: none;
    border-radius: 18px;
    background: var(--surface-2);
}

.lesson-card:hover {
    background: #1F2638;
}

.lesson-time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 72px;
    height: 64px;
    border-radius: 16px;
    background: var(--accent-soft);
    color: #C9D1FF;
    line-height: 1.15;
}

.lesson-time-box b {
    font-size: 18px;
    font-weight: 900;
}

.lesson-time-box span {
    font-size: 12px;
    font-weight: 800;
}

.lesson-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lesson-card-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-strong);
}

.lesson-card-meta {
    font-size: 13.5px;
}

.lesson-card.is-cancelled .lesson-time-box {
    background: var(--field);
    color: var(--text-muted);
}

@media (max-width: 1000px) {
    .is-week .cal-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cal-day.week-day {
        min-height: 0;
    }

    .is-week .cal-lessons.week-lessons {
        display: flex;
    }

    .week-day-head {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .is-week .cal-lessons.week-lessons {
        display: flex;
    }

    .lesson-card {
        flex-wrap: wrap;
    }
}

.cal-day.week-day .week-day-head,
.cal-day.week-day.is-today .week-day-head,
.cal-day.week-day.is-selected .week-day-head {
    width: 100%;
    height: auto;
    border-radius: 8px;
    background: none;
    color: var(--text);
    box-shadow: none;
}

@media (max-width: 720px) {
    .cal-day.week-day {
        height: auto;
        align-items: stretch;
        padding: 12px 14px;
        border-radius: 18px;
    }

    .cal-day.week-day .week-day-head {
        align-self: stretch;
    }

    .schedule-toolbar .cal-nav {
        width: 100%;
    }

    .schedule-toolbar .cal-month {
        flex: 1;
        text-align: center;
        font-size: 16px;
    }
}

/* --- Сообщения: пузыри как в макете --- */

.chat-layout {
    gap: 16px;
}

.chat-threads {
    padding: 10px;
    border-radius: 24px;
}

.chat-thread-item {
    gap: 12px;
    padding: 12px;
    border: none;
    border-radius: 18px;
}

.chat-thread-item.is-active {
    border: none;
    background: var(--accent-soft);
}

.chat-thread-item .user-avatar,
.chat-peer .user-avatar {
    width: 44px;
    height: 44px;
}

.chat-thread-name {
    font-weight: 800;
    color: var(--text-strong);
}

.chat-unread {
    background: #E8590C;
    font-weight: 900;
}

.chat-thread {
    gap: 0;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
}

.chat-thread-head {
    padding: 16px 20px;
    border-bottom-color: var(--line);
}

.chat-head-peer .chat-thread-name {
    font-size: 16px;
}

.chat-messages {
    gap: 12px;
    padding: 20px;
}

.chat-msg {
    max-width: min(600px, 80%);
    padding: 12px 16px;
    border: none;
    border-radius: 18px;
    background: var(--surface-2);
}

.chat-msg.is-from-curator:not(.is-own),
.chat-msg.is-from-student:not(.is-own):not(.is-appeal) {
    border: none;
    background: var(--surface-2);
}

.chat-msg.is-own {
    border: none;
    background: var(--accent);
    color: #fff;
}

.chat-msg.is-own .chat-msg-meta,
.chat-msg.is-own .chat-msg-status,
.chat-msg.is-own .chat-msg-author {
    color: rgba(255, 255, 255, 0.75);
}

.chat-msg.is-appeal {
    border: 1px solid #2E3A6B;
}

.chat-msg-meta {
    font-size: 12px;
    opacity: 0.85;
}

.chat-msg-role {
    display: none;
}

.chat-msg-text {
    font-size: 15px;
    line-height: 1.5;
}

.chat-day span,
.chat-new-divider span {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 12.5px;
    font-weight: 800;
}

.chat-day::before,
.chat-day::after {
    display: none;
}

.chat-composer {
    padding: 14px 16px;
    border-top: 1px solid var(--line);
}

.chat-composer-row {
    align-items: center;
}

.chat-composer textarea {
    min-height: 48px;
    border-radius: 14px;
    background: var(--field);
    border-color: var(--line-strong);
}

.chat-readonly {
    padding: 0 20px;
}

@media (min-width: 721px) {
    .chat-thread-head .chat-back {
        display: none;
    }
}

.chat-day {
    justify-content: center;
    text-align: center;
}

/* --- Профиль: баннер с аватаром, статистика и кураторы рядом --- */

.profile-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    gap: 22px;
    padding: 28px 32px;
    border: none;
    border-radius: 28px;
    background: var(--accent);
    color: #fff;
}

.profile-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -60px;
    top: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.profile-card .profile-avatar {
    width: 96px;
    height: 96px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-radius: 28px;
    background: #2E2118;
    color: #FFB37A;
    font-size: 34px;
    font-weight: 900;
}

.profile-card .profile-info h3 {
    margin: 0 0 6px;
    font-size: 30px;
    font-weight: 900;
    color: #fff;
}

.profile-card .profile-meta {
    align-items: center;
    font-size: 15px;
    color: #E4E8FF;
}

.profile-card .profile-meta .mono {
    font-family: var(--font);
    font-weight: 700;
}

.profile-card .badge {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.profile-card .hint {
    color: #E4E8FF;
}

.profile-card .btn-outline {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.profile-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 24px;
}

.profile-columns > .panel {
    margin: 0;
}

.profile-columns > [hidden] + .panel,
.profile-columns > .panel:only-child {
    grid-column: 1 / -1;
}

.stats-link {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-radius: 24px;
}

.stats-link-head .panel-title {
    margin: 0;
}

.stats-link-more {
    color: var(--accent-text);
    font-size: 14px;
    font-weight: 800;
}

.mini-stats-3 {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

#curatorsPanel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#curatorsPanel[hidden] {
    display: none;
}

#curatorsPanel .panel-title {
    margin: 0;
}

.curator-row {
    padding: 12px 14px;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 14px;
    background: var(--accent-soft);
    color: var(--accent-text);
}

.icon-btn:hover {
    background: #26306A;
    color: #fff;
}

.profile-account {
    max-width: 640px;
}

.stat-row {
    padding: 12px 0;
    border-color: var(--line);
    font-size: 15px;
}

.stat-row > span:first-child {
    color: var(--text-muted);
}

.stat-row > span:last-child {
    font-weight: 800;
    color: var(--text-strong);
}

@media (max-width: 900px) {
    .profile-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .profile-card {
        flex-wrap: wrap;
        padding: 22px 20px;
    }

    .profile-card .profile-info h3 {
        font-size: 24px;
    }
}

/* --- Статистика: номера заданий строками, справа слабые места и итоги --- */

.ui-tabs .tab {
    padding: 7px 14px;
    border: none;
    border-radius: 12px;
    background: none;
    color: #9AA4B5;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.ui-tabs .tab.active {
    background: var(--accent-soft);
    color: #C9D1FF;
}

.ui-tabs-sm {
    padding: 4px;
    border-radius: 14px;
}

.stats-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin: 24px 0;
}

.stats-columns .panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.stats-columns .panel-title {
    margin: 0;
}

.stats-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.type-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.type-card.type-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 48px;
    align-items: start;
    gap: 12px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.type-row .type-card-number {
    font-size: 14px;
    font-weight: 900;
    color: var(--text-muted);
    line-height: 12px;
}

.type-row .type-card-percent {
    font-size: 14px;
    font-weight: 900;
    text-align: right;
    color: var(--text-strong);
    line-height: 12px;
}

.type-row-bar {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.type-row .progress {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: var(--surface-2);
}

.type-row .progress-bar {
    display: block;
    height: 100%;
    border-radius: 5px;
}

.type-row .progress.zone-high .progress-bar,
.type-row .progress.zone-medium .progress-bar { background: var(--accent); }
.type-row .progress.zone-low .progress-bar { background: #E8833A; }

.type-row .type-card-details {
    font-size: 12px;
    color: var(--text-muted);
}

.type-row.zone-no_data .type-card-details {
    color: #6E7A8E;
}

.zone-legend {
    font-size: 12.5px;
}

.weak-row {
    padding: 12px 14px;
}

#weakSpots .hint {
    margin: 10px 0 0;
    font-size: 12.5px;
}

@media (max-width: 900px) {
    .stats-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.type-row .progress.zone-medium .progress-bar { background: #F5C76B; }

.zone-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

/* --- Слабые места: карточки номеров --- */

.stats-head .page-lead {
    margin: 6px 0 0;
}

.weak-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    gap: 16px;
}

.weak-spot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
}

.weak-spot-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.weak-spot-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #2E2118;
    color: #FFB37A;
    font-size: 19px;
    font-weight: 900;
}

.weak-spot-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.weak-spot-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-strong);
}

.weak-spot-meta {
    font-size: 13.5px;
    color: var(--text-muted);
}

.weak-spot .progress {
    width: 100%;
    height: 10px;
    background: var(--surface-2);
}

.weak-spot .progress-bar {
    background: #E8833A;
}

.weak-spot-text {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.weak-section {
    margin-bottom: 16px;
}

.weak-footer {
    margin-top: 20px;
}

/* --- Настройки: две колонки, переключатели уведомлений --- */

.settings-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}

.settings-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.settings-col > .panel {
    margin: 0;
}

.settings-col .subtitle {
    font-size: 14px;
    color: var(--text-muted);
}

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

.notif-option.inline-check {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-strong);
}

.notif-option input[type="checkbox"] {
    order: 2;
    flex: none;
    position: relative;
    width: 48px;
    height: 28px;
    margin: 0 0 0 auto;
    border-radius: 999px;
    background: var(--line-strong);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background 0.15s;
}

.notif-option input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s;
}

.notif-option input[type="checkbox"]:checked {
    background: var(--accent);
}

.notif-option input[type="checkbox"]:checked::after {
    transform: translateX(20px);
}

.notif-option input[type="checkbox"]:focus-visible {
    outline: 2px solid #A9B5FF;
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .settings-columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .form-row-2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Телефон: шапка без карточки, главные компактнее (макет «Мобильная версия») --- */
@media (max-width: 720px) {
    .navbar {
        background: var(--bg);
    }

    .navbar-inner {
        padding: 6px 2px;
        border: none;
        background: none;
    }

    .hero-action {
        width: auto;
        align-self: flex-start;
    }

    .page-tasks .hero .hero-title {
        font-size: 28px;
    }

    .dash-columns .dash-card {
        padding: 0;
        border: none;
        background: none;
    }

    .deadline-row {
        flex-wrap: nowrap;
    }

    .deadline-main {
        flex-basis: auto;
    }

    .deadline-row .chip {
        margin-left: 0;
    }
}

.child-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.child-card-head .panel-title {
    margin: 0;
}

.child-card-empty {
    margin: 0;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--surface-2);
    color: var(--text-muted);
}

/* --- Администрирование: три колонки, быстрые действия под текстом --- */

.admin-cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    gap: 16px;
}

.admin-card {
    align-items: flex-start;
    padding: 22px;
}

.admin-card-arrow {
    display: none;
}

.admin-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 2px;
}

.admin-card-link {
    color: var(--text-strong);
}

.admin-card-text {
    margin: 0;
    color: var(--text-muted);
}

.admin-card-links {
    margin-top: 14px;
}

.admin-card-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent-text);
}

/* --- Таблицы в карточке (пользователи и др.): строки-ссылки --- */

.panel.data-table {
    padding: 0;
    overflow: hidden;
}

.data-table-head,
.data-table .data-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 0.8fr);
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
}

.data-table-head {
    padding-top: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.data-table .user-cards {
    display: block;
}

.data-table .data-row.user-card-link {
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
}

.data-table .data-row:last-child {
    border-bottom: none;
}

.data-table .data-row:hover {
    background: var(--surface-2);
}

.data-cell {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.data-cell-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.data-cell-muted {
    color: var(--text-muted);
}

.form-actions-center {
    justify-content: center;
}

@media (max-width: 800px) {
    .data-table-head {
        display: none;
    }

    .data-table .data-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .data-table .data-row .data-cell:nth-child(2),
    .data-table .data-row .data-cell:nth-child(5) {
        display: none;
    }

    .data-table .data-row .data-cell:nth-child(4) {
        grid-column: 1 / -1;
        white-space: normal;
    }
}

/* --- Новый пользователь: форма и карточка результата --- */

.create-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.create-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 28px;
}

.create-form .form-group {
    margin: 0;
}

.role-cards {
    border: none;
    padding: 0;
}

.role-cards legend {
    margin-bottom: 8px;
    font-size: 13.5px;
    font-weight: 800;
    color: #C3CAD7;
}

.role-cards .review-modes {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    margin: 0;
}

.role-cards .select-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}

.info-box {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--surface-2);
    color: #C3CAD7;
    font-size: 14px;
}

.info-box .icon {
    flex: none;
    margin-top: 2px;
    color: var(--accent-text);
}

.info-box b {
    color: var(--text-strong);
}

.created-card {
    padding: 24px;
    border: 1px solid #1F5A47;
    border-radius: 24px;
    background: #0F221E;
}

.created-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 900;
    color: #5EE0B5;
}

.created-card p {
    margin: 0 0 14px;
    font-size: 14px;
    color: #C3CAD7;
}

.created-login {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px 10px 14px;
    border-radius: 16px;
    background: var(--bg);
}

.created-login .btn {
    background: #12302A;
    color: #5EE0B5;
}

@media (max-width: 900px) {
    .create-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- Банк заданий администратора: строки в карточке --- */

.bank-list-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
}

.bank-list-panel .list-info {
    margin: 0 4px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-muted);
}

.bank-list-panel .task-list {
    gap: 10px;
}

.task-card.bank-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: var(--surface-2);
}

.task-card.bank-row.is-unconfigured {
    border-color: #4A2A2E;
}

.bank-row-num {
    margin-top: 2px;
}

.bank-row-main {
    flex: 1;
    min-width: 0;
}

.bank-row-main h3 {
    margin: 0 0 4px;
    font-size: 16px;
}

.bank-row-id {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.bank-row-main p {
    margin: 0 0 10px;
    font-size: 13.5px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.bank-row-main .task-meta {
    gap: 6px;
    margin: 0;
    font-size: 13px;
}

.bank-row-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: none;
}

.bank-list-panel .pagination {
    justify-content: center;
    margin: 4px 0 0;
}

@media (max-width: 720px) {
    .task-card.bank-row {
        flex-wrap: wrap;
    }

    .bank-row-actions {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
}

.bank-row-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 330px;
}

.bank-row .badge-assignees,
.list-row .badge-assignees {
    background: var(--field);
}

.panel.filters .form-group {
    flex: 1 1 130px;
}

.panel.filters .form-group:has(input[type="search"]) {
    flex: 2 1 220px;
}

/* --- Домашние работы (админ): форма слева, созданные работы справа --- */

.hw-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 20px;
    align-items: start;
}

.hw-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.hw-form-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}

.hw-form-card .form-group,
.hw-form-card.form-section {
    margin: 0;
    padding: 0;
    border: none;
}

.hw-form-card .form-section-title {
    margin: 0;
    font-size: 19px;
    font-weight: 900;
}

.hw-people {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
}

.hw-people .form-section {
    margin: 0;
    padding: 0;
    border: none;
}

.hw-form > .form-actions {
    margin: 0;
}

.hw-created {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    margin: 0;
}

.hw-created .panel-title {
    margin: 0;
}

.hw-created .accordion-item {
    border: none;
    border-radius: 16px;
    background: var(--surface-2);
}

.hw-created .accordion-item > summary {
    border-radius: 16px;
}

@media (max-width: 1100px) {
    .hw-layout,
    .hw-people {
        grid-template-columns: minmax(0, 1fr);
    }

    .hw-created {
        position: static;
        max-height: none;
    }
}

.panel.hw-form-card {
    padding: 24px;
}

.hw-created .accordion-item > summary {
    flex-wrap: nowrap;
    align-items: flex-start;
}

.hw-created .accordion-item > summary::before {
    margin-top: 6px;
}

.hw-created .accordion-item > summary > span {
    min-width: 0;
}

.hw-created .accordion-item > summary {
    display: grid;
    gap: 2px;
    padding: 14px 16px;
}

.hw-created .accordion-item > summary::before {
    display: none;
}

.hw-created .accordion-title {
    font-weight: 800;
    color: var(--text-strong);
}

.variant-admin-row.list-row {
    display: flex;
}

.form-row-inline {
    align-items: flex-end;
}

/* --- Проверка ответов: строки учеников --- */

.task-card.review-row {
    display: flex;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--surface);
}

.task-card.review-row:hover {
    background: var(--surface-2);
}

.review-row .user-avatar {
    width: 44px;
    height: 44px;
}

.review-time {
    min-width: 96px;
    text-align: right;
}

@media (max-width: 720px) {
    .task-card.review-row {
        flex-wrap: wrap;
    }

    .review-time {
        min-width: 0;
    }
}

a.task-card.list-row.review-row {
    border: 1px solid var(--line);
    background: var(--surface);
}

a.task-card.list-row.review-row:hover {
    background: #171D2A;
}

/* --- Проверка ответа: условие слева, ответ и оценка справа --- */

a.chip {
    text-decoration: none;
}

a.chip:hover {
    filter: brightness(1.15);
}

.review-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

.review-layout[style*="none"] {
    display: none !important;
}

.review-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.review-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.review-card .panel-title {
    margin: 0;
}

.review-answer {
    white-space: pre-wrap;
}

.review-form {
    border-color: #2E3A6B;
    background: #151B30;
}

.review-form .form-group {
    margin: 0;
}

.score-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.score-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.score-buttons:empty {
    display: none;
}

.score-btn {
    width: 52px;
    height: 52px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--text-strong);
    font: inherit;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
}

.score-btn.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.score-picker input#score {
    width: 90px;
}

@media (max-width: 900px) {
    .review-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.review-answer {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--field);
    font-family: var(--font-mono);
    font-size: 13.5px;
    color: #C9D1FF;
}

/* --- Мои ученики: карточки с метками и цифрами --- */

.student-grid {
    gap: 16px;
    margin-bottom: 24px;
}

.student-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
}

.student-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.student-card .student-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.student-card .student-link > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.student-card .user-avatar {
    width: 48px;
    height: 48px;
}

.student-card .mini-stat {
    padding: 12px 14px;
}

.student-card .mini-stat-value {
    font-size: 19px;
}

.student-practice {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.student-practice .runner-progress-line span + span {
    color: var(--text-strong);
}

.student-actions {
    margin-top: auto;
}

#content.sections {
    gap: 24px;
}

.stat-tile {
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
}

.stat-tile-value {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-strong);
}

.stat-tile-label {
    color: var(--text-muted);
}

.page-crumbs {
    flex-direction: row;
    gap: 16px;
}

.panel.danger-zone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 20px;
    border-color: #4A2A2E;
    background: #1A1316;
}

.danger-zone .panel-title {
    margin: 0;
    font-size: 16px;
    color: #FF8A8A;
}

.danger-zone .hint {
    grid-column: 1;
    margin: 0;
    font-size: 14px;
}

.danger-zone .form-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
}

.danger-zone .btn-danger {
    min-height: 46px;
    border: 1px solid #6A3238;
    background: none;
    color: #FF8A8A;
}

.danger-zone .btn-danger:hover {
    background: #351A1E;
}

@media (max-width: 720px) {
    .panel.danger-zone {
        grid-template-columns: minmax(0, 1fr);
    }

    .danger-zone .form-actions {
        grid-column: 1;
        grid-row: auto;
    }
}

/* --- Статистика назначений: спокойные карточки, график в цветах макета --- */

.stat-card {
    border: 1px solid var(--line);
    box-shadow: none;
}

.stat-card::before {
    display: none;
}

.week-completed,
.week-dot-completed {
    background: #F5C76B !important;
}

.week-assigned,
.week-dot-assigned {
    background: var(--accent) !important;
}

.week-bar {
    border-radius: 6px 6px 2px 2px;
}

.stats-head .subtitle {
    color: var(--text-muted);
    font-size: 15px;
}

.not-found-code {
    font-size: 96px;
    line-height: 1;
}

/* телефон: список заданий домашней работы — компактные номера в строку */
@media (max-width: 720px) {
    .runner-aside {
        padding: 14px;
    }

    .task-nav-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .task-nav-btn.task-nav-row {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        justify-content: center;
        padding: 0;
        background: var(--state-bg);
    }

    .task-nav-btn.task-nav-row .task-nav-num {
        width: auto;
        height: auto;
        background: none;
        color: inherit;
    }

    .task-nav-btn.task-nav-row.is-current {
        background: var(--accent);
        color: #fff;
    }

    .task-nav-title {
        display: none;
    }
}


@media (max-width: 720px) {
    .big-tiles-five {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.work-head .page-description,
.work-head .work-meta {
    margin-top: 10px;
}

/* появление уведомления — сверху: на узком экране оно не выходит за правый край */
.toast {
    transform: translateY(-8px);
}

.toast.is-visible {
    transform: none;
}

/* длинные слова («Официальные») помещаются в узкие плитки: размер — от ширины плитки */
.big-tiles-five .big-tile {
    container-type: inline-size;
}

.big-tiles-five .big-tile-title {
    font-size: clamp(13px, 10.5cqi, 17px);
}

@media (max-width: 720px) {
    .toast-stack {
        top: calc(88px + env(safe-area-inset-top));
    }
}

/* узкий телефон: метка статуса строки переносится под текст, а не выходит за экран */
@media (max-width: 480px) {
    .list-row {
        flex-wrap: wrap;
    }

    .list-row .list-row-main {
        flex-basis: calc(100% - 64px);
    }

    .list-row > .chip:not(.chip-num) {
        margin-left: 60px;
        white-space: normal;
    }
}

/* --- Варианты правильного ответа и формат «пары чисел» --- */

.answer-variants-section {
    display: grid;
    gap: 10px;
}

.answer-variants-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}

.form-label {
    font-weight: 700;
    color: var(--text-strong, #F4F6FB);
}

.answer-variants {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.answer-variant {
    display: grid;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--line, #2A3345);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
}

.answer-variant.is-primary {
    border-color: rgba(79, 95, 232, 0.55);
}

.answer-variant-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.answer-variant-head label {
    margin: 0;
}

.answer-variant-preview {
    margin: 0;
}

.btn-add-variant {
    justify-self: start;
    border-style: dashed;
}

.answer-pairs textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    min-height: 96px;
    resize: vertical;
}

/* --- Начисление баллов Python-задачи --- */

.python-scoring {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.score-range-table {
    width: 100%;
    max-width: 560px;
}

.score-range-table input[type="number"] {
    width: 90px;
    padding: 8px 10px;
    background: #0B0E14;
    border: 1px solid #2A3345;
    border-radius: 8px;
    color: #E6EAF2;
    font-size: 14px;
}

.score-range-table input[type="number"]:focus {
    border-color: #4F5FE8;
    outline: none;
}

.score-range-table input[readonly] {
    opacity: 0.7;
}

.score-range-bounds {
    color: #C9D1FF;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .score-range-table input[type="number"] {
        width: 64px;
    }

    .score-range-bounds {
        white-space: normal;
    }
}

/* --- Модальные окна: прокручивается содержимое окна, а не страница под ним (common.js) --- */

html.modal-scroll-locked {
    overflow: hidden;
}

dialog.modal {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* на телефонах 100vh больше видимой области (панель браузера): окно — в пределах видимой высоты */
@supports (height: 100dvh) {
    dialog.modal {
        max-height: calc(100dvh - 64px);
    }

    @media (max-width: 720px) {
        dialog.modal {
            max-height: calc(100dvh - 16px);
        }
    }
}

/* --- Раздел родителя: дети и их домашние работы --- */

.child-list {
    display: grid;
    gap: 16px;
}

.child-item {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--line, #2A3345);
    border-radius: 18px;
}

.child-item-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.child-homework {
    flex-wrap: wrap;
    gap: 8px 12px;
}

.child-homework-score {
    color: #C9D1FF;
    font-weight: 700;
}

.parent-add {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

/* --- Курсы: материалы, прохождение, прогресс --- */

.course-cover-image {
    padding: 0;
    overflow: hidden;
}

.course-cover-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.course-progress {
    display: grid;
    gap: 6px;
}

.course-progress .bar {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: var(--line, #2A3345);
    overflow: hidden;
}

.course-progress .bar > span {
    display: block;
    height: 100%;
    background: var(--accent, #4F5FE8);
}

.material-list {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.material-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

.material-row.is-done .list-row-title {
    color: #9AE6B4;
}

.material-card {
    display: grid;
    gap: 16px;
}

.material-question {
    display: grid;
    gap: 12px;
}

.material-question-text {
    font-size: 16px;
    font-weight: 700;
    white-space: pre-wrap;
}

.material-description {
    white-space: pre-wrap;
}

.choice-options {
    display: grid;
    gap: 8px;
}

.choice-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line, #2A3345);
    border-radius: 12px;
    cursor: pointer;
}

.choice-option input {
    margin-top: 3px;
}

.video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #0B0E14;
}

.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- Конструктор курса --- */

.course-builder {
    display: grid;
    gap: 20px;
}

.course-settings .form-actions .spacer {
    flex: 1;
}

.course-cover-field {
    display: grid;
    gap: 10px;
}

.course-cover-preview {
    width: min(360px, 100%);
    aspect-ratio: 16 / 9;
    border: 1px dashed var(--line, #2A3345);
    border-radius: 14px;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 8px;
    text-align: center;
}

.course-cover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.builder-modules {
    display: grid;
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.builder-module {
    border: 1px solid var(--line, #2A3345);
    border-radius: 16px;
    padding: 12px;
}

.builder-module-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.builder-toggle-module {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    text-align: left;
    padding: 4px;
    flex: 1 1 240px;
}

.builder-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.builder-module-body {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.builder-module-form {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

.builder-materials .material-row {
    flex-wrap: wrap;
}

.builder-add-material,
.builder-add-module {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.builder-add-module .form-group {
    flex: 1 1 260px;
    margin-bottom: 0;
}

.choice-edit-list {
    display: grid;
    gap: 8px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.choice-edit {
    display: flex;
    align-items: center;
    gap: 10px;
}

.choice-edit input[type="text"] {
    flex: 1;
}

.builder-random .form-row {
    align-items: center;
}

.admin-course-row {
    flex-wrap: wrap;
    gap: 8px 12px;
}

@media (max-width: 600px) {
    .builder-tools .btn {
        padding: 6px 10px;
    }
}

/* --- Программное обеспечение, настройки приложения, журнал действий --- */

.software-list,
.settings-groups {
    display: grid;
    gap: var(--space-md);
}

.software-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.software-card.is-hidden {
    opacity: 0.7;
}

.software-card-main {
    min-width: 0;
}

.software-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 18px;
    color: var(--text-strong);
}

.software-description {
    margin: 0 0 6px;
    color: var(--text);
    overflow-wrap: anywhere;
}

.software-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: none;
}

.software-card-actions .btn:first-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.software-form .form-actions {
    margin-top: var(--space-md);
}

.setting-field {
    max-width: 640px;
}

.setting-field input[type="number"],
.setting-field select {
    max-width: 220px;
}

.table-scroll {
    overflow-x: auto;
}

.audit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.audit-table th,
.audit-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.audit-table th {
    color: var(--text-muted);
    font-weight: 700;
    white-space: nowrap;
}

.audit-meta code {
    display: block;
    max-width: 420px;
    overflow-wrap: anywhere;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
}

@media (max-width: 700px) {
    .software-card {
        flex-direction: column;
        align-items: stretch;
    }

    .software-card-actions {
        justify-content: flex-start;
    }
}

.software-card a:not(.btn) {
    color: var(--accent-text);
}

/* --- Страница темы курса --- */

.topic-materials {
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.topic-material-title {
    margin: 4px 0 12px;
    font-size: 20px;
    color: var(--text-strong);
}

.topic-material.is-done {
    border-color: rgba(34, 197, 94, 0.35);
}

.topic-list {
    display: grid;
    gap: 8px;
    margin: 12px 0;
    padding: 0;
    list-style: none;
}

.module-subtitle {
    margin: 14px 0 6px;
    font-size: 14px;
    color: var(--text-muted);
}

.breadcrumb-secondary {
    margin-left: 12px;
}

.builder-topics {
    margin: 0 0 var(--space-md);
}

.builder-topic-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.builder-topic-row .list-row-title {
    flex: 1 1 200px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.builder-topic-add {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.builder-topic-add input {
    flex: 1 1 220px;
}

.builder-topic-add input {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--field);
    color: var(--text);
    font: inherit;
}

.builder-topic-add input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 95, 232, 0.25);
}

.parent-code-value {
    margin: 12px 0;
    padding: 14px 16px;
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    background: var(--field);
    color: var(--text-strong);
    font-size: 26px;
    letter-spacing: 3px;
    text-align: center;
    user-select: all;
}

.parent-codes {
    margin-top: var(--space-md);
}

/* --- Чат родителя с куратором, расписание ребёнка --- */

.parent-chat {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: var(--space-md);
    align-items: start;
}

.parent-chat-threads {
    display: grid;
    gap: 8px;
}

.parent-chat-thread {
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.parent-chat-thread.is-current {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.parent-chat-last {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.parent-chat-messages {
    display: grid;
    gap: 10px;
    max-height: 55vh;
    margin-bottom: var(--space-md);
    overflow-y: auto;
}

.parent-chat-message {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2);
}

.parent-chat-message.is-mine {
    border-color: rgba(79, 95, 232, 0.5);
    background: var(--accent-soft);
}

.parent-chat-message.is-automatic {
    border-style: dashed;
    background: var(--field);
}

.parent-chat-message-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    margin-bottom: 4px;
}

.parent-chat-message-head time {
    margin-left: auto;
}

.parent-chat-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.parent-chat-form {
    display: grid;
    gap: 8px;
}

.parent-chat-form textarea,
.parent-chat-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--field);
    color: var(--text);
    font: inherit;
}

.parent-chat-form .btn {
    justify-self: start;
}

.child-lesson.is-cancelled .list-row-title {
    text-decoration: line-through;
    color: var(--text-muted);
}

@media (max-width: 800px) {
    .parent-chat {
        grid-template-columns: 1fr;
    }
}

.link-code-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.link-code-form input {
    flex: 1 1 220px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--field);
    color: var(--text-strong);
    font-family: var(--font-mono);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.parent-chat-threads,
.parent-chat-main {
    min-width: 0;
}

.parent-chat-thread {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

.parent-chat-thread .list-row-main {
    min-width: 0;
    flex: 1 1 auto;
}

/* --- Подсказка, закладка и заметка к заданию --- */

.task-tools {
    margin: 4px 0 12px;
}

.task-tools-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.task-tools .btn.is-active {
    border-color: rgba(250, 204, 21, 0.6);
    color: #fde68a;
}

.task-hint,
.task-note {
    margin-top: 10px;
    padding: 10px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface-2);
    overflow-wrap: anywhere;
}

.task-hint {
    border-color: rgba(250, 204, 21, 0.4);
}

.task-note textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--field);
    color: var(--text);
    font: inherit;
}

.task-note-text {
    white-space: pre-wrap;
}

.mistake-card {
    display: grid;
    gap: 10px;
}

.mistake-title {
    margin: 0;
    font-size: 18px;
    color: var(--text-strong);
}

.mistake-retry {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.mistake-retry input {
    flex: 1 1 220px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--field);
    color: var(--text);
}

.mistake-history ul {
    display: grid;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.mistake-attempt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--surface-2);
    font-size: 13px;
}

/* --- Аналитика ученика --- */

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-md);
}

.analytics-block {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface-2);
    min-width: 0;
}

.analytics-title {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--text-muted);
}

.analytics-number {
    margin: 0;
    font-size: 36px;
    font-weight: 800;
    color: var(--text-strong);
}

.analytics-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.analytics-list li {
    display: grid;
    gap: 2px;
    overflow-wrap: anywhere;
}

.activity-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 90px;
}

.activity-bar {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
}

.activity-bar i {
    display: block;
    width: 100%;
    min-height: 3px;
    border-radius: 6px 6px 2px 2px;
    background: var(--accent);
}

.activity-bar b {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.dynamics-row {
    display: grid;
    grid-template-columns: 56px 1fr 44px;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 13px;
}

.dynamics-row .bar {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: var(--line-strong);
    overflow: hidden;
}

.dynamics-row .bar > span {
    display: block;
    height: 100%;
    background: var(--accent);
}

.analytics-modules ul {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--text-muted);
}