/* ИИ: порядок <link> — docs/css-cascade-order.md · ур.2 Base (*-uni). */
/* ==========================================================================
 * BASE-UNI — базовый слой системы стилей
 * Техническая логика для ИИ-ассистента:
 * - хранить здесь только глобальные токены, reset, body/html foundation и keyframes;
 * - не добавлять breakpoint-специфичные размеры и page-only override;
 * - responsive-правки размещать в `desktop-uni.css`, `tablet-uni.css`,
 *   `mobile-uni.css` и `mobile-small-uni.css`.
 * ========================================================================== */

/* Базовые анимации */
@keyframes adminCuratorFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}@keyframes translation-slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Локально разрешаем горизонтальный overflow для широких admin/login блоков. */
body .container:has(.curator-list-table), body .container .table-responsive:has(.curator-list-table), body .container.has-login
{
    overflow-x: visible !important;
}

@keyframes admin-apostille-gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}@keyframes admin-apostille-pulse-badge {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.7);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(243, 156, 18, 0);
    }
}@keyframes admin-apostille-slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}@keyframes admin-apostille-pulse-counter {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}@keyframes admin-apostille-pulse-success {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}@keyframes admin-apostille-glow-success {
    0% { 
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
        transform: scale(1);
    }
    100% { 
        box-shadow: 0 6px 25px rgba(40, 167, 69, 0.5);
        transform: scale(1.05);
    }
}@keyframes admin-apostille-modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}@keyframes admin-apostille-modalSlideIn {
    from { 
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

:root
{
    --main-primary: #2792ae;
    --main-text-dark: #333;
    --main-blue: #007bff;
    --main-border: #ddd;
    --main-white: #fff;
    --main-bg-light: #f8f9fa;
    --main-bg-lighter: #f9f9f9;
    --main-success: #66BB6A;
    --main-success-dark: #4CAF50;
    --main-danger: #dc3545;
    --main-warning: #ffc107;
    --main-info: #17a2b8;
    
    --main-space-xxs: 2px;
    --main-space-xs: 5px;
    --main-space-sm: 8px;
    --main-space-md: 10px;
    --main-space-md-plus: 12px;
    --main-space-lg-minus: 15px;
    --main-space-lg: 20px;
    --main-space-xl: 16px;
    --main-space-xxl: 25px;
    
    --main-radius-sm: 4px;
    --main-radius-md: 8px;
    --main-radius-lg: 12px;
    
    --main-shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --main-shadow-md: 0 4px 8px rgba(0,0,0,0.1);
    --main-shadow-lg: 0 8px 16px rgba(0,0,0,0.1);
    
    --main-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --main-font-serif: "Playfair Display", serif;
}/* ===== УНИВЕРСАЛЬНЫЕ АНИМАЦИИ ===== */@keyframes footer-lang-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}@keyframes lesson-warning-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}/* ===== УНИВЕРСАЛЬНЫЕ АНИМАЦИИ ===== */@keyframes fadeInTooltip {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-var(--main-space-xs));
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}/* === teams styles merged into *-uni @ 2026-04-03 10:23:03 === */:root
{
    /* Teams Colors */
    --teams-primary: #f57c00;
    --teams-primary-color: #4a90e2;
    --teams-primary-dark: #ef6c00;
    --teams-primary-darker: #e65100;
    --teams-primary-light: #fff3e0;
    --teams-accent: #ff9800;
    --teams-warning: #ffcc02;
    --teams-error-color: #e74c3c;
    --teams-success-color: #27ae60;
    --teams-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --teams-gradient-primary: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    --teams-gradient-secondary: linear-gradient(135deg, #27ae60 0%, #219a52 100%);
    --teams-gradient-light: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --teams-text-dark: #2c3e50;
    --teams-text-muted: #7f8c8d;
    --teams-white: #ffffff;
    
    /* Teams Backgrounds */
    --teams-card-bg: #ffffff;
    --teams-light-bg: #f8f9fa;
    --teams-border-color: #ced4da;
    --teams-button-bg: #6c757d;
    --teams-tag-bg: #e9ecef;
    --teams-tag-text: #495057;
    
    /* Teams Spacing */
    --teams-space-xs: 4px;
    --teams-space-sm: 8px;
    --teams-space-md: 12px;
    --teams-space-lg: 20px;
    --teams-space-xl: 25px;
    
    /* Teams Typography */
    --teams-font-size-xs: 11px;
    --teams-font-size-sm: 13px;
    --teams-font-size-md: 15px;
    --teams-font-size-lg: 18px;
    --teams-font-size-xl: 22px;
    
    /* Teams Radius */
    --teams-radius-sm: 4px;
    --teams-radius-md: 8px;
    --teams-radius-lg: 12px;
    --teams-radius-xl: 16px;
    
    /* Teams Shadows */
    --teams-shadow-sm: 0 2px 8px rgba(245, 124, 0, 0.2);
    --teams-shadow-md: 0 4px 12px rgba(245, 124, 0, 0.15);
    --teams-shadow-lg: 0 8px 20px rgba(245, 124, 0, 0.3);
}@keyframes teams-pulse-hint {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}@keyframes teams-bounce-hint {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(3px);
    }
}@keyframes teams-spin {
    to {
        transform: rotate(360deg);
    }
}/* === css_split_uni.py append @ 2026-04-03 10:24:52 === *//* === source: base.css === *//**
 * ════════════════════════════════════════════════════════════════════════════════
 * 📁 БАЗОВЫЕ СТИЛИ ДЛЯ АДМИН-ПАНЕЛИ
 * ════════════════════════════════════════════════════════════════════════════════
 * 
 * Этот файл содержит:
 * - CSS переменные (цвета, отступы, размеры)
 * - Reset стили
 * - Базовую типографику
 * - Общие утилиты
 * 
 * ⚠️ ВАЖНО: Не содержит медиа-запросов и специфичных компонентов
 *//* ═══════════════════════════════════════════════════════════════════════════════
 * CSS ПЕРЕМЕННЫЕ
 * ═══════════════════════════════════════════════════════════════════════════════ */:root
{
    /* ═══════════════════════════════════════════════════════════════════════════
     * ЦВЕТА (современная палитра 2025)
     * ═══════════════════════════════════════════════════════════════════════════ */
    
    /* Основные цвета */
    --primary: #2792ae;
    --primary-rgb: 39, 146, 174;
    --primary-dark: #1e7a91;
    --primary-light: #2ca4c1;  /* Затемнено для лучшего контраста: было #3ba8c4 */
    --primary-gradient: linear-gradient(135deg, #2792ae 0%, #2ca4c1 100%);
    
    /* Текст */
    --text-dark: #1a1a1a;
    /* Основной цвет текста (алиас; в стилях встречается как --text-primary) */
    --text-primary: var(--text-dark);
    --text-medium: #4a4a4a;
    --text-light: #6b7280;
    --text-muted: #9ca3af;
    --text-white: #fff;
    
    /* Фон */
    --bg-primary: #fff;
    /* Алиас к основному белому фону (легаси-имена в разметке/стилях) */
    --bg-white: var(--bg-primary);
    --bg-secondary: #f8fafc;
    --bg-light: var(--bg-secondary); /* псевдоним */
    --bg-tertiary: #f1f5f9;
    --bg-hover: #f8fafc;
    --bg-active: #e2e8f0;
    
    /* Акценты */
    --accent-blue: #3b82f6;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    --accent-yellow: #f59e0b;
    --accent-purple: #8b5cf6;
    --accent-purple-dark: #7c3aed;
    --accent-purple-gradient: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%);
    
    /* Secondary цвета (для кнопок и элементов) */
    --secondary: #6c757d;
    --secondary-dark: #545b62;
    --secondary-light: #6c757d;  /* Затемнено для белого текста: было #868e96 */
    --secondary-gradient: linear-gradient(135deg, #545b62 0%, #6c757d 100%);
    --secondary-gradient-180: linear-gradient(180deg, #6b7280 0%, #4b5563 100%);
    
    /* Статусы */
    --success: #059669;  /* Затемнено для белого текста: было #10b981 */
    --success-dark: #047857;  /* Еще темнее для hover: было #059669 */
    --success-light: #d1fae5;
    --success-gradient: linear-gradient(135deg, #059669 0%, #047857 100%);
    --danger: #ef4444;
    --danger-dark: #dc2626;
    --danger-darker: #b91c1c;
    --danger-light: #fee2e2;
    --danger-gradient: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);  /* Начинаем с темного */
    /* Семантика «ошибка» = те же токены, что danger (экзамены / common.css) */
    --error: var(--danger);
    --error-light: var(--danger-light);
    --error-dark: var(--danger-dark);
    --warning: #f59e0b;
    --warning-dark: #d97706;
    --warning-light: #fef3c7;
    --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --info: #3b82f6;
    --info-dark: #2563eb;
    --info-light: #dbeafe;
    --info-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --overpayment: #0ea5e9;
    --overpayment-dark: #0369a1;
    --overpayment-light: #e0f2fe;
    --overpayment-hover: #bae6fd;
    --debt-paid: #0d9488;
    --debt-paid-dark: #0f766e;
    --debt-paid-light: #ccfbf1;
    --debt-paid-hover: #99f6e4;
    
    /* Границы */
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    --border-dark: #d1d5db;
    --border-medium: var(--border);

    /* Modern fluid compatibility bridge */
    --color-primary: var(--primary);
    --color-primary-hover: var(--primary-dark);
    --color-success: var(--success);
    --color-success-hover: var(--success-dark);
    --color-warning: var(--warning);
    --color-danger: var(--danger);
    --color-text-primary: var(--text-dark);
    --color-text-secondary: var(--text-medium);
    --color-text-muted: var(--text-muted);
    --bg-surface: var(--bg-secondary);
    --bg-lighter: var(--bg-tertiary);

    /* Unified input system */
    --input-font-size: 16px;
    --input-font-size-md: 15px;
    --input-font-size-lg: 15px;
    --input-line-height: 1.5;
    --input-padding-y: var(--space-3);
    --input-padding-x: var(--space-3);
    --input-padding-y-md: var(--space-3);
    --input-padding-x-md: 14px;
    --input-padding-y-lg: var(--space-3);
    --input-padding-x-lg: 14px;
    --input-radius: var(--radius-md);
    --input-border-width: 1px;
    --input-border-color: var(--border);
    --input-focus-border: var(--primary);
    --input-focus-ring: rgba(var(--primary-rgb), 0.15);
    --input-placeholder: var(--text-muted);
    --input-color: var(--text-dark);
    --input-bg: var(--bg-primary);

    /* ═══════════════════════════════════════════════════════════════════════════
     * ОТСТУПЫ (8px система)
     * ═══════════════════════════════════════════════════════════════════════════ */
    
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    
    /* Алиасы для совместимости */
    --space-xs: var(--space-1);   /* 4px */
    --space-sm: var(--space-2);   /* 8px */
    --space-md: var(--space-3);   /* 12px */
    --space-lg: var(--space-4);   /* 16px */
    --space-xl: var(--space-6);   /* 24px */
    --space-xxl: var(--space-8);  /* 32px */
    --space-2xl: var(--space-12); /* 48px — desktop student box avatar/status inset */
    
    /* ═══════════════════════════════════════════════════════════════════════════
     * РАДИУСЫ СКРУГЛЕНИЯ
     * ═══════════════════════════════════════════════════════════════════════════ */
    
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;
    
    /* ═══════════════════════════════════════════════════════════════════════════
     * ТЕНИ (современные многослойные)
     * ═══════════════════════════════════════════════════════════════════════════ */
    
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
    
    /* ═══════════════════════════════════════════════════════════════════════════
     * ШРИФТЫ - MODERN UI 2025
     * ═══════════════════════════════════════════════════════════════════════════ */
    
    /* Основной шрифт - Lora (элегантный serif для основного текста и таблиц) */
    --font-primary: "Lora", "Open Sans", serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    /* Явный алиас: serif-стек = Lora; UI sans — только --font-heading (Roboto), не называть sans «serif» */
    --font-serif: var(--font-primary);
    --font-system: var(--font-primary);
    /* Заголовки и UI-акценты: sans (Roboto); основной текст страницы — --font-primary (Lora) */
    --font-heading: "Roboto", "Open Sans", -apple-system, blinkmacsystemfont, "Segoe UI", "Helvetica Neue", arial, sans-serif;
    
    /* Размеры шрифтов */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Courier New", monospace;
    
    /* ═══════════════════════════════════════════════════════════════════════════
     * ПЕРЕХОДЫ И АНИМАЦИИ
     * ═══════════════════════════════════════════════════════════════════════════ */
    
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    /* Общее имя для transition (кнопки/ссылки; = базовая длительность) */
    --transition: var(--transition-base);
    
    /* ═══════════════════════════════════════════════════════════════════════════
     * Z-INDEX СЛОИ
     * ═══════════════════════════════════════════════════════════════════════════ */
    
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    /* Выше .copy-toast (9999) и слоя .university-modal (10000 !important в common.css) */
    --z-custom-modal-overlay: 10050;

    /*
     * Кнопки: совпадает с desktop-слоем; точные значения переопределяются
     * в desktop.css / tablet.css / mobile.css / mobile-small.css (:root внутри @media).
     */
    --btn-radius-sm: var(--radius-sm);
    --btn-radius-md: var(--radius-md);
    --btn-radius-lg: var(--radius-full);
    /* Фильтры / pills / чипы — скругление; значения по брейкпоинтам переопределяются в desktop–mobile-small. */
    --filter-radius-sm: var(--radius-sm);
    --filter-radius-md: var(--radius-md);
    --filter-radius-lg: var(--radius-full);
    /*
     * Поля форм: скругления и метрики (переопределяются в desktop–mobile-small).
     * Не смешивать с --filter-radius-* (фильтры/chips в конце forms.css).
     */
    --form-radius-sm: var(--radius-sm);
    --form-radius-md: var(--radius-md);
    --form-radius-lg: var(--radius-lg);
    --form-control-padding-y: var(--space-3);
    --form-control-padding-x: var(--space-4);
    --form-control-font-size: calc(var(--text-base) * 0.875);
    --form-control-line-height: 1.5;
    --form-control-min-height: 40px;
    --form-control-margin-bottom: 0;
    --form-textarea-min-height: 100px;
    --form-label-font-size: calc(var(--text-base) * 0.8125);
    --form-label-margin-bottom: var(--space-2);
    --form-group-label-margin-bottom: var(--space-2);
    --form-group-margin-bottom: var(--space-4);
    --form-row-gap: var(--space-4);
    --form-actions-gap: var(--space-md);
    --form-help-font-size: calc(var(--text-base) * 0.75);
    --form-error-font-size: calc(var(--text-base) * 0.75);
    --form-hint-font-size: var(--text-xs);
    --form-fieldset-padding: var(--space-6);
    --form-fieldset-radius: var(--form-radius-md);
    --form-legend-padding-x: var(--space-2);
    --form-inline-gap: var(--space-2);
    --form-checkbox-size: 20px;
    --form-textarea-map-min-height: 80px;
    --btn-icon-gap-sm: var(--space-2);
    --btn-icon-gap-md: var(--space-2);
    --btn-icon-gap-lg: var(--space-3);
    --btn-gap: var(--btn-icon-gap-md);
    --btn-min-height: calc(var(--space-10) + var(--space-2));
    --btn-padding-y: var(--space-3);
    --btn-padding-x: var(--space-6);
    --btn-font-size: var(--text-base);
    --btn-line-height: 1.5;
    --btn-sm-min-height: calc(var(--space-8) + var(--space-1));
    --btn-sm-padding-y: calc(var(--space-2) + var(--space-1));
    --btn-sm-padding-x: var(--space-4);
    --btn-sm-font-size: var(--text-sm);
    --btn-sm-line-height: 1.4;
    --btn-lg-min-height: calc(var(--space-10) + var(--space-2));
    --btn-lg-padding-y: var(--space-3);
    --btn-lg-padding-x: var(--space-6);
    --btn-lg-font-size: var(--text-lg);
    --btn-lg-line-height: 1.5;
    --btn-icon-size-sm: var(--btn-sm-font-size);
    --btn-icon-size-md: var(--btn-font-size);
    --btn-icon-size-lg: var(--btn-lg-font-size);
    --btn-icon-size: var(--btn-icon-size-md);
    --btn-sm-icon-size: var(--btn-icon-size-sm);
    --btn-tbl-min-height: calc(var(--space-10) + var(--space-2));
    --btn-tbl-padding-y: var(--space-3);
    --btn-tbl-padding-x: var(--space-6);
    --btn-tbl-font-size: clamp(0.875rem, 1.5vw, 1rem);
    --btn-tbl-icon-size: var(--text-base);
    --action-btn-size: 35px;
    --action-btn-icon-size: var(--text-base);
    --file-upload-trigger-min-width: 44px;
    --file-upload-state-inset: 6px;
    --file-upload-state-size: 1.5rem;
    --file-upload-state-font: 0.95rem;
    --file-upload-state-icon-box: 1.25rem;
    --form-input-inline-max-w: 132px;
    --form-input-inline-min-w: 96px;
    --form-input-inline-pad-y: 0.25rem;
    --form-input-inline-pad-x: 0.5rem;
    --form-input-inline-fs: 0.875rem;
    --receipt-missing-fs: 0.875rem;
    --receipt-missing-icons-gap: 0.2rem;
    --receipt-sms-label-fs: 0.875rem;
    --select-file-pad-y: var(--space-2);
    --select-file-pad-x: var(--space-3);
    --select-file-gap: var(--space-2);
    --select-file-icon-fs: var(--text-base);
    --select-file-text-fs: var(--text-sm);
    --select-file-name-max-w: 150px;
    --btn-close-pad-y: var(--space-1);
    --btn-close-pad-x: var(--space-2);
    --btn-icon-pad-y: var(--space-2);
    --btn-icon-pad-x: var(--space-3);
    --btn-icon-fs: var(--btn-icon-size-md);
    --btn-icon-gap: var(--btn-icon-gap-md);
    --btn-icon-i-fs: var(--btn-icon-size-md);
    --btn-restore-pad-y: var(--space-3);
    --btn-restore-pad-x: calc(var(--space-6) + var(--space-2) - 2px);
    --btn-restore-fs: var(--text-base);
    --btn-copy-pad-y: calc((var(--space-1) + var(--space-2)) / 2);
    --btn-copy-pad-x: var(--space-3);
    --btn-copy-fs: 0.85em;
    --btn-copy-gap: calc(1.25 * var(--space-1));
    --btn-small-pad-y: var(--space-2);
    --btn-small-pad-x: var(--space-4);
    --btn-small-fs: calc((var(--text-xs) + var(--text-sm)) / 2);
    --btn-save-pad-y: var(--space-3);
    --btn-save-pad-x: var(--space-6);
    --btn-save-fs: var(--text-base);
    --btn-save-margin-top: var(--space-5);
    --btn-outline-border-w: 2px;
    --btn-submit-pad-y: var(--space-3);
    --btn-submit-pad-x: var(--space-6);
    --btn-submit-fs: var(--text-base);
    --form-card-padding: var(--space-6);
    --form-card-radius: 24px;
    --form-card-label-font-size: 0.95rem;
    --form-card-input-icon-offset: 14px;
    --form-card-input-icon-size: 1rem;
    --form-card-input-icon-box: 20px;
    --form-card-input-padding-left: calc(var(--space-4) * 3);
    --form-card-submit-font-size: 1.05rem;
    --form-card-submit-gap: var(--space-2);
    --form-inline-icon-min-height: 44px;
    --form-choice-chip-pad-y: 4px;
    --form-choice-chip-pad-x: 8px;
    --form-choice-chip-font-size: 11px;
    --form-choice-chip-min-height: 28px;
    --apostille-form-padding: 32px;
    --apostille-form-margin-y: 24px;
    --apostille-form-title-font-size: 24px;
    --apostille-form-title-margin-bottom: 28px;
    --apostille-form-group-gap: 24px;
    --apostille-radio-size: 20px;
    --apostille-control-font-size: 15px;
    --apostille-control-pad-y: 12px;
    --apostille-control-pad-x: 16px;
    --qr-select-min-width: 140px;
    --translation-label-font-size: 14px;
    --translation-icon-size: 16px;
    --specialty-form-gap: 20px;
    --specialty-form-padding: 20px;
    --specialty-form-section-padding: 20px;
    --specialty-form-footer-margin-top: 20px;
    --modal-overlay-padding: var(--space-6);
    --modal-card-padding: var(--space-6);
    --modal-card-radius: var(--radius-xl);
    --modal-dialog-width: 90%;
    --modal-dialog-max-width: 600px;
    --modal-dialog-max-height: 90vh;
    --modal-compact-min-width: 400px;
    --modal-compact-max-width: 400px;
    --modal-medium-max-width: 500px;
    --modal-large-max-width: 900px;
    --modal-content-large-max-width: 1200px;
    --modal-content-large-padding: var(--space-6);
    --modal-image-width: 60%;
    --modal-image-max-width: 400px;
    --modal-image-padding-top: 10%;
    --modal-header-gap: var(--space-3);
    --modal-header-margin-bottom: var(--space-5);
    --modal-header-padding-bottom: var(--space-4);
    --modal-title-font-size: var(--text-2xl);
    --modal-close-size: 44px;
    --modal-close-font-size: var(--text-2xl);
    --modal-footer-gap: var(--space-3);
    --modal-footer-margin-top: var(--space-5);
    --modal-action-pad-y: 15px;
    --modal-action-pad-x: 30px;
    --modal-action-font-size: var(--text-base);
    --modal-action-min-width: 140px;
    --modal-scoped-header-pad-y: 20px;
    --modal-scoped-header-pad-x: 25px;
    --modal-scoped-body-pad: 25px;
    --modal-scoped-body-max-h: 60vh;
    --card-title-font-size: 1.125rem;
    --card-title-margin-bottom: 20px;
    --card-title-padding-bottom: 10px;
    --card-header-padding-y: var(--space-5);
    --card-header-padding-x: var(--space-6);
    --card-body-padding: var(--space-6);
    --card-grid-min-width: calc(var(--space-16) * 3);
    --student-card-padding: var(--space-4);
    --student-card-margin-bottom: 20px;
    --student-card-heading-margin-bottom: 10px;
    --sys-container-max-width: 1200px;
    --sys-container-margin: 30px auto;
    --sys-container-padding: 20px;
    --sys-container-title-margin-bottom: 25px;
    --sys-container-title-font-size: 24px;
    --teams-student-card-padding: 20px;
    --teams-student-card-gap: 16px;
    --teams-card-header-gap: 16px;
    --teams-card-content-gap: 16px;
    --teams-card-content-padding-top: 12px;
    --teams-card-actions-gap: 8px;
    --summary-cards-min-width: 200px;
    --summary-cards-gap: var(--space-4);
    --summary-card-padding: var(--space-5);
    --pending-request-card-padding: 15px;
    --search-panel-padding: 20px;
    --search-panel-actions-gap: 10px;
    --debt-summary-card-padding: 20px;
    --debt-summary-card-margin: 20px 0;
    --debt-summary-card-icon-top: 15px;
    --debt-summary-card-icon-right: 15px;
    --debt-summary-card-icon-size: 24px;
    --payment-card-header-padding: 18px 20px 12px;
    --payment-card-title-font-size: 18px;
    --payment-card-title-gap: 10px;
    --payment-card-body-padding: 20px;
    --payment-result-card-padding: 40px;
    --donation-card-padding: 3rem;
    --donation-card-margin-bottom: 3rem;
    --donation-card-max-width: 600px;
    --donation-card-icon-size: 80px;
    --donation-card-icon-margin-bottom: 1.5rem;
    --donation-card-icon-font-size: 2.5rem;
    --donation-card-subtitle-margin-bottom: 2rem;
    --donation-card-title-font-size: 1.75rem;
    --common-curator-grid-min: 120px;
    --common-curator-grid-gap: 12px;
    --common-curator-grid-margin-top: 12px;
    --common-curator-grid-padding-y: 8px;
    --credentials-dialog-width: min(420px, 100%);
    --credentials-dialog-padding: 24px 24px 28px;
    --credentials-dialog-radius: 18px;
    --credentials-dialog-gap: 16px;
    --credentials-close-offset: 12px;
    --credentials-close-size: 38px;
    --credentials-close-font-size: 22px;
    --credentials-header-gap: 12px;
    --credentials-header-padding-right: 40px;
    --credentials-body-gap: 14px;
    --credentials-row-gap: 12px;
    --credentials-row-padding: 12px 14px;
    --credentials-row-radius: 12px;
    --credentials-title-font-size: 20px;
    --credentials-label-font-size: 13px;
    --credentials-value-font-size: 15px;
    --common-student-panel-padding: 1.2rem 1.5rem;
    --common-student-title-margin-bottom: 1rem;
    --common-student-title-font-size: 1.4rem;
    --common-student-title-padding: 0.5rem 1rem;
    --common-student-actions-gap: 0.5rem;
    --common-head-menu-gap: 10px;
    --common-head-menu-item-width: calc(20% - 10px);
    --common-head-menu-link-padding: 5px;
    --common-head-menu-link-radius: 15px;
    --common-head-menu-link-font-size: 12px;
    --common-head-menu-link-gap: 10px;
    --common-head-menu-icon-size: 30px;
    --common-head-menu-text-font-size: 11px;
    --common-detail-panel-padding: 20px;
    --common-detail-panel-margin: 10px 0;
    --common-detail-row-padding: 12px 0;
    --common-option-grid-min: 250px;
    --common-option-grid-gap: 20px;
    --common-option-grid-margin-bottom: 24px;
    --common-option-card-padding: 20px;
    --common-settings-group-gap: 24px;
    --common-settings-group-padding: 16px;
    --common-selection-block-gap: 10px;
    --common-selection-block-padding: 8px 12px;
    --common-translation-block-margin: 15px 0;
    --common-translation-block-padding: 8px;
    --common-quantity-width: 70px;
    --common-quantity-padding: 6px 10px;
    --common-quantity-font-size: 14px;
    --common-alert-max-width: 1200px;
    --common-alert-margin: 20px auto;
    --common-alert-padding: 15px 20px;
    --common-alert-font-size: 15px;
    --legacy-page-pad: 20px;
    --legacy-page-title-font-size: 1.8em;
    --legacy-page-title-margin-bottom: 25px;
    --legacy-page-title-gap: 12px;
    --legacy-page-title-padding-bottom: 12px;
    --legacy-page-narrow-max: 600px;
    --legacy-page-medium-max: 1000px;
    --legacy-page-wide-max: 1200px;
    --legacy-alert-padding: 12px 16px;
    --legacy-alert-gap: 10px;
    --legacy-alert-font-size: 14px;
    --legacy-alert-margin-bottom: 20px;
    --legacy-section-padding: 20px;
    --legacy-section-margin-bottom: 25px;
    --legacy-section-title-font-size: 1.3em;
    --legacy-section-title-margin-bottom: 20px;
    --legacy-section-title-gap: 10px;
    --legacy-section-title-padding-bottom: 10px;
    --legacy-actions-gap: 12px;
    --legacy-apostille-header-margin-bottom: 30px;
    --legacy-apostille-title-font-size: 2em;
    --legacy-apostille-stats-min: 200px;
    --legacy-apostille-stats-gap: 20px;
    --legacy-apostille-stats-padding: 20px;
    --legacy-apostille-stats-margin-bottom: 30px;
    --legacy-apostille-pending-padding: 25px;
    --legacy-apostille-pending-margin: 25px 0;
    --legacy-apostille-pending-title-font-size: 20px;
    --legacy-apostille-pending-title-margin-bottom: 20px;
    --legacy-apostille-pending-title-gap: 10px;
    --legacy-apostille-request-gap: 10px;
    --legacy-apostille-request-margin-bottom: 10px;
    --legacy-apostille-request-padding-bottom: 10px;
    --legacy-apostille-request-icon-size: 24px;
    --legacy-apostille-request-student-font-size: 15px;
    --legacy-apostille-request-curator-font-size: 13px;
    --badge-menu-pad-y: 2px;
    --badge-menu-pad-x: 8px;
    --badge-menu-margin-left: 6px;
    --badge-menu-radius: 12px;
    --badge-menu-font-size: 11px;
    --badge-menu-min-width: 20px;
    --badge-status-pad-y: 4px;
    --badge-status-pad-x: 12px;
    --badge-status-radius: 12px;
    --badge-status-font-size: 12px;
    --badge-status-min-width: 80px;
    --badge-status-height: 32px;
    --badge-translation-pad-y: 5px;
    --badge-translation-pad-x: 12px;
    --badge-translation-font-size: 0.9em;
    --badge-translation-margin-left: 10px;
    --badge-request-gap: 6px;
    --badge-request-pad-y: 6px;
    --badge-request-pad-x: 12px;
    --badge-request-radius: 20px;
    --badge-request-font-size: 12px;
    --badge-request-compact-pad-y: 5px;
    --badge-request-compact-pad-x: 10px;
    --badge-request-compact-radius: 4px;
    --badge-request-compact-font-size: 0.85em;
    --badge-request-compact-margin-top: 8px;
    --badge-notification-pad-y: 2px;
    --badge-notification-pad-x: 6px;
    --badge-notification-font-size: 0.7rem;
    --badge-notification-size: 18px;
    --badge-count-top: -10px;
    --badge-count-right: -10px;
    --badge-count-min-width: 26px;
    --badge-count-size: 26px;
    --badge-count-pad-x: 8px;
    --badge-count-font-size: var(--text-xs);
    --badge-count-radius: 13px;
    --badge-count-sm-top: -8px;
    --badge-count-sm-right: -8px;
    --badge-count-sm-min-width: 20px;
    --badge-count-sm-size: 20px;
    --badge-count-sm-pad-x: 6px;
    --badge-count-sm-font-size: var(--text-xs);
    --badge-count-sm-radius: 10px;
    --badge-count-lg-top: -12px;
    --badge-count-lg-right: -12px;
    --badge-count-lg-min-width: 32px;
    --badge-count-lg-size: 32px;
    --badge-count-lg-pad-x: 10px;
    --badge-count-lg-font-size: var(--text-sm);
    --badge-count-lg-radius: 16px;
    --badge-security-pad-y: 5px;
    --badge-security-pad-x: 10px;
    --badge-security-radius: 12px;
    --badge-security-font-size: 11px;
    --badge-security-gap: 5px;
    --badge-payment-pad-y: 4px;
    --badge-payment-pad-x: 10px;
    --badge-payment-radius: 12px;
    --badge-payment-font-size: 11px;
    --badge-payment-gap: 4px;
    --badge-mini-pad-y: 3px;
    --badge-mini-pad-x: 8px;
    --badge-mini-radius: 10px;
    --badge-mini-font-size: 10px;
    --badge-lesson-shared-pad-y: 3px;
    --badge-lesson-shared-pad-x: 8px;
    --badge-lesson-shared-radius: 4px;
    --badge-lesson-shared-font-size: 10px;
    --badge-lesson-shared-margin-left: 8px;
    --badge-method-size: 30px;
}/* ═══════════════════════════════════════════════════════════════════════════════
 * РАЗМЕРЫ ШРИФТОВ ДЛЯ РАЗНЫХ ЭКРАНОВ
 * ═══════════════════════════════════════════════════════════════════════════════
 * 
 * Переопределение переменных размеров шрифтов для разных экранов
 * перенесено в соответствующие responsive файлы:
 * - tablet.css - для планшетов (768px - 1023px)
 * - mobile.css - для мобильных (≤767px)
 * - mobile-small.css - для маленьких мобильных (≤480px)
 * 
 * Desktop (≥1024px): базовые значения определены выше в :root
 *//* ═══════════════════════════════════════════════════════════════════════════════
 * RESET СТИЛИ
 * ═══════════════════════════════════════════════════════════════════════════════ */*
{
    box-sizing: border-box;
}/* ═══════════════════════════════════════════════════════════════════════════════
 * БАЗОВАЯ ТИПОГРАФИКА
 * ═══════════════════════════════════════════════════════════════════════════════ */body
{
    font-family: var(--font-primary);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--text-dark);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    letter-spacing: -0.01em;
}@keyframes pulse-online {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(16, 185, 129, 0);
    }
}@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}@keyframes translation-slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}body.otp-gate-page
{
    display: flex; align-items: center; justify-content: center; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; box-sizing: border-box;
}body.otp-gate-page .otp-gate-layout
{
    display: flex; justify-content: center; align-items: center;
}@keyframes imgModalFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1);   }
}/* ═══════════════════════════════════════════════════════════════════════════════
 * АПОСТИЛЬ: куратор — модалки подтверждения/отклонения, карточки заказов, статистика
 * (логика ранее жила в отдельном листе; страница без отдельного CSS-файла)
 * ═══════════════════════════════════════════════════════════════════════════════ */@keyframes apostille-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}@keyframes apostille-request-slide-in {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}@keyframes apostille-pulse-badge {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 70%, transparent);
    }
    50% {
        box-shadow: 0 0 0 8px color-mix(in srgb, var(--warning) 0%, transparent);
    }
}@keyframes badge-pulse-animation {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 2px 4px rgba(0, 0, 0, 0.1),
            0 4px 12px rgba(16, 185, 129, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 
            0 3px 6px rgba(0, 0, 0, 0.15),
            0 8px 20px rgba(16, 185, 129, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }
}/* ═══════════════════════════════════════════════════════════════════════════════
 * Семестровая оплата: резервные --tbl-cost-semester-col-N-label — подписи логических полей (язык html[lang]).
 * Не равно числу колонок таблицы: десктоп #student-cost-table — 12 колонок; мобильная #student-cost-table-mobile —
 * 2 колонки (подпись | значение), несколько tr на семестр, карточка = tbody; подписи в разметке из $lang/L().
 * Переменные пригодны для content() в других шаблонах или документации.
 * ═══════════════════════════════════════════════════════════════════════════════ */html
{
    --tbl-cost-semester-col-1-label: "Semester";
    --tbl-cost-semester-col-2-label: "Payment amount";
    --tbl-cost-semester-col-3-label: "Payment date";
    --tbl-cost-semester-col-4-label: "Paid";
    --tbl-cost-semester-col-5-label: "Student date";
    --tbl-cost-semester-col-6-label: "Actions";
}html:lang(ru), html[lang|="ru"]
{
    --tbl-cost-semester-col-1-label: "Семестр";
    --tbl-cost-semester-col-2-label: "Сумма оплаты";
    --tbl-cost-semester-col-3-label: "Дата оплаты";
    --tbl-cost-semester-col-4-label: "Оплатил";
    --tbl-cost-semester-col-5-label: "Дата студента";
    --tbl-cost-semester-col-6-label: "Действия";
}html:lang(uk), html[lang|="uk"]
{
    --tbl-cost-semester-col-1-label: "Семестр";
    --tbl-cost-semester-col-2-label: "Сума оплати";
    --tbl-cost-semester-col-3-label: "Дата оплати";
    --tbl-cost-semester-col-4-label: "Сплачено";
    --tbl-cost-semester-col-5-label: "Дата студента";
    --tbl-cost-semester-col-6-label: "Дії";
}@keyframes copyPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}@keyframes otp-shake {
    0%,
    100% {
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-6px);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(6px);
    }
}/* ═══════════════════════════════════════════════════════════════════════════════
 * OTP gate — полноэкранная страница (body.otp-gate-page)
 * Исключение: отдельная визуальная сетка с фиксированными px; часть метрик в tablet/mobile/mobile-small.
 * Не использовать --form-control-* для карточки/иллюстрации — только для согласованности при будущем рефакторе.
 * ═══════════════════════════════════════════════════════════════════════════════ */body.otp-gate-page .otp-gate-card
{
    max-width: 450px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 30px;
    border: none;
    border-radius: 24px;
    text-align: center;
    background: #ffffff;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    animation: otp-gate-fadeIn 0.8s ease-in-out;
    position: relative;
    overflow: hidden;
}body.otp-gate-page .otp-gate-card::before
{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
    background-size: 200% 100%;
    animation: otp-gate-gradient-shift 3s ease infinite;
}@keyframes otp-gate-gradient-shift {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}body.otp-gate-page .otp-gate-icon
{
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    animation: otp-gate-pulse 2s ease-in-out infinite;
}body.otp-gate-page .otp-gate-icon i
{
    font-size: 36px;
    color: #ffffff;
}@keyframes otp-gate-pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}body.otp-gate-page .otp-gate-title
{
    margin: 0 0 15px 0;
    font-family: "Playfair Display", serif;
    font-size: 28px;
    font-weight: 600;
    color: #1a1a2e;
    letter-spacing: 0.5px;
}body.otp-gate-page .otp-gate-description
{
    margin: 0 0 30px 0;
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
}body.otp-gate-page .otp-gate-msg--error
{
    color: #ef4444;
    font-weight: 600;
    margin: 0 0 20px 0;
    padding: 12px 20px;
    background: #fef2f2;
    border-radius: 12px;
    border-left: 4px solid #ef4444;
    animation: otp-gate-slideIn 0.3s ease-out;
}body.otp-gate-page .otp-gate-msg--info
{
    color: #06b6d4;
    font-weight: 600;
    margin: 0 0 20px 0;
    padding: 12px 20px;
    background: #ecfeff;
    border-radius: 12px;
    border-left: 4px solid #06b6d4;
    animation: otp-gate-slideIn 0.3s ease-out;
}@keyframes otp-gate-slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}@keyframes otp-gate-fadeIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}body.otp-gate-page .otp-gate-digits
{
    margin: 0 0 30px 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0;
    flex-wrap: nowrap;
}body.otp-gate-page .otp-gate-digit
{
    width: 50px;
    height: 65px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    caret-color: #667eea;
    flex-shrink: 0;
    padding: 0;
    color: #1a1a2e;
}body.otp-gate-page .otp-gate-digit:focus
{
    border-color: #667eea;
    background: #ffffff;
    outline: none;
    transform: translateY(-2px) scale(1.05);
    box-shadow:
        0 8px 20px rgba(102, 126, 234, 0.25),
        0 0 0 4px rgba(102, 126, 234, 0.1);
}body.otp-gate-page .otp-gate-digit:not(:placeholder-shown)
{
    border-color: #10b981;
    background: #f0fdf4;
    color: #065f46;
}body.otp-gate-page .otp-gate-digit.error
{
    border-color: #ef4444;
    background: #fef2f2;
    animation: otp-gate-shake 0.5s;
}@keyframes otp-gate-shake {
    0%,
    100% {
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}body.otp-gate-page .otp-gate-btn
{
    width: 100%;
    padding: 16px 24px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}body.otp-gate-page .otp-gate-btn::before
{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition:
        width 0.6s,
        height 0.6s;
}body.otp-gate-page .otp-gate-btn:hover::before
{
    width: 300px;
    height: 300px;
}body.otp-gate-page .otp-gate-btn i, body.otp-gate-page .otp-gate-btn span
{
    position: relative;
    z-index: 1;
}body.otp-gate-page .otp-gate-btn--primary
{
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}body.otp-gate-page .otp-gate-btn--primary:hover
{
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.5);
}body.otp-gate-page .otp-gate-btn--primary:active
{
    transform: translateY(0);
}body.otp-gate-page .otp-gate-btn--secondary
{
    background: #f1f5f9;
    color: #475569;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin-top: 15px;
}body.otp-gate-page .otp-gate-btn--secondary:hover
{
    background: #e2e8f0;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}body.otp-gate-page .otp-gate-btn--secondary:active
{
    transform: translateY(0);
}@keyframes otp-gate-spin {
    to {
        transform: rotate(360deg);
    }
}body.otp-gate-page .otp-gate-card button:disabled
{
    opacity: 0.6;
    cursor: not-allowed;
}body.otp-gate-page .otp-gate-card button:disabled::after
{
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: otp-gate-spin 0.6s linear infinite;
    right: 20px;
}@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 5000px;
    }
}/* === css_split_uni.py append @ 2026-04-03 10:27:32 === *//**
 * Проект: Study in Ukraine
 * Файл: base-uni.css — legacy shared foundation для student/admin UI
 * Примечание для ИИ: эти стили уже перенесены в модульный `*-uni.css` стек; не создавать заново отдельный `student.css`.
 * Автор: Ostwind by Dr.FC
 * Версия: 2.3.0
 * Дата обновления: 2025-01-23
 * Последние изменения: 
 *   - Создана мобильная версия таблицы платежей (my_payments.php) в формате карточек
 *   - Создана мобильная версия таблицы библиотеки (library.php) в формате карточек
 *   - Создана мобильная версия таблицы контактных данных (contact_details.php) в формате карточек
 *   - Улучшена адаптивность для мобильных устройств на странице user.php (100% ширина)
 *   - Исправлено отображение полей контактных данных для мобильных устройств (метка и значение на отдельных строках)
 *   - Улучшены размеры колонок таблиц для больших экранов
 *   - Создана мобильная версия таблицы документов в формате карточек
 *   - Добавлена мобильная версия таблицы заказов в формате карточек
 *   - Улучшена адаптивность для мобильных устройств (100% ширина)
 *   - Исправлена кодировка файла
 *   - Оптимизация размеров таблиц с математическим расчетом
 *   - Стандартизация шрифтов для информации о студенте
 *   - Исправление конфликтов стилей
 *//* ===== ГЛОБАЛЬНЫЕ СТИЛИ ДЛЯ ТЕКСТА В СТУДЕНТСКИХ СТРАНИЦАХ ===== */body .student-table-container, body .student-order-payment-box
{
    color: #000000 !important;
}body .student-table-container *, body .student-order-payment-box *
{
    color: #000000 !important;
}body .student-table td, body .student-table th, body .student-orders-table td, body .student-orders-table th
{
    color: #000000 !important;
}body .student-table td *, body .student-table th *, body .student-orders-table td *, body .student-orders-table th *
{
    color: #000000 !important;
}/* Заголовки на страницах студентов */body h2, body h3
{
    color: #000000 !important;
}/* ===== CSS ПЕРЕМЕННЫЕ ДЛЯ СОВРЕМЕННОГО ДИЗАЙНА 2025 ===== *//* Используем переменные из *-uni (base/common) для размеров и базовых значений */:root
{
    --student-primary: #10b981;
    --student-primary-dark: #059669;
    --student-primary-light: #34d399;
    --student-secondary: #3b82f6;
    --student-success: #10b981;
    --student-warning: #f59e0b;
    --student-error: #ef4444;
    --student-info: #06b6d4;
    
    --student-bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --student-card-bg: rgba(255, 255, 255, 0.95);
    --student-glass-bg: rgba(255, 255, 255, 0.1);
    --student-glass-border: rgba(255, 255, 255, 0.2);
    
    /* Используем переменные размеров из *-uni */
    --student-space-xxs: var(--main-space-xxs, 2px);
    --student-space-xs: var(--main-space-xs, 5px);
    --student-space-sm: var(--main-space-sm, 8px);
    --student-space-md: var(--main-space-md, 10px);
    --student-space-md-plus: var(--main-space-md-plus, 12px);
    --student-space-lg-minus: var(--main-space-lg-minus, 15px);
    --student-space-lg: var(--main-space-lg, 20px);
    --student-space-xl: var(--main-space-xl, 16px);
    --student-space-xxl: var(--main-space-xxl, 25px);
    
    --student-white: var(--main-white, #fff);
    
    --student-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --student-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --student-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --student-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --student-shadow-glow: 0 0 20px rgba(16, 185, 129, 0.3);
    
    --student-radius-sm: var(--main-radius-sm, 8px);
    --student-radius-md: var(--main-radius-md, 12px);
    --student-radius-lg: var(--main-radius-lg, 16px);
    --student-radius-xl: 24px;
    --student-radius-full: 9999px;
    
    --student-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --student-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --student-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Максимальная ширина контейнеров */
    --student-max-width: 1200px;
    --student-max-width-wide: 1200px;
}@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}/* ===== ДОПОЛНИТЕЛЬНЫЕ АНИМАЦИИ ===== */@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}/* ===== СТИЛИ ДЛЯ MY_LESSON.PHP ===== *//* Убеждаемся, что все таблицы в my_lesson.php имеют правильные цвета */body .student-table, body .student-lesson
{
    background-color: var(--main-white) !important;
}body .student-table td, body .student-table th, body .student-lesson td, body .student-lesson th
{
    color: #000000 !important;
    background-color: var(--main-white) !important;
}body .student-table td *, body .student-table th *, body .student-lesson td *, body .student-lesson th *
{
    color: #000000 !important;
}@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}@keyframes pulse-blue {
    0%, 100% { 
        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
    }
    50% { 
        box-shadow: 0 4px 8px rgba(59, 130, 246, 0.5);
    }
}/* === css_split_uni.py append @ 2026-04-03 10:39:40 === */@keyframes paymentBorderPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}@keyframes paymentSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}@keyframes resultIconPulse {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}/* === css_split_uni.py append @ 2026-04-03 10:48:52 === *//**
 * Payment Donation Page Styles
 * Шаблон в стиле WhitePay
 */body.donation-page
{
    --primary-color: #00d4aa;
    --primary-dark: #00b894;
    --secondary-color: #2d3436;
    --background-dark: #1a1e1f;
    --background-card: #25292b;
    --text-primary: #ffffff;
    --text-secondary: #b2bec3;
    --border-color: #3d4143;
    --error-color: #e74c3c;
    --success-color: #00d4aa;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --transition: all 0.3s ease;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(135deg, var(--background-dark) 0%, #1e2325 100%);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
}

/* === css_split_uni.py append @ 2026-04-03 21:34:32 === */

/**
 * Проект: Study in Ukraine
 * Файл: mail.css - Объединенные стили для системы внутренней почты
 * Автор: Ostwind by Dr.FC
 * Описание: Оптимизированный файл без дубликатов (объединены mail.css + email-content.css)
 * Дата обновления: 09.10.2025
 *
 * Каскад: mail/head_mail.php подключает ядро как admin_head (jquery-ui → base … mobile-small),
 * затем mail.css → mail-desktop → mail-tablet → mail-mobile → mail-mobile-small.
 */

/* === Горизонтальный скролл: box-sizing задаёт base.css (* { box-sizing: border-box }) === */
html, body {
    overflow-x: hidden;
}

/* === 🎨 Анимации === */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(var(--space-5));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === css_split_uni.py append @ 2026-04-03 21:34:37 === */

/**
 * Проект: Study in Ukraine
 * Файл: mail-student-portal-shell.css
 * Назначение: для страниц почты студента (body.student-mail-portal-shell) убрать
 * «карточку» .mail-container, чтобы шапка и ширина совпадали с порталом (head_user).
 * Подключается после *-uni в mail/head_mail.php (роль student).
 */

/* Базовые правила из mail.css для .mail-container */
body.student-mail-portal-shell .mail-container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    box-sizing: border-box;
}

