:root {
            color-scheme: light;
            /* Safe area insets (fullscreen Telegram Mini Apps + notch / dynamic island) */
            --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
            --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));

            /* shadcn-inspired neutral + accent palette */
            --background: #fafafa;
            --foreground: #0a0a0b;
            --card: #ffffff;
            --card-foreground: #0a0a0b;
            --muted: #f4f4f5;
            --muted-foreground: #71717a;
            --accent-color: #3b82f6;
            --accent-foreground: #ffffff;
            --accent-soft: rgba(59, 130, 246, 0.08);
            --accent-hover: #2563eb;
            --destructive: #ef4444;
            --success-color: #22c55e;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --border-color: #e4e4e7;
            --input-border: #e4e4e7;
            --ring: rgba(59, 130, 246, 0.35);

            /* Keep backward compat aliases */
            --card-bg: var(--card);
            --bg-color: var(--background);
            --text-color: var(--foreground);
            --hint-color: var(--muted-foreground);
            --card-radius: 16px;
            --card-padding: 16px;

            /* Typography */
            --text-xs: 11px;
            --text-sm: 13px;
            --text-base: 15px;
            --text-lg: 17px;
            --text-xl: 20px;
            --text-2xl: 24px;

            /* Spacing - 4px grid */
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-8: 32px;

            /* Radii */
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
            --radius-full: 9999px;

            /* Layered shadows */
            --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
            --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
            --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);

            /* Transitions - Emil Kowalski */
            --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
            --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
            --duration-fast: 150ms;
            --duration-normal: 200ms;
            --duration-slow: 300ms;
        }

        /* Тёмная тема */
        body.theme-dark {
            color-scheme: dark;
            --background: #09090b;
            --foreground: #fafafa;
            --card: #18181b;
            --card-foreground: #fafafa;
            --muted: #27272a;
            --muted-foreground: #a1a1aa;
            --border-color: #27272a;
            --input-border: #333338;
            --accent-soft: rgba(59, 130, 246, 0.15);
            --card-bg: var(--card);
            --bg-color: var(--background);
            --text-color: var(--foreground);
            --hint-color: var(--muted-foreground);
        }

        /* Glassmorphism */
        body.style-glass {
            background-image: radial-gradient(at 0% 0%, var(--accent-soft) 0px, transparent 50%),
                              radial-gradient(at 100% 100%, rgba(59, 130, 246, 0.06) 0px, transparent 50%);
            background-attachment: fixed;
        }
        body.theme-dark.style-glass {
            background-image: radial-gradient(at 0% 0%, var(--accent-soft) 0px, transparent 40%),
                              radial-gradient(at 100% 100%, rgba(59, 130, 246, 0.08) 0px, transparent 40%);
            background-attachment: fixed;
        }
        body.style-glass .card,
        body.style-glass .stat-box,
        body.style-glass .stat-big-card,
        body.style-glass .slot,
        body.style-glass .hw-card,
        body.style-glass .guest-hero-card,
        body.style-glass .list-item {
            background: rgba(255, 255, 255, 0.78) !important;
            backdrop-filter: blur(16px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
            border: 1px solid rgba(255, 255, 255, 0.6) !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04) !important;
        }
        body.theme-dark.style-glass .card,
        body.theme-dark.style-glass .stat-box,
        body.theme-dark.style-glass .stat-big-card,
        body.theme-dark.style-glass .slot,
        body.theme-dark.style-glass .hw-card,
        body.theme-dark.style-glass .guest-hero-card,
        body.theme-dark.style-glass .list-item {
            background: rgba(24, 24, 27, 0.75) !important;
            backdrop-filter: blur(16px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
        }

        /* Компактный режим */
        body.density-compact .card { padding: 12px; margin-bottom: 10px; }
        body.density-compact .slot { padding: 10px 12px; margin-bottom: 8px; }
        body.density-compact .hw-card { padding: 10px 12px; margin-bottom: 8px; }
        body.density-compact .stat-big-card { padding: 10px; }

        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        html {
            background-color: var(--bg-color);
            height: 100%;
        }
        body { 
            margin: 0; padding: 0; 
            background-color: var(--bg-color); 
            color: var(--text-color); 
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; 
            display: flex; 
            flex-direction: column;
            justify-content: center;
            align-items: center; 
            height: 100dvh; height: 100vh; /* fallback */
            overflow: hidden; 
            overflow-x: hidden;
            transition: background-color 0.25s, color 0.25s; 
        }

        /* Корневой контейнер-рамка мобильного приложения */
        #app-container {
            width: 100%;
            max-width: 440px;
            height: 100dvh;
            height: 100vh;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            background-color: var(--bg-color);
            position: relative;
            overflow: hidden;
            overflow-x: hidden;
            box-sizing: border-box;
            flex: 1 1 100%;
            min-height: 0;
        }

        @media (max-width: 480px) {
            html, body {
                background-color: var(--bg-color);
            }
            #app-container {
                max-width: 100%;
                border-left: none;
                border-right: none;
                box-shadow: none;
            }
        }

        @media (min-width: 481px) {
            html, body {
                background-color: #0f0f0f;
            }
            #app-container {
                border-left: 1px solid rgba(255, 255, 255, 0.08);
                border-right: 1px solid rgba(255, 255, 255, 0.08);
                box-shadow: 0 0 50px rgba(0, 0, 0, 0.5), 0 0 100px rgba(0, 0, 0, 0.25);
            }
            .app-header {
                padding-top: 16px !important;
            }
            #loading-overlay {
                padding-top: 16px !important;
            }
        }

        /* Верхняя панель приложения */
        .app-header {
            display: flex; justify-content: space-between; align-items: center;
            padding-top: 100px;
            padding-bottom: 10px;
            padding-left: 16px;
            padding-right: 16px;
            background-color: var(--bg-color);
            flex-shrink: 0;
            z-index: 5;
            min-height: 48px;
            box-sizing: border-box;
        }
        .app-header-left {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            flex-shrink: 1;
        }
        .app-header-title {
            font-size: 18px;
            font-weight: 700;
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .role-pill {
            font-size: 11px;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 12px;
            background-color: var(--accent-soft);
            color: var(--accent-color);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
            margin-left: 12px;
            white-space: nowrap;
        }

        /* Интерактивный бейдж часового пояса репетитора в шапке */
        .tz-badge-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 9px;
            border-radius: 14px;
            font-size: 11.5px;
            font-weight: 700;
            background: var(--accent-soft);
            color: var(--accent-color);
            border: 1px solid rgba(59, 130, 246, 0.2);
            cursor: pointer;
            transition: all 0.2s ease;
            white-space: nowrap;
            user-select: none;
        }
        .tz-badge-btn:active {
            transform: scale(0.96);
        }
        .tz-badge-btn.pulse-alert {
            animation: pulse-alert 2s infinite ease-in-out;
            border-color: #ef4444 !important;
            color: #ef4444 !important;
            background: rgba(239, 68, 68, 0.12) !important;
        }
        @keyframes pulse-alert {
            0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
            50% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
            100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
        }
        
        /* Свитчер языка RU / EN */
        .lang-switch {
            display: inline-flex; align-items: center;
            background: rgba(142, 142, 147, 0.16);
            border-radius: 20px; padding: 2px;
            cursor: pointer; user-select: none;
            position: relative; font-size: 11px; font-weight: 700;
        }
        .lang-option {
            padding: 4px 8px; border-radius: 16px;
            color: var(--hint-color); transition: all 0.2s ease;
            z-index: 1;
        }
        .lang-option.active {
            color: #fff; background-color: var(--accent-color);
            box-shadow: 0 2px 5px rgba(0,0,0,0.12);
        }

        .notif-bell-btn {
            position: relative;
            background: var(--card);
            border: 1px solid var(--border-color);
            width: 40px; height: 40px;
            border-radius: var(--radius-full);
            display: flex; align-items: center; justify-content: center;
            font-size: 18px;
            cursor: pointer;
            box-shadow: var(--shadow-xs);
            color: var(--foreground);
            transition: background var(--duration-fast) var(--ease-out);
        }
        .notif-bell-btn:active { transform: scale(0.95); }
        .notif-dot {
            position: absolute; top: 6px; right: 6px;
            background: var(--danger-color); width: 10px; height: 10px;
            border-radius: 50%; display: none;
            box-shadow: 0 0 0 2px var(--card-bg);
            animation: pulse-dot 1.8s infinite;
        }
        @keyframes pulse-dot {
            0% { transform: scale(0.95); opacity: 0.9; }
            50% { transform: scale(1.25); opacity: 1; box-shadow: 0 0 6px var(--danger-color); }
            100% { transform: scale(0.95); opacity: 0.9; }
        }

        .content-area {
            flex: 1 1 0%;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 0 var(--space-4) var(--space-4) var(--space-4);
            position: relative;
            width: 100%;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
        }
        .tab-content { display: none; }
        .tab-content.active { display: block; animation: tabFadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1); }
        @keyframes tabFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .spin-animation { animation: spin 1s linear infinite; }
        
        .tab-bar {
            display: flex;
            border-top: 1px solid var(--border-color);
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            padding-bottom: max(12px, env(safe-area-inset-bottom));
            z-index: 10;
            flex-shrink: 0;
            box-sizing: border-box;
        }
        body.theme-dark .tab-bar {
            background: rgba(9, 9, 11, 0.85);
        }
        .tab-btn {
            flex: 1;
            padding: 7px 2px 5px 2px;
            text-align: center;
            font-size: var(--text-xs);
            color: var(--muted-foreground);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            transition: color var(--duration-fast) var(--ease-out);
            -webkit-tap-highlight-color: transparent;
            position: relative;
            overflow: visible;
        }
        .tab-btn:active .icon {
            transform: scale(0.92);
        }
        .tab-btn span[id^="nav-"] {
            overflow: visible;
            line-height: 1.25;
            white-space: nowrap;
            padding-bottom: 2px;
            font-size: 10px;
            letter-spacing: -0.2px;
        }
        .tab-btn .icon {
            font-size: 20px;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform var(--duration-fast) var(--ease-spring);
        }
        .tab-btn .icon svg {
            width: 20px;
            height: 20px;
            stroke: currentColor;
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .tab-btn.active {
            color: var(--accent-color);
            font-weight: 600;
        }
        .tab-btn.active .icon {
            transform: scale(1.05);
        }
        .tab-btn.active::before {
            content: '';
            position: absolute;
            top: -1px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background: var(--accent-color);
            border-radius: 0 0 var(--radius-full) var(--radius-full);
        }

        /* Безель центральной иконки (Расписание) */
        .tab-btn-bezel .icon {
            width: 32px;
            height: 32px;
            border-radius: 9999px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.03);
            transition: all var(--duration-fast) var(--ease-out);
        }
        body:not(.theme-dark) .tab-btn-bezel .icon {
            border-color: rgba(0, 0, 0, 0.1);
            background: rgba(0, 0, 0, 0.03);
        }
        .tab-btn-bezel .icon svg {
            width: 18px;
            height: 18px;
        }
        .tab-btn.active.tab-btn-bezel .icon {
            border-color: var(--accent-color);
            background: var(--accent-soft);
            color: var(--accent-color);
            box-shadow: 0 0 10px rgba(82, 136, 193, 0.25);
        }

        .card {
            background-color: var(--card);
            border-radius: var(--card-radius);
            padding: var(--card-padding);
            box-shadow: var(--shadow-sm);
            margin-bottom: var(--space-3);
            width: 100%;
            border: 1px solid var(--border-color);
            transition: box-shadow var(--duration-normal) var(--ease-out);
        }
        .profile-card { text-align: center; position: relative; }
        
        /* Аватарка */
        .avatar-container { 
            width: 76px; height: 76px; margin: 0 auto 12px auto; border-radius: 50%; 
            background: linear-gradient(135deg, var(--accent-color), var(--accent-hover)); 
            display: flex; justify-content: center; align-items: center; 
            overflow: hidden; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); 
            position: relative;
        }
        .avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
        .avatar-fallback { color: white; font-size: 28px; font-weight: 700; user-select: none; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
        .avatar-fallback svg { stroke: white; }
        
        .profile-name { font-size: 21px; font-weight: 700; margin: 0 0 4px 0; word-break: break-word; }
        .profile-role { font-size: 13px; color: var(--hint-color); margin: 0; }
        .profile-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
        .profile-tag { font-size: 11px; padding: 3px 8px; border-radius: 8px; background: var(--bg-color); color: var(--hint-color); font-weight: 500; }

        .goal-header { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; font-weight: 600; }
        .progress-bg { background-color: var(--bg-color); height: 10px; border-radius: 5px; overflow: hidden; }
        .progress-fill { background: linear-gradient(90deg, #34c759, #30d158); width: 0%; height: 100%; border-radius: 5px; transition: width 0.8s ease-out; }
        
        .stats-row { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 14px; width: 100%; }
        .stat-box { flex: 1; background-color: var(--card-bg); border-radius: var(--radius-md); padding: 12px 6px; text-align: center; box-shadow: var(--shadow-xs); border: 1px solid var(--border-color); }
        .stat-value { font-size: 16px; font-weight: 700; color: var(--accent-color); margin: 0 0 2px 0; word-break: break-all; }
        .stat-label { font-size: 11px; color: var(--hint-color); margin: 0; }

        /* ================= REDESIGNED TUTOR PROFILE ================= */
        .tutor-hero-card {
            background-color: var(--card);
            border-radius: var(--card-radius);
            padding: var(--card-padding);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            margin-bottom: 12px;
        }
        .tutor-hero-header {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        .avatar-container.tutor-hero-avatar {
            width: 66px;
            height: 66px;
            min-width: 66px;
            margin: 0;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            box-shadow: 0 4px 14px rgba(59, 130, 246, 0.22);
            position: relative;
            flex-shrink: 0;
        }
        .tutor-hero-info {
            flex: 1;
            min-width: 0;
        }
        .tutor-hero-name-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .tutor-hero-name {
            font-size: 18px;
            font-weight: 700;
            margin: 0;
            color: var(--foreground);
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .tutor-name-badge-group {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            flex: 1;
        }
        .tutor-plan-badge {
            display: inline-flex;
            align-items: center;
            gap: 3.5px;
            padding: 2.5px 7px;
            border-radius: var(--radius-full, 9999px);
            font-size: 10.5px;
            font-weight: 800;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            line-height: 1;
            flex-shrink: 0;
        }
        .tutor-plan-badge svg {
            width: 11px;
            height: 11px;
            flex-shrink: 0;
        }
        .tutor-plan-badge.badge-pro {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(236, 72, 153, 0.22));
            color: #c084fc;
            border: 1px solid rgba(192, 132, 252, 0.4);
            box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
        }
        .tutor-plan-badge.badge-plus {
            background: linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(59, 130, 246, 0.22));
            color: #2dd4bf;
            border: 1px solid rgba(45, 212, 191, 0.4);
            box-shadow: 0 0 10px rgba(20, 184, 166, 0.2);
        }
        .tutor-plan-badge.badge-free {
            display: none !important;
        }

        .tutor-hero-card.glow-pro {
            border-color: rgba(168, 85, 247, 0.35);
            box-shadow: 0 0 25px rgba(168, 85, 247, 0.12), var(--shadow-sm);
        }
        .tutor-hero-card.glow-plus {
            border-color: rgba(20, 184, 166, 0.35);
            box-shadow: 0 0 25px rgba(20, 184, 166, 0.12), var(--shadow-sm);
        }
        .avatar-ring-pro {
            box-shadow: 0 0 0 2px #a855f7, 0 0 14px rgba(168, 85, 247, 0.45);
        }
        .avatar-ring-plus {
            box-shadow: 0 0 0 2px #14b8a6, 0 0 14px rgba(20, 184, 166, 0.45);
        }
        .tutor-hero-actions {
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .profile-edit-pencil-btn,
        .profile-reset-earned-btn {
            background: var(--muted);
            color: var(--muted-foreground);
            border: none;
            width: 30px;
            height: 30px;
            min-width: 30px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
            -webkit-tap-highlight-color: transparent;
            padding: 0;
            flex-shrink: 0;
        }
        .profile-edit-pencil-btn:hover,
        .profile-edit-pencil-btn:active,
        .profile-reset-earned-btn:hover,
        .profile-reset-earned-btn:active {
            background: var(--accent-soft);
            color: var(--accent-color);
            transform: scale(1.06);
        }
        .tutor-hero-subjects {
            font-size: 13px;
            color: var(--hint-color);
            margin: 2px 0 6px 0;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .tutor-hero-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin: 0;
            justify-content: flex-start;
        }
        .tutor-hero-divider {
            height: 1px;
            background: var(--border-color);
            margin: 14px 0 12px 0;
            opacity: 0.8;
        }
        .tutor-hero-goal-section {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .tutor-goal-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
        }
        .tutor-goal-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--hint-color);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .tutor-goal-amount-wrap {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .tutor-goal-amount {
            font-size: 16px;
            font-weight: 700;
            color: var(--accent-color);
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.2px;
        }
        .tutor-goal-amount-wrap .profile-reset-earned-btn {
            width: 26px;
            height: 26px;
            min-width: 26px;
        }
        .progress-bg.tutor-progress-thin {
            height: 6px;
            border-radius: 999px;
            background-color: var(--muted);
            overflow: hidden;
            margin: 2px 0 4px 0;
        }
        .progress-bg.tutor-progress-thin .progress-fill {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, #3b82f6, #10b981);
            transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .tutor-hero-submetrics {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 6px;
            font-size: 12px;
            color: var(--hint-color);
            padding-top: 4px;
        }
        .submetric-item {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .tutor-hero-submetrics strong {
            color: var(--foreground);
            font-weight: 600;
        }
        .submetric-dot {
            color: var(--muted-foreground);
            opacity: 0.4;
            user-select: none;
        }

        /* Главный CTA */
        .action-btn.tutor-primary-cta {
            margin-top: 2px;
            margin-bottom: 12px;
            height: 48px;
            font-size: 15px;
            font-weight: 600;
            border-radius: var(--radius-lg);
            box-shadow: 0 4px 14px rgba(59, 130, 246, 0.28);
            gap: 10px;
            width: 100%;
        }

        /* 2x2 Сетка действий */
        .tutor-quick-actions-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 14px;
        }
        .tutor-action-tile {
            background-color: var(--card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            text-align: left;
            cursor: pointer;
            box-shadow: var(--shadow-xs);
            transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast), background-color var(--duration-fast);
            -webkit-tap-highlight-color: transparent;
            width: 100%;
        }
        .tutor-action-tile:hover {
            border-color: var(--accent-color);
            background-color: var(--card);
        }
        .tutor-action-tile:active {
            transform: scale(0.97);
        }
        .tutor-tile-icon-box {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .tutor-tile-icon-box svg {
            width: 20px;
            height: 20px;
        }
        .tile-payments { color: #059669; background: rgba(16, 185, 129, 0.12); }
        .tile-theme { color: #7c3aed; background: rgba(124, 58, 237, 0.12); }
        .tile-share { color: #2563eb; background: rgba(37, 99, 235, 0.12); }
        .tile-schedule, .tile-add-student { color: #d97706; background: rgba(217, 119, 6, 0.12); }
        .tile-groups { color: #4f46e5; background: rgba(79, 70, 229, 0.12); }

        body.theme-dark .tile-payments { color: #34d399; background: rgba(52, 211, 153, 0.16); }
        body.theme-dark .tile-theme { color: #a78bfa; background: rgba(167, 139, 250, 0.16); }
        body.theme-dark .tile-share { color: #60a5fa; background: rgba(96, 165, 250, 0.16); }
        body.theme-dark .tile-schedule, body.theme-dark .tile-add-student { color: #fbbf24; background: rgba(251, 191, 36, 0.16); }
        body.theme-dark .tile-groups { color: #818cf8; background: rgba(129, 140, 248, 0.16); }

        .tutor-tile-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        .tutor-tile-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--foreground);
            line-height: 1.25;
        }
        .tutor-tile-desc {
            font-size: 11px;
            color: var(--hint-color);
            line-height: 1.2;
        }

        /* Locked Tile with Frosted Glass Blur & SVG Lock */
        .tutor-action-tile.is-locked {
            position: relative;
            overflow: hidden;
            cursor: pointer;
            user-select: none;
        }
        .tutor-action-tile.is-locked .tutor-tile-icon-box,
        .tutor-action-tile.is-locked .tutor-tile-text {
            filter: blur(2.5px) opacity(0.5);
            transition: filter var(--duration-fast) var(--ease-out);
            pointer-events: none;
        }
        .tutor-tile-lock-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.45);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            border-radius: var(--radius-lg);
            z-index: 2;
            transition: background var(--duration-fast), transform var(--duration-fast);
        }
        body.theme-dark .tutor-tile-lock-overlay {
            background: rgba(18, 19, 26, 0.55);
        }
        .tutor-tile-lock-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            background: rgba(255, 255, 255, 0.9);
            color: var(--foreground);
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 9999px;
            box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.1), 0 2px 6px -1px rgba(0, 0, 0, 0.06);
            transform: scale(0.96);
            transition: transform var(--duration-fast) var(--ease-spring);
        }
        body.theme-dark .tutor-tile-lock-badge {
            background: rgba(30, 32, 44, 0.88);
            border-color: rgba(255, 255, 255, 0.12);
            box-shadow: 0 6px 20px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.3);
            color: #f1f5f9;
        }
        .tutor-tile-lock-badge svg {
            color: #f59e0b;
            flex-shrink: 0;
        }
        .tutor-tile-lock-pill {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.3px;
            text-transform: uppercase;
            color: var(--foreground);
            line-height: 1;
        }
        .tutor-action-tile.is-locked:active .tutor-tile-lock-badge,
        .settings-locked-field:active .tutor-tile-lock-badge {
            transform: scale(0.92);
        }

        /* Locked field in Settings Modal */
        .settings-locked-field {
            position: relative;
            overflow: hidden;
            border-radius: var(--radius-md);
            margin-bottom: 12px;
            cursor: pointer;
            user-select: none;
        }
        .settings-locked-field input,
        .settings-locked-field button {
            filter: blur(2.5px) opacity(0.45);
            pointer-events: none;
        }
        .settings-lock-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.45);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            border-radius: var(--radius-md);
            z-index: 2;
        }
        body.theme-dark .settings-lock-overlay {
            background: rgba(18, 19, 26, 0.55);
        }

        /* Сервисные пункты профиля (Тарифы и Поддержка) */
        .tutor-service-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 14px;
        }
        .tutor-service-card-btn {
            background-color: var(--card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            cursor: pointer;
            box-shadow: var(--shadow-xs);
            transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast), background-color var(--duration-fast);
            text-align: left;
            width: 100%;
            min-height: 86px;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        .tutor-service-card-btn:hover {
            border-color: var(--accent-color);
        }
        .tutor-service-card-btn:active {
            transform: scale(0.97);
        }
        .tutor-service-icon {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .tutor-service-icon svg {
            width: 18px;
            height: 18px;
        }
        .tutor-service-icon.sub-icon {
            color: #a855f7;
            background: rgba(168, 85, 247, 0.12);
        }
        body.theme-dark .tutor-service-icon.sub-icon {
            color: #c084fc;
            background: rgba(168, 85, 247, 0.2);
        }
        .tutor-service-icon.support-icon {
            color: #06b6d4;
            background: rgba(6, 182, 212, 0.12);
        }
        body.theme-dark .tutor-service-icon.support-icon {
            color: #22d3ee;
            background: rgba(6, 182, 212, 0.2);
        }
        .tutor-service-chevron {
            position: absolute;
            top: 14px;
            right: 14px;
            color: var(--muted-foreground);
            opacity: 0.5;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity var(--duration-fast);
        }
        .tutor-service-card-btn:hover .tutor-service-chevron {
            opacity: 1;
            color: var(--foreground);
        }
        .tutor-service-info {
            margin-top: 10px;
            display: flex;
            flex-direction: column;
        }
        .tutor-service-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--foreground);
            line-height: 1.25;
        }

        /* iOS / Telegram List Group */
        .ios-list-group {
            background-color: var(--card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            overflow: hidden;
            margin-bottom: 16px;
            box-shadow: var(--shadow-xs);
        }
        .ios-list-item {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            padding: 12px 14px;
            border: none;
            background: transparent;
            cursor: pointer;
            text-align: left;
            transition: background-color var(--duration-fast) var(--ease-out);
            -webkit-tap-highlight-color: transparent;
        }
        .ios-list-item:hover {
            background-color: var(--muted);
        }
        .ios-list-item:active {
            background-color: var(--muted);
            opacity: 0.9;
        }
        .ios-item-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: #4f46e5;
            background: rgba(79, 70, 229, 0.12);
        }
        body.theme-dark .ios-item-icon {
            color: #818cf8;
            background: rgba(129, 140, 248, 0.16);
        }
        .ios-item-icon svg {
            width: 18px;
            height: 18px;
        }
        .ios-item-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 1px;
            min-width: 0;
        }
        .ios-item-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--foreground);
        }
        .ios-item-sub {
            font-size: 11px;
            color: var(--hint-color);
        }
        .ios-item-chevron {
            color: var(--hint-color);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            opacity: 0.6;
        }

        .action-btn {
            background-color: var(--accent-color);
            color: var(--accent-foreground);
            border: none;
            padding: 0 var(--space-4);
            height: 44px;
            border-radius: var(--radius-md);
            width: 100%;
            font-size: var(--text-base);
            font-weight: 500;
            cursor: pointer;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: var(--space-2);
            transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
            -webkit-tap-highlight-color: transparent;
        }
        .action-btn:active { transform: scale(0.97); }
        .action-btn:hover { background-color: var(--accent-hover); }
        .action-btn.green { background-color: var(--success-color); }
        .action-btn.green:hover { background-color: #16a34a; }
        .action-btn.red, .action-btn.destructive { background-color: var(--destructive); }
        .action-btn.red:hover { background-color: #dc2626; }
        .action-btn.orange { background-color: var(--warning-color); }
        .action-btn.secondary {
            background-color: var(--muted);
            color: var(--foreground);
            flex: 1;
        }
        .action-btn.secondary:hover { background-color: var(--border-color); }
        .action-btn.outline {
            background: transparent;
            border: 1.5px solid var(--accent-color);
            color: var(--accent-color);
        }
        .action-btn svg, .btn-icon-svg {
            width: 18px;
            height: 18px;
            stroke: currentColor;
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
            flex-shrink: 0;
            vertical-align: -3px;
        }
        .lucide-icon {
            display: inline-block;
            vertical-align: middle;
            stroke: currentColor;
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
            flex-shrink: 0;
        }
        .notif-bell-btn svg {
            width: 20px;
            height: 20px;
            stroke: currentColor;
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .notif-icon svg {
            width: 18px;
            height: 18px;
            stroke: var(--accent-color);
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .modal-close-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-full);
            color: var(--hint-color);
            transition: background var(--duration-fast), color var(--duration-fast);
        }
        .modal-close-btn:hover {
            background: var(--muted);
            color: var(--foreground);
        }
        .modal-close-btn svg {
            width: 20px;
            height: 20px;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .calendar-month-bar {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-top: -6px;
            margin-bottom: 8px;
            padding-left: 2px;
        }
        .calendar-month-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 0 4px;
            box-sizing: border-box;
            margin-top: 2px;
            margin-bottom: 12px;
            position: relative;
        }
        .calendar-month-label {
            font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: var(--foreground, #ffffff);
            letter-spacing: -0.3px;
            line-height: 1.2;
            text-align: center;
            flex-grow: 1;
            cursor: pointer;
            user-select: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: var(--radius-md, 10px);
            transition: background var(--duration-fast, 150ms) ease, transform var(--duration-fast, 150ms) ease;
            -webkit-tap-highlight-color: transparent;
        }
        .calendar-month-label:active {
            transform: scale(0.96);
            background: rgba(255, 255, 255, 0.06);
        }
        body:not(.theme-dark) .calendar-month-label:active {
            background: rgba(0, 0, 0, 0.05);
        }
        .calendar-month-chevron {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            stroke-width: 2.2;
            stroke-linecap: round;
            stroke-linejoin: round;
            color: var(--muted-foreground);
            transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
        }
        .calendar-month-label.mode-single .calendar-month-chevron {
            transform: rotate(180deg);
            color: var(--accent-color, #7c3aed);
        }
        .calendar-month-label.mode-multi .calendar-month-chevron {
            transform: rotate(90deg);
            color: var(--accent-color, #7c3aed);
        }
        .month-nav-arrow-btn {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
            color: var(--foreground);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 0;
            transition: all var(--duration-fast, 150ms) ease;
            -webkit-tap-highlight-color: transparent;
            flex-shrink: 0;
        }
        .month-nav-arrow-btn:hover, .month-nav-arrow-btn:active {
            color: var(--foreground);
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.2);
            transform: scale(0.94);
        }
        body:not(.theme-dark) .month-nav-arrow-btn {
            background: rgba(0, 0, 0, 0.04);
            border-color: rgba(0, 0, 0, 0.08);
        }
        body:not(.theme-dark) .month-nav-arrow-btn:hover,
        body:not(.theme-dark) .month-nav-arrow-btn:active {
            background: rgba(0, 0, 0, 0.08);
            border-color: rgba(0, 0, 0, 0.16);
        }

        /* Анимация масштабирования при показе месяца */
        @keyframes calendarScaleIn {
            0% {
                opacity: 0;
                transform: scale(0.93) translateY(-4px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* ================= РЕЖИМ 2: РАЗВЕРНУТЫЙ МЕСЯЦ (СКРИНШОТ 1) ================= */
        .calendar-month-expanded {
            margin-bottom: 16px;
            padding: 12px 6px 14px 6px;
            border-radius: var(--radius-xl, 18px);
            background: var(--card, #1c1d24);
            border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            animation: calendarScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            transform-origin: top center;
        }
        body:not(.theme-dark) .calendar-month-expanded {
            background: #ffffff;
            border-color: var(--border-color, #e4e4e7);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        }

        .expanded-month-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            text-align: center;
            margin-bottom: 10px;
            padding: 0 2px;
        }
        .expanded-month-weekday {
            font-size: 12px;
            font-weight: 600;
            color: var(--muted-foreground, #71717a);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .expanded-month-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            row-gap: 6px;
            column-gap: 2px;
            padding: 0 2px;
        }

        .expanded-month-cell {
            height: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;
            border-radius: 50%;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            transition: transform 0.15s ease, background 0.15s ease;
        }
        .expanded-month-cell:active {
            transform: scale(0.9);
        }
        .expanded-month-num {
            font-size: 14.5px;
            font-weight: 600;
            line-height: 1;
            color: var(--foreground);
        }
        .expanded-month-cell.other-month {
            opacity: 0.32;
        }
        .expanded-month-cell.other-month .expanded-month-num {
            color: var(--muted-foreground);
        }

        /* Выбранный день в сетке (градиентный круг как на скриншоте 1) */
        .expanded-month-cell.active {
            background: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%) !important;
            box-shadow: 0 4px 14px rgba(124, 58, 237, 0.42) !important;
            width: 36px;
            height: 36px;
            margin: auto;
        }
        .expanded-month-cell.active .expanded-month-num {
            color: #ffffff !important;
            font-weight: 700 !important;
        }

        .expanded-month-cell.today:not(.active) {
            border: 1.5px solid #8b5cf6;
            background: rgba(139, 92, 246, 0.1);
        }
        .expanded-month-cell.today:not(.active) .expanded-month-num {
            color: #a78bfa;
            font-weight: 700;
        }
        body:not(.theme-dark) .expanded-month-cell.today:not(.active) .expanded-month-num {
            color: #6d28d9;
        }

        .expanded-month-dot {
            width: 4px;
            height: 4px;
            border-radius: 9999px;
            background-color: var(--accent-color, #3b82f6);
            margin-top: 3px;
            flex-shrink: 0;
        }
        .expanded-month-cell.active .expanded-month-dot {
            background-color: #ffffff !important;
        }

        /* ================= РЕЖИМ 3: ВСЕ МЕСЯЦЫ (СКРИНШОТ 2) ================= */
        .calendar-multi-month-view {
            animation: calendarScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            transform-origin: top center;
            padding-bottom: 40px;
        }
        .multi-month-card {
            margin-bottom: 20px;
            padding: 14px 8px 16px 8px;
            border-radius: var(--radius-xl, 18px);
            background: var(--card, #1c1d24);
            border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            cursor: pointer;
            transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
        }
        .multi-month-card:hover {
            border-color: rgba(124, 58, 237, 0.4);
            box-shadow: 0 4px 16px rgba(124, 58, 237, 0.15);
        }
        .multi-month-card:active {
            transform: scale(0.99);
        }
        body:not(.theme-dark) .multi-month-card {
            background: #ffffff;
            border-color: var(--border-color, #e4e4e7);
        }
        .multi-month-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--foreground);
            margin-bottom: 12px;
            padding-left: 8px;
            letter-spacing: -0.2px;
        }

        .calendar-header-panel { 
            display: flex; 
            align-items: center; 
            margin-bottom: 12px; 
            width: 100%;
        }
        .calendar-nav { 
            display: flex; 
            gap: 8px; 
            overflow-x: auto; 
            padding-bottom: 6px; 
            scrollbar-width: none; 
            flex-grow: 1; 
            width: 100%;
            margin-right: 0; 
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
        }
        .calendar-nav::-webkit-scrollbar { display: none; }
        
        .cal-day { 
            min-width: 52px;
            width: 52px;
            height: 68px;
            padding: 8px 4px 6px 4px;
            background-color: var(--card, #222428);
            border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
            border-radius: 14px; 
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between; 
            cursor: pointer;
            box-sizing: border-box;
            transition: all var(--duration-fast) var(--ease-out);
            position: relative;
            flex-shrink: 0;
            scroll-snap-align: start;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        body:not(.theme-dark) .cal-day {
            background-color: var(--card, #ffffff);
            border-color: var(--border-color, #e4e4e7);
        }
        .cal-day:active { transform: scale(0.96); }

        .cal-day .cal-day-weekday { 
            font-size: 11px;
            font-weight: 600;
            color: #8e8e93;
            text-transform: uppercase;
            line-height: 1;
            margin: 0;
        }
        body:not(.theme-dark) .cal-day .cal-day-weekday {
            color: var(--muted-foreground, #71717a);
        }

        .cal-day .cal-day-num { 
            font-size: 17px;
            font-weight: 700;
            color: var(--foreground, #ffffff);
            line-height: 1.1;
            margin: 0;
        }
        body:not(.theme-dark) .cal-day .cal-day-num {
            color: var(--foreground, #0a0a0b);
        }

        /* Выбранный активный день (акцентный градиент как на макете) */
        .cal-day.active {
            background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
            border-color: transparent !important;
            box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
        }
        .cal-day.active .cal-day-weekday {
            color: rgba(255, 255, 255, 0.9) !important;
            font-size: 11px;
            font-weight: 700;
        }
        .cal-day.active .cal-day-num {
            color: #ffffff !important;
            font-size: 18px;
            font-weight: 800;
        }

        /* Сегодняшний день (когда не выбран) - цветовая индикация в цвет палитры */
        .cal-day.today:not(.active) {
            border: 1.5px solid #8b5cf6 !important;
            background: rgba(139, 92, 246, 0.12) !important;
        }
        .cal-day.today:not(.active) .cal-day-weekday {
            color: #a78bfa !important;
            font-weight: 700;
        }
        .cal-day.today:not(.active) .cal-day-num {
            color: #c4b5fd !important;
            font-weight: 800;
        }
        body:not(.theme-dark) .cal-day.today:not(.active) {
            border-color: #7c3aed !important;
            background: rgba(124, 58, 237, 0.08) !important;
        }
        body:not(.theme-dark) .cal-day.today:not(.active) .cal-day-weekday {
            color: #7c3aed !important;
        }
        body:not(.theme-dark) .cal-day.today:not(.active) .cal-day-num {
            color: #6d28d9 !important;
        }

        /* Контейнер и маркеры дня */
        .cal-dot-container {
            height: 6px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cal-dot {
            width: 5px;
            height: 5px;
            border-radius: 9999px;
            background-color: var(--accent-color, #5288c1);
            display: inline-block;
        }
        .cal-day.active .cal-dot {
            background-color: #ffffff !important;
            display: inline-block;
        }
        .cal-day-marker {
            display: none !important;
        }
        
        .day-badge { position: absolute; top: 4px; right: 4px; background: var(--success-color); color: white; font-size: 9px; width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }
        .day-badge.empty { background: var(--bg-color); color: var(--hint-color); }

        .big-cal-btn { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: var(--text-color); }

        /* ================= МАКЕТ ТАЙМЛАЙНА РАСПИСАНИЯ ================= */
        .schedule-timeline-layout {
            display: flex;
            align-items: flex-start;
            position: relative;
            width: 100%;
            margin-top: 14px;
        }
        .timeline-axis {
            width: 48px;
            flex-shrink: 0;
            position: relative;
            user-select: none;
            box-sizing: border-box;
        }
        .timeline-hour-mark {
            position: absolute;
            left: 0;
            width: 100%;
            font-size: 12px;
            font-weight: 600;
            color: var(--muted-foreground);
            font-variant-numeric: tabular-nums;
            transform: translateY(-50%);
            line-height: 1;
            text-align: right;
            padding-right: 8px;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            transition: color var(--duration-fast, 150ms);
        }
        .timeline-hour-mark.non-round {
            font-weight: 700;
            color: var(--foreground);
            opacity: 0.95;
            font-size: 11px;
        }
        .timeline-slots-area {
            flex-grow: 1;
            min-width: 0;
            position: relative;
            border-left: 1px solid var(--border-color);
            margin-left: 4px;
            padding-left: 8px;
            box-sizing: border-box;
        }
        .timeline-grid-line {
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
            background: var(--border-color);
            opacity: 0.6;
            pointer-events: none;
        }
        .timeline-grid-line.non-round-line {
            border-top: 1px dashed var(--border-color);
            background: transparent;
            opacity: 0.85;
        }
        .slot-timeline-card {
            position: absolute;
            border-radius: 14px;
            background: var(--card);
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            cursor: pointer;
            box-sizing: border-box;
            display: flex;
            align-items: stretch;
            padding: 8px 12px 8px 0;
            overflow: hidden;
            transition: transform var(--duration-fast, 150ms), box-shadow var(--duration-fast, 150ms), border-color var(--duration-fast, 150ms);
            -webkit-tap-highlight-color: transparent;
            z-index: 2;
        }
        .slot-timeline-card:active {
            transform: scale(0.985);
        }
        .slot-timeline-card:hover {
            box-shadow: var(--shadow-md);
            border-color: rgba(255, 255, 255, 0.2);
        }
        body:not(.theme-dark) .slot-timeline-card {
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }
        body.theme-dark .slot-timeline-card {
            background: #1c1d24;
            border: 1px solid rgba(255, 255, 255, 0.07);
        }
        .timeline-card-accent {
            width: 3.5px;
            border-radius: 3px;
            margin: 6px 10px 6px 6px;
            flex-shrink: 0;
        }
        .timeline-card-content {
            flex-grow: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 2px 0;
        }
        .timeline-card-top-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 8px;
        }
        .timeline-card-title {
            font-size: 13.5px;
            font-weight: 700;
            color: var(--foreground);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.2;
        }
        .timeline-card-time {
            font-size: 11.5px;
            font-weight: 600;
            color: var(--muted-foreground);
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
            flex-shrink: 0;
        }
        .timeline-card-sub-row {
            font-size: 12px;
            color: var(--muted-foreground);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.2;
            margin-top: 2px;
        }
        .timeline-card-badges {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-top: 4px;
            flex-wrap: wrap;
        }

        /* Карточка личного времени (штрихованный бокс + плавный морфинг в корзину с красным глоу) */
        .slot-timeline-card.slot-blocked-card {
            padding: 0 !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer !important;
            background: repeating-linear-gradient(
                -45deg,
                rgba(255, 255, 255, 0.035),
                rgba(255, 255, 255, 0.035) 7px,
                rgba(255, 255, 255, 0.09) 7px,
                rgba(255, 255, 255, 0.09) 14px
            ), #14151b !important;
            border: 1.5px dashed rgba(255, 255, 255, 0.18) !important;
            box-shadow: none !important;
            transition: transform var(--duration-fast, 150ms), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
            overflow: hidden !important;
        }

        body:not(.theme-dark) .slot-timeline-card.slot-blocked-card {
            background: repeating-linear-gradient(
                -45deg,
                rgba(0, 0, 0, 0.03),
                rgba(0, 0, 0, 0.03) 7px,
                rgba(0, 0, 0, 0.075) 7px,
                rgba(0, 0, 0, 0.075) 14px
            ), #f4f4f5 !important;
            border: 1.5px dashed rgba(0, 0, 0, 0.18) !important;
        }

        /* Красный глоу вокруг карточки при нажатии */
        .slot-timeline-card.slot-blocked-card.delete-active {
            border-color: #ef4444 !important;
            border-style: solid !important;
            box-shadow: 0 0 18px rgba(239, 68, 68, 0.55), inset 0 0 10px rgba(239, 68, 68, 0.22) !important;
        }

        /* Центрированный контейнер для времени и кнопки удаления */
        .blocked-slot-center-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            padding: 0 8px;
            box-sizing: border-box;
        }

        .blocked-slot-time-label {
            font-size: 13.5px;
            font-weight: 700;
            color: var(--foreground);
            letter-spacing: -0.2px;
            transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
            opacity: 1;
            transform: scale(1);
            white-space: nowrap;
            user-select: none;
            font-variant-numeric: tabular-nums;
        }

        .blocked-slot-trash-btn {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(239, 68, 68, 0.16);
            color: #ef4444;
            border: 1.5px solid rgba(239, 68, 68, 0.45);
            border-radius: 9999px;
            width: 38px;
            height: 38px;
            cursor: pointer;
            transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
            opacity: 0;
            transform: scale(0.4) rotate(-15deg);
            pointer-events: none;
            -webkit-tap-highlight-color: transparent;
        }
        .blocked-slot-trash-btn:active {
            transform: scale(0.92);
        }
        .blocked-slot-trash-btn svg {
            width: 18px;
            height: 18px;
            stroke: currentColor;
            stroke-width: 2.2;
        }

        .slot-timeline-card.slot-blocked-card.delete-active .blocked-slot-time-label {
            opacity: 0;
            transform: scale(0.5);
            pointer-events: none;
        }

        .slot-timeline-card.slot-blocked-card.delete-active .blocked-slot-trash-btn {
            opacity: 1;
            transform: scale(1) rotate(0deg);
            pointer-events: auto;
        }

        .timeline-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 16px;
            color: var(--muted-foreground);
            font-size: 13px;
            gap: 8px;
            text-align: center;
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            z-index: 1;
        }
        #schedule-reminders-section {
            margin-top: 24px;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            background-color: var(--card);
            padding: var(--card-padding);
        }

        /* Слоты занятий с двойным статусом */
        .slot {
            background-color: var(--card);
            border-radius: var(--radius-lg);
            padding: 14px var(--space-4);
            margin-bottom: var(--space-2);
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: var(--shadow-sm);
            border: 1px solid var(--border-color);
            cursor: pointer;
            transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
        }
        .slot:active { transform: scale(0.98); }
        .slot:hover { box-shadow: var(--shadow-md); }
        
        .slot-time { font-size: 15px; font-weight: 700; color: var(--text-color); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
        .slot-info { font-size: 13px; color: var(--hint-color); }
        .slot-info b { color: var(--text-color); }

        /* Бейджи двойного статуса */
        .slot-badges-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
        .status-badge {
            font-size: var(--text-xs); font-weight: 600; padding: 3px 8px; border-radius: var(--radius-full); 
            display: inline-flex; align-items: center; gap: 4px; line-height: 1.2;
        }
        .status-badge.done { background: var(--accent-soft); color: var(--accent-color); border: 1px solid rgba(59, 130, 246, 0.2); }
        .status-badge.scheduled { background: var(--muted); color: var(--muted-foreground); border: 1px solid var(--border-color); }
        .status-badge.paid { background: rgba(34, 197, 94, 0.12); color: var(--success-color); border: 1px solid rgba(34, 197, 94, 0.25); }
        .status-badge.debt { background: rgba(239, 68, 68, 0.12); color: var(--danger-color); border: 1px solid rgba(239, 68, 68, 0.25); }
        .status-badge.rescheduled { background: rgba(245, 158, 11, 0.12); color: var(--warning-color); border: 1px solid rgba(245, 158, 11, 0.25); }

        .days-selector { display: flex; gap: 4px; margin-bottom: 12px; }
        .day-check { flex: 1; padding: 9px 0; text-align: center; background: var(--card-bg); border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid var(--border-color); user-select: none; }
        .day-check.selected { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }

        /* ==========================================================================
           СПИСОК УЧЕНИКОВ И СЛОТОВ (Student & Slot Cards)
           ========================================================================== */
        .students-slots-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 100%;
            margin-bottom: 16px;
        }

        .student-slot-card {
            position: relative;
            background-color: var(--card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg, 16px);
            padding: 14px 16px;
            display: flex;
            align-items: center;
            box-shadow: var(--shadow-xs);
            box-sizing: border-box;
            width: 100%;
            min-height: 64px;
            transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast);
        }

        body.theme-dark .student-slot-card {
            background-color: #1c1c1e;
            border-color: rgba(255, 255, 255, 0.05);
        }

        .student-slot-card.slot-active {
            justify-content: space-between;
            gap: 12px;
        }

        .student-slot-card.slot-free {
            cursor: pointer;
            gap: 12px;
            -webkit-tap-highlight-color: transparent;
        }
        .student-slot-card.slot-free:active {
            transform: scale(0.98);
        }
        .student-slot-card.slot-free:hover {
            border-color: rgba(52, 211, 153, 0.4);
        }

        .student-slot-card.slot-locked {
            position: relative;
            overflow: hidden;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .student-slot-card.slot-locked:active {
            transform: scale(0.98);
        }

        .student-slot-card .slot-left-icon {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: var(--foreground);
        }
        body.theme-dark .student-slot-card .slot-left-icon {
            color: #f4f4f5;
        }

        .student-slot-card .slot-left-icon.icon-green {
            color: #34d399; /* bg-emerald-400 */
        }
        body.theme-dark .student-slot-card .slot-left-icon.icon-green {
            color: #34d399;
        }

        .student-slot-card .slot-left-icon.icon-lock {
            color: #f4f4f5;
        }

        .student-slot-card .slot-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
            flex: 1;
        }

        .student-slot-card .slot-name-row {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
        }

        .student-slot-card .slot-student-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--foreground);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.25;
        }
        body.theme-dark .student-slot-card .slot-student-name {
            color: #ffffff;
        }

        .student-slot-card .slot-student-username {
            font-size: 13px;
            font-weight: 400;
            color: #2dd4bf; /* мягкий бирюзовый акцент @username */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.25;
        }

        .student-slot-card .slot-sub-row {
            font-size: 12.5px;
            color: var(--muted-foreground);
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        body.theme-dark .student-slot-card .slot-sub-row {
            color: #a1a1aa;
        }

        .student-slot-card .slot-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .student-slot-card .slot-action-btn {
            background: transparent;
            border: none;
            padding: 6px;
            border-radius: var(--radius-sm, 8px);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--muted-foreground);
            transition: all var(--duration-fast);
            -webkit-tap-highlight-color: transparent;
        }
        .student-slot-card .slot-action-btn:active {
            transform: scale(0.9);
        }

        .student-slot-card .slot-action-btn.btn-edit {
            color: #a1a1aa;
        }
        .student-slot-card .slot-action-btn.btn-edit:hover {
            color: var(--foreground);
            background: var(--muted);
        }

        .student-slot-card .slot-action-btn.btn-delete {
            color: #f87171; /* приглушенный красный крестик как на скриншоте */
        }
        .student-slot-card .slot-action-btn.btn-delete:hover {
            color: #ef4444;
            background: rgba(239, 68, 68, 0.12);
        }

        .student-slot-card .slot-free-text {
            font-size: 15px;
            font-weight: 600;
            color: var(--foreground);
        }
        body.theme-dark .student-slot-card .slot-free-text {
            color: #ffffff;
        }

        /* Заблокированный слот (по истечении подписки) */
        .student-slot-card .slot-blurred-layer {
            position: absolute;
            inset: 0;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            filter: blur(5px);
            opacity: 0.22;
            pointer-events: none;
            user-select: none;
        }

        .student-slot-card .slot-locked-foreground {
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 1;
        }

        .student-slot-card .slot-locked-main {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .student-slot-card .slot-locked-text {
            font-size: 15px;
            font-weight: 500;
            color: var(--foreground);
        }
        body.theme-dark .student-slot-card .slot-locked-text {
            color: #ffffff;
        }

        .student-slot-card .slot-action-btn.btn-renew {
            color: var(--foreground);
        }
        body.theme-dark .student-slot-card .slot-action-btn.btn-renew {
            color: #ffffff;
        }
        .student-slot-card .slot-action-btn.btn-renew:active {
            transform: rotate(90deg);
        }


        /* Фильтр по репетиторам для ученика */
        .tutor-filter-chips {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 4px;
            margin-bottom: 10px;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .tutor-filter-chips::-webkit-scrollbar { display: none; }
        .tutor-filter-chip {
            padding: 6px 14px;
            font-size: 12px;
            font-weight: 600;
            border-radius: var(--radius-full);
            background: var(--card);
            border: 1.5px solid var(--border-color);
            color: var(--foreground);
            white-space: nowrap;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            transition: all var(--duration-fast) var(--ease-out);
            flex-shrink: 0;
            user-select: none;
        }
        .tutor-filter-chip:active { transform: scale(0.96); }
        .tutor-filter-chip.active {
            background: var(--accent-color);
            color: var(--accent-foreground);
            border-color: var(--accent-color);
            box-shadow: var(--shadow-sm);
        }

        .settings-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
        .settings-row:last-child { border-bottom: none; }
        
        .modal {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            width: 100%;
            max-width: 440px;
            max-height: 92vh;
            background-color: var(--background);
            z-index: 100;

            overflow-y: auto;
            overflow-x: hidden;
            padding: var(--space-4);
            padding-top: var(--space-3);
            padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
            box-sizing: border-box;
            border-radius: var(--radius-xl) var(--radius-xl) 0 0;
            box-shadow: 0 -10px 40px rgba(0,0,0,0.12);
            animation: sheetSlideIn var(--duration-slow) var(--ease-out);
            overscroll-behavior-y: contain;
        }
        @media (min-width: 481px) {
            .modal {
                border-left: 1px solid rgba(255, 255, 255, 0.08);
                border-right: 1px solid rgba(255, 255, 255, 0.08);
                box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
            }
        }
        .modal::before {
            content: '';
            display: block;
            width: 36px;
            height: 4px;
            background: var(--border-color);
            border-radius: var(--radius-full);
            margin: 0 auto var(--space-3) auto;
            flex-shrink: 0;
        }
        .modal-backdrop {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            z-index: 99;
            animation: fadeIn var(--duration-normal) var(--ease-out);
        }
        @keyframes sheetSlideIn {
            from { transform: translateY(100%); }
            to { transform: translateY(0); }
        }
        @keyframes sheetSlideOut {
            from { transform: translateY(0); }
            to { transform: translateY(100%); }
        }
        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
        /* slideIn kept for backward compat, new animations use sheetSlideIn */
        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
        .modal-header h2 { margin: 0; font-size: 20px; font-weight: 700; }
        .modal-close-btn { background: none; border: none; font-size: 20px; color: var(--hint-color); cursor: pointer; padding: 4px 8px; }

        .list-item { background: var(--card-bg); padding: 12px 14px; border-radius: var(--radius-lg); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; box-shadow: var(--shadow-xs); border: 1px solid var(--border-color); }
        .input-field {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            padding: 10px 12px;
            height: 42px;
            margin-bottom: var(--space-3);
            border-radius: var(--radius-md);
            border: 1px solid var(--input-border);
            background-color: var(--card);
            color: var(--foreground);
            font-size: 15px;
            box-sizing: border-box;
            outline: none;
            transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }
        .input-field:focus {
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px var(--ring);
        }
        input[type="date"],
        input[type="time"],
        input[type="datetime-local"] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            display: block;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }
        input[type="date"]::-webkit-date-and-time-value,
        input[type="time"]::-webkit-date-and-time-value,
        input[type="datetime-local"]::-webkit-date-and-time-value {
            text-align: inherit;
            line-height: normal;
        }
        body.theme-dark input[type="date"]::-webkit-calendar-picker-indicator,
        body.theme-dark input[type="time"]::-webkit-calendar-picker-indicator,
        body.theme-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
            cursor: pointer;
            filter: invert(0.85);
        }
        textarea.input-field { resize: vertical; min-height: 80px; height: auto; font-family: inherit; }
        .delete-btn, .edit-st-btn {
            background: none;
            border: none;
            cursor: pointer;
            min-width: 36px;
            min-height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-sm);
            position: relative;
            -webkit-tap-highlight-color: transparent;
            transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast);
        }
        .delete-btn { color: var(--danger-color); font-size: 20px; padding: 0 4px; }
        .edit-st-btn { color: var(--accent-color); font-size: 16px; padding: 0 4px; }
        .delete-btn:active, .edit-st-btn:active { transform: scale(0.92); }
        .delete-btn::after, .edit-st-btn::after {
            content: '';
            position: absolute;
            inset: -6px;
        }
        
        /* Цветовая палитра */
        .color-palette { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px 0; }
        .color-dot { width: 34px; height: 34px; border-radius: 50%; cursor: pointer; transition: transform 0.15s, border 0.15s; border: 2px solid transparent; box-shadow: var(--shadow-sm); }
        .color-dot.active { border-color: var(--text-color); transform: scale(1.18); }

        .emoji-grid { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px 0; }
        .emoji-item {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: var(--card-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 1px solid var(--border-color);
            color: var(--text-color);
            transition: 0.15s;
        }
        .emoji-item svg {
            stroke: currentColor;
            transition: transform 0.15s;
        }
        .emoji-item:hover svg {
            transform: scale(1.1);
        }
        .emoji-item.active {
            border-color: var(--accent-color);
            background: var(--accent-soft);
            color: var(--accent-color);
            transform: scale(1.06);
            box-shadow: 0 0 0 2px var(--ring);
        }

        /* Домашние задания */
        .hw-filter-bar { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
        .hw-filter-bar::-webkit-scrollbar { display: none; }
        .hw-filter-btn { padding: 6px 12px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; background: var(--card-bg); border: 1px solid var(--border-color); color: var(--hint-color); cursor: pointer; white-space: nowrap; }
        .hw-filter-btn.active { background: var(--accent-color); color: #fff; border-color: var(--accent-color); }
        
        .hw-card {
            background: var(--card);
            border-radius: 20px;
            padding: 16px 16px 14px 16px;
            margin-bottom: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            border: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            gap: 10px;
            transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
            box-sizing: border-box;
        }
        .hw-card:active {
            transform: scale(0.985);
        }
        body.theme-dark .hw-card {
            background: #141416;
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
        }
        .hw-card-top-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            margin-bottom: -2px;
        }
        .hw-card-tags {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }
        .hw-subject-badge {
            background: var(--accent-soft);
            color: var(--accent-color);
            font-size: 11px;
            font-weight: 600;
            padding: 2.5px 8px;
            border-radius: var(--radius-full);
            border: 1px solid rgba(59, 130, 246, 0.2);
            letter-spacing: 0.2px;
            display: inline-flex;
            align-items: center;
        }
        .hw-target-badge {
            font-size: 11.5px;
            color: var(--muted-foreground);
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-weight: 500;
        }
        .hw-title {
            font-size: 17px;
            font-weight: 700;
            margin: 0;
            color: var(--foreground);
            line-height: 1.3;
            letter-spacing: -0.2px;
        }
        .hw-deadline-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 11.5px;
            color: var(--muted-foreground);
            background: var(--muted);
            padding: 3px 9px;
            border-radius: var(--radius-full);
            width: fit-content;
            border: 1px solid var(--border-color);
        }
        .hw-deadline-pill.overdue {
            background: rgba(239, 68, 68, 0.1);
            color: var(--danger-color);
            border-color: rgba(239, 68, 68, 0.25);
        }
        .hw-desc {
            font-size: 13.5px;
            line-height: 1.5;
            color: var(--foreground);
            white-space: pre-wrap;
            word-break: break-word;
            margin: 0;
        }
        /* Компактная плашка статуса (вместо громоздких серых вложенных боксов) */
        .hw-pending-strip {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11.5px;
            color: var(--muted-foreground);
            background: rgba(0, 0, 0, 0.02);
            padding: 7px 11px;
            border-radius: var(--radius-md);
            border: 1px dashed var(--border-color);
        }
        body.theme-dark .hw-pending-strip {
            background: rgba(255, 255, 255, 0.02);
            border-color: rgba(255, 255, 255, 0.08);
        }
        /* Выделенный блок сданного решения */
        .hw-submission-card {
            background: rgba(59, 130, 246, 0.04);
            border: 1px solid rgba(59, 130, 246, 0.16);
            border-radius: var(--radius-md);
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        body.theme-dark .hw-submission-card {
            background: rgba(59, 130, 246, 0.07);
            border-color: rgba(99, 102, 241, 0.22);
        }
        .hw-submission-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .hw-submission-title {
            font-size: 11px;
            font-weight: 600;
            color: var(--accent-color);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .hw-submission-pill {
            font-size: 10.5px;
            font-weight: 600;
            padding: 2px 7px;
            border-radius: 6px;
        }
        .hw-submission-pill.submitted {
            background: rgba(59, 130, 246, 0.15);
            color: var(--accent-color);
        }
        .hw-submission-pill.checked {
            background: rgba(34, 197, 94, 0.15);
            color: var(--success-color);
        }
        .hw-submission-comment {
            font-size: 13px;
            line-height: 1.4;
            color: var(--foreground);
            padding-left: 2px;
        }
        .hw-actions {
            display: flex;
            gap: 8px;
            justify-content: space-between;
            align-items: center;
            margin-top: 2px;
            padding-top: 6px;
            border-top: 1px solid rgba(0, 0, 0, 0.04);
        }
        body.theme-dark .hw-actions {
            border-top-color: rgba(255, 255, 255, 0.05);
        }
        .hw-actions-main { display: flex; gap: 8px; align-items: center; }
        .hw-action-btn { padding: 8px 16px; font-size: 13px; border-radius: var(--radius-md); border: none; cursor: pointer; font-weight: 600; transition: transform 0.1s, opacity 0.15s; height: 36px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
        .hw-action-btn:active:not(:disabled) { transform: scale(0.97); }
        .hw-action-btn:disabled,
        .hw-action-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed !important;
            pointer-events: auto !important;
            filter: grayscale(0.2);
        }
        .hw-delete-btn {
            background: transparent;
            color: var(--hint-color);
            border: 1px solid transparent;
            width: 34px;
            height: 34px;
            border-radius: var(--radius-sm);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
        }
        .hw-delete-btn:hover {
            background: rgba(239, 68, 68, 0.1);
            color: var(--danger-color);
            border-color: rgba(239, 68, 68, 0.2);
        }
        .hw-delete-btn:active {
            transform: scale(0.94);
        }

        /* Аккуратные Pill Badges для статуса ДЗ */
        .status-badge.status-pill {
            padding: 3px 10px;
            border-radius: var(--radius-full);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.2px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .status-badge.status-pill.pending {
            background: rgba(245, 158, 11, 0.12);
            color: #d97706;
            border: 1px solid rgba(245, 158, 11, 0.25);
        }
        body.theme-dark .status-badge.status-pill.pending {
            background: rgba(245, 158, 11, 0.18);
            color: #fbbf24;
            border-color: rgba(245, 158, 11, 0.35);
        }
        .status-badge.status-pill.submitted {
            background: rgba(59, 130, 246, 0.12);
            color: #2563eb;
            border: 1px solid rgba(59, 130, 246, 0.25);
        }
        body.theme-dark .status-badge.status-pill.submitted {
            background: rgba(99, 102, 241, 0.2);
            color: #818cf8;
            border-color: rgba(99, 102, 241, 0.35);
        }
        .status-badge.status-pill.checked {
            background: rgba(34, 197, 94, 0.12);
            color: #16a34a;
            border: 1px solid rgba(34, 197, 94, 0.25);
        }
        body.theme-dark .status-badge.status-pill.checked {
            background: rgba(34, 197, 94, 0.18);
            color: #4ade80;
            border-color: rgba(34, 197, 94, 0.35);
        }

        /* Карточка файла в ДЗ */
        .hw-file-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 9px 12px;
            margin-top: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }
        .hw-file-top-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            width: 100%;
        }
        .hw-file-meta-wrap {
            display: flex;
            align-items: center;
            gap: 10px;
            overflow: hidden;
            flex: 1;
        }
        .hw-file-icon {
            font-size: 22px;
            line-height: 1;
            flex-shrink: 0;
        }
        .hw-file-name-size {
            overflow: hidden;
            flex: 1;
        }
        .hw-file-name {
            font-size: 13px;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--text-color);
        }
        .hw-file-size {
            font-size: 11px;
            color: var(--hint-color);
            margin-top: 1px;
        }
        .hw-file-btns {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
        }
        .hw-file-btn {
            border: none;
            border-radius: var(--radius-sm);
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            background: var(--accent-color);
            color: #fff;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: transform 0.1s;
        }
        .hw-file-btn:active {
            transform: scale(0.96);
        }
        .hw-file-btn.secondary {
            background: var(--bg-color);
            color: var(--text-color);
            border: 1px solid var(--border-color);
        }
        .hw-bot-notice {
            background: rgba(0, 122, 255, 0.08);
            border: 1px solid rgba(0, 122, 255, 0.22);
            border-radius: 10px;
            padding: 9px 12px;
            margin-top: 8px;
            display: flex;
            align-items: flex-start;
            gap: 9px;
            font-size: 12px;
            line-height: 1.4;
            color: var(--text-color);
        }
        .hw-bot-notice-icon {
            font-size: 16px;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .hw-bot-notice-text {
            flex: 1;
        }
        .hw-file-card-preview {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 8px 10px;
            margin-top: 6px;
        }
        .btn-remove-file {
            background: none;
            border: none;
            color: var(--danger-color);
            font-size: 16px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 50%;
        }

        /* ========================================================
           MODERN HOMEWORK MODAL SHEETS (UI/UX REDESIGN)
           ======================================================== */
        .modal-hw-sheet {
            max-width: 500px;
            width: 100%;
            margin: 0 auto;
            left: 0;
            right: 0;
            max-height: 88vh;
            padding: 0;
            border-radius: 24px 24px 0 0;
            border: 1px solid var(--border-color);
            border-bottom: none;
            background: var(--background);
            box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.16);
            overflow-y: auto;
            overflow-x: hidden;
            box-sizing: border-box;
        }
        .modal-hw-sheet::before {
            margin: 10px auto 4px auto;
        }
        .modal-hw-header {
            position: sticky;
            top: 0;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 18px;
            border-bottom: 1px solid var(--border-color);
            background: var(--card);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-sizing: border-box;
            width: 100%;
        }
        .modal-hw-header-title-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }
        .modal-hw-icon-badge {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(59, 130, 246, 0.12);
            color: var(--accent-color);
            flex-shrink: 0;
        }
        .modal-hw-icon-badge.success {
            background: rgba(34, 197, 94, 0.14);
            color: var(--success-color);
        }
        .modal-hw-title {
            margin: 0;
            font-size: 16px;
            font-weight: 700;
            color: var(--foreground);
            line-height: 1.25;
        }
        .modal-hw-subtitle {
            margin: 2px 0 0 0;
            font-size: 11.5px;
            color: var(--muted-foreground);
            line-height: 1.3;
        }
        .modal-hw-body {
            padding: 16px 18px 20px 18px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            box-sizing: border-box;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            overflow-x: hidden;
        }
        .modal-hw-footer {
            position: relative;
            z-index: 1;
            padding: 14px 18px calc(14px + env(safe-area-inset-bottom)) 18px;
            border-top: 1px solid var(--border-color);
            background: var(--card);
            box-sizing: border-box;
            width: 100%;
            margin-top: auto;
        }
        .hw-form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
        }
        .hw-form-col {
            display: flex;
            flex-direction: column;
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box;
        }
        .hw-form-group {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }
        .hw-field-label {
            font-size: 12px;
            font-weight: 600;
            color: var(--foreground);
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .required-star {
            color: var(--danger-color);
            font-weight: 700;
        }
        .hw-input-field {
            width: 100%;
            padding: 10px 12px;
            height: 42px;
            border-radius: var(--radius-md);
            border: 1px solid var(--input-border);
            background-color: var(--card);
            color: var(--foreground);
            font-size: 14px;
            box-sizing: border-box;
            outline: none;
            transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
        }
        .hw-input-field:focus {
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px var(--ring);
        }
        .hw-input-title {
            font-weight: 600;
        }
        .hw-textarea {
            height: auto;
            min-height: 70px;
            resize: vertical;
            line-height: 1.45;
            font-family: inherit;
        }
        .hw-select-wrapper {
            position: relative;
            width: 100%;
        }
        .hw-select-wrapper select {
            appearance: none;
            -webkit-appearance: none;
            padding-right: 28px;
            cursor: pointer;
        }
        .hw-select-wrapper::after {
            content: '';
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 5px solid var(--muted-foreground);
            pointer-events: none;
        }
        .hw-label-with-hint {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }
        .hw-field-hint {
            font-size: 11px;
            color: var(--muted-foreground);
        }
        .hw-quick-chips {
            display: flex;
            gap: 6px;
            margin-bottom: 8px;
            overflow-x: auto;
            padding-bottom: 3px;
            scrollbar-width: none;
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
        }
        .hw-quick-chips::-webkit-scrollbar {
            display: none;
        }
        .hw-chip-btn {
            border: 1px solid var(--border-color);
            background: var(--card);
            color: var(--foreground);
            border-radius: var(--radius-full);
            padding: 5px 12px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;
            transition: all var(--duration-fast) var(--ease-out);
            -webkit-tap-highlight-color: transparent;
            flex-shrink: 0;
        }
        .hw-chip-btn:hover {
            border-color: var(--accent-color);
            background: var(--accent-soft);
        }
        .hw-chip-btn.active {
            background: var(--accent-color);
            color: #ffffff;
            border-color: var(--accent-color);
        }
        .hw-datetime-wrapper {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            box-sizing: border-box;
            display: block;
        }
        .hw-datetime-input {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
            display: block !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            appearance: none !important;
            text-align: center;
            font-size: 13.5px;
            font-weight: 500;
            cursor: pointer;
            padding: 10px 12px;
            margin: 0;
        }
        .hw-hidden-file-input {
            display: none !important;
        }
        .hw-dropzone {
            border: 1.5px dashed var(--border-color);
            border-radius: var(--radius-lg);
            background: var(--card);
            padding: 13px 15px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast);
            -webkit-tap-highlight-color: transparent;
        }
        .hw-dropzone:active {
            transform: scale(0.99);
        }
        .hw-dropzone:hover,
        .hw-dropzone.dragover {
            border-color: var(--accent-color);
            background: var(--accent-soft);
        }
        .hw-dropzone.student:hover,
        .hw-dropzone.student.dragover {
            border-color: var(--success-color);
            background: rgba(34, 197, 94, 0.08);
        }
        .hw-dropzone-icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: var(--muted);
            color: var(--accent-color);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: transform var(--duration-fast);
        }
        .hw-dropzone:hover .hw-dropzone-icon {
            transform: scale(1.06);
        }
        .hw-dropzone-icon.student {
            color: var(--success-color);
            background: rgba(34, 197, 94, 0.12);
        }
        .hw-dropzone-info {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .hw-dropzone-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--foreground);
            line-height: 1.3;
        }
        .hw-dropzone-sub {
            font-size: 11px;
            color: var(--muted-foreground);
            line-height: 1.35;
            margin-top: 1px;
        }
        .hw-primary-btn {
            width: 100%;
            height: 46px;
            border-radius: var(--radius-md);
            font-size: 15px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 4px 14px rgba(59, 130, 246, 0.28);
            border: none;
            cursor: pointer;
        }
        .hw-primary-btn.green {
            background: var(--success-color);
            box-shadow: 0 4px 14px rgba(34, 197, 94, 0.28);
        }
        .hw-primary-btn.green:hover {
            background: #16a34a;
        }
        .hw-summary-card {
            background: var(--card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            border-left: 3px solid var(--accent-color);
        }
        .hw-summary-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11px;
        }
        .hw-summary-badge {
            text-transform: uppercase;
            letter-spacing: 0.4px;
            font-weight: 700;
            color: var(--muted-foreground);
            font-size: 10px;
        }
        .hw-summary-tutor {
            font-weight: 600;
            color: var(--accent-color);
            font-size: 12px;
        }
        .hw-summary-title {
            margin: 0;
            font-size: 15px;
            font-weight: 700;
            color: var(--foreground);
            line-height: 1.3;
        }
        .hw-summary-desc {
            margin: 0;
            font-size: 13px;
            color: var(--muted-foreground);
            line-height: 1.4;
            white-space: pre-wrap;
            max-height: 100px;
            overflow-y: auto;
        }
        .hw-summary-deadline {
            font-size: 11px;
            color: var(--muted-foreground);
            margin-top: 2px;
        }
        .online-room-btn {
            text-decoration: none;
            text-align: center;
            display: block;
            border-radius: 10px;
            padding: 10px 14px;
            font-weight: 600;
            font-size: 13px;
            cursor: pointer;
            border: none;
            box-sizing: border-box;
            width: 100%;
        }

        /* Уведомления */
        .notif-item-wrap {
            background: var(--card); border-radius: var(--radius-lg);
            padding: 12px 14px; margin-bottom: 10px;
            display: flex; gap: 12px; align-items: flex-start;
            box-shadow: var(--shadow-xs);
            cursor: pointer; transition: transform 0.15s, background 0.15s;
            position: relative; border: 1px solid var(--border-color);
        }
        .notif-item-wrap:active { transform: scale(0.99); background: var(--accent-soft); }
        .notif-close-item-btn {
            background: none; border: none; font-size: 16px;
            color: var(--hint-color); cursor: pointer; padding: 2px 6px;
            line-height: 1; border-radius: 50%; margin-left: auto;
            flex-shrink: 0;
        }
        .notif-close-item-btn:hover { color: var(--danger-color); }
        .notif-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
        .notif-text-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
        .notif-text-body { font-size: 12px; color: var(--hint-color); }

        /* Баннер статуса привязки */
        .link-banner {
            background: var(--card-bg);
            border-radius: 14px;
            padding: 14px;
            margin-bottom: 14px;
            border: 1px solid var(--border-color);
            border-left: 4px solid var(--accent-color);
        }

        /* Группировочные карточки внутри модалок */
        .modal-section-card {
            background: var(--muted);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 14px;
            margin-bottom: 14px;
            box-sizing: border-box;
            width: 100%;
        }
        .modal-section-card .input-field,
        .modal .card .input-field {
            background-color: var(--card);
            border: 1px solid var(--border-color);
        }
        .reschedule-time-grid {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 8px;
            align-items: end;
        }
        .reschedule-time-grid > div {
            min-width: 0;
        }
        .reschedule-separator {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: var(--hint-color);
            user-select: none;
        }

        /* ========================================================
           УПРАВЛЕНИЕ УРОКОМ (SLOT ACTION MODAL) - UI/UX 10X
           ======================================================== */
        .slot-modal-avatar {
            width: 38px;
            height: 38px;
            border-radius: var(--radius-md);
            background: linear-gradient(135deg, #3b82f6, #6366f1);
            color: #ffffff;
            font-size: 13px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
            letter-spacing: 0.5px;
        }
        .slot-modal-subtitle {
            font-size: 12px;
            color: var(--muted-foreground);
            margin-top: 3px;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        /* Двухколоночный грид интерактивных тайлов */
        .slot-action-tiles {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 12px;
            width: 100%;
        }

        .slot-action-tile {
            position: relative;
            background: var(--card);
            border: 1.5px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 12px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 86px;
            text-align: left;
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
            -webkit-tap-highlight-color: transparent;
            box-shadow: var(--shadow-xs);
            box-sizing: border-box;
            outline: none;
        }
        .slot-action-tile:active {
            transform: scale(0.97);
        }
        .slot-tile-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 4px;
        }
        .slot-tile-category {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--muted-foreground);
        }
        .slot-tile-icon-badge {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all var(--duration-fast);
        }
        .slot-tile-icon-badge svg {
            display: block;
        }
        .slot-tile-main {
            font-size: 14.5px;
            font-weight: 700;
            line-height: 1.25;
            margin-top: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: all var(--duration-fast);
        }
        .slot-tile-main.is-amount {
            font-size: 18px;
            font-weight: 800;
            letter-spacing: -0.02em;
            font-variant-numeric: tabular-nums;
            line-height: 1.2;
        }
        .slot-tile-main.is-paid {
            font-size: 14px;
            font-weight: 700;
        }
        .slot-tile-sub {
            font-size: 11px;
            margin-top: 4px;
            line-height: 1.2;
            color: var(--muted-foreground);
            transition: color var(--duration-fast);
        }

        /* Состояния тайлика Проведения (Attendance) */
        .slot-action-tile.attendance-scheduled {
            background: var(--card);
            border-color: var(--border-color);
        }
        .slot-action-tile.attendance-scheduled .slot-tile-icon-badge {
            background: var(--muted);
            color: var(--muted-foreground);
        }
        .slot-action-tile.attendance-scheduled .slot-tile-main {
            color: var(--foreground);
        }

        .slot-action-tile.attendance-done {
            background: rgba(34, 197, 94, 0.08);
            border-color: rgba(34, 197, 94, 0.45);
            box-shadow: 0 0 14px rgba(34, 197, 94, 0.12);
        }
        .slot-action-tile.attendance-done .slot-tile-icon-badge {
            background: #22c55e;
            color: #ffffff;
        }
        .slot-action-tile.attendance-done .slot-tile-main {
            color: #16a34a;
        }
        body.theme-dark .slot-action-tile.attendance-done {
            background: rgba(34, 197, 94, 0.12);
            border-color: rgba(34, 197, 94, 0.5);
        }
        body.theme-dark .slot-action-tile.attendance-done .slot-tile-main {
            color: #4ade80;
        }
        .slot-action-tile.attendance-done .slot-tile-sub {
            color: #16a34a;
        }
        body.theme-dark .slot-action-tile.attendance-done .slot-tile-sub {
            color: #4ade80;
        }

        /* Состояния тайлика Оплаты (Payment) */
        .slot-action-tile.payment-debt {
            background: rgba(245, 158, 11, 0.08);
            border-color: rgba(245, 158, 11, 0.38);
        }
        .slot-action-tile.payment-debt .slot-tile-category {
            color: #d97706;
        }
        body.theme-dark .slot-action-tile.payment-debt .slot-tile-category {
            color: #fbbf24;
        }
        .slot-action-tile.payment-debt .slot-tile-icon-badge {
            background: rgba(245, 158, 11, 0.18);
            color: #d97706;
        }
        body.theme-dark .slot-action-tile.payment-debt .slot-tile-icon-badge {
            color: #fbbf24;
            background: rgba(245, 158, 11, 0.25);
        }
        .slot-action-tile.payment-debt .slot-tile-main {
            color: #b45309;
        }
        body.theme-dark .slot-action-tile.payment-debt .slot-tile-main {
            color: #fbbf24;
        }
        .slot-action-tile.payment-debt .slot-tile-sub {
            color: #d97706;
        }
        body.theme-dark .slot-action-tile.payment-debt .slot-tile-sub {
            color: rgba(251, 191, 36, 0.85);
        }

        .slot-action-tile.payment-paid {
            background: rgba(34, 197, 94, 0.08);
            border-color: rgba(34, 197, 94, 0.45);
            box-shadow: 0 0 14px rgba(34, 197, 94, 0.12);
        }
        .slot-action-tile.payment-paid .slot-tile-icon-badge {
            background: #22c55e;
            color: #ffffff;
        }
        .slot-action-tile.payment-paid .slot-tile-main {
            color: #16a34a;
        }
        body.theme-dark .slot-action-tile.payment-paid {
            background: rgba(34, 197, 94, 0.12);
            border-color: rgba(34, 197, 94, 0.5);
        }
        body.theme-dark .slot-action-tile.payment-paid .slot-tile-main {
            color: #4ade80;
        }
        .slot-action-tile.payment-paid .slot-tile-sub {
            color: #16a34a;
        }
        body.theme-dark .slot-action-tile.payment-paid .slot-tile-sub {
            color: #4ade80;
        }

        /* Когда кнопки нажаты (урок проведён / оплата получена) — скрываем надписи "Проведение" и "Оплата" */
        .slot-action-tile.attendance-done .slot-tile-category,
        .slot-action-tile.payment-paid .slot-tile-category {
            display: none !important;
        }
        .slot-action-tile.attendance-done .slot-tile-icon-badge,
        .slot-action-tile.payment-paid .slot-tile-icon-badge {
            margin-left: auto;
        }

        /* Карточка переноса занятия */
        .slot-reschedule-card {
            background: var(--muted);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 12px 14px;
            margin-bottom: 12px;
            box-sizing: border-box;
            width: 100%;
        }
        .slot-reschedule-header {
            font-size: 12px;
            font-weight: 700;
            color: var(--foreground);
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .slot-reschedule-fields {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 10px;
        }
        @media (max-width: 360px) {
            .slot-reschedule-fields {
                grid-template-columns: 1fr;
            }
        }
        .slot-reschedule-col {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-width: 0;
        }
        .slot-field-label {
            font-size: 11px;
            font-weight: 500;
            color: var(--muted-foreground);
        }
        .slot-reschedule-card .input-field {
            background: var(--card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
        }
        .slot-reschedule-btn {
            width: 100%;
            height: 38px;
            font-size: 12px;
            font-weight: 600;
            border-radius: var(--radius-md);
            margin: 0;
        }

        /* Мягкая деструктивная кнопка (Soft Destructive) */
        .action-btn.soft-destructive {
            background: rgba(239, 68, 68, 0.08);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.22);
            height: 40px;
            font-size: 13px;
            font-weight: 600;
            border-radius: var(--radius-md);
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all var(--duration-fast) var(--ease-out);
            -webkit-tap-highlight-color: transparent;
        }
        .action-btn.soft-destructive:hover {
            background: rgba(239, 68, 68, 0.16);
            color: #dc2626;
            border-color: rgba(239, 68, 68, 0.35);
        }
        .action-btn.soft-destructive:active {
            transform: scale(0.98);
        }

        /* Гибкое расписание по дням */
        .day-interval-card {
            background: var(--muted);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 12px 14px;
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            box-sizing: border-box;
        }
        .day-interval-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
            font-weight: 700;
        }
        .day-time-inputs {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 8px;
            align-items: end;
        }
        .day-time-inputs > div {
            min-width: 0;
        }
        .day-interval-card .input-field {
            background-color: var(--card);
            border: 1px solid var(--border-color);
            height: 40px;
            padding: 6px 10px;
            font-size: 13px;
            margin-bottom: 0;
            border-radius: var(--radius-sm);
            text-align: center;
        }
        .day-time-separator {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: var(--hint-color);
            user-select: none;
        }

        /* ================= PRO БЛОКИРОВКА СТАТИСТИКИ ================= */
        #tab-stats {
            position: relative;
            min-height: 440px;
        }

        .stats-content-body {
            transition: filter 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, transform 0.35s ease;
        }

        .stats-content-body.stats-blurred {
            filter: blur(8px) saturate(0.8);
            -webkit-filter: blur(8px) saturate(0.8);
            opacity: 0.45;
            pointer-events: none;
            user-select: none;
            -webkit-user-select: none;
            transform: scale(0.99);
        }

        .pro-lock-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            min-height: 440px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            z-index: 20;
            padding: 18px 12px 30px 12px;
            pointer-events: auto;
            box-sizing: border-box;
        }

        .pro-lock-card {
            width: 100%;
            max-width: 350px;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1.5px solid rgba(245, 158, 11, 0.35);
            border-radius: 24px;
            padding: 24px 18px 20px;
            text-align: center;
            box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.12), 0 0 35px rgba(245, 158, 11, 0.15);
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            animation: proCardPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            box-sizing: border-box;
        }

        body.theme-dark .pro-lock-card {
            background: rgba(24, 24, 27, 0.9);
            border: 1.5px solid rgba(245, 158, 11, 0.3);
            box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.6), 0 0 35px rgba(245, 158, 11, 0.18);
        }

        @keyframes proCardPop {
            from {
                opacity: 0;
                transform: translateY(16px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .pro-lock-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #ffffff;
            font-size: 11px;
            font-weight: 800;
            padding: 3px 10px;
            border-radius: 99px;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
            margin-bottom: 14px;
        }

        .pro-lock-icon-wrap {
            position: relative;
            margin-bottom: 12px;
        }

        .pro-lock-icon-circle {
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.25));
            border: 1.5px solid rgba(245, 158, 11, 0.45);
            color: #f59e0b;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 26px rgba(245, 158, 11, 0.25);
        }

        .pro-lock-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--foreground);
            margin: 0 0 8px 0;
            line-height: 1.3;
        }

        .pro-lock-desc {
            font-size: 13px;
            color: var(--muted-foreground);
            margin: 0 0 16px 0;
            line-height: 1.45;
        }

        .pro-lock-features {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 18px;
            text-align: left;
            background: var(--muted);
            border-radius: var(--radius-md);
            padding: 12px;
            box-sizing: border-box;
        }

        .pro-feature-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 12px;
            font-weight: 500;
            color: var(--foreground);
            line-height: 1.35;
        }

        .pro-feat-icon {
            width: 20px;
            height: 20px;
            min-width: 20px;
            border-radius: 50%;
            background: rgba(34, 197, 94, 0.15);
            color: var(--success-color);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .pro-lock-action-btn {
            width: 100%;
            height: 44px;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            color: #ffffff;
            border: none;
            border-radius: var(--radius-md);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
            transition: transform var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out);
            -webkit-tap-highlight-color: transparent;
        }
        .pro-lock-action-btn:hover {
            filter: brightness(1.05);
        }
        .pro-lock-action-btn:active {
            transform: scale(0.97);
        }

        /* МОДАЛКА PRO ИНФОРМАЦИИ */
        .pro-modal-content {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .pro-modal-hero {
            text-align: center;
            padding: 6px 0 4px 0;
        }
        .pro-modal-icon-glow {
            width: 60px;
            height: 60px;
            margin: 0 auto 10px auto;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.25));
            border: 1.5px solid rgba(245, 158, 11, 0.4);
            color: #f59e0b;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 24px rgba(245, 158, 11, 0.25);
        }
        .pro-modal-hero h4 {
            margin: 0 0 4px 0;
            font-size: 16px;
            font-weight: 700;
            color: var(--foreground);
        }
        .pro-modal-hero p {
            margin: 0;
            font-size: 13px;
            color: var(--muted-foreground);
            line-height: 1.4;
        }
        .pro-modal-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: var(--muted);
            border-radius: var(--radius-md);
            padding: 12px;
        }
        .pro-modal-list-item {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            font-size: 12px;
            line-height: 1.35;
        }
        .pro-modal-list-item strong {
            display: block;
            color: var(--foreground);
            font-size: 13px;
            margin-bottom: 1px;
        }
        .pro-modal-list-item span {
            color: var(--muted-foreground);
        }
        .pro-modal-item-icon {
            font-size: 18px;
            line-height: 1;
            margin-top: 2px;
        }

        /* ================= НОВЫЙ ДИЗАЙН СТАТИСТИКИ (UI/UX PRO MAX) ================= */
        .stat-header-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        .stat-refresh-btn {
            background: var(--muted);
            border: 1px solid var(--border-color);
            color: var(--muted-foreground);
            width: 32px;
            height: 32px;
            border-radius: var(--radius-md);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast), background-color var(--duration-fast);
            -webkit-tap-highlight-color: transparent;
            padding: 0;
            flex-shrink: 0;
            position: relative;
        }
        .stat-refresh-btn::after, .stat-reset-btn::after {
            content: '';
            position: absolute;
            inset: -6px;
        }
        .stat-refresh-btn:hover {
            color: var(--accent-color);
            border-color: var(--accent-color);
            background: var(--accent-soft);
        }
        .stat-refresh-btn:active {
            transform: scale(0.90);
        }
        .stat-refresh-btn.spinning svg {
            animation: spin 0.65s linear infinite;
        }
        .stat-reset-btn {
            background: var(--muted);
            border: 1px solid var(--border-color);
            color: var(--muted-foreground);
            width: 32px;
            height: 32px;
            border-radius: var(--radius-md);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast), background-color var(--duration-fast);
            -webkit-tap-highlight-color: transparent;
            padding: 0;
            flex-shrink: 0;
            position: relative;
        }
        .stat-reset-btn:hover {
            color: var(--destructive, #ef4444);
            border-color: var(--destructive, #ef4444);
            background: rgba(239, 68, 68, 0.12);
        }
        .stat-reset-btn:active {
            transform: scale(0.90);
        }

        .stat-finance-pulse-card {
            background: rgba(20, 19, 23, 1) !important;
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 24px;
            padding: 13px 16px 15px 16px;
            margin-bottom: 12px;
            font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
            box-shadow: none;
        }
        body.theme-dark .stat-finance-pulse-card {
            background: rgba(20, 19, 23, 1) !important;
            border-color: rgba(255, 255, 255, 0.06);
        }
        .stat-fp-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: -2px;
            margin-bottom: 14px;
        }
        .stat-fp-tag {
            display: inline-flex;
            align-items: baseline;
            gap: 6px;
        }
        .stat-fp-trend-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            align-self: center;
        }
        .stat-fp-trend-icon svg {
            width: 18px;
            height: 18px;
            stroke-width: 2.2;
        }
        .stat-fp-title {
            font-size: 18px;
            font-weight: 700;
            color: #ffffff;
            line-height: 1.2;
        }
        .stat-fp-period {
            font-size: 11px;
            font-weight: 500;
            color: var(--muted-foreground);
            margin-left: 4px;
        }
        .stat-privacy-toggle-btn {
            background: transparent;
            border: none;
            color: var(--muted-foreground);
            cursor: pointer;
            padding: 4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            transition: color 0.15s, opacity 0.15s;
            -webkit-tap-highlight-color: transparent;
        }
        .stat-privacy-toggle-btn:hover {
            color: #ffffff;
        }
        .stat-privacy-toggle-btn:active {
            opacity: 0.7;
            transform: scale(0.95);
        }
        .stat-fp-month {
            font-size: 12px;
            font-weight: 600;
            color: var(--muted-foreground);
        }
        .stat-fp-main {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            align-items: flex-start;
            width: 100%;
        }
        .stat-fp-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .stat-fp-item:nth-child(1) {
            align-items: flex-start;
            text-align: left;
        }
        .stat-fp-item:nth-child(2) {
            align-items: center;
            text-align: center;
        }
        .stat-fp-item:nth-child(3) {
            align-items: flex-end;
            text-align: right;
        }
        .stat-fp-label {
            font-size: 11px;
            font-weight: 500;
            color: var(--muted-foreground);
        }
        .stat-fp-value {
            font-size: 21px;
            font-weight: 700;
            letter-spacing: -0.3px;
            font-variant-numeric: tabular-nums;
            white-space: nowrap;
            color: #ffffff;
            line-height: 1.25;
            transition: color 0.2s ease, text-shadow 0.2s ease;
        }
        .stat-val-blurred {
            color: transparent !important;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.7) !important;
            filter: none !important;
            -webkit-filter: none !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            pointer-events: none;
        }
        body:not(.theme-dark) .stat-val-blurred {
            color: transparent !important;
            text-shadow: 0 0 10px rgba(10, 10, 11, 0.6) !important;
        }
        .stat-fp-sub {
            font-size: 10px;
            color: var(--muted-foreground);
            font-weight: 500;
        }
        .stat-fp-divider {
            display: none;
        }
        .text-emerald { color: #10b981 !important; }
        .text-amber { color: #f59e0b !important; }
        .text-blue { color: #3b82f6 !important; }
        body.theme-dark .text-emerald { color: #34d399 !important; }
        body.theme-dark .text-amber { color: #fbbf24 !important; }
        body.theme-dark .text-blue { color: #60a5fa !important; }

        /* KPI Grid 3x2 */
        .stat-kpi-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 12px;
        }
        .stat-modern-tile {
            background: rgba(20, 19, 23, 1) !important;
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 20px;
            padding: 14px 14px 12px;
            display: flex;
            flex-direction: column;
            font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
            box-shadow: none;
            transition: transform var(--duration-fast);
        }
        body.theme-dark .stat-modern-tile {
            background: rgba(20, 19, 23, 1) !important;
            border-color: rgba(255, 255, 255, 0.06);
        }
        .stat-tile-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 6px;
            margin-bottom: 10px;
            width: 100%;
            position: relative;
        }
        .stat-tile-left-header {
            display: flex;
            align-items: center;
            gap: 6px;
            min-width: 0;
            flex: 1;
        }
        .stat-tile-icon-box {
            width: 16px;
            height: 16px;
            border-radius: 0;
            background: transparent !important;
            color: #ffffff !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .stat-tile-icon-box svg {
            width: 15px;
            height: 15px;
            color: #ffffff;
            stroke: #ffffff;
        }
        .stat-tile-title {
            font-size: 12px;
            font-weight: 500;
            color: #ffffff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.2;
        }
        .stat-tile-micro-index {
            font-size: 9px;
            font-weight: 600;
            color: var(--muted-foreground);
            white-space: nowrap;
            flex-shrink: 0;
            position: absolute;
            top: 0;
            right: 0;
        }
        .stat-icon-blue,
        .stat-icon-purple,
        .stat-icon-amber,
        .stat-icon-emerald,
        .stat-icon-cyan,
        .stat-icon-slate {
            background: transparent !important;
            color: #ffffff !important;
        }

        .stat-tile-badge {
            font-size: 10px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 9999px;
            background: var(--muted);
            color: var(--muted-foreground);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .stat-tile-val {
            font-size: 20px;
            font-weight: 700;
            color: #ffffff;
            font-variant-numeric: tabular-nums;
            margin-bottom: 3px;
            line-height: 1.2;
            letter-spacing: -0.3px;
            text-align: center;
            width: 100%;
        }
        .stat-tile-lbl {
            font-size: 12px;
            font-weight: 600;
            color: #ffffff;
            line-height: 1.25;
            text-align: center;
            width: 100%;
        }
        .stat-tile-sub {
            font-size: 10.5px;
            color: var(--muted-foreground);
            line-height: 1.2;
            margin-top: 1px;
            font-weight: 400;
            text-align: center;
            width: 100%;
        }

        /* Визуальный график недели */
        .stat-weekly-chart-card {
            padding: 14px 16px;
            margin-bottom: 12px;
        }
        .stat-chart-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        .stat-chart-title {
            font-size: 13.5px;
            font-weight: 700;
            color: var(--foreground);
        }
        .stat-chart-sub {
            font-size: 11px;
            color: var(--hint-color);
            margin-top: 1px;
        }
        .stat-chart-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 8px;
            background: rgba(245, 158, 11, 0.12);
            color: #d97706;
            border-radius: 9999px;
            font-size: 11px;
            font-weight: 700;
        }
        body.theme-dark .stat-chart-badge {
            background: rgba(245, 158, 11, 0.18);
            color: #fbbf24;
        }
        .stat-graph-wrapper {
            position: relative;
            width: 100%;
            margin-top: 10px;
        }
        .stat-svg-chart {
            width: 100%;
            height: 120px;
            overflow: visible;
            display: block;
        }
        .stat-graph-area {
            fill: url(#stat-chart-gradient);
            transition: d 0.4s var(--ease-spring);
        }
        .stat-graph-line {
            fill: none;
            stroke: var(--accent-color);
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            filter: drop-shadow(0 4px 6px rgba(59, 130, 246, 0.25));
            transition: d 0.4s var(--ease-spring);
        }
        body.theme-dark .stat-graph-line {
            stroke: #60a5fa;
            filter: drop-shadow(0 4px 10px rgba(96, 165, 250, 0.35));
        }
        .stat-graph-point {
            fill: var(--card);
            stroke: var(--accent-color);
            stroke-width: 2.2;
            cursor: pointer;
            transition: r 0.15s, fill 0.15s;
        }
        body.theme-dark .stat-graph-point {
            fill: #18181b;
            stroke: #60a5fa;
        }
        .stat-graph-point.is-busiest {
            stroke: #f59e0b;
            fill: #f59e0b;
        }
        .stat-graph-point.is-today {
            stroke: var(--accent-color);
            r: 4.5;
        }
        .stat-graph-value-text {
            font-size: 10.5px;
            font-weight: 700;
            fill: var(--muted-foreground);
            font-variant-numeric: tabular-nums;
            text-anchor: middle;
            user-select: none;
        }
        .stat-graph-value-text.is-busiest {
            fill: #f59e0b;
            font-weight: 800;
        }
        .stat-graph-axis {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
            margin-top: 6px;
            padding-top: 4px;
            border-top: 1px solid var(--border-color);
        }
        .stat-graph-day {
            text-align: center;
            font-size: 11px;
            font-weight: 600;
            color: var(--hint-color);
            text-transform: uppercase;
        }
        .stat-graph-day.is-today {
            color: var(--accent-color);
            font-weight: 800;
        }
        .stat-graph-day.is-busiest {
            color: #d97706;
        }
        body.theme-dark .stat-graph-day.is-busiest {
            color: #fbbf24;
        }

        /* Donut / Pie Chart для переносов уроков (UI/UX Pro Max) */
        .stat-reschedule-card {
            background-color: var(--card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-xl);
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: var(--shadow-sm);
        }
        .stat-rc-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }
        .stat-rc-title-box {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .stat-rc-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-md);
            background: rgba(245, 158, 11, 0.12);
            color: #d97706;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        body.theme-dark .stat-rc-icon {
            color: #fbbf24;
            background: rgba(245, 158, 11, 0.18);
        }
        .stat-rc-title {
            font-size: 13.5px;
            font-weight: 700;
            color: var(--foreground);
            line-height: 1.2;
        }
        .stat-rc-sub {
            font-size: 11px;
            color: var(--hint-color);
            font-weight: 500;
            margin-top: 1px;
        }
        .stat-rc-badge {
            font-size: 11px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: var(--radius-full);
            background: rgba(245, 158, 11, 0.12);
            color: #d97706;
            white-space: nowrap;
        }
        body.theme-dark .stat-rc-badge {
            color: #fbbf24;
            background: rgba(245, 158, 11, 0.18);
        }
        .stat-rc-body {
            display: flex;
            align-items: center;
            gap: 18px;
        }
        .stat-donut-wrapper {
            position: relative;
            width: 104px;
            height: 104px;
            flex-shrink: 0;
        }
        .stat-donut-svg {
            width: 100%;
            height: 100%;
            transform: rotate(-90deg);
        }
        .stat-donut-bg {
            fill: none;
            stroke: var(--muted);
            stroke-width: 12;
        }
        body.theme-dark .stat-donut-bg {
            stroke: rgba(255, 255, 255, 0.08);
        }
        .stat-donut-segment {
            fill: none;
            stroke-width: 12;
            transition: stroke-dasharray 0.5s var(--ease-out), stroke-dashoffset 0.5s var(--ease-out);
        }
        .stat-donut-emerald {
            stroke: #10b981;
        }
        .stat-donut-amber {
            stroke: #f59e0b;
        }
        .stat-donut-center {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            pointer-events: none;
        }
        .stat-donut-center-val {
            font-size: 18px;
            font-weight: 800;
            line-height: 1;
            letter-spacing: -0.5px;
            font-variant-numeric: tabular-nums;
            color: var(--foreground);
        }
        .stat-donut-center-lbl {
            font-size: 9.5px;
            color: var(--hint-color);
            font-weight: 600;
            margin-top: 2px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        .stat-rc-legend {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .stat-rc-legend-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
        }
        .stat-rc-legend-top {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .stat-rc-legend-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .stat-rc-legend-dot.bg-emerald {
            background-color: #10b981;
        }
        .stat-rc-legend-dot.bg-amber {
            background-color: #f59e0b;
        }
        .stat-rc-legend-name {
            font-weight: 500;
            color: var(--muted-foreground);
        }
        .stat-rc-legend-val {
            display: inline-flex;
            align-items: baseline;
            gap: 4px;
        }
        .stat-rc-legend-pct {
            font-size: 11px;
            color: var(--hint-color);
            font-weight: 500;
        }
        .stat-rc-total-bar {
            margin-top: 4px;
            padding-top: 6px;
            border-top: 1px dashed var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 11px;
            color: var(--hint-color);
        }
        .stat-rc-total-bar b {
            color: var(--foreground);
            font-size: 12px;
        }

        /* Совместимость со старыми карточками */
        .stat-grid-2 {
            display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;
        }
        .stat-big-card {
            background: var(--card-bg); border-radius: var(--card-radius); padding: 14px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04); display: flex;
            flex-direction: column; justify-content: space-between;
            border: 1px solid var(--border-color);
        }
        .stat-big-card .val {
            font-size: 22px; font-weight: 800; color: var(--accent-color);
            margin: 4px 0 2px 0;
        }
        .stat-big-card .sub {
            font-size: 11px; color: var(--hint-color); font-weight: 500;
        }
        .stat-big-card .lbl {
            font-size: 12px; font-weight: 600; color: var(--text-color);
        }
        .excel-period-selector {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 6px;
            margin-top: 12px;
            margin-bottom: 12px;
            background: var(--muted);
            padding: 4px;
            border-radius: var(--radius-md);
            border: 1px solid var(--border-color);
        }
        .period-btn {
            background: transparent;
            border: none;
            color: var(--muted-foreground);
            padding: 8px 4px;
            border-radius: var(--radius-sm);
            font-size: var(--text-xs);
            font-weight: 600;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
            -webkit-tap-highlight-color: transparent;
        }
        .period-btn svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            stroke-width: 2;
            transition: transform var(--duration-fast);
        }
        .period-btn:active {
            transform: scale(0.95);
        }
        .period-btn.active {
            background: var(--card);
            color: var(--accent-color);
            box-shadow: var(--shadow-sm);
        }
        body.theme-dark .period-btn.active {
            background: var(--card);
            color: #60a5fa;
            box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        .export-btn-group {
            display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
        }

        /* ================= 3D AURORA ИНТЕРАКТИВНАЯ ВИЗИТКА ================= */
        #guest-card-view {
            display: none;
            padding: 16px 12px 32px 12px;
            perspective: 1200px;
        }

        .aurora-viewport {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: calc(85vh - 70px);
            width: 100%;
            box-sizing: border-box;
        }

        .card-3d-scene {
            width: 100%;
            max-width: 360px;
            perspective: 1200px;
            margin: 0 auto;
            position: relative;
        }

        .card-3d-flipper {
            position: relative;
            width: 100%;
            aspect-ratio: 1.58 / 1;
            min-height: 228px;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            transform: rotateY(0deg);
            will-change: transform;
            user-select: none;
            -webkit-user-select: none;
        }

        .card-3d-flipper.is-flipped {
            transform: rotateY(-180deg);
        }

        /* Полная непрозрачность и премиальный темный монохром */
        .card-face {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border-radius: 26px;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            overflow: hidden;
            padding: 24px 26px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;
            background-color: #0e1015 !important;
            background: radial-gradient(circle at 85% 15%, #181b22 0%, #0e1015 70%, #0a0c0f 100%) !important;
            opacity: 1;
        }

        .card-face-front {
            transform: rotateY(0deg) translateZ(1px);
            -webkit-transform: rotateY(0deg) translateZ(1px);
            z-index: 2;
            transition: opacity 0.2s ease 0.12s, visibility 0s 0.12s;
        }

        .card-face-back {
            transform: rotateY(-180deg) translateZ(1px);
            -webkit-transform: rotateY(-180deg) translateZ(1px);
            z-index: 1;
            transition: opacity 0.2s ease 0.12s, visibility 0s 0.12s;
        }

        /* 100% устранение просвечивания лицевой стороны сзади */
        .card-3d-flipper:not(.is-flipped) .card-face-back {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .card-3d-flipper:not(.is-flipped) .card-face-front {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            z-index: 5;
        }

        .card-3d-flipper.is-flipped .card-face-front {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .card-3d-flipper.is-flipped .card-face-back {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            z-index: 5;
        }

        .card-glare {
            display: none !important;
        }

        /* ================= REFERENCE DESIGN: FRONT FACE ================= */
        .card-ref-header {
            display: flex;
            align-items: center;
            gap: 16px;
            z-index: 3;
        }

        .card-ref-avatar-box {
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: #2a2e39;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }

        .card-ref-avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .card-ref-avatar-fallback {
            color: #f1f5f9;
            font-size: 22px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            text-transform: uppercase;
        }

        .card-ref-meta {
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-width: 0;
        }

        .card-ref-pretitle {
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 1.5px;
            color: #8b92a2;
            text-transform: uppercase;
            margin-bottom: 3px;
        }

        .card-ref-name {
            margin: 0 0 3px 0;
            font-size: 19px;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: -0.2px;
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .card-ref-subjects {
            margin: 0;
            font-size: 12.5px;
            font-weight: 400;
            color: #8b92a2;
            line-height: 1.35;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* FRONT FOOTER */
        .card-ref-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            z-index: 3;
        }

        .card-ref-brand {
            display: flex;
            align-items: center;
            gap: 6px;
            user-select: none;
        }

        .card-ref-brand-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: #8e95a5;
        }

        .card-ref-brand-text {
            font-size: 10.5px;
            font-weight: 700;
            letter-spacing: 1.4px;
            color: #f1f5f9;
            text-transform: uppercase;
        }

        .card-ref-arrow-btn {
            background: transparent;
            border: none;
            padding: 6px;
            margin: -6px;
            color: #d1d5db;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s;
            opacity: 0.85;
            -webkit-tap-highlight-color: transparent;
        }

        .card-ref-arrow-btn:hover {
            opacity: 1;
            color: #ffffff;
            transform: scale(1.12);
        }

        .card-ref-arrow-btn:active {
            transform: scale(0.92);
        }

        /* ================= REFERENCE DESIGN: BACK FACE ================= */
        .card-ref-bio-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            width: 100%;
            text-align: center;
            padding: 16px 20px;
            box-sizing: border-box;
            z-index: 3;
        }

        .card-ref-bio-text {
            margin: auto;
            max-width: 290px;
            text-align: center;
            font-size: 13.5px;
            font-weight: 400;
            color: #f1f5f9;
            line-height: 1.5;
            letter-spacing: 0.1px;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            opacity: 0;
            transform: translateY(6px);
            transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.16s,
                        transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.16s;
        }

        .card-3d-flipper.is-flipped .card-ref-bio-text {
            opacity: 1;
            transform: translateY(0);
        }

        .card-ref-back-footer {
            display: grid;
            grid-template-columns: 32px 1fr 32px;
            align-items: center;
            width: 100%;
            z-index: 3;
        }

        .card-ref-back-footer .back-arrow {
            grid-column: 1;
            justify-self: start;
            opacity: 0;
            transform: translateX(-4px);
            transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.18s,
                        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;
        }

        .card-3d-flipper.is-flipped .card-ref-back-footer .back-arrow {
            opacity: 0.85;
            transform: translateX(0);
        }

        .card-ref-cta-container {
            grid-column: 2;
            display: flex;
            justify-content: center;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.22s,
                        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.22s;
        }

        .card-3d-flipper.is-flipped .card-ref-cta-container {
            opacity: 1;
            transform: translateY(0);
        }

        /* СТИЛЬНАЯ СВЕТЛАЯ ПИЛЛ-КНОПКА С ТАКТИЛЬНОЙ ПРУЖИНОЙ */
        .card-ref-enroll-btn {
            background: #d8dde6;
            color: #11141a !important;
            border: none;
            padding: 11px 32px;
            border-radius: 9999px;
            font-size: 14.5px;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
            transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                        background 0.2s ease,
                        box-shadow 0.22s ease;
            letter-spacing: 0.2px;
            -webkit-tap-highlight-color: transparent;
        }

        .card-ref-enroll-btn:hover {
            background: #ffffff;
            transform: translateY(-1.5px) scale(1.02);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
        }

        .card-ref-enroll-btn:active {
            transform: scale(0.93) translateY(1px);
            background: #cbd2df;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
        }

        .card-ref-enroll-btn.is-loading {
            opacity: 0.7;
            pointer-events: none;
        }

        .aurora-hint-bar {
            display: none !important;
        }


        /* Переключатели тем и стилей */
        .pill-group {
            display: flex; gap: 6px; background: var(--bg-color); padding: 4px; border-radius: 10px;
        }
        .pill-option {
            flex: 1; text-align: center; padding: 7px 0; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 8px; color: var(--hint-color); transition: 0.15s;
        }
        .pill-option.active {
            background: var(--card-bg); color: var(--text-color); box-shadow: 0 2px 6px rgba(0,0,0,0.08);
        }

        /* ================= ЭКРАН ЗАГРУЗКИ: CODEFRONTS SHIMMER SKELETON ================= */
        #loading-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: var(--bg-color, #09090b);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            padding-top: 100px;
            padding-bottom: calc(70px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
            padding-left: 14px;
            padding-right: 14px;
            box-sizing: border-box;
            overflow: hidden;  
            opacity: 1;
            transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
        }
        #loading-overlay.hidden {
            opacity: 0;
            transform: scale(0.99);
            pointer-events: none;
        }

        /* Универсальный шиммер-эффект со световой волной */
        .sk-box {
            position: relative;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.05);
            border-radius: var(--radius-sm, 8px);
        }
        body.theme-dark .sk-box {
            background: rgba(255, 255, 255, 0.05);
        }
        .sk-box::after {
            content: '';
            position: absolute;
            inset: 0;
            transform: translateX(-100%);
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.07) 50%,
                transparent 100%
            );
            animation: shimmerSweep 1.6s infinite ease-in-out;
        }
        body.theme-dark .sk-box::after {
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(255, 255, 255, 0.1) 50%,
                transparent 100%
            );
        }
        @keyframes shimmerSweep {
            100% {
                transform: translateX(100%);
            }
        }

        .sk-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 2px 12px;
            margin-bottom: 8px;
        }
        .sk-header-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .sk-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
        }
        .sk-header-titles {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .sk-title {
            width: 100px;
            height: 16px;
            border-radius: 6px;
        }
        .sk-badge {
            width: 55px;
            height: 12px;
            border-radius: 99px;
        }
        .sk-header-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .sk-pill-small {
            width: 48px;
            height: 28px;
            border-radius: 99px;
        }
        .sk-circle-small {
            width: 32px;
            height: 32px;
            border-radius: 50%;
        }

        .sk-calendar-strip {
            display: flex;
            gap: 6px;
            margin-bottom: 14px;
            overflow: hidden;
        }
        .sk-day-pill {
            flex: 1;
            height: 58px;
            border-radius: var(--radius-md, 12px);
        }
        .sk-day-pill.active {
            background: rgba(59, 130, 246, 0.15);
        }

        .sk-banner-wrap {
            margin-bottom: 14px;
        }
        .sk-banner {
            width: 100%;
            height: 42px;
            border-radius: var(--radius-lg, 16px);
        }

        .sk-slots-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex: 1;
        }
        .sk-slot-card {
            background: var(--card-bg, #ffffff);
            border: 1px solid var(--border-color, rgba(0,0,0,0.06));
            border-radius: var(--radius-lg, 16px);
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        body.theme-dark .sk-slot-card {
            background: #14161b;
            border-color: rgba(255, 255, 255, 0.06);
        }
        .sk-slot-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .sk-time-pill {
            width: 75px;
            height: 14px;
            border-radius: 4px;
        }
        .sk-status-pill {
            width: 60px;
            height: 18px;
            border-radius: 99px;
        }
        .sk-slot-main {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .sk-circle-md {
            width: 36px;
            height: 36px;
            border-radius: 50%;
        }
        .sk-slot-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        .sk-line-name {
            width: 60%;
            height: 14px;
            border-radius: 4px;
        }
        .sk-line-sub {
            width: 40%;
            height: 11px;
            border-radius: 4px;
        }
        .sk-slot-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 4px;
            border-top: 1px solid rgba(255,255,255,0.04);
        }
        .sk-line-micro {
            width: 80px;
            height: 10px;
            border-radius: 4px;
        }
        .sk-line-price {
            width: 50px;
            height: 12px;
            border-radius: 4px;
        }

        .sk-bottom-nav {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background: var(--card-bg, #ffffff);
            border-top: 1px solid var(--border-color, rgba(0,0,0,0.08));
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;
        }
        body.theme-dark .sk-bottom-nav {
            background: #111317;
            border-color: rgba(255, 255, 255, 0.06);
        }
        .sk-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        .sk-nav-icon {
            width: 22px;
            height: 22px;
            border-radius: 6px;
        }
        .sk-nav-text {
            width: 32px;
            height: 8px;
            border-radius: 4px;
        }

        /* ================= ПУЛЬСИРУЮЩИЕ ИНДИКАТОРЫ СТАТУСА (CODEFRONTS BADGES) ================= */
        .status-dot-pulse {
            width: 6.5px;
            height: 6.5px;
            border-radius: 50%;
            background-color: currentColor;
            display: inline-block;
            position: relative;
            flex-shrink: 0;
            margin-right: 3px;
        }
        .status-dot-pulse::after {
            content: '';
            position: absolute;
            inset: -3.5px;
            border-radius: 50%;
            border: 1.5px solid currentColor;
            opacity: 0.6;
            animation: pulseDotRing 2.2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
        }
        @keyframes pulseDotRing {
            0% { transform: scale(0.65); opacity: 0.8; }
            70% { transform: scale(1.65); opacity: 0; }
            100% { transform: scale(1.8); opacity: 0; }
        }

        /* ================= ПРУЖИНЯЩАЯ ТАКТИЛЬНАЯ ФИЗИКА (CODEFRONTS MOTION) ================= */
        .action-btn, 
        .hw-action-btn, 
        .slot, 
        .cal-day, 
        .hw-filter-btn, 
        .grp-review-tab-btn, 
        .bottom-nav-item,
        .btn-micro {
            transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                        background-color 0.15s ease,
                        border-color 0.15s ease,
                        box-shadow 0.2s ease,
                        color 0.15s ease !important;
            -webkit-tap-highlight-color: transparent;
        }
        .action-btn:active, 
        .hw-action-btn:active, 
        .slot:active, 
        .cal-day:active, 
        .grp-review-tab-btn:active,
        .btn-micro:active {
            transform: scale(0.96) !important;
        }
        .bottom-nav-item:active {
            transform: scale(0.92) !important;
        }

        /* Градиентные полосы прогресса */
        .grp-hw-progress-bar.checked {
            background: linear-gradient(90deg, #10b981, #06b6d4) !important;
        }
        .grp-hw-progress-bar.pending {
            background: linear-gradient(90deg, #3b82f6, #6366f1) !important;
        }

        /* ================= SEGMENTED CONTROL ================= */
        .segmented-control {
            display: flex;
            background: var(--muted);
            border-radius: var(--radius-md);
            padding: 3px;
            gap: 4px;
            width: 100%;
            box-sizing: border-box;
            border: 1px solid var(--border-color);
        }
        .segmented-btn {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            height: 38px;
            padding: 0 14px;
            font-size: 13.5px;
            font-weight: 500;
            color: var(--muted-foreground);
            background: transparent;
            border: none;
            border-radius: calc(var(--radius-md) - 2px);
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
            -webkit-tap-highlight-color: transparent;
            text-align: center;
            position: relative;
        }
        .segmented-btn .seg-icon {
            flex-shrink: 0;
            display: inline-block;
            vertical-align: middle;
            transition: transform var(--duration-fast) var(--ease-out);
        }
        .segmented-btn.active {
            background: var(--card);
            color: var(--accent-color);
            font-weight: 700;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            border: 1px solid var(--border-color);
        }
        .segmented-btn.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 18%;
            right: 18%;
            height: 2.5px;
            background: var(--accent-color);
            border-radius: 9999px;
            box-shadow: 0 0 8px var(--accent-color);
        }
        .segmented-btn.active .seg-icon {
            transform: scale(1.08);
            color: var(--accent-color);
        }

        /* ================= GROUP CARDS & CHIPS ================= */
        .group-card {
            background: var(--card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 14px;
            margin-bottom: 10px;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
        }
        .group-count-badge {
            font-size: 11px;
            font-weight: 600;
            padding: 2px 8px;
            border-radius: var(--radius-full);
            background: var(--accent-soft);
            color: var(--accent-color);
        }
        .group-students-chips-wrap {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 6px;
        }
        .group-student-chip {
            font-size: 11px;
            background: var(--muted);
            color: var(--foreground);
            padding: 2px 7px;
            border-radius: 6px;
            border: 1px solid var(--border-color);
        }

        /* ================= GROUP EDIT MULTISELECT ================= */
        .group-selected-badge {
            font-size: 11px;
            color: var(--muted-foreground);
            background: var(--muted);
            padding: 2px 8px;
            border-radius: var(--radius-full);
            font-weight: 500;
        }
        .group-students-select-box {
            max-height: 180px;
            overflow-y: auto;
            border: 1.5px solid var(--input-border);
            border-radius: var(--radius-md);
            background: var(--card);
            padding: 4px;
            margin-bottom: 12px;
        }
        .group-student-select-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 10px;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color var(--duration-fast);
        }
        .group-student-select-item:hover {
            background: var(--muted);
        }
        .group-student-select-item.selected {
            background: var(--accent-soft);
        }
        .group-st-checkbox {
            width: 17px;
            height: 17px;
            accent-color: var(--accent-color);
            cursor: pointer;
        }
        .group-st-check-icon {
            color: var(--accent-color);
        }

        /* ================= GROUP LESSON MODAL & SLOTS ================= */
        .grp-slot-time-banner {
            display: flex;
            align-items: center;
            gap: 8px;
            background: var(--accent-soft);
            color: var(--accent-color);
            padding: 10px 14px;
            border-radius: var(--radius-md);
            font-size: 14px;
            font-weight: 600;
            margin: 8px 0 14px 0;
        }
        .grp-slot-students-container {
            max-height: 260px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .grp-student-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            background: var(--card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            gap: 8px;
        }
        .grp-student-info {
            flex: 1;
            min-width: 0;
        }
        .grp-st-name {
            font-size: 13.5px;
            font-weight: 600;
            color: var(--foreground);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .grp-st-sub {
            font-size: 11px;
            color: var(--muted-foreground);
        }
        .grp-student-actions {
            display: flex;
            gap: 6px;
            align-items: center;
        }
        .grp-btn-pill {
            padding: 5px 9px;
            font-size: 11px;
            font-weight: 600;
            border-radius: var(--radius-full);
            border: 1px solid var(--border-color);
            background: var(--muted);
            color: var(--muted-foreground);
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
        }
        .grp-btn-pill.done {
            background: rgba(34, 197, 94, 0.12);
            border-color: rgba(34, 197, 94, 0.3);
            color: #16a34a;
        }
        .grp-btn-pill.paid {
            background: rgba(59, 130, 246, 0.12);
            border-color: rgba(59, 130, 246, 0.3);
            color: #2563eb;
        }
        .grp-btn-pill.debt {
            background: rgba(239, 68, 68, 0.1);
            border-color: rgba(239, 68, 68, 0.25);
            color: #ef4444;
        }
        .btn-micro {
            padding: 4px 8px;
            font-size: 11px;
            font-weight: 600;
            border-radius: 6px;
            background: var(--muted);
            color: var(--foreground);
            border: 1px solid var(--border-color);
            cursor: pointer;
            transition: background-color var(--duration-fast);
        }
        .btn-micro:hover {
            background: var(--border-color);
        }

        /* ================= GROUP HW REDESIGN: PROGRESS BAR & ACCORDION MODAL ================= */
        .grp-hw-progress-wrap {
            background: var(--muted);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 10px 12px;
            margin-bottom: 2px;
            box-sizing: border-box;
        }
        body.theme-dark .grp-hw-progress-wrap {
            background: #1a1d24;
            border-color: rgba(255, 255, 255, 0.08);
        }
        .grp-hw-progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 11.5px;
            margin-bottom: 7px;
            color: var(--muted-foreground);
        }
        .grp-hw-progress-text b {
            color: var(--foreground);
            font-weight: 600;
        }
        .grp-hw-progress-pct {
            font-weight: 700;
            color: var(--success-color);
            font-size: 12px;
        }
        .grp-hw-progress-track {
            width: 100%;
            height: 6px;
            background: var(--border-color);
            border-radius: var(--radius-full);
            overflow: hidden;
            display: flex;
        }
        body.theme-dark .grp-hw-progress-track {
            background: rgba(255, 255, 255, 0.1);
        }
        .grp-hw-progress-bar {
            height: 100%;
            transition: width 0.3s var(--ease-out);
        }
        .grp-hw-progress-bar.checked {
            background: var(--success-color);
        }
        .grp-hw-progress-bar.pending {
            background: var(--accent-color);
        }

        /* Unified Bottom Sheet Modal */
        .grp-review-modal {
            max-height: 88vh !important;
            padding: 0 !important;
            display: none;
            flex-direction: column;
            border-top-left-radius: 24px !important;
            border-top-right-radius: 24px !important;
            overflow: hidden !important;
        }
        body.theme-dark .grp-review-modal {
            background: #14161b !important;
            border-top: 1px solid rgba(255, 255, 255, 0.12);
        }
        .grp-review-modal-header {
            padding: 16px 16px 12px 16px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            flex-shrink: 0;
            background: var(--card);
        }
        body.theme-dark .grp-review-modal-header {
            background: #16181d;
            border-bottom-color: rgba(255, 255, 255, 0.08);
        }
        .grp-review-title-wrap {
            min-width: 0;
            flex: 1;
        }
        .grp-review-modal-title {
            margin: 0;
            font-size: 16.5px;
            font-weight: 700;
            color: var(--foreground);
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .grp-review-modal-sub {
            font-size: 11.5px;
            color: var(--muted-foreground);
            margin-top: 3px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* Segmented Tabs */
        .grp-review-tabs {
            padding: 10px 14px;
            background: var(--background);
            border-bottom: 1px solid var(--border-color);
            flex-shrink: 0;
            display: flex;
            gap: 6px;
        }
        body.theme-dark .grp-review-tabs {
            background: #111317;
            border-bottom-color: rgba(255, 255, 255, 0.08);
        }
        .grp-review-tab-btn {
            flex: 1;
            padding: 7px 10px;
            font-size: 12px;
            font-weight: 600;
            border-radius: var(--radius-md);
            border: 1px solid transparent;
            background: transparent;
            color: var(--muted-foreground);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: all var(--duration-fast) var(--ease-out);
        }
        .grp-review-tab-btn.active {
            background: var(--card);
            color: var(--foreground);
            border-color: var(--border-color);
            box-shadow: var(--shadow-xs);
        }
        body.theme-dark .grp-review-tab-btn.active {
            background: #1a1d24;
            color: #fff;
            border-color: rgba(255, 255, 255, 0.12);
        }
        .grp-tab-badge {
            font-size: 10px;
            font-weight: 700;
            padding: 1px 6px;
            border-radius: var(--radius-full);
            background: var(--muted);
            color: var(--muted-foreground);
        }
        .grp-review-tab-btn.active .grp-tab-badge {
            background: var(--accent-soft);
            color: var(--accent-color);
        }

        /* Scrollable List */
        .grp-review-list {
            flex: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 12px 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        /* Accordion item */
        .grp-review-item {
            background: var(--card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            overflow: hidden;
            transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
        }
        body.theme-dark .grp-review-item {
            background: #1a1d24;
            border-color: rgba(255, 255, 255, 0.08);
        }
        .grp-review-header {
            padding: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .grp-review-header:hover {
            background: rgba(0, 0, 0, 0.015);
        }
        body.theme-dark .grp-review-header:hover {
            background: rgba(255, 255, 255, 0.02);
        }
        .grp-review-student-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
            flex: 1;
        }
        .grp-review-avatar {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-full);
            background: linear-gradient(135deg, var(--accent-color), #6366f1);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .grp-review-student-name {
            font-size: 13.5px;
            font-weight: 600;
            color: var(--foreground);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .grp-review-student-sub {
            font-size: 11px;
            color: var(--muted-foreground);
        }
        .grp-review-header-right {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        .grp-review-status-pill {
            font-size: 11px;
            font-weight: 600;
            padding: 2.5px 8px;
            border-radius: var(--radius-full);
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .grp-review-status-pill.unsubmitted {
            background: var(--muted);
            color: var(--muted-foreground);
            border: 1px solid var(--border-color);
        }
        .grp-review-status-pill.submitted {
            background: rgba(59, 130, 246, 0.12);
            color: var(--accent-color);
            border: 1px solid rgba(59, 130, 246, 0.25);
        }
        .grp-review-status-pill.checked {
            background: rgba(34, 197, 94, 0.12);
            color: var(--success-color);
            border: 1px solid rgba(34, 197, 94, 0.25);
        }
        .grp-review-status-pill.revision {
            background: rgba(245, 158, 11, 0.12);
            color: var(--warning-color);
            border: 1px solid rgba(245, 158, 11, 0.25);
        }
        .grp-review-chevron {
            color: var(--muted-foreground);
            transition: transform 0.25s var(--ease-out);
            flex-shrink: 0;
        }
        .grp-review-item.expanded .grp-review-chevron {
            transform: rotate(180deg);
        }

        /* Accordion Body */
        .grp-review-body {
            display: grid;
            grid-template-rows: 0fr;
            overflow: hidden;
            transition: grid-template-rows 0.25s var(--ease-out);
        }
        .grp-review-item.expanded .grp-review-body {
            grid-template-rows: 1fr;
        }
        .grp-review-inner {
            min-height: 0;
            overflow: hidden;
            padding: 0 14px 14px 14px;
            border-top: 1px solid transparent;
            transition: border-color var(--duration-fast);
        }
        .grp-review-item.expanded .grp-review-inner {
            border-top-color: var(--border-color);
        }
        body.theme-dark .grp-review-item.expanded .grp-review-inner {
            border-top-color: rgba(255, 255, 255, 0.06);
            background: #16181d;
        }
        .grp-review-solution-box {
            background: var(--muted);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 10px 12px;
            margin-top: 10px;
            font-size: 13px;
            line-height: 1.45;
            color: var(--foreground);
        }
        body.theme-dark .grp-review-solution-box {
            background: rgba(0, 0, 0, 0.25);
            border-color: rgba(255, 255, 255, 0.08);
        }
        .grp-review-grade-section {
            margin-top: 10px;
        }
        .grp-review-actions-row {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }

        /* Fixed Footer */
        .grp-review-footer {
            padding: 12px 14px calc(12px + env(safe-area-inset-bottom)) 14px;
            border-top: 1px solid var(--border-color);
            background: var(--card);
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        body.theme-dark .grp-review-footer {
            background: #16181d;
            border-top-color: rgba(255, 255, 255, 0.08);
        }

        /* ========================================================
           SUPPORT MODAL UI/UX PRO REDESIGN
           ======================================================== */
        .modal-support-sheet {
            max-width: 500px;
            width: 100%;
            margin: 0 auto;
            left: 0;
            right: 0;
            max-height: 90vh;
            padding: 0;
            border-radius: 24px 24px 0 0;
            border: 1px solid var(--border-color);
            border-bottom: none;
            background: var(--background);
            box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.16);
            overflow-y: auto;
            overflow-x: hidden;
            box-sizing: border-box;
        }
        .modal-support-sheet::before {
            margin: 10px auto 4px auto;
        }
        .support-modal-header {
            position: sticky;
            top: 0;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 18px;
            border-bottom: 1px solid var(--border-color);
            background: var(--card);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-sizing: border-box;
            width: 100%;
        }
        .support-header-left {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 0;
        }
        .support-icon-badge {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(59, 130, 246, 0.12);
            color: var(--accent-color);
            flex-shrink: 0;
            position: relative;
        }
        .support-pulse-dot {
            position: absolute;
            top: -2px;
            right: -2px;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #22c55e;
            box-shadow: 0 0 0 2px var(--card);
        }
        .support-pulse-dot::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            border-radius: 50%;
            background: #22c55e;
            opacity: 0.6;
            animation: supportPulse 2s infinite ease-out;
        }
        @keyframes supportPulse {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(2.2); opacity: 0; }
        }
        .support-header-titles {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
        }
        .support-header-title-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .support-header-title {
            margin: 0;
            font-size: 16px;
            font-weight: 700;
            color: var(--foreground);
            line-height: 1.2;
        }
        .support-status-chip {
            font-size: 10px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 6px;
            background: rgba(34, 197, 94, 0.12);
            color: #16a34a;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }
        body.theme-dark .support-status-chip {
            color: #4ade80;
            background: rgba(34, 197, 94, 0.18);
        }
        .support-header-subtitle {
            margin: 0;
            font-size: 11.5px;
            color: var(--muted-foreground);
        }
        .support-modal-body {
            padding: 16px 18px 20px 18px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            box-sizing: border-box;
            width: 100%;
        }
        .support-tg-fast-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 14px;
            border-radius: var(--radius-lg);
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%);
            border: 1px solid rgba(59, 130, 246, 0.22);
            text-decoration: none;
            color: inherit;
            transition: all var(--duration-fast) var(--ease-out);
            cursor: pointer;
        }
        .support-tg-fast-card:hover {
            border-color: rgba(59, 130, 246, 0.4);
            transform: translateY(-1px);
            box-shadow: var(--shadow-sm);
        }
        .support-tg-fast-card:active {
            transform: scale(0.98);
        }
        .support-tg-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .support-tg-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: #2aabee;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(42, 171, 238, 0.35);
            flex-shrink: 0;
        }
        .support-tg-info-title {
            font-size: 13.5px;
            font-weight: 700;
            color: var(--foreground);
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .support-tg-info-sub {
            font-size: 11.5px;
            color: var(--muted-foreground);
        }
        .support-tg-badge {
            font-size: 11.5px;
            font-weight: 600;
            color: #2aabee;
            background: rgba(42, 171, 238, 0.12);
            padding: 4px 10px;
            border-radius: 8px;
            flex-shrink: 0;
        }
        .support-section-card {
            background: var(--card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            box-sizing: border-box;
            box-shadow: var(--shadow-xs);
        }
        .support-category-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }
        .support-chip {
            padding: 6px 11px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 500;
            border: 1px solid var(--border-color);
            background: var(--card);
            color: var(--foreground);
            cursor: pointer;
            transition: all var(--duration-fast) var(--ease-out);
            display: inline-flex;
            align-items: center;
            gap: 5px;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .support-chip:hover {
            border-color: var(--accent-color);
            background: var(--muted);
        }
        .support-chip:active {
            transform: scale(0.97);
        }
        .support-chip.active {
            background: var(--accent-color);
            color: var(--accent-foreground);
            border-color: var(--accent-color);
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
        }
        .support-field-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            font-weight: 600;
            color: var(--foreground);
            margin-bottom: 6px;
        }
        .support-counter {
            font-size: 11px;
            color: var(--muted-foreground);
            font-weight: 500;
        }
        .support-input {
            width: 100%;
            height: 42px;
            padding: 10px 12px;
            border-radius: var(--radius-md);
            border: 1px solid var(--input-border);
            background: var(--card);
            color: var(--foreground);
            font-size: 13.5px;
            box-sizing: border-box;
            outline: none;
            transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
        }
        .support-input:focus {
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px var(--ring);
        }
        .support-textarea {
            width: 100%;
            min-height: 90px;
            max-height: 200px;
            padding: 10px 12px;
            border-radius: var(--radius-md);
            border: 1px solid var(--input-border);
            background: var(--card);
            color: var(--foreground);
            font-size: 13.5px;
            line-height: 1.45;
            box-sizing: border-box;
            outline: none;
            resize: vertical;
            transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
        }
        .support-textarea:focus {
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px var(--ring);
        }
        .support-faq-item {
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--card);
            padding: 10px 12px;
            transition: all var(--duration-fast);
        }
        .support-faq-item[open] {
            border-color: rgba(59, 130, 246, 0.3);
            background: var(--card);
        }
        .support-faq-summary {
            font-size: 12.5px;
            font-weight: 600;
            color: var(--foreground);
            cursor: pointer;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            user-select: none;
        }
        .support-faq-summary::-webkit-details-marker {
            display: none;
        }
        .support-faq-icon {
            font-size: 10px;
            color: var(--muted-foreground);
            transition: transform var(--duration-fast);
        }
        .support-faq-item[open] .support-faq-icon {
            transform: rotate(180deg);
        }
        .support-faq-answer {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid var(--border-color);
            font-size: 11.5px;
            line-height: 1.5;
            color: var(--muted-foreground);
        }
        .support-modal-actions {
            margin-top: 6px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
            padding-bottom: calc(8px + env(safe-area-inset-bottom));
        }
        .support-meta-note {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            font-size: 11px;
            color: var(--muted-foreground);
        }

        /* ==========================================================================
           МОДАЛЬНОЕ ОКНО: ТАРИФЫ И ПОДПИСКИ (Subscription Modal & Slot Calculator)
           ========================================================================== */
        .modal-sub-sheet {
            max-height: 88vh;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        .sub-modal-main-title {
            margin: 0;
            font-size: 17px;
            font-weight: 700;
            color: var(--foreground);
        }
        .sub-segmented-tabs {
            margin: 0 0 16px 0;
            width: 100%;
        }
        .sub-tab-content {
            padding: 0 0 20px 0;
            display: flex;
            flex-direction: column;
            gap: 16px;
            box-sizing: border-box;
            width: 100%;
        }
        .sub-plans-period-section {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 6px;
        }
        .sub-calc-section-label {
            font-size: 11px;
            font-weight: 700;
            color: var(--muted-foreground);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 2px;
        }
        .sub-periods-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 8px;
            width: 100%;
        }
        .sub-period-chip {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 12px 4px 10px 4px;
            border-radius: var(--radius-md, 12px);
            background: var(--muted);
            border: 1.5px solid transparent;
            cursor: pointer;
            text-align: center;
            transition: all var(--duration-fast) var(--ease-out);
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            box-sizing: border-box;
        }
        body.theme-dark .sub-period-chip {
            background: #1c1c1e;
            border-color: rgba(255, 255, 255, 0.05);
        }
        .sub-period-chip:hover {
            border-color: rgba(59, 130, 246, 0.3);
        }
        .sub-period-chip.selected {
            background: var(--accent-soft);
            border-color: var(--accent-color);
        }
        body.theme-dark .sub-period-chip.selected {
            background: rgba(45, 212, 191, 0.12);
            border-color: #2dd4bf;
        }
        .sub-period-chip-name {
            font-size: 12px;
            font-weight: 600;
            color: var(--foreground);
            line-height: 1.2;
        }
        body.theme-dark .sub-period-chip-name {
            color: #ffffff;
        }
        .sub-period-chip.selected .sub-period-chip-name {
            color: var(--accent-color);
            font-weight: 700;
        }
        body.theme-dark .sub-period-chip.selected .sub-period-chip-name {
            color: #2dd4bf;
        }
        .sub-period-rate {
            font-size: 10px;
            color: var(--muted-foreground);
            margin-top: 3px;
            line-height: 1.1;
        }
        body.theme-dark .sub-period-rate {
            color: #a1a1aa;
        }
        .sub-period-chip.selected .sub-period-rate {
            color: var(--accent-color);
            opacity: 0.85;
        }
        body.theme-dark .sub-period-chip.selected .sub-period-rate {
            color: #2dd4bf;
            opacity: 0.85;
        }
        .sub-period-discount-badge {
            position: absolute;
            top: -8px;
            right: 2px;
            background: linear-gradient(135deg, #ef4444, #f97316);
            color: #ffffff;
            font-size: 9px;
            font-weight: 800;
            padding: 1.5px 5px;
            border-radius: 6px;
            letter-spacing: 0.2px;
            box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
        }

        /* Список карточек тарифов */
        .sub-plans-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
            width: 100%;
        }
        .sub-plan-card {
            position: relative;
            border-radius: var(--radius-xl, 20px);
            background: var(--card);
            border: 1.5px solid var(--border-color);
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            box-shadow: var(--shadow-xs);
            transition: all var(--duration-normal) var(--ease-out);
            box-sizing: border-box;
            width: 100%;
        }
        body.theme-dark .sub-plan-card {
            background: #1c1c1e;
            border-color: rgba(255, 255, 255, 0.06);
        }
        .sub-plan-badge-popular {
            position: absolute;
            top: -11px;
            right: 18px;
            background: linear-gradient(135deg, #a855f7, #ec4899);
            color: #ffffff;
            font-size: 10.5px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 3px 12px;
            border-radius: 9999px;
            box-shadow: 0 3px 10px rgba(168, 85, 247, 0.35);
        }
        .sub-plan-card.plan-pro {
            border-color: rgba(168, 85, 247, 0.45);
            background: linear-gradient(180deg, rgba(168, 85, 247, 0.08) 0%, var(--card) 45%);
            box-shadow: 0 0 24px rgba(168, 85, 247, 0.12);
        }
        body.theme-dark .sub-plan-card.plan-pro {
            background: linear-gradient(180deg, rgba(168, 85, 247, 0.12) 0%, #1c1c1e 45%);
        }
        .sub-plan-card.plan-plus {
            border-color: rgba(20, 184, 166, 0.4);
            background: linear-gradient(180deg, rgba(20, 184, 166, 0.06) 0%, var(--card) 45%);
        }
        body.theme-dark .sub-plan-card.plan-plus {
            background: linear-gradient(180deg, rgba(20, 184, 166, 0.1) 0%, #1c1c1e 45%);
        }
        .sub-plan-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px;
            width: 100%;
        }
        .sub-plan-title-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }
        .sub-plan-title {
            font-size: 20px;
            font-weight: 800;
            margin: 0;
            color: var(--foreground);
            line-height: 1.2;
        }
        body.theme-dark .sub-plan-title {
            color: #ffffff;
        }
        .sub-plan-tag {
            font-size: 10.5px;
            font-weight: 700;
            padding: 2.5px 8px;
            border-radius: 6px;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }
        .tag-free {
            background: var(--muted);
            color: var(--muted-foreground);
        }
        body.theme-dark .tag-free {
            background: rgba(255, 255, 255, 0.08);
            color: #a1a1aa;
        }
        .tag-plus {
            background: rgba(20, 184, 166, 0.15);
            color: #0d9488;
        }
        body.theme-dark .tag-plus {
            background: rgba(20, 184, 166, 0.22);
            color: #2dd4bf;
        }
        .tag-pro {
            background: rgba(168, 85, 247, 0.15);
            color: #9333ea;
        }
        body.theme-dark .tag-pro {
            background: rgba(168, 85, 247, 0.25);
            color: #c084fc;
        }
        .sub-plan-price-wrap {
            display: flex;
            align-items: baseline;
            gap: 4px;
            text-align: right;
        }
        .sub-plan-price {
            font-size: 20px;
            font-weight: 800;
            color: var(--foreground);
            font-variant-numeric: tabular-nums;
        }
        body.theme-dark .sub-plan-price {
            color: #ffffff;
        }
        .sub-plan-period {
            font-size: 11.5px;
            color: var(--muted-foreground);
        }
        body.theme-dark .sub-plan-period {
            color: #a1a1aa;
        }
        .sub-plan-features {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .sub-plan-feature-item {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            font-size: 13px;
            color: var(--foreground);
            line-height: 1.35;
        }
        body.theme-dark .sub-plan-feature-item {
            color: #e4e4e7;
        }
        .sub-plan-feature-icon {
            width: 17px;
            height: 17px;
            border-radius: 50%;
            background: rgba(34, 197, 94, 0.15);
            color: #16a34a;
            font-size: 10.5px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px;
        }
        body.theme-dark .sub-plan-feature-icon {
            color: #4ade80;
            background: rgba(34, 197, 94, 0.22);
        }
        .sub-plan-btn {
            width: 100%;
            height: 44px;
            border-radius: var(--radius-md, 12px);
            font-size: 14.5px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: 4px;
            transition: all var(--duration-fast) var(--ease-out);
            -webkit-tap-highlight-color: transparent;
        }
        .sub-plan-btn:active {
            transform: scale(0.98);
        }
        .btn-active-plan {
            background: var(--muted);
            color: var(--muted-foreground);
            cursor: default;
        }
        body.theme-dark .btn-active-plan {
            background: rgba(255, 255, 255, 0.06);
            color: var(--muted-foreground);
        }
        .btn-buy-plus {
            background: linear-gradient(135deg, #0d9488, #2563eb);
            color: #ffffff;
            box-shadow: 0 4px 14px rgba(13, 148, 136, 0.3);
        }
        .btn-buy-pro {
            background: linear-gradient(135deg, #a855f7, #6366f1);
            color: #ffffff;
            box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4);
        }

        /* Интерактивный калькулятор слотов */
        .sub-calc-box {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .sub-stepper-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: var(--muted);
            border-radius: var(--radius-lg);
            padding: 6px 8px;
            margin-top: 6px;
        }
        .sub-stepper-btn {
            width: 44px;
            height: 44px;
            border-radius: var(--radius-md);
            background: var(--card);
            border: 1px solid var(--border-color);
            color: var(--foreground);
            font-size: 20px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--duration-fast);
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .sub-stepper-btn:active {
            transform: scale(0.94);
        }
        .sub-stepper-val-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .sub-stepper-count {
            font-size: 24px;
            font-weight: 800;
            color: var(--foreground);
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }
        .sub-stepper-subtext {
            font-size: 11px;
            color: var(--muted-foreground);
            margin-top: 2px;
        }
        .sub-quick-counts {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }
        .sub-quick-count-btn {
            flex: 1;
            padding: 8px;
            border-radius: var(--radius-md);
            background: var(--card);
            border: 1px solid var(--border-color);
            color: var(--foreground);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--duration-fast);
            -webkit-tap-highlight-color: transparent;
        }
        .sub-quick-count-btn:active {
            background: var(--accent-soft);
            border-color: var(--accent-color);
            color: var(--accent-color);
        }
        .sub-total-block {
            background: var(--card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 4px;
        }
        .sub-total-title {
            font-size: 12px;
            color: var(--muted-foreground);
        }
        .sub-total-sum {
            font-size: 26px;
            font-weight: 800;
            color: var(--foreground);
            font-variant-numeric: tabular-nums;
        }
        .sub-total-detail {
            font-size: 12px;
            color: var(--muted-foreground);
        }
        .sub-add-slots-btn {
            height: 48px;
            width: 100%;
            border-radius: var(--radius-lg);
            background: var(--accent-color);
            color: var(--accent-foreground);
            border: none;
            font-size: 15px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
            transition: all var(--duration-fast);
            -webkit-tap-highlight-color: transparent;
        }
        .sub-add-slots-btn:active {
            transform: scale(0.98);
        }

        /* ================= UI/UX СПРИНТ 2: ДОЛГИ, БЛОКИРОВКИ И ПЕРЕНОСЫ ================= */
        
        /* 1. Закрепленный Sticky-алерт неотработанных уроков */
        .sticky-debts-banner {
            position: sticky;
            top: 0;
            z-index: 35;
            margin: -4px 0 10px 0;
            padding: 10px 12px;
            border-radius: var(--radius-lg);
            background: rgba(245, 158, 11, 0.12);
            border: 1px solid rgba(245, 158, 11, 0.3);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
            display: flex;
            flex-direction: column;
            gap: 8px;
            animation: slideDownFade 0.25s var(--ease-out);
        }
        body.theme-dark .sticky-debts-banner {
            background: rgba(245, 158, 11, 0.14);
            border-color: rgba(245, 158, 11, 0.25);
        }
        @keyframes slideDownFade {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .debt-banner-cards-scroll {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 2px;
        }
        .debt-banner-cards-scroll::-webkit-scrollbar {
            display: none;
        }
        .debt-banner-card {
            flex: 0 0 100%;
            scroll-snap-align: start;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .debt-banner-left {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }
        .debt-banner-icon {
            width: 32px;
            height: 32px;
            border-radius: var(--radius-md);
            background: rgba(245, 158, 11, 0.2);
            color: #d97706;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        body.theme-dark .debt-banner-icon {
            color: #fbbf24;
            background: rgba(245, 158, 11, 0.25);
        }
        .debt-banner-texts {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        .debt-banner-title-line {
            font-size: 13px;
            font-weight: 700;
            color: var(--foreground);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .debt-badge-paid {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 2px 7px;
            border-radius: var(--radius-full);
            font-size: 10.5px;
            font-weight: 700;
            background: rgba(34, 197, 94, 0.15);
            color: #16a34a;
            border: 1px solid rgba(34, 197, 94, 0.3);
            white-space: nowrap;
        }
        body.theme-dark .debt-badge-paid {
            color: #4ade80;
            background: rgba(34, 197, 94, 0.2);
            border-color: rgba(34, 197, 94, 0.35);
        }
        .debt-badge-unpaid {
            display: inline-flex;
            align-items: center;
            padding: 2px 6px;
            border-radius: var(--radius-full);
            font-size: 10px;
            font-weight: 600;
            color: var(--muted-foreground);
            background: var(--muted);
            white-space: nowrap;
        }
        .debt-banner-assign-btn {
            background: #d97706;
            color: #ffffff;
            border: none;
            padding: 6px 14px;
            border-radius: var(--radius-full);
            font-size: 12.5px;
            font-weight: 700;
            cursor: pointer;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35);
            transition: all var(--duration-fast);
            -webkit-tap-highlight-color: transparent;
        }
        .debt-banner-assign-btn:active {
            transform: scale(0.95);
        }
        body.theme-dark .debt-banner-assign-btn {
            background: #f59e0b;
            color: #000000;
        }

        /* 2. Кнопка "Личное время" в хэдере месяца */
        /* 2. Кнопка "Личное время" в верхней шапке рядом с уведомлениями */
        .header-block-time-btn {
            background: var(--card);
            border: 1px solid var(--border-color);
            color: var(--foreground);
            border-radius: var(--radius-full);
            height: 38px;
            padding: 0 12px;
            font-size: 12.5px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            box-shadow: var(--shadow-xs);
            transition: all var(--duration-fast);
            -webkit-tap-highlight-color: transparent;
            white-space: nowrap;
        }
        body.theme-dark .header-block-time-btn {
            background: #1f2125;
            border-color: rgba(255, 255, 255, 0.08);
            color: #ffffff;
        }
        .header-block-time-btn:active {
            transform: scale(0.96);
            background: var(--muted);
        }
        @media (max-width: 380px) {
            .header-block-time-btn span {
                display: none;
            }
            .header-block-time-btn {
                padding: 0;
                width: 38px;
                justify-content: center;
            }
        }

        /* 3. Карточка заблокированного слота в сетке расписания */
        .slot-blocked-card {
            border-radius: var(--radius-lg);
            background: rgba(24, 24, 27, 0.04);
            border: 1.5px dashed var(--border-color);
            padding: 12px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            position: relative;
            overflow: hidden;
            transition: all var(--duration-fast);
        }
        body.theme-dark .slot-blocked-card {
            background: rgba(255, 255, 255, 0.03);
            border-color: rgba(255, 255, 255, 0.12);
        }
        .slot-blocked-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--muted-foreground);
            opacity: 0.5;
        }
        .slot-blocked-left {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }
        .slot-blocked-icon {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-md);
            background: var(--muted);
            color: var(--muted-foreground);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .slot-blocked-info {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        .slot-blocked-time {
            font-size: 13.5px;
            font-weight: 700;
            color: var(--foreground);
            letter-spacing: -0.2px;
        }
        .slot-blocked-sub {
            font-size: 12px;
            color: var(--muted-foreground);
            display: flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .slot-blocked-badge {
            font-size: 10px;
            font-weight: 600;
            padding: 1px 6px;
            border-radius: var(--radius-full);
            background: var(--muted);
            color: var(--muted-foreground);
        }
        .slot-unlock-btn {
            background: transparent;
            border: 1px solid transparent;
            color: var(--muted-foreground);
            width: 34px;
            height: 34px;
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all var(--duration-fast);
            -webkit-tap-highlight-color: transparent;
            flex-shrink: 0;
        }
        .slot-unlock-btn:hover {
            color: var(--destructive);
            background: rgba(239, 68, 68, 0.1);
        }
        .slot-unlock-btn:active {
            transform: scale(0.9);
        }

        /* 4. Сегментированный переключатель (Segment Control) */
        .segment-control-wrap {
            width: 100%;
        }
        .segment-tabs {
            display: flex;
            background: var(--muted);
            padding: 3px;
            border-radius: var(--radius-md);
            gap: 2px;
        }
        .segment-btn {
            flex: 1;
            padding: 7px 10px;
            border-radius: var(--radius-sm);
            border: none;
            background: transparent;
            color: var(--muted-foreground);
            font-size: 12.5px;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--duration-fast);
            -webkit-tap-highlight-color: transparent;
        }
        .segment-btn.active {
            background: var(--card);
            color: var(--foreground);
            box-shadow: var(--shadow-xs);
        }

        /* 5. Быстрые чипсы времени и категории */
        .quick-chips-row {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }
        .time-delta-chip {
            background: var(--muted);
            border: 1px solid var(--border-color);
            color: var(--foreground);
            padding: 4px 9px;
            border-radius: var(--radius-full);
            font-size: 11.5px;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--duration-fast);
            -webkit-tap-highlight-color: transparent;
        }
        .time-delta-chip:active {
            background: var(--accent-color);
            color: #ffffff;
            border-color: var(--accent-color);
        }
        .category-chips-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 6px;
        }
        .reason-chip {
            background: var(--card);
            border: 1px solid var(--border-color);
            color: var(--foreground);
            padding: 8px 10px;
            border-radius: var(--radius-md);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            text-align: left;
            transition: all var(--duration-fast);
            -webkit-tap-highlight-color: transparent;
        }
        .reason-chip.active {
            border-color: var(--accent-color);
            background: var(--accent-soft);
            color: var(--accent-color);
        }

        /* 6. Карточки предупреждений и сводок долга */
        .conflict-alert-card {
            background: rgba(239, 68, 68, 0.08);
            border: 1px solid rgba(239, 68, 68, 0.25);
            border-radius: var(--radius-md);
            padding: 12px;
            margin-bottom: 14px;
        }
        .debt-summary-card {
            background: var(--card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 12px;
        }

        /* 7. Сетка доступных слотов для публичной записи по визитке */
        .card-day-slots-wrapper {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
            box-sizing: border-box;
        }
        .card-booking-slots-grid {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 8px !important;
            width: 100% !important;
            max-height: 220px;
            overflow-y: auto;
            padding-right: 2px;
            box-sizing: border-box;
        }
        .card-booking-slot-btn {
            background: var(--card);
            border: 1.5px solid var(--border-color);
            color: var(--foreground);
            padding: 8px 4px !important;
            border-radius: var(--radius-md);
            font-size: 13.5px;
            font-weight: 700;
            text-align: center;
            cursor: pointer;
            transition: all var(--duration-fast);
            -webkit-tap-highlight-color: transparent;
            box-sizing: border-box;
            width: 100% !important;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 38px;
        }
        .card-booking-slot-btn:hover {
            border-color: var(--accent-color);
        }
        .card-booking-slot-btn.active {
            background: var(--accent-color);
            border-color: var(--accent-color);
            color: #ffffff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .card-booking-empty-notice {
            grid-column: 1 / -1;
            background: var(--muted);
            border-radius: var(--radius-md);
            padding: 14px 12px;
            text-align: center;
            font-size: 12.5px;
            color: var(--muted-foreground);
            line-height: 1.45;
        }

        /* 8. Чипсы выбора длительности и селектор дней недели для визитки */
        .card-duration-chip {
            background: var(--card);
            border: 1.5px solid var(--border-color);
            color: var(--foreground);
            padding: 7px 0;
            border-radius: var(--radius-md);
            font-size: 12px;
            font-weight: 600;
            text-align: center;
            cursor: pointer;
            transition: all var(--duration-fast);
            -webkit-tap-highlight-color: transparent;
        }
        .card-duration-chip:hover {
            border-color: var(--accent-color);
        }
        .card-duration-chip.active {
            background: var(--accent-soft);
            border-color: var(--accent-color);
            color: var(--accent-color);
            font-weight: 700;
        }

        .card-dow-btn {
            background: var(--card);
            border: 1.5px solid var(--border-color);
            color: var(--foreground);
            padding: 8px 0;
            border-radius: var(--radius-md);
            font-size: 12.5px;
            font-weight: 700;
            text-align: center;
            cursor: pointer;
            transition: all var(--duration-fast);
            -webkit-tap-highlight-color: transparent;
        }
        .card-dow-btn:hover {
            border-color: var(--accent-color);
        }
        .card-dow-btn.active {
            background: var(--accent-color);
            border-color: var(--accent-color);
            color: #ffffff;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
        }

        /* ================= ВКЛАДКА ЗАМЕТКИ ================= */
        .notes-filter-bar {
            display: flex;
            align-items: center;
            gap: 6px;
            overflow-x: auto;
            margin-bottom: 14px;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .notes-filter-bar::-webkit-scrollbar {
            display: none;
        }
        .notes-filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            border-radius: var(--radius-md, 12px);
            border: 1px solid var(--border-color);
            background: var(--card);
            color: var(--muted-foreground);
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            cursor: pointer;
            transition: all var(--duration-fast, 150ms) var(--ease-out, ease);
            -webkit-tap-highlight-color: transparent;
        }
        .notes-filter-chip:active {
            transform: scale(0.97);
        }
        .notes-filter-chip.active {
            background: var(--accent-color);
            border-color: var(--accent-color);
            color: #ffffff;
            font-weight: 600;
        }
        .notes-filter-chip.active svg {
            color: #ffffff !important;
            stroke: #ffffff !important;
        }
        .note-card {
            position: relative;
            background: var(--card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg, 16px);
            padding: 13px 14px;
            margin-bottom: 10px;
            box-shadow: var(--shadow-sm);
            transition: border-color var(--duration-fast, 150ms) var(--ease-out, ease);
        }
        .note-card:hover {
            border-color: rgba(255, 255, 255, 0.15);
        }
        .note-actions-wrap {
            position: relative;
        }
        .note-menu-btn {
            position: relative;
            width: 30px;
            height: 30px;
            border-radius: 8px;
            background: var(--muted);
            border: 1px solid var(--border-color);
            color: var(--foreground);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            flex-shrink: 0;
            transition: background var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease, color var(--duration-fast, 150ms) ease;
            -webkit-tap-highlight-color: transparent;
        }
        .note-menu-btn::after {
            content: '';
            position: absolute;
            inset: -7px;
        }
        .note-menu-btn:hover, .note-menu-btn:active {
            background: var(--card-bg);
            border-color: var(--accent-color);
            color: var(--accent-color);
        }
        .note-dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 4px;
            min-width: 165px;
            background: var(--card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md, 12px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
            z-index: 100;
            padding: 4px;
            display: flex;
            flex-direction: column;
            gap: 2px;
            transform-origin: top right;
            animation: noteDropdownIn 120ms cubic-bezier(0.16, 1, 0.3, 1);
        }
        @keyframes noteDropdownIn {
            from { opacity: 0; transform: translateY(-4px) scale(0.96); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .note-dropdown-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            color: var(--foreground);
            background: transparent;
            border: none;
            cursor: pointer;
            width: 100%;
            text-align: left;
            transition: background var(--duration-fast, 150ms) ease;
            -webkit-tap-highlight-color: transparent;
        }
        .note-dropdown-item:active, .note-dropdown-item:hover {
            background: var(--muted);
        }
        .note-dropdown-item.danger {
            color: var(--destructive, #ef4444);
        }
        .note-dropdown-item.danger:active, .note-dropdown-item.danger:hover {
            background: rgba(239, 68, 68, 0.08);
        }
        .note-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 10.5px;
            font-weight: 600;
            padding: 2px 7px;
            border-radius: 6px;
            line-height: 1.3;
        }
        .note-badge-amber {
            background: rgba(245, 158, 11, 0.12);
            color: #f59e0b;
            border: 1px solid rgba(245, 158, 11, 0.25);
        }
        .note-badge-blue {
            background: rgba(59, 130, 246, 0.12);
            color: #3b82f6;
            border: 1px solid rgba(59, 130, 246, 0.25);
        }
        .note-badge-purple {
            background: rgba(168, 85, 247, 0.12);
            color: #a855f7;
            border: 1px solid rgba(168, 85, 247, 0.25);
        }
        .note-badge-emerald {
            background: rgba(16, 185, 129, 0.12);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.25);
        }
        .note-badge-gray {
            background: var(--muted);
            color: var(--muted-foreground);
            border: 1px solid var(--border-color);
        }
        .note-badge-shared {
            background: rgba(16, 185, 129, 0.12);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.25);
        }
        .note-badge-tutor {
            background: rgba(59, 130, 246, 0.08);
            color: var(--accent-color);
            border: 1px solid rgba(59, 130, 246, 0.2);
        }
        /* Кастомный чекбокс */
        .custom-cb-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .custom-cb-wrap input {
            display: none;
        }
        .custom-cb-box {
            width: 17px;
            height: 17px;
            border-radius: 5px;
            border: 1.5px solid var(--border-color);
            background: var(--card);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all var(--duration-fast, 150ms) var(--ease-out, ease);
        }
        .custom-cb-wrap input:checked ~ .custom-cb-box {
            background: var(--accent-color);
            border-color: var(--accent-color);
        }
        .custom-cb-box svg {
            opacity: 0;
            transform: scale(0.6);
            transition: all var(--duration-fast, 150ms) var(--ease-out, ease);
        }
        .custom-cb-wrap input:checked ~ .custom-cb-box svg {
            opacity: 1;
            transform: scale(1);
        }
        .custom-cb-wrap input:checked ~ .custom-cb-text {
            text-decoration: line-through;
            color: var(--muted-foreground);
            opacity: 0.7;
        }
        .custom-cb-text {
            color: var(--foreground);
            font-size: 13px;
            line-height: 1.4;
            transition: color var(--duration-fast, 150ms);
        }

        /* Emil Kowalski / Impeccable: Respect user motion preferences */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }