/* ============================================
   СИСТЕМА ТЕСТИРОВАНИЯ - СТИЛИ
   Строгий современный дизайн
   ============================================ */

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

:root {
    /* Светлый минимализм - синие акценты (Google/Notion стиль) */
    --primary: #2563eb;
    --primary-light: #3b82f6;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --success: #22c55e;
    --warning: #eab308;
    --danger: #ef4444;
    --text: #1f2937;
    --text-light: #6b7280;
    --text-secondary: #9ca3af;
    --bg: #f9fafb;
    --card: #ffffff;
    --border: #e5e7eb;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Оценки */
    --grade-5: #dcfce7;
    --grade-5-text: #166534;
    --grade-4: #dbeafe;
    --grade-4-text: #1d4ed8;
    --grade-3: #fef3c7;
    --grade-3-text: #b45309;
    --grade-2: #fee2e2;
    --grade-2-text: #dc2626;
}

/* Тёмная тема - синие акценты */
[data-theme="dark"] {
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --success: #4ade80;
    --warning: #facc15;
    --danger: #f87171;

    --text: #f9fafb;
    --text-light: #9ca3af;
    --text-secondary: #6b7280;

    --bg: #111827;
    --card: #1f2937;
    --border: #374151;

    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);

    /* Оценки для тёмной темы */
    --grade-5: #166534;
    --grade-5-text: #dcfce7;
    --grade-4: #1e40af;
    --grade-4-text: #dbeafe;
    --grade-3: #b45309;
    --grade-3-text: #fef3c7;
    --grade-2: #dc2626;
    --grade-2-text: #fee2e2;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none; /* Блокировка меню при долгом нажатии на iOS */
    -webkit-tap-highlight-color: transparent; /* Убираем подсветку при тапе */
    touch-action: manipulation; /* Отключаем zoom по двойному тапу */
}

/* Блокировка копирования */
body * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

input {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* ============================================
   UTILITY КЛАССЫ
   ============================================ */

/* Display */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }

/* Gap */
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-20 { gap: 20px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }

/* Margin */
.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

/* Padding */
.p-0 { padding: 0; }
.p-8 { padding: 8px; }
.p-12 { padding: 12px; }
.p-16 { padding: 16px; }
.p-20 { padding: 20px; }
.p-24 { padding: 24px; }

/* Text colors */
.text-primary { color: var(--primary); }
.text-muted { color: var(--text-light); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-white { color: white; }

/* Text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Font sizes */
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.85rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.1rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }

/* Font weight */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Width */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* Border radius */
.rounded { border-radius: 4px; }
.rounded-md { border-radius: 8px; }
.rounded-lg { border-radius: 12px; }
.rounded-xl { border-radius: 16px; }
.rounded-full { border-radius: 9999px; }

/* Background */
.bg-card { background: var(--card); }
.bg-muted { background: var(--bg); }
.bg-success-light { background: rgba(16, 185, 129, 0.1); }
.bg-danger-light { background: rgba(239, 68, 68, 0.1); }
.bg-warning-light { background: rgba(245, 158, 11, 0.1); }

/* Admin header styles */
.admin-header-logo {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.admin-header-title {
    cursor: pointer;
    margin: 0;
    line-height: 1.2;
}

.admin-header-subtitle {
    color: var(--text-light);
    margin: 2px 0 0 0;
    font-size: 0.85em;
}

/* Result stats */
.result-stat {
    text-align: center;
}

.result-stat__value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
}

.result-stat__label {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Alert boxes */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 12px;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--success);
}

/* Mode settings container */
.mode-settings {
    margin-top: 12px;
    padding: 16px;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.mode-settings-title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 12px;
    color: var(--text);
}

/* ============================================
   ВОДЯНОЙ ЗНАК
   ============================================ */

.watermark {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
    opacity: 0.04;
}

.watermark-text {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    color: var(--primary);
    transform: rotate(-30deg);
    white-space: nowrap;
}

/* Водяной знак для нейросетей */
.ai-watermark {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
    overflow: hidden;
    opacity: 0.025;
}

.ai-watermark-text {
    position: absolute;
    font-size: 16px;
    font-weight: bold;
    color: #ff0000;
    transform: rotate(-45deg);
    white-space: nowrap;
    text-transform: uppercase;
}

/* ============================================
   ЭКРАНЫ
   ============================================ */

.screen {
    display: none;
    min-height: 100vh;
    padding: 20px;
}

.screen.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

#screen-test.active {
    display: block;
    padding-top: 180px; /* Увеличено для панели навигации */
}

.container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================
   КАРТОЧКИ
   ============================================ */

.card {
    background: var(--card);
    border-radius: 16px;
    padding: 40px;
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.card-wide {
    max-width: 700px;
    text-align: left;
}

.card-question {
    text-align: left;
}

.card-result {
    text-align: center;
}

/* ============================================
   ИКОНКИ И ЗАГОЛОВКИ
   ============================================ */

.icon-lock, .icon-user {
    font-size: 48px;
    margin-bottom: 16px;
}

h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
}

h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.subtitle {
    color: var(--text-light);
    margin-bottom: 32px;
}

/* ============================================
   ФОРМЫ
   ============================================ */

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text);
}

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    border: 2px solid var(--border);
    border-radius: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--card);
}

input[type="text"]:focus,
input[type="password"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15, 52, 96, 0.1);
}

.error-text {
    color: var(--danger);
    font-size: 14px;
    margin-top: 8px;
    min-height: 20px;
}

.hint-text {
    color: var(--text-light);
    font-size: 12px;
    margin-top: 6px;
}

/* ============================================
   КНОПКИ
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 140px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

.btn-secondary {
    background: var(--bg);
    color: var(--text);
    border: 2px solid var(--border);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--border);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: #dc2626;
}

.btn-danger-outline {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}

.btn-danger-outline:hover:not(:disabled) {
    background: var(--danger);
    color: white;
}

.btn-warning {
    background: #f59e0b;
    color: white;
}

.btn-warning:hover:not(:disabled) {
    background: #d97706;
}

/* ============================================
   КНОПКИ ВЫБОРА РОЛИ
   ============================================ */

.role-buttons {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-role {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 40px;
    min-width: 200px;
    border-radius: 16px;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 2px solid var(--border);
    background: var(--card);
    cursor: pointer;
}

.btn-role:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.btn-student-role {
    border-color: var(--accent);
}

.btn-student-role:hover {
    background: rgba(15, 52, 96, 0.05);
    border-color: var(--accent-hover);
}

.btn-teacher-role {
    border-color: var(--success);
}

.btn-teacher-role:hover {
    background: rgba(16, 185, 129, 0.05);
    border-color: #059669;
}

.role-icon {
    font-size: 48px;
    margin-bottom: 15px;
    display: block;
}

.role-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    display: block;
}

.role-desc {
    font-size: 14px;
    color: var(--text-light);
    display: block;
}

@media (max-width: 500px) {
    .role-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn-role {
        width: 100%;
        max-width: 280px;
        padding: 25px 30px;
    }

    .role-icon {
        font-size: 40px;
    }
}

/* ============================================
   ПРАВИЛА И ШКАЛА ОЦЕНОК
   ============================================ */

.rules-section {
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.rules-section:last-of-type {
    border-bottom: none;
}

.rules-section ul {
    list-style: none;
    padding-left: 0;
}

.rules-section li {
    padding: 8px 0;
    padding-left: 24px;
    position: relative;
}

.rules-section li::before {
    content: "•";
    position: absolute;
    left: 8px;
    color: var(--accent);
    font-weight: bold;
}

.warning {
    color: var(--danger);
}

.grade-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.grade-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 500;
}

.grade-5 { background: rgba(16, 185, 129, 0.1); color: #059669; }
.grade-4 { background: rgba(59, 130, 246, 0.1); color: #2563eb; }
.grade-3 { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.grade-2 { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.grade-pass { background: rgba(16, 185, 129, 0.1); color: #059669; }
.grade-fail { background: rgba(239, 68, 68, 0.1); color: #dc2626; }

.grade-label { font-weight: 600; }
.grade-range { text-align: center; }
.grade-questions { text-align: right; font-size: 14px; opacity: 0.8; }

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0;
    padding: 16px;
    background: var(--bg);
    border-radius: 10px;
}

.checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.checkbox-group label {
    cursor: pointer;
    font-weight: 500;
}

/* ============================================
   ТЕСТ - ХЕДЕР
   ============================================ */

.test-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--primary);
    color: white;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    box-shadow: var(--shadow);
}

.test-info {
    display: flex;
    gap: 24px;
}

#question-counter {
    font-weight: 600;
}

#section-label {
    opacity: 0.8;
    font-size: 14px;
}

.timer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Consolas', monospace;
}

.timer.warning {
    color: var(--warning);
    animation: pulse 1s infinite;
}

.timer.danger {
    color: var(--danger);
    animation: pulse 0.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ============================================
   ТЕСТ - ПРОГРЕСС БАР
   ============================================ */

.test-progress {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-light);
    z-index: 99;
}

.progress-bar {
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
}

.progress-fill {
    height: 100%;
    background: var(--success);
    transition: width 0.3s ease;
    width: 0%;
}

/* ============================================
   НАВИГАЦИЯ ПО ВОПРОСАМ
   ============================================ */

.questions-nav {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--card);
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    z-index: 98;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-height: 120px;
    overflow-y: auto;
}

.nav-question-btn {
    width: 36px;
    height: 36px;
    border: 2px solid var(--border);
    background: var(--bg);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-secondary);
}

.nav-question-btn:hover {
    border-color: var(--accent);
    background: var(--primary-light);
}

/* Текущий вопрос */
.nav-question-btn.current {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    transform: scale(1.1);
}

/* Отвеченный вопрос */
.nav-question-btn.answered {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

/* Текущий + отвеченный */
.nav-question-btn.current.answered {
    background: var(--accent);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--success);
}

/* Правильный ответ (в режиме тренировки) */
.nav-question-btn.correct {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: white !important;
}

/* Неправильный ответ (в режиме тренировки) */
.nav-question-btn.wrong {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
    color: white !important;
}

/* ============================================
   ТЕСТ - ВОПРОСЫ
   ============================================ */

.question-text {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 28px;
    line-height: 1.7;
    color: var(--primary);
}

.answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.answer-option {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--card);
    position: relative;
}

.answer-option:hover {
    border-color: var(--accent);
    background: rgba(15, 52, 96, 0.02);
}

.answer-option.selected {
    border-color: var(--accent);
    background: rgba(15, 52, 96, 0.08);
}

.answer-option input[type="radio"],
.answer-option input[type="checkbox"] {
    display: none;
}

/* Подсказка для множественного выбора */
.multiple-choice-hint {
    color: var(--primary);
    font-size: 0.9rem;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: rgba(79, 70, 229, 0.08);
    border-radius: 8px;
    text-align: center;
}

/* Множественный выбор - квадратная буква с чекбоксом */
.answer-option-multiple .answer-letter {
    border-radius: 6px;
    position: relative;
}

/* Визуальный чекбокс для множественного выбора */
.answer-option-multiple::before {
    content: '';
    width: 22px;
    height: 22px;
    min-width: 22px;
    border: 2px solid var(--border);
    border-radius: 4px;
    margin-right: 12px;
    flex-shrink: 0;
    transition: all 0.2s ease;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.answer-option-multiple.selected::before {
    content: '✓';
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    font-size: 14px;
    font-weight: bold;
}

/* Картинки в вариантах ответов */
.answer-text.with-image {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.answer-option-image {
    max-width: 200px;
    max-height: 120px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
    object-fit: contain;
}

.answer-option-image:hover {
    transform: scale(1.05);
}

/* Ограничение размера ЛЮБЫХ картинок в ответах */
.answer-text img,
.answer-option img {
    max-width: 250px !important;
    max-height: 100px !important;
    object-fit: contain;
    border-radius: 6px;
    vertical-align: middle;
}

@media (max-width: 600px) {
    .answer-option-image,
    .answer-text img,
    .answer-option img {
        max-width: 100% !important;
        max-height: 80px !important;
    }
}

.answer-letter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 16px;
    transition: all 0.2s;
}

.answer-option.selected .answer-letter {
    background: var(--accent);
    color: white;
}

.answer-text {
    flex: 1;
    font-size: 15px;
}

/* ============================================
   ВОПРОСЫ НА СОПОСТАВЛЕНИЕ (MATCH)
   ============================================ */

.match-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.match-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 12px;
    transition: all 0.2s;
}

.match-row:hover {
    border-color: var(--accent);
}

.match-left {
    flex: 1;
    font-size: 15px;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.match-left-image {
    max-width: 100px;
    max-height: 80px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.match-left-image:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.match-number {
    font-weight: 700;
    color: var(--accent);
    margin-right: 8px;
    flex-shrink: 0;
}

.match-select-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.match-select {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b8cae' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.match-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(107, 140, 174, 0.2);
}

.match-select:hover {
    border-color: var(--accent);
}

.match-row.match-correct {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.match-row.match-wrong {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
}

.match-hint {
    font-size: 12px;
    color: var(--success);
    font-weight: 500;
    margin-top: 4px;
}

/* ============================================
   ВОПРОСЫ С КОРОТКИМ ОТВЕТОМ (SHORT ANSWER)
   ============================================ */

.short-answer-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 12px;
}

.short-answer-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
}

.short-answer-input {
    width: 100%;
    padding: 16px 20px;
    font-size: 16px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    transition: all 0.2s;
}

.short-answer-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(107, 140, 174, 0.2);
}

.short-answer-input::placeholder {
    color: var(--text-light);
    opacity: 0.6;
}

.short-answer-confirm {
    align-self: flex-start;
    margin-top: 8px;
}

.short-answer-container.short-answer-correct {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.short-answer-container.short-answer-correct .short-answer-input {
    border-color: var(--success);
}

.short-answer-container.short-answer-wrong {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
}

.short-answer-container.short-answer-wrong .short-answer-input {
    border-color: var(--danger);
}

.short-answer-hint {
    font-size: 13px;
    color: var(--success);
    font-weight: 500;
    padding: 8px 12px;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 6px;
}

/* Адаптивность для новых типов вопросов */
@media (max-width: 640px) {
    .match-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .match-left, .match-select-wrapper {
        flex: none;
        width: 100%;
    }

    .short-answer-container {
        padding: 16px;
    }

    .short-answer-input {
        padding: 14px 16px;
        font-size: 15px;
    }
}

/* Тёмная тема для новых типов вопросов */
[data-theme="dark"] .match-row {
    background: #141b2d;
    border-color: #2d3748;
}

[data-theme="dark"] .match-row:hover {
    border-color: #3b82f6;
}

[data-theme="dark"] .match-select {
    background: #0a0f1a;
    border-color: #2d3748;
    color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2360a5fa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

[data-theme="dark"] .match-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .match-row.match-correct {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .match-row.match-wrong {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

[data-theme="dark"] .short-answer-container {
    background: #141b2d;
    border-color: #2d3748;
}

[data-theme="dark"] .short-answer-input {
    background: #0a0f1a;
    border-color: #2d3748;
    color: #ffffff;
}

[data-theme="dark"] .short-answer-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .short-answer-container.short-answer-correct {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .short-answer-container.short-answer-wrong {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}

/* ============================================
   ТЕСТ - НАВИГАЦИЯ
   ============================================ */

.navigation {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* ============================================
   РЕЗУЛЬТАТЫ
   ============================================ */

.result-icon {
    font-size: 72px;
    margin-bottom: 16px;
}

.result-stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 32px 0;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    font-size: 14px;
    color: var(--text-light);
}

.result-grade {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 20px 40px;
    background: var(--bg);
    border-radius: 12px;
    margin-bottom: 24px;
}

.grade-text {
    font-size: 18px;
    color: var(--text-light);
}

.grade-value {
    font-size: 48px;
    font-weight: 700;
}

.grade-value.grade-5 { color: #059669; }
.grade-value.grade-4 { color: #2563eb; }
.grade-value.grade-3 { color: #d97706; }
.grade-value.grade-2 { color: #dc2626; }
.grade-value.grade-pass { color: #059669; }
.grade-value.grade-fail { color: #dc2626; }

.result-note {
    color: var(--text-light);
    font-size: 14px;
}

/* ============================================
   ПРЕДУПРЕЖДЕНИЕ
   ============================================ */

.warning-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.warning-overlay.active {
    display: flex;
}

.warning-modal {
    background: var(--card);
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    max-width: 400px;
    animation: shake 0.5s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.warning-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.warning-modal h2 {
    justify-content: center;
    margin-bottom: 16px;
}

.warning-penalty {
    font-size: 18px;
    margin: 16px 0 24px;
}

.warning-penalty strong {
    color: var(--danger);
}

/* ============================================
   АДАПТИВНОСТЬ
   ============================================ */

/* Планшеты */
@media (max-width: 768px) {
    .card {
        padding: 28px;
        margin: 10px;
        border-radius: 12px;
    }

    h1 {
        font-size: 24px;
    }

    .questions-nav {
        top: 64px;
        padding: 8px 10px;
        gap: 4px;
    }

    .nav-question-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    #screen-test.active {
        padding-top: 160px;
    }
}

/* Мобильные телефоны */
@media (max-width: 640px) {
    body {
        font-size: 14px;
    }

    .screen {
        padding: 10px;
    }

    .card {
        padding: 20px;
        margin: 5px;
        border-radius: 10px;
    }

    h1 {
        font-size: 20px;
        line-height: 1.3;
    }

    h2 {
        font-size: 16px;
    }

    .subtitle {
        font-size: 14px;
        margin-bottom: 20px;
    }

    /* Форма входа */
    .form-group {
        margin-bottom: 15px;
    }

    input[type="text"],
    input[type="password"] {
        padding: 12px 14px;
        font-size: 16px; /* Предотвращает zoom на iOS */
    }

    /* Кнопки */
    .btn {
        padding: 12px 20px;
        font-size: 15px;
        width: 100%;
        min-width: auto;
    }

    /* Хедер теста */
    .test-header {
        padding: 10px 12px;
        flex-direction: column;
        gap: 6px;
    }

    .test-info {
        font-size: 13px;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    #question-counter {
        font-size: 14px;
    }

    #section-label {
        font-size: 12px;
        display: none; /* Скрываем на маленьких экранах */
    }

    .timer {
        font-size: 18px;
    }

    /* Прогресс-бар */
    .test-progress {
        top: 56px;
    }

    /* Навигация по вопросам */
    .questions-nav {
        top: 60px;
        padding: 8px;
        gap: 4px;
        max-height: 80px;
    }

    .nav-question-btn {
        width: 28px;
        height: 28px;
        font-size: 11px;
        border-radius: 4px;
    }

    .nav-question-btn.current {
        transform: scale(1.05);
    }

    #screen-test.active {
        padding-top: 150px;
    }

    /* Вопросы */
    .question-text {
        font-size: 16px;
        margin-bottom: 20px;
        line-height: 1.5;
    }

    .answers {
        gap: 10px;
        margin-bottom: 20px;
    }

    .answer-option {
        padding: 12px 14px;
        border-radius: 10px;
    }

    .answer-letter {
        width: 28px;
        height: 28px;
        font-size: 14px;
        margin-right: 12px;
    }

    .answer-text {
        font-size: 14px;
    }

    /* Навигация */
    .navigation {
        flex-direction: column;
        gap: 10px;
    }

    /* Правила */
    .rules-section {
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

    .rules-section li {
        padding: 6px 0;
        padding-left: 20px;
        font-size: 14px;
    }

    .grade-table {
        gap: 6px;
    }

    .grade-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 12px;
        text-align: left;
    }

    .grade-range, .grade-questions {
        text-align: left;
        font-size: 13px;
    }

    .checkbox-group {
        padding: 12px;
        margin: 20px 0;
    }

    .checkbox-group label {
        font-size: 14px;
    }

    /* Результаты */
    .result-icon {
        font-size: 56px;
    }

    .result-stats {
        gap: 20px;
        flex-direction: column;
    }

    .stat-value {
        font-size: 28px;
    }

    .stat-label {
        font-size: 13px;
    }

    .result-grade {
        padding: 16px 24px;
        flex-direction: column;
        gap: 8px;
    }

    .grade-value {
        font-size: 40px;
    }

    .grade-text {
        font-size: 16px;
    }

    /* Предупреждение */
    .warning-modal {
        padding: 24px;
        margin: 20px;
        max-width: 90%;
    }

    .warning-icon {
        font-size: 48px;
    }

    .warning-modal h2 {
        font-size: 18px;
    }

    .warning-penalty {
        font-size: 16px;
    }

    /* Объяснения (тренировка) */
    .explanation {
        padding: 15px;
        margin-top: 15px;
    }

    .explanation-header {
        font-size: 16px;
    }

    .explanation-text {
        font-size: 14px;
    }
}

/* Очень маленькие экраны (iPhone SE и т.д.) */
@media (max-width: 375px) {
    .card {
        padding: 16px;
    }

    h1 {
        font-size: 18px;
    }

    .questions-nav {
        max-height: 70px;
        padding: 6px;
    }

    .nav-question-btn {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }

    #screen-test.active {
        padding-top: 135px;
    }

    .question-text {
        font-size: 15px;
    }

    .answer-option {
        padding: 10px 12px;
    }

    .answer-letter {
        width: 24px;
        height: 24px;
        font-size: 12px;
        margin-right: 10px;
    }

    .answer-text {
        font-size: 13px;
    }

    .btn {
        padding: 10px 16px;
        font-size: 14px;
    }

    .timer {
        font-size: 16px;
    }

    .stat-value {
        font-size: 24px;
    }

    .grade-value {
        font-size: 36px;
    }
}

/* Адаптивность заглушки при скриншоте */
@media (max-width: 640px) {
    .blocker-content {
        padding: 20px;
    }

    .blocker-icon {
        font-size: 80px;
        margin-bottom: 15px;
    }

    .blocker-content h1 {
        font-size: 32px;
        letter-spacing: 2px;
    }

    .blocker-content h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .blocker-content p {
        font-size: 14px;
    }

    .blocker-warning {
        font-size: 16px !important;
        padding: 15px;
    }

    .blocker-ai-msg {
        font-size: 12px !important;
        padding: 12px;
    }

    .blocker-student-info {
        font-size: 14px;
    }
}

/* Адаптивность предупреждения полноэкранного режима */
@media (max-width: 640px) {
    .fullscreen-warning-content {
        padding: 20px;
    }

    .fullscreen-warning-icon {
        font-size: 60px;
        margin-bottom: 15px;
    }

    .fullscreen-warning-content h1 {
        font-size: 22px;
        letter-spacing: 1px;
    }

    .fullscreen-warning-content h2 {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .fullscreen-warning-text {
        font-size: 14px;
    }

    .fullscreen-warning-count {
        font-size: 14px;
        padding: 12px;
    }

    .fullscreen-warning-count span {
        font-size: 20px;
    }

    .fullscreen-warning-btn {
        font-size: 16px !important;
        padding: 14px 24px !important;
    }

    .fullscreen-warning-note {
        font-size: 12px;
    }
}

/* Ландшафтная ориентация на мобильных */
@media (max-height: 500px) and (orientation: landscape) {
    .screen.active {
        align-items: flex-start;
        padding-top: 10px;
    }

    .card {
        padding: 15px;
    }

    h1 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .questions-nav {
        top: 50px;
        max-height: 50px;
        padding: 4px;
    }

    .nav-question-btn {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }

    #screen-test.active {
        padding-top: 110px;
    }

    .question-text {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .answer-option {
        padding: 8px 10px;
    }

    .test-header {
        padding: 8px 12px;
    }
}

/* ============================================
   ПЕЧАТЬ БЛОКИРОВКА
   ============================================ */

@media print {
    body * {
        display: none !important;
    }

    body::after {
        content: "Печать запрещена";
        display: block;
        font-size: 24px;
        text-align: center;
        padding: 100px;
    }
}

/* ============================================
   РЕЖИМ ТРЕНИРОВКИ
   ============================================ */

.answer-option.correct-answer {
    border-color: var(--success) !important;
    background: rgba(16, 185, 129, 0.15) !important;
}

.answer-option.correct-answer .answer-letter {
    background: var(--success) !important;
    color: white !important;
}

.answer-option.wrong-answer {
    border-color: var(--danger) !important;
    background: rgba(239, 68, 68, 0.15) !important;
}

.answer-option.wrong-answer .answer-letter {
    background: var(--danger) !important;
    color: white !important;
}

.explanation {
    margin-top: 20px;
    padding: 20px;
    border-radius: 12px;
    background: var(--bg);
    border-left: 4px solid var(--accent);
}

.explanation-header {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

.explanation-header.correct {
    color: var(--success);
}

.explanation-header.wrong {
    color: var(--danger);
}

.explanation-text {
    color: var(--text);
    line-height: 1.7;
}

.explanation-text strong {
    color: var(--primary);
}

/* ============================================
   ЗАГЛУШКА ПРИ СКРИНШОТЕ - МГНОВЕННАЯ
   ============================================ */

#screenshot-blocker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 999999;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Без transition - мгновенное появление! */
}

#screenshot-blocker.active {
    display: flex !important;
}

.blocker-content {
    color: white;
    padding: 40px;
    max-width: 700px;
}

.blocker-icon {
    font-size: 150px;
    margin-bottom: 20px;
}

.blocker-content h1 {
    font-size: 72px;
    color: #ff0000;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 900;
    text-shadow: 0 0 20px #ff0000;
}

.blocker-content h2 {
    font-size: 42px;
    color: #ff4444;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.blocker-content p {
    font-size: 20px;
    margin-bottom: 15px;
    color: #ccc;
}

.blocker-warning {
    color: #ffcc00 !important;
    font-size: 28px !important;
    font-weight: bold;
    margin-top: 20px !important;
    padding: 25px;
    border: 3px solid #ffcc00;
    border-radius: 10px;
    background: rgba(255, 204, 0, 0.15);
}

.blocker-ai-msg {
    color: #ff6666 !important;
    font-size: 20px !important;
    margin-top: 25px !important;
    font-family: monospace;
    background: rgba(255, 0, 0, 0.3);
    padding: 20px;
    border-radius: 8px;
    border: 2px solid #ff0000;
    line-height: 1.5;
}

.blocker-student-info {
    margin-top: 30px;
    font-size: 18px;
    color: #888;
    font-family: monospace;
}

/* ============================================
   ПРЕДУПРЕЖДЕНИЕ О ПОЛНОЭКРАННОМ РЕЖИМЕ
   ============================================ */

#fullscreen-warning {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 999998;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.fullscreen-warning-content {
    color: white;
    padding: 40px;
    max-width: 600px;
}

.fullscreen-warning-icon {
    font-size: 100px;
    margin-bottom: 20px;
}

.fullscreen-warning-content h1 {
    font-size: 36px;
    color: #ff6600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 900;
    text-shadow: 0 0 15px #ff6600;
}

.fullscreen-warning-content h2 {
    font-size: 24px;
    color: #ffaa00;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.fullscreen-warning-text {
    font-size: 18px;
    color: #ddd;
    margin-bottom: 20px;
    line-height: 1.6;
}

.fullscreen-warning-text strong {
    color: #ff4444;
}

.fullscreen-warning-count {
    font-size: 16px;
    color: #ff6666;
    margin-bottom: 30px;
    padding: 15px;
    background: rgba(255, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid #ff4444;
}

.fullscreen-warning-count span {
    font-weight: bold;
    font-size: 24px;
    color: #ff4444;
}

.fullscreen-warning-btn {
    font-size: 20px !important;
    padding: 20px 40px !important;
    background: #ff6600 !important;
    border: none !important;
    animation: pulseBtn 1.5s infinite;
}

.fullscreen-warning-btn:hover {
    background: #ff8800 !important;
    transform: scale(1.05) !important;
}

@keyframes pulseBtn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 102, 0, 0.7); }
    50% { box-shadow: 0 0 0 15px rgba(255, 102, 0, 0); }
}

.fullscreen-warning-note {
    font-size: 14px;
    color: #888;
    margin-top: 20px;
}

/* ============================================
   АДМИН-ПАНЕЛЬ
   ============================================ */

#screen-admin {
    background: var(--bg);
    min-height: 100vh;
    padding: 0 !important;
    margin: 0;
}

#screen-admin.active {
    display: block;
    padding: 0 !important;
    margin: 0;
}

.admin-container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Sticky обёртка для header + tabs */
.admin-sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 20px 32px;
    background: #1e3a5f;
    border-radius: 0;
    box-shadow: none;
    color: white;
}

.admin-header h1 {
    margin: 0;
    color: white;
    font-size: 26px;
    font-weight: 700;
}

.admin-header p {
    color: rgba(255, 255, 255, 0.8) !important;
    margin: 4px 0 0 0 !important;
    font-size: 14px;
}

.admin-header .btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(10px);
}

.admin-header .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.admin-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 24px 32px;
}

.admin-section {
    background: var(--card);
    border-radius: 0;
    padding: 28px 32px;
    box-shadow: none;
}

.admin-section h2 {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--border);
    font-size: 20px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--border);
}

.section-header h2 {
    margin: 0;
    border: none;
    padding: 0;
    font-size: 22px;
}

/* Панель поиска и фильтров */
.search-filters-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.search-filters-bar .search-box {
    flex: 1;
    min-width: 200px;
    max-width: 350px;
}

.search-filters-bar .search-box input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--card);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-filters-bar .search-box input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-filters-bar .search-box input::placeholder {
    color: var(--text-secondary);
}

.search-filters-bar .btn-sm {
    padding: 10px 16px;
    font-size: 13px;
}

/* Адаптив для панели поиска */
@media (max-width: 768px) {
    .search-filters-bar {
        flex-direction: column;
    }

    .search-filters-bar .search-box {
        max-width: 100%;
        width: 100%;
    }

    .search-filters-bar .btn-sm {
        width: 100%;
    }
}

/* Список тестов */
.tests-list {
    display: grid;
    gap: 16px;
}

.test-card {
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    transition: all 0.2s;
}

.test-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.test-card.inactive {
    opacity: 0.6;
    background: var(--bg);
}

.test-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.test-card-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--primary);
}

.test-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.test-status.active {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.test-status.inactive {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
}

.test-card-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.test-card-info p {
    margin: 0;
    font-size: 14px;
    color: var(--text-light);
}

.test-card-info code {
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
    color: var(--primary);
    font-weight: 600;
}

/* Короткий код теста в карточке */
.test-short-code {
    display: inline-block;
    background: var(--primary);
    color: white !important;
    font-weight: 700;
    font-size: 1.1em;
    letter-spacing: 3px;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Consolas', 'Monaco', monospace;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.test-short-code:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.6);
}

.test-short-code:active {
    transform: scale(0.98);
}

.test-code-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.test-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Маленькие кнопки */
.btn-small {
    padding: 6px 12px;
    font-size: 13px;
    border: 1px solid var(--border);
    background: var(--bg);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-small:hover {
    background: var(--primary-light);
    color: white;
    border-color: var(--primary-light);
}

.btn-small.btn-danger {
    color: var(--danger);
    border-color: var(--danger);
}

.btn-small.btn-danger:hover {
    background: var(--danger);
    color: white;
}

/* Форма создания теста */
#test-form-container {
    border: 2px solid var(--accent);
}

#test-form .form-group {
    margin-bottom: 20px;
}

#test-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

#test-form input[type="text"],
#test-form input[type="number"] {
    width: 100%;
    max-width: 400px;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
}

#test-form input[type="text"]:focus,
#test-form input[type="number"]:focus {
    outline: none;
    border-color: var(--accent);
}

.sections-config {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.section-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: var(--bg);
    border-radius: 8px;
}

.section-row span {
    font-size: 14px;
}

.section-row input {
    width: 60px !important;
    text-align: center;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

/* Быстрые действия */
.quick-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Пустое состояние */
.empty-state {
    text-align: center;
    padding: 60px 40px;
    color: var(--text-light);
    background: rgba(240, 249, 255, 0.5);
    border-radius: 16px;
    border: 2px dashed var(--border);
}

.empty-state .empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.7;
}

.empty-state p {
    margin: 8px 0;
    font-size: 1.1rem;
}

.empty-state .hint {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Табы админ-панели */
.admin-tabs {
    display: flex;
    gap: 0;
    margin: 0;
    background: var(--card);
    padding: 0 32px;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
}

.admin-tab {
    padding: 16px 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-light);
    transition: all 0.2s;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.admin-tab:hover {
    background: transparent;
    color: var(--text);
    border-bottom-color: var(--border);
}

.admin-tab.active {
    background: transparent;
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
    box-shadow: none;
}

.admin-tab-content {
    display: none;
    padding: 24px 32px;
}

.admin-tab-content.active {
    display: block;
}

/* Форма в два столбца */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

/* Селекты */
select {
    width: 100%;
    max-width: 400px;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    background: var(--card);
    color: var(--text);
    cursor: pointer;
}

select:focus {
    outline: none;
    border-color: var(--accent);
}

/* Textarea */
textarea {
    width: 100%;
    max-width: 600px;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    background: var(--card);
    color: var(--text);
}

textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* Дисциплины */
.disciplines-list {
    display: grid;
    gap: 12px;
}

/* Вопросы */
.questions-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg);
    border-radius: 8px;
}

.questions-filter label {
    font-weight: 500;
}

.questions-filter select {
    max-width: 300px;
}

.questions-section {
    margin-bottom: 24px;
}

.questions-section h3 {
    margin: 0 0 12px 0;
    padding: 10px 16px;
    background: var(--bg);
    border-radius: 8px;
    font-size: 16px;
}

.question-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.question-card:last-child {
    border-bottom: none;
}

.question-text-preview {
    flex: 1;
    font-size: 14px;
    color: var(--text);
}

.question-actions {
    display: flex;
    gap: 6px;
    margin-left: 12px;
}

/* Редактор ответов */
.answer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px;
    background: var(--bg);
    border-radius: 8px;
}

.answer-row input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.answer-row .answer-letter {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    font-weight: 600;
    font-size: 14px;
}

.answer-row .answer-input {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
}

.answer-row .answer-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Результаты - новый гибкий дизайн */
.results-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bg);
    border-radius: 8px;
}

.results-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.result-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    border: 2px solid var(--border);
    border-radius: 12px;
    transition: all 0.2s;
    background: var(--card);
}

.result-card.has-violations {
    border-color: var(--danger);
    background: rgba(224, 128, 128, 0.05);
}

.result-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

/* Оценки с пастельными цветами */
.result-card.grade-5 {
    border-left: 5px solid var(--grade-5);
    background: rgba(34, 197, 94, 0.05);
}

.result-card.grade-4 {
    border-left: 5px solid var(--grade-4);
    background: rgba(59, 130, 246, 0.05);
}

.result-card.grade-3 {
    border-left: 5px solid var(--grade-3);
    background: rgba(234, 179, 8, 0.05);
}

.result-card.grade-2 {
    border-left: 5px solid var(--grade-2);
    background: rgba(239, 68, 68, 0.05);
}

.result-card.grade-pass {
    border-left: 5px solid var(--grade-5);
    background: rgba(34, 197, 94, 0.05);
}

.result-card.grade-fail {
    border-left: 5px solid var(--grade-2);
    background: rgba(239, 68, 68, 0.05);
}

/* Блок студента */
.result-student {
    flex: 1 1 200px;
    min-width: 180px;
}

.result-student strong {
    display: block;
    color: var(--primary);
    font-size: 15px;
    margin-bottom: 2px;
}

.result-group {
    font-size: 12px;
    color: var(--text-light);
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Блок теста и дисциплины */
.result-test-info {
    flex: 1 1 180px;
    min-width: 150px;
}

.result-test {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
}

.result-discipline {
    font-size: 11px;
    color: var(--accent);
    margin-top: 2px;
}

/* Блок результата */
.result-score {
    flex: 0 0 auto;
    text-align: center;
    min-width: 70px;
}

.result-score .score {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--primary);
}

.result-score .percent {
    font-size: 11px;
    color: var(--text-light);
}

/* Оценка */
.result-grade {
    flex: 0 0 50px;
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-card.grade-5 .result-grade {
    background: var(--grade-5);
    color: var(--grade-5-text);
}
.result-card.grade-4 .result-grade {
    background: var(--grade-4);
    color: var(--grade-4-text);
}
.result-card.grade-3 .result-grade {
    background: var(--grade-3);
    color: var(--grade-3-text);
}
.result-card.grade-2 .result-grade {
    background: var(--grade-2);
    color: var(--grade-2-text);
}
.result-card.grade-pass .result-grade {
    background: var(--grade-5);
    color: var(--grade-5-text);
}
.result-card.grade-fail .result-grade {
    background: var(--grade-2);
    color: var(--grade-2-text);
}

/* Нарушения */
.result-violations {
    flex: 0 0 auto;
    text-align: center;
    min-width: 90px;
}

.result-violations.danger {
    color: var(--danger);
}

.result-violations.safe {
    color: var(--success);
}

.violations-count {
    display: inline-block;
    background: var(--danger);
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.no-violations {
    display: inline-block;
    background: var(--grade-5);
    color: var(--grade-5-text);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

/* Мета информация */
.result-meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 100px;
}

.result-meta small {
    font-size: 11px;
    color: var(--text-light);
}

/* Действия */
.result-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ============================================
   ГРУППИРОВАННЫЕ РЕЗУЛЬТАТЫ (с попытками)
   ============================================ */

.result-card-grouped {
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    overflow: hidden;
    transition: all 0.2s;
}

.result-card-grouped:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

.result-card-grouped.has-violations {
    border-color: var(--danger);
}

.result-card-grouped.grade-5 { border-left: 5px solid var(--grade-5); }
.result-card-grouped.grade-4 { border-left: 5px solid var(--grade-4); }
.result-card-grouped.grade-3 { border-left: 5px solid var(--grade-3); }
.result-card-grouped.grade-2 { border-left: 5px solid var(--grade-2); }
.result-card-grouped.grade-pass { border-left: 5px solid var(--grade-5); }
.result-card-grouped.grade-fail { border-left: 5px solid var(--grade-2); }

.result-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.result-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
}

.result-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.result-photo-placeholder {
    font-size: 18px;
    opacity: 0.5;
}

.result-card-header .result-student {
    flex: 1 1 180px;
    min-width: 150px;
}

.result-card-header .result-test-info {
    flex: 1 1 160px;
    min-width: 140px;
}

.result-best {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.result-best .best-label {
    color: var(--text-light);
    font-size: 11px;
}

.result-best .best-score {
    font-weight: 600;
    color: var(--primary);
}

.result-best .best-percent {
    color: var(--accent);
    font-weight: 500;
}

.result-grade-best {
    font-size: 28px;
    font-weight: 700;
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-card-grouped.grade-5 .result-grade-best { background: var(--grade-5); color: var(--grade-5-text); }
.result-card-grouped.grade-4 .result-grade-best { background: var(--grade-4); color: var(--grade-4-text); }
.result-card-grouped.grade-3 .result-grade-best { background: var(--grade-3); color: var(--grade-3-text); }
.result-card-grouped.grade-2 .result-grade-best { background: var(--grade-2); color: var(--grade-2-text); }
.result-card-grouped.grade-pass .result-grade-best { background: var(--grade-5); color: var(--grade-5-text); font-size: 13px; width: auto; min-width: 45px; padding: 0 10px; white-space: nowrap; }
.result-card-grouped.grade-fail .result-grade-best { background: var(--grade-2); color: var(--grade-2-text); font-size: 13px; width: auto; min-width: 45px; padding: 0 10px; white-space: nowrap; }

.result-attempts-count {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    background: var(--border);
    color: var(--text-light);
}

.result-attempts-count.multiple {
    background: var(--accent);
    color: white;
    font-weight: 500;
}

.result-violations-summary {
    font-size: 14px;
    font-weight: 600;
    min-width: 40px;
    text-align: center;
}

.result-violations-summary.danger { color: var(--danger); }
.result-violations-summary.safe { color: var(--success); }

/* Штрафы преподавателя в сводке */
.result-teacher-penalty-summary {
    font-size: 14px;
    font-weight: 600;
    min-width: 40px;
    text-align: center;
}

.result-teacher-penalty-summary.warning { color: #d97706; }
.result-teacher-penalty-summary.safe { color: var(--text-light); }

/* Список попыток */
.result-attempts-list {
    padding: 8px 12px;
}

.attempts-header {
    display: grid;
    grid-template-columns: 60px 70px 50px 60px 40px 40px 120px 1fr;
    gap: 8px;
    padding: 6px 10px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.attempts-header span:last-child {
    text-align: right;
}

.attempt-row {
    display: grid;
    grid-template-columns: 60px 70px 50px 60px 40px 40px 120px 1fr;
    gap: 8px;
    padding: 8px 10px;
    align-items: center;
    border-radius: 6px;
    font-size: 13px;
    transition: background 0.15s;
}

.attempt-row:hover {
    background: var(--bg);
}

.attempt-row.best-attempt {
    background: rgba(168, 216, 197, 0.15);
    border: 1px solid var(--grade-5);
}

.attempt-num {
    font-weight: 600;
    color: var(--text-light);
}

.attempt-row.best-attempt .attempt-num {
    color: var(--grade-5-text);
}

.attempt-score {
    font-weight: 500;
}

.attempt-percent {
    color: var(--accent);
}

.attempt-grade {
    font-weight: 700;
    font-size: 16px;
    text-align: center;
}

.attempt-grade.grade-5 { color: var(--grade-5-text); }
.attempt-grade.grade-4 { color: var(--grade-4-text); }
.attempt-grade.grade-3 { color: var(--grade-3-text); }
.attempt-grade.grade-2 { color: var(--grade-2-text); }
.attempt-grade.grade-pass { color: var(--grade-5-text); font-size: 11px; }
.attempt-grade.grade-fail { color: var(--grade-2-text); font-size: 11px; }

.attempt-violations {
    text-align: center;
    font-size: 12px;
}

.attempt-violations.has-v {
    color: var(--danger);
    font-weight: 600;
}

.attempt-teacher-penalty {
    text-align: center;
    font-size: 12px;
    color: var(--text-light);
}

.attempt-teacher-penalty.has-penalty {
    color: #d97706;
    font-weight: 600;
}

.attempt-date {
    font-size: 11px;
    color: var(--text-light);
}

.attempt-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.attempt-actions .btn-small {
    padding: 4px 8px;
    font-size: 11px;
}

.btn-icon {
    width: 28px;
    height: 28px;
    border: none;
    background: var(--bg);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    color: var(--text);
}

.btn-icon:hover {
    background: var(--accent);
    color: #fff;
    transform: scale(1.1);
}

.btn-icon.btn-icon-danger:hover,
.btn-icon.btn-danger:hover {
    background: var(--danger);
    color: #fff;
}

/* Иконки через псевдоэлементы */
.btn-icon-edit::before {
    content: "\270F";
    font-size: 15px;
}

.btn-icon-delete::before {
    content: "\2715";
    font-size: 16px;
    font-weight: bold;
}

/* Адаптивность для группированных результатов */
@media (max-width: 900px) {
    .attempts-header,
    .attempt-row {
        grid-template-columns: 50px 60px 45px 50px 40px 100px 70px;
        gap: 4px;
        font-size: 11px;
    }

    .attempt-grade {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .result-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .attempts-header {
        display: none;
    }

    .attempt-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px;
        border-bottom: 1px solid var(--border);
    }

    .attempt-num {
        flex: 0 0 50px;
    }

    .attempt-score,
    .attempt-percent,
    .attempt-grade {
        flex: 0 0 auto;
    }

    .attempt-date {
        flex: 1 1 100%;
        order: 10;
    }

    .attempt-actions {
        flex: 1 1 100%;
        order: 11;
        justify-content: flex-start;
    }
}

/* Пользователи */
.users-list {
    display: grid;
    gap: 12px;
}

.user-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border: 2px solid var(--border);
    border-radius: 10px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-role {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.user-role.admin {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.user-role.teacher {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.user-role.education_dept {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.user-details {
    display: flex;
    gap: 16px;
}

.user-details small {
    color: var(--text-light);
}

/* Чекбокс-контейнер для пользователей */
.user-checkbox-container {
    margin-right: 12px;
}

/* Массовые операции */
.bulk-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 10px;
    margin-bottom: 12px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
}

.bulk-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.selected-count {
    font-size: 14px;
    color: var(--text-light);
    font-weight: 500;
}

/* Чекбоксы в списках */
.question-checkbox,
.result-checkbox,
.user-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
    flex-shrink: 0;
}

/* Контейнер чекбокса для вопросов */
.question-checkbox-container {
    margin-right: 12px;
}

/* ============================================
   НОВАЯ СТРАНИЦА ПОЛЬЗОВАТЕЛЕЙ
   ============================================ */

.users-page {
    max-width: 1200px;
    margin: 0 auto;
}

.users-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.users-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.users-subtitle {
    font-size: 14px;
    color: var(--text-light);
    margin: 4px 0 0;
}

.btn-add-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 15px;
}

.btn-add-user .btn-icon {
    font-size: 20px;
    font-weight: 300;
}

/* Статистика пользователей */
.users-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.user-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--card);
    border-radius: 16px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.3s;
}

.user-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.user-stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.user-stat-card .stat-icon.total {
    background: rgba(37, 99, 235, 0.15);
}

.user-stat-card .stat-icon.admin {
    background: rgba(139, 92, 246, 0.15);
}

.user-stat-card .stat-icon.teacher {
    background: rgba(16, 185, 129, 0.15);
}

.user-stat-card .stat-icon.edu {
    background: rgba(59, 130, 246, 0.15);
}

.user-stat-card .stat-info {
    display: flex;
    flex-direction: column;
}

.user-stat-card .stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.user-stat-card .stat-label {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 4px;
}

/* Тулбар поиска и фильтров */
.users-toolbar {
    background: var(--card);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.users-search-wrapper {
    position: relative;
    margin-bottom: 16px;
}

.users-search-wrapper .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: 0.5;
}

.users-search-wrapper input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 15px;
    background: var(--bg);
    color: var(--text);
    transition: all 0.2s;
}

.users-search-wrapper input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(107, 140, 174, 0.15);
}

.users-filters-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-chip {
    padding: 8px 16px;
    border: 2px solid var(--border);
    border-radius: 20px;
    background: transparent;
    color: var(--text-light);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.filter-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.users-filter-info {
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-light);
}

/* Сетка пользователей */
.users-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Новая карточка пользователя */
.user-card-new {
    background: var(--card);
    border-radius: 16px;
    border: 2px solid var(--border);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-card-new:hover {
    border-color: rgba(107, 140, 174, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.user-card-new.expanded {
    border-color: var(--accent);
    box-shadow: 0 8px 30px rgba(107, 140, 174, 0.2);
}

.user-card-main {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.user-card-main:hover {
    background: rgba(107, 140, 174, 0.05);
}

.user-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.user-avatar.admin {
    background: #7c3aed;
}

.user-avatar.teacher {
    background: #10b981;
}

.user-avatar.edu {
    background: var(--primary);
}

.user-avatar.has-photo {
    background: transparent;
    padding: 0;
    overflow: hidden;
}

.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.user-card-info {
    flex: 1;
    min-width: 0;
}

.user-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.user-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.user-role-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.user-role-badge.admin {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.user-role-badge.teacher {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.user-role-badge.edu {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.user-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.user-login {
    font-size: 13px;
    color: var(--text-light);
}

.user-meta-divider {
    color: var(--border);
}

.user-meta-item {
    font-size: 13px;
    color: var(--text-light);
}

.user-card-toggle {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--text-light);
    transition: all 0.3s;
    flex-shrink: 0;
}

.user-card-new.expanded .user-card-toggle {
    background: var(--accent);
    color: white;
    transform: rotate(180deg);
}

/* Детали пользователя (раскрывающаяся часть) */
.user-card-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-card-new.expanded .user-card-details {
    max-height: 600px;
}

.user-details-content {
    padding: 0 20px 20px;
    border-top: 1px solid var(--border);
    margin-top: 0;
    padding-top: 20px;
}

.user-detail-section {
    margin-bottom: 20px;
}

.detail-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.detail-section-icon {
    font-size: 18px;
}

.detail-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    flex: 1;
}

.detail-count {
    background: var(--bg);
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
}

.btn-outline {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-light);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.detail-section-body {
    background: var(--bg);
    border-radius: 12px;
    padding: 16px;
}

.groups-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.group-tag {
    padding: 6px 14px;
    background: rgba(14, 165, 233, 0.15);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
}

.empty-detail {
    color: var(--text-light);
    font-size: 13px;
    font-style: italic;
}

.disciplines-list-mini {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.discipline-item-mini {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--card);
    border-radius: 10px;
}

.discipline-name-mini {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.discipline-stats-mini {
    font-size: 12px;
    color: var(--text-light);
}

.discipline-item-mini.assigned {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.15);
}

.discipline-item-mini.assigned .discipline-name-mini {
    color: #059669;
}

.assigned-count {
    background: #10b981 !important;
}

.more-items {
    text-align: center;
    font-size: 13px;
    color: var(--text-light);
    padding: 8px;
}

.user-card-actions {
    display: flex;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    margin-top: 16px;
}

.btn-sm {
    padding: 10px 18px;
    font-size: 13px;
}

/* Адаптивность */
@media (max-width: 900px) {
    .users-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .users-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .btn-add-user {
        width: 100%;
        justify-content: center;
    }

    .users-stats-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .user-stat-card {
        padding: 14px;
    }

    .user-stat-card .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .user-stat-card .stat-value {
        font-size: 22px;
    }

    .user-card-main {
        padding: 16px;
    }

    .user-avatar {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .user-name {
        font-size: 15px;
    }

    .user-card-actions {
        flex-direction: column;
    }
}

/* Тёмная тема для страницы пользователей */
[data-theme="dark"] .user-stat-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .user-stat-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .users-toolbar {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .users-search-wrapper input {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .filter-chip {
    border-color: #334155;
}

[data-theme="dark"] .filter-chip:hover {
    border-color: #3b82f6;
    color: #60a5fa;
}

[data-theme="dark"] .filter-chip.active {
    background: #3b82f6;
    border-color: #3b82f6;
}

[data-theme="dark"] .user-card-new {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .user-card-new:hover {
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .user-card-new.expanded {
    border-color: #3b82f6;
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .user-card-main:hover {
    background: rgba(59, 130, 246, 0.05);
}

[data-theme="dark"] .user-card-toggle {
    background: #334155;
}

[data-theme="dark"] .user-card-new.expanded .user-card-toggle {
    background: #3b82f6;
}

[data-theme="dark"] .detail-section-body {
    background: #0f172a;
}

[data-theme="dark"] .discipline-item-mini {
    background: #1e293b;
}

[data-theme="dark"] .group-tag {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

/* Модальное окно редактирования пользователя */
.edit-user-modal-new {
    max-width: 600px;
}

.edit-user-layout-new {
    display: flex;
    gap: 30px;
}

.edit-user-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.edit-avatar-preview {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white;
    font-size: 48px;
    font-weight: 700;
}

.edit-avatar-preview.admin {
    background: #7c3aed;
}

.edit-avatar-preview.teacher {
    background: #10b981;
}

.edit-avatar-preview.edu {
    background: var(--primary);
}

.edit-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edit-avatar-preview .avatar-letter {
    font-size: 48px;
    font-weight: 700;
}

.edit-avatar-upload-btn {
    padding: 10px 16px;
    background: var(--bg);
    border: 2px dashed var(--border);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.edit-avatar-upload-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(107, 140, 174, 0.05);
}

.edit-avatar-remove-btn {
    background: transparent;
    border: none;
    color: var(--danger);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
}

.edit-avatar-remove-btn:hover {
    text-decoration: underline;
}

.edit-user-data-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.role-selector-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.role-chip-compact {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.role-chip-compact input {
    display: none;
}

.role-chip-compact:hover {
    border-color: var(--accent);
}

.role-chip-compact.active {
    border-color: var(--accent);
    background: rgba(107, 140, 174, 0.1);
    color: var(--accent);
}

/* Темная тема */
[data-theme="dark"] .edit-avatar-upload-btn {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .edit-avatar-upload-btn:hover {
    border-color: #3b82f6;
    color: #60a5fa;
}

[data-theme="dark"] .role-chip-compact {
    border-color: #334155;
}

[data-theme="dark"] .role-chip-compact:hover {
    border-color: #3b82f6;
}

[data-theme="dark"] .role-chip-compact.active {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

@media (max-width: 600px) {
    .edit-user-layout-new {
        flex-direction: column;
        align-items: center;
    }

    .edit-user-avatar-section {
        margin-bottom: 16px;
    }
}

/* ============================================
   РЕДАКТОР АВАТАРКИ
   ============================================ */

.avatar-editor-modal {
    max-width: 420px;
    width: 95%;
}

.avatar-editor-modal .system-modal-header {
    position: relative;
}

.avatar-editor-modal .modal-close-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg);
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.avatar-editor-modal .modal-close-btn:hover {
    background: var(--danger);
    color: white;
}

.avatar-editor-hint {
    text-align: center;
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 20px;
}

.avatar-editor-container {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.avatar-crop-area {
    width: 280px;
    height: 280px;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #1a1a2e;
    cursor: grab;
    touch-action: none;
}

.avatar-crop-area.dragging {
    cursor: grabbing;
}

.avatar-crop-area img {
    position: absolute;
    max-width: none;
    max-height: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* Затемнение за пределами круга */
.avatar-crop-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center,
        transparent 0%,
        transparent 45%,
        rgba(0, 0, 0, 0.7) 45%,
        rgba(0, 0, 0, 0.7) 100%
    );
    pointer-events: none;
}

/* Круг выделения */
.avatar-crop-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 260px;
    height: 260px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.avatar-editor-controls {
    padding: 0 10px;
}

.zoom-control {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg);
    padding: 12px 16px;
    border-radius: 12px;
}

.zoom-label {
    font-size: 18px;
    flex-shrink: 0;
}

.zoom-control input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    outline: none;
}

.zoom-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s;
}

.zoom-control input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.zoom-control input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.zoom-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    min-width: 50px;
    text-align: right;
}

/* Тёмная тема для редактора аватарки */
[data-theme="dark"] .avatar-editor-modal .modal-close-btn {
    background: #334155;
}

[data-theme="dark"] .zoom-control {
    background: #1e293b;
}

[data-theme="dark"] .zoom-control input[type="range"] {
    background: #334155;
}

[data-theme="dark"] .zoom-control input[type="range"]::-webkit-slider-thumb {
    background: #3b82f6;
    border-color: #1e293b;
}

[data-theme="dark"] .avatar-crop-circle {
    border-color: rgba(255, 255, 255, 0.8);
}

/* Адаптивность редактора */
@media (max-width: 400px) {
    .avatar-crop-area {
        width: 240px;
        height: 240px;
    }

    .avatar-crop-circle {
        width: 220px;
        height: 220px;
    }
}

/* Новые стили для редактора аватарки с canvas */
#avatar-editor-container,
#user-avatar-editor-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

#avatar-editor-canvas,
#user-avatar-editor-canvas {
    display: block;
    border-radius: 8px;
}

.avatar-zoom-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 280px;
    padding: 8px 0;
}

.avatar-zoom-controls .zoom-icon {
    font-size: 14px;
    opacity: 0.7;
    flex-shrink: 0;
}

.avatar-zoom-controls input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    outline: none;
}

.avatar-zoom-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s;
}

.avatar-zoom-controls input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.avatar-zoom-controls input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.avatar-hint {
    font-size: 0.8rem;
    color: var(--text-light);
    text-align: center;
    margin: 0;
}

[data-theme="dark"] .avatar-zoom-controls input[type="range"] {
    background: #334155;
}

[data-theme="dark"] .avatar-zoom-controls input[type="range"]::-webkit-slider-thumb {
    background: #3b82f6;
    border-color: #1e293b;
}

/* Контейнер чекбокса для результатов */
.result-checkbox-container {
    margin-right: 12px;
}

/* Header actions */
.header-actions {
    display: flex;
    gap: 8px;
}

/* Адаптивность админ-панели */
@media (max-width: 768px) {
    .admin-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .admin-tabs {
        justify-content: center;
    }

    .admin-tab {
        padding: 10px 14px;
        font-size: 12px;
    }

    .section-header {
        flex-direction: column;
        gap: 12px;
    }

    .header-actions {
        flex-direction: column;
        width: 100%;
    }

    .test-card-actions {
        justify-content: center;
    }

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

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

    .sections-config {
        grid-template-columns: 1fr;
    }

    .result-card {
        grid-template-columns: 1fr 1fr;
        text-align: center;
        gap: 12px;
    }

    .result-student {
        grid-column: 1 / -1;
    }

    .result-meta {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        grid-column: 1 / -1;
    }

    .result-actions {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .discipline-card {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .user-card {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .user-info {
        flex-direction: column;
    }

    .user-details {
        flex-direction: column;
        gap: 4px;
    }
}

/* ============================================
   НОВЫЕ СТИЛИ ДЛЯ СТРУКТУРЫ
   Дисциплины → Темы → Тесты
   ============================================ */

/* Модальные окна */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: modalFadeIn 0.2s ease;
}

/* Универсальный overlay для модальных окон */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: modalFadeIn 0.2s ease;
}

.modal-overlay .modal {
    position: relative;
    background: white;
    border-radius: 20px;
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

.modal-overlay .modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
}

.modal-overlay .modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s;
}

.modal-overlay .modal-close:hover {
    background: #fee2e2;
    color: #dc2626;
}

.modal-overlay .modal-body {
    padding: 24px 28px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.modal-overlay .modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px 28px 24px;
    justify-content: flex-end;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
    background: white;
}

.modal-overlay .modal-footer .btn {
    min-width: 100px;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

/* Чекбоксы в модальных окнах */
.checkbox-list,
.teachers-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}

.checkbox-item:hover {
    background: #f1f5f9;
}

.checkbox-item:has(input:checked) {
    background: #eff6ff;
    border-color: #3b82f6;
}

.checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #3b82f6;
    cursor: pointer;
}

.checkbox-item span {
    font-size: 0.95rem;
    color: #374151;
}

/* Тёмная тема для modal-overlay */
[data-theme="dark"] .modal-overlay .modal {
    background: #1e293b;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .modal-overlay .modal-header {
    border-bottom-color: #334155;
    background: #1e293b;
}

[data-theme="dark"] .modal-overlay .modal-header h3 {
    color: #f1f5f9;
}

[data-theme="dark"] .modal-overlay .modal-close {
    background: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .modal-overlay .modal-close:hover {
    background: #7f1d1d;
    color: #fecaca;
}

[data-theme="dark"] .modal-overlay .modal-footer {
    border-top-color: #334155;
    background: #1e293b;
}

[data-theme="dark"] .checkbox-item {
    background: #334155;
}

[data-theme="dark"] .checkbox-item:hover {
    background: #475569;
}

[data-theme="dark"] .checkbox-item:has(input:checked) {
    background: #1e3a5f;
    border-color: #3b82f6;
}

[data-theme="dark"] .checkbox-item span {
    color: #e2e8f0;
}

.modal-content {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-content.modal-large {
    max-width: 800px;
    max-height: calc(100vh - 60px);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
}

/* Body модального окна - растягивается и прокручивается */
.modal-body,
#questions-content,
.modal-content > div:not(.modal-header):not(.modal-footer) {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.btn-close {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg);
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    transition: all 0.2s;
}

.btn-close:hover {
    background: var(--danger);
    color: white;
}

.modal-content form {
    padding: 24px;
}

/* Сетка дисциплин */
.disciplines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.discipline-card {
    background: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 20px rgba(37, 99, 235, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05);
}

.discipline-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--primary);
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.discipline-card::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(37, 99, 235, 0.02);
    pointer-events: none;
}

.discipline-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 40px rgba(37, 99, 235, 0.2),
        0 8px 16px rgba(14, 165, 233, 0.15);
}

.discipline-card:hover::before {
    background: var(--accent);
}

.discipline-card-inner {
    padding: 18px 16px 16px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.discipline-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-top: 4px;
    gap: 8px;
}

.discipline-card-header h3 {
    margin: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    word-break: break-word;
    overflow-wrap: break-word;
    flex: 1;
    min-width: 0;
}

.discipline-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(37, 99, 235, 0.1);
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 10px;
    border: 1px solid rgba(37, 99, 235, 0.15);
    max-width: 100%;
    word-break: break-word;
    line-height: 1.4;
}

.discipline-group .group-label {
    opacity: 0.7;
    font-weight: 500;
    flex-shrink: 0;
}

.discipline-teachers {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 12px;
    font-size: 0.7rem;
    color: #059669;
    font-weight: 500;
    margin-bottom: 10px;
    border: 1px solid rgba(16, 185, 129, 0.15);
    max-width: 100%;
    word-break: break-word;
    line-height: 1.4;
}

.discipline-teachers .teacher-label {
    opacity: 0.7;
    flex-shrink: 0;
}

.discipline-teachers .teacher-names {
    word-break: break-word;
    overflow-wrap: break-word;
}

.discipline-assigned {
    border-left: 4px solid #06b6d4 !important;
}

.assigned-badge {
    font-size: 1rem;
    margin-left: 8px;
}

.teacher-badge {
    font-size: 0.9rem !important;
    background: transparent !important;
}

.discipline-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px;
    margin: 10px -16px -16px;
    background: #f0f9ff;
    border-top: 1px solid rgba(37, 99, 235, 0.1);
}

.discipline-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.discipline-card:hover .discipline-stats .stat-item {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}

.discipline-stats .stat-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
}

.discipline-stats .stat-label {
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 4px;
    font-weight: 600;
}

.discipline-author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin: 0 -16px;
    background: transparent;
    border-top: 1px solid rgba(102, 126, 234, 0.08);
    font-size: 0.75rem;
    color: #64748b;
    word-break: break-word;
    overflow-wrap: break-word;
}

.discipline-author .author-label {
    font-weight: 500;
    opacity: 0.7;
    flex-shrink: 0;
}

.discipline-actions {
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
}

.discipline-card:hover .discipline-actions {
    opacity: 1;
    transform: translateX(0);
}

.discipline-actions .btn-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    font-size: 0.8rem;
}

.discipline-actions .btn-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.discipline-actions .btn-icon.btn-danger:hover {
    background: #fee2e2;
}

/* Список тем */
.topics-list {
    display: grid;
    gap: 12px;
}

.topic-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.topic-card:hover {
    border-color: var(--accent);
    background: rgba(15, 52, 96, 0.02);
}

.topic-info h3 {
    margin: 0 0 4px 0;
    font-size: 1rem;
}

.topic-tests-count {
    color: var(--text-light);
    font-size: 0.85rem;
}

.topic-actions {
    display: flex;
    gap: 8px;
}

/* Хлебные крошки */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.breadcrumb a {
    color: var(--accent);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span {
    color: var(--text-light);
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-icon-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 12px;
    padding: 12px 24px;
    background: var(--bg);
    border-radius: 8px;
    display: inline-block;
    border: 1px dashed var(--border);
}

.empty-state p {
    margin: 0 0 8px 0;
}

.empty-state .hint {
    font-size: 0.9rem;
}

/* Лейблы для карточек */
.author-label,
.group-label {
    color: var(--text-light);
    font-weight: 500;
    margin-right: 4px;
}

.discipline-author,
.topic-author,
.test-author {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 8px;
}

.empty-hint {
    text-align: center;
    color: var(--text-light);
    padding: 40px;
}

/* Список тестов */
.tests-list {
    display: grid;
    gap: 16px;
}

.test-link {
    background: var(--bg);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Управление вопросами */
.questions-header-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.questions-header-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.questions-test-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.questions-test-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}

.questions-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.questions-header-actions .btn {
    white-space: nowrap;
}

.btn-icon-inline {
    margin-right: 4px;
}

/* Устаревший класс - оставляем для совместимости */
.questions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.questions-header h3 {
    margin: 0;
}

.questions-header > div {
    display: flex;
    gap: 8px;
}

.question-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

.question-number {
    width: 28px;
    height: 28px;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.question-text {
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.5;
}

.question-type-badge {
    font-size: 1rem;
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg);
}

.question-weight-badge {
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--primary);
    color: white;
}

/* Иконка наличия картинки в вопросе */
.question-has-image {
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-right: 4px;
}

/* Редактор ответов в модальном окне */
.answers-editor {
    margin-top: 8px;
    max-height: 400px;
    overflow-y: auto;
}

/* Кнопка удаления варианта ответа */
.btn-danger-icon {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.btn-danger-icon:hover {
    background: var(--danger);
    color: white;
}

.answers-editor .answer-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: var(--bg);
    border-radius: 8px;
}

.answers-editor .answer-row input[type="radio"] {
    width: 18px;
    height: 18px;
}

.answers-editor .answer-row span {
    width: 24px;
    font-weight: 600;
    color: var(--accent);
}

.answers-editor .answer-row input[type="text"] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
}

/* Редактор пар для сопоставления */
.pairs-editor {
    margin-top: 8px;
}

.pair-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: var(--bg);
    border-radius: 8px;
}

.pair-row-extended {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 8px 12px;
    background: var(--bg);
    border-radius: 8px;
}

.pair-left-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pair-left-container input[type="text"] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text);
}

.pair-left-container input[type="text"]:focus {
    border-color: var(--primary);
    outline: none;
}

.pair-left-image-preview {
    width: 80px;
    height: 60px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
}

.pair-left-image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Новый редактор пар сопоставления */
.match-pair-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}

.match-pair-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.match-pair-number {
    font-weight: 600;
    color: var(--primary);
    font-size: 0.9rem;
}

.match-pair-content {
    display: flex;
    gap: 12px;
    padding: 12px;
    align-items: flex-start;
}

.match-pair-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.match-pair-side label {
    font-size: 0.8rem;
    color: var(--text-light);
    font-weight: 500;
}

.match-pair-side input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.95rem;
}

.match-pair-side input[type="text"]:focus {
    border-color: var(--primary);
    outline: none;
}

.match-pair-arrow {
    font-size: 1.5rem;
    color: var(--primary);
    font-weight: bold;
    padding-top: 28px;
    flex-shrink: 0;
}

.match-pair-image-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.match-pair-image-preview {
    position: relative;
    width: 100%;
    max-width: 120px;
    height: 80px;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg);
}

.match-pair-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.match-pair-image-preview .btn-remove-img {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--danger, #dc3545);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.match-pair-image-preview:hover .btn-remove-img {
    opacity: 1;
}

.btn-upload-image {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-light);
    transition: all 0.2s;
}

.btn-upload-image:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
}

.btn-upload-image.has-image {
    background: var(--success-light, #d4edda);
    border-color: var(--success, #28a745);
    border-style: solid;
    color: var(--success, #28a745);
}

/* Адаптив для редактора пар */
@media (max-width: 600px) {
    .match-pair-content {
        flex-direction: column;
    }

    .match-pair-arrow {
        padding: 0;
        align-self: center;
        transform: rotate(90deg);
    }
}

/* Стили для отображения сопоставления студентам */
.match-item-image {
    max-width: 100px;
    max-height: 80px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.match-item-image:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.match-item-text {
    display: inline;
}

/* Режим с кнопками (когда есть картинки справа) */
.match-with-images .match-row {
    flex-direction: column;
    align-items: stretch;
}

.match-with-images .match-left {
    margin-bottom: 8px;
}

.match-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.match-option-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 80px;
}

.match-option-btn:hover {
    border-color: var(--accent);
    background: var(--primary-light);
}

.match-option-btn.selected {
    border-color: var(--accent);
    background: var(--accent);
    color: white;
}

.match-option-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.match-btn-image {
    max-width: 60px;
    max-height: 50px;
    object-fit: contain;
    border-radius: 4px;
}

.match-hint-image {
    max-width: 40px;
    max-height: 30px;
    object-fit: contain;
    vertical-align: middle;
    margin: 0 4px;
    border-radius: 3px;
}

/* Старые стили (для обратной совместимости) */
.btn-pair-image {
    padding: 6px 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.btn-pair-image:hover {
    background: var(--primary-light);
    border-color: var(--primary);
}

.btn-pair-image.has-image {
    background: var(--success-light, #d4edda);
    border-color: var(--success, #28a745);
}

.pair-image-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    margin-left: 20px;
    padding: 8px 12px;
    background: var(--bg);
    border-radius: 6px;
    border-left: 3px solid var(--primary);
}

.pair-row-extended .pair-right {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text);
}

.pair-row-extended .pair-right:focus {
    border-color: var(--primary);
    outline: none;
}

.pair-row input[type="text"] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text);
}

.pair-row input[type="text"]:focus {
    border-color: var(--primary);
    outline: none;
}

.pair-arrow {
    color: var(--primary);
    font-weight: 600;
    font-size: 1.2rem;
}

/* Подзаголовок */
.subtitle {
    color: var(--text-light);
    font-size: 0.9rem;
    margin: 4px 0 0 0;
}

/* Строка формы */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

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

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

    .questions-header {
        flex-direction: column;
        gap: 12px;
    }
}

/* ============================================
   ДОПОЛНИТЕЛЬНЫЕ СТИЛИ
   ============================================ */

/* Подсказки в формах */
.form-hint {
    color: var(--text-light);
    font-size: 0.8rem;
    margin-top: 6px;
    line-height: 1.4;
}

small.form-hint {
    display: block;
}

/* Заголовок секции формы */
.form-section-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
    margin: 20px 0 12px 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* Средний размер модального окна */
.modal-content.modal-medium {
    max-width: 500px;
    padding: 0;
}

/* Простой заголовок модального окна */
.modal-header-simple {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.modal-header-simple h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text);
}

/* Контент формы дисциплины */
.discipline-form-content {
    padding: 0;
}

/* Секции формы */
.form-section {
    border-bottom: 1px solid var(--border);
}

.form-section:last-of-type {
    border-bottom: none;
}

.form-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px 8px;
    background: var(--surface);
}

.form-section-icon {
    font-size: 1.2rem;
}

.form-section-title {
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}

.form-section-hint {
    color: var(--text-light);
    font-size: 0.85rem;
    font-weight: normal;
}

.form-section-body {
    padding: 8px 24px 20px;
}

/* Большой инпут */
.input-large {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    transition: all 0.2s;
}

.input-large:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.input-large::placeholder {
    color: var(--text-light);
}

/* Сетка выбора групп */
.groups-select-list {
    min-height: 60px;
}

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

/* Карточка группы для выбора */
.group-select-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 12px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    min-height: 70px;
}

.group-select-card:hover {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.05);
}

.group-select-card.selected {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.1);
}

.group-select-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.group-select-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 4px;
}

.group-select-count {
    font-size: 0.8rem;
    color: var(--text-light);
}

.group-select-card.selected .group-select-name {
    color: var(--primary);
}

/* Пустое состояние групп */
.groups-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    color: var(--text-light);
}

.groups-empty-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    opacity: 0.5;
}

.groups-empty-state p {
    margin: 0 0 4px;
    font-weight: 500;
    color: var(--text);
}

.groups-empty-state small {
    font-size: 0.85rem;
}

/* Нижние кнопки формы */
.form-actions-bottom {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.form-actions-bottom .btn {
    flex: 1;
}

/* Большие кнопки */
.btn-large {
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
}

/* Тёмная тема */
[data-theme="dark"] .modal-header-simple {
    background: #1e293b;
}

[data-theme="dark"] .form-section-header {
    background: #1e293b;
}

[data-theme="dark"] .form-actions-bottom {
    background: #1e293b;
}

[data-theme="dark"] .group-select-card {
    background: #0f172a;
}

[data-theme="dark"] .group-select-card:hover {
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .group-select-card.selected {
    background: rgba(59, 130, 246, 0.15);
}

/* Статус теста - запланированный */
.test-status.scheduled {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

/* Информация экспорта */
.export-info {
    padding: 16px 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.export-info p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Textarea для экспорта */
#export-content {
    width: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    max-width: none;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    background: #1e1e1e;
    color: #d4d4d4;
    padding: 16px 24px;
}

/* Input datetime-local */
input[type="datetime-local"] {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    background: var(--card);
    color: var(--text);
}

input[type="datetime-local"]:focus {
    outline: none;
    border-color: var(--accent);
}

/* Контент модального окна вопросов */
#questions-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
}

/* Заголовок вопросов с фиксированной позицией */
#questions-content .questions-header {
    flex-shrink: 0;
}

.questions-list {
    flex: 1;
    overflow-y: auto;
    min-height: 100px;
    max-height: none;
}

/* ============================================
   МОДАЛЬНОЕ ОКНО ДОСТУПА К ТЕСТУ
   ============================================ */

.access-modal-body {
    padding: 24px;
}

.access-modal-body h3 {
    margin: 0 0 20px 0;
    color: var(--primary);
}

.access-section {
    margin-bottom: 24px;
}

.access-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text);
}

.access-link-box {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.access-link-box input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg);
}

/* Кликабельная ссылка в модалке доступа */
.access-link-clickable {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    border: 2px solid var(--primary);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg);
    color: var(--primary);
    text-decoration: none;
    word-break: break-all;
    transition: all 0.2s ease;
}

.access-link-clickable:hover {
    background: var(--primary);
    color: white;
}

.qr-code-box {
    text-align: center;
    padding: 20px;
    background: var(--bg);
    border-radius: 12px;
    margin-bottom: 12px;
}

.qr-code-box img {
    max-width: 200px;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.qr-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.access-info {
    padding: 16px;
    background: var(--bg);
    border-radius: 8px;
    margin-top: 16px;
}

.access-info p {
    margin: 4px 0;
    font-size: 0.9rem;
}

/* ============================================
   МОДАЛЬНОЕ ОКНО ДУБЛИРОВАНИЯ
   ============================================ */

.duplicate-modal-body {
    padding: 24px;
}

.duplicate-preview {
    background: var(--bg);
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.duplicate-preview h3 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    color: var(--primary);
}

.duplicate-settings {
    display: grid;
    gap: 8px;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
}

.setting-label {
    color: var(--text-light);
    font-size: 0.9rem;
}

.setting-value {
    font-weight: 500;
    color: var(--text);
}

.duplicate-modal-body .form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.duplicate-modal-body .form-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* ============================================
   МОДАЛЬНОЕ ОКНО УДАЛЕНИЯ
   ============================================ */

.delete-confirm-body {
    padding: 24px;
    text-align: center;
}

.delete-warning-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.delete-confirm-body h3 {
    margin: 12px 0;
    color: var(--primary);
}

.delete-warning {
    color: var(--danger);
    font-weight: 500;
    padding: 12px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    margin-top: 16px;
}

/* ============================================
   БАННЕР НАРУШЕНИЯ (5 секунд)
   ============================================ */

#violation-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 999997;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    animation: bannerPulse 0.5s ease;
}

@keyframes bannerPulse {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

.violation-banner-content {
    color: white;
    padding: 40px;
    max-width: 600px;
}

.violation-banner-icon {
    font-size: 120px;
    margin-bottom: 20px;
    animation: iconShake 0.5s ease-in-out;
}

@keyframes iconShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.violation-banner-content h1 {
    font-size: 42px;
    color: #ff0000;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 900;
    text-shadow: 0 0 30px #ff0000, 0 0 60px #ff0000;
    animation: textGlow 1s ease-in-out infinite alternate;
}

@keyframes textGlow {
    from { text-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000; }
    to { text-shadow: 0 0 40px #ff0000, 0 0 80px #ff0000; }
}

.violation-banner-content h2 {
    font-size: 28px;
    color: #ff4444;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.violation-banner-text {
    font-size: 20px;
    color: #fff;
    margin-bottom: 20px;
    line-height: 1.6;
}

.violation-banner-text strong {
    color: #ff6666;
}

.violation-banner-warning {
    color: #ffcc00 !important;
    font-size: 18px !important;
    margin-bottom: 30px;
    padding: 15px;
    border: 2px solid #ffcc00;
    border-radius: 10px;
    background: rgba(255, 204, 0, 0.1);
}

.violation-banner-counter {
    font-size: 18px;
    color: #888;
    margin-bottom: 20px;
}

.violation-banner-counter span {
    font-size: 48px;
    font-weight: 900;
    color: #ff4444;
    display: block;
    margin-top: 10px;
}

.violation-banner-student {
    margin-top: 20px;
    font-size: 16px;
    color: #666;
    font-family: monospace;
}

/* Адаптивность баннера нарушений */
@media (max-width: 640px) {
    .violation-banner-content {
        padding: 20px;
    }

    .violation-banner-icon {
        font-size: 80px;
        margin-bottom: 15px;
    }

    .violation-banner-content h1 {
        font-size: 28px;
        letter-spacing: 2px;
    }

    .violation-banner-content h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .violation-banner-text {
        font-size: 16px;
    }

    .violation-banner-warning {
        font-size: 14px !important;
        padding: 12px;
    }

    .violation-banner-counter span {
        font-size: 36px;
    }
}

/* ============================================
   НОВЫЕ СТИЛИ ДЛЯ АДМИН-ПАНЕЛИ
   ============================================ */

/* Автообновление и кнопки */
.header-buttons {
    display: flex;
    gap: 8px;
}

.auto-refresh-indicator {
    font-size: 0.8rem;
    color: var(--success);
    background: rgba(16, 185, 129, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    margin-left: 12px;
}

/* Кнопки с текстом вместо эмодзи */
.btn-text {
    font-size: 0.75rem !important;
    padding: 6px 12px !important;
    white-space: nowrap;
}

.btn-small.btn-text {
    min-width: auto;
}

/* Анимации для уведомлений */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Уведомление о новых результатах */
.notification {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-icon {
    width: 24px;
    height: 24px;
    background: white;
    color: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Улучшенные стили для результатов */
.result-violations.danger {
    color: var(--danger);
    font-weight: 600;
}

.result-violations.safe {
    color: var(--success);
}

.violations-count {
    display: inline-block;
    background: var(--danger);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
    min-width: max-content;
}

.no-violations {
    display: inline-block;
    background: var(--success);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Колонка нарушений в таблице результатов */
.result-violations {
    text-align: center;
    min-width: 100px;
}

/* Расширенные фильтры результатов */
.results-filters {
    background: var(--bg);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

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

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-light);
}

.filter-group input,
.filter-group select {
    width: 100%;
    max-width: none;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--card);
}

.filter-group input:focus,
.filter-group select:focus {
    outline: none;
    border-color: var(--accent);
}

.filter-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

#results-count {
    font-weight: 600;
    color: var(--primary);
}

/* Информация о тесте и дисциплине в результатах */
.result-test-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.result-discipline {
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: 500;
}

/* Автор элемента */
.item-author {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-light);
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

.item-author-icon {
    opacity: 0.6;
}

.discipline-author,
.topic-author,
.test-author {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text);
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* ============================================
   ИМПОРТ GIFT - ТАБЫ И ЗАГРУЗКА ФАЙЛА
   ============================================ */

.import-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.import-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: var(--bg);
    cursor: pointer;
    font-size: 14px;
    color: var(--text-light);
    transition: all 0.2s;
}

.import-tab:hover {
    background: var(--bg-secondary);
}

.import-tab.active {
    background: var(--primary);
    color: white;
}

.import-tab-content {
    animation: fadeIn 0.2s ease;
}

.file-upload-area {
    position: relative;
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    transition: all 0.2s;
    background: var(--bg);
}

.file-upload-area:hover {
    border-color: var(--primary);
    background: rgba(74, 107, 223, 0.05);
}

.file-upload-area.has-file {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.05);
}

.file-upload-area input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.file-upload-placeholder .file-icon {
    font-size: 48px;
    opacity: 0.5;
}

.file-upload-placeholder p {
    margin: 0;
    color: var(--text-light);
}

.file-upload-placeholder .hint {
    font-size: 12px;
    opacity: 0.7;
}

.file-upload-selected {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px;
}

.file-upload-selected .file-icon {
    font-size: 32px;
    color: var(--success);
}

.file-upload-selected p {
    margin: 0;
    font-weight: 600;
    color: var(--success);
    font-size: 14px;
}

.file-upload-selected .btn-icon {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
    border-radius: 4px;
}

.file-upload-selected .btn-icon:hover {
    background: var(--bg-secondary);
    color: var(--danger);
}

/* Адаптивность результатов */
@media (max-width: 900px) {
    .filter-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .filter-row {
        grid-template-columns: 1fr;
    }

    .filter-info {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .result-card {
        padding: 16px;
    }

    .result-student {
        flex: 1 1 100%;
    }

    .result-test-info {
        flex: 1 1 100%;
    }

    .result-actions {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ============================================
   ЛИЧНЫЙ КАБИНЕТ
   ============================================ */

.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.profile-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

.profile-card h3 {
    margin: 0 0 16px 0;
    color: var(--primary);
    font-size: 1.1rem;
}

.profile-card-wide {
    grid-column: 1 / -1;
}

.profile-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    position: relative;
    overflow: hidden;
}

.profile-avatar.clickable {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.profile-avatar.clickable:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar .avatar-initials {
    color: white;
    font-size: 28px;
    font-weight: 600;
}

.profile-avatar .avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    font-size: 24px;
}

.profile-avatar.clickable:hover .avatar-overlay {
    opacity: 1;
}

.profile-details {
    flex: 1;
}

.profile-name {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--text);
}

.profile-role {
    margin: 0 0 4px 0;
    color: var(--primary);
    font-weight: 500;
}

.profile-login {
    margin: 0;
    color: var(--text-light);
    font-size: 14px;
}

.password-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.password-section h4 {
    margin: 0 0 16px 0;
    color: var(--text);
    font-size: 15px;
}

.password-form .form-group {
    margin-bottom: 12px;
}

.password-form label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    color: var(--text-light);
}

.password-form input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
}

.password-form input[type="password"]:focus {
    outline: none;
    border-color: var(--primary);
}

.card-description {
    color: var(--text-light);
    margin: 0 0 20px 0;
    font-size: 14px;
}

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

.telegram-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--text);
}

.telegram-form input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
}

.telegram-form input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
}

.telegram-form small {
    display: block;
    margin-top: 4px;
    color: var(--text-light);
    font-size: 12px;
}

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

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.telegram-instructions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.instruction-step {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--bg);
    border-radius: 10px;
}

.step-number {
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

.step-content h4 {
    margin: 0 0 8px 0;
    color: var(--text);
    font-size: 15px;
}

.step-content p {
    margin: 0 0 6px 0;
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.5;
}

.step-content p:last-child {
    margin-bottom: 0;
}

.step-content a {
    color: var(--primary);
    text-decoration: none;
}

.step-content a:hover {
    text-decoration: underline;
}

.step-content code {
    background: rgba(74, 107, 223, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    color: var(--primary);
}

.step-content .warning {
    color: var(--warning);
    font-weight: 500;
}

@media (max-width: 900px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .telegram-instructions {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   ИНТЕРАКТИВНЫЙ ГИД (TOUR)
   ============================================ */

#tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}

.tour-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.tour-tooltip {
    position: fixed;
    background: white;
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 10002;
    animation: tourFadeIn 0.3s ease;
}

.tour-tooltip.center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes tourFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes tourPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(74, 144, 217, 0.3), 0 0 0 9999px rgba(0, 0, 0, 0.5); }
    50% { box-shadow: 0 0 0 8px rgba(74, 144, 217, 0.5), 0 0 0 9999px rgba(0, 0, 0, 0.5); }
}

.tour-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.tour-step-number {
    background: var(--accent);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.tour-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg);
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-light);
    transition: all 0.2s;
}

.tour-close:hover {
    background: var(--danger);
    color: white;
}

.tour-tooltip h3 {
    margin: 0 0 12px 0;
    color: var(--primary);
    font-size: 1.2rem;
}

.tour-tooltip p {
    margin: 0 0 20px 0;
    color: var(--text);
    line-height: 1.6;
}

.tour-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.tour-btn {
    min-width: 100px;
    padding: 10px 20px !important;
}

.tour-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.tour-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    transition: all 0.2s;
}

.tour-dot:hover {
    background: var(--accent);
    transform: scale(1.2);
}

.tour-dot.active {
    background: var(--accent);
    transform: scale(1.3);
}

/* ============================================
   КНОПКА СПРАВКИ
   ============================================ */

.btn-help {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-help:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.admin-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ============================================
   ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ
   ============================================ */

.theme-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.theme-toggle-circle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

[data-theme="dark"] .theme-toggle-circle {
    left: 26px;
}

.theme-toggle-circle::before {
    content: "☀️";
}

[data-theme="dark"] .theme-toggle-circle::before {
    content: "🌙";
}

/* ============================================
   ТЁМНАЯ ТЕМА - ПОЛНЫЙ РЕДИЗАЙН
   ============================================ */

/* Админ-панель */
[data-theme="dark"] .admin-header {
    background: #1e3a5f;
    border-bottom: 2px solid #3b82f6;
}

[data-theme="dark"] .admin-header h1 {
    color: #ffffff;
}

[data-theme="dark"] .admin-header p {
    color: #93c5fd !important;
}

/* Вкладки навигации */
[data-theme="dark"] .admin-tabs {
    background: #0d1320;
    border-bottom: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .admin-tab {
    color: #94a3b8;
    font-weight: 500;
}

[data-theme="dark"] .admin-tab:hover {
    color: #ffffff;
    background: transparent;
    border-bottom-color: #475569;
}

[data-theme="dark"] .admin-tab.active {
    color: #60a5fa;
    background: transparent;
    border-bottom-color: #3b82f6;
}

/* Карточки дисциплин - тёмная тема */
[data-theme="dark"] .discipline-card {
    background: #0f2744;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .discipline-card::before {
    background: var(--primary);
}

[data-theme="dark"] .discipline-card::after {
    background: rgba(59, 130, 246, 0.05);
}

[data-theme="dark"] .discipline-card:hover {
    box-shadow:
        0 20px 40px rgba(59, 130, 246, 0.25),
        0 8px 16px rgba(14, 165, 233, 0.2);
}

[data-theme="dark"] .discipline-card:hover::before {
    background: var(--accent);
}

[data-theme="dark"] .discipline-card-header h3 {
    color: #f0f9ff;
}

[data-theme="dark"] .discipline-group {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .discipline-teachers {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .discipline-assigned {
    border-left-color: #22d3ee !important;
}

[data-theme="dark"] .discipline-stats {
    background: #0c1929;
    border-top-color: rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .discipline-stats .stat-item {
    background: rgba(30, 41, 59, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .discipline-card:hover .discipline-stats .stat-item {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .discipline-stats .stat-value {
    color: #60a5fa;
}

[data-theme="dark"] .discipline-stats .stat-label {
    color: #94a3b8;
}

[data-theme="dark"] .discipline-author {
    background: rgba(59, 130, 246, 0.08);
    border-top-color: rgba(59, 130, 246, 0.15);
    color: #94a3b8;
}

[data-theme="dark"] .discipline-actions .btn-icon {
    background: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .discipline-actions .btn-icon:hover {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Карточки тем, тестов - тёмная тема */
[data-theme="dark"] .topic-card,
[data-theme="dark"] .test-card,
[data-theme="dark"] .result-card {
    background: #0f2744;
    border: 2px solid #1e3a5f;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .topic-card:hover,
[data-theme="dark"] .test-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
}

[data-theme="dark"] .topic-card h3,
[data-theme="dark"] .test-card h3 {
    color: #ffffff;
}

[data-theme="dark"] .topic-card p,
[data-theme="dark"] .test-card p {
    color: #cbd5e1;
}

/* Короткий код теста в тёмной теме */
[data-theme="dark"] .test-short-code {
    background: var(--primary);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
}

[data-theme="dark"] .test-short-code:hover {
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.7);
}

/* Статистика на карточках */
[data-theme="dark"] .topic-stats span {
    color: #60a5fa;
    font-weight: 600;
}

[data-theme="dark"] .discipline-stats small,
[data-theme="dark"] .topic-stats small {
    color: #94a3b8;
}

/* Кнопки - яркие и заметные */
[data-theme="dark"] .btn-primary {
    background: var(--primary);
    color: #ffffff;
    font-weight: 600;
    border: none;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

[data-theme="dark"] .btn-primary:hover:not(:disabled) {
    background: var(--primary-light);
    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5);
    transform: translateY(-2px);
}

[data-theme="dark"] .btn-secondary {
    background: #1e293b;
    color: #ffffff;
    border: 2px solid #3b82f6;
}

[data-theme="dark"] .btn-secondary:hover:not(:disabled) {
    background: #3b82f6;
    color: #ffffff;
}

[data-theme="dark"] .btn-danger {
    background: var(--danger);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

[data-theme="dark"] .btn-danger:hover:not(:disabled) {
    background: #f87171;
    box-shadow: 0 6px 25px rgba(239, 68, 68, 0.5);
}

/* Маленькие кнопки (иконки) */
[data-theme="dark"] .btn-icon,
[data-theme="dark"] .btn-small {
    background: #1e293b;
    color: #60a5fa;
    border: 1px solid #3b82f6;
}

[data-theme="dark"] .btn-icon:hover,
[data-theme="dark"] .btn-small:hover {
    background: #3b82f6;
    color: #ffffff;
}

[data-theme="dark"] .btn-icon.btn-danger,
[data-theme="dark"] .btn-small.btn-danger {
    background: #1e293b;
    color: #f87171;
    border-color: #ef4444;
}

[data-theme="dark"] .btn-icon.btn-danger:hover,
[data-theme="dark"] .btn-small.btn-danger:hover {
    background: #ef4444;
    color: #ffffff;
}

/* Модальные окна */
[data-theme="dark"] .modal-content {
    background: #0f2744;
    border: 2px solid var(--primary);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .modal-header {
    border-bottom: 2px solid #1e3a5f;
    background: #0c1929;
}

[data-theme="dark"] .modal-header h2 {
    color: #ffffff;
}

[data-theme="dark"] .btn-close {
    color: #94a3b8;
}

[data-theme="dark"] .btn-close:hover {
    color: #ffffff;
    background: rgba(239, 68, 68, 0.2);
}

/* Формы */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: #0a0f1a;
    color: #ffffff;
    border: 2px solid #2d3748;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
    outline: none;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #64748b;
}

[data-theme="dark"] label {
    color: #e2e8f0;
}

[data-theme="dark"] .form-group label {
    color: #ffffff;
    font-weight: 500;
}

/* Таблицы */
[data-theme="dark"] table {
    border: 2px solid #2d3748;
}

[data-theme="dark"] th {
    background: #1a2332;
    color: #ffffff;
    border-color: #2d3748;
    font-weight: 600;
}

[data-theme="dark"] td {
    background: #141b2d;
    color: #e2e8f0;
    border-color: #2d3748;
}

[data-theme="dark"] tr:hover td {
    background: rgba(59, 130, 246, 0.15);
}

/* Вопросы */
[data-theme="dark"] .question-item {
    background: #0f2744;
    border: 2px solid #1e3a5f;
}

[data-theme="dark"] .question-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.2);
}

[data-theme="dark"] .question-text {
    color: #ffffff;
}

/* Варианты ответов */
[data-theme="dark"] .answer-option {
    background: #0a0f1a;
    border: 2px solid #2d3748;
    color: #ffffff;
}

[data-theme="dark"] .answer-option:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .answer-option.selected {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.2);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* Профиль и настройки */
[data-theme="dark"] .profile-card {
    background: #0f2744;
    border: 2px solid #1e3a5f;
}

[data-theme="dark"] .setting-row {
    background: #0a0f1a;
    border: 1px solid #2d3748;
}

[data-theme="dark"] .setting-row:hover {
    background: rgba(59, 130, 246, 0.1);
}

/* Справка и подсказки */
[data-theme="dark"] .help-step,
[data-theme="dark"] .instruction-step {
    background: #0a0f1a;
    border: 2px solid #2d3748;
    color: #e2e8f0;
}

[data-theme="dark"] .help-step:hover,
[data-theme="dark"] .instruction-step:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .tour-tooltip {
    background: #1a2332;
    border: 2px solid #3b82f6;
    color: #ffffff;
}

/* Бейджи и статистика */
[data-theme="dark"] .badge {
    background: #1e293b;
    color: #60a5fa;
    border: 1px solid #3b82f6;
}

[data-theme="dark"] .stat-card {
    background: #0f2744;
    border: 2px solid #1e3a5f;
}

[data-theme="dark"] .stat-value {
    color: #60a5fa;
}

[data-theme="dark"] .stat-label {
    color: #94a3b8;
}

/* Ссылки */
[data-theme="dark"] a {
    color: #60a5fa;
}

[data-theme="dark"] a:hover {
    color: #93c5fd;
}

/* Водяные знаки */
[data-theme="dark"] .watermark-text {
    color: #475569;
}

/* Селекты */
[data-theme="dark"] option {
    background: #141b2d;
    color: #ffffff;
}

/* Скроллбар */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0a0f1a;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3b82f6;
    border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #60a5fa;
}

/* Заголовки секций */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 {
    color: #ffffff;
}

/* Текст "Создал:" */
[data-theme="dark"] .discipline-owner,
[data-theme="dark"] .card-owner {
    color: #94a3b8;
}

/* Кнопка помощи */
[data-theme="dark"] .btn-help {
    background: #1e293b;
    color: #60a5fa;
    border: 2px solid #3b82f6;
}

[data-theme="dark"] .btn-help:hover {
    background: #3b82f6;
    color: #ffffff;
}

/* Переключатель темы */
[data-theme="dark"] .theme-toggle {
    background: #1e293b;
    border: 2px solid #3b82f6;
}

/* ============================================
   ТЁМНАЯ ТЕМА - ОСНОВНЫЕ ФОН И КОНТЕЙНЕРЫ
   ============================================ */

/* Основной фон страницы - на всё окно */
[data-theme="dark"] html {
    background: #0a0f1a;
}

[data-theme="dark"] body {
    background: #0a0f1a;
    min-height: 100vh;
}

[data-theme="dark"] .screen {
    background: #0a0f1a;
    min-height: 100vh;
}

[data-theme="dark"] #screen-admin {
    background: #0a0f1a;
    min-height: 100vh;
}

/* Контейнер админки - на всю ширину */
[data-theme="dark"] .admin-container {
    background: #0a0f1a;
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

/* Контентная область */
[data-theme="dark"] .admin-content {
    background: #0a0f1a;
}

[data-theme="dark"] .admin-tab-content {
    background: #0a0f1a;
}

/* Секции внутри админки */
[data-theme="dark"] .admin-section {
    background: #141b2d;
    border: 1px solid #2d3748;
}

/* Область контента профиля */
[data-theme="dark"] .profile-content {
    background: #0a0f1a;
}

/* Сетки дисциплин/тем/тестов */
[data-theme="dark"] .disciplines-grid,
[data-theme="dark"] .topics-grid,
[data-theme="dark"] .tests-grid,
[data-theme="dark"] .results-grid {
    background: transparent;
}

/* Хедер секции с заголовком */
[data-theme="dark"] .section-header {
    background: transparent;
    border-bottom: 2px solid #2d3748;
}

[data-theme="dark"] .section-header h2,
[data-theme="dark"] .section-header h3 {
    color: #ffffff;
}

/* Страница входа */
[data-theme="dark"] .login-container,
[data-theme="dark"] .auth-container {
    background: #141b2d;
    border: 2px solid #2d3748;
}

/* Экран теста */
[data-theme="dark"] .test-screen,
[data-theme="dark"] .test-container {
    background: #0a0f1a;
}

[data-theme="dark"] .test-header {
    background: #141b2d;
    border-bottom: 2px solid #3b82f6;
}

[data-theme="dark"] .test-body {
    background: #0a0f1a;
}

[data-theme="dark"] .test-footer {
    background: #141b2d;
    border-top: 2px solid #2d3748;
}

/* Карточка вопроса в тесте */
[data-theme="dark"] .question-card {
    background: #141b2d;
    border: 2px solid #2d3748;
}

/* Прогресс бар */
[data-theme="dark"] .progress-bar {
    background: #1e293b;
}

[data-theme="dark"] .progress-fill {
    background: var(--primary);
}

/* Таймер */
[data-theme="dark"] .timer {
    background: #1e293b;
    color: #ffffff;
    border: 2px solid #3b82f6;
}

/* Результаты */
[data-theme="dark"] .results-container {
    background: #0a0f1a;
}

[data-theme="dark"] .result-summary {
    background: #141b2d;
    border: 2px solid #2d3748;
}

/* ============================================
   УЛУЧШЕННАЯ МОБИЛЬНАЯ АДАПТИВНОСТЬ
   ============================================ */

/* Админ-панель на планшетах */
@media (max-width: 1024px) {
    .admin-container {
        padding: 16px;
    }

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

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

/* Админ-панель на телефонах */
@media (max-width: 768px) {
    .admin-header {
        flex-direction: column;
        text-align: center;
        padding: 16px;
        gap: 12px;
    }

    .admin-header h1 {
        font-size: 1.3rem;
    }

    .admin-header-actions {
        width: 100%;
        justify-content: center;
    }

    .admin-tabs {
        flex-wrap: wrap;
        padding: 8px;
        gap: 4px;
    }

    .admin-tab {
        flex: 1 1 auto;
        min-width: 100px;
        padding: 10px 12px;
        font-size: 13px;
    }

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

    .discipline-card-inner {
        padding: 20px 16px 16px;
    }

    .discipline-card-header h3 {
        font-size: 1.1rem;
    }

    .discipline-stats {
        margin: 12px -16px -16px;
        padding: 16px;
        gap: 10px;
    }

    .discipline-stats .stat-item {
        padding: 10px;
    }

    .discipline-stats .stat-value {
        font-size: 1.5rem;
    }

    .discipline-author {
        margin: 0 -16px;
        padding: 10px 16px;
    }

    .discipline-actions {
        opacity: 1;
        transform: none;
    }

    .result-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }

    .result-card > * {
        width: 100%;
    }

    .result-student {
        border-bottom: 1px solid var(--border);
        padding-bottom: 10px;
    }

    .result-score {
        display: flex;
        gap: 12px;
    }

    .result-grade {
        position: absolute;
        top: 16px;
        right: 16px;
    }

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

    .result-actions button {
        flex: 1;
    }

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

/* Телефоны (портрет) */
@media (max-width: 480px) {
    .admin-header h1 {
        font-size: 1.1rem;
    }

    .admin-tab {
        font-size: 12px;
        padding: 8px 10px;
        min-width: 80px;
    }

    .btn {
        padding: 10px 16px;
        font-size: 13px;
    }

    .btn-small {
        padding: 6px 10px;
        font-size: 11px;
    }

    .modal-content {
        margin: 10px;
        max-height: 95vh;
    }

    .modal-header {
        padding: 16px;
    }

    .modal-body {
        padding: 16px;
    }

    .modal-footer {
        padding: 12px 16px;
        flex-direction: column;
        gap: 8px;
    }

    .modal-footer button {
        width: 100%;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* Предотвращает zoom на iOS */
    }

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

    .profile-info {
        flex-direction: column;
        text-align: center;
    }

    .telegram-instructions {
        grid-template-columns: 1fr;
    }

    .instruction-step {
        padding: 12px;
    }

    .step-number {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    /* Таблицы на мобильных */
    table {
        font-size: 12px;
    }

    th, td {
        padding: 8px 4px;
    }

    .theme-toggle {
        width: 44px;
        height: 24px;
    }

    .theme-toggle-circle {
        width: 16px;
        height: 16px;
    }

    [data-theme="dark"] .theme-toggle-circle {
        left: 22px;
    }
}

/* Ландшафтный режим на телефонах */
@media (max-height: 500px) and (orientation: landscape) {
    .modal-content {
        max-height: 90vh;
    }

    .admin-header {
        padding: 10px 16px;
    }
}

/* Улучшение touch-областей */
@media (hover: none) and (pointer: coarse) {
    .btn, .admin-tab, button {
        min-height: 44px;
    }

    .btn-small {
        min-height: 36px;
    }

    input, select, textarea {
        min-height: 44px;
    }

    .result-card {
        position: relative;
    }
}

/* ============================================
   МОБИЛЬНЫЕ УВЕДОМЛЕНИЯ О НАРУШЕНИЯХ
   ============================================ */

@keyframes slideDown {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    to {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
}

#mobile-warning-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #dc2626;
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    z-index: 999999;
    box-shadow: 0 10px 40px rgba(220, 38, 38, 0.4);
    animation: slideDown 0.3s ease;
    text-align: center;
    max-width: 90%;
    display: none;
}

#mobile-warning-toast.hiding {
    animation: slideUp 0.3s ease forwards;
}

/* Safe-area для iPhone с чёлкой */
@supports (padding-top: env(safe-area-inset-top)) {
    #mobile-warning-toast {
        top: calc(20px + env(safe-area-inset-top));
    }
}

/* Специфика для iOS */
@supports (-webkit-touch-callout: none) {
    body.test-active {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }

    /* Блокировка свайпа назад на iOS */
    body.test-active::before {
        content: '';
        position: fixed;
        left: 0;
        top: 0;
        width: 20px;
        height: 100%;
        z-index: 99999;
    }
}

/* ============================================
   АНАЛИТИКА - КРАСОЧНЫЕ ГРАФИКИ
   ============================================ */

.analytics-section {
    padding: 20px;
}

.analytics-filters {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 20px;
    background: var(--card);
    border-radius: 12px;
    box-shadow: var(--shadow);
}

.analytics-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.analytics-filters label {
    font-size: 0.85rem;
    color: var(--text-light);
    font-weight: 500;
}

.analytics-filters select {
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.95rem;
    min-width: 200px;
}

/* Индикатор загрузки вкладки (ленивая загрузка) */
.loading-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 16px;
    color: var(--text-secondary);
}

.loading-tab .loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-tab p {
    font-size: 1rem;
    margin: 0;
}

.analytics-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    gap: 16px;
}

.analytics-loading .loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Карточки сводки */
.analytics-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.summary-card {
    background: var(--card);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

.summary-card.total {
    background: var(--primary);
    color: white;
    border: none;
}

.summary-card.attempts {
    background: var(--success);
    color: white;
    border: none;
}

.summary-card.success {
    background: var(--warning);
    color: white;
    border: none;
}

.summary-card.hard-count {
    background: var(--danger);
    color: white;
    border: none;
}

/* Заголовок аналитики */
.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 24px;
    background: #1e3a5f;
    border-radius: 16px;
    color: white;
}

.analytics-title h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.analytics-subtitle {
    opacity: 0.8;
    font-size: 0.9rem;
}

.btn-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-icon span {
    font-size: 1.2rem;
}

.summary-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.summary-value {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
}

.summary-label {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-top: 4px;
}

/* Карточки аналитики */
.analytics-card {
    background: var(--card);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.analytics-card h3 {
    font-size: 1.2rem;
    color: var(--text);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Диаграмма сложности */
.difficulty-chart {
    padding: 20px 0;
}

.difficulty-bars {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: flex-end;
    height: 220px;
    margin-bottom: 20px;
    padding: 10px 0;
}

.difficulty-bar {
    width: 80px;
    border-radius: 12px 12px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12px;
    transition: all 0.5s ease;
    /* Максимум 180px (90% от контейнера), минимум 50px */
    height: max(50px, min(180px, calc(var(--percent) * 1.8px)));
}

.difficulty-bar.hard {
    background: var(--danger);
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
}

.difficulty-bar.medium {
    background: var(--warning);
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
}

.difficulty-bar.easy {
    background: var(--success);
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
}

.bar-value {
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.difficulty-legend {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text);
}

.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.legend-item.hard .legend-dot { background: #ef4444; }
.legend-item.medium .legend-dot { background: #f59e0b; }
.legend-item.easy .legend-dot { background: #10b981; }

/* Круговая диаграмма оценок */
.grades-chart-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
    padding: 20px 0;
}

.pie-chart-wrapper {
    flex-shrink: 0;
}

.pie-chart {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.pie-chart-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: var(--card-bg);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.2);
}

.pie-total {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text);
}

.pie-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.grades-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.grade-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: var(--bg);
    border-radius: 8px;
    min-width: 220px;
}

.grade-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.grade-item.grade-5 .grade-dot { background: #10b981; }
.grade-item.grade-4 .grade-dot { background: #3b82f6; }
.grade-item.grade-3 .grade-dot { background: #f59e0b; }
.grade-item.grade-2 .grade-dot { background: #ef4444; }
.grade-item.grade-pass .grade-dot { background: #10b981; }
.grade-item.grade-fail .grade-dot { background: #ef4444; }

.grade-name {
    flex: 1;
    font-weight: 500;
    color: var(--text);
}

.grade-count {
    font-weight: 700;
    color: var(--text);
    min-width: 30px;
    text-align: right;
}

.grade-percent {
    font-size: 0.85rem;
    color: var(--text-muted);
    min-width: 50px;
    text-align: right;
}

/* Статистика по разделам */
.sections-chart {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-row {
    display: grid;
    grid-template-columns: 180px 1fr 60px;
    gap: 16px;
    align-items: center;
}

.section-name {
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-bar-container {
    height: 24px;
    background: var(--bg);
    border-radius: 12px;
    overflow: hidden;
}

.section-bar {
    height: 100%;
    border-radius: 12px;
    transition: width 0.8s ease;
}

.section-value {
    font-weight: 700;
    color: var(--text);
    text-align: right;
}

/* Список вопросов (топ сложных) - компактный вид */
.questions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 8px;
}

.questions-list::-webkit-scrollbar {
    width: 6px;
}

.questions-list::-webkit-scrollbar-track {
    background: var(--bg);
    border-radius: 3px;
}

.questions-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.questions-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.question-analytics-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg);
    border-radius: 10px;
    border-left: 4px solid;
    transition: all 0.2s ease;
}

.question-analytics-item:hover {
    background: var(--card);
    box-shadow: var(--shadow);
}

.question-analytics-item.hard {
    border-left-color: #ef4444;
}

.question-analytics-item.medium {
    border-left-color: #f59e0b;
}

.question-analytics-item.easy {
    border-left-color: #10b981;
}

.question-rank {
    min-width: 32px;
    height: 32px;
    background: var(--primary);
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.question-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.question-text-preview {
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.question-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.question-meta .correct {
    color: #10b981;
    font-weight: 600;
    font-size: 0.75rem;
}

.question-meta .incorrect {
    color: #ef4444;
    font-weight: 600;
    font-size: 0.75rem;
}

.meta-tag {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.meta-tag.section {
    background: #e0e7ff;
    color: #4338ca;
}

.meta-tag.attempts {
    background: #fef3c7;
    color: #92400e;
}

.question-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Компактный бейдж процента */
.success-rate {
    min-width: 50px;
}

.rate-circle {
    width: 50px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: white;
}

.success-rate.hard .rate-circle {
    background: var(--danger);
}

.success-rate.medium .rate-circle {
    background: var(--warning);
}

.success-rate.easy .rate-circle {
    background: var(--success);
}

.stats-detail {
    display: flex;
    gap: 8px;
    font-size: 0.75rem;
}

.stats-detail .correct {
    color: #10b981;
    font-weight: 600;
}

.stats-detail .incorrect {
    color: #ef4444;
    font-weight: 600;
}

/* Частые ошибки */
.wrong-answers {
    grid-column: 1 / -1;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

.wrong-answers-title {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 8px;
}

.wrong-answer-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fef2f2;
    color: #991b1b;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    margin-right: 8px;
    margin-bottom: 6px;
}

.answer-count {
    font-weight: 700;
    color: #ef4444;
}

/* Таблица всех вопросов */
.questions-table-container {
    overflow-x: auto;
}

.analytics-table {
    width: 100%;
    border-collapse: collapse;
}

.analytics-table th,
.analytics-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.analytics-table th {
    background: var(--bg);
    font-weight: 600;
    color: var(--text);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.analytics-table tr:hover {
    background: var(--bg);
}

.analytics-table tr.hard td:first-child {
    border-left: 3px solid #ef4444;
}

.analytics-table tr.medium td:first-child {
    border-left: 3px solid #f59e0b;
}

.analytics-table tr.easy td:first-child {
    border-left: 3px solid #10b981;
}

.question-cell {
    max-width: 400px;
    color: var(--text);
}

.mini-progress {
    width: 80px;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.mini-progress-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.difficulty-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.difficulty-badge.hard {
    background: #fef2f2;
    color: #991b1b;
}

.difficulty-badge.medium {
    background: #fffbeb;
    color: #92400e;
}

.difficulty-badge.easy {
    background: #ecfdf5;
    color: #065f46;
}

/* Адаптив для аналитики */
@media (max-width: 768px) {
    .analytics-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .analytics-filters select {
        min-width: 100%;
    }

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

    .question-analytics-item {
        grid-template-columns: 40px 1fr;
    }

    .question-stats {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-start;
    }

    .section-row {
        grid-template-columns: 1fr 60px;
    }

    .section-name {
        grid-column: 1 / -1;
        margin-bottom: -8px;
    }

    .difficulty-bars {
        height: 150px;
    }

    .difficulty-bar {
        width: 60px;
    }
}

/* Темная тема для аналитики */
[data-theme="dark"] .summary-card:not(.total):not(.attempts):not(.success) {
    background: var(--card);
}

[data-theme="dark"] .question-analytics-item.hard {
    background: rgba(239, 68, 68, 0.08);
}

[data-theme="dark"] .question-analytics-item.medium {
    background: rgba(245, 158, 11, 0.08);
}

[data-theme="dark"] .question-analytics-item.easy {
    background: rgba(16, 185, 129, 0.08);
}

[data-theme="dark"] .meta-tag.section {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

[data-theme="dark"] .meta-tag.attempts {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

[data-theme="dark"] .wrong-answer-item {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

[data-theme="dark"] .difficulty-badge.hard {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

[data-theme="dark"] .difficulty-badge.medium {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

[data-theme="dark"] .difficulty-badge.easy {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

/* ============================================
   СТИЛИ ДЛЯ РЕЖИМА ЗАЧЁТА
   ============================================ */

/* Бейджи теста (зачёт/тренировка) */
.test-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.test-badge.exam {
    background: #7c3aed;
    color: white;
}

.test-badge.training {
    background: var(--accent);
    color: white;
}

.test-badge.srez {
    background: var(--danger);
    color: white;
}

/* Бейджи типа теста в результатах */
.test-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-left: 6px;
    vertical-align: middle;
}

.test-type-badge.exam {
    background: #7c3aed;
    color: white;
}

.test-type-badge.training {
    background: var(--accent);
    color: white;
}

.test-type-badge.srez {
    background: var(--danger);
    color: white;
}

/* Секция настроек зачёта в форме теста */
.exam-settings-section {
    background: #f8f5ff;
    border: 1px solid #e9d5ff;
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

[data-theme="dark"] .exam-settings-section {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.3);
}

.exam-settings-section h4 {
    color: #7c3aed;
    margin-bottom: 16px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-theme="dark"] .exam-settings-section h4 {
    color: #a855f7;
}

.exam-settings-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.exam-settings-row .form-group {
    flex: 1;
    min-width: 150px;
}

/* Модальное окно участников зачёта */
.exam-modal-content {
    max-width: 900px;
}

.exam-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: #fafafa;
    border-radius: 12px;
    border: 1px solid #e9d5ff;
}

[data-theme="dark"] .exam-info {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(124, 58, 237, 0.3);
}

.exam-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exam-info-label {
    font-size: 0.8rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.exam-info-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

.exam-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #7c3aed;
    color: white;
    border-radius: 8px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s;
}

.exam-link:hover {
    background: #6d28d9;
    transform: translateY(-1px);
}

/* Секция загрузки участников */
.exam-upload-section {
    background: #fefce8;
    border: 2px dashed #facc15;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    text-align: center;
}

[data-theme="dark"] .exam-upload-section {
    background: rgba(250, 204, 21, 0.1);
    border-color: rgba(250, 204, 21, 0.4);
}

.exam-upload-section h4 {
    color: #a16207;
    margin-bottom: 12px;
    font-size: 1rem;
}

[data-theme="dark"] .exam-upload-section h4 {
    color: #fbbf24;
}

.exam-upload-section p {
    color: #a16207;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

[data-theme="dark"] .exam-upload-section p {
    color: #fcd34d;
}

.exam-upload-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.exam-upload-row input[type="text"] {
    width: 200px;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
}

[data-theme="dark"] .exam-upload-row input[type="text"] {
    background: var(--card);
    border-color: var(--border);
    color: var(--text);
}

.exam-upload-row .btn {
    padding: 10px 20px;
}

/* Панель действий */
.exam-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.exam-actions-left {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.exam-actions-right {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Таблица участников */
.exam-participants-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.exam-participants-table th {
    background: var(--bg);
    padding: 12px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border);
}

.exam-participants-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.exam-participants-table tbody tr:hover {
    background: rgba(124, 58, 237, 0.03);
}

[data-theme="dark"] .exam-participants-table tbody tr:hover {
    background: rgba(124, 58, 237, 0.1);
}

/* Пароль участника */
.exam-password {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #7c3aed;
    background: #f8f5ff;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
}

[data-theme="dark"] .exam-password {
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
}

/* Статус участника */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.status-badge.pending {
    background: #f3f4f6;
    color: #6b7280;
}

[data-theme="dark"] .status-badge.pending {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

.status-badge.progress {
    background: #dbeafe;
    color: #1d4ed8;
}

[data-theme="dark"] .status-badge.progress {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.status-badge.success {
    background: #d1fae5;
    color: #047857;
}

[data-theme="dark"] .status-badge.success {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.status-badge.danger {
    background: #fee2e2;
    color: #b91c1c;
}

[data-theme="dark"] .status-badge.danger {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Отображение оценки */
.grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1rem;
}

.grade.grade-5 {
    background: var(--grade-5);
    color: var(--grade-5-text);
}

.grade.grade-4 {
    background: var(--grade-4);
    color: var(--grade-4-text);
}

.grade.grade-3 {
    background: var(--grade-3);
    color: var(--grade-3-text);
}

.grade.grade-2 {
    background: var(--grade-2);
    color: var(--grade-2-text);
}

.grade.grade-pass {
    background: var(--grade-5);
    color: var(--grade-5-text);
}

.grade.grade-fail {
    background: var(--grade-2);
    color: var(--grade-2-text);
}

/* Кнопка accent */
.btn-accent {
    background: #7c3aed;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.btn-accent:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Маленькие кнопки действий в таблице */
.btn-icon-sm {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.btn-icon-sm.btn-success {
    background: #d1fae5;
    color: #047857;
}

.btn-icon-sm.btn-success:hover {
    background: #a7f3d0;
}

[data-theme="dark"] .btn-icon-sm.btn-success {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

[data-theme="dark"] .btn-icon-sm.btn-success:hover {
    background: rgba(16, 185, 129, 0.3);
}

.btn-icon-sm.btn-danger {
    background: #fee2e2;
    color: #b91c1c;
}

.btn-icon-sm.btn-danger:hover {
    background: #fecaca;
}

[data-theme="dark"] .btn-icon-sm.btn-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

[data-theme="dark"] .btn-icon-sm.btn-danger:hover {
    background: rgba(239, 68, 68, 0.3);
}

/* Пустое состояние таблицы */
.exam-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-light);
}

.exam-empty-state .icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.exam-empty-state h4 {
    margin-bottom: 8px;
    color: var(--text);
}

.exam-empty-state p {
    font-size: 0.9rem;
}

/* Попытки */
.attempts-display {
    display: flex;
    align-items: center;
    gap: 6px;
}

.attempts-count {
    font-weight: 600;
    color: var(--text);
}

.attempts-max {
    color: var(--text-light);
    font-size: 0.85rem;
}

/* Адаптивность для таблицы участников */
@media (max-width: 768px) {
    .exam-participants-table {
        font-size: 0.8rem;
    }

    .exam-participants-table th,
    .exam-participants-table td {
        padding: 8px 6px;
    }

    .exam-password {
        font-size: 0.95rem;
        padding: 3px 8px;
    }

    .exam-info {
        flex-direction: column;
        text-align: center;
    }

    .exam-actions-bar {
        flex-direction: column;
    }

    .exam-actions-left,
    .exam-actions-right {
        width: 100%;
        justify-content: center;
    }

    .exam-upload-row {
        flex-direction: column;
    }

    .exam-upload-row input[type="text"] {
        width: 100%;
    }
}

/* Скрытие колонок на мобильных */
@media (max-width: 600px) {
    .exam-participants-table .hide-mobile {
        display: none;
    }
}

/* ============================================
   УНИВЕРСАЛЬНЫЕ МОДАЛЬНЫЕ ДИАЛОГИ
   Замена системных alert/confirm
   ============================================ */

.system-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 20px;
    animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.system-modal {
    background: white;
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

@keyframes modalSlideUp {
    from {
        transform: translateY(30px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.system-modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 24px 16px;
    text-align: center;
}

.system-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
}

.system-modal-icon.info {
    background: #e0f2fe;
    color: #0284c7;
}
.system-modal-icon.success {
    background: #dcfce7;
    color: #16a34a;
}
.system-modal-icon.warning {
    background: #fef9c3;
    color: #d97706;
}
.system-modal-icon.error {
    background: #fee2e2;
    color: #dc2626;
}
.system-modal-icon.confirm {
    background: #e5e5e5;
    color: #4f46e5;
}

.system-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.system-modal-body {
    padding: 8px 24px 24px;
    text-align: center;
}

.system-modal-message {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}

.system-modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px 24px;
    justify-content: center;
}

.system-modal-footer .btn {
    min-width: 120px;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.system-modal-footer .btn-primary {
    background: var(--primary);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.system-modal-footer .btn-primary:hover {
    background: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

.system-modal-footer .btn-secondary {
    background: #f3f4f6;
    color: #4b5563;
    border: none;
}

.system-modal-footer .btn-secondary:hover {
    background: #e5e7eb;
}

/* Тёмная тема для системных модалок */
[data-theme="dark"] .system-modal {
    background: #1e293b;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .system-modal-title {
    color: #f1f5f9;
}

[data-theme="dark"] .system-modal-message {
    color: #94a3b8;
}

[data-theme="dark"] .system-modal-icon.info {
    background: #0369a1;
}
[data-theme="dark"] .system-modal-icon.success {
    background: #166534;
}
[data-theme="dark"] .system-modal-icon.warning {
    background: #a16207;
}
[data-theme="dark"] .system-modal-icon.error {
    background: #dc2626;
}
[data-theme="dark"] .system-modal-icon.confirm {
    background: #1a1a1a;
}

[data-theme="dark"] .system-modal-footer .btn-secondary {
    background: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .system-modal-footer .btn-secondary:hover {
    background: #475569;
}

/* Индикатор загрузки */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: white;
    font-size: 1rem;
}

.loading-spinner .spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Адаптивность модальных окон */
@media (max-width: 480px) {
    .system-modal {
        max-width: calc(100% - 32px);
        margin: 16px;
    }

    .system-modal-header {
        padding: 24px 20px 12px;
    }

    .system-modal-icon {
        width: 56px;
        height: 56px;
        font-size: 28px;
    }

    .system-modal-title {
        font-size: 1.1rem;
    }

    .system-modal-body {
        padding: 8px 20px 20px;
    }

    .system-modal-footer {
        padding: 12px 20px 20px;
        flex-direction: column;
    }

    .system-modal-footer .btn {
        width: 100%;
    }
}

/* ============================================
   ПАГИНАЦИЯ РЕЗУЛЬТАТОВ
   ============================================ */

.results-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--card);
    border-radius: 12px;
    box-shadow: var(--shadow);
    flex-wrap: wrap;
    gap: 12px;
}

.pagination-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.pagination-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn:hover:not(.disabled):not(.active) {
    background: var(--bg);
    border-color: var(--accent);
    color: var(--accent);
}

.pagination-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-ellipsis {
    padding: 0 8px;
    color: var(--text-light);
    font-weight: 500;
}

.pagination-options {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pagination-per-page {
    padding: 8px 12px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-per-page:hover {
    border-color: var(--accent);
}

.pagination-per-page:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(107, 140, 174, 0.15);
}

/* Тёмная тема пагинации */
[data-theme="dark"] .results-pagination {
    background: var(--card);
    box-shadow: var(--shadow);
}

[data-theme="dark"] .pagination-btn {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .pagination-btn:hover:not(.disabled):not(.active) {
    background: rgba(6, 182, 212, 0.1);
    border-color: var(--accent);
    color: var(--accent);
}

[data-theme="dark"] .pagination-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

[data-theme="dark"] .pagination-per-page {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}

/* Адаптив для мобильных */
@media (max-width: 600px) {
    .results-pagination {
        flex-direction: column;
        gap: 16px;
    }

    .pagination-buttons {
        justify-content: center;
    }

    .pagination-btn {
        min-width: 36px;
        height: 36px;
        padding: 0 8px;
        font-size: 0.8rem;
    }

    .pagination-options {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   ЗАГРУЗКА КАРТИНОК ДЛЯ ВОПРОСОВ
   ============================================ */

.image-upload-area {
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--bg);
    margin-bottom: 16px;
}

.image-upload-area:hover {
    border-color: var(--accent);
    background: rgba(107, 140, 174, 0.05);
}

.image-upload-area.dragover {
    border-color: var(--accent);
    background: rgba(107, 140, 174, 0.1);
    transform: scale(1.01);
}

.image-upload-area.has-image {
    border-style: solid;
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.05);
}

.image-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-light);
}

.image-upload-placeholder .upload-icon {
    font-size: 48px;
    opacity: 0.6;
}

.image-upload-placeholder p {
    margin: 0;
    font-size: 0.95rem;
}

.image-upload-placeholder .hint {
    font-size: 0.8rem;
    opacity: 0.7;
}

.image-upload-input {
    display: none;
}

.image-preview-container {
    position: relative;
    display: inline-block;
}

.image-preview {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.image-preview-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
}

.image-preview-actions button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s;
    background: rgba(0, 0, 0, 0.6);
    color: white;
}

.image-preview-actions button:hover {
    transform: scale(1.1);
}

.image-preview-actions .btn-remove {
    background: var(--danger);
}

.image-preview-actions .btn-remove:hover {
    background: #dc2626;
}

.image-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-light);
}

.image-loading .spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Картинка в вопросе (отображение при прохождении теста) */
.question-image {
    margin: 16px 0 24px;
    text-align: center;
}

.question-image img {
    max-width: 100%;
    max-height: 400px;
    border-radius: 12px;
    box-shadow: var(--shadow);
    cursor: zoom-in;
}

/* Модалка просмотра картинки (зум) */
.image-zoom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    cursor: zoom-out;
    padding: 20px;
}

.image-zoom-modal img {
    max-width: 95%;
    max-height: 95%;
    border-radius: 8px;
}

.image-zoom-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.image-zoom-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Тёмная тема для загрузки картинок */
[data-theme="dark"] .image-upload-area {
    background: #141b2d;
    border-color: #2d3748;
}

[data-theme="dark"] .image-upload-area:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .image-upload-area.dragover {
    background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .image-upload-area.has-image {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

/* Адаптивность загрузки картинок */
@media (max-width: 640px) {
    .image-upload-area {
        padding: 16px;
    }

    .image-upload-placeholder .upload-icon {
        font-size: 36px;
    }

    .image-preview {
        max-height: 150px;
    }

    .question-image img {
        max-height: 250px;
    }
}

/* ============================================
   МОДАЛЬНОЕ ОКНО РЕДАКТИРОВАНИЯ ВОПРОСА
   ============================================ */

.question-edit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: modalFadeIn 0.2s ease;
}

.question-edit-modal {
    background: var(--card);
    border-radius: 20px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.question-edit-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: #1e3a5f;
    border-radius: 20px 20px 0 0;
}

.question-edit-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.question-edit-modal-icon {
    font-size: 1.5rem;
}

.question-edit-modal-title h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
}

.question-edit-modal-close {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.question-edit-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.question-edit-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.question-form-section {
    margin-bottom: 24px;
}

.question-form-section:last-child {
    margin-bottom: 0;
}

.question-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
    font-size: 0.95rem;
}

.label-icon {
    font-size: 1.1rem;
}

/* Селектор типа вопроса */
.question-type-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.question-type-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.question-type-option input[type="radio"] {
    display: none;
}

.question-type-option .type-icon {
    font-size: 1.5rem;
}

.question-type-option .type-label {
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 500;
}

.question-type-option:hover {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.05);
}

.question-type-option.active {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.1);
}

.question-type-option.active .type-icon {
    color: var(--primary);
}

.question-type-option.active .type-label {
    color: var(--primary);
    font-weight: 600;
}

/* Текстовое поле вопроса */
.question-edit-modal-body textarea#question-text {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
    background: var(--bg);
    color: var(--text);
    transition: border-color 0.2s;
}

.question-edit-modal-body textarea#question-text:focus {
    outline: none;
    border-color: var(--primary);
}

/* === РЕДАКТОР ТЕКСТА ВОПРОСА С КАРТИНКАМИ === */
.question-text-editor-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.question-text-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
}

.question-text-toolbar .toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.question-text-toolbar .toolbar-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.question-text-toolbar .toolbar-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-left: auto;
}

/* Contenteditable редактор */
.question-text-editor {
    width: 100%;
    min-height: 120px;
    max-height: 400px;
    overflow-y: auto;
    padding: 14px 16px;
    border: 2px solid var(--border);
    border-radius: 0 0 12px 12px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--card);
    color: var(--text);
    line-height: 1.6;
    transition: border-color 0.2s;
}

.question-text-editor:focus {
    outline: none;
    border-color: var(--primary);
}

.question-text-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--text-secondary);
    pointer-events: none;
}

.question-text-editor.dragover {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.05);
}

/* Картинки внутри редактора */
.question-text-editor img {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    margin: 8px 0;
    display: block;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.question-text-editor img:hover {
    border-color: var(--primary);
}

.question-text-editor img.selected {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* Подсказка под редактором */
.question-text-editor-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Тёмная тема */
[data-theme="dark"] .question-text-toolbar {
    background: var(--bg);
    border-color: var(--border);
}

[data-theme="dark"] .question-text-toolbar .toolbar-btn {
    background: var(--card);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .question-text-editor {
    background: var(--card);
    border-color: var(--border);
    color: var(--text);
}

/* Футер модального окна */
.question-edit-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    border-radius: 0 0 20px 20px;
}

/* Ответы в модальном окне */
.question-edit-modal-body .answers-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.question-edit-modal-body .answer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg);
    border-radius: 10px;
    border: 2px solid transparent;
    transition: all 0.2s;
}

.question-edit-modal-body .answer-row:has(input[type="radio"]:checked) {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--success);
}

.question-edit-modal-body .answer-row input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--success);
    cursor: pointer;
}

.question-edit-modal-body .answer-row span {
    font-weight: 600;
    color: var(--text);
    min-width: 20px;
}

.question-edit-modal-body .answer-row input[type="text"] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--card);
    color: var(--text);
}

.question-edit-modal-body .answer-row input[type="text"]:focus {
    outline: none;
    border-color: var(--primary);
}

/* Расширенная строка ответа с картинкой */
.answer-row-extended {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg);
    border-radius: 10px;
    margin-bottom: 8px;
}

.answer-main-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.answer-main-row input[type="radio"],
.answer-main-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
    cursor: pointer;
}

.answer-letter-label {
    font-weight: 600;
    color: var(--primary);
    min-width: 20px;
}

/* Contenteditable редактор ответа */
.answer-text-editor {
    flex: 1;
    min-height: 40px;
    max-height: 200px;
    overflow-y: auto;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--card);
    color: var(--text);
    line-height: 1.4;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.answer-text-editor:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.answer-text-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--text-secondary);
    pointer-events: none;
}

.answer-text-editor.dragover {
    border-color: var(--primary);
    background: rgba(59, 130, 246, 0.05);
}

/* Картинки внутри редактора ответа */
.answer-text-editor img,
.answer-inline-image {
    max-width: 100%;
    max-height: 150px;
    border-radius: 6px;
    margin: 4px 0;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.answer-text-editor img:hover {
    border-color: var(--primary);
}

.answer-text-editor img.selected {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* Тёмная тема для редактора ответов */
[data-theme="dark"] .answer-text-editor {
    background: var(--card);
    border-color: var(--border);
    color: var(--text);
}

.btn-answer-image {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
}

.btn-answer-image:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.btn-answer-image.has-image {
    background: var(--success, #10b981);
    color: white;
    border-color: var(--success, #10b981);
}

.btn-answer-image.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.answer-image-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--card);
    border-radius: 8px;
    margin-left: 44px;
}

.answer-image-preview {
    width: 80px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.answer-image-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.answer-image-actions {
    display: flex;
    gap: 8px;
}

/* Пары для сопоставления */
.question-edit-modal-body .pairs-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.question-edit-modal-body .pair-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg);
    border-radius: 10px;
}

.question-edit-modal-body .pair-row input[type="text"] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--card);
    color: var(--text);
}

.question-edit-modal-body .pair-arrow {
    font-size: 1.25rem;
    color: var(--primary);
}

/* Короткий ответ */
.question-edit-modal-body textarea#short-answers {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    background: var(--bg);
    color: var(--text);
}

.question-edit-modal-body .hint {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Подсветка отредактированного вопроса */
.question-item.question-just-edited {
    animation: highlightPulse 0.5s ease;
    background: rgba(16, 185, 129, 0.15) !important;
    border-left: 4px solid var(--success) !important;
}

@keyframes highlightPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.01);
    }
}

/* Адаптивность модального окна */
@media (max-width: 640px) {
    .question-edit-modal-overlay {
        padding: 10px;
        align-items: flex-start;
    }

    .question-edit-modal {
        max-height: calc(100vh - 20px);
        border-radius: 16px;
    }

    .question-edit-modal-header {
        padding: 16px 20px;
        border-radius: 16px 16px 0 0;
    }

    .question-edit-modal-body {
        padding: 20px;
    }

    .question-type-selector {
        grid-template-columns: 1fr;
    }

    .question-type-option {
        flex-direction: row;
        justify-content: flex-start;
        padding: 14px 16px;
    }

    .question-edit-modal-footer {
        flex-direction: column;
        padding: 16px 20px;
        border-radius: 0 0 16px 16px;
    }

    .question-edit-modal-footer .btn {
        width: 100%;
        justify-content: center;
    }

    .question-edit-modal-body .answer-row {
        flex-wrap: wrap;
    }

    .question-edit-modal-body .answer-row input[type="text"] {
        width: 100%;
        flex: none;
        margin-top: 8px;
    }

    .question-edit-modal-body .pair-row {
        flex-wrap: wrap;
    }

    .question-edit-modal-body .pair-row input[type="text"] {
        width: 100%;
        flex: none;
    }

    .question-edit-modal-body .pair-arrow {
        display: none;
    }
}

/* Темная тема для модального окна */
[data-theme="dark"] .question-edit-modal {
    background: var(--card);
}

[data-theme="dark"] .question-edit-modal-body textarea,
[data-theme="dark"] .question-edit-modal-body input[type="text"] {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .question-type-option {
    background: var(--bg);
    border-color: var(--border);
}

[data-theme="dark"] .question-type-option:hover {
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .question-type-option.active {
    background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .question-edit-modal-body .answer-row,
[data-theme="dark"] .question-edit-modal-body .pair-row {
    background: var(--bg);
}

/* ============================================
   РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ (СПРАВКА)
   ============================================ */

.modal-fullscreen {
    width: 95vw;
    max-width: 1400px;
    height: 90vh;
    max-height: 90vh;
}

.guide-container {
    display: flex;
    height: calc(90vh - 70px);
    overflow: hidden;
}

.guide-nav {
    width: 240px;
    min-width: 240px;
    background: var(--bg);
    border-right: 1px solid var(--border);
    padding: 20px 0;
    overflow-y: auto;
}

.guide-nav-title {
    padding: 0 20px 15px;
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}

.guide-nav-link {
    display: block;
    padding: 10px 20px;
    color: var(--text-light);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.guide-nav-link:hover {
    background: rgba(106, 140, 174, 0.1);
    color: var(--text);
}

.guide-nav-link.active {
    background: rgba(106, 140, 174, 0.15);
    color: var(--accent);
    border-left-color: var(--accent);
    font-weight: 500;
}

.guide-content {
    flex: 1;
    overflow-y: auto;
    padding: 30px 40px;
}

.guide-section {
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border);
}

.guide-section:last-child {
    border-bottom: none;
}

.guide-section h3 {
    font-size: 22px;
    color: var(--text);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent);
    display: inline-block;
}

.guide-lead {
    font-size: 15px;
    color: var(--text-light);
    margin-bottom: 25px;
    line-height: 1.6;
}

/* Карточки */
.guide-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.guide-card-highlight {
    background: rgba(0, 0, 0, 0.04);
    border-color: var(--accent);
}

.guide-card-tip {
    background: rgba(34, 197, 94, 0.08);
    border-color: var(--success);
}

.guide-card-warning {
    background: rgba(234, 179, 8, 0.08);
    border-color: var(--warning);
}

.guide-card-title {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
    font-size: 15px;
}

/* Списки */
.guide-list {
    list-style: none;
    padding: 0;
}

.guide-list li {
    padding: 8px 0 8px 20px;
    position: relative;
    color: var(--text);
    line-height: 1.5;
}

.guide-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

.guide-numbered-list {
    padding-left: 20px;
}

.guide-numbered-list li {
    padding: 6px 0;
    color: var(--text);
    line-height: 1.5;
}

/* Шаги */
.guide-steps {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
}

.guide-step {
    display: flex;
    gap: 15px;
    padding: 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: all 0.2s;
}

.guide-step:hover {
    box-shadow: var(--shadow);
    border-color: var(--accent);
}

.guide-step-number {
    min-width: 60px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
}

.guide-step-content {
    flex: 1;
}

.guide-step-content strong {
    display: block;
    color: var(--text);
    margin-bottom: 6px;
    font-size: 14px;
}

.guide-step-content p {
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.guide-step-content ul {
    margin-top: 8px;
}

/* Иерархия */
.guide-hierarchy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px 0;
}

.guide-hierarchy-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 100%;
    max-width: 350px;
}

.guide-hierarchy-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    font-weight: 600;
    font-size: 14px;
}

.guide-hierarchy-content {
    flex: 1;
}

.guide-hierarchy-content strong {
    display: block;
    color: var(--text);
    font-size: 14px;
}

.guide-hierarchy-content span {
    color: var(--text-light);
    font-size: 12px;
}

.guide-hierarchy-arrow {
    color: var(--accent);
    font-size: 20px;
    font-weight: bold;
}

/* Дерево примера */
.guide-example-tree {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
}

.tree-item {
    padding: 6px 10px;
    color: var(--text);
    font-size: 13px;
}

.tree-level-1 {
    font-weight: 600;
    color: var(--accent);
}

.tree-level-2 {
    padding-left: 25px;
    color: var(--text);
}

.tree-level-2::before {
    content: "└─ ";
    color: var(--text-light);
}

.tree-level-3 {
    padding-left: 50px;
    color: var(--text-light);
}

.tree-level-3::before {
    content: "└─ ";
    color: var(--border);
}

/* Типы вопросов */
.guide-question-types {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.guide-qtype {
    padding: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.guide-qtype-name {
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 5px;
    font-size: 14px;
}

.guide-qtype p {
    color: var(--text-light);
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
}

/* Код */
.guide-code-example {
    margin: 15px 0;
}

.guide-code-title {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 5px;
}

.guide-code-example pre,
.guide-code-inline {
    background: #1e293b;
    color: #e2e8f0;
    padding: 12px 15px;
    border-radius: 8px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.guide-note {
    font-size: 12px;
    color: var(--text-light);
    font-style: italic;
    margin-top: 10px;
}

/* Финальная секция */
.guide-final {
    text-align: center;
    border-bottom: none;
}

.guide-final .guide-card {
    display: inline-block;
    max-width: 500px;
}

/* Адаптивность руководства */
@media (max-width: 900px) {
    .guide-container {
        flex-direction: column;
        height: auto;
    }

    .guide-nav {
        width: 100%;
        min-width: 100%;
        height: auto;
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .guide-content {
        padding: 20px;
    }

    .modal-fullscreen {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* Тёмная тема для руководства */
[data-theme="dark"] .guide-nav {
    background: #141b2d;
    border-color: #2d3748;
}

[data-theme="dark"] .guide-nav-link:hover {
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .guide-nav-link.active {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border-left-color: #3b82f6;
}

[data-theme="dark"] .guide-card {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .guide-card-highlight {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

[data-theme="dark"] .guide-card-tip {
    background: rgba(16, 185, 129, 0.12);
    border-color: #10b981;
}

[data-theme="dark"] .guide-card-warning {
    background: rgba(245, 158, 11, 0.12);
    border-color: #f59e0b;
}

[data-theme="dark"] .guide-step {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .guide-step:hover {
    border-color: #3b82f6;
}

[data-theme="dark"] .guide-step-number {
    background: #3b82f6;
}

[data-theme="dark"] .guide-hierarchy-item,
[data-theme="dark"] .guide-example-tree,
[data-theme="dark"] .guide-qtype {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .guide-hierarchy-icon {
    background: #3b82f6;
}

[data-theme="dark"] .tree-level-1 {
    color: #60a5fa;
}

[data-theme="dark"] .guide-qtype-name {
    color: #60a5fa;
}

[data-theme="dark"] .guide-code-example pre,
[data-theme="dark"] .guide-code-inline {
    background: #0a0f1a;
    border: 1px solid #2d3748;
}

/* ============================================
   НОВОЕ РУКОВОДСТВО ПОЛЬЗОВАТЕЛЯ
   ============================================ */

/* Модальное окно справки */
.help-modal-new {
    width: 95vw;
    max-width: 1200px;
    height: 90vh;
    max-height: 90vh;
    padding: 0;
    overflow: hidden;
    position: relative;
    border-radius: 16px;
}

.help-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-light);
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}

.help-close-btn:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
}

/* Основной layout */
.help-layout {
    display: flex;
    height: 100%;
}

/* Сайдбар */
.help-sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

.help-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 20px;
    border-bottom: 1px solid var(--border);
}

.help-logo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 700;
}

.help-logo span {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

/* Навигация */
.help-nav {
    flex: 1;
    overflow-y: auto;
    padding: 16px 0;
}

.help-nav-group {
    margin-bottom: 8px;
}

.help-nav-label {
    padding: 12px 20px 8px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.help-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
    transition: all 0.15s;
    border-left: 3px solid transparent;
}

.help-nav-item:hover {
    background: rgba(106, 140, 174, 0.1);
}

.help-nav-item.active {
    background: rgba(106, 140, 174, 0.15);
    border-left-color: var(--accent);
    color: var(--accent);
    font-weight: 500;
}

.help-nav-item .nav-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* Основной контент */
.help-main {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.help-content {
    flex: 1;
    overflow-y: auto;
    padding: 40px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Секции */
.help-section {
    max-width: 800px;
}

.help-section h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
}

.help-section h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin: 32px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
}

.help-section h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 8px;
}

.help-section p {
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px;
}

.help-subtitle {
    font-size: 15px !important;
    color: var(--text-light) !important;
    margin-bottom: 24px !important;
}

/* Hero секция */
.help-hero {
    text-align: center;
    padding: 40px 20px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 16px;
    margin-bottom: 32px;
}

.help-hero-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.help-hero h1 {
    font-size: 32px;
    margin-bottom: 12px;
}

.help-hero-text {
    font-size: 16px !important;
    max-width: 500px;
    margin: 0 auto !important;
}

/* Фичи */
.help-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.help-feature {
    padding: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.2s;
}

.help-feature:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.help-feature-icon {
    font-size: 28px;
    margin-bottom: 12px;
}

.help-feature h3 {
    font-size: 14px;
    margin-bottom: 6px;
}

.help-feature p {
    font-size: 13px;
    margin: 0;
}

/* Информационные боксы */
.help-tip-box,
.help-note-box,
.help-warning-box {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 12px;
    margin: 20px 0;
}

.help-tip-box {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(104, 184, 159, 0.3);
}

.help-note-box {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(106, 140, 174, 0.3);
}

.help-warning-box {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(229, 115, 115, 0.3);
}

.help-tip-icon,
.help-note-icon,
.help-warning-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.help-tip-content strong,
.help-note-content strong,
.help-warning-content strong {
    display: block;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 4px;
}

.help-tip-content p,
.help-note-content p,
.help-warning-content p {
    font-size: 13px;
    margin: 0;
}

/* Шаги */
.help-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.help-step {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.2s;
}

.help-step:hover {
    border-color: var(--accent);
}

.help-step-num {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 16px;
}

.help-step-content h3 {
    margin-bottom: 6px;
}

.help-step-content p {
    margin-bottom: 12px;
}

.help-action {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
}

.help-action-label {
    color: var(--text-light);
}

.help-action-path {
    background: var(--bg);
    padding: 4px 10px;
    border-radius: 6px;
    color: var(--accent);
    font-family: monospace;
}

/* Мини-шаги */
.help-steps-mini {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}

.step-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
}

.step-mini-num {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
}

/* Структура */
.help-structure {
    margin-top: 16px;
}

.help-structure-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--text);
}

.help-structure-item.level-1 { margin-left: 0; }
.help-structure-item.level-2 { margin-left: 24px; }
.help-structure-item.level-3 { margin-left: 48px; }
.help-structure-item.level-4 { margin-left: 72px; }

.structure-icon {
    font-size: 18px;
}

/* UI демо */
.help-ui-demo {
    margin: 20px 0;
}

/* Демо браузера */
.demo-browser {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--card);
}

.demo-browser-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.demo-browser-dots {
    display: flex;
    gap: 6px;
}

.demo-browser-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
}

.demo-browser-dots span:first-child { background: #e57373; }
.demo-browser-dots span:nth-child(2) { background: #e5b567; }
.demo-browser-dots span:last-child { background: #68b89f; }

.demo-browser-url {
    flex: 1;
    padding: 6px 12px;
    background: var(--card);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-light);
}

.demo-browser-content {
    padding: 0;
}

/* Демо шапки приложения */
.demo-app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: var(--bg);
}

.demo-app-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.demo-logo-box {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    border-radius: 8px;
    font-size: 18px;
}

.demo-title-box {
    display: flex;
    flex-direction: column;
}

.demo-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.demo-subtitle {
    font-size: 11px;
    color: var(--text-light);
}

.demo-app-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.demo-btn-circle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
}

.demo-btn-logout {
    padding: 6px 14px;
    background: var(--danger);
    color: white;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

/* Демо вкладок */
.demo-tabs-row {
    display: flex;
    gap: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.demo-tab-item {
    padding: 12px 18px;
    font-size: 13px;
    color: var(--text-light);
    border-bottom: 2px solid transparent;
}

.demo-tab-item.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: var(--card);
    font-weight: 500;
}

/* Легенда */
.help-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.help-legend-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.legend-num {
    width: 28px;
    height: 28px;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 600;
}

.legend-icon {
    font-size: 24px;
    width: 28px;
    text-align: center;
}

.legend-content strong {
    display: block;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 2px;
}

.legend-content p {
    font-size: 13px;
    margin: 0;
}

/* Карточки вкладок */
.help-tabs-explain {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.help-tab-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: all 0.2s;
}

.help-tab-card:hover {
    border-color: var(--accent);
}

.tab-card-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    border-radius: 10px;
    font-size: 20px;
}

.tab-card-content h3 {
    margin-bottom: 4px;
}

.tab-card-content p {
    margin-bottom: 8px;
}

.tab-card-tag {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(106, 140, 174, 0.15);
    color: var(--accent);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

/* Демо карточки */
.demo-card {
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    max-width: 350px;
}

.demo-card-discipline {
    border-left: 4px solid var(--accent);
}

.demo-card-test {
    border-left: 4px solid var(--warning);
}

.demo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.demo-card-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.demo-card-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.demo-card-badge.green {
    background: rgba(104, 184, 159, 0.15);
    color: var(--success);
}

.demo-card-badge.blue {
    background: rgba(106, 140, 174, 0.15);
    color: var(--accent);
}

.demo-card-body {
    margin-bottom: 12px;
}

.demo-card-stats,
.demo-card-info {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: var(--text-light);
}

.demo-card-footer {
    display: flex;
    gap: 8px;
}

.demo-small-btn {
    padding: 6px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text);
    cursor: default;
}

.demo-small-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.demo-small-btn.red {
    color: var(--danger);
}

/* ============================================
   РЕАЛИСТИЧНЫЕ ДЕМО-ЭЛЕМЕНТЫ (как на сайте)
   ============================================ */

/* Реалистичная шапка */
.real-header-demo {
    background: #1e3a5f;
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.real-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
}

.real-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.real-logo {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.real-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.real-header-title {
    font-size: 18px;
    font-weight: 700;
    color: white;
}

.real-header-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.real-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.real-theme-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.real-theme-toggle::before {
    content: attr(data-num);
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.real-theme-circle {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
}

.real-help-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    position: relative;
}

.real-help-btn::before {
    content: attr(data-num);
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.real-logout-btn {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
}

.real-logout-btn::before {
    content: attr(data-num);
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Реалистичные вкладки */
.real-tabs-container {
    display: flex;
    gap: 0;
    background: var(--card);
    padding: 0 16px;
    border-radius: 12px;
    border-bottom: 2px solid var(--border);
    overflow-x: auto;
}

.real-tab {
    padding: 16px 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-light);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
    white-space: nowrap;
}

.real-tab:hover {
    color: var(--text);
}

.real-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}

/* Реалистичная карточка дисциплины */
.real-discipline-card {
    background: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 0;
    position: relative;
    overflow: hidden;
    max-width: 380px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.real-discipline-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--primary);
}

.real-discipline-card-inner {
    padding: 28px 24px 0;
}

.real-discipline-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-top: 8px;
}

.real-discipline-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

.real-discipline-group {
    background: rgba(37, 99, 235, 0.12);
    color: var(--primary);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.real-discipline-stats {
    display: flex;
    gap: 12px;
    background: rgba(37, 99, 235, 0.05);
    margin: 0 -24px;
    padding: 20px 24px;
    border-top: 1px solid rgba(37, 99, 235, 0.1);
}

.real-stat-item {
    flex: 1;
    text-align: center;
    padding: 10px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.real-stat-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    background: var(--primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.real-stat-label {
    font-size: 11px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.real-discipline-actions {
    position: absolute;
    top: 20px;
    right: 16px;
    display: flex;
    gap: 6px;
    opacity: 0.7;
}

.real-btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-size: 14px;
}

/* Реалистичная карточка теста */
.real-test-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    max-width: 400px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.real-test-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.real-test-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.real-test-badge {
    background: rgba(107, 140, 174, 0.15);
    color: var(--accent);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.real-test-info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.real-test-param {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-light);
}

.real-test-param .param-icon {
    font-size: 14px;
}

.real-test-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.real-btn {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.real-btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 12px rgba(74, 85, 104, 0.2);
}

.real-btn-secondary {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}

/* Темная тема для реалистичных элементов */
[data-theme="dark"] .real-header-demo {
    background: #0f2744;
}

[data-theme="dark"] .real-tabs-container {
    background: #0d1320;
    border-bottom: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .real-tab {
    color: #94a3b8;
}

[data-theme="dark"] .real-tab:hover {
    color: #ffffff;
}

[data-theme="dark"] .real-tab.active {
    color: #60a5fa;
    border-bottom-color: #3b82f6;
}

[data-theme="dark"] .real-discipline-card {
    background: #0f2744;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .real-discipline-card::before {
    background: var(--primary);
}

[data-theme="dark"] .real-discipline-header h3 {
    background: #f0f9ff;
    -webkit-background-clip: text;
    background-clip: text;
}

[data-theme="dark"] .real-discipline-group {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

[data-theme="dark"] .real-discipline-stats {
    background: rgba(59, 130, 246, 0.07);
    border-top-color: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .real-stat-item {
    background: #1e293b;
}

[data-theme="dark"] .real-stat-value {
    background: var(--primary-light);
    -webkit-background-clip: text;
    background-clip: text;
}

[data-theme="dark"] .real-btn-icon {
    background: #334155;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .real-test-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .real-test-badge {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

[data-theme="dark"] .real-btn-primary {
    background: var(--primary);
}

[data-theme="dark"] .real-btn-secondary {
    background: #334155;
    border-color: #475569;
}

.explain-dot.purple {
    background: var(--primary);
}

/* ============================================
   ИНТЕРАКТИВНЫЕ ДЕМО-ЭЛЕМЕНТЫ
   ============================================ */

/* Контейнер для интерактивной демонстрации */
.interactive-demo-container {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 20px;
    padding: 24px;
    margin: 20px 0;
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.interactive-header-wrapper {
    background: #1e3a5f;
    border-radius: 16px;
    padding: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.interactive-tabs-wrapper {
    display: flex;
    gap: 0;
    background: var(--card);
    padding: 0 8px;
    border-radius: 16px;
    border: 2px solid var(--border);
    overflow-x: auto;
}

/* Интерактивный элемент */
.interactive-element {
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive-element:hover {
    transform: scale(1.05);
    z-index: 100;
}

.interactive-element:hover > *:first-child {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.5), 0 8px 25px rgba(102, 126, 234, 0.3);
}

/* Пульсирующий индикатор */
.interactive-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
}

.interactive-pulse::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #667eea;
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

.interactive-pulse::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: transparent;
    border: 2px solid #667eea;
    border-radius: 50%;
    animation: pulse-ring 2s ease-out infinite;
}

.interactive-element:hover .interactive-pulse::before,
.interactive-element:hover .interactive-pulse::after {
    animation: none;
    opacity: 0;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }
}

@keyframes pulse-ring {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* Тултипы */
.interactive-tooltip {
    position: absolute;
    bottom: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    pointer-events: none;
}

.interactive-element:hover .interactive-tooltip {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.tooltip-content {
    background: #0f2744;
    color: white;
    padding: 16px 20px;
    border-radius: 16px;
    min-width: 200px;
    max-width: 280px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
    text-align: center;
    backdrop-filter: blur(10px);
}

.tooltip-content .tooltip-icon {
    display: block;
    font-size: 32px;
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.tooltip-content strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    background: var(--primary-light);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tooltip-content p {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
    line-height: 1.5;
}

.tooltip-tag {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #60a5fa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tooltip-arrow {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: #0f2744;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 0 0 4px 0;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.15);
}

.interactive-tooltip.tooltip-large .tooltip-content {
    min-width: 220px;
}

/* Подсказка внизу демо */
.interactive-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}

.interactive-hint::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: transparent;
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.hint-icon {
    font-size: 20px;
    animation: bounce-hint 2s ease-in-out infinite;
}

@keyframes bounce-hint {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.hint-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-light);
}

.hint-pulse {
    position: absolute;
    left: 20px;
    width: 8px;
    height: 8px;
    background: #667eea;
    border-radius: 50%;
    animation: pulse-ring 2s ease-out infinite;
}

/* Интерактивные карточки */
.interactive-card {
    position: relative;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.interactive-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: transparent;
    transition: left 0.5s;
}

.interactive-card:hover::before {
    left: 100%;
}

.interactive-card:hover {
    transform: translateX(8px);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.3);
}

.card-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    font-size: 24px;
    color: var(--accent);
    opacity: 0;
    transition: all 0.3s;
}

.interactive-card:hover .card-arrow {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Позиция пульса для header элементов */
.interactive-header-wrapper .interactive-pulse {
    top: auto;
    bottom: -5px;
    left: 50%;
}

.interactive-tabs-wrapper .interactive-pulse {
    top: auto;
    bottom: -8px;
}

/* Тёмная тема */
[data-theme="dark"] .interactive-demo-container {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .interactive-header-wrapper {
    background: #0f2744;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .interactive-tabs-wrapper {
    background: #0d1320;
    border-color: #334155;
}

[data-theme="dark"] .interactive-element:hover > *:first-child {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5), 0 8px 25px rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .interactive-pulse::before {
    background: #3b82f6;
}

[data-theme="dark"] .interactive-pulse::after {
    border-color: #3b82f6;
}

[data-theme="dark"] .interactive-hint {
    background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .hint-pulse {
    background: #3b82f6;
}

[data-theme="dark"] .interactive-card:hover {
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.4);
}

[data-theme="dark"] .interactive-card::before {
    background: rgba(59, 130, 246, 0.1);
}

/* Список объяснений */
.help-explain-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}

.help-explain-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
}

.explain-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.explain-dot.blue { background: var(--accent); }
.explain-dot.green { background: var(--success); }
.explain-dot.gray { background: var(--text-light); }

/* Кнопки объяснение */
.help-buttons-explain {
    margin-top: 20px;
}

.help-buttons-explain h3 {
    margin-bottom: 12px;
}

.help-btn-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

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

.btn-name {
    min-width: 100px;
    font-weight: 600;
    color: var(--accent);
    font-size: 13px;
}

.btn-desc {
    font-size: 13px;
    color: var(--text-light);
}

/* Сетка действий */
.help-actions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 16px 0;
}

.help-action-card {
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: center;
}

.action-icon {
    font-size: 24px;
    display: block;
    margin-bottom: 8px;
}

.help-action-card strong {
    display: block;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 4px;
}

.help-action-card p {
    font-size: 11px;
    margin: 0;
}

/* Примеры */
.help-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.example-item {
    padding: 8px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
}

/* Настройки */
.help-settings-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.help-setting {
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.setting-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 4px;
}

.setting-desc {
    font-size: 13px;
    color: var(--text-light);
}

/* Типы вопросов */
.help-question-types {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qtype-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.qtype-icon {
    font-size: 28px;
    width: 40px;
    text-align: center;
}

.qtype-content {
    flex: 1;
}

.qtype-content h3 {
    margin-bottom: 6px;
}

.qtype-content p {
    margin-bottom: 12px;
}

.qtype-example {
    padding: 12px;
    background: var(--bg);
    border-radius: 8px;
}

.qtype-q {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 10px;
}

.qtype-answers {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.qtype-answers label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text);
}

.qtype-input input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card);
    font-size: 13px;
}

.qtype-hint {
    font-size: 11px;
    color: var(--text-light);
    font-style: italic;
    margin-top: 8px;
}

.qtype-matching,
.qtype-sequence {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--text);
}

.qtype-matching span,
.qtype-sequence span {
    display: inline-block;
    padding: 4px 10px;
    background: var(--card);
    border-radius: 4px;
}

/* Блоки кода */
.help-code-block {
    margin: 16px 0;
}

.code-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 6px;
}

.help-code-block pre {
    padding: 16px;
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 10px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    overflow-x: auto;
    white-space: pre-wrap;
}

/* Доступ демо */
.demo-access-modal {
    padding: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    max-width: 450px;
}

.demo-access-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--text);
    margin-bottom: 16px;
}

.demo-access-link {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.demo-access-link span {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text);
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demo-copy-btn {
    padding: 10px 14px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    cursor: default;
}

.demo-access-hint {
    font-size: 12px;
    color: var(--text-light);
}

/* Flow студента */
.help-student-flow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 16px 0;
}

.flow-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
}

.flow-num {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
}

.flow-arrow {
    color: var(--text-light);
    font-size: 18px;
}

/* Режимы */
.help-mode-info {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin: 20px 0;
}

.mode-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 24px;
}

.mode-icon.green {
    background: rgba(104, 184, 159, 0.15);
}

.mode-icon.blue {
    background: rgba(59, 130, 246, 0.15);
}

.mode-icon.orange {
    background: rgba(229, 181, 103, 0.15);
}

.mode-icon.red {
    background: rgba(229, 115, 115, 0.15);
}

.mode-details h3 {
    margin-bottom: 10px;
}

.mode-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mode-details li {
    padding: 4px 0;
    font-size: 13px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.mode-details li::before {
    content: "✓";
    color: var(--success);
    font-weight: bold;
}

/* Use cases */
.help-use-cases {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}

.use-case {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
}

.use-icon {
    font-size: 16px;
}

/* Exam flow */
.help-exam-flow {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 20px 0;
}

.exam-step {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.exam-step-icon {
    font-size: 28px;
}

.exam-step-content strong {
    display: block;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 4px;
}

.exam-step-content p {
    font-size: 13px;
    margin: 0;
}

/* Методы */
.help-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 16px 0;
}

.method-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.method-icon {
    font-size: 28px;
}

.method-content h3 {
    margin-bottom: 4px;
}

.method-content p {
    font-size: 13px;
    margin: 0;
}

/* Результаты */
.help-results-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}

.result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
}

.result-icon {
    font-size: 18px;
}

/* Таблица оценок */
.help-grades-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
}

.grade-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.grade-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    min-width: 100px;
    text-align: center;
}

.grade-badge.g5 {
    background: rgba(104, 184, 159, 0.15);
    color: var(--success);
}

.grade-badge.g4 {
    background: rgba(106, 140, 174, 0.15);
    color: var(--accent);
}

.grade-badge.g3 {
    background: rgba(229, 181, 103, 0.15);
    color: var(--warning);
}

.grade-badge.g2 {
    background: rgba(229, 115, 115, 0.15);
    color: var(--danger);
}

.grade-row span:last-child {
    font-size: 13px;
    color: var(--text);
}

/* Экспорт форматы */
.help-export-formats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 16px 0;
}

.export-format-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.format-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 22px;
}

.format-icon.excel {
    background: rgba(34, 139, 34, 0.15);
}

.format-icon.word {
    background: rgba(30, 90, 180, 0.15);
}

.format-content h3 {
    margin-bottom: 4px;
}

.format-content p {
    font-size: 13px;
    margin: 0;
}

/* Античит */
.help-anticheat-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 16px 0;
}

.anticheat-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.anticheat-icon {
    font-size: 28px;
}

.anticheat-content h3 {
    margin-bottom: 4px;
}

.anticheat-content p {
    font-size: 13px;
    margin: 0;
}

/* Студентский бокс */
.help-student-box {
    padding: 20px;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(104, 184, 159, 0.3);
    border-radius: 12px;
    margin: 20px 0;
}

.help-student-box.orange {
    background: rgba(234, 179, 8, 0.06);
    border-color: rgba(229, 181, 103, 0.3);
}

.help-student-box h2 {
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.help-note-small {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
}

.help-note-small.success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.help-note-small.warning {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.help-note-small.info {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.help-student-box.green {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.3);
}

.help-student-box.blue {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.3);
}

.help-student-box.red {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.3);
}

/* URL box для студентов */
.student-url-box {
    display: inline-block;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 18px;
    font-weight: 700;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    margin: 10px 0 16px;
    color: var(--text);
}

/* URL большой для режимов */
.mode-url-big {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 20px;
    font-weight: 700;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    margin: 10px 0 16px;
    color: var(--primary);
}

/* Сравнение режимов */
.help-modes-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin: 20px 0;
}

.mode-compare-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--card);
}

.mode-compare-card .mode-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: white;
}

.mode-compare-card .mode-header.green {
    background: var(--success);
}

.mode-compare-card .mode-header.blue {
    background: var(--primary);
}

.mode-compare-card .mode-header.orange {
    background: var(--warning);
}

.mode-compare-card .mode-header.red {
    background: var(--danger);
}

.mode-compare-card .mode-header h3 {
    margin: 0;
    font-size: 14px;
}

.mode-compare-card .mode-body {
    padding: 16px;
}

.mode-compare-card .mode-url {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 12px;
}

.mode-compare-card .mode-url strong {
    color: var(--primary);
}

.mode-compare-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mode-compare-card li {
    font-size: 12px;
    padding: 4px 0;
    color: var(--text);
}

.mode-compare-card li::before {
    content: "• ";
    color: var(--text-light);
}

/* Сравнение */
.help-comparison {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0;
    padding: 16px;
    background: var(--bg);
    border-radius: 10px;
}

.compare-item {
    display: flex;
    gap: 8px;
    font-size: 13px;
}

.compare-label {
    font-weight: 600;
    min-width: 100px;
    color: var(--text-light);
}

/* Таблица-шпаргалка */
.help-summary-table {
    margin-top: 24px;
    padding: 16px;
    background: var(--bg);
    border-radius: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.help-summary-table h3 {
    margin: 0 0 12px;
    font-size: 14px;
}

.help-summary-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.help-summary-table th,
.help-summary-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.help-summary-table th {
    font-weight: 600;
    color: var(--text-light);
    background: rgba(0, 0, 0, 0.03);
}

.help-summary-table td strong {
    color: var(--primary);
}

/* Демо интерфейса теста */
.demo-test-interface {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--card);
    max-width: 500px;
}

.demo-test-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.demo-test-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.demo-test-timer {
    padding: 6px 14px;
    background: rgba(229, 181, 103, 0.15);
    color: var(--warning);
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
}

.demo-test-nav {
    display: flex;
    gap: 6px;
    padding: 12px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.q-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text);
}

.q-btn.done {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.q-btn.current {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.demo-test-question {
    padding: 24px 20px;
}

.demo-q-text {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.demo-q-content {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 16px;
}

.demo-q-answers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.demo-q-answers label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
    cursor: default;
}

.demo-test-bottom {
    display: flex;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

.demo-nav-btn {
    padding: 10px 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text);
    cursor: default;
}

.demo-nav-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Темная тема */
[data-theme="dark"] .help-sidebar {
    background: #171717;
}

[data-theme="dark"] .help-logo-icon {
    background: var(--primary);
}

[data-theme="dark"] .help-nav-item:hover {
    background: rgba(59, 130, 246, 0.1);
}

[data-theme="dark"] .help-nav-item.active {
    background: rgba(59, 130, 246, 0.15);
    border-left-color: #3b82f6;
    color: #60a5fa;
}

[data-theme="dark"] .help-hero {
    background: rgba(59, 130, 246, 0.06);
}

[data-theme="dark"] .help-feature,
[data-theme="dark"] .help-step,
[data-theme="dark"] .help-tab-card,
[data-theme="dark"] .demo-card,
[data-theme="dark"] .help-setting,
[data-theme="dark"] .qtype-card,
[data-theme="dark"] .demo-access-modal,
[data-theme="dark"] .help-mode-info,
[data-theme="dark"] .exam-step,
[data-theme="dark"] .method-card,
[data-theme="dark"] .export-format-card,
[data-theme="dark"] .anticheat-card {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .help-feature:hover,
[data-theme="dark"] .help-step:hover,
[data-theme="dark"] .help-tab-card:hover {
    border-color: #3b82f6;
}

[data-theme="dark"] .help-step-num {
    background: var(--primary);
}

[data-theme="dark"] .step-mini,
[data-theme="dark"] .flow-step,
[data-theme="dark"] .use-case,
[data-theme="dark"] .result-item,
[data-theme="dark"] .grade-row {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .help-action-path {
    background: #0f1520;
    color: #60a5fa;
}

[data-theme="dark"] .qtype-example {
    background: #0f1520;
}

[data-theme="dark"] .demo-browser {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .demo-browser-header {
    background: #0f1520;
}

[data-theme="dark"] .demo-browser-url {
    background: #1a2332;
}

[data-theme="dark"] .demo-app-header {
    background: #171717;
}

[data-theme="dark"] .demo-btn-circle {
    background: #0f1520;
    border-color: #2d3748;
}

[data-theme="dark"] .demo-tabs-row {
    background: #0f1520;
    border-color: #2d3748;
}

[data-theme="dark"] .demo-tab-item.active {
    background: #1a2332;
    border-bottom-color: #3b82f6;
    color: #60a5fa;
}

[data-theme="dark"] .demo-test-interface {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .demo-test-top,
[data-theme="dark"] .demo-test-nav,
[data-theme="dark"] .demo-test-bottom {
    background: #0f1520;
}

[data-theme="dark"] .q-btn {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .demo-q-answers label {
    background: #0f1520;
    border-color: #2d3748;
}

[data-theme="dark"] .demo-nav-btn {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .help-code-block pre {
    background: #0a0f1a;
    border: 1px solid #2d3748;
}

[data-theme="dark"] .example-item,
[data-theme="dark"] .help-action-card {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .help-student-box {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .help-student-box.orange {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .help-student-box.green {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .help-student-box.red {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.3);
}

[data-theme="dark"] .help-note-small {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .help-note-small.success {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

[data-theme="dark"] .help-note-small.warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .help-note-small.info {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

[data-theme="dark"] .help-student-box.blue {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .student-url-box,
[data-theme="dark"] .mode-url-big {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .mode-compare-card {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .help-comparison,
[data-theme="dark"] .help-summary-table {
    background: #1a2332;
}

[data-theme="dark"] .help-summary-table th {
    background: rgba(255, 255, 255, 0.03);
}

/* Адаптивность */
@media (max-width: 900px) {
    .help-modal-new {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .help-layout {
        flex-direction: column;
    }

    .help-sidebar {
        width: 100%;
        min-width: 100%;
        max-height: 50vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .help-content {
        padding: 24px 20px;
    }

    .help-features {
        grid-template-columns: 1fr;
    }

    .help-actions-grid {
        grid-template-columns: 1fr;
    }

    .help-methods,
    .help-export-formats,
    .help-anticheat-features {
        grid-template-columns: 1fr;
    }

    .help-close-btn {
        top: 10px;
        right: 10px;
    }
}

/* Адаптивность для планшетов */
@media (max-width: 768px) {
    .help-modes-comparison {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .mode-compare-card .mode-header {
        padding: 10px 12px;
    }

    .mode-compare-card .mode-header h3 {
        font-size: 13px;
    }

    .mode-compare-card .mode-body {
        padding: 12px;
    }

    .mode-compare-card li {
        font-size: 11px;
        padding: 3px 0;
    }

    .help-mode-info {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .mode-icon {
        width: 50px;
        height: 50px;
        font-size: 22px;
    }

    .mode-url-big {
        font-size: 16px !important;
    }

    .help-student-box {
        padding: 16px;
        margin: 16px 0;
    }

    .help-student-box h2 {
        font-size: 16px;
    }

    .student-url-box {
        font-size: 16px;
        padding: 8px 16px;
    }

    .help-summary-table {
        padding: 12px;
        overflow-x: auto;
    }

    .help-summary-table table {
        font-size: 11px;
        min-width: 400px;
    }

    .help-summary-table th,
    .help-summary-table td {
        padding: 6px 8px;
    }

    .help-steps-mini {
        gap: 10px;
    }

    .step-mini {
        padding: 10px 12px;
    }

    .step-mini-num {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .help-exam-flow {
        gap: 12px;
    }

    .exam-step {
        padding: 14px;
    }

    .exam-step-icon {
        font-size: 20px;
    }

    .help-tip-box,
    .help-note-box,
    .help-warning-box {
        padding: 14px;
        gap: 12px;
    }

    .help-section h1 {
        font-size: 22px;
    }

    .help-section h2 {
        font-size: 16px;
    }

    .help-subtitle {
        font-size: 14px;
    }
}

/* Адаптивность для телефонов */
@media (max-width: 480px) {
    .help-modal-new {
        padding: 0;
    }

    .help-sidebar {
        max-height: 40vh;
        padding: 12px 0;
    }

    .help-nav-item {
        padding: 10px 16px;
        font-size: 13px;
    }

    .help-nav-section {
        padding: 10px 16px 4px;
        font-size: 10px;
    }

    .help-content {
        padding: 16px;
    }

    .help-modes-comparison {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .mode-compare-card {
        border-radius: 10px;
    }

    .mode-compare-card .mode-header {
        padding: 10px 14px;
        gap: 8px;
    }

    .mode-compare-card .mode-header .mode-icon {
        font-size: 18px;
    }

    .mode-compare-card .mode-header h3 {
        font-size: 14px;
    }

    .mode-compare-card .mode-body {
        padding: 12px 14px;
    }

    .mode-compare-card .mode-url {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .mode-compare-card li {
        font-size: 12px;
        padding: 4px 0;
        line-height: 1.4;
    }

    .help-mode-info {
        flex-direction: column;
        gap: 14px;
        padding: 14px;
        border-radius: 10px;
    }

    .mode-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
        margin: 0 auto;
    }

    .mode-details {
        text-align: center;
    }

    .mode-details h3 {
        font-size: 14px;
    }

    .mode-url-big {
        font-size: 18px !important;
        padding: 10px 16px !important;
        display: block;
        text-align: center;
    }

    .mode-details ul {
        text-align: left;
    }

    .mode-details li {
        font-size: 13px;
    }

    .help-student-box {
        padding: 14px;
        margin: 14px 0;
        border-radius: 10px;
    }

    .help-student-box h2 {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .student-url-box {
        font-size: 16px;
        padding: 10px 16px;
        display: block;
        text-align: center;
        margin-bottom: 14px;
        border-radius: 8px;
    }

    .help-note-small {
        font-size: 12px;
        padding: 10px 12px;
        line-height: 1.5;
    }

    .help-summary-table {
        padding: 10px;
        margin-top: 16px;
        border-radius: 8px;
    }

    .help-summary-table h3 {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .help-summary-table table {
        font-size: 10px;
        min-width: 320px;
    }

    .help-summary-table th,
    .help-summary-table td {
        padding: 6px 6px;
        white-space: nowrap;
    }

    .help-summary-table th:first-child,
    .help-summary-table td:first-child {
        white-space: normal;
        min-width: 70px;
    }

    .help-steps-mini {
        gap: 8px;
    }

    .step-mini {
        padding: 10px 12px;
        border-radius: 8px;
        gap: 10px;
    }

    .step-mini-num {
        width: 22px;
        height: 22px;
        min-width: 22px;
        font-size: 11px;
    }

    .step-mini span:last-child {
        font-size: 13px;
        line-height: 1.4;
    }

    .help-exam-flow {
        gap: 10px;
    }

    .exam-step {
        padding: 12px;
        gap: 12px;
        border-radius: 8px;
    }

    .exam-step-icon {
        font-size: 18px;
        min-width: 24px;
    }

    .exam-step-content strong {
        font-size: 13px;
    }

    .exam-step-content p {
        font-size: 12px;
        margin-top: 4px;
    }

    .help-tip-box,
    .help-note-box,
    .help-warning-box {
        padding: 12px;
        gap: 10px;
        border-radius: 8px;
        flex-direction: column;
        text-align: center;
    }

    .help-tip-icon,
    .help-note-icon,
    .help-warning-icon {
        font-size: 24px;
    }

    .help-tip-content,
    .help-note-content,
    .help-warning-content {
        text-align: left;
    }

    .help-tip-content strong,
    .help-note-content strong,
    .help-warning-content strong {
        font-size: 13px;
    }

    .help-tip-content p,
    .help-note-content p,
    .help-warning-content p {
        font-size: 12px;
        margin-top: 4px;
    }

    .help-section h1 {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .help-section h2 {
        font-size: 15px;
        margin-top: 20px;
        padding-bottom: 8px;
    }

    .help-subtitle {
        font-size: 13px;
        line-height: 1.5;
    }

    .help-use-cases {
        gap: 8px;
    }

    .use-case {
        padding: 10px 12px;
        font-size: 13px;
        border-radius: 6px;
    }

    .use-icon {
        font-size: 14px;
    }

    .help-comparison {
        padding: 12px;
        gap: 8px;
        border-radius: 8px;
    }

    .compare-item {
        flex-direction: column;
        gap: 4px;
        padding: 8px 0;
    }

    .compare-label {
        font-size: 12px;
        min-width: auto;
    }

    .compare-item span:last-child {
        font-size: 13px;
    }

    .help-close-btn {
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        font-size: 20px;
    }
}

/* Ландшафтная ориентация на телефонах */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .help-modal-new {
        height: 100vh;
    }

    .help-layout {
        flex-direction: row;
    }

    .help-sidebar {
        width: 200px;
        min-width: 200px;
        max-height: 100%;
        border-right: 1px solid var(--border);
        border-bottom: none;
    }

    .help-content {
        padding: 16px;
        height: 100vh;
        overflow-y: auto;
    }

    .help-modes-comparison {
        grid-template-columns: repeat(2, 1fr);
    }

    .help-student-box {
        margin: 12px 0;
    }
}

/* Очень маленькие экраны (iPhone SE, старые Android) */
@media (max-width: 375px) {
    .help-content {
        padding: 12px;
    }

    .help-section h1 {
        font-size: 18px;
    }

    .mode-compare-card .mode-header h3 {
        font-size: 13px;
    }

    .mode-compare-card li {
        font-size: 11px;
    }

    .student-url-box {
        font-size: 14px;
        padding: 8px 12px;
    }

    .help-summary-table table {
        font-size: 9px;
        min-width: 280px;
    }

    .help-summary-table th,
    .help-summary-table td {
        padding: 5px 4px;
    }

    .step-mini span:last-child {
        font-size: 12px;
    }

    .help-note-small {
        font-size: 11px;
    }
}

/* Поддержка safe-area для устройств с вырезом (iPhone X+) */
@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 480px) {
        .help-modal-new {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }

        .help-sidebar {
            padding-top: calc(12px + env(safe-area-inset-top));
        }

        .help-content {
            padding-bottom: calc(16px + env(safe-area-inset-bottom));
        }

        .help-close-btn {
            top: calc(8px + env(safe-area-inset-top));
            right: calc(8px + env(safe-area-inset-right));
        }
    }
}

/* Скрываем старые стили если не используются */
.guide-nav-section {
    padding: 12px 20px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 10px;
}

.guide-nav-section:first-child {
    margin-top: 0;
}

/* Демо шапка */
.guide-demo-header {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin: 15px 0;
}

.demo-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.demo-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.demo-logo {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    border-radius: 8px;
    font-size: 20px;
}

.demo-header-text {
    display: flex;
    flex-direction: column;
}

.demo-header-title {
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
}

.demo-header-subtitle {
    font-size: 12px;
    color: var(--text-light);
}

.demo-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.demo-theme-btn,
.demo-help-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: default;
    font-size: 14px;
}

.demo-logout-btn {
    padding: 6px 14px;
    background: var(--danger);
    color: white;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.demo-tabs {
    display: flex;
    gap: 0;
    background: var(--bg);
    padding: 0 10px;
}

.demo-tab {
    padding: 12px 16px;
    font-size: 13px;
    color: var(--text-light);
    border-bottom: 2px solid transparent;
    cursor: default;
}

.demo-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 500;
}

/* Метки на демо */
.guide-demo-labels {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.demo-label-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.4;
}

.demo-label-marker {
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
}

/* Объяснение вкладок */
.guide-tabs-explain {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.guide-tab-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--bg);
    border-radius: 8px;
}

.guide-tab-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    border-radius: 8px;
    font-size: 16px;
}

.guide-tab-info {
    flex: 1;
}

.guide-tab-info strong {
    display: block;
    color: var(--text);
    margin-bottom: 4px;
    font-size: 14px;
}

.guide-tab-info p {
    margin: 0;
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.4;
}

/* Права доступа */
.guide-permissions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 15px 0;
}

.permission-row {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: 8px;
    gap: 12px;
}

.permission-role {
    min-width: 120px;
    font-weight: 600;
    color: var(--text);
    font-size: 13px;
}

.permission-access {
    flex: 1;
    color: var(--text-light);
    font-size: 13px;
}

.permission-row.admin .permission-role {
    color: var(--danger);
}

.permission-row.teacher .permission-role {
    color: var(--accent);
}

.permission-row.student .permission-role {
    color: var(--success);
}

/* Хлебные крошки демо */
.guide-breadcrumb-demo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 15px;
    background: var(--bg);
    border-radius: 8px;
    margin: 15px 0;
}

.breadcrumb-item {
    font-size: 13px;
    color: var(--text);
}

.breadcrumb-item.active {
    color: var(--accent);
    font-weight: 500;
}

.breadcrumb-item:not(:last-child)::after {
    content: "→";
    margin-left: 8px;
    color: var(--text-light);
}

/* Демо карточки */
.demo-discipline-card,
.demo-topic-card,
.demo-test-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin: 10px 0;
}

.demo-discipline-card {
    border-left: 4px solid var(--accent);
}

.demo-topic-card {
    border-left: 4px solid var(--success);
    margin-left: 20px;
}

.demo-test-card {
    border-left: 4px solid var(--warning);
    margin-left: 40px;
}

.demo-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.demo-card-title {
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
}

.demo-card-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.demo-card-badge.active {
    background: rgba(104, 184, 159, 0.15);
    color: var(--success);
}

.demo-card-desc {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 10px;
}

.demo-card-actions {
    display: flex;
    gap: 8px;
}

.demo-btn {
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: default;
}

.demo-btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Секция для студентов */
.guide-student-demo {
    margin: 20px 0;
}

.student-demo-screen {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin: 15px 0;
}

.student-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--accent);
    color: white;
}

.student-demo-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.student-demo-body {
    padding: 25px;
}

.student-demo-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.student-demo-card h5 {
    margin: 0 0 8px;
    color: var(--text);
    font-size: 15px;
}

.student-demo-card p {
    margin: 0 0 15px;
    color: var(--text-light);
    font-size: 13px;
}

.student-demo-card .demo-btn {
    padding: 10px 25px;
    font-size: 14px;
}

/* Демо интерфейса теста */
.guide-test-interface-demo {
    margin: 20px 0;
}

.test-demo-wrapper {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.test-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.test-demo-info {
    display: flex;
    flex-direction: column;
}

.test-demo-title {
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
}

.test-demo-subtitle {
    font-size: 12px;
    color: var(--text-light);
}

.test-demo-timer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(229, 181, 103, 0.15);
    border-radius: 20px;
    color: var(--warning);
    font-weight: 600;
    font-size: 14px;
}

.test-demo-nav {
    display: flex;
    gap: 6px;
    padding: 12px 20px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.test-nav-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text);
    cursor: default;
}

.test-nav-btn.current {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.test-nav-btn.answered {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.test-demo-question {
    padding: 25px;
}

.test-question-text {
    font-size: 15px;
    color: var(--text);
    margin-bottom: 20px;
    line-height: 1.5;
}

.test-answer-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: default;
    transition: all 0.2s;
}

.test-answer-option.selected {
    border-color: var(--accent);
    background: rgba(106, 140, 174, 0.1);
}

.test-answer-radio {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.test-answer-option.selected .test-answer-radio {
    border-color: var(--accent);
    background: var(--accent);
}

.test-answer-option.selected .test-answer-radio::after {
    content: "";
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
}

.test-answer-text {
    font-size: 14px;
    color: var(--text);
}

.test-demo-footer {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

/* Таблица оценок */
.guide-grades-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    background: var(--card);
    border-radius: 10px;
    overflow: hidden;
}

.guide-grades-table th,
.guide-grades-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.guide-grades-table th {
    background: var(--bg);
    font-weight: 600;
    color: var(--text);
    font-size: 13px;
}

.guide-grades-table td {
    color: var(--text);
    font-size: 13px;
}

.guide-grades-table tr:last-child td {
    border-bottom: none;
}

.grade-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.grade-badge.grade-5 {
    background: rgba(104, 184, 159, 0.15);
    color: var(--success);
}

.grade-badge.grade-4 {
    background: rgba(106, 140, 174, 0.15);
    color: var(--accent);
}

.grade-badge.grade-3 {
    background: rgba(229, 181, 103, 0.15);
    color: var(--warning);
}

.grade-badge.grade-2 {
    background: rgba(229, 115, 115, 0.15);
    color: var(--danger);
}

.grade-badge.grade-pass {
    background: rgba(104, 184, 159, 0.15);
    color: var(--success);
}

.grade-badge.grade-fail {
    background: rgba(229, 115, 115, 0.15);
    color: var(--danger);
}

/* Форматы экспорта */
.guide-export-formats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 15px 0;
}

.export-format {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: var(--bg);
    border-radius: 10px;
    border: 1px solid var(--border);
}

.export-format-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 20px;
}

.export-format-icon.excel {
    background: rgba(34, 139, 34, 0.15);
    color: #228b22;
}

.export-format-icon.word {
    background: rgba(30, 90, 180, 0.15);
    color: #1e5ab4;
}

.export-format-info strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    margin-bottom: 2px;
}

.export-format-info span {
    font-size: 12px;
    color: var(--text-light);
}

/* FAQ */
.guide-faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.guide-faq-item {
    background: var(--bg);
    border-radius: 10px;
    overflow: hidden;
}

.guide-faq-q {
    padding: 14px 16px;
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.guide-faq-q::before {
    content: "?";
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}

.guide-faq-a {
    padding: 14px 16px 14px 48px;
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 10px 10px;
}

/* Режимы тестов */
.guide-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    margin: 15px 0;
}

.guide-mode-card {
    padding: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    border-top: 3px solid var(--accent);
}

.guide-mode-card.training {
    border-top-color: var(--success);
}

.guide-mode-card.exam {
    border-top-color: var(--warning);
}

.guide-mode-card.srez {
    border-top-color: var(--danger);
}

.guide-mode-title {
    font-weight: 600;
    color: var(--text);
    font-size: 15px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.guide-mode-desc {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.5;
    margin-bottom: 12px;
}

.guide-mode-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.guide-mode-features li {
    padding: 4px 0;
    font-size: 12px;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.guide-mode-features li::before {
    content: "✓";
    color: var(--success);
    font-weight: bold;
}

/* Античит демо */
.guide-anticheat-demo {
    display: flex;
    gap: 15px;
    margin: 15px 0;
    flex-wrap: wrap;
}

.anticheat-item {
    flex: 1;
    min-width: 200px;
    padding: 15px;
    background: var(--bg);
    border-radius: 10px;
    text-align: center;
}

.anticheat-icon {
    font-size: 30px;
    margin-bottom: 10px;
}

.anticheat-title {
    font-weight: 600;
    color: var(--text);
    font-size: 13px;
    margin-bottom: 5px;
}

.anticheat-desc {
    font-size: 12px;
    color: var(--text-light);
}

/* Форма входа демо */
.guide-login-demo {
    max-width: 350px;
    margin: 15px auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.login-demo-header {
    padding: 20px;
    text-align: center;
    background: var(--accent);
    color: white;
}

.login-demo-header h4 {
    margin: 0;
    font-size: 16px;
}

.login-demo-body {
    padding: 25px;
}

.login-demo-field {
    margin-bottom: 15px;
}

.login-demo-field label {
    display: block;
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 5px;
}

.login-demo-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
}

.login-demo-btn {
    width: 100%;
    padding: 12px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: default;
    margin-top: 10px;
}

/* Telegram демо */
.guide-telegram-demo {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid #0088cc40;
    border-radius: 12px;
    margin: 15px 0;
}

.telegram-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0088cc;
    color: white;
    border-radius: 50%;
    font-size: 24px;
}

.telegram-info h4 {
    margin: 0 0 5px;
    color: var(--text);
    font-size: 15px;
}

.telegram-info p {
    margin: 0;
    font-size: 13px;
    color: var(--text-light);
}

/* Тёмная тема для демо элементов */
[data-theme="dark"] .guide-demo-header {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .demo-header-content {
    background: #171717;
}

[data-theme="dark"] .demo-theme-btn,
[data-theme="dark"] .demo-help-btn {
    background: #0f1520;
    border-color: #2d3748;
}

[data-theme="dark"] .demo-tabs {
    background: #0f1520;
}

[data-theme="dark"] .guide-tab-item {
    background: #0f1520;
}

[data-theme="dark"] .permission-row {
    background: #0f1520;
}

[data-theme="dark"] .guide-breadcrumb-demo {
    background: #0f1520;
}

[data-theme="dark"] .demo-discipline-card,
[data-theme="dark"] .demo-topic-card,
[data-theme="dark"] .demo-test-card {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .demo-btn {
    background: #0f1520;
    border-color: #2d3748;
}

[data-theme="dark"] .student-demo-screen {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .student-demo-card {
    background: #0f1520;
}

[data-theme="dark"] .test-demo-wrapper {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .test-demo-header,
[data-theme="dark"] .test-demo-nav,
[data-theme="dark"] .test-demo-footer {
    background: #0f1520;
}

[data-theme="dark"] .test-nav-btn {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .test-answer-option {
    background: #0f1520;
    border-color: #2d3748;
}

[data-theme="dark"] .test-answer-option.selected {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

[data-theme="dark"] .guide-grades-table {
    background: #1a2332;
}

[data-theme="dark"] .guide-grades-table th {
    background: #0f1520;
}

[data-theme="dark"] .export-format {
    background: #0f1520;
    border-color: #2d3748;
}

[data-theme="dark"] .guide-faq-item {
    background: #0f1520;
}

[data-theme="dark"] .guide-faq-q {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .guide-faq-a {
    border-color: #2d3748;
}

[data-theme="dark"] .guide-mode-card {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .anticheat-item {
    background: #0f1520;
}

[data-theme="dark"] .guide-login-demo {
    background: #1a2332;
    border-color: #2d3748;
}

[data-theme="dark"] .login-demo-field input {
    background: #0f1520;
    border-color: #2d3748;
}

[data-theme="dark"] .guide-telegram-demo {
    background: rgba(0, 0, 0, 0.05);
    border-color: #0088cc50;
}

/* Адаптивность для демо элементов */
@media (max-width: 768px) {
    .guide-demo-header .demo-header-content {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .demo-tabs {
        overflow-x: auto;
    }

    .demo-tab {
        white-space: nowrap;
        padding: 10px 12px;
        font-size: 12px;
    }

    .guide-tabs-explain {
        gap: 10px;
    }

    .guide-tab-item {
        flex-direction: column;
        text-align: center;
    }

    .guide-modes {
        grid-template-columns: 1fr;
    }

    .guide-export-formats {
        grid-template-columns: 1fr;
    }

    .guide-anticheat-demo {
        flex-direction: column;
    }

    .anticheat-item {
        min-width: 100%;
    }

    .test-demo-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .test-demo-nav {
        justify-content: center;
    }
}

/* ============================================
   ГРУППЫ СТУДЕНТОВ
   ============================================ */

.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 10px 0;
}

.group-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.group-card.has-checkbox {
    padding-left: 44px;
}

.group-card .group-select {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
}

.group-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.group-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.group-card-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text);
}

.group-actions {
    display: flex;
    gap: 5px;
}

.group-card-body {
    display: flex;
    align-items: center;
    gap: 20px;
}

.group-stats-row {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.group-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.group-stat .stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
}

.group-stat .stat-label {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* Панель массовых действий студентов */
.students-bulk-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    margin-bottom: 12px;
}

[data-theme="dark"] .students-bulk-actions {
    background: #78350f;
    border-color: #92400e;
}

.students-bulk-actions .selected-count {
    font-weight: 600;
    color: #92400e;
}

[data-theme="dark"] .students-bulk-actions .selected-count {
    color: #fcd34d;
}

/* Список студентов */
.students-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.student-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 15px;
    transition: all 0.2s ease;
}

.student-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.student-card:hover {
    border-color: var(--primary);
    background: var(--hover-bg);
}

.student-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    border: 2px solid var(--border);
    transition: all 0.2s ease;
}

.student-photo:hover {
    border-color: var(--primary);
    transform: scale(1.05);
}

.student-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.student-photo .no-photo {
    font-size: 1.5rem;
    opacity: 0.5;
}

.student-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.student-number {
    color: var(--text-light);
    font-weight: 500;
    min-width: 30px;
}

.student-name {
    color: var(--text);
    font-weight: 500;
}

.student-actions {
    display: flex;
    gap: 5px;
}

/* Модальное окно фото */
.photo-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.photo-preview-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 20px;
}

.photo-preview-large {
    max-width: 100%;
    max-height: 300px;
    border-radius: 10px;
    object-fit: contain;
}

.no-photo-large {
    color: var(--text-light);
    font-size: 1.1rem;
}

.photo-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.photo-action-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Веб-камера */
#webcam-container {
    margin-top: 20px;
}

#webcam-video {
    width: 100%;
    max-height: 400px;
    border-radius: 10px;
    background: #000;
}

.webcam-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    justify-content: center;
}

/* Обрезка изображения */
#crop-container {
    margin-top: 20px;
}

.crop-area {
    position: relative;
    display: inline-block;
    margin: 0 auto;
}

#crop-canvas {
    display: block;
    border-radius: 10px;
}

.crop-box {
    position: absolute;
    border: 3px solid var(--primary);
    background: rgba(59, 130, 246, 0.1);
    cursor: move;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}

.crop-resize-handle {
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 22px;
    height: 22px;
    background: var(--primary);
    border: 2px solid white;
    border-radius: 4px;
    cursor: nwse-resize;
    z-index: 10;
    transition: transform 0.15s;
}

.crop-resize-handle:hover {
    background: #2563eb;
    transform: scale(1.15);
}

.crop-size-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--card);
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--text);
    line-height: 1;
}

.crop-size-btn:hover {
    border-color: var(--primary);
    background: #eff6ff;
    color: var(--primary);
}

.crop-size-btn:active {
    transform: scale(0.92);
}

[data-theme="dark"] .crop-size-btn:hover {
    background: #1e3a5f;
}

.crop-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    justify-content: center;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
}

.breadcrumb a {
    color: var(--primary);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb .separator {
    color: var(--text-light);
}

.breadcrumb .current {
    color: var(--text);
    font-weight: 600;
}

/* Header actions */
.header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Иконочные кнопки */
.btn-icon {
    background: transparent;
    border: none;
    padding: 5px 8px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: var(--hover-bg);
}

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

/* Hint text */
.hint {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 5px;
}

/* Выбор групп в модальном окне */
.groups-select-list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.group-select-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s ease;
}

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

.group-select-item:hover {
    background: var(--hover-bg);
}

.group-select-item.selected {
    background: rgba(59, 130, 246, 0.1);
}

.group-select-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.group-select-info {
    flex: 1;
}

.group-select-name {
    font-weight: 500;
    color: var(--text);
}

.group-select-count {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Теги выбранных групп */
.selected-groups-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.group-tag {
    background: var(--primary);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

.selected-groups-list {
    margin-top: 10px;
}

/* Назначенные преподаватели в карточке группы */
.assigned-teachers {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
}

.assigned-teachers .label {
    color: var(--text-light);
    margin-right: 5px;
}

.assigned-teachers .teachers {
    color: var(--primary);
    font-weight: 500;
}

/* Список преподавателей с чекбоксами */
.teachers-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--bg-light);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.checkbox-item:hover {
    background: var(--border);
}

.checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-item span {
    flex: 1;
    color: var(--text);
}

/* ============================================
   УЛУЧШЕННАЯ АДАПТИВНОСТЬ МОДАЛЬНЫХ ОКОН
   ============================================ */

/* Планшеты */
@media (max-width: 768px) {
    .modal {
        padding: 10px;
        align-items: flex-start;
    }

    .modal-content {
        max-width: 100%;
        max-height: calc(100vh - 20px);
        border-radius: 16px;
        margin: 5px;
    }

    .modal-content.modal-large,
    .modal-content.modal-medium {
        max-width: 100%;
    }

    .modal-header {
        padding: 16px 20px;
    }

    [data-theme="dark"] .modal-header {
        background: var(--card);
    }

    .modal-header h2 {
        font-size: 1.1rem;
    }

    .modal-content form {
        padding: 16px 20px;
        flex: 1;
        overflow-y: auto;
    }

    .form-row {
        flex-direction: column;
        gap: 12px;
    }

    .form-actions {
        flex-direction: column;
        gap: 10px;
        padding-top: 16px;
    }

    .form-actions button {
        width: 100%;
        min-height: 48px;
    }
}

/* Телефоны */
@media (max-width: 480px) {
    .modal {
        padding: 0;
        align-items: stretch;
    }

    .modal-content {
        border-radius: 0;
        max-height: 100vh;
        max-height: 100dvh; /* Dynamic viewport height для мобильных */
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0;
    }

    .modal-content.modal-large,
    .modal-content.modal-medium {
        border-radius: 0;
    }

    .modal-header {
        padding: 14px 16px;
        border-radius: 0;
    }

    .modal-header h2 {
        font-size: 1rem;
    }

    .btn-close {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }

    .modal-content form {
        padding: 12px 16px;
    }

    /* Контент модального окна на мобильных */
    .modal-content #questions-content,
    .modal-content .modal-body {
        padding: 12px 16px;
    }

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

    .form-group label {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 12px;
        font-size: 16px; /* Предотвращает zoom на iOS */
        min-height: 48px;
    }

    .form-hint {
        font-size: 0.8rem;
    }

    .form-section-title {
        font-size: 0.9rem;
        margin: 16px 0 10px 0;
        padding-top: 12px;
    }

    .checkbox-label {
        padding: 12px 0;
        min-height: 44px;
    }

    .checkbox-label span {
        font-size: 0.95rem;
    }

    /* Sticky footer для формы на мобильных */
    .form-actions {
        position: sticky;
        bottom: 0;
        background: white;
        padding: 12px 0;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 16px;
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    }

    [data-theme="dark"] .form-actions {
        background: var(--card);
    }

    /* Модальное окно-overlay */
    .modal-overlay .modal {
        border-radius: 0;
        max-height: 100vh;
        min-height: 100vh;
    }

    .modal-overlay .modal-body {
        padding: 12px 16px;
    }

    .modal-overlay .modal-footer {
        flex-direction: column;
        padding: 12px 16px;
    }

    .modal-overlay .modal-footer .btn {
        width: 100%;
        min-height: 48px;
    }
}

/* Ландшафтная ориентация на телефоне */
@media (max-height: 500px) and (orientation: landscape) {
    .modal {
        padding: 5px;
    }

    .modal-content {
        max-height: 95vh;
    }

    .modal-header {
        padding: 10px 16px;
    }

    .modal-content form {
        padding: 10px 16px;
    }
}

/* Улучшение touch-target для мобильных */
@media (hover: none) and (pointer: coarse) {
    .modal-content input,
    .modal-content select,
    .modal-content textarea,
    .modal-content button {
        min-height: 44px;
    }

    .checkbox-label {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .checkbox-label input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }
}

/* ============================================
   УЛУЧШЕННАЯ АДАПТИВНОСТЬ АДМИН-ПАНЕЛИ
   ============================================ */

/* Планшеты - админ-панель */
@media (max-width: 900px) {
    .admin-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .admin-header-actions {
        width: 100%;
        justify-content: center;
    }

    .admin-tabs {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }

    .admin-tab {
        flex: 0 0 auto;
        min-width: auto;
        padding: 10px 16px;
        font-size: 0.85rem;
    }

    .section-header {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .section-header h2 {
        text-align: center;
    }

    .header-buttons {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

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

    .test-card-actions {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-start;
    }

    .test-card-actions .btn-small {
        flex: 0 0 auto;
    }

    /* Результаты - фильтры */
    .results-filters .filter-row {
        flex-direction: column;
        gap: 12px;
    }

    .filter-group {
        width: 100%;
    }

    .filter-group select,
    .filter-group input {
        width: 100%;
    }
}

/* Телефоны - админ-панель */
@media (max-width: 600px) {
    .admin-container {
        padding: 0;
    }

    .admin-sticky-header {
        border-radius: 0;
    }

    .admin-header {
        padding: 12px 16px;
    }

    .admin-header h1 {
        font-size: 1.1rem;
    }

    .admin-tabs {
        padding: 8px 12px;
        gap: 4px;
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .admin-tabs::-webkit-scrollbar {
        display: none;
    }

    .admin-tab {
        flex-shrink: 0;
        padding: 8px 12px;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .admin-content {
        padding: 12px;
    }

    .admin-section {
        padding: 12px;
        border-radius: 12px;
    }

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

    .section-header h2 {
        font-size: 1.1rem;
    }

    /* Карточки дисциплин */
    .discipline-card {
        border-radius: 12px;
    }

    .discipline-card-inner {
        padding: 16px;
    }

    .discipline-card-header h3 {
        font-size: 1rem;
    }

    /* Карточки тестов */
    .test-card {
        padding: 12px;
        border-radius: 12px;
    }

    .test-card-header h3 {
        font-size: 0.95rem;
    }

    .test-card-info {
        font-size: 0.85rem;
    }

    .test-card-actions {
        gap: 4px;
    }

    .test-card-actions .btn-small {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

    /* Карточки результатов */
    .result-card-grouped {
        padding: 10px;
        border-radius: 10px;
    }

    .result-card-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .result-student {
        flex: 1 0 100%;
    }

    .attempts-header,
    .attempt-row {
        font-size: 0.75rem;
        gap: 4px;
    }

    .attempt-actions {
        flex-direction: column;
        gap: 4px;
    }

    .attempt-actions .btn-small {
        font-size: 0.7rem;
        padding: 4px 8px;
    }

    /* Пагинация */
    .pagination {
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center;
    }

    .pagination button {
        min-width: 36px;
        min-height: 36px;
        font-size: 0.8rem;
    }

    /* Кнопки */
    .btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

    .btn-small {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    /* Breadcrumbs */
    .breadcrumbs {
        font-size: 0.8rem;
        flex-wrap: wrap;
    }

    /* Группы студентов */
    .students-list {
        gap: 8px;
    }

    .student-card {
        padding: 10px;
    }

    .student-photo {
        width: 40px;
        height: 40px;
    }
}

/* Очень маленькие телефоны */
@media (max-width: 375px) {
    .admin-tab {
        padding: 6px 10px;
        font-size: 0.75rem;
    }

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

    .test-card-actions .btn-small {
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   УЛУЧШЕННЫЙ UX МОДАЛЬНЫХ ОКОН
   ============================================ */

/* Форма создания пользователя */
.modal-user-form {
    max-width: 550px;
}

.role-selection-group {
    background: #fafafa;
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 20px;
    border: 2px solid #bae6fd;
}

[data-theme="dark"] .role-selection-group {
    background: #171717;
    border-color: #1e40af;
}

.role-label {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0369a1;
    margin-bottom: 16px;
    text-align: center;
}

[data-theme="dark"] .role-label {
    color: #38bdf8;
}

.role-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.role-card {
    display: block;
    cursor: pointer;
    transition: all 0.2s ease;
}

.role-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.role-card-content {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s ease;
}

[data-theme="dark"] .role-card-content {
    background: #1e293b;
    border-color: #334155;
}

.role-card:hover .role-card-content {
    border-color: #94a3b8;
    transform: translateX(4px);
}

.role-card input:checked + .role-card-content {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .role-card input:checked + .role-card-content {
    border-color: #60a5fa;
    background: #1e3a5f;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

.role-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.role-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text);
    display: block;
}

.role-desc {
    font-size: 0.8rem;
    color: var(--text-light);
    display: block;
    margin-top: 2px;
}

/* Карточки ролей по цветам */
.role-card[data-role="teacher"] input:checked + .role-card-content {
    border-color: #10b981;
    background: #ecfdf5;
}

[data-theme="dark"] .role-card[data-role="teacher"] input:checked + .role-card-content {
    border-color: #34d399;
    background: #064e3b;
}

.role-card[data-role="education_dept"] input:checked + .role-card-content {
    border-color: #f59e0b;
    background: #fffbeb;
}

[data-theme="dark"] .role-card[data-role="education_dept"] input:checked + .role-card-content {
    border-color: #fbbf24;
    background: #78350f;
}

.role-card[data-role="admin"] input:checked + .role-card-content {
    border-color: #ef4444;
    background: #fef2f2;
}

[data-theme="dark"] .role-card[data-role="admin"] input:checked + .role-card-content {
    border-color: #f87171;
    background: #7f1d1d;
}

/* Улучшенные модальные окна - анимации */
@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Улучшенный заголовок модального окна */
.modal-header {
    position: relative;
}

.modal-header h2 {
    padding-right: 50px;
}

/* Улучшенная кнопка закрытия */
.btn-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.btn-close:hover {
    background: #fee2e2;
    color: #dc2626;
    transform: translateY(-50%) rotate(90deg);
}

[data-theme="dark"] .btn-close {
    background: #374151;
    color: #9ca3af;
}

[data-theme="dark"] .btn-close:hover {
    background: #7f1d1d;
    color: #fca5a5;
}

/* Улучшенные form-group */
.modal-content .form-group {
    margin-bottom: 18px;
}

.modal-content .form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 0.95rem;
}

.modal-content .form-group input,
.modal-content .form-group select,
.modal-content .form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--border);
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.2s ease;
    background: var(--card);
    color: var(--text);
}

.modal-content .form-group input:focus,
.modal-content .form-group select:focus,
.modal-content .form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.modal-content .form-group input::placeholder {
    color: #9ca3af;
}

/* Улучшенные кнопки в модальных окнах */
.modal-content .form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.modal-content .form-actions .btn {
    flex: 1;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.modal-content .form-actions .btn-primary {
    background: var(--primary);
    color: white;
    border: none;
}

.modal-content .form-actions .btn-primary:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.modal-content .form-actions .btn-secondary {
    background: var(--card);
    color: var(--text);
    border: 2px solid var(--border);
}

.modal-content .form-actions .btn-secondary:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

[data-theme="dark"] .modal-content .form-actions .btn-secondary:hover {
    background: #374151;
    border-color: #4b5563;
}

/* Адаптивность формы выбора роли */
@media (max-width: 600px) {
    .role-selection-group {
        padding: 14px;
        margin: -16px -16px 16px -16px;
        border-radius: 0 0 16px 16px;
        border-left: none;
        border-right: none;
        border-top: none;
    }

    .role-cards {
        gap: 8px;
    }

    .role-card-content {
        padding: 12px 14px;
        gap: 12px;
    }

    .role-icon {
        font-size: 1.5rem;
    }

    .role-title {
        font-size: 0.95rem;
    }

    .role-desc {
        font-size: 0.75rem;
    }

    .modal-content .form-actions {
        flex-direction: column;
    }

    .modal-content .form-actions .btn {
        width: 100%;
    }
}

@media (max-width: 375px) {
    .role-card-content {
        flex-direction: column;
        text-align: center;
        padding: 12px;
    }

    .role-icon {
        font-size: 2rem;
    }
}

/* ============================================
   УЛУЧШЕННЫЕ МОДАЛЬНЫЕ ОКНА - WIZARD СТИЛЬ
   ============================================ */

/* Модальное окно с секциями (wizard) */
.modal-wizard {
    max-width: 600px;
}

.modal-wizard form {
    padding: 0;
}

/* Секции формы */
.form-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.form-section:hover {
    border-color: #94a3b8;
}

[data-theme="dark"] .form-section {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .form-section:hover {
    border-color: #475569;
}

/* Вложенные секции (для настроек зачёта/среза) */
.form-section-nested {
    background: #fafafa;
    border: 2px solid #bae6fd;
    margin-left: 0;
    margin-right: 0;
}

[data-theme="dark"] .form-section-nested {
    background: #171717;
    border-color: #1e40af;
}

/* Заголовок секции */
.form-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #fafafa;
    border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .form-section-header {
    background: #0f2744;
    border-bottom-color: #334155;
}

.form-section-nested .form-section-header {
    background: transparent;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

/* Номер секции */
.form-section-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.form-section-nested .form-section-number {
    background: var(--accent);
    width: 32px;
    height: 32px;
    font-size: 1.1rem;
}

/* Информация секции */
.form-section-info h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.form-section-info p {
    font-size: 0.8rem;
    color: var(--text-light);
    margin: 2px 0 0 0;
}

/* Контент секции */
.form-section-content {
    padding: 20px;
}

/* Сворачиваемые секции */
.form-section-collapsible .form-section-header {
    cursor: pointer;
    user-select: none;
}

.form-section-toggle:hover {
    background: #f1f5f9;
}

[data-theme="dark"] .form-section-toggle:hover {
    background: #1e3a5f;
}

.form-section-arrow {
    margin-left: auto;
    font-size: 0.9rem;
    color: var(--text-light);
    transition: transform 0.3s ease;
}

.form-section-collapsed {
    display: none;
}

/* Карточки выбора типа теста */
.test-type-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.test-type-card {
    display: block;
    cursor: pointer;
}

.test-type-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.test-type-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

[data-theme="dark"] .test-type-card-content {
    background: #1e293b;
    border-color: #334155;
}

.test-type-card:hover .test-type-card-content {
    border-color: #94a3b8;
    transform: translateY(-2px);
}

.test-type-card input:checked + .test-type-card-content {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .test-type-card input:checked + .test-type-card-content {
    border-color: #60a5fa;
    background: #1e3a5f;
}

/* Цвета карточек по типу */
.test-type-card[data-type="normal"] input:checked + .test-type-card-content {
    border-color: #3b82f6;
    background: #eff6ff;
}

.test-type-card[data-type="training"] input:checked + .test-type-card-content {
    border-color: #10b981;
    background: #ecfdf5;
}

.test-type-card[data-type="exam"] input:checked + .test-type-card-content {
    border-color: #8b5cf6;
    background: #f5f3ff;
}

.test-type-card[data-type="srez"] input:checked + .test-type-card-content {
    border-color: #f59e0b;
    background: #fffbeb;
}

[data-theme="dark"] .test-type-card[data-type="normal"] input:checked + .test-type-card-content {
    background: #1e3a5f;
}

[data-theme="dark"] .test-type-card[data-type="training"] input:checked + .test-type-card-content {
    border-color: #34d399;
    background: #064e3b;
}

[data-theme="dark"] .test-type-card[data-type="exam"] input:checked + .test-type-card-content {
    border-color: #a78bfa;
    background: #2e1065;
}

[data-theme="dark"] .test-type-card[data-type="srez"] input:checked + .test-type-card-content {
    border-color: #fbbf24;
    background: #78350f;
}

.test-type-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.test-type-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 4px;
}

.test-type-desc {
    font-size: 0.75rem;
    color: var(--text-light);
    line-height: 1.3;
}

/* Ряд из 3 колонок */
.form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Обязательное поле */
.required {
    color: #ef4444;
    font-weight: 400;
}

/* Кнопка на всю ширину */
.btn-full {
    width: 100%;
}

/* Современный чекбокс */
.checkbox-label-modern {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.checkbox-label-modern input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-box {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.checkbox-label-modern input:checked + .checkbox-box {
    background: #3b82f6;
    border-color: #3b82f6;
}

.checkbox-label-modern input:checked + .checkbox-box::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.checkbox-text {
    font-size: 0.95rem;
    color: var(--text);
}

/* Анимация появления модальных окон */
.modal {
    animation: modalFadeIn 0.2s ease;
}

.modal-content {
    animation: modalSlideUp 0.3s ease;
}

/* Улучшенные модальные окна дисциплин и тем */
.modal-content .form-group {
    margin-bottom: 16px;
}

.modal-content .form-group:last-child {
    margin-bottom: 0;
}

/* Адаптивность для wizard-модалок */
@media (max-width: 600px) {
    .modal-wizard {
        max-width: 100%;
    }

    .test-type-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .test-type-card-content {
        padding: 12px 8px;
    }

    .test-type-icon {
        font-size: 1.5rem;
    }

    .test-type-title {
        font-size: 0.8rem;
    }

    .test-type-desc {
        font-size: 0.7rem;
    }

    .form-row-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .form-section-header {
        padding: 12px 16px;
        gap: 12px;
    }

    .form-section-number {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .form-section-info h3 {
        font-size: 0.9rem;
    }

    .form-section-info p {
        font-size: 0.75rem;
    }

    .form-section-content {
        padding: 16px;
    }
}

@media (max-width: 400px) {
    .test-type-cards {
        grid-template-columns: 1fr 1fr;
    }

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

/* ============================================
   КОМПАКТНЫЕ МОДАЛЬНЫЕ ОКНА (дисциплины, темы)
   ============================================ */

.modal-compact {
    max-width: 450px;
}

/* Заголовок с иконкой */
.modal-header-icon {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 24px 16px;
}

.modal-header-icon > div:first-of-type {
    flex: 1;
}

.modal-header-icon h2 {
    margin: 0;
    padding-right: 0;
}

.modal-header-icon .btn-close {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
}

/* Иконка модального окна */
.modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.modal-icon-discipline {
    background: #dbeafe;
}

.modal-icon-topic {
    background: #dcfce7;
}

.modal-icon-user {
    background: #fef9c3;
}

.modal-icon-danger {
    background: #fee2e2;
}

[data-theme="dark"] .modal-icon-discipline {
    background: #1e3a5f;
}

[data-theme="dark"] .modal-icon-topic {
    background: #064e3b;
}

[data-theme="dark"] .modal-icon-user {
    background: #a16207;
}

[data-theme="dark"] .modal-icon-danger {
    background: #dc2626;
}

/* Подзаголовок модального окна */
.modal-subtitle {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 4px 0 0 0;
    font-weight: 400;
}

/* Улучшенные модальные окна подтверждения */
.modal-confirm-content {
    text-align: center;
    padding: 24px;
}

.modal-confirm-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.modal-confirm-icon.danger {
    background: #fee2e2;
}

.modal-confirm-icon.warning {
    background: #fef9c3;
}

.modal-confirm-icon.info {
    background: #dbeafe;
}

[data-theme="dark"] .modal-confirm-icon.danger {
    background: #dc2626;
}

[data-theme="dark"] .modal-confirm-icon.warning {
    background: #a16207;
}

[data-theme="dark"] .modal-confirm-icon.info {
    background: #1e3a5f;
}

.modal-confirm-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.modal-confirm-message {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.modal-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-confirm-actions .btn {
    min-width: 100px;
}

/* Кнопка опасного действия */
.btn-danger {
    background: var(--danger) !important;
    border-color: #ef4444 !important;
    color: white !important;
}

.btn-danger:hover {
    background: #dc2626 !important;
    transform: translateY(-1px);
}

/* Адаптивность компактных модалок */
@media (max-width: 480px) {
    .modal-compact {
        max-width: 100%;
    }

    .modal-header-icon {
        padding: 20px 16px 12px;
        gap: 12px;
    }

    .modal-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
        border-radius: 10px;
    }

    .modal-header-icon h2 {
        font-size: 1.1rem;
    }

    .modal-subtitle {
        font-size: 0.8rem;
    }
}

/* ============================================
   МОДАЛЬНОЕ ОКНО ВЫБОРА ГРУПП
   ============================================ */

.groups-select-list-modern {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Grid layout для выбора групп */
.groups-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.group-select-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.group-select-card:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

[data-theme="dark"] .group-select-card:hover {
    border-color: #475569;
    background: #334155;
}

.group-select-card.selected {
    border-color: #3b82f6;
    background: #eff6ff;
}

[data-theme="dark"] .group-select-card.selected {
    border-color: #60a5fa;
    background: #1e3a5f;
}

.group-select-card input[type="checkbox"] {
    display: none;
}

.group-checkbox-box {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-radius: 6px;
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.group-select-card.selected .group-checkbox-box {
    background: #3b82f6;
    border-color: #3b82f6;
}

.group-select-card.selected .group-checkbox-box::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.group-select-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.group-select-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
}

.group-select-count {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* ============================================
   МОДАЛЬНОЕ ОКНО ФОТО (КОМПАКТНЫЙ СТИЛЬ)
   ============================================ */

.photo-modal-compact {
    max-width: 380px;
    width: 95%;
    border-radius: 16px;
    overflow: hidden;
}

.photo-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #1e3a5f;
    color: white;
}

.photo-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.photo-modal-title > span {
    font-size: 1.5rem;
}

.photo-modal-title h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.photo-modal-title p {
    margin: 2px 0 0;
    font-size: 0.8rem;
    opacity: 0.8;
}

.photo-modal-header .btn-close {
    color: white;
    opacity: 0.7;
    font-size: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
}

.photo-modal-header .btn-close:hover {
    opacity: 1;
}

.photo-modal-body {
    padding: 20px;
    text-align: center;
}

.photo-preview-box {
    margin-bottom: 16px;
}

.photo-preview-box img {
    max-width: 100%;
    max-height: 180px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.photo-empty {
    padding: 40px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px dashed #cbd5e1;
}

.photo-empty span {
    font-size: 3rem;
    opacity: 0.4;
}

.photo-empty p {
    margin: 8px 0 0;
    color: var(--text-light);
    font-size: 0.85rem;
}

[data-theme="dark"] .photo-empty {
    background: #1e293b;
    border-color: #475569;
}

.photo-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.photo-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    color: var(--text);
}

.photo-btn:hover {
    border-color: var(--primary);
    background: #eff6ff;
}

.photo-btn-primary {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.photo-btn-primary:hover {
    background: #2563eb;
    border-color: #2563eb;
}

.photo-btn-danger:hover {
    background: #fef2f2;
    border-color: #ef4444;
    color: #ef4444;
}

[data-theme="dark"] .photo-btn:hover {
    background: #1e3a5f;
}

/* Webcam */
#webcam-container video {
    max-width: 100%;
    max-height: 200px;
    border-radius: 10px;
    margin-bottom: 12px;
}

/* Crop */
.crop-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 12px;
}

.crop-wrapper canvas {
    display: block;
    border-radius: 8px;
}

.crop-slider-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}

.crop-slider-row input[type="range"] {
    width: 140px;
    accent-color: var(--primary);
}

.crop-size-label {
    font-size: 12px;
    color: var(--text-light);
    min-width: 35px;
}

/* Углы для ресайза */
.crop-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--primary);
    border: 2px solid white;
    border-radius: 3px;
    z-index: 10;
}

.crop-corner-nw { top: -8px; left: -8px; cursor: nwse-resize; }
.crop-corner-ne { top: -8px; right: -8px; cursor: nesw-resize; }
.crop-corner-sw { bottom: -8px; left: -8px; cursor: nesw-resize; }
.crop-corner-se { bottom: -8px; right: -8px; cursor: nwse-resize; }

.crop-corner:hover {
    background: #2563eb;
    transform: scale(1.2);
}

/* Совместимость со старыми стилями */
.photo-modal-modern {
    max-width: 480px;
    width: 100%;
}

.photo-preview-container-modern {
    text-align: center;
    margin-bottom: 20px;
}

.photo-preview-container-modern .photo-preview-large {
    max-width: 100%;
    max-height: 320px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 3px solid var(--border);
}

.no-photo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 30px;
    background: #f1f5f9;
    border-radius: 12px;
    border: 2px dashed #cbd5e1;
}

[data-theme="dark"] .no-photo-placeholder {
    background: #0f2744;
    border-color: #475569;
}

.no-photo-icon {
    font-size: 4rem;
    opacity: 0.5;
    margin-bottom: 10px;
}

.no-photo-text {
    font-size: 0.95rem;
    color: var(--text-light);
    font-weight: 500;
}

/* Кнопки действий с фото */
.photo-actions-modern {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.photo-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 20px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
    font-family: inherit;
}

.photo-action-btn:hover {
    border-color: #3b82f6;
    background: #eff6ff;
    transform: translateY(-2px);
}

[data-theme="dark"] .photo-action-btn:hover {
    border-color: #60a5fa;
    background: #1e3a5f;
}

.photo-action-btn.photo-action-danger:hover {
    border-color: #ef4444;
    background: #fef2f2;
}

[data-theme="dark"] .photo-action-btn.photo-action-danger:hover {
    border-color: #f87171;
    background: #7f1d1d;
}

.photo-action-icon {
    font-size: 1.5rem;
}

.photo-action-text {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text);
}

/* Адаптивность для модалок фото */
@media (max-width: 480px) {
    .photo-modal-modern {
        max-width: 100%;
    }

    .photo-actions-modern {
        gap: 8px;
    }

    .photo-action-btn {
        padding: 12px 14px;
        min-width: 80px;
    }

    .photo-action-icon {
        font-size: 1.3rem;
    }

    .photo-action-text {
        font-size: 0.75rem;
    }
}

/* Компактное модальное окно редактирования пользователя */
.edit-user-modal {
    max-width: 580px;
    width: 95%;
}

.edit-user-layout {
    display: flex;
    gap: 24px;
}

.edit-user-left {
    flex: 0 0 150px;
}

.edit-user-right {
    flex: 1;
}

.field-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.role-selector {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.role-chip {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 0.85rem;
}

.role-chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.role-chip:hover {
    border-color: #94a3b8;
}

.role-chip.active,
.role-chip:has(input:checked) {
    border-color: #3b82f6;
    background: #eff6ff;
}

.role-chip[data-role="teacher"].active,
.role-chip[data-role="teacher"]:has(input:checked) {
    border-color: #10b981;
    background: #ecfdf5;
}

.role-chip[data-role="education_dept"].active,
.role-chip[data-role="education_dept"]:has(input:checked) {
    border-color: #f59e0b;
    background: #fffbeb;
}

.role-chip[data-role="admin"].active,
.role-chip[data-role="admin"]:has(input:checked) {
    border-color: #ef4444;
    background: #fef2f2;
}

[data-theme="dark"] .role-chip {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .role-chip.active,
[data-theme="dark"] .role-chip:has(input:checked) {
    border-color: #60a5fa;
    background: #1e3a5f;
}

[data-theme="dark"] .role-chip[data-role="teacher"].active {
    border-color: #34d399;
    background: #064e3b;
}

[data-theme="dark"] .role-chip[data-role="education_dept"].active {
    border-color: #fbbf24;
    background: #78350f;
}

[data-theme="dark"] .role-chip[data-role="admin"].active {
    border-color: #f87171;
    background: #7f1d1d;
}

.edit-user-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

.form-group.compact .form-control {
    padding: 8px 12px;
    font-size: 0.9rem;
}

.hint-text {
    display: block;
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 6px;
}

@media (max-width: 500px) {
    .edit-user-layout {
        flex-direction: column;
        gap: 16px;
    }

    .edit-user-left {
        flex: none;
    }

    .role-selector {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .role-chip {
        flex: 1;
        min-width: 90px;
        justify-content: center;
        font-size: 0.75rem;
        padding: 6px 8px;
    }
}

/* ============================================ */
/* КОМПАКТНАЯ ФОРМА СОЗДАНИЯ ТЕСТА */
/* ============================================ */

.test-form-compact {
    max-width: 700px !important;
    width: 95%;
    overflow-x: visible;
}

.test-form-layout {
    display: flex;
    gap: 24px;
}

.test-form-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.test-form-sidebar {
    flex: 0 0 160px;
}

.form-row-compact {
    display: flex;
    gap: 12px;
}

.form-row-compact .form-group {
    flex: 1;
    margin-bottom: 0;
}

.form-row-compact input,
.form-row-compact select {
    padding: 8px 10px;
    font-size: 0.9rem;
}

/* Выбор типа теста - вертикальные карточки */
.test-mode-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.test-mode-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.test-mode-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.test-mode-option:hover {
    border-color: #94a3b8;
}

.test-mode-option:has(input:checked) {
    border-color: #3b82f6;
    background: #eff6ff;
}

.test-mode-option[data-type="normal"]:has(input:checked) {
    border-color: #3b82f6;
    background: #eff6ff;
}

.test-mode-option[data-type="training"]:has(input:checked) {
    border-color: #10b981;
    background: #ecfdf5;
}

.test-mode-option[data-type="exam"]:has(input:checked) {
    border-color: #8b5cf6;
    background: #f5f3ff;
}

.test-mode-option[data-type="srez"]:has(input:checked) {
    border-color: #f59e0b;
    background: #fffbeb;
}

.test-mode-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
}

.test-mode-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
    flex: 1;
}

.test-mode-hint {
    font-size: 0.7rem;
    color: var(--text-light);
    display: none;
}

/* Настройки режимов */
.mode-settings {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
}

.mode-settings-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

/* Дополнительные настройки */
.extra-settings {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.extra-settings summary {
    padding: 10px 14px;
    background: var(--bg);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-light);
    user-select: none;
}

.extra-settings summary:hover {
    background: var(--border);
}

.extra-settings[open] summary {
    border-bottom: 1px solid var(--border);
}

.extra-settings-content {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    cursor: pointer;
}

.checkbox-inline input {
    width: 16px;
    height: 16px;
}

/* Темная тема */
[data-theme="dark"] .test-mode-option {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .test-mode-option:has(input:checked) {
    background: #1e3a5f;
    border-color: #60a5fa;
}

[data-theme="dark"] .test-mode-option[data-type="training"]:has(input:checked) {
    background: #064e3b;
    border-color: #34d399;
}

[data-theme="dark"] .test-mode-option[data-type="exam"]:has(input:checked) {
    background: #2e1065;
    border-color: #a78bfa;
}

[data-theme="dark"] .test-mode-option[data-type="srez"]:has(input:checked) {
    background: #78350f;
    border-color: #fbbf24;
}

[data-theme="dark"] .mode-settings {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .extra-settings {
    border-color: #334155;
}

[data-theme="dark"] .extra-settings summary {
    background: #1e293b;
}

/* Адаптив */
@media (max-width: 600px) {
    .test-form-layout {
        flex-direction: column-reverse;
        gap: 16px;
    }

    .test-form-sidebar {
        flex: none;
    }

    .test-mode-selector {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .test-mode-option {
        flex: 1;
        min-width: 70px;
        flex-direction: column;
        text-align: center;
        padding: 8px;
        gap: 4px;
    }

    .test-mode-name {
        font-size: 0.75rem;
    }

    .form-row-compact {
        flex-wrap: wrap;
    }

    .form-row-compact .form-group {
        min-width: 80px;
    }
}

/* ============================================ */
/* МОДАЛЬНОЕ ОКНО УЧАСТНИКОВ СРЕЗА */
/* ============================================ */

.srez-modal-compact {
    max-width: 1000px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
}

.srez-modal-compact .modal-header {
    flex-shrink: 0;
}

.srez-modal-compact #srez-participants-content {
    flex: 1;
    overflow: auto;
    padding: 16px 20px 20px;
}

.srez-layout {
    display: flex;
    gap: 20px;
    height: auto;
    min-height: 0;
}

.srez-sidebar {
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
    max-height: 60vh;
}

.srez-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.srez-info-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
}

.srez-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.85rem;
}

.srez-info-label {
    color: var(--text-light);
}

.srez-link {
    background: #e0e7ff;
    color: #3730a3;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.srez-count {
    font-weight: 700;
    color: var(--primary);
}

.srez-add-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
}

.srez-add-section h4 {
    margin: 0 0 10px 0;
    font-size: 0.85rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.srez-add-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.srez-input {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--card);
    color: var(--text);
}

.srez-input:focus {
    outline: none;
    border-color: var(--primary);
}

.srez-input-sm {
    flex: 0 0 70px;
}

.srez-row {
    display: flex;
    gap: 8px;
}

.srez-row .srez-input:first-child {
    flex: 1;
}

.srez-hint {
    font-size: 0.7rem;
    color: var(--text-light);
    line-height: 1.3;
}

/* Тулбар */
.srez-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.srez-toolbar-left, .srez-toolbar-right {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.srez-filter {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    background: var(--card);
}

.btn-sm {
    padding: 6px 10px;
    font-size: 0.75rem;
}

/* Таблица */
.srez-table-wrap {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 50vh;
    min-height: 200px;
}

.srez-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.srez-table th {
    background: var(--bg);
    padding: 8px 6px;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 1;
}

.srez-table td {
    padding: 6px;
    border-top: 1px solid var(--border);
}

.srez-table tr:hover {
    background: var(--bg);
}

.srez-td-num {
    width: 30px;
    text-align: center;
    color: var(--text-light);
}

.srez-td-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.srez-td-group {
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.srez-td-var {
    width: 50px;
}

.srez-var-select {
    width: 100%;
    padding: 2px 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.8rem;
    background: var(--card);
}

.srez-td-code code {
    background: #fef3c7;
    color: #92400e;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.srez-td-att {
    width: 40px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-light);
}

.srez-td-status {
    width: 50px;
    text-align: center;
}

.srez-td-actions {
    width: 60px;
    text-align: right;
}

.srez-btn {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--card);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
}

.srez-btn:hover {
    background: var(--bg);
}

.srez-btn-del {
    color: #dc2626;
    border-color: #fecaca;
}

.srez-btn-del:hover {
    background: #fef2f2;
}

/* Пустое состояние */
.srez-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
}

.srez-empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.srez-empty-hint {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Тёмная тема */
[data-theme="dark"] .srez-link {
    background: #312e81;
    color: #a5b4fc;
}

[data-theme="dark"] .srez-td-code code {
    background: #78350f;
    color: #fcd34d;
}

/* Адаптив */
@media (max-width: 700px) {
    .srez-layout {
        flex-direction: column;
        min-height: auto;
    }

    .srez-sidebar {
        flex: none;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .srez-add-section {
        flex: 1;
        min-width: 200px;
    }

    .srez-info-card {
        flex: 0 0 100%;
    }
}

/* ============================================
   ВКЛАДКИ ФИЛЬТРАЦИИ ПО ВАРИАНТАМ
   ============================================ */

.variant-filter-container {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg);
    border-radius: 12px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.variant-tabs-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.variant-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.variant-tab {
    padding: 8px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.variant-tab:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.variant-tab.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    font-weight: 600;
}

.variant-count {
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
}

.variant-tab:not(.active) .variant-count {
    background: var(--border);
    color: var(--text-secondary);
}

/* Группы вопросов по вариантам */
.variant-group {
    margin-bottom: 8px;
}

.variant-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg);
    border-bottom: 2px solid var(--primary);
    position: sticky;
    top: 0;
    z-index: 5;
}

.variant-group-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--primary);
}

.variant-group-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--border);
    padding: 2px 8px;
    border-radius: 10px;
}

.variant-group-questions {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.variant-group-none .variant-group-header {
    border-bottom-color: #6b7280;
}

.variant-group-none .variant-group-title {
    color: #6b7280;
}

/* Бейдж варианта на вопросе */
.question-variant-badge {
    background: #3b82f6;
    color: white;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

/* Темная тема */
[data-theme="dark"] .variant-filter-container {
    background: var(--bg-dark, #1e1e2f);
}

[data-theme="dark"] .variant-tab {
    background: var(--card-dark, #2a2a3d);
}

[data-theme="dark"] .variant-group-header {
    background: var(--bg-dark, #1e1e2f);
}

[data-theme="dark"] .variant-group-count {
    background: rgba(255,255,255,0.1);
}

/* Адаптивность */
@media (max-width: 768px) {
    .variant-tabs {
        gap: 6px;
    }

    .variant-tab {
        padding: 6px 12px;
        font-size: 0.85rem;
    }

    .variant-group-header {
        padding: 6px 10px;
    }

    .variant-group-questions {
        padding: 6px 0;
    }
}

/* ============================================
   РЕДАКТОР ПОСЛЕДОВАТЕЛЬНОСТИ
   ============================================ */

.sequence-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.sequence-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg);
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.sequence-order {
    width: 28px;
    height: 28px;
    background: var(--primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.sequence-item-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
}

.sequence-item-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Бейдж типа вопроса - стили */
.question-type-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

.question-type-badge.single,
.question-type-badge[class*="single"] {
    background: #dbeafe;
    color: #1d4ed8;
}

.question-type-badge.match {
    background: #fef3c7;
    color: #b45309;
}

.question-type-badge.sequence {
    background: #d1fae5;
    color: #047857;
}

.question-type-badge.short_answer {
    background: #fce7f3;
    color: #be185d;
}

.question-type-badge.fill_blanks {
    background: #eff6ff;
    color: #3b82f6;
}

/* ============================================ */
/* QUESTIONS PANEL - Новый интерфейс вопросов  */
/* ============================================ */

.questions-panel {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 100%;
}

/* Шапка панели */
.questions-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #f1f5f9;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}

.questions-panel-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.questions-panel-icon {
    width: 40px;
    height: 40px;
    background: var(--primary);
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.questions-panel-info h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.questions-panel-type {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 2px;
    display: inline-block;
}

.questions-panel-stats {
    display: flex;
    gap: 16px;
}

.questions-panel-stats .stat-item {
    text-align: center;
}

.questions-panel-stats .stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    display: block;
    color: var(--primary);
}

.questions-panel-stats .stat-label {
    font-size: 0.8rem;
    color: var(--text-light);
    font-weight: 500;
}

/* Кнопки действий */
.questions-panel-actions {
    display: flex;
    gap: 10px;
    padding: 12px 20px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.questions-panel-actions .btn {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-icon-inline {
    font-size: 1rem;
}

/* Секция вариантов */
.variants-section {
    padding: 12px 20px;
    background: #fefefe;
    border-bottom: 1px solid var(--border);
}

.variants-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.variants-section-header h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text);
}

.variants-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.9rem;
}

.warning-icon {
    font-size: 1.1rem;
}

/* Сетка карточек вариантов */
.variants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.variant-card {
    background: white;
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.variant-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
}

.variant-card.active {
    border-color: var(--primary);
    background: rgba(79, 70, 229, 0.05);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.variant-card.empty {
    border-style: dashed;
    opacity: 0.7;
}

.variant-card-none {
    border-color: #f59e0b;
    background: #fffbeb;
    min-height: auto;
    padding: 10px 12px 12px;
    position: relative;
}

.variant-card-none:hover {
    border-color: #d97706;
    background: #fef3c7;
}

.variant-card-none.active {
    border-color: #d97706;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

.variant-card-none .variant-card-number {
    color: #92400e;
}

.variant-card-none .variant-card-count {
    color: #b45309;
}

/* Кнопка "Назначить" внутри карточки без варианта */
.assign-variant-btn {
    margin-top: 8px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f59e0b;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
    white-space: nowrap;
}

.assign-variant-btn:hover {
    background: #d97706;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4);
}

.variant-card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.variant-card-number {
    font-weight: 600;
    color: var(--text);
    font-size: 0.9rem;
}

.variant-complete-badge {
    width: 20px;
    height: 20px;
    background: var(--success);
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.variant-warning-badge {
    width: 20px;
    height: 20px;
    background: #f59e0b;
    color: white;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.variant-card-count {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 4px;
}

.variant-card-hint {
    font-size: 0.75rem;
    color: #f59e0b;
    font-weight: 500;
}

.variant-card-progress {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.variant-card-progress .progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Кнопки фильтрации вариантов */
.variants-tabs-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.variant-filter-btn {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.variant-filter-btn:hover {
    background: #f8fafc;
}

.variant-filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Пустое состояние для вариантов */
.variants-empty-state {
    background: #f8fafc;
    border: 2px dashed var(--border);
    border-radius: 12px;
    padding: 20px 24px;
}

.variants-empty-state p {
    margin: 0 0 12px;
    color: var(--text);
    font-weight: 500;
}

.variants-empty-state ol {
    margin: 0;
    padding-left: 20px;
    color: var(--text-light);
}

.variants-empty-state li {
    margin-bottom: 6px;
}

/* Панель массовых действий */
.questions-bulk-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 28px;
    background: #f1f5f9;
    border-bottom: 1px solid var(--border);
}

.questions-bulk-bar .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}

.bulk-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

.selected-count {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* Контейнер списка вопросов */
.questions-list-container {
    padding: 12px 20px;
}

.questions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Пустое состояние для вопросов */
.questions-empty-state {
    text-align: center;
    padding: 24px 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px dashed var(--border);
}

.questions-empty-state .empty-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.questions-empty-state h4 {
    margin: 0 0 4px;
    font-size: 1rem;
    color: var(--text);
}

.questions-empty-state p {
    margin: 0 0 12px;
    color: var(--text-light);
    font-size: 0.85rem;
}

.questions-empty-state .empty-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Элемент вопроса в списке */
.question-item {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 20px;
    transition: all 0.2s ease;
}

.question-item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.question-item.selected {
    background: rgba(79, 70, 229, 0.04);
    border-color: var(--primary);
}

.question-item-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.question-checkbox {
    margin-top: 2px;
}

.question-number {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.9rem;
    min-width: 30px;
}

.question-text-preview {
    flex: 1;
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.4;
    word-break: break-word;
}

.question-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-left: 42px;
}

.question-variant-badge {
    padding: 3px 10px;
    background: #3b82f6;
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.question-variant-badge.no-variant {
    background: #fef3c7;
    color: #92400e;
}

.question-weight-badge {
    padding: 3px 8px;
    background: #f3f4f6;
    color: var(--text-light);
    border-radius: 4px;
    font-size: 0.75rem;
}

.question-item-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* Подсветка только что отредактированного вопроса */
.question-just-edited {
    animation: highlightQuestion 3s ease-out;
}

@keyframes highlightQuestion {
    0% {
        background: rgba(79, 70, 229, 0.15);
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.2);
    }
    100% {
        background: white;
        border-color: var(--border);
        box-shadow: none;
    }
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .questions-panel-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        padding: 20px;
    }

    .questions-panel-title {
        flex-direction: column;
        text-align: center;
    }

    .questions-panel-actions {
        justify-content: center;
        padding: 16px;
    }

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

    .questions-list-container {
        padding: 16px;
    }

    .question-item-meta {
        margin-left: 0;
        margin-top: 8px;
    }
}

/* Группы вопросов по вариантам */
.variant-group {
    margin-bottom: 24px;
}

.variant-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #e0e7ff;
    border-radius: 10px;
    margin-bottom: 12px;
}

.variant-group-title {
    font-weight: 600;
    color: #4338ca;
    font-size: 1rem;
}

.variant-group-count {
    font-size: 0.85rem;
    color: #6366f1;
    background: white;
    padding: 3px 10px;
    border-radius: 20px;
}

.variant-group-questions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 8px;
}

.variant-group-none .variant-group-header {
    background: #fef3c7;
}

.variant-group-none .variant-group-title {
    color: #92400e;
}

.variant-group-none .variant-group-count {
    color: #b45309;
}

/* Импорт панель */
.import-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.import-panel {
    background: white;
    border-radius: 16px;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.import-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.import-panel-header h3 {
    margin: 0;
    font-size: 1.2rem;
}

.btn-close {
    width: 36px;
    height: 36px;
    border: none;
    background: #f3f4f6;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-close:hover {
    background: #e5e7eb;
}

.import-variant-select {
    padding: 16px 24px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
}

.import-variant-select label {
    display: block;
    margin-bottom: 8px;
}

.import-variant-select select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 1rem;
}

.import-template-link {
    padding: 12px 24px;
}

.import-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
}

.import-tab {
    flex: 1;
    padding: 12px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-light);
    transition: all 0.2s;
}

.import-tab:hover {
    background: #f8fafc;
}

.import-tab.active {
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    font-weight: 500;
}

/* ============================================ */
/* SEQUENCE EDITOR - Редактор последовательности с картинками */
/* ============================================ */

.sequence-row-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.sequence-row-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.sequence-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.sequence-row-content {
    margin-bottom: 12px;
}

.sequence-row-content .sequence-item-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
}

.sequence-row-content .sequence-item-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.sequence-row-image {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.sequence-image-preview {
    flex: 1;
    min-width: 100px;
    max-width: 200px;
}

.sequence-image-preview img {
    max-width: 100%;
    max-height: 120px;
    border-radius: 8px;
    border: 1px solid var(--border);
    object-fit: contain;
}

.sequence-image-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Стили для последовательности в тесте (студент) */
.sequence-with-images .sequence-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.sequence-item-with-image {
    flex-direction: column;
    padding: 12px;
    min-height: 150px;
}

.sequence-item-with-image .sequence-number {
    position: absolute;
    top: 8px;
    left: 8px;
}

.sequence-item-with-image .sequence-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    flex-direction: column;
}

.sequence-item-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.sequence-item-image {
    max-width: 100%;
    max-height: 100px;
    border-radius: 6px;
    object-fit: contain;
}

.sequence-item-with-image {
    position: relative;
}

/* ============================================ */
/* IMPORT MODAL FIX - Исправление модального окна импорта */
/* ============================================ */

.import-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.import-panel {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    margin: auto;
}

.import-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: #f8fafc;
    border-radius: 16px 16px 0 0;
}

.import-panel-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text);
}

#import-form {
    padding: 20px 24px;
}

.import-variant-select {
    padding: 0;
    background: transparent;
    border-bottom: none;
    margin-bottom: 16px;
}

.import-variant-select label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.import-variant-select select {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--primary);
    border-radius: 8px;
    font-size: 1rem;
    background: white;
}

.import-variant-select .form-hint {
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--text-light);
}

.import-template-link {
    padding: 0;
    margin-bottom: 16px;
}

.import-template-link .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.import-tabs {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

.import-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: #f8fafc;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--text-light);
    transition: all 0.2s;
}

.import-tab:first-child {
    border-right: 1px solid var(--border);
}

.import-tab:hover {
    background: #e5e7eb;
}

.import-tab.active {
    background: var(--primary);
    color: white;
    border-bottom: none;
    font-weight: 500;
}

/* Import form footer */
.import-form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    margin-top: 20px;
}

.import-form-footer .btn {
    min-width: 140px;
    padding: 12px 24px;
    font-size: 1rem;
}

/* Убираем дублирование старых стилей */
.import-panel form textarea {
    width: 100%;
    min-height: 200px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.9rem;
    resize: vertical;
}

.import-panel form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* ============================================
   REFACTORED STYLES (results.js)
   ============================================ */

/* Уведомление (тост) */
.notification-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--success);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 10000;
    animation: slideIn 0.3s ease;
    font-weight: 600;
}

/* Универсальное уведомление (results-notification) */
.results-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    transform: translateX(120%);
    transition: transform 0.3s ease;
    font-weight: 500;
    max-width: 400px;
    background: var(--primary);
    color: white;
}

.results-notification.show {
    transform: translateX(0);
}

.results-notification .notification-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.results-notification .notification-text {
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Типы уведомлений */
.results-notification.notification-success {
    background: var(--success);
}

.results-notification.notification-warning {
    background: var(--warning);
}

.results-notification.notification-error {
    background: var(--danger);
}

.results-notification.notification-info {
    background: var(--primary);
}

/* ============================================
   МАССОВОЕ УДАЛЕНИЕ ДИСЦИПЛИН
   ============================================ */

.section-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bulk-select-bar {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 16px;
}

.bulk-select-bar .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.bulk-select-bar .checkbox-label:hover {
    color: var(--text-primary);
}

.bulk-select-bar input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.discipline-card {
    position: relative;
}

.discipline-checkbox {
    position: absolute;
    top: 14px;
    left: 10px;
    z-index: 10;
}

.discipline-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
}

/* Отступ для заголовка когда есть чекбокс */
.discipline-card:has(.discipline-checkbox) .discipline-card-inner {
    padding-left: 36px;
}

.discipline-card:has(.discipline-select:checked) {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.btn-delete-selected {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ============================================
   ПАПКИ
   ============================================ */

/* Табы папок */
.folder-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding: 8px;
    background: var(--bg);
    border-radius: 12px;
}

.folder-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--card);
    border: 2px solid transparent;
    font-size: 0.9rem;
    position: relative;
}

.folder-tab:hover {
    background: var(--border);
}

.folder-tab.active {
    border-color: var(--folder-color, var(--primary));
    background: color-mix(in srgb, var(--folder-color, var(--primary)) 10%, var(--card));
}

.folder-tab-icon {
    font-size: 1rem;
}

.folder-tab-name {
    font-weight: 500;
    color: var(--text);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.folder-tab-count {
    font-size: 0.75rem;
    background: var(--bg);
    padding: 2px 6px;
    border-radius: 10px;
    color: var(--text-light);
}

.folder-tab.active .folder-tab-count {
    background: var(--folder-color, var(--primary));
    color: white;
}

.folder-tab-actions {
    display: none;
    gap: 2px;
    margin-left: 4px;
}

.folder-tab:hover .folder-tab-actions {
    display: flex;
}

.folder-tab-btn {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.folder-tab-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.folder-tab-btn.danger:hover {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

/* Группа перемещения в папку */
.folder-move-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.folder-select {
    padding: 8px 12px;
    font-size: 0.9rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    min-width: 200px;
    transition: border-color 0.2s;
}

.folder-select:focus {
    outline: none;
    border-color: var(--primary);
}

.folder-select:hover {
    border-color: var(--primary);
}

.folder-select option {
    padding: 8px;
}

[data-theme="dark"] .folder-tab {
    background: var(--card);
}

[data-theme="dark"] .folder-tab:hover {
    background: var(--border);
}

[data-theme="dark"] .folder-tab-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.folders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.folder-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--folder-color, #667eea);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
    position: relative;
    overflow: hidden;
}

.folder-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0);
    transition: background 0.2s;
}

.folder-card:hover::before {
    background: rgba(255, 255, 255, 0.1);
}

.folder-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.folder-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.folder-info {
    flex: 1;
    min-width: 0;
}

.folder-name {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-count {
    font-size: 0.75rem;
    opacity: 0.85;
    margin-top: 2px;
}

.folder-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    position: relative;
    z-index: 1;
}

.folder-card:hover .folder-actions {
    opacity: 1;
}

.folder-actions .btn-icon {
    width: 26px;
    height: 26px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: background 0.2s;
}

.folder-actions .btn-icon:hover {
    background: rgba(255, 255, 255, 0.3);
}

.folder-actions .btn-icon.btn-danger:hover {
    background: rgba(239, 68, 68, 0.8);
}

/* Хлебные крошки папки */
.folder-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg);
    border-radius: 10px;
    margin-bottom: 16px;
}

.folder-path {
    font-weight: 600;
    color: var(--text);
    flex: 1;
}

.folder-breadcrumb .btn-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 0.8rem;
}

/* Форма папки */
.color-picker-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.color-option {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.color-option:hover {
    transform: scale(1.1);
}

.color-option.selected {
    border-color: var(--text);
    box-shadow: 0 0 0 2px var(--card);
}

/* Селект перемещения в папку */
.move-to-folder-select {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card);
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
}

.move-to-folder-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Компактный модал */
.compact-modal {
    max-width: 400px;
}

/* Модальное окно папки */
.folder-modal-content {
    max-width: 420px;
    width: 90%;
    background: var(--card);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.folder-modal-content .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.folder-modal-content .modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text);
}

.folder-modal-content .modal-body {
    padding: 24px;
}

.folder-modal-content .modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    background: var(--bg);
}

.folder-modal-content .form-group {
    margin-bottom: 20px;
}

.folder-modal-content .form-group:last-child {
    margin-bottom: 0;
}

.folder-modal-content .form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text);
}

.folder-modal-content .form-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.folder-modal-content .form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.folder-modal-content .btn-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.folder-modal-content .btn-close:hover {
    background: var(--border);
    color: var(--text);
}

/* Тёмная тема для папок */
[data-theme="dark"] .folder-breadcrumb {
    background: var(--card);
}

[data-theme="dark"] .color-option.selected {
    border-color: #fff;
}

/* Фильтр группы - мульти-селект */
.filter-select-multi {
    min-width: 200px;
    height: 38px;
}

/* Подсказка под фильтром */
.filter-hint {
    display: block;
    color: #666;
    font-size: 11px;
}

/* ============================================
   SEARCHABLE DROPDOWN (Фильтр с поиском)
   ============================================ */
.searchable-dropdown {
    position: relative;
    width: 100%;
}

.searchable-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s;
    min-height: 42px;
}

.searchable-dropdown-toggle:hover {
    border-color: var(--accent);
}

.searchable-dropdown.open .searchable-dropdown-toggle {
    border-color: var(--accent);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.searchable-dropdown-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.searchable-dropdown-text.placeholder {
    color: var(--text-light);
}

.searchable-dropdown-arrow {
    margin-left: 8px;
    transition: transform 0.2s;
    color: var(--text-light);
}

.searchable-dropdown.open .searchable-dropdown-arrow {
    transform: rotate(180deg);
}

.searchable-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card);
    border: 2px solid var(--accent);
    border-top: none;
    border-radius: 0 0 8px 8px;
    z-index: 1000;
    max-height: 300px;
    display: none;
    box-shadow: var(--shadow-lg);
}

.searchable-dropdown.open .searchable-dropdown-menu {
    display: block;
}

.searchable-dropdown-search {
    padding: 10px;
    border-bottom: 1px solid var(--border);
}

.searchable-dropdown-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    background: var(--bg);
    color: var(--text);
}

.searchable-dropdown-search input:focus {
    outline: none;
    border-color: var(--accent);
}

.searchable-dropdown-search input::placeholder {
    color: var(--text-light);
}

.searchable-dropdown-list {
    max-height: 220px;
    overflow-y: auto;
}

.searchable-dropdown-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color 0.15s;
    border-bottom: 1px solid var(--border);
}

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

.searchable-dropdown-item:hover {
    background: var(--bg);
}

.searchable-dropdown-item.selected {
    background: rgba(107, 140, 174, 0.15);
    font-weight: 500;
}

.searchable-dropdown-item.selected::before {
    content: '✓';
    margin-right: 8px;
    color: var(--accent);
    font-weight: bold;
}

.searchable-dropdown-item.hidden {
    display: none;
}

.searchable-dropdown-item.disabled,
.searchable-dropdown-item[data-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg);
}

.searchable-dropdown-empty {
    padding: 15px;
    text-align: center;
    color: var(--text-light);
    font-size: 13px;
}

/* Множественный выбор - показываем количество */
.searchable-dropdown-count {
    background: var(--accent);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    margin-left: 8px;
}

/* Чекбоксы для множественного выбора */
.searchable-dropdown-item input[type="checkbox"] {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Кнопки очистки/выбора всех */
.searchable-dropdown-actions {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}

.searchable-dropdown-actions button {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    background: var(--card);
    color: var(--text);
    transition: all 0.2s;
}

.searchable-dropdown-actions button:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* Фильтр-группа с выравниванием внизу */
.filter-group-end {
    align-self: flex-end;
}

/* Скрытая опция в select */
.option-hidden {
    display: none;
}

/* Groups search bar */
.groups-search-bar {
    margin-bottom: 15px;
}

.groups-search-input {
    width: 100%;
    max-width: 400px;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

.groups-count-span {
    margin-left: 10px;
    color: #666;
}

/* Sort bar */
.sort-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.sort-label {
    color: #666;
    font-size: 14px;
}

.sort-btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    color: #333;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.sort-btn:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

.sort-btn.active {
    background: var(--primary);
    color: white;
    border-color: transparent;
}

/* Students bulk actions checkbox label */
.students-bulk-actions .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Users filters */
.users-filters {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.users-search-input {
    flex: 1;
    min-width: 200px;
    max-width: 350px;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

.users-role-select {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}

.users-count-span {
    color: #666;
}

/* User card - assigned groups */
.user-assigned-groups {
    display: block;
    margin-top: 4px;
    color: #6b7280;
}

/* Exam upload section separator */
.exam-upload-section-separator {
    margin-top: 16px;
    border-top: 1px solid #e5e7eb;
    padding-top: 16px;
}

/* Srez search input */
.srez-search-input {
    width: 150px;
}

/* Modal small size */
.modal-content.modal-small {
    max-width: 400px;
}

/* Modal body with padding */
.modal-body-padded {
    padding: 20px;
}

/* Input uppercase */
.input-uppercase {
    text-transform: uppercase;
}

/* Error buttons container */
.error-buttons-container {
    margin-top: 24px;
}

/* ============================================
   КОМПАКТНОЕ МОДАЛЬНОЕ ОКНО УЧАСТНИКОВ
   ============================================ */

.participants-modal-compact {
    max-width: 1100px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
}

.participants-modal-compact .modal-header {
    flex-shrink: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.participants-modal-compact #exam-participants-content,
.participants-modal-compact #srez-participants-content {
    flex: 1;
    overflow: auto;
    padding: 0 20px 20px;
}

/* Основной layout */
.participants-layout {
    display: flex;
    gap: 20px;
    height: auto;
    min-height: 0;
}

.participants-sidebar {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    max-height: 65vh;
}

.participants-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* Карточка статистики */
.participants-info-card {
    display: flex;
    gap: 16px;
    padding: 12px;
    background: var(--primary);
    border-radius: 10px;
    color: white;
}

.participants-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label {
    font-size: 0.7rem;
    opacity: 0.9;
    margin-top: 2px;
}

/* Секции в сайдбаре */
.participants-section {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
}

.participants-section h4 {
    margin: 0 0 10px 0;
    font-size: 0.8rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Чипы групп для быстрого добавления */
.quick-add-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.group-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.group-chip:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: scale(1.02);
}

.group-chip:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.group-chip.done {
    background: #10b981;
}

.chip-count {
    background: rgba(255,255,255,0.25);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.75rem;
}

.variant-for-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.variant-for-group label {
    font-size: 0.8rem;
    color: var(--text-light);
}

.variant-for-group select {
    width: 80px;
}

.auto-distribute-option {
    margin-top: 8px;
    padding: 8px;
    background: var(--bg-light, #f8fafc);
    border-radius: 6px;
    border: 1px solid var(--border);
}

.auto-distribute-option .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text);
    margin: 0;
}

.auto-distribute-option .checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.auto-distribute-option .checkbox-label span {
    line-height: 1.3;
}

/* Старые стили (для совместимости) */
.assigned-groups-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.assigned-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg);
    border-radius: 8px;
    gap: 10px;
}

.group-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.group-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.group-count {
    font-size: 0.7rem;
    color: var(--text-light);
    margin-top: 2px;
}

.group-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.group-actions .btn-sm {
    padding: 6px 10px;
    min-width: 36px;
}

/* Подсказка когда нет групп */
.no-groups-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px;
    color: var(--text-light);
}

.hint-icon {
    font-size: 1.5rem;
    margin-bottom: 6px;
}

.no-groups-hint p {
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Форма ручного добавления */
.manual-add-form,
.file-upload-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-compact {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--card);
    color: var(--text);
}

.input-compact:focus {
    outline: none;
    border-color: var(--primary);
}

.input-small {
    width: 70px;
    flex-shrink: 0;
}

.form-row-compact {
    display: flex;
    gap: 8px;
}

.form-row-compact .input-compact:first-child {
    flex: 1;
}

.btn-full {
    width: 100%;
}

/* Мини-селект варианта */
.variant-select-mini {
    width: 50px;
    padding: 6px 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.8rem;
    background: var(--card);
    color: var(--text);
    cursor: pointer;
}

.variant-select-mini:focus {
    outline: none;
    border-color: var(--primary);
}

/* Toolbar */
.participants-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.toolbar-left,
.toolbar-right {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.search-input-compact {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    background: var(--card);
    color: var(--text);
    width: 140px;
}

.search-input-compact:focus {
    outline: none;
    border-color: var(--primary);
}

.filter-select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.8rem;
    background: var(--card);
    color: var(--text);
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Таблица участников */
.participants-table-wrap {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 55vh;
    min-height: 200px;
}

.participants-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.participants-table th {
    background: var(--bg);
    padding: 8px 6px;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-light);
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 1;
}

.participants-table td {
    padding: 6px;
    border-top: 1px solid var(--border);
}

.participants-table tr:hover {
    background: var(--bg);
}

.td-num {
    width: 30px;
    text-align: center;
    color: var(--text-light);
}

.td-name {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.td-group {
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.td-var {
    width: 50px;
}

.td-code code {
    background: #fef3c7;
    color: #92400e;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.td-att {
    width: 45px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-light);
}

.td-status {
    width: 50px;
    text-align: center;
}

.td-actions {
    width: 55px;
    text-align: right;
}

/* Мини-кнопки */
.btn-mini {
    width: 22px;
    height: 22px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--card);
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--text);
}

.btn-mini:hover {
    background: var(--bg);
}

.btn-mini.btn-danger {
    color: #dc2626;
    border-color: #fecaca;
}

.btn-mini.btn-danger:hover {
    background: #fef2f2;
}

/* Пустое состояние */
.participants-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    padding: 40px 20px;
}

.participants-empty .empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.participants-empty p {
    margin: 0;
}

.participants-empty .empty-hint {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 4px;
}

/* Тёмная тема */
[data-theme="dark"] .td-code code {
    background: #78350f;
    color: #fcd34d;
}

[data-theme="dark"] .btn-mini.btn-danger {
    border-color: #7f1d1d;
}

[data-theme="dark"] .btn-mini.btn-danger:hover {
    background: #450a0a;
}

/* Адаптив */
@media (max-width: 768px) {
    .participants-layout {
        flex-direction: column;
        min-height: auto;
    }

    .participants-sidebar {
        flex: none;
        max-height: none;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .participants-section {
        flex: 1;
        min-width: 200px;
    }

    .participants-info-card {
        flex: 0 0 100%;
    }

    .participants-table-wrap {
        max-height: 40vh;
    }
}

/* ============================================
   МОДАЛЬНОЕ ОКНО ДИСЦИПЛИНЫ (улучшенное)
   ============================================ */

.discipline-modal-compact {
    max-width: 560px;
    width: 95%;
}

.discipline-form-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 24px 24px;
}

.discipline-form-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.discipline-name-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 1rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.discipline-name-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(107, 140, 174, 0.15);
}

.discipline-name-input::placeholder {
    color: var(--text-light);
}

.discipline-form-groups {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--bg);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.groups-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.groups-header .form-label {
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
}

.groups-counter {
    font-size: 0.8rem;
    color: var(--text-light);
    background: var(--card);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
}

.groups-counter.has-selection {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.groups-search-box {
    position: relative;
}

.groups-search-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--text);
    transition: border-color 0.2s;
}

.groups-search-input:focus {
    outline: none;
    border-color: var(--accent);
}

.discipline-groups-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}

.discipline-group-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.discipline-group-item:hover {
    border-color: var(--accent);
    background: rgba(107, 140, 174, 0.05);
}

.discipline-group-item.selected {
    border-color: var(--accent);
    background: rgba(107, 140, 174, 0.1);
}

.discipline-group-item input[type="checkbox"] {
    display: none;
}

.discipline-group-check {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: white;
    background: var(--card);
    flex-shrink: 0;
    transition: all 0.15s;
}

.discipline-group-item.selected .discipline-group-check {
    background: var(--accent);
    border-color: var(--accent);
}

.discipline-group-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
}

.discipline-group-count {
    font-size: 0.7rem;
    color: var(--text-light);
    background: var(--bg);
    padding: 2px 6px;
    border-radius: 10px;
    flex-shrink: 0;
}

.discipline-groups-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    text-align: center;
    color: var(--text-light);
}

.discipline-groups-empty .empty-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    opacity: 0.6;
}

.discipline-groups-empty p {
    margin: 0;
    font-size: 0.9rem;
}

.discipline-form-teachers {
    margin-top: 16px;
}

.discipline-form-teachers .form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text);
}

.teachers-dropdown {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.teachers-dropdown:focus {
    outline: none;
    border-color: var(--accent);
}

.selected-teachers-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.selected-teacher-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 20px;
    font-size: 0.85rem;
    color: #059669;
    font-weight: 500;
}

.remove-teacher-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.remove-teacher-btn:hover {
    background: #dc2626;
    color: white;
}

[data-theme="dark"] .selected-teacher-tag {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .remove-teacher-btn {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

[data-theme="dark"] .remove-teacher-btn:hover {
    background: #dc2626;
    color: white;
}

.discipline-form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* Тёмная тема для модального окна дисциплины */
[data-theme="dark"] .discipline-name-input {
    background: var(--bg);
}

[data-theme="dark"] .discipline-name-input:focus {
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

[data-theme="dark"] .discipline-form-groups {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .groups-search-input {
    background: var(--card);
}

[data-theme="dark"] .discipline-group-item {
    background: var(--card);
}

[data-theme="dark"] .discipline-group-item:hover {
    background: rgba(96, 165, 250, 0.1);
}

[data-theme="dark"] .discipline-group-item.selected {
    background: rgba(96, 165, 250, 0.15);
    border-color: var(--primary);
}

[data-theme="dark"] .discipline-group-item.selected .discipline-group-check {
    background: var(--primary);
    border-color: var(--primary);
}

[data-theme="dark"] .discipline-group-count {
    background: rgba(255, 255, 255, 0.1);
}

/* Адаптив для модального окна дисциплины */
@media (max-width: 480px) {
    .discipline-modal-compact {
        max-width: 100%;
        margin: 10px;
    }

    .discipline-form-body {
        padding: 16px;
    }

    .discipline-groups-grid {
        grid-template-columns: 1fr;
        max-height: 180px;
    }

    .discipline-form-footer {
        flex-direction: column;
    }

    .discipline-form-footer .btn {
        width: 100%;
    }
}

/* ============================================
   РЕДАКТОР ПРОПУСКОВ (FILL_BLANKS)
   ============================================ */

.fill-blanks-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

.fill-blank-row {
    background: var(--bg);
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.fill-blank-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.fill-blank-id {
    font-family: monospace;
    font-size: 1rem;
    font-weight: 600;
    color: #3b82f6;
    background: #eff6ff;
    padding: 4px 10px;
    border-radius: 6px;
}

.fill-blank-answers {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
}

.fill-blank-answers:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.btn-danger-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: #fee2e2;
    color: #ef4444;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-danger-icon:hover {
    background: #fecaca;
    color: #dc2626;
}

/* ============================================
   BREADCRUMB НАВИГАЦИЯ
   ============================================ */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--card);
    border-radius: 10px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    flex-wrap: wrap;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-light);
}

.breadcrumb-item a,
.breadcrumb-link {
    color: var(--primary);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
    font-weight: 500;
}

.breadcrumb-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--text);
    font-weight: 600;
}

.breadcrumb-separator {
    color: var(--text-light);
    font-size: 0.8rem;
}

.breadcrumb-icon {
    font-size: 1rem;
}

/* ============================================
   TOAST С ОТМЕНОЙ УДАЛЕНИЯ
   ============================================ */

.undo-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1f2937;
    color: white;
    padding: 14px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    z-index: 10001;
    opacity: 0;
    transition: all 0.3s ease;
    min-width: 320px;
    max-width: 90%;
}

.undo-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.undo-toast-icon {
    font-size: 1.3rem;
}

.undo-toast-message {
    flex: 1;
    font-size: 0.95rem;
}

.undo-toast-btn {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.undo-toast-btn:hover {
    background: #2563eb;
}

.undo-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255,255,255,0.2);
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

.undo-toast-progress-bar {
    height: 100%;
    background: #3b82f6;
    width: 100%;
    animation: undoProgress linear forwards;
}

@keyframes undoProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* ============================================
   ГЛОБАЛЬНЫЙ ПОИСК
   ============================================ */

.global-search-container {
    position: relative;
}

.global-search-btn {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
    color: var(--text-light);
}

.global-search-btn:hover {
    border-color: var(--primary);
    color: var(--text);
}

.global-search-btn kbd {
    background: var(--bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: inherit;
    border: 1px solid var(--border);
}

.global-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 100px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}

.global-search-overlay.show {
    opacity: 1;
    visibility: visible;
}

.global-search-modal {
    background: var(--card);
    border-radius: 16px;
    width: 600px;
    max-width: 90%;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    transform: translateY(-20px);
    transition: transform 0.2s;
}

.global-search-overlay.show .global-search-modal {
    transform: translateY(0);
}

.global-search-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.global-search-header input {
    flex: 1;
    border: none;
    font-size: 1.1rem;
    outline: none;
    background: transparent;
    color: var(--text);
}

.global-search-header input::placeholder {
    color: var(--text-light);
}

.global-search-icon {
    font-size: 1.2rem;
    color: var(--text-light);
}

.global-search-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-light);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.global-search-close:hover {
    color: var(--text);
}

.global-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.global-search-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-light);
}

.global-search-empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.global-search-result-item {
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.global-search-result-item:hover {
    background: var(--bg);
}

.global-search-result-item.selected {
    background: var(--primary);
    color: white;
}

.global-search-result-item.selected .search-result-meta {
    color: rgba(255,255,255,0.8);
}

.search-result-text {
    font-size: 0.95rem;
    margin-bottom: 4px;
    line-height: 1.4;
}

.search-result-text mark {
    background: #fef08a;
    color: inherit;
    padding: 1px 2px;
    border-radius: 2px;
}

.global-search-result-item.selected .search-result-text mark {
    background: rgba(255,255,255,0.3);
}

.search-result-meta {
    font-size: 0.8rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-result-type {
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
}

.global-search-result-item.selected .search-result-type {
    background: rgba(255,255,255,0.2);
}

.global-search-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-light);
}

.global-search-hints {
    display: flex;
    gap: 16px;
}

.global-search-hints kbd {
    background: var(--bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: inherit;
    border: 1px solid var(--border);
    margin-right: 4px;
}

/* ============================================
   АВТОСОХРАНЕНИЕ ЧЕРНОВИКА
   ============================================ */

.draft-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--text-light);
    padding: 6px 12px;
    background: #fef3c7;
    border-radius: 6px;
    margin-bottom: 12px;
}

.draft-indicator-icon {
    font-size: 1rem;
}

.draft-indicator-text {
    flex: 1;
}

.draft-indicator-actions {
    display: flex;
    gap: 8px;
}

.draft-indicator-btn {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: underline;
}

.draft-indicator-btn:hover {
    color: var(--accent);
}

.draft-indicator-btn.discard {
    color: var(--danger);
}

/* Тёмная тема для новых компонентов */
[data-theme="dark"] .undo-toast {
    background: #374151;
}

[data-theme="dark"] .global-search-result-item:hover {
    background: #374151;
}

[data-theme="dark"] .draft-indicator {
    background: #423a1f;
    color: #fbbf24;
}

/* Подсветка найденного вопроса */
.highlight-found {
    animation: highlightPulse 0.5s ease 3;
    box-shadow: 0 0 0 3px var(--primary), 0 0 20px rgba(79, 70, 229, 0.3) !important;
}

@keyframes highlightPulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--primary), 0 0 20px rgba(79, 70, 229, 0.3); }
    50% { box-shadow: 0 0 0 5px var(--primary), 0 0 30px rgba(79, 70, 229, 0.5); }
}

/* Мобильная адаптация */
@media (max-width: 600px) {
    .breadcrumb {
        padding: 10px 12px;
        gap: 6px;
    }

    .breadcrumb-item {
        font-size: 0.8rem;
    }

    .undo-toast {
        min-width: auto;
        width: calc(100% - 32px);
        padding: 12px 16px;
    }

    .global-search-modal {
        width: 95%;
        max-height: 80vh;
    }

    .global-search-hints {
        display: none;
    }

    .global-search-btn span:nth-child(2),
    .global-search-btn kbd {
        display: none;
    }

    .global-search-btn {
        padding: 8px 10px;
    }
}

/* ============================================
   БАННЕР ТЕХНИЧЕСКИХ РАБОТ
   ============================================ */

.maintenance-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: #ff6b35;
    color: white;
    padding: 0;
    text-align: center;
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4);
    animation: slideDown 0.5s ease-out;
}

.maintenance-banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 16px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.maintenance-banner-icon {
    font-size: 2rem;
    animation: pulse 2s ease-in-out infinite;
}

.maintenance-banner-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.maintenance-banner-title {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.maintenance-banner-message {
    font-size: 0.9rem;
    opacity: 0.95;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Сдвиг контента при показе баннера */
body.maintenance-active {
    padding-top: 80px !important;
}

/* Мобильная адаптация баннера */
@media (max-width: 600px) {
    .maintenance-banner-content {
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
    }

    .maintenance-banner-icon {
        font-size: 1.5rem;
    }

    .maintenance-banner-title {
        font-size: 0.95rem;
    }

    .maintenance-banner-message {
        font-size: 0.8rem;
    }

    body.maintenance-active {
        padding-top: 100px !important;
    }
}

/* Кнопка управления техработами в админке */
.maintenance-toggle-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.maintenance-toggle-btn.active {
    background: #ff6b35;
    color: white;
}

.maintenance-toggle-btn.inactive {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
}

.maintenance-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* Статус режима техработ в профиле */
.maintenance-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.maintenance-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
}

.maintenance-indicator.active {
    background: #f59e0b;
    box-shadow: 0 0 6px #f59e0b;
    animation: pulse-warning 2s infinite;
}

.maintenance-indicator.error {
    background: var(--danger);
    box-shadow: 0 0 6px var(--danger);
}

@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.maintenance-status-text {
    font-size: 0.95rem;
    color: var(--text);
}

.maintenance-controls .form-group label {
    font-weight: 500;
    margin-bottom: 6px;
    display: block;
}

.btn-warning {
    background: var(--warning);
    color: #fff;
    border: none;
}

.btn-warning:hover {
    background: #d97706;
}

/* Блокирующий экран технических работ */
.maintenance-blocking-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0c1929;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.maintenance-blocking-content {
    text-align: center;
    padding: 60px 40px;
    max-width: 500px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.maintenance-blocking-icon {
    font-size: 80px;
    margin-bottom: 24px;
    animation: maintenance-pulse 2s ease-in-out infinite;
}

@keyframes maintenance-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.maintenance-blocking-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px 0;
}

.maintenance-blocking-message {
    font-size: 1.2rem;
    color: #f59e0b;
    margin: 0 0 24px 0;
    font-weight: 500;
}

.maintenance-blocking-info {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 32px;
}

.maintenance-blocking-info p {
    margin: 8px 0;
}

.maintenance-blocking-btn {
    padding: 14px 32px;
    font-size: 1rem;
    border-radius: 12px;
}

/* ============================================
   МОНИТОР АДМИНИСТРАТИВНОГО СРЕЗА
   ============================================ */

.monitor-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.monitor-controls .filter-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.monitor-controls .filter-group label {
    font-weight: 500;
    white-space: nowrap;
}

.monitor-controls .select-field {
    min-width: 300px;
}

.auto-refresh-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-light);
}

.auto-refresh-indicator .indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

/* Сетка статистики */
.monitor-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.monitor-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s;
}

.monitor-stat-card.active {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.05);
}

.monitor-stat-card.success {
    border-color: var(--success);
    background: rgba(34, 197, 94, 0.05);
}

.monitor-stat-card.danger {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.05);
}

.monitor-stat-card .stat-icon {
    font-size: 28px;
    line-height: 1;
}

.monitor-stat-card .stat-info {
    display: flex;
    flex-direction: column;
}

.monitor-stat-card .stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.monitor-stat-card .stat-label {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 4px;
}

/* Группы */
.monitor-group {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}

.monitor-group.has-problems {
    border-color: var(--warning);
}

.monitor-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--bg);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.monitor-group-header:hover {
    background: rgba(37, 99, 235, 0.05);
}

.group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.expand-icon {
    font-size: 0.75rem;
    color: var(--text-light);
    width: 16px;
}

.group-count {
    font-weight: 400;
    color: var(--text-light);
    font-size: 0.9rem;
}

.group-status-badges {
    display: flex;
    gap: 8px;
}

.group-status-badges .badge {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
}

.badge-progress {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.badge-completed {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.badge-violations {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.monitor-group-content {
    padding: 16px;
}

.monitor-group-content.collapsed {
    display: none;
}

/* Сетка карточек студентов */
.students-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

/* Карточка студента */
.student-card {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    transition: all 0.2s;
    position: relative;
}

.student-card.in-progress {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.03);
}

.student-card.passed {
    border-color: var(--success);
}

.student-card.failed {
    border-color: var(--danger);
}

.student-card.has-violations {
    box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.3);
}

.student-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.student-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 30px);
}

.student-status {
    font-size: 1.2rem;
}

/* Прогресс студента */
.student-progress {
    background: var(--bg);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
}

.progress-bar-container {
    height: 6px;
    background: var(--border);
    border-radius: 3px;
    margin-bottom: 10px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 4px;
}

.progress-row:last-child {
    margin-bottom: 0;
}

.progress-label {
    color: var(--text-light);
}

.progress-value {
    font-weight: 600;
    color: var(--text);
}

.progress-value.time {
    font-family: 'Courier New', monospace;
}

.progress-row.low-time .progress-value {
    color: var(--danger);
    animation: blink-time 1s infinite;
}

@keyframes blink-time {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Результат студента */
.student-result {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 8px;
    background: var(--bg);
    border-radius: 8px;
}

.student-result .result-grade {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}

.result-grade.grade-5 {
    background: var(--grade-5);
    color: var(--grade-5-text);
}

.result-grade.grade-4 {
    background: var(--grade-4);
    color: var(--grade-4-text);
}

.result-grade.grade-3 {
    background: var(--grade-3);
    color: var(--grade-3-text);
}

.result-grade.grade-2 {
    background: var(--grade-2);
    color: var(--grade-2-text);
}

.result-grade.grade-pass {
    background: var(--grade-5);
    color: var(--grade-5-text);
}

.result-grade.grade-fail {
    background: var(--grade-2);
    color: var(--grade-2-text);
}

.result-details {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    gap: 2px;
}

.result-percent {
    font-weight: 600;
    color: var(--text);
}

.result-correct,
.result-time {
    color: var(--text-light);
    font-size: 0.8rem;
}

/* Нарушения */
.student-violations {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--danger);
    font-weight: 500;
    margin-top: 8px;
}

.student-variant {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* Адаптивность */
@media (max-width: 1200px) {
    .monitor-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .monitor-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .monitor-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .monitor-controls .select-field {
        min-width: auto;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .monitor-stat-card {
        padding: 12px;
    }

    .monitor-stat-card .stat-value {
        font-size: 22px;
    }

    .monitor-stat-card .stat-icon {
        font-size: 22px;
    }
}

/* ============================================
   КОМПАКТНЫЙ ВИД МОНИТОРИНГА (БЕЗ АККОРДЕОНА)
   ============================================ */

/* Группа без сворачивания */
.monitor-group-open {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.monitor-group-open.has-problems {
    border-color: var(--warning);
}

.monitor-group-header-open {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.group-name-large {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

/* Компактная сетка карточек */
.students-grid-open {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    padding: 12px;
}

/* Компактная карточка студента */
.student-card-compact {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    transition: all 0.2s;
    min-height: 70px;
}

.student-card-compact.not-started {
    border-color: var(--border);
    opacity: 0.7;
}

.student-card-compact.in-progress {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.05);
    animation: pulse-card 2s infinite;
}

@keyframes pulse-card {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.2); }
    50% { box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1); }
}

.student-card-compact.passed {
    border-color: var(--success);
    background: rgba(34, 197, 94, 0.03);
}

.student-card-compact.failed {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.03);
}

.student-card-compact.has-violations {
    box-shadow: inset 0 0 0 2px rgba(239, 68, 68, 0.4);
}

/* Главная строка карточки */
.card-row-main {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.card-status-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.card-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.card-grade {
    font-size: 1rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}

.card-grade.grade-5 {
    background: var(--grade-5);
    color: var(--grade-5-text);
}

.card-grade.grade-4 {
    background: var(--grade-4);
    color: var(--grade-4-text);
}

.card-grade.grade-3 {
    background: var(--grade-3);
    color: var(--grade-3-text);
}

.card-grade.grade-2 {
    background: var(--grade-2);
    color: var(--grade-2-text);
}

.card-grade.grade-pass {
    background: var(--grade-5);
    color: var(--grade-5-text);
}

.card-grade.grade-fail {
    background: var(--grade-2);
    color: var(--grade-2-text);
}

/* Дисциплина */
.card-discipline {
    font-size: 0.7rem;
    color: var(--text-light);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Информационная строка */
.card-row-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

.card-progress {
    font-weight: 600;
    color: var(--text);
}

.card-time {
    color: var(--text-light);
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
}

.student-card-compact.in-progress .card-time {
    color: var(--primary);
}

.card-violations {
    color: var(--danger);
    font-weight: 600;
    margin-left: auto;
}

/* Поиск по ФИО */
.monitor-controls .input-field {
    min-width: 200px;
}

/* Адаптивность компактного вида */
@media (max-width: 900px) {
    .students-grid-open {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

@media (max-width: 600px) {
    .students-grid-open {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 10px;
    }

    .student-card-compact {
        padding: 8px 10px;
    }

    .card-name {
        font-size: 0.8rem;
    }

    .card-row-info {
        font-size: 0.75rem;
    }

    .monitor-controls .filter-group {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .monitor-controls .input-field {
        min-width: auto;
        width: 100%;
    }
}

@media (max-width: 400px) {
    .students-grid-open {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================
   СТУДЕНТЫ СО СПИСКОМ ДИСЦИПЛИН
   ============================================ */

.students-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.student-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.2s;
}

.student-row:hover {
    background: rgba(37, 99, 235, 0.03);
}

.student-row.has-violations {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.03);
}

.student-name-col {
    min-width: 180px;
    flex-shrink: 0;
}

.student-fio {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
}

.student-disciplines-col {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

/* Статус дисциплины */
.disc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    background: var(--card);
    border: 1px solid var(--border);
    transition: all 0.2s;
}

.disc-status.not-started {
    opacity: 0.6;
}

.disc-status.in-progress {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.08);
    animation: pulse-disc 2s infinite;
}

@keyframes pulse-disc {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.3); }
    50% { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
}

.disc-status.passed {
    border-color: var(--success);
    background: rgba(34, 197, 94, 0.08);
}

.disc-status.failed {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.08);
}

.disc-status.has-violations {
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.5);
}

.disc-name {
    color: var(--text);
    font-weight: 500;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.disc-icon {
    font-size: 0.9rem;
}

.disc-info {
    font-weight: 600;
    color: var(--text);
    font-family: 'Courier New', monospace;
}

.disc-status.in-progress .disc-info {
    color: var(--primary);
}

.disc-status.passed .disc-info,
.disc-status.failed .disc-info {
    font-size: 1rem;
    font-weight: 700;
}

.disc-status.passed .disc-info {
    color: var(--success);
}

.disc-status.failed .disc-info {
    color: var(--danger);
}

.disc-violations {
    color: var(--danger);
    font-weight: 600;
    font-size: 0.75rem;
}

/* Адаптивность */
@media (max-width: 768px) {
    .student-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .student-name-col {
        min-width: auto;
        width: 100%;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border);
    }

    .student-disciplines-col {
        width: 100%;
    }

    .disc-name {
        max-width: 120px;
    }
}

@media (max-width: 480px) {
    .disc-status {
        padding: 5px 8px;
        font-size: 0.75rem;
    }

    .disc-name {
        max-width: 80px;
    }
}

/* ============================================
   НОМЕР ТЕКУЩЕГО ВОПРОСА
   ============================================ */

.disc-question {
    background: var(--primary);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ============================================
   БЛОК ТЕХНИЧЕСКИХ ОШИБОК
   ============================================ */

.monitor-errors {
    margin-bottom: 16px;
}

.monitor-errors-box {
    background: rgba(239, 68, 68, 0.08);
    border: 2px solid var(--danger);
    border-radius: 12px;
    padding: 16px;
    animation: shake-error 0.5s ease-in-out;
}

@keyframes shake-error {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.errors-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-weight: 700;
    color: var(--danger);
    font-size: 1.1rem;
}

.errors-icon {
    font-size: 1.5rem;
    animation: pulse-error 1s infinite;
}

@keyframes pulse-error {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.errors-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.error-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--card);
    border-radius: 8px;
    font-size: 0.9rem;
}

.error-item.error-critical {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--danger);
}

.error-item.error-network {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--warning);
}

.error-type {
    font-weight: 600;
    white-space: nowrap;
}

.error-test {
    color: var(--text-light);
    font-style: italic;
}

.error-message {
    color: var(--text);
    flex: 1;
}

/* ============================================
   КНОПКА СБРОСА В ПАНЕЛИ УПРАВЛЕНИЯ
   ============================================ */

.monitor-controls .btn-danger {
    background: var(--danger);
    color: white;
    border: none;
}

.monitor-controls .btn-danger:hover {
    background: #dc2626;
}

/* Время последнего обновления */
.auto-refresh-indicator .last-update {
    margin-left: 8px;
    font-size: 0.8rem;
    color: var(--success);
    font-family: 'Courier New', monospace;
}

/* ============================================
   МИГАЮЩИЕ ПРЕДУПРЕЖДЕНИЯ
   ============================================ */

/* Мигающая иконка предупреждения */
.warning-blink {
    animation: blink-warning 1s ease-in-out infinite;
    font-size: 0.9rem;
}

.warning-blink.critical {
    animation: blink-critical 0.5s ease-in-out infinite;
}

@keyframes blink-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes blink-critical {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Зависшая сессия */
.disc-status.stale-session {
    border-color: var(--warning) !important;
    background: rgba(245, 158, 11, 0.15) !important;
}

/* Истекшее время */
.disc-status.time-expired {
    border-color: var(--danger) !important;
    background: rgba(239, 68, 68, 0.2) !important;
    animation: pulse-expired 1s ease-in-out infinite;
}

@keyframes pulse-expired {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2); }
}

/* Мало времени */
.disc-status.low-time .disc-info {
    color: var(--danger) !important;
    animation: blink-warning 1s ease-in-out infinite;
}

/* Карточка проблем в статистике */
.monitor-stat-card.problem-blink {
    border-color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
    animation: pulse-problem 1.5s ease-in-out infinite;
}

@keyframes pulse-problem {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0.1);
        transform: scale(1.02);
    }
}

.monitor-stat-card.problem-blink .stat-icon {
    animation: shake-icon 0.5s ease-in-out infinite;
}

@keyframes shake-icon {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

/* ============================================
   УДАЛЕНИЕ СТУДЕНТА ИЗ СИСТЕМЫ
   ============================================ */

.stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text);
}

.stat-chip strong {
    color: var(--primary);
}

.delete-section {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg);
    border-radius: 8px;
    border-left: 3px solid var(--border);
}

.delete-section h5 {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    color: var(--text);
}

.delete-section ul {
    margin: 0;
    padding-left: 20px;
    font-size: 0.85rem;
    color: var(--text-light);
}

.delete-section ul li {
    margin-bottom: 4px;
}

.delete-student-summary {
    margin-bottom: 16px;
}

.delete-student-options .checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.delete-student-options .checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

[data-theme="dark"] .stat-chip {
    background: var(--card);
    border-color: var(--border);
}

[data-theme="dark"] .delete-section {
    background: var(--card);
}

/* ============================================
   Кнопка переключения темы (светлая/тёмная)
   ============================================ */
.theme-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(128,128,128,0.3);
    background: var(--bg, #fff);
    font-size: 20px;
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.2s, box-shadow 0.2s;
}
.theme-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}