/* ═══ Student mail: nav from admin.css (scoped) — see mail_student_admin_css_report.md ═══ */
body.student-mail-portal-shell .main-navigation {margin: var(--main-space-lg) 0;
    padding: var(--main-space-md);
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);}body.student-mail-portal-shell .main-navigation ul {list-style-type: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--main-space-md);
    justify-content: space-between;
    max-width: 100%;}body.student-mail-portal-shell .main-navigation li {margin: 0;
    max-width: calc(25% - var(--main-space-md));
    text-align: center;
    box-sizing: border-box;
    flex: 1 1 auto;}body.student-mail-portal-shell .main-navigation li a {display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    color: #334155;
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: var(--main-space-md-plus) var(--main-space-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    font-size: 0.95rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    min-height: 40px;
    box-sizing: border-box;
    gap: var(--main-space-md);}body.student-mail-portal-shell .main-navigation li a::before {content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transition: left 0.5s ease;}body.student-mail-portal-shell .main-navigation li a span {color: #334155;
    flex: 1;
    overflow: hidden;
    margin-left: var(--main-space-sm);
    transition: color 0.3s ease;}body.student-mail-portal-shell .main-navigation li a i {font-size: 1.1rem;
    color: var(--main-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 20px;
    text-align: center;}body.student-mail-portal-shell .main-navigation li a:hover {transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.2);
    background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%);
    border-color: var(--main-primary);
    color: var(--main-primary);}body.student-mail-portal-shell .main-navigation li a:hover::before {left: 100%;}body.student-mail-portal-shell .main-navigation li a:hover i {color: var(--main-primary);
    transform: scale(1.15) rotate(5deg);}body.student-mail-portal-shell .main-navigation li a:hover span {color: var(--main-primary);}body.student-mail-portal-shell .main-navigation li a:active {transform: translateY(0) scale(0.98);
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: var(--main-primary);}body.student-mail-portal-shell .main-navigation li a:focus {outline: 2px solid var(--main-primary);
    outline-offset: 2px;
    border-color: var(--main-primary);}