/* GCSEMate - GCSE Revision Platform */
/* Proudly made using no generative AI */
/* Copyright © 2026 Mayukhjit Chakraborty. All rights reserved. */
/* Protected by copyright and trade secret laws. */
/* Unauthorized copying, reproduction, or distribution is strictly prohibited. */

:root {
/* Default accent: Tailwind blue-500 rgb */
--accent-50: 239 246 255;
--accent-100: 219 234 254;
--accent-300: 147 197 253;
--accent-400: 96 165 250;
--accent-500: 59 130 246;
--accent-600: 37 99 235;
--accent-700: 29 78 216;

/* Brand palette (defaults to accent; can be derived from logo at runtime) */
--brand-50: var(--accent-50);
--brand-100: var(--accent-100);
--brand-300: var(--accent-300);
--brand-400: var(--accent-400);
--brand-500: var(--accent-500);
--brand-600: var(--accent-600);
--brand-700: var(--accent-700);

--surface: 255 255 255;
--surface-muted: 248 250 252;
--text: 15 23 42;
--text-muted: 71 85 105;
--border: 226 232 240;
/* Performance optimizations */
--animation-fast: 150ms;
--animation-normal: 300ms;
--animation-slow: 500ms;
/* Modern UI enhancements */
--backdrop-blur: blur(20px);
--card-radius: 16px;
--input-radius: 12px;
--button-radius: 12px;
--ui-banner-scale: 1;
--ui-footer-scale: 1;
        }

        html.dark-theme,
        body.dark-theme {
            color-scheme: dark;
        }

        body.dark-theme {
            background-color: #020617;
            background-image:
                radial-gradient(at 0% 0%, rgba(30, 41, 59, 0.82) 0px, transparent 50%),
                radial-gradient(at 100% 0%, rgba(var(--accent-700), 0.28) 0px, transparent 48%),
                radial-gradient(at 100% 100%, rgba(15, 23, 42, 0.96) 0px, transparent 56%);
            color: #e2e8f0;
        }

        /* Base styles for a polished look - Enhanced for accessibility */
        body {
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8fafc;
            /* Modern subtle gradient background */
            background-image: 
                radial-gradient(at 0% 0%, rgba(var(--brand-50), 0.7) 0px, transparent 50%),
                radial-gradient(at 100% 0%, rgba(var(--accent-100), 0.4) 0px, transparent 50%),
                radial-gradient(at 100% 100%, rgba(var(--brand-50), 0.7) 0px, transparent 50%);
            background-attachment: fixed;

            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
            /* Respect safe areas on iOS / notches */
            padding-top: env(safe-area-inset-top, 0);
            padding-right: env(safe-area-inset-right, 0);
            padding-bottom: env(safe-area-inset-bottom, 0);
            padding-left: env(safe-area-inset-left, 0);
            /* Enhanced accessibility */
            line-height: 1.6;
            color: #1f2937;
        }

        body::before,
        body::after {
            content: '';
            position: fixed;
            inset: auto;
            pointer-events: none;
            z-index: -30;
            filter: blur(26px);
            opacity: 0.55;
            will-change: transform, opacity;
            animation: ambientFloat 20s ease-in-out infinite alternate;
        }

        body::before {
            top: 8vh;
            left: -6vw;
            width: 26rem;
            height: 26rem;
            background: radial-gradient(circle, rgba(var(--brand-100), 0.95) 0%, rgba(var(--brand-50), 0.15) 62%, transparent 78%);
        }

        body::after {
            right: -8vw;
            bottom: 10vh;
            width: 28rem;
            height: 28rem;
            background: radial-gradient(circle, rgba(var(--accent-100), 0.9) 0%, rgba(var(--accent-50), 0.12) 60%, transparent 78%);
            animation-delay: -8s;
        }

        @keyframes ambientFloat {
            0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.44; }
            100% { transform: translate3d(3.5vw, -2vh, 0) scale(1.08); opacity: 0.64; }
        }

        body.dark-theme #app-loading,
        body.dark-theme #mobile-menu,
        body.dark-theme #main-app,
        body.dark-theme .bg-white,
        body.dark-theme .bg-white\/50,
        body.dark-theme .bg-white\/70,
        body.dark-theme .bg-white\/80,
        body.dark-theme .bg-white\/90,
        body.dark-theme .bg-gray-50,
        body.dark-theme .bg-gray-100,
        body.dark-theme .glass-card-premium,
        body.dark-theme .timer-setting-card,
        body.dark-theme .timer-metric-card,
        body.dark-theme #tools-page .tools-panel-card,
        body.dark-theme .theme-preset-btn {
            background-color: rgba(15, 23, 42, 0.82) !important;
            background-image: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.78)) !important;
            border-color: rgba(71, 85, 105, 0.82) !important;
            color: #e2e8f0 !important;
            box-shadow: 0 24px 60px -38px rgba(2, 6, 23, 0.9) !important;
        }

        body.dark-theme footer,
        body.dark-theme #page-footer,
        body.dark-theme #landing-page > footer {
            background: linear-gradient(160deg, rgba(2, 6, 23, 0.95), rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.84)) !important;
            border-color: rgba(96, 165, 250, 0.16) !important;
            color: #cbd5e1 !important;
            box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.08);
        }

        body.dark-theme footer .text-gray-900,
        body.dark-theme footer .text-gray-800,
        body.dark-theme footer .text-gray-700 {
            color: #f8fafc !important;
        }

        body.dark-theme footer .text-gray-600,
        body.dark-theme footer .text-gray-500,
        body.dark-theme footer .text-gray-400,
        body.dark-theme footer p,
        body.dark-theme footer span {
            color: #94a3b8 !important;
        }

        body.dark-theme footer a {
            color: #dbeafe !important;
        }

        body.dark-theme footer a:hover {
            color: #93c5fd !important;
        }

        body.dark-theme .text-gray-900,
        body.dark-theme .text-gray-800,
        body.dark-theme .text-gray-700 {
            color: #e2e8f0 !important;
        }

        body.dark-theme .text-gray-600,
        body.dark-theme .text-gray-500,
        body.dark-theme .timer-setting-label,
        body.dark-theme .timer-metric-label {
            color: #94a3b8 !important;
        }

        body.dark-theme .border-gray-100,
        body.dark-theme .border-gray-200,
        body.dark-theme .border-gray-200\/60,
        body.dark-theme .border-gray-300,
        body.dark-theme .border-gray-300\/60,
        body.dark-theme .border-gray-300\/70,
        body.dark-theme .border-white\/30,
        body.dark-theme .border-white\/40,
        body.dark-theme .border-white\/50 {
            border-color: rgba(71, 85, 105, 0.82) !important;
        }

        body.dark-theme input,
        body.dark-theme select,
        body.dark-theme textarea,
        body.dark-theme #tools-page input[type="text"],
        body.dark-theme #tools-page input[type="number"],
        body.dark-theme #tools-page input[type="search"],
        body.dark-theme #tools-page textarea,
        body.dark-theme #account-settings-page .tools-select {
            background: rgba(15, 23, 42, 0.9) !important;
            color: #e2e8f0 !important;
            border-color: rgba(71, 85, 105, 0.85) !important;
        }

        body.dark-theme input::placeholder,
        body.dark-theme textarea::placeholder {
            color: #94a3b8 !important;
        }

        body.dark-theme #tools-notes-input,
        body.dark-theme #tools-randomiser-output,
        body.dark-theme .timer-setting-card,
        body.dark-theme .timer-metric-card {
            background: linear-gradient(145deg, rgba(15, 23, 42, 0.84), rgba(30, 41, 59, 0.68)) !important;
        }

        body.dark-theme .theme-preset-btn.is-active,
        body.dark-theme .tools-calc-btn.is-active,
        body.dark-theme .tools-calc-toggle.is-active {
            background: linear-gradient(135deg, rgba(var(--accent-600), 0.94), rgba(var(--accent-700), 0.94)) !important;
            color: #eff6ff !important;
            border-color: rgba(var(--accent-300), 0.95) !important;
        }

        /* Smooth Page Transitions */
        @keyframes pageFadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .page:not(.hidden) {
            animation: pageFadeIn 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        }

        /* Prevent background scroll when modals are open */
        body.modal-open { overflow: hidden; }

        /* Ensure decorative watermark never blocks taps/clicks */
        #site-watermark,
        #site-watermark * {
            pointer-events: none !important;
            -webkit-user-select: none;
            user-select: none;
            -webkit-user-drag: none;
        }
        
        /* Performance optimizations */
        * {
box-sizing: border-box;
        }
        
        /* Optimize animations for GPU acceleration */
        .gpu-accelerated {
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
        }
        
        /* Modern cards without glassmorphism */
        .glass-card-premium {
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--card-radius);
transition: transform 0.15s ease-out;
        }
        
        .glass-card-premium:hover {
transform: translateY(-2px);
        }
        
        /* Smooth scale animation on interaction */
        .interactive-element {
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
            box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, box-shadow;
        }
        
        .interactive-element:active {
transform: scale(0.98);
        }
        
        /* Modern button styles without shadows */
        .btn-gradient {
background: linear-gradient(135deg, rgb(var(--accent-600)), rgb(var(--accent-700)));
border: none;
border-radius: var(--button-radius);
color: white;
font-weight: 600;
     padding: 0.7rem 1.35rem;
transition: transform 0.15s ease-out, opacity 0.15s ease-out;
        }
        
        .btn-gradient:hover {
transform: translateY(-1px);
opacity: 0.95;
        }
        
        .btn-gradient:active {
transform: translateY(0);
        }

        /* Normalize form field sizing so inputs aren’t oversized */
        input, select, textarea {
            font-size: 15px;
            line-height: 1.4;
            padding: 0.5rem 0.7rem;
            border-radius: 10px;
        }

        /* Tighter glass input padding without changing Tailwind classes elsewhere */
        .glass-input {
            padding: 0.5rem 0.7rem !important;
        }
        
        /* Enhanced Smooth Scrolling with Overscroll Behavior */
        html {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
        }
        
        /* Prevent horizontal scroll on mobile */
        body {
overflow-x: hidden;
        }
        
        /* Smooth scroll for all containers */
        * {
scroll-behavior: inherit;
        }

        /* Respect reduced motion preferences and trim heavy animations on low-end devices */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            .animate-logo { animation: none !important; }
            .progress-bar .bar1, .progress-bar .bar2 { animation-duration: 0.01ms !important; }
            #landing-page { animation: none !important; }
        }

        /* Landing page background experiment (scoped) */
        #landing-page {
            position: relative;
            background:
                radial-gradient(circle at 15% 15%, rgba(219,234,254,0.95) 0%, rgba(239,246,255,0.5) 45%),
                radial-gradient(circle at 85% 8%, rgba(147,197,253,0.72) 0%, rgba(239,246,255,0.2) 40%),
                radial-gradient(circle at 50% 92%, rgba(96,165,250,0.22) 0%, transparent 55%),
                linear-gradient(180deg, #eff6ff 0%, #dbeafe 38%, #eff6ff 100%);
            background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
            animation: landingGradientDrift 18s ease-in-out infinite alternate;
            overflow: hidden;
        }

        /* Low-spec: keep the look but drop expensive background animation */
        .low-spec #landing-page {
            animation: none !important;
            background-size: auto;
        }

        @keyframes landingGradientDrift {
            0% {
                background-position: 0% 0%, 100% 0%, 50% 0%;
            }
            100% {
                background-position: 100% 40%, 0% 20%, 50% 100%;
            }
        }

        /* Landing spacing + responsiveness polish */
        #landing-page header { padding-top: 0.25rem; padding-bottom: 0.25rem; margin-bottom: 0; }
        #landing-page main { margin-top: 0; }
        #landing-page .hero-copy { gap: 1.25rem; }
        #landing-page .hero-grid { gap: clamp(1.75rem, 4vw, 2.75rem); }
        #landing-page .landing-made-with {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.42rem;
            line-height: 1;
            flex-wrap: wrap;
        }
        #landing-page .landing-made-with i {
            line-height: 1;
            transform: translateY(0.5px);
        }

        /* Landing page: align content to top, not vertically centered; remove redundant outer padding */
        #landing-page.gs-page { align-items: flex-start; padding-top: 0; padding-bottom: 0; }

        @media (max-width: 640px) {
            #landing-page { padding-bottom: 6.5rem; }
        }
        
        /* Modern scroll progress indicator */
        ::-webkit-scrollbar {
width: 10px;
height: 10px;
        }
        
        ::-webkit-scrollbar-track {
background: rgba(219, 234, 254, 0.4);
border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #60a5fa, #2563eb);
border-radius: 10px;
border: 2px solid transparent;
background-clip: padding-box;
transition: background 0.3s ease;
        }
        
        ::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #3b82f6, #1d4ed8);
background-clip: padding-box;
        }
        /* Improve layout consistency and resizing */
        *, *::before, *::after { box-sizing: border-box; }
        html, body { height: 100%; }
        /* Utility to hide scrollbars for overflow regions */
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        /* Enhanced Loader animations */
        .loader {
border: 4px solid rgba(0, 0, 0, 0.1);
border-top: 4px solid #3b82f6;
border-radius: 50%;
width: 32px;
height: 32px;
animation: spin 1s linear infinite;
        }
        
        /* Professional dots spinner for preview loading */
        .dots-spinner {
display: inline-flex;
gap: 4px;
align-items: center;
        }
        .dots-spinner i {
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
animation: dot-pulse 1.4s ease-in-out infinite both;
        }
        .dots-spinner i:nth-child(1) { animation-delay: -0.32s; }
        .dots-spinner i:nth-child(2) { animation-delay: -0.16s; }
        .dots-spinner i:nth-child(3) { animation-delay: 0s; }

        #app-loading {
            overflow: hidden;
            background:
                radial-gradient(circle at 18% 18%, rgba(59, 130, 246, 0.10), transparent 30%),
                radial-gradient(circle at 82% 14%, rgba(147, 197, 253, 0.14), transparent 28%),
                radial-gradient(circle at 50% 100%, rgba(226, 232, 240, 0.8), transparent 38%),
                linear-gradient(145deg, #f8fafc, #eff6ff 55%, #dbeafe 100%);
            color: #0f172a;
        }

        .app-loading-shell {
            position: relative;
            z-index: 1;
            width: min(90vw, 28rem);
            margin: 0 auto;
            border-radius: 1.5rem;
            padding: 2.5rem 2rem 2rem;
            text-align: center;
            background: rgba(255, 255, 255, 0.78);
            backdrop-filter: blur(22px);
            box-shadow: 0 25px 50px -18px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(148, 163, 184, 0.18);
        }

        .app-loading-ambient {
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0.7;
        }

        .app-loading-orb {
            position: absolute;
            border-radius: 9999px;
            filter: blur(54px);
            opacity: 0.22;
            animation: splashOrbFloat 13s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate;
        }

        .app-loading-orb--one {
            width: 14rem;
            height: 14rem;
            left: -4rem;
            top: 10%;
            background: radial-gradient(circle, rgba(96, 165, 250, 0.42), transparent 70%);
        }

        .app-loading-orb--two {
            width: 16rem;
            height: 16rem;
            right: -5rem;
            top: 20%;
            background: radial-gradient(circle, rgba(191, 219, 254, 0.9), transparent 70%);
            animation-delay: -4s;
        }

        .app-loading-orb--three {
            width: 12rem;
            height: 12rem;
            left: calc(50% - 6rem);
            bottom: -6rem;
            background: radial-gradient(circle, rgba(37, 99, 235, 0.22), transparent 70%);
            animation-delay: -8s;
        }

        @keyframes splashOrbFloat {
            0% { transform: translate3d(0, 0, 0) scale(1); }
            100% { transform: translate3d(2vw, -2vh, 0) scale(1.08); }
        }

        .app-loading-brandmark {
            position: relative;
            margin: 0 auto 1.25rem;
            width: fit-content;
            padding: 1rem 1.25rem;
            border-radius: 1.25rem;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.72));
            border: 1px solid rgba(148, 163, 184, 0.22);
            box-shadow: 0 10px 40px -20px rgba(37, 99, 235, 0.24);
        }

        .app-splash-indicator {
            position: relative;
            width: 3.5rem;
            height: 3.5rem;
            margin: 0.5rem auto 1.25rem;
        }

        .app-splash-ring {
            position: absolute;
            inset: 0;
            border-radius: 9999px;
            border: 2.5px solid rgba(148, 163, 184, 0.24);
            border-top-color: rgb(96, 165, 250);
            animation: splashSpin 1s ease-in-out infinite;
        }

        .app-splash-dot {
            position: absolute;
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 9999px;
            background: linear-gradient(135deg, #60a5fa, #a78bfa);
            box-shadow: 0 0 15px rgba(96, 165, 250, 0.32);
            opacity: 0.85;
            animation: splashDotPulse 1.4s ease-in-out infinite;
        }

        .app-splash-dot--one {
            top: -0.25rem;
            left: calc(50% - 0.25rem);
            animation-delay: 0s;
        }

        .app-splash-dot--two {
            right: -0.2rem;
            bottom: 0.6rem;
            animation-delay: 0.22s;
        }

        .app-splash-dot--three {
            left: -0.2rem;
            bottom: 0.6rem;
            animation-delay: 0.44s;
        }

        .app-loading-caption {
            margin-top: 0.5rem;
            font-size: 1.05rem;
            font-weight: 800;
            letter-spacing: 0.01em;
            color: #0f172a;
        }

        .app-loading-subcaption {
            margin-top: 0.4rem;
            font-size: 0.85rem;
            font-weight: 600;
            color: #475569;
        }

        .app-loading-shell #loading-quote {
            margin-top: 1.25rem;
            padding: 0.75rem 1rem;
            border-radius: 0.75rem;
            border: 1px solid rgba(148, 163, 184, 0.2);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(239, 246, 255, 0.82));
            color: #1e293b;
            font-weight: 700;
            font-size: 0.9rem;
        }

        .app-loading-shell #loading-joke {
            margin-top: 0.75rem;
            font-weight: 600;
            color: #64748b;
            font-size: 0.8rem;
        }

        .dashboard-exam-note {
            margin: 0.1rem 0 0;
            font-size: 0.94rem;
            font-weight: 700;
            line-height: 1.45;
            color: #1d4ed8;
        }

        @keyframes splashSpin {
            to { transform: rotate(360deg); }
        }

        @keyframes splashDotPulse {
            0%, 100% { transform: scale(0.8); opacity: 0.42; }
            50% { transform: scale(1.1); opacity: 1; }
        }

        .landing-subjects-shell {
            border-radius: 1.35rem;
            border: 1px solid rgba(var(--accent-200), 0.64);
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.75));
            box-shadow: 0 18px 40px -28px rgba(30, 64, 175, 0.28);
            padding: clamp(1rem, 2.8vw, 1.4rem);
        }

        .landing-subjects-kicker {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.25rem 0.7rem;
            border-radius: 9999px;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgb(var(--accent-700));
            background: rgba(var(--accent-100), 0.88);
            border: 1px solid rgba(var(--accent-300), 0.56);
        }

        .landing-subjects-title {
            margin-top: 0.65rem;
            font-size: clamp(1.2rem, 2.4vw, 1.65rem);
            font-weight: 900;
            line-height: 1.15;
            color: #0f172a;
            letter-spacing: -0.02em;
        }

        .landing-subjects-copy {
            margin-top: 0.45rem;
            font-size: 0.92rem;
            color: #475569;
            max-width: 55ch;
        }

        .landing-subjects-controls {
            margin-top: 0.95rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .landing-board-filter {
            border: 1px solid rgba(var(--accent-300), 0.68);
            background: rgba(255, 255, 255, 0.86);
            color: #1e293b;
            border-radius: 0.72rem;
            font-size: 0.76rem;
            font-weight: 700;
            padding: 0.38rem 0.62rem;
            transition: all 160ms ease;
        }

        .landing-board-filter:hover {
            transform: translateY(-1px);
            border-color: rgba(var(--accent-500), 0.74);
        }

        .landing-board-filter.is-active {
            color: #fff;
            background: linear-gradient(135deg, rgb(var(--accent-600)), rgb(var(--accent-700)));
            border-color: transparent;
            box-shadow: 0 12px 24px -18px rgba(var(--accent-700), 0.65);
        }

        .landing-subject-grid {
            margin-top: 0.9rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(13.2rem, 1fr));
            gap: 0.55rem;
        }

        .landing-subject-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.7rem;
            border-radius: 0.88rem;
            border: 1px solid rgba(148, 163, 184, 0.34);
            background: rgba(255, 255, 255, 0.92);
            padding: 0.62rem 0.72rem;
            transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
        }

        .landing-subject-item:hover {
            transform: translateY(-1px);
            border-color: rgba(var(--accent-500), 0.56);
            box-shadow: 0 16px 28px -20px rgba(30, 64, 175, 0.38);
        }

        .landing-subject-name {
            font-size: 0.88rem;
            font-weight: 700;
            color: #1f2937;
            line-height: 1.2;
        }

        .landing-subject-board {
            border-radius: 9999px;
            border: 1px solid rgba(var(--accent-300), 0.64);
            background: rgba(var(--accent-50), 0.92);
            color: rgb(var(--accent-700));
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            padding: 0.18rem 0.48rem;
            white-space: nowrap;
        }

        .landing-subject-item.is-hidden {
            display: none;
        }

        @media (max-width: 640px) {
            .app-loading-shell {
                padding: 1.35rem 0.95rem 1rem;
            }

            .landing-subject-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @keyframes spin {
0% { transform: rotate(0deg) translateZ(0); }
100% { transform: rotate(360deg) translateZ(0); }
        }
        
        @keyframes dot-pulse {
0%, 80%, 100% {
    transform: scale(0.8) translateZ(0);
    opacity: 0.6;
}
40% {
    transform: scale(1.2) translateZ(0);
    opacity: 1;
}
        }

        /* Accent colour picker: ensure the swatch shows the selected colour */
        #accent-picker {
            -webkit-appearance: none;
            appearance: none;
            padding: 0;
            overflow: hidden;
        }
        #accent-picker::-webkit-color-swatch-wrapper { padding: 0; }
        #accent-picker::-webkit-color-swatch {
            border: none;
            border-radius: 0.5rem;
        }
        #accent-picker::-moz-color-swatch {
            border: none;
            border-radius: 0.5rem;
        }

        /* Skeleton loading animation */
        .skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 4px;
        }
        
        @keyframes fade-in {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .animate-fade-in {
            animation: fade-in 0.3s ease-out;
        }
        @keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
        }
        
        /* Enhanced accessibility - Focus states */
        *:focus-visible {
            outline: 3px solid rgba(var(--accent-500), 0.6);
            outline-offset: 2px;
            border-radius: 4px;
        }

        /* Form controls: ensure borders render consistently */
        .page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
        .page textarea,
        .page select {
            border-width: 1px;
            border-style: solid;
            transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
        }

        .page input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):hover,
        .page textarea:hover,
        .page select:hover {
            border-color: rgb(var(--border) / 1);
        }

        /* Ensure default checkboxes are always visible */
        input[type="checkbox"]:not(.gcse-checkbox) {
            border: 1.5px solid rgba(var(--text), 0.4);
            border-radius: 0.25rem;
            background-color: #fff;
            accent-color: rgb(var(--brand-600));
        }
        
        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        textarea:focus-visible,
        select:focus-visible {
            outline: 3px solid rgba(59, 130, 246, 0.8);
            outline-offset: 3px;
        }
        
        /* Smooth focus ring */
        .focus-ring {
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
transition: box-shadow 0.2s ease;
        }
        
        /* Improved spacing and padding for better layout */
        .page {
            padding: 1.5rem 1rem;
        }
        
        @media (min-width: 640px) {
            .page {
                padding: 2rem 1.5rem;
            }
        }
        
        @media (min-width: 1024px) {
            .page {
                padding: 2.5rem 2rem;
            }
        }
        
        /* Better navigation spacing */
        nav {
            gap: 0.5rem;
        }
        
        nav a, nav button {
            padding: 0.625rem 1rem;
            border-radius: 0.5rem;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        nav a:hover, nav button:hover {
            background-color: rgba(59, 130, 246, 0.1);
            transform: translateY(-1px);
        }
        
        /* Improved card spacing */
        .glass-card-premium,
        .bg-white\/70,
        .bg-white\/50 {
            padding: 1.25rem;
            margin-bottom: 1rem;
        }
        
        @media (min-width: 640px) {
            .glass-card-premium,
            .bg-white\/70,
            .bg-white\/50 {
                padding: 1.5rem;
                margin-bottom: 1.25rem;
            }
        }
        
        /* Better grid spacing */
        .grid {
            gap: 1rem;
        }
        
        @media (min-width: 640px) {
            .grid {
                gap: 1.25rem;
            }
        }
        
        @media (min-width: 1024px) {
            .grid {
                gap: 1.5rem;
            }
        }
        
        /* Improved button spacing and padding */
        button {
            padding: 0.625rem 1.25rem;
            border-radius: 0.5rem;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            font-weight: 500;
        }
        
        button:hover {
            transform: translateY(-1px);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        /* Better form input spacing */
        input, textarea, select {
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            transition: all 0.2s ease;
            margin-bottom: 0.75rem;
        }
        
        input:focus, textarea:focus, select:focus {
            border-color: rgb(59, 130, 246);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        /* Improved animations */
        @keyframes slide-in {
            from {
                opacity: 0;
                transform: translateX(-10px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes slide-up {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-slide-in {
            animation: slide-in 0.3s ease-out;
        }
        
        .animate-slide-up {
            animation: slide-up 0.4s ease-out;
        }
        
        /* Better header spacing */
        header {
            padding: 1rem 1.5rem;
        }
        
        @media (min-width: 640px) {
            header {
                padding: 1.25rem 2rem;
            }
        }
        
        /* Improved footer spacing */
        footer {
            padding: 2rem 1.5rem;
        }
        
        @media (min-width: 640px) {
            footer {
                padding: 2.5rem 2rem;
            }
        }
        
        /* Better modal spacing */
        .fixed.inset-0 > div {
            padding: 1.5rem;
            margin: 1rem;
        }

        /* Lessons UI */
        .lessons-tree {
            max-height: 18rem;
            overflow: auto;
            display: grid;
            gap: 0.35rem;
            padding-right: 0.25rem;
        }

        .lessons-tree-node {
            width: 100%;
            text-align: left;
            border: 1px solid rgba(191, 219, 254, 0.9);
            background: rgba(255, 255, 255, 0.92);
            color: #1e293b;
            padding: 0.42rem 0.58rem;
            border-radius: 0.6rem;
            font-size: 0.78rem;
            font-weight: 700;
            transition: all 150ms ease;
        }

        .lessons-tree-node:hover {
            border-color: rgba(96, 165, 250, 0.85);
            background: rgba(239, 246, 255, 0.95);
        }

        .lessons-tree-node-level-1 {
            margin-left: 0.65rem;
            width: calc(100% - 0.65rem);
        }

        .lessons-tree-node-level-2 {
            margin-left: 1.3rem;
            width: calc(100% - 1.3rem);
        }

        .lessons-tree-count {
            display: inline-flex;
            margin-left: 0.35rem;
            align-items: center;
            justify-content: center;
            min-width: 1.4rem;
            border-radius: 9999px;
            border: 1px solid rgba(59, 130, 246, 0.28);
            background: rgba(219, 234, 254, 0.9);
            color: #1d4ed8;
            font-size: 0.67rem;
            padding: 0 0.35rem;
        }

        .lesson-card .blog-tag-chip {
            font-size: 0.65rem;
        }

        .lesson-admin-shell {
            background:
                radial-gradient(circle at 4% 6%, rgba(191, 219, 254, 0.55), transparent 36%),
                radial-gradient(circle at 92% 10%, rgba(165, 243, 252, 0.5), transparent 34%),
                linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.9));
            border: 1px solid rgba(186, 230, 253, 0.8);
            box-shadow: 0 18px 45px -34px rgba(14, 116, 144, 0.45);
            backdrop-filter: blur(8px);
        }

        .lesson-admin-toolbar {
            padding: 0.85rem;
            border-radius: 1rem;
            border: 1px solid rgba(191, 219, 254, 0.8);
            background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(239,246,255,0.86));
        }

        .lesson-card {
            background:
                linear-gradient(150deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94));
            border: 1px solid rgba(219, 234, 254, 0.9);
            box-shadow: 0 14px 30px -24px rgba(30, 64, 175, 0.45);
        }

        .lesson-card:hover {
            transform: translateY(-2px);
            border-color: rgba(147, 197, 253, 0.95);
            box-shadow: 0 20px 40px -26px rgba(14, 116, 144, 0.45);
        }

        .lesson-drop-target {
            border-color: rgba(37, 99, 235, 0.85) !important;
            background: rgba(219, 234, 254, 0.72) !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
        }

        .lesson-eraser-mode {
            cursor: crosshair;
            outline: 2px dashed rgba(244, 63, 94, 0.45);
            outline-offset: 4px;
        }

        .lesson-eraser-mode * {
            cursor: crosshair !important;
        }

        .lesson-analytics-card {
            border-radius: 1rem;
            border: 1px solid rgba(199, 210, 254, 0.9);
            background: rgba(255, 255, 255, 0.8);
            padding: 0.9rem;
        }

        .lesson-analytics-title {
            font-size: 0.82rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #4338ca;
            margin-bottom: 0.65rem;
        }

        .lesson-analytics-list {
            display: grid;
            gap: 0.42rem;
        }

        .lesson-analytics-row {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 0.45rem;
            align-items: center;
            border: 1px solid rgba(224, 231, 255, 0.9);
            background: rgba(248, 250, 252, 0.86);
            border-radius: 0.72rem;
            padding: 0.45rem 0.55rem;
        }

        .lesson-analytics-rank {
            width: 1.3rem;
            height: 1.3rem;
            border-radius: 9999px;
            background: rgba(99, 102, 241, 0.16);
            color: #4338ca;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.72rem;
            font-weight: 800;
        }

        .lesson-analytics-name {
            font-size: 0.78rem;
            font-weight: 700;
            color: #0f172a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .lesson-analytics-value {
            font-size: 0.72rem;
            font-weight: 800;
            color: #475569;
        }

        .lesson-rich-content iframe,
        .lesson-rich-content video {
            max-width: 100%;
            border-radius: 0.75rem;
        }

        .lesson-image-zoom-chip {
            position: absolute;
            right: 0.55rem;
            bottom: 0.55rem;
            display: inline-flex;
            align-items: center;
            border-radius: 9999px;
            background: rgba(15, 23, 42, 0.72);
            color: #f8fafc;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            padding: 0.3rem 0.52rem;
            pointer-events: none;
        }

        .lesson-image-open-chip-inline {
            border-radius: 9999px;
            background: rgba(15, 23, 42, 0.72);
            color: #f8fafc;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            padding: 0.3rem 0.52rem;
        }

        .lesson-question-card {
            transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
        }

        .lesson-question-card-correct {
            border-color: rgba(16, 185, 129, 0.6) !important;
            background: rgba(236, 253, 245, 0.78) !important;
            box-shadow: 0 10px 22px -20px rgba(5, 150, 105, 0.6);
        }

        .lesson-question-card-wrong {
            border-color: rgba(244, 63, 94, 0.5) !important;
            background: rgba(255, 241, 242, 0.78) !important;
            box-shadow: 0 10px 22px -20px rgba(225, 29, 72, 0.55);
        }

        .lesson-spotlight-shell {
            border-radius: 1.2rem;
            border: 1px solid rgba(148, 163, 184, 0.34);
            background: rgba(255, 255, 255, 0.96);
            padding: 0.75rem;
            box-shadow: 0 24px 60px -34px rgba(15, 23, 42, 0.45);
        }

        #lesson-image-spotlight-modal {
            background: rgba(248, 250, 252, 0.82);
            backdrop-filter: blur(6px);
        }

        .lesson-spotlight-stage {
            position: relative;
            min-height: 50vh;
            max-height: 72vh;
            overflow: auto;
            border-radius: 0.95rem;
            border: 1px solid rgba(148, 163, 184, 0.38);
            background-color: #f8fafc;
            background-image:
                linear-gradient(45deg, rgba(203, 213, 225, 0.6) 25%, transparent 25%),
                linear-gradient(-45deg, rgba(203, 213, 225, 0.6) 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, rgba(203, 213, 225, 0.6) 75%),
                linear-gradient(-45deg, transparent 75%, rgba(203, 213, 225, 0.6) 75%);
            background-size: 24px 24px;
            background-position: 0 0, 0 12px, 12px -12px, -12px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        .lesson-spotlight-image {
            max-width: min(92vw, 1200px);
            max-height: 68vh;
            transform-origin: center center;
            border-radius: 0.9rem;
            border: 1px solid rgba(148, 163, 184, 0.45);
            transition: transform 180ms ease;
            background: #ffffff;
            filter: drop-shadow(0 10px 20px rgba(15, 23, 42, 0.18));
        }

        .lesson-spotlight-toolbar {
            margin-top: 0.55rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .lesson-spotlight-btn {
            border-radius: 0.65rem;
            border: 1px solid rgba(148, 163, 184, 0.42);
            background: rgba(255, 255, 255, 0.95);
            color: #334155;
            font-size: 0.78rem;
            font-weight: 700;
            padding: 0.45rem 0.68rem;
            transition: background-color 140ms ease, border-color 140ms ease;
        }

        .lesson-spotlight-btn:hover {
            background: rgba(239, 246, 255, 0.95);
            border-color: rgba(96, 165, 250, 0.6);
        }

        .lesson-spotlight-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .lesson-spotlight-counter {
            color: #334155;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.05em;
        }

        .lesson-spotlight-close {
            position: absolute;
            right: 1rem;
            top: 0.85rem;
            width: 2rem;
            height: 2rem;
            border-radius: 9999px;
            border: 1px solid rgba(148, 163, 184, 0.4);
            background: rgba(255, 255, 255, 0.95);
            color: #334155;
            font-size: 1.2rem;
            font-weight: 700;
            line-height: 1;
        }

        #tools-planner-panel,
        #tools-notes-panel,
        #tools-wheel-panel,
        #tools-flashcards-panel {
            scroll-margin-top: 0.85rem;
        }

        @media (max-width: 768px) {
            .lesson-spotlight-stage {
                min-height: 42vh;
                max-height: 62vh;
                padding: 0.6rem;
            }

            .lesson-spotlight-image {
                max-height: 58vh;
            }
        }

        /* Public about mode */
        body.public-about-mode #welcome-message,
        body.public-about-mode #profile-avatar-shell,
        body.public-about-mode #profile-picture,
        body.public-about-mode #profile-picture-emoji,
        body.public-about-mode #logout-button,
        body.public-about-mode #mobile-logout-button,
        body.public-about-mode a[data-page="account-settings-page"] {
            display: none !important;
        }
        
        @media (min-width: 640px) {
            .fixed.inset-0 > div {
                padding: 2rem;
                margin: 2rem;
            }
        }
        
        /* Improved list spacing */
        ul, ol {
            padding-left: 1.5rem;
            margin: 1rem 0;
        }
        
        li {
            margin: 0.5rem 0;
            line-height: 1.6;
        }
        
        /* Better heading spacing */
        h1, h2, h3, h4, h5, h6 {
            margin-top: 1.5rem;
            margin-bottom: 1rem;
            line-height: 1.3;
        }
        
        h1:first-child, h2:first-child, h3:first-child {
            margin-top: 0;
        }
        
        /* Improved paragraph spacing */
        p {
            margin: 1rem 0;
            line-height: 1.7;
        }
        
        /* Better section spacing */
        section {
            margin: 2rem 0;
        }
        
        @media (min-width: 640px) {
            section {
                margin: 2.5rem 0;
            }
        }
        
        /* Improved accessibility - Skip link */
        .sr-only:focus {
            position: fixed;
            top: 1rem;
            left: 1rem;
            z-index: 99999;
            padding: 0.75rem 1.5rem;
            background: rgb(59, 130, 246);
            color: white;
            border-radius: 0.5rem;
            font-weight: 600;
            text-decoration: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        /* Better table spacing */
        table {
            border-collapse: separate;
            border-spacing: 0;
            width: 100%;
        }
        
        th, td {
            padding: 0.75rem 1rem;
            text-align: left;
        }
        
        th {
            font-weight: 600;
        }
        
        /* Improved spacing utilities */
        .space-y-2 > * + * {
            margin-top: 0.5rem;
        }
        
        .space-y-3 > * + * {
            margin-top: 0.75rem;
        }
        
        .space-y-4 > * + * {
            margin-top: 1rem;
        }
        
        .space-y-6 > * + * {
            margin-top: 1.5rem;
        }
        
        .space-y-8 > * + * {
            margin-top: 2rem;
        }
        
        /* Better gap utilities */
        .gap-2 {
            gap: 0.5rem;
        }
        
        .gap-3 {
            gap: 0.75rem;
        }
        
        .gap-4 {
            gap: 1rem;
        }
        
        .gap-6 {
            gap: 1.5rem;
        }
        
        .gap-8 {
            gap: 2rem;
        }
        
        /* Removed shadows for performance */
        .shadow-premium {
box-shadow: none;
        }
        
        .shadow-premium-lg {
box-shadow: none;
        }
        
        /* Optimized transitions for better UX */
        .transition-all { 
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
will-change: auto;
        }
        .transition-transform { 
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
        }
        .transition-opacity { 
transition: opacity 0.3s ease-in-out;
will-change: opacity;
        }
        .transition-height { 
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
will-change: max-height;
        }
        
        /* Ultra-smooth transitions for premium feel */
        .transition-smooth {
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: auto;
        }
        
        .transition-bounce {
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
will-change: auto;
        }
        
        /* Enhanced hover effects with GPU acceleration */
        .hover-lift {
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
            box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform, box-shadow;
        }
        
        .hover-lift:hover:not(:disabled) {
transform: translateY(-2px) translateZ(0);
        }
        
        .hover-scale {
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
        }
        
        .hover-scale:hover:not(:disabled) {
transform: scale(1.05) translateZ(0);
        }
        
        /* Removed glow effect - no longer needed */
        
        .hover-float {
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
will-change: transform;
        }
        
        .hover-float:hover {
transform: translateY(-8px) translateZ(0);
        }
        
        /* Tooltip base styles */
        .tooltip-layer { position: fixed; z-index: 10000; pointer-events: none; }
        .tooltip { max-width: 280px; font-size: 12px; line-height: 1.4; color: #0f172a; background: rgba(255,255,255,0.95); border: 1px solid rgba(15,23,42,0.08); padding: 8px 10px; border-radius: 8px; box-shadow: 0 10px 30px rgba(2,6,23,0.12); backdrop-filter: blur(10px); }

        /* Upgrade modal polish */
        #upgrade-modal {
            transition: opacity 180ms ease;
        }
        #upgrade-modal > div {
            transform: translateY(8px) scale(0.98);
            opacity: 0;
            transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
        }
        #upgrade-modal:not(.hidden) > div {
            transform: translateY(0) scale(1);
            opacity: 1;
        }

        /* Admin dashboard action/control consistency */
        #admin-panel button,
        #admin-panel select,
        #admin-panel input[type="search"] {
            min-height: 40px;
        }

        #admin-panel .grid button {
            transition: transform 150ms ease, box-shadow 150ms ease;
        }
        #admin-panel .grid button:hover {
            transform: translateY(-1px);
        }

        #admin-panel {
            position: relative;
            isolation: isolate;
        }

        #admin-panel::before {
            content: '';
            position: absolute;
            inset: -8px;
            border-radius: 1.5rem;
            background:
                radial-gradient(circle at 14% 12%, rgba(147, 197, 253, 0.22), transparent 40%),
                radial-gradient(circle at 86% 8%, rgba(34, 211, 238, 0.18), transparent 36%),
                radial-gradient(circle at 82% 90%, rgba(125, 211, 252, 0.16), transparent 42%);
            z-index: -1;
            pointer-events: none;
            filter: blur(6px);
        }

        #admin-panel .bg-white\/70,
        #admin-panel .bg-white\/50 {
            border: 1px solid rgba(219, 234, 254, 0.9);
            background-image: linear-gradient(135deg, rgba(255,255,255,0.93), rgba(248,250,252,0.88));
            backdrop-filter: blur(10px);
        }

        /* Premium button styles without shadows */
        .btn-primary {
background: linear-gradient(135deg, rgb(var(--accent-600)), rgb(var(--accent-700)));
border: none;
color: white;
font-weight: 600;
border-radius: 0.75rem;
padding: 0.875rem 1.75rem;
transition: transform 0.15s ease-out, opacity 0.15s ease-out;
        }
        
        .btn-primary:hover {
background: linear-gradient(135deg, rgb(var(--accent-700)), rgb(var(--accent-600)));
transform: translateY(-1px) translateZ(0);
opacity: 0.95;
        }
        
        .btn-primary:active {
transform: translateY(0) translateZ(0);
        }
        
        .btn-secondary {
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(0, 0, 0, 0.1);
color: #374151;
font-weight: 500;
border-radius: 0.5rem;
padding: 0.75rem 1.5rem;
transition: transform 0.15s ease-out, border-color 0.15s ease-out;
        }
        
        .btn-secondary:hover {
background: rgba(255, 255, 255, 1);
border-color: rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
        }
        
        /* Premium card hover effects without shadows */
        .card-hover {
transition: transform 0.15s ease-out, border-color 0.15s ease-out;
border: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        .card-hover:hover {
transform: translateY(-2px) translateZ(0);
border-color: rgba(0, 0, 0, 0.15);
        }
        
        /* Removed glassmorphism effects */
        .glass-effect {
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        .glass-effect:hover {
background: rgba(255, 255, 255, 1);
border-color: rgba(0, 0, 0, 0.15);
        }
        
        .glass-card {
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        .glass-card:hover {
background: rgba(255, 255, 255, 1);
border-color: rgba(0, 0, 0, 0.15);
        }
        
        /* Custom Folder Icon Styles */
        .folder-icon {
width: 48px;
height: 48px;
background: linear-gradient(180deg, #FFE083 0%, #FFC83D 100%);
border-radius: 8px;
position: relative;
box-shadow: 0 4px 12px rgba(255, 200, 61, 0.35);
transition: all 0.3s ease;
        }
        
        .folder-icon:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(255, 165, 0, 0.4);
        }
        
        .folder-icon::before {
content: '';
position: absolute;
top: 4px;
left: 10px;
width: 28px;
height: 10px;
border-radius: 4px 4px 0 0;
background: linear-gradient(180deg, #FFE083 0%, #FFD253 100%);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
        }
        
        .folder-icon::after {
content: '';
position: absolute;
inset: 0;
border-radius: 8px;
background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 30%, rgba(0,0,0,.05) 100%);
        }
        
        /* Smaller folder icon for list view */
        .folder-icon-sm {
width: 24px;
height: 24px;
background: linear-gradient(180deg, #FFE083 0%, #FFC83D 100%);
border-radius: 4px;
position: relative;
box-shadow: 0 2px 6px rgba(255, 200, 61, 0.35);
transition: all 0.3s ease;
        }
        
        .folder-icon-sm:hover {
transform: scale(1.05);
box-shadow: 0 3px 10px rgba(255, 165, 0, 0.4);
        }
        
        .folder-icon-sm::before {
content: '';
position: absolute;
top: 2px;
left: 4px;
width: 16px;
height: 5px;
border-radius: 2px 2px 0 0;
background: linear-gradient(180deg, #FFE083 0%, #FFD253 100%);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
        }
        
        .folder-icon-sm::after {
content: '';
position: absolute;
inset: 0;
border-radius: 4px;
background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 30%, rgba(0,0,0,.05) 100%);
        }
        
        /* Modern card surface (consistent across landing + app) */
        .modern-card {
    background: rgb(var(--surface));
    border: 1px solid rgba(var(--border), 0.9);
    border-radius: var(--card-radius);
    color: rgb(var(--text));
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
            border-color 0.18s ease,
            box-shadow 0.18s ease;
        }
        
        .modern-card:hover {
    border-color: rgba(var(--brand-400), 0.45);
    transform: translateY(-2px);
        }
        
        /* Enhanced Input Styles */
        .glass-input {
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(0, 0, 0, 0.2);
transition: border-color 0.15s ease-out;
        }
        
        .glass-input:focus {
background: rgba(255, 255, 255, 1);
border-color: rgba(59, 130, 246, 0.5);
outline: 2px solid rgba(59, 130, 246, 0.2);
outline-offset: 2px;
        }
        
        /* Cleaner text (remove glow/shadows for a more professional look) */
        .glass-text { color: rgba(var(--text), 0.95); text-shadow: none; }
        .glass-text-light { color: rgba(var(--text-muted), 0.92); text-shadow: none; }
        .modern-card h1, .modern-card h2, .modern-card h3 { color: rgba(var(--text), 0.98); text-shadow: none; }
        .modern-card p { color: rgba(var(--text-muted), 0.95); text-shadow: none; }
        
        /* Buttons: consistent sizing/weight/shape; colors come from brand palette */
        .glass-button {
    background: linear-gradient(135deg, rgb(var(--brand-600)), rgb(var(--brand-700)));
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--button-radius);
    color: white;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.1;
    padding: 0.7rem 1.2rem;
    font-size: 0.95rem;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.18s ease,
            box-shadow 0.18s ease;
        }
        
        .glass-button:hover {
    transform: translateY(-1px);
    opacity: 0.96;
        }
        
        .glass-button:active {
    transform: translateY(0);
        }

        /* Brand helpers for landing (no new theme, just consistent tokens) */
        .brand-text { color: rgb(var(--brand-600)); }
        .brand-cta { background: linear-gradient(135deg, rgb(var(--brand-600)), rgb(var(--brand-700))); }
        .btn-secondary {
    background: transparent;
    border: 2px solid rgb(var(--brand-600));
    border-radius: var(--button-radius);
    color: rgb(var(--brand-700));
    font-weight: 800;
    letter-spacing: 0.2px;
    padding: 0.65rem 1.15rem;
    transition: background-color 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .btn-secondary:hover { background-color: rgba(var(--brand-50), 0.9); transform: translateY(-1px); }
        .btn-secondary:active { transform: translateY(0); }
        .btn-inverse {
    background: rgb(var(--surface));
    border: 1px solid rgba(var(--border), 0.85);
    border-radius: var(--button-radius);
    color: rgb(var(--brand-700));
    font-weight: 800;
    letter-spacing: 0.2px;
    padding: 0.65rem 1.15rem;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.18s ease;
        }
        .btn-inverse:hover { background-color: rgba(var(--brand-50), 0.8); transform: translateY(-1px); }
        .btn-inverse:active { transform: translateY(0); }
        
        /* Enhanced input placeholder */
        .glass-input::placeholder {
color: rgba(107, 114, 128, 0.8);
        }
        
        /* Subtle accent colors for better visual hierarchy */
        .accent-blue {
color: rgba(37, 99, 235, 0.9);
        }
        
        .accent-green {
color: rgba(34, 197, 94, 0.9);
        }
        
        .accent-yellow {
color: rgba(234, 179, 8, 0.9);
        }
        
        /* Professional focus states */
        .focus-ring:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 0 0 2px rgb(var(--accent-500));
        }
        
        /* Loading states */
        .loading-shimmer {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
        }
        
        @keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
        }
        
        /* Button loading states */
        .btn-loading {
position: relative;
color: transparent !important;
        }
        
        .btn-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
        }
        
        /* Disabled state improvements */
        button:disabled,
        input:disabled,
        select:disabled,
        textarea:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
        }
        
        /* Better focus indicators */
        .focus-ring:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 0 0 2px rgb(var(--accent-500));
        }
        
        /* Improved hover states */
        .hover-lift:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .hover-scale:hover:not(:disabled) {
transform: scale(1.02);
        }
        
        /* Performance optimizations */
        .will-change-transform { will-change: transform; }
        .will-change-opacity { will-change: opacity; }
        .gpu-accelerated { transform: translateZ(0); }
        
        /* Lazy loading optimization */
        .lazy-image {
opacity: 0;
transition: opacity 0.3s ease-in-out;
        }
        .lazy-image.loaded {
opacity: 1;
        }
        
        /* Reduced motion support */
        @media (prefers-reduced-motion: reduce) {
* {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}
        }
        
        /* High contrast mode support */
        @media (prefers-contrast: high) {
.card-hover {
    border-width: 2px;
    border-color: #000;
}
.btn-primary {
    border: 2px solid #000;
}
        }
        /* Enhanced Navigation Animations */
        .nav-link {
position: relative;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
transform: translateZ(0);
overflow: visible;
        }
        
        .nav-link::before {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 100%;
height: 3px;
background: linear-gradient(90deg, rgb(var(--accent-600)), rgb(var(--accent-700)));
border-radius: 2px;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
opacity: 0;
z-index: 1;
        }
        
        .nav-link:hover::before {
transform: translateX(-50%) scaleX(1);
opacity: 1;
        }
        
        /* Active navigation link style */
        .nav-link.active {
color: rgb(var(--accent-600));
font-weight: 700;
outline: none !important;
        }

        #app-status-banner {
            margin: 0 1rem;
            margin-top: 0.85rem;
            border-radius: 1rem;
            border: 1px solid rgba(251, 191, 36, 0.35);
            background: linear-gradient(135deg, rgba(255, 251, 235, 0.96), rgba(255, 247, 237, 0.92));
            color: #92400e;
            padding: 0.95rem 1rem;
            box-shadow: 0 16px 32px -28px rgba(146, 64, 14, 0.45);
        }

        #app-status-banner.is-error {
            border-color: rgba(248, 113, 113, 0.35);
            background: linear-gradient(135deg, rgba(254, 242, 242, 0.98), rgba(255, 241, 242, 0.96));
            color: #b91c1c;
        }

        #app-status-banner.is-success {
            border-color: rgba(74, 222, 128, 0.35);
            background: linear-gradient(135deg, rgba(240, 253, 244, 0.98), rgba(236, 253, 245, 0.96));
            color: #166534;
        }
        
        .nav-link.active::before {
transform: translateX(-50%) scaleX(1);
opacity: 1;
        }
        
        /* Override old nav-link styles for enhanced animations */
        .nav-link {
border: none !important;
        }
        /* Remove conflicting pseudo-elements but keep our enhanced ones */
        /* Note: The ::before for underline animation is defined above */
        /* Ensure proper focus states - remove blue outline, keep only color for active */
        .nav-link:focus { 
outline: none !important;
box-shadow: none !important;
        }
        
        .nav-link:focus-visible {
outline: none !important;
box-shadow: none !important;
        }
        
        .nav-link:hover {
transform: translateY(-1px) translateZ(0);
border: none !important;
        }
        
        .nav-link.active {
border: none !important;
outline: none !important;
box-shadow: none !important;
        }
        /* Prose styles for text content pages */
        .prose { max-width: 65ch; }
        .prose-lg { font-size: 1.125rem; line-height: 1.777; }
        .prose h2 { font-size: 2.25rem; line-height: 2.5rem; margin-bottom: 1rem; font-weight: 800; }
        .prose h3 { font-size: 1.5rem; line-height: 2rem; margin-top: 2rem; margin-bottom: 1rem; font-weight: 700; }
        .prose p { margin-bottom: 1.25em; }
        .prose blockquote { border-left-width: 4px; border-left-color: #3b82f6; padding-left: 1rem; font-style: italic; }
        .prose img { border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

        /* Accent utility overrides for existing Tailwind blue classes */
        .text-blue-600 { color: rgb(var(--accent-600)) !important; }
        .text-blue-700 { color: rgb(var(--accent-700)) !important; }
        .bg-blue-50 { background-color: rgb(var(--accent-50)) !important; }
        .bg-blue-100 { background-color: rgb(var(--accent-100)) !important; }
        .bg-blue-500 { background-color: rgb(var(--accent-500)) !important; }
        .bg-blue-600 { background-color: rgb(var(--accent-600)) !important; }
        .hover\:text-blue-600:hover { color: rgb(var(--accent-600)) !important; }
        .hover\:bg-blue-50:hover { background-color: rgb(var(--accent-50)) !important; }
        .hover\:bg-blue-700:hover { background-color: rgb(var(--accent-700)) !important; }
        .focus\:ring-blue-300:focus { --tw-ring-color: rgb(var(--accent-300)) !important; }
        .focus\:ring-blue-400:focus { --tw-ring-color: rgb(var(--accent-400)) !important; }
        .ring-blue-500 { --tw-ring-color: rgb(var(--accent-500)) !important; }
        .ring-blue-300 { --tw-ring-color: rgb(var(--accent-300)) !important; }
        .ring-blue-400 { --tw-ring-color: rgb(var(--accent-400)) !important; }
        .border-blue-200 { border-color: rgb(var(--accent-100)) !important; }
        .border-blue-300 { border-color: rgb(var(--accent-300)) !important; }
        .border-blue-400 { border-color: rgb(var(--accent-400)) !important; }
        .hover\:border-blue-400:hover { border-color: rgb(var(--accent-400)) !important; }

        /* ═══════════════════════════════════════════════════════════════ */
        /* ENHANCED PREMIUM UI ANIMATIONS - Modern & Sleek Design System */
        /* ═══════════════════════════════════════════════════════════════ */
        /* Upgraded for 2026: Enhanced with blur effects, smooth easing, */
        /* GPU acceleration, and consistent timing for professional feel. */
        /* ═══════════════════════════════════════════════════════════════ */
        @keyframes fadeIn { 
from { opacity: 0; transform: translateZ(0); } 
to { opacity: 1; transform: translateZ(0); } 
        }
        
        /* Optimized page transitions - faster and simpler */
        .page-enter-modern { 
animation: fadeInUp 200ms ease-out both; 
        }
        .page-leave-modern { 
animation: fadeOut 150ms ease-in both; 
        }
        @keyframes fadeInUp {
0% { 
    opacity: 0; 
    transform: translateY(8px) translateZ(0); 
}
100% { 
    opacity: 1; 
    transform: translateY(0) translateZ(0); 
}
        }
        @keyframes fadeOut {
0% { 
    opacity: 1; 
    transform: translateY(0) translateZ(0); 
}
100% { 
    opacity: 0; 
    transform: translateY(-4px) translateZ(0); 
}
        }

        /* Optimized AOS animations - faster */
        [data-animate] { opacity: 1; }
        .aos-animate { opacity: 1; }
        .aos-fade-up { animation: fadeUp 300ms ease-out both; }
        .aos-blur-in { animation: fadeUp 300ms ease-out both; }
        .aos-zoom-in { animation: zoomIn 300ms ease-out both; }
        .aos-slide-right { animation: slideRight 300ms ease-out both; }
        @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes blurIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes zoomIn { 0% { opacity: 0; transform: scale(0.98); } 100% { opacity: 1; transform: scale(1); } }
        @keyframes slideRight { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes fadeOut { 
from { opacity: 1; transform: translateZ(0); } 
to { opacity: 0; transform: translateZ(0); } 
        }
        @keyframes slideInUp { 
from { 
    transform: translateY(10px) translateZ(0); 
    opacity: 0; 
} 
to { 
    transform: translateY(0) translateZ(0); 
    opacity: 1; 
} 
        }

/* ---------- UI Motion & Polishing ---------- */
:root {
    --motion-fast: 160ms;
            @keyframes floatUp {
                from { opacity: 0; transform: translateY(10px) scale(0.99); }
                to { opacity: 1; transform: translateY(0) scale(1); }
            }
            @keyframes fadeInBackdrop {
                from { opacity: 0; backdrop-filter: blur(0px); }
                to { opacity: 1; backdrop-filter: blur(6px); }
            }
    --motion-medium: 320ms;
    --motion-slow: 520ms;
    --easing-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --easing-pop: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Page transitions used by showPage() */
.page-enter-modern {
    animation: pageEnter var(--motion-medium) var(--easing-soft) both;
}
.page-leave-modern {
    animation: pageLeave var(--motion-fast) var(--easing-pop) both;
}
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(6px) scale(0.998); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pageLeave {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-6px) scale(0.998); }
}

/* Buttons & controls: smoother hover + subtle lift */
button, .btn {
    transition: transform var(--motion-fast) var(--easing-pop),
                box-shadow var(--motion-fast) var(--easing-pop),
                background-color var(--motion-fast) var(--easing-pop);
}
button:hover, .btn:hover { transform: translateY(-2px); }
button:active, .btn:active { transform: translateY(0); }

/* Focus ring for keyboard navigation */
.focus-ring { box-shadow: 0 0 0 4px rgba(59,130,246,0.12) !important; outline: none !important; }

/* Improve modal backdrop smoothing */
.modal-backdrop { transition: opacity var(--motion-medium) ease, backdrop-filter var(--motion-medium) ease; }

/* Mobile menu: ensure hardware-accelerated transform */
#mobile-menu.menu-open { will-change: transform, opacity; }

/* Mobile menu base/off-canvas state for smoother open/close */
#mobile-menu {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}

#mobile-menu.menu-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Card elevation and subtle hover */
.card, .bg-white\/50, .bg-white { transition: box-shadow var(--motion-fast) var(--easing-pop), transform var(--motion-fast) var(--easing-pop); }
.card:hover { box-shadow: 0 10px 30px rgba(2,6,23,0.08); transform: translateY(-4px); }

/* Toasts and small components */
#toast-container > * { transition: transform var(--motion-fast) var(--easing-pop), opacity var(--motion-fast) ease; }

/* Reduce motion for users who prefer reduced-motion */
@media (prefers-reduced-motion: reduce) {
    :root { --motion-fast: 0ms; --motion-medium: 0ms; --motion-slow: 0ms; }
    * { transition: none !important; animation: none !important; }
}
        @keyframes slideInDown { 
from { 
    transform: translateY(-10px) translateZ(0); 
    opacity: 0; 
} 
to { 
    transform: translateY(0) translateZ(0); 
    opacity: 1; 
} 
        }
        @keyframes slideInLeft { 
from { 
    transform: translateX(-10px) translateZ(0); 
    opacity: 0; 
} 
to { 
    transform: translateX(0) translateZ(0); 
    opacity: 1; 
} 
        }
        @keyframes slideInRight { 
from { 
    transform: translateX(10px) translateZ(0); 
    opacity: 0; 
} 
to { 
    transform: translateX(0) translateZ(0); 
    opacity: 1; 
} 
        }
        @keyframes pop { 
0% { 
    transform: scale(0.8) translateZ(0); 
    opacity: 0.7;
} 
50% { 
    transform: scale(1.08) translateZ(0); 
    opacity: 1;
} 
100% { 
    transform: scale(1) translateZ(0); 
    opacity: 1;
} 
        }
        @keyframes bounce { 
0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); } 
40%, 43% { transform: translate3d(0, -8px, 0); } 
70% { transform: translate3d(0, -4px, 0); } 
90% { transform: translate3d(0, -2px, 0); } 
        }
        @keyframes pulse { 
0% { transform: scale(1) translateZ(0); } 
50% { transform: scale(1.05) translateZ(0); } 
100% { transform: scale(1) translateZ(0); } 
        }
        
        .fade-in { 
animation: fadeIn 200ms ease-out forwards; 
        }
        .slide-in-up { 
animation: slideInUp 250ms ease-out forwards; 
        }
        .slide-in-down { 
animation: slideInDown 250ms ease-out forwards; 
        }
        .slide-in-left { 
animation: slideInLeft 250ms ease-out forwards; 
        }
        .slide-in-right { 
animation: slideInRight 250ms ease-out forwards; 
        }
        .page-transition-enter { 
animation: slideInUp 200ms ease-out both; 
        }
        .bounce { animation: bounce 1s ease-in-out; }
        .pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
        /* Star icon animation */
        .star-icon { transition: transform 0.2s ease, color 0.2s ease; position: relative; }
        .star-icon.starred { color: #facc15; transform: scale(1.15); }
        .star-icon:hover { transform: scale(1.35); }
        .star-icon.pop-animation { animation: pop 0.28s ease-out forwards; }
        /* Sparkle burst for starring */
        .sparkle-burst { position: absolute; inset: 0; pointer-events: none; }
        .sparkle-burst span { position: absolute; width: 6px; height: 6px; border-radius: 9999px; background: rgb(var(--accent-300)); opacity: 0; }
        @keyframes sparkleOut { 0% { transform: translate(0,0) scale(0.4); opacity: 0.9; } 100% { transform: translate(var(--tx), var(--ty)) scale(0.6); opacity: 0; } }
        /* Aspect ratio for embeds */
        .aspect-w-16 { position: relative; padding-bottom: 56.25%; }
        .aspect-h-9 { position: relative; padding-bottom: 56.25%; height: 0; }
        .aspect-w-16 > iframe, .aspect-h-9 > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
        /* Calendar styles */
        .calendar-day.today { background-color: rgb(var(--accent-100)); color: rgb(var(--accent-700)); font-weight: bold; }
        .calendar-day.has-event { position: relative; }
        .calendar-day.has-event::after {
content: ''; position: absolute; bottom: 6px; left: 50%;
transform: translateX(-50%); width: 6px; height: 6px;
    border-radius: 50%; background-color: rgb(var(--accent-500));
        }

        .calendar-day.has-holiday {
            background-color: rgba(254, 243, 199, 0.55);
            border-color: rgba(245, 158, 11, 0.35);
        }

        .calendar-day.has-holiday:hover {
            background-color: rgba(253, 230, 138, 0.6);
            border-color: rgba(245, 158, 11, 0.55);
        }

        .calendar-holiday-tag {
            margin-top: auto;
            align-self: flex-start;
            padding: 0.12rem 0.45rem;
            border-radius: 9999px;
            background: rgba(217, 119, 6, 0.12);
            color: rgb(146, 64, 14);
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .calendar-holiday-name {
            margin-top: 0.25rem;
            font-size: 0.68rem;
            font-weight: 700;
            line-height: 1.15;
            color: rgb(120, 53, 15);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    /* Low-spec mode: trade blur for speed */
    .low-spec .backdrop-blur,
    .low-spec .backdrop-blur-sm,
    .low-spec .backdrop-blur-md,
    .low-spec .backdrop-blur-lg,
    .low-spec .backdrop-blur-xl,
    .low-spec [class*="backdrop-blur-"] {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
        .calendar-day.has-global-event::after { background-color: #16a34a; }

        /* Calendar hover outline should follow the accent palette */
        .calendar-day:hover {
            background-color: rgba(var(--accent-50), .7);
            border-color: rgb(var(--accent-400));
        }
        /* Landing Page Specific Animations - Optimized */
        .animate-hero-title { animation: slideInUp 300ms ease-out 50ms forwards; opacity: 0; }
        .animate-hero-subtitle { animation: slideInUp 300ms ease-out 100ms forwards; opacity: 0; }
        .animate-hero-buttons { animation: slideInUp 300ms ease-out 150ms forwards; opacity: 0; }
        .animate-feature-card { animation: slideInUp 250ms ease-out forwards; opacity: 0; }
        /* Clock styles */
        /* Gmail-style indeterminate progress bar */
        .progress-bar { position: relative; height: 6px; overflow: hidden; border-radius: 9999px; background: #e5e7eb; }
        .progress-bar .bar { position: absolute; height: 100%; background: #2563eb; will-change: left, right; }
        .progress-bar .bar1 { animation: indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; }
        .progress-bar .bar2 { animation: indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; background: rgba(37, 99, 235, 0.7); }
        @keyframes indeterminate1 {
0% { left: -35%; right: 100%; }
60% { left: 100%; right: -90%; }
100% { left: 100%; right: -90%; }
        }
        @keyframes indeterminate2 {
0% { left: -200%; right: 100%; }
60% { left: 107%; right: -8%; }
100% { left: 107%; right: -8%; }
        }
        /* Subtle floating animation for logo - optimized */
        .animate-logo { animation: logoFloat 4s ease-in-out infinite; }
        @keyframes logoFloat {
0% { transform: translateY(4px) translateZ(0); opacity: .95; }
50% { transform: translateY(-2px) translateZ(0); opacity: 1; }
100% { transform: translateY(4px) translateZ(0); opacity: .95; }
        }
        
        /* Remove all shadows and borders from logos */
        img[alt*="Logo"], img[alt*="logo"], img[src*="gcsemate"], .animate-logo {
box-shadow: none !important;
border: none !important;
outline: none !important;
filter: none !important;
        }
        /* Note: Avoid global suppression of blur/shadows. Tailwind utilities handle this.
           Use the `.low-spec` class for performance-focused fallbacks instead. */

        /* Seamless page loading overlay */
        #page-loading-overlay { background: rgba(255,255,255,0.86); opacity: 0; transition: opacity 220ms ease; pointer-events: none; display: flex; align-items: center; justify-content: center; }
        #page-loading-overlay.visible { opacity: 1; pointer-events: auto; }
        .loading-orb { width: 54px; height: 54px; border-radius: 9999px; border: 3px solid rgba(59,130,246,0.15); border-top-color: rgb(var(--accent-600)); animation: spin 820ms linear infinite; }
        .loading-pulse { width: 12px; height: 12px; border-radius: 9999px; background: rgb(var(--accent-600)); animation: pulseDot 900ms ease-in-out infinite; }
        .loading-pulse:nth-child(2) { animation-delay: 120ms; }
        .loading-pulse:nth-child(3) { animation-delay: 240ms; }
        @keyframes pulseDot { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(-6px); opacity: 1; } }

        /* Brand polish: subtle gradients and hover states */
        .brand-gradient { background-image: linear-gradient(135deg, rgba(var(--accent-50),1) 0%, rgba(var(--accent-100),1) 100%); }
        .hover-raise { transition: transform .32s cubic-bezier(.22,1,.36,1), box-shadow .32s ease; }
        .hover-raise:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.08); }
        .hover-tint:hover { background-color: rgba(var(--accent-50), .8); }
        a.nav-link { transition: color .2s ease, background-color .2s ease; border-radius: .5rem; padding-left: .5rem; padding-right: .5rem; }
        a.nav-link:hover { background-color: rgba(var(--accent-50), .7); color: rgb(var(--accent-600)); }

        .modern-card,
        .glass-card-premium,
        .about-hero-card,
        .blog-card,
        .checkout-shell,
        .checkout-success-card {
            position: relative;
            isolation: isolate;
            overflow: hidden;
        }

        .modern-card::before,
        .glass-card-premium::before,
        .about-hero-card::before,
        .blog-card::before,
        .checkout-shell::before,
        .checkout-success-card::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            background:
                radial-gradient(circle at top right, rgba(var(--accent-100), 0.34), transparent 34%),
                linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94));
            opacity: 0.95;
        }

        .modern-card::after,
        .glass-card-premium::after,
        .about-hero-card::after,
        .blog-card::after,
        .checkout-shell::after,
        .checkout-success-card::after {
            content: '';
            position: absolute;
            inset: 1px;
            border-radius: inherit;
            border: 1px solid rgba(255,255,255,0.55);
            pointer-events: none;
            opacity: 0.88;
        }

        .modern-card,
        .glass-card-premium,
        .blog-card,
        .checkout-shell {
            transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease, border-color 280ms ease;
            box-shadow: 0 18px 48px -34px rgba(15, 23, 42, 0.18);
        }

        .modern-card:hover,
        .glass-card-premium:hover,
        .blog-card:hover,
        .checkout-shell:hover {
            transform: translateY(-4px);
            box-shadow: 0 28px 72px -38px rgba(37, 99, 235, 0.22);
        }

        .checkout-shell {
            background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.58));
            backdrop-filter: blur(18px);
        }

        .checkout-notes-panel {
            background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.88));
        }

        .checkout-embed-shell {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at top right, rgba(var(--accent-50), 0.85), transparent 32%),
                linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,0.96));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 18px 40px -34px rgba(37, 99, 235, 0.22);
        }

        .checkout-success-card {
            background:
                radial-gradient(circle at top center, rgba(var(--brand-100), 0.78), transparent 38%),
                linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
            animation: checkoutSuccessPop 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .checkout-success-glow {
            position: absolute;
            inset: -25% auto auto 50%;
            width: 18rem;
            height: 18rem;
            transform: translateX(-50%);
            border-radius: 9999px;
            background: radial-gradient(circle, rgba(var(--accent-100), 0.5) 0%, rgba(var(--brand-50), 0.15) 45%, transparent 72%);
            pointer-events: none;
        }

        .checkout-success-kicker {
            font-size: 0.76rem;
            font-weight: 800;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: rgb(var(--accent-700));
        }

        .checkout-success-icon-wrap {
            position: relative;
            display: inline-flex;
            margin-top: 0.5rem;
        }

        .checkout-success-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 5rem;
            height: 5rem;
            border-radius: 1.6rem;
            background: linear-gradient(135deg, rgb(var(--accent-600)), rgb(var(--accent-700)));
            color: white;
            font-size: 1.6rem;
            box-shadow: 0 24px 60px -28px rgba(37, 99, 235, 0.46);
            animation: checkoutBadgePulse 1.8s ease-in-out infinite;
        }

        .checkout-success-steps {
            display: grid;
            gap: 0.9rem;
        }

        .checkout-success-step {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 0.85rem;
            align-items: start;
            padding: 1rem 1rem 1rem 0.95rem;
            border-radius: 1rem;
            border: 1px solid rgba(226, 232, 240, 0.9);
            background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.84));
            opacity: 0;
            animation: checkoutStepIn 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        .checkout-success-step:nth-child(1) { animation-delay: 90ms; }
        .checkout-success-step:nth-child(2) { animation-delay: 180ms; }
        .checkout-success-step:nth-child(3) { animation-delay: 270ms; }

        .checkout-success-step-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.4rem;
            height: 2.4rem;
            border-radius: 9999px;
            background: linear-gradient(135deg, rgba(var(--accent-100), 0.95), rgba(var(--brand-50), 0.95));
            color: rgb(var(--accent-700));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
        }

        @keyframes checkoutSuccessPop {
            0% { opacity: 0; transform: translateY(18px) scale(0.97); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        @keyframes checkoutStepIn {
            0% { opacity: 0; transform: translateY(10px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        @keyframes checkoutBadgePulse {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-2px) scale(1.03); }
        }

        a.nav-link,
        button {
            position: relative;
            overflow: hidden;
        }

        a.nav-link::after,
        button::after {
            content: '';
            position: absolute;
            inset: auto auto 0.25rem 0.6rem;
            width: calc(100% - 1.2rem);
            height: 2px;
            border-radius: 9999px;
            background: linear-gradient(90deg, rgba(var(--accent-300), 0), rgba(var(--accent-500), 0.85), rgba(var(--accent-300), 0));
            transform: scaleX(0.2);
            transform-origin: center;
            opacity: 0;
            transition: transform 240ms ease, opacity 240ms ease;
        }

        a.nav-link:hover::after,
        button:hover::after {
            transform: scaleX(1);
            opacity: 1;
        }

        #toast-container > * {
            animation: toastFloatIn 340ms cubic-bezier(0.22, 1, 0.36, 1);
            box-shadow: 0 22px 48px -28px rgba(15, 23, 42, 0.22);
        }

        @keyframes toastFloatIn {
            0% { opacity: 0; transform: translateY(10px) scale(0.98); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        body.dark-theme .checkout-shell,
        body.dark-theme .checkout-success-card,
        body.dark-theme .checkout-notes-panel,
        body.dark-theme .checkout-embed-shell {
            background-image: linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.84)) !important;
            border-color: rgba(96, 165, 250, 0.16) !important;
            color: #e2e8f0 !important;
        }

        body.dark-theme .checkout-success-step {
            background: linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.78));
            border-color: rgba(96, 165, 250, 0.16);
        }

        body.dark-theme .checkout-success-step p,
        body.dark-theme .checkout-success-step a,
        body.dark-theme .checkout-success-card .text-slate-900,
        body.dark-theme .checkout-success-card .text-slate-600,
        body.dark-theme .app-loading-caption,
        body.dark-theme .app-loading-subcaption {
            color: #dbeafe !important;
        }

        body.dark-theme #app-loading {
            background:
                radial-gradient(circle at 18% 18%, rgba(var(--accent-700), 0.34), transparent 30%),
                radial-gradient(circle at 82% 14%, rgba(var(--accent-400), 0.24), transparent 28%),
                radial-gradient(circle at 50% 100%, rgba(15, 23, 42, 0.8), transparent 38%),
                linear-gradient(145deg, rgba(2, 6, 23, 0.98), rgba(15, 23, 42, 0.98));
        }

        body.dark-theme #app-loading {
            background:
                radial-gradient(circle at 18% 18%, rgba(59, 130, 246, 0.08), transparent 30%),
                radial-gradient(circle at 82% 14%, rgba(191, 219, 254, 0.12), transparent 28%),
                radial-gradient(circle at 50% 100%, rgba(226, 232, 240, 0.78), transparent 38%),
                linear-gradient(145deg, #f8fafc, #eff6ff 55%, #dbeafe 100%);
            color: #0f172a;
        }

        body.dark-theme .app-loading-shell {
            border-color: rgba(148, 163, 184, 0.18);
            background: rgba(255, 255, 255, 0.78);
        }

        body.dark-theme .app-splash-ring {
            border-color: rgba(148, 163, 184, 0.24);
            border-top-color: #60a5fa;
        }

        body.dark-theme .app-splash-dot {
            background: linear-gradient(135deg, #60a5fa, #a78bfa);
        }
        body.dark-theme .landing-subject-name {
            color: #e2e8f0;
        }

        body.dark-theme .landing-subjects-copy {
            color: #cbd5e1;
        }

        body.dark-theme .landing-subject-item {
            background: rgba(15, 23, 42, 0.84);
            border-color: rgba(96, 165, 250, 0.26);
        }
        
        /* Mobile menu optimizations */
        #mobile-menu { padding-top: env(safe-area-inset-top, 0); }
        #mobile-menu .nav-link { min-height: 56px; letter-spacing: .2px; justify-content: center; text-align: center; }

        /* Low-spec mode tuning for ultra-smoothness */
        .low-spec .hover-raise:hover { transform: none; box-shadow: 0 8px 18px rgba(0,0,0,.06); }
        .low-spec .page-enter-modern { animation-duration: 360ms; }
        .low-spec .page-leave-modern { animation-duration: 240ms; }
        #dashboard-clock {
    font-feature-settings: 'tnum'; /* Tabular nums for non-jumping clock */
    font-family: inherit;
        }
        /* IP Address and Location Highlighting */
        .ip-address {
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
background: linear-gradient(135deg, #3B82F6, #1D4ED8);
color: white;
padding: 2px 8px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
display: inline-block;
margin: 2px;
        }
        
        .location-info {
background: linear-gradient(135deg, #10B981, #059669);
color: white;
padding: 2px 8px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
display: inline-block;
margin: 2px;
        }
        
        .activity-item {
transition: all 0.2s ease;
border-left: 3px solid transparent;
        }
        
        .activity-item:hover {
background-color: #F8FAFC;
border-left-color: #3B82F6;
transform: translateX(2px);
        }
        
        .activity-item.session-start {
border-left-color: #3B82F6;
        }
        
        .activity-item.subject-start {
border-left-color: #8B5CF6;
        }
        
        .activity-item.file-open {
border-left-color: #10B981;
        }
        
        .activity-item.file-close {
border-left-color: #EF4444;
        }
        
        .activity-item.heartbeat {
border-left-color: #6B7280;
        }
        
        /* Real-time Activity Dashboard */
        .activity-feed {
scrollbar-width: thin;
scrollbar-color: #CBD5E1 #F1F5F9;
        }
        
        .activity-feed::-webkit-scrollbar {
width: 6px;
        }
        
        .activity-feed::-webkit-scrollbar-track {
background: #F1F5F9;
border-radius: 3px;
        }
        
        .activity-feed::-webkit-scrollbar-thumb {
background: #CBD5E1;
border-radius: 3px;
        }
        
        .activity-feed::-webkit-scrollbar-thumb:hover {
background: #94A3B8;
        }
        
        /* Live indicator animation */
        .live-indicator {
animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
0%, 100% {
    opacity: 1;
}
50% {
    opacity: 0.5;
}
        }
        
        /* Enhanced table styling */
        .activity-table {
border-collapse: separate;
border-spacing: 0;
        }
        
        .activity-table th {
background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
border-bottom: 2px solid #E2E8F0;
        }
        
        .activity-table tr:hover {
background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
        }
        
        .activity-table td {
border-bottom: 1px solid #F1F5F9;
        }
        
        /* Status indicators */
        .status-online {
background: linear-gradient(135deg, #10B981, #059669);
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
        }
        
        .status-offline {
background: linear-gradient(135deg, #6B7280, #4B5563);
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
        }
        
        /* Calendar Styling */
        .calendar-day {
transition: all 0.2s ease;
position: relative;
        }
        
        .calendar-day:hover {
transform: scale(1.05);
z-index: 10;
        }
        
        .calendar-day.has-activity {
background: linear-gradient(135deg, #10B981, #059669);
color: white;
font-weight: 600;
        }
        
        .calendar-day.has-study {
background: linear-gradient(135deg, #3B82F6, #1D4ED8);
color: white;
font-weight: 600;
        }
        
        .calendar-day.has-both {
background: linear-gradient(135deg, #8B5CF6, #7C3AED);
color: white;
font-weight: 600;
        }
        
        .calendar-day::after {
content: '';
position: absolute;
bottom: 2px;
right: 2px;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
opacity: 0;
transition: opacity 0.2s ease;
        }
        
        .calendar-day.has-activity::after,
        .calendar-day.has-study::after,
        .calendar-day.has-both::after {
opacity: 1;
        }
        
        /* Chart Styling */
        .chart-container {
background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
border-radius: 12px;
padding: 16px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        
        .chart-bar {
transition: all 0.3s ease;
cursor: pointer;
        }
        
        .chart-bar:hover {
transform: scaleY(1.1);
filter: brightness(1.1);
        }

        body.dark-theme #calendar-page > .bg-white\/50,
        body.dark-theme #calendar-page > div.bg-white\/50,
        body.dark-theme #calendar-page .bg-white\/50,
        body.dark-theme #calendar-page .bg-white\/70 {
            background: linear-gradient(145deg, rgba(15, 23, 42, 0.86), rgba(30, 41, 59, 0.74), rgba(30, 64, 175, 0.12)) !important;
            border-color: rgba(96, 165, 250, 0.18) !important;
        }

        body.dark-theme #month-year-header,
        body.dark-theme #calendar-page label,
        body.dark-theme #calendar-page .text-gray-700,
        body.dark-theme #calendar-page .text-gray-600 {
            color: #dbeafe !important;
        }

        body.dark-theme #calendar-page button {
            background: rgba(15, 23, 42, 0.6);
            border-color: rgba(96, 165, 250, 0.16);
            color: #dbeafe;
        }

        body.dark-theme #calendar-page button:hover {
            background: rgba(30, 41, 59, 0.84);
        }

        body.dark-theme .calendar-day {
            background: linear-gradient(145deg, rgba(15, 23, 42, 0.74), rgba(30, 41, 59, 0.66));
            border: 1px solid rgba(96, 165, 250, 0.1);
            color: #cbd5e1;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
        }

        body.dark-theme .calendar-day:hover {
            transform: translateY(-2px) scale(1.03);
            box-shadow: 0 14px 32px -24px rgba(59, 130, 246, 0.5);
        }

        body.dark-theme .calendar-day.today {
            background: linear-gradient(145deg, rgba(var(--accent-600), 0.42), rgba(var(--accent-700), 0.36));
            color: #eff6ff;
        }
        
        /* Heatmap Styling */
        .heatmap-cell {
transition: all 0.2s ease;
cursor: pointer;
        }
        
        .heatmap-cell:hover {
transform: scale(1.2);
z-index: 5;
        }
        
        /* Daily Details Styling */
        .daily-stat-card {
background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
border: 1px solid #E2E8F0;
transition: all 0.2s ease;
        }
        
        .daily-stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }
        
        /* Custom Tooltip */
        /* Enhanced tooltip styles - Apple/Microsoft inspired */
        .custom-tooltip {
position: absolute;
background: rgba(17, 24, 39, 0.95);
color: white;
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
pointer-events: none;
z-index: 10000;
opacity: 0;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
max-width: 240px;
word-wrap: break-word;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .custom-tooltip.show {
opacity: 1;
transform: translateY(-2px);
        }
        
        /* Enhanced button styles inspired by modern design systems */
        .btn-primary {
    background: linear-gradient(135deg, rgb(var(--brand-600)) 0%, rgb(var(--brand-700)) 100%);
border: none;
border-radius: 12px;
padding: 12px 24px;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.1;
color: white;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(2, 6, 23, 0.08);
        }
        .btn-primary:hover {
transform: translateY(-1px);
    box-shadow: 0 12px 34px rgba(2, 6, 23, 0.12);
        }
        .btn-primary:active {
transform: translateY(0);
        }
        
        /* Enhanced Card Effects - Modern & Sleek without glassmorphism */
        .card-modern {
background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(var(--border), 0.9);
    border-radius: var(--card-radius);
transition: transform 0.15s ease-out, border-color 0.15s ease-out;
        }
        .card-modern:hover {
transform: translateY(-2px) translateZ(0);
    border-color: rgba(var(--brand-400), 0.45);
        }
        .card-modern:active {
transform: translateY(0) translateZ(0);
        }
        
        /* Enhanced focus indicators for better accessibility */
        *:focus {
    outline: 2px solid rgb(var(--brand-500));
outline-offset: 2px;
        }
        
        *:focus:not(:focus-visible) {
outline: none;
        }
        
        /* Modern Button Enhancements without glassmorphism */
        .glass-button {
background: linear-gradient(135deg, rgba(59, 130, 246, 1), rgba(37, 99, 235, 1));
border: 1px solid rgba(0, 0, 0, 0.1);
transition: transform 0.15s ease-out, opacity 0.15s ease-out;
        }
        
        .glass-button:hover {
background: linear-gradient(135deg, rgba(59, 130, 246, 1), rgba(37, 99, 235, 1));
transform: translateY(-1px) translateZ(0);
opacity: 0.95;
        }
        
        .glass-button:active {
transform: translateY(0) translateZ(0);
        }
        
        /* Skip link for screen readers */
        .skip-link {
position: absolute;
top: -40px;
left: 6px;
background: #3b82f6;
color: white;
padding: 8px;
text-decoration: none;
border-radius: 4px;
z-index: 10000;
transition: top 0.3s;
        }
        .skip-link:focus {
top: 6px;
        }
        /* Toast Notifications */
        #toast-container {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 10010; /* above modals */
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
        }
         .toast {
 padding: 12px 16px;
 border-radius: 10px;
 color: #111827;
 font-weight: 600;
 box-shadow: 0 6px 18px rgba(0,0,0,0.12);
 background-color: #fff;
 border: 1px solid rgba(255,255,255,0.7);
 backdrop-filter: blur(8px);
 animation: toastIn 0.18s ease-out;
 will-change: opacity, transform;
         }
         .toast.success { background: rgba(16,185,129,0.9); color: white; }
         .toast.error { background: rgba(239,68,68,0.95); color: white; }
         .toast.warning { background: rgba(245,158,11,0.95); color: #111827; }
        @keyframes toastIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(6px); } }
        /* Skeleton Loader Shimmer Effect */
        .skeleton {
background-color: #e5e7eb;
border-radius: 1rem;
position: relative;
overflow: hidden;
        }
        .skeleton::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: shimmer 1.5s infinite;
        }
        @keyframes shimmer {
100% {
    transform: translateX(100%);
}
        }
        /* Input search inline spinner (dots) */
        .dots-spinner { display: inline-flex; gap: 3px; align-items: center; }
        .dots-spinner i { width: 4px; height: 4px; border-radius: 9999px; background: rgb(var(--accent-600)); animation: dotPulse 1s infinite ease-in-out; }
        .dots-spinner i:nth-child(2) { animation-delay: 0.15s; }
        .dots-spinner i:nth-child(3) { animation-delay: 0.3s; }
        @keyframes dotPulse { 0%, 80%, 100% { opacity: .2; transform: scale(1); } 40% { opacity: 1; transform: scale(1.6); } }
        /* FAQ Accordion */
        .faq-item .faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.28s ease, padding 0.2s ease;
will-change: max-height;
padding: 0 1.25rem 0 1.25rem; /* match px-5 to keep layout stable */
margin: 0;
        }
        .faq-item.open .faq-answer { transition: max-height 0.32s ease, padding 0.2s ease; }
        .faq-item .faq-arrow {
transition: transform 0.3s ease-in-out;
        }
        .faq-item.open .faq-arrow {
transform: rotate(180deg);
        }
        /* Highlighting for FAQ search */
        .faq-item[data-hidden="true"] { display: none; }

        /* Hide visible reCAPTCHA badge while keeping protection active */
        .grecaptcha-badge { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }

        /* Page transitions */
        .page-transition-enter { animation: fadeIn 0.22s ease-out both; }
        .page-transition-leave { animation: fadeOut 0.18s ease-in both; }

        /* Respect users who prefer reduced motion */
        @media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
/* Ensure elements that normally fade in via animation are visible */
.animate-hero-title,
.animate-hero-subtitle,
.animate-hero-buttons,
.animate-feature-card,
.animate-logo { opacity: 1 !important; }
        }
        
        /* Additional Performance & UI Enhancements */
        
        /* Stagger animation for lists */
        @keyframes staggerFadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
        }
        
        .stagger-0 { animation: staggerFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
        .stagger-1 { animation: staggerFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; }
        .stagger-2 { animation: staggerFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }
        .stagger-3 { animation: staggerFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; }
        .stagger-4 { animation: staggerFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
        .stagger-5 { animation: staggerFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; }
        
        /* Modern card with 3D hover effect */
        .card-3d {
transform-style: preserve-3d;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }
        
        .card-3d:hover {
transform: translateY(-8px) rotateX(2deg);
        }
        
        /* Loading skeleton with shimmer */
        @keyframes shimmer {
0% { background-position: -1000px 0; }
100% { background-position: 1000px 0; }
        }
        
        .skeleton-shimmer {
background: linear-gradient(90deg, #f0f0f0 0%, #f8f8f8 50%, #f0f0f0 100%);
background-size: 1000px 100%;
animation: shimmer 2s infinite;
        }
        
        /* Micro-interactions for better feedback */
        .micro-bounce {
animation: microBounce 0.3s ease;
        }
        
        @keyframes microBounce {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
        }
        
        /* Smooth page transition overlay */
        .page-transition-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
z-index: 99999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
        }
        
        .page-transition-overlay.active {
opacity: 1;
pointer-events: all;
        }
        
        /* Enhanced Mobile-specific improvements */
        @media (max-width: 768px) {
/* Touch targets: apply to interactive controls without rewriting Tailwind utility classes */
button,
[role="button"],
.btn-primary,
.btn-secondary,
.glass-button,
#mobile-menu .nav-link,
header .nav-link {
    min-height: 44px;
}

/* Prevent iOS zoom on form controls */
input, textarea, select {
    font-size: 16px !important;
}

/* Improve mobile menu visibility and interaction */
#mobile-menu {
    display: none;
    transform: translateX(100%) translateZ(0);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
    backface-visibility: hidden;
    padding-top: env(safe-area-inset-top, 0);
}

#mobile-menu:not(.hidden) {
    display: block;
    transform: translateX(0) translateZ(0);
    opacity: 1;
}

#mobile-menu .nav-link {
    min-height: 56px;
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    touch-action: manipulation;
    transition: all 0.2s ease;
    padding: 1rem;
    margin: 0.25rem 0;
}

#mobile-menu .nav-link:active {
    transform: scale(0.98);
    background-color: rgba(var(--accent-100), 0.9);
    outline: none !important;
}

#mobile-menu .nav-link.active {
    outline: none !important;
}

/* Better file browser on mobile */
#file-list .grid {
    gap: 0.75rem;
}

#file-list .grid > * {
    min-width: 0;
}

/* Calendar optimizations */
#calendar-grid {
    gap: 0.5rem !important;
}

.calendar-day {
    min-height: 60px !important;
    padding: 0.5rem !important;
    font-size: 0.875rem;
}

/* Subject grid improvements */
#subject-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 1rem !important;
}

/* Modal improvements */
.fixed {
    padding: 1rem !important;
}

.fixed > div {
    max-width: 100% !important;
    margin: 0 !important;
    max-height: calc(100vh - 2rem) !important;
}

/* Table improvements */
table {
    font-size: 0.875rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table thead, table tbody {
    display: block;
}

table tr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.5rem;
}

/* Landing page specific mobile improvements */
.animate-hero-buttons {
    width: 100%;
    max-width: 100%;
}

.animate-hero-buttons button {
    width: 100%;
    max-width: 100%;
    margin: 0.5rem 0;
}

/* Better mobile navigation */
nav a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
}

/* Improve mobile card interactions */
.card-hover {
    touch-action: manipulation;
}

.card-hover:active {
    transform: scale(0.98);
}

/* Better mobile scrolling */
.overflow-y-auto {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Improve mobile focus states */
.focus-ring:focus, *:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Text truncation for mobile */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Spacing utilities for mobile */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* Flex improvements */
.flex-col {
    flex-direction: column;
}

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

/* Hide non-essential elements on mobile */
@media (max-width: 640px) {
    .hidden-mobile {
        display: none !important;
    }
}

/* Admin dashboard mobile improvements */
@media (max-width: 768px) {
    #admin-panel .grid {
        grid-template-columns: 1fr !important;
    }

    #admin-panel .grid-cols-2,
    #admin-panel .grid-cols-3,
    #admin-panel .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
}

/* Blog post grid mobile */
#blog-post-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
}

/* Blog editor enhancements */
.blog-inline-image {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    margin: 0.75rem 0;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-inline-image:hover {
    transform: scale(1.02);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}

.image-resize-controls {
    position: absolute;
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
}

/* Blog link styling */
.blog-content .blog-link,
.blog-link {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid #3b82f6;
    padding-bottom: 2px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.blog-content .blog-link:hover,
.blog-link:hover {
    color: #1d4ed8;
    border-bottom-color: #2563eb;
    background-color: rgba(59, 130, 246, 0.1);
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 4px;
    transform: translateY(-1px);
}

.blog-content .blog-link:visited,
.blog-link:visited {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
}

.blog-content .blog-link i,
.blog-link i {
    opacity: 0.7;
    font-size: 0.75em;
}

.blog-hero-card {
    position: relative;
}

.blog-hero-card::after {
    content: '';
    position: absolute;
    inset: auto -10% -28% auto;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.32), transparent 70%);
    pointer-events: none;
}

.blog-insight-tile {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 98px;
    border-radius: 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    padding: 1rem;
}

.blog-insight-label {
    font-size: 0.72rem;
    line-height: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(191, 219, 254, 0.88);
    font-weight: 800;
}

.blog-insight-value {
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 900;
    color: #ffffff;
}

.blog-featured-shell {
    min-height: 100%;
}

.blog-featured-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
    border-radius: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.24), rgba(15, 23, 42, 0.58));
    padding: 1.35rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.blog-featured-pill,
.blog-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.blog-featured-pill {
    background: rgba(255, 255, 255, 0.12);
    color: #dbeafe;
}

.blog-tag-chip {
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
}

.blog-card {
    position: relative;
    border-radius: 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.92));
    box-shadow: 0 25px 45px -35px rgba(15, 23, 42, 0.55);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    border-color: rgba(147, 197, 253, 0.9);
    box-shadow: 0 28px 50px -34px rgba(37, 99, 235, 0.35);
}

.blog-card-image {
    width: 100%;
    height: 13rem;
    object-fit: cover;
}

.blog-card-summary {
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.blog-empty-state {
    border-radius: 1.5rem;
    border: 1px dashed rgba(var(--border), 1);
    background: rgba(255, 255, 255, 0.82);
    padding: 2rem;
    text-align: center;
}

.blog-image-placeholder {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    color: #4b5563;
    background-color: #f3f4f6;
    border: 1px dashed #cbd5f5;
    border-radius: 0.75rem;
}

#blog-post-content.blog-editor-drop-target {
    outline: 2px dashed #3b82f6;
    outline-offset: 4px;
    background-color: rgba(59, 130, 246, 0.06);
}

/* Image Cropping Modal Styles */
#image-crop-modal {
    z-index: 10002;
}

#crop-canvas {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#crop-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 0.5rem;
}

#crop-box {
    border: 2px solid #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    cursor: move;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    border-radius: 0.25rem;
}

#crop-box [data-handle] {
    position: absolute;
    width: 16px;
    height: 16px;
    background: #3b82f6;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s ease;
}

#crop-box [data-handle]:hover {
    transform: scale(1.2);
    background: #2563eb;
}

#crop-box [data-handle="nw"] {
    cursor: nwse-resize;
    top: -8px;
    left: -8px;
}

#crop-box [data-handle="ne"] {
    cursor: nesw-resize;
    top: -8px;
    right: -8px;
}

#crop-box [data-handle="sw"] {
    cursor: nesw-resize;
    bottom: -8px;
    left: -8px;
}

#crop-box [data-handle="se"] {
    cursor: nwse-resize;
    bottom: -8px;
    right: -8px;
}

/* Improved Blog Editor UI */
#blog-editor-toolbar {
    background: linear-gradient(to bottom, #f9fafb, #f3f4f6);
    border-bottom: 2px solid #e5e7eb;
    backdrop-filter: blur(10px);
}

#blog-editor-toolbar button {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

#blog-editor-toolbar button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#blog-editor-toolbar button:active {
    transform: translateY(0);
}

.blog-editor-inline-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.blog-editor-select-wrap,
.blog-editor-color-control {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.65rem;
    border: 2px solid #d1d5db;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.9);
    color: #374151;
}

.blog-editor-select {
    border: 0;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    color: inherit;
    padding-right: 0.25rem;
}

.blog-editor-select:focus {
    outline: none;
}

.blog-editor-color-control input[type="color"] {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.blog-editor-color-control input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.blog-editor-color-control input[type="color"]::-webkit-color-swatch {
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-radius: 999px;
}

.blog-editor-color-control input[type="color"]::-moz-color-swatch {
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-radius: 999px;
}

#blog-post-content {
    line-height: 1.7;
    font-size: 16px;
    color: #1f2937;
}

#blog-post-content:focus {
    background-color: #ffffff;
    box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.2);
}

#blog-post-content::placeholder {
    color: #9ca3af;
    font-style: italic;
}

body.dark-theme #blog-editor-toolbar {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.86), rgba(30, 64, 175, 0.18));
    border-bottom-color: rgba(96, 165, 250, 0.2);
}

body.dark-theme #blog-editor-toolbar .w-px {
    background: rgba(96, 165, 250, 0.22) !important;
}

body.dark-theme #blog-editor-toolbar button {
    background: rgba(15, 23, 42, 0.62);
    border-color: rgba(96, 165, 250, 0.18);
    color: #dbeafe;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

body.dark-theme #blog-editor-toolbar button:hover {
    background: rgba(30, 41, 59, 0.84);
    border-color: rgba(96, 165, 250, 0.36);
    box-shadow: 0 10px 20px -16px rgba(59, 130, 246, 0.45);
}

body.dark-theme .blog-editor-select-wrap,
body.dark-theme .blog-editor-color-control {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(96, 165, 250, 0.18);
    color: #dbeafe;
}

body.dark-theme .blog-editor-select {
    color: #dbeafe;
}

body.dark-theme #blog-post-content {
    color: #e2e8f0;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.78), rgba(15, 23, 42, 0.7));
}

body.dark-theme #blog-post-content:focus {
    background: linear-gradient(180deg, rgba(2, 6, 23, 0.88), rgba(15, 23, 42, 0.78));
    box-shadow: inset 0 0 0 2px rgba(96, 165, 250, 0.22);
}

/* Keyboard shortcuts modal */
kbd {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #374151;
}

/* Modern card improvements (avoid applying hover transforms to generic utility classes) */
.card-modern {
    backdrop-filter: blur(10px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Better button styles */
button {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary, .btn-secondary, .btn, .gs-btn {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary:hover, .btn-secondary:hover, .btn:hover, .gs-btn:hover {
    transform: translateY(-1px);
}

.btn-primary:active, .btn-secondary:active, .btn:active, .gs-btn:active {
    transform: translateY(0);
}

/* Improved input fields */
input[type="text"], input[type="url"], input[type="email"], input[type="password"], 
textarea, select {
    transition: all 0.2s ease;
    border: 1px solid #d1d5db;
}

input[type="text"]:focus, input[type="url"]:focus, input[type="email"]:focus, 
input[type="password"]:focus, textarea:focus, select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

/* Better spacing and readability */
.page {
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    font-weight: 700;
    color: #111827;
}

/* Smooth animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Improved modal backdrop */
.fixed.inset-0.bg-black {
    backdrop-filter: blur(4px);
}

/* Better tooltip styling */
[data-tooltip]:hover::after {
    background: rgba(17, 24, 39, 0.95);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.video-embed-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.5rem;
    text-align: center;
    border-radius: 0.75rem;
    background: radial-gradient(circle at top, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.97));
}

.video-embed-fallback.hidden {
    display: none;
}

.video-embed-fallback p {
    margin: 0;
}

/* Useful links mobile */
#links-container .grid {
    grid-template-columns: 1fr !important;
}

/* Video grid mobile */
#playlist-grid {
    grid-template-columns: 1fr !important;
}

/* Form improvements */
form {
    width: 100%;
}

form .space-y-4 > * {
    margin-bottom: 1rem;
}

/* Button groups mobile */
.flex.gap-2, .flex.gap-3 {
    flex-wrap: wrap;
}

.flex.gap-2 > *, .flex.gap-3 > * {
    flex: 1 1 auto;
    min-width: 0;
}

/* Scroll to top button mobile */
#scroll-top {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 1rem;
    right: auto;
}

/* Footer mobile */
footer {
    padding: 1rem !important;
    font-size: 0.8125rem;
}

footer p {
    margin: 0.5rem 0;
}

/* Heading sizes mobile */
h1 { font-size: 2rem !important; }
h2 { font-size: 1.75rem !important; }
h3 { font-size: 1.5rem !important; }

/* Better spacing for headings */
h1, h2, h3, h4, h5, h6 {
    margin-top: 1rem;
    margin-bottom: 0.75rem;
}

/* Image optimization for mobile */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent horizontal scroll */
body, html {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Better modal on mobile */
.fixed.inset-0 > div {
    margin: 0.5rem !important;
    border-radius: 1rem !important;
}

/* Calendar controls mobile */
#calendar-page .flex.items-center.space-x-2 {
    flex-wrap: wrap;
    gap: 0.5rem;
}

#calendar-page button {
    min-width: 44px;
    min-height: 44px;
}

/* Subject card mobile */
#subject-grid > div {
    min-height: 120px;
}

/* Better text wrapping */
p, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Improve button spacing on mobile */
button + button {
    margin-left: 0.5rem;
}

@media (max-width: 640px) {
    button + button {
        margin-left: 0;
        margin-top: 0.5rem;
    }
    
    .flex.gap-2, .flex.gap-3 {
        flex-direction: column;
    }
    
    .flex.gap-2 > *, .flex.gap-3 > * {
        width: 100%;
    }
}
        }
        /* Tablet optimizations */
        @media (max-width: 1024px) and (min-width: 769px) {
.p-8 { padding: 1.75rem; }
.p-6 { padding: 1.5rem; }
.p-4 { padding: 1.25rem; }
.grid.gap-8 { gap: 1.25rem; }
#page-content { scroll-snap-type: y proximity; }
.page { scroll-snap-align: start; padding: 1.5rem !important; }

/* Tablet grid adjustments */
.grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Tablet navigation */
header nav {
    font-size: 0.875rem;
    gap: 0.5rem;
}

/* Tablet cards */
.card-modern, .bg-white\/70 {
    padding: 1.25rem;
}

/* Tablet buttons */
button, .btn-primary {
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
}

/* Tablet forms */
input, textarea, select {
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
}

/* Subject grid tablet */
#subject-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
}

/* Blog grid tablet */
#blog-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Calendar tablet */
#calendar-grid {
    gap: 0.75rem !important;
}

.calendar-day {
    min-height: 70px !important;
    padding: 0.625rem !important;
}
        }
        /* Foldable hint (where supported) */
        @media (spanning: single-fold-vertical) {
#page-content { column-gap: 24px; }
.page { padding-left: 12px; padding-right: 12px; }
        }
        
        /* Optimized mobile menu animation */
        @keyframes slideInFromRight {
from {
    transform: translateX(100%) translateZ(0);
    opacity: 0;
}
to {
    transform: translateX(0) translateZ(0);
    opacity: 1;
}
        }
        
        @keyframes slideOutToRight {
from {
    transform: translateX(0) translateZ(0);
    opacity: 1;
}
to {
    transform: translateX(100%) translateZ(0);
    opacity: 0;
}
        }
        
        /* Staggered animation delays for list items */
        .stagger-1 { animation-delay: 0.1s; }
        .stagger-2 { animation-delay: 0.2s; }
        .stagger-3 { animation-delay: 0.3s; }
        .stagger-4 { animation-delay: 0.4s; }
        .stagger-5 { animation-delay: 0.5s; }
        
        /* High contrast mode for better accessibility */
        @media (prefers-contrast: high) {
.btn-primary {
    border: 2px solid #000;
    background-color: #000;
    color: #fff;
}

.btn-secondary {
    border: 2px solid #000;
    background-color: #fff;
    color: #000;
}

.card-hover {
    border: 2px solid #000;
}

.nav-link {
    border: 1px solid transparent;
}

.nav-link:hover,
.nav-link:focus {
    border-color: #000;
}
        }
        
        /* Reduced motion support */
        @media (prefers-reduced-motion: reduce) {
* {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

.card-hover:hover {
    transform: none;
}

.hover-lift:hover {
    transform: none;
}

.hover-scale:hover {
    transform: none;
}
        }
        
        /* Branded video overlay */
        .video-brand-wrapper { position: relative; background-color: #000; }
        .video-brand-watermark { position: absolute; top: 8px; left: 8px; opacity: .7; pointer-events: none; }
        .video-brand-controls { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; }
        :fullscreen .video-brand-watermark { opacity: .85; }

        .video-playlist-page,
        .video-playlist-admin-page {
            position: relative;
            isolation: isolate;
        }

        .video-playlist-page::before,
        .video-playlist-admin-page::before {
            content: '';
            position: absolute;
            inset: -2rem -1rem auto;
            height: 20rem;
            background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), transparent 58%), radial-gradient(circle at top right, rgba(251, 191, 36, 0.16), transparent 44%);
            z-index: -1;
            pointer-events: none;
        }

        .video-playlist-page > h2,
        .video-playlist-admin-page > h2 {
            letter-spacing: -0.04em;
        }

        .video-playlist-hero,
        .video-playlist-form-shell,
        .video-playlist-admin-shell {
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            box-shadow: 0 24px 60px -36px rgba(15, 23, 42, 0.25);
        }

        .video-playlist-form-shell {
            position: relative;
            overflow: hidden;
        }

        .video-playlist-form-shell::after {
            content: '';
            position: absolute;
            right: -90px;
            top: -90px;
            width: 240px;
            height: 240px;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0));
            pointer-events: none;
            z-index: 0;
        }

        .video-playlist-form-shell > * {
            position: relative;
            z-index: 1;
        }

        .video-admin-builder-panel {
            border: 1px solid rgba(226, 232, 240, 0.9);
            background: linear-gradient(140deg, rgba(255, 255, 255, 0.85), rgba(240, 249, 255, 0.78));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 24px 40px -34px rgba(15, 23, 42, 0.32);
            animation: video-admin-float-in 220ms ease-out;
        }

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

        .video-admin-builder-card {
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 0.95rem;
            padding: 0.75rem;
            background: rgba(255, 255, 255, 0.78);
        }

        .video-admin-field-label {
            display: block;
            margin-bottom: 0.35rem;
            font-size: 0.73rem;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #475569;
        }

        .video-admin-inline-row {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .video-admin-input {
            width: 100%;
            border: 1px solid rgba(203, 213, 225, 0.9);
            border-radius: 0.75rem;
            padding: 0.55rem 0.7rem;
            background: rgba(255, 255, 255, 0.88);
            font-size: 0.9rem;
        }

        .video-admin-input:focus {
            outline: none;
            border-color: rgba(96, 165, 250, 0.9);
            box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.35);
        }

        .video-admin-action-btn,
        .video-admin-action-btn-alt,
        .video-admin-clear-btn {
            border-radius: 999px;
            font-size: 0.77rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
            white-space: nowrap;
        }

        .video-admin-action-btn,
        .video-admin-action-btn-alt {
            border: 1px solid transparent;
            color: #fff;
            padding: 0.52rem 0.88rem;
            background: linear-gradient(120deg, #2563eb, #0ea5e9);
            box-shadow: 0 18px 24px -20px rgba(37, 99, 235, 0.8);
        }

        .video-admin-action-btn-alt {
            background: linear-gradient(120deg, #0f766e, #0284c7);
        }

        .video-admin-clear-btn {
            border: 1px solid rgba(203, 213, 225, 0.9);
            color: #334155;
            padding: 0.45rem 0.8rem;
            background: rgba(255, 255, 255, 0.9);
        }

        .video-admin-action-btn:hover,
        .video-admin-action-btn-alt:hover,
        .video-admin-clear-btn:hover,
        .video-admin-submit-btn:hover {
            transform: translateY(-1px);
        }

        .video-admin-builder-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.6rem;
        }

        .video-admin-counter-chip {
            display: inline-flex;
            align-items: center;
            padding: 0.35rem 0.7rem;
            border-radius: 999px;
            border: 1px solid rgba(191, 219, 254, 0.9);
            background: rgba(219, 234, 254, 0.72);
            color: #1d4ed8;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
        }

        .video-admin-dnd-list {
            max-height: 290px;
            overflow-y: auto;
            border-radius: 0.9rem;
            border: 1px solid rgba(226, 232, 240, 0.9);
            background: rgba(248, 250, 252, 0.75);
            padding: 0.45rem;
            scrollbar-gutter: stable;
        }

        .video-admin-items-table-wrap {
            overflow-x: auto;
        }

        .video-admin-items-table {
            width: 100%;
            min-width: 680px;
            border-collapse: separate;
            border-spacing: 0;
            font-size: 0.82rem;
            color: #0f172a;
        }

        .video-admin-items-table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            padding: 0.55rem 0.5rem;
            text-align: left;
            font-size: 0.67rem;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #475569;
            background: rgba(241, 245, 249, 0.96);
            border-bottom: 1px solid rgba(203, 213, 225, 0.95);
        }

        .video-admin-items-row td {
            padding: 0.52rem 0.5rem;
            border-bottom: 1px solid rgba(226, 232, 240, 0.85);
            vertical-align: middle;
            background: rgba(255, 255, 255, 0.96);
        }

        .video-admin-col-index,
        .video-admin-cell-index {
            width: 2.7rem;
            text-align: center;
        }

        .video-admin-cell-index {
            font-weight: 700;
            color: #64748b;
        }

        .video-admin-col-title {
            width: 34%;
        }

        .video-admin-col-source {
            width: 42%;
        }

        .video-admin-col-provider {
            width: 12%;
        }

        .video-admin-col-actions,
        .video-admin-cell-actions {
            width: 13.5rem;
        }

        .video-admin-row-title-input {
            width: 100%;
            border: 1px solid rgba(203, 213, 225, 0.9);
            border-radius: 0.65rem;
            padding: 0.42rem 0.55rem;
            background: rgba(255, 255, 255, 0.98);
            font-size: 0.82rem;
            color: #0f172a;
        }

        .video-admin-row-title-input:focus {
            outline: none;
            border-color: rgba(59, 130, 246, 0.7);
            box-shadow: 0 0 0 3px rgba(191, 219, 254, 0.8);
        }

        .video-admin-row-source {
            display: block;
            max-height: 3.2rem;
            overflow: hidden;
            color: #475569;
            line-height: 1.35;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .video-admin-row-provider {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            border: 1px solid rgba(203, 213, 225, 0.9);
            background: rgba(241, 245, 249, 0.95);
            color: #334155;
            font-size: 0.64rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding: 0.24rem 0.55rem;
            white-space: nowrap;
        }

        .video-admin-row-actions {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }

        .video-admin-row-btn {
            height: 1.85rem;
            min-width: 1.85rem;
            border-radius: 0.6rem;
            border: 1px solid rgba(203, 213, 225, 0.9);
            background: rgba(255, 255, 255, 0.98);
            color: #334155;
            font-size: 0.72rem;
            transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease, color 140ms ease;
        }

        .video-admin-row-btn:hover {
            transform: translateY(-1px);
            border-color: rgba(96, 165, 250, 0.8);
            background: rgba(239, 246, 255, 0.95);
            color: #1d4ed8;
        }

        .video-admin-row-btn:disabled {
            opacity: 0.42;
            cursor: not-allowed;
            transform: none;
        }

        .video-admin-row-btn-danger {
            border-color: rgba(254, 202, 202, 0.95);
            color: #b91c1c;
            background: rgba(254, 242, 242, 0.98);
        }

        .video-admin-row-btn-danger:hover {
            border-color: rgba(248, 113, 113, 0.9);
            background: rgba(254, 226, 226, 0.98);
            color: #991b1b;
        }

        .video-admin-preview-shell {
            border-radius: 0.95rem;
            border: 1px dashed rgba(203, 213, 225, 0.9);
            background: rgba(255, 255, 255, 0.75);
            padding: 0.75rem;
        }

        .video-admin-status {
            min-height: 1.2rem;
        }

        .video-admin-delete-modal {
            animation: video-admin-float-in 200ms ease-out;
        }

        @keyframes video-admin-float-in {
            from {
                opacity: 0;
                transform: translateY(8px) scale(0.99);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .video-playlist-hero {
            background: linear-gradient(135deg, rgba(255, 251, 235, 0.92), rgba(255, 255, 255, 0.95));
        }

        .video-playlist-toolbar {
            position: sticky;
            top: 0.75rem;
            z-index: 5;
            padding: 0.75rem;
            margin-left: -0.75rem;
            margin-right: -0.75rem;
            border-radius: 1.5rem;
            background: rgba(255, 255, 255, 0.75);
            border: 1px solid rgba(226, 232, 240, 0.9);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        .video-playlist-grid {
            align-items: stretch;
        }

        .video-playlist-card {
            min-height: 100%;
            position: relative;
            isolation: isolate;
            transform: translateZ(0);
            will-change: transform, box-shadow;
            transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
        }

        @media (hover: hover) and (pointer: fine) {
            .video-playlist-card:hover {
                transform: translateY(-4px);
                border-color: rgba(148, 163, 184, 0.7);
                box-shadow: 0 28px 72px -34px rgba(15, 23, 42, 0.45);
            }
        }

        @media (hover: none), (pointer: coarse) {
            .video-playlist-card:hover {
                transform: none;
            }
        }

        .video-playlist-card-starred {
            border-color: rgba(250, 204, 21, 0.85);
            box-shadow: 0 28px 62px -34px rgba(202, 138, 4, 0.55), 0 0 0 1px rgba(250, 204, 21, 0.45);
        }

        .video-playlist-star-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            border-radius: 999px;
            border: 1px solid rgba(226, 232, 240, 0.95);
            background: rgba(255, 255, 255, 0.96);
            color: #475569;
            padding: 0.36rem 0.72rem;
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, background-color 160ms ease;
        }

        .video-playlist-star-btn:hover {
            transform: translateY(-1px);
            border-color: rgba(250, 204, 21, 0.65);
            color: #854d0e;
        }

        .video-playlist-star-btn-active {
            border-color: rgba(250, 204, 21, 0.8);
            background: rgba(254, 252, 232, 0.95);
            color: #a16207;
            box-shadow: 0 14px 30px -26px rgba(202, 138, 4, 0.65);
        }

        .video-playlist-star-label {
            line-height: 1;
        }

        .video-card-description {
            display: -webkit-box;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: 2.8rem;
            margin-bottom: 0.75rem;
        }

        .video-card-tags {
            max-height: 2.4rem;
            overflow: hidden;
            margin-bottom: 0.7rem;
        }

        .video-card-footer-copy p:last-child {
            display: -webkit-box;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-top: 0.2rem;
            max-width: 24ch;
        }

        .video-playlist-open-btn {
            white-space: nowrap;
            flex-shrink: 0;
            min-width: 8.25rem;
            justify-content: center;
            line-height: 1;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .video-player-shell {
            box-shadow: 0 22px 60px -28px rgba(15, 23, 42, 0.45);
        }

        .video-player-frame {
            width: 100%;
            height: 100%;
            border: 0;
            display: block;
            background: #000;
        }

        .video-player-modal-shell {
            width: min(1280px, calc(100vw - 1.2rem));
            height: min(96dvh, calc(100dvh - 1.2rem));
            max-height: calc(100dvh - 1.2rem);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .video-player-modal-card {
            display: flex;
            flex-direction: column;
            overflow: hidden;
            width: 100%;
            height: 100%;
            min-height: 0;
            border-radius: 30px;
            border: 1px solid rgba(226, 232, 240, 0.9);
            background: rgba(255, 255, 255, 0.96);
            box-shadow: 0 42px 95px -42px rgba(15, 23, 42, 0.58);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .video-player-header {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            align-items: stretch;
            gap: 0.95rem;
            padding: 1.1rem 1.25rem 1rem;
            border-bottom: 1px solid rgba(226, 232, 240, 0.9);
            background: linear-gradient(180deg, rgba(239, 246, 255, 0.72), rgba(255, 255, 255, 1));
            flex: 0 0 auto;
        }

        .video-player-header-main {
            min-width: 0;
        }

        .video-player-brand-row {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.2rem 0.55rem;
            border-radius: 999px;
            border: 1px solid rgba(226, 232, 240, 0.95);
            background: rgba(255, 255, 255, 0.92);
            width: fit-content;
        }

        .video-player-brand-logo {
            display: block;
            width: auto;
            height: 1.2rem;
        }

        .video-player-brand-copy {
            font-size: 0.63rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #475569;
        }

        .video-player-eyebrow,
        .video-player-pill,
        .video-player-badge,
        .video-player-item-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            border-radius: 999px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .video-player-eyebrow {
            padding: 0.35rem 0.75rem;
            color: #2563eb;
            background: rgba(219, 234, 254, 0.75);
        }

        .video-player-pill,
        .video-player-badge,
        .video-player-item-badge {
            padding: 0.35rem 0.7rem;
            background: rgba(241, 245, 249, 0.92);
            color: #475569;
        }

        .video-player-pill-warning {
            background: rgba(254, 243, 199, 0.95);
            color: #92400e;
        }

        .video-player-title {
            margin: 0;
            font-size: clamp(1.4rem, 2vw, 2.1rem);
            line-height: 1.14;
            font-weight: 900;
            letter-spacing: -0.04em;
            color: #0f172a;
        }

        .video-player-subtitle {
            margin: 0;
            color: #64748b;
            font-size: 0.9rem;
        }

        .video-player-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .video-player-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            gap: 0.5rem;
            width: 100%;
            max-width: none;
        }

        .video-player-nav-btn,
        .video-player-source-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            border-radius: 999px;
            font-weight: 700;
            font-size: 0.82rem;
            line-height: 1;
            white-space: nowrap;
            transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, opacity 160ms ease;
        }

        .video-player-nav-btn {
            padding: 0.65rem 0.95rem;
            border: 1px solid rgba(226, 232, 240, 0.95);
            background: rgba(255, 255, 255, 0.92);
            color: #0f172a;
        }

        .video-player-nav-btn:hover,
        .video-player-source-link:hover {
            transform: translateY(-1px);
        }

        .video-player-nav-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
            transform: none;
        }

        .video-player-close-btn,
        .video-modal-close-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.7rem;
            height: 2.7rem;
            padding: 0;
            border-radius: 999px;
            border: 1px solid rgba(226, 232, 240, 0.95);
            background: rgba(255, 255, 255, 0.96);
            color: #334155;
            box-shadow: 0 10px 22px -16px rgba(15, 23, 42, 0.3);
            transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
        }

        .video-player-close-btn:hover,
        .video-modal-close-btn:hover {
            transform: translateY(-1px);
            border-color: rgba(148, 163, 184, 0.75);
            color: #0f172a;
            background: rgba(248, 250, 252, 1);
            box-shadow: 0 16px 28px -20px rgba(15, 23, 42, 0.35);
        }

        .video-player-toggle-active {
            border-color: rgba(250, 204, 21, 0.85);
            background: rgba(254, 252, 232, 0.95);
            color: #854d0e;
            box-shadow: 0 14px 28px -22px rgba(202, 138, 4, 0.5);
        }

        .video-player-layout {
            display: grid;
            grid-template-columns: minmax(0, 2.55fr) minmax(340px, 1fr);
            min-height: 0;
            flex: 1 1 auto;
            overflow: hidden;
        }

        .video-player-stage {
            display: flex;
            flex-direction: column;
            min-width: 0;
            min-height: 0;
            background: #020617;
        }

        .video-player-frame-shell {
            flex: 1 1 auto;
            min-height: clamp(280px, 45vh, 560px);
            padding: 0.78rem;
            background: radial-gradient(circle at top, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 1));
        }

        .video-player-frame-shell iframe,
        .video-player-frame-shell .video-player-frame {
            border-radius: 22px;
            overflow: hidden;
        }

        .video-player-stage-footer {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 1rem;
            padding: 0.9rem 1rem 1rem;
            border-top: 1px solid rgba(30, 41, 59, 0.9);
            background: rgba(15, 23, 42, 0.98);
        }

        .video-player-stage-note {
            margin: 0;
            color: rgba(226, 232, 240, 0.92);
            font-size: 0.88rem;
        }

        .video-player-source-link {
            padding: 0.6rem 0.95rem;
            background: rgba(59, 130, 246, 0.16);
            color: #dbeafe;
            border: 1px solid rgba(96, 165, 250, 0.35);
        }

        .video-player-sidebar {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            padding: 0.92rem 0.9rem 0.92rem 0.86rem;
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
            border-left: 1px solid rgba(226, 232, 240, 0.9);
            min-width: 0;
            min-height: 0;
            overflow: hidden;
        }

        .video-player-sidebar-controls {
            display: grid;
            gap: 0.5rem;
            position: sticky;
            top: 0;
            z-index: 3;
            padding: 0.62rem;
            border-radius: 0.95rem;
            border: 1px solid rgba(226, 232, 240, 0.92);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
            box-shadow: 0 16px 28px -26px rgba(15, 23, 42, 0.35);
        }

        .video-player-sidebar-search,
        .video-player-sidebar-sort {
            width: 100%;
            border-radius: 12px;
            border: 1px solid rgba(203, 213, 225, 0.95);
            background: rgba(255, 255, 255, 0.96);
            color: #0f172a;
            font-size: 0.9rem;
            padding: 0.58rem 0.72rem;
            line-height: 1.35;
        }

        .video-player-sidebar-search:focus,
        .video-player-sidebar-sort:focus {
            outline: none;
            border-color: rgba(37, 99, 235, 0.55);
            box-shadow: 0 0 0 3px rgba(191, 219, 254, 0.8);
        }

        .video-player-sidebar-count {
            margin: 0;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #64748b;
        }

        .video-player-items-scroll {
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
            min-height: 0;
            overflow-y: auto;
            padding-right: 0.32rem;
            padding-top: 0.2rem;
            scrollbar-gutter: stable;
        }

        .video-player-sidebar-empty {
            border-radius: 14px;
            border: 1px dashed rgba(148, 163, 184, 0.55);
            background: rgba(248, 250, 252, 0.8);
            color: #64748b;
            font-size: 0.86rem;
            line-height: 1.4;
            padding: 0.95rem 0.9rem;
            text-align: center;
        }

        .video-player-sidebar-head {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .video-player-sidebar-title {
            margin: 0;
            font-size: 0.78rem;
            font-weight: 900;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: #334155;
        }

        .video-player-sidebar-copy {
            margin: 0;
            color: #64748b;
            font-size: 0.88rem;
            line-height: 1.35;
        }

        .video-player-item {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.55rem;
            border-radius: 18px;
            border: 1px solid rgba(226, 232, 240, 0.9);
            background: rgba(255, 255, 255, 0.95);
            padding: 0.52rem 0.55rem;
            text-align: left;
            transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
        }

        .video-player-item-main {
            display: flex;
            align-items: flex-start;
            gap: 0.72rem;
            flex: 1 1 auto;
            min-width: 0;
            text-align: left;
            border: 0;
            background: transparent;
            padding: 0.35rem;
            border-radius: 14px;
            color: inherit;
        }

        .video-player-item-main:hover {
            background: rgba(241, 245, 249, 0.76);
        }

        .video-player-item:hover {
            transform: translateY(-1px);
            border-color: rgba(147, 197, 253, 0.9);
            box-shadow: 0 16px 28px -24px rgba(15, 23, 42, 0.28);
        }

        .video-player-item-active {
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(59, 130, 246, 0.2));
            border-color: rgba(37, 99, 235, 0.35);
            box-shadow: 0 18px 28px -24px rgba(37, 99, 235, 0.35);
        }

        .video-player-item-starred {
            border-color: rgba(250, 204, 21, 0.72);
            box-shadow: 0 18px 30px -24px rgba(202, 138, 4, 0.45);
            background: linear-gradient(135deg, rgba(254, 249, 195, 0.62), rgba(255, 255, 255, 0.96));
        }

        .video-player-item-star-btn {
            flex-shrink: 0;
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            border: 1px solid rgba(226, 232, 240, 0.9);
            background: rgba(255, 255, 255, 0.98);
            color: #64748b;
            transition: transform 140ms ease, border-color 140ms ease, color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
            align-self: center;
        }

        .video-player-item-star-btn:hover {
            transform: translateY(-1px);
            border-color: rgba(250, 204, 21, 0.8);
            color: #a16207;
        }

        .video-player-item-star-btn-active {
            border-color: rgba(250, 204, 21, 0.85);
            background: rgba(254, 252, 232, 0.98);
            color: #a16207;
            box-shadow: 0 12px 20px -18px rgba(202, 138, 4, 0.55);
        }

        .video-player-item-inactive {
            color: #334155;
        }

        .video-player-item-index {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.08rem;
            height: 2.08rem;
            flex-shrink: 0;
            border-radius: 999px;
            background: #eff6ff;
            color: #2563eb;
            font-size: 0.8rem;
            font-weight: 800;
        }

        .video-player-item-copy {
            display: flex;
            flex: 1 1 auto;
            min-width: 0;
            flex-direction: column;
            gap: 0.34rem;
        }

        .video-player-item-label {
            font-size: 0.92rem;
            font-weight: 700;
            color: #0f172a;
            line-height: 1.35;
            display: -webkit-box;
            line-clamp: 3;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        #video-playlist-viewer-modal.video-player-modal-open .video-player-modal-card {
            animation: video-player-modal-rise 180ms ease-out;
        }

        @keyframes video-player-modal-rise {
            from {
                opacity: 0;
                transform: translateY(10px) scale(0.985);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        #video-playlist-viewer-modal.video-player-theater .video-player-modal-shell {
            width: min(1760px, calc(100vw - 0.35rem));
            height: min(99dvh, calc(100dvh - 0.35rem));
            max-height: calc(100dvh - 0.35rem);
        }

        #video-playlist-viewer-modal.video-player-theater .video-player-layout {
            grid-template-columns: minmax(0, 4fr) minmax(280px, 0.85fr);
        }

        #video-playlist-viewer-modal.video-player-theater .video-player-frame-shell {
            min-height: clamp(420px, 74vh, 940px);
        }

        #video-playlist-viewer-modal.video-player-theater .video-player-sidebar {
            padding: 0.76rem 0.72rem 0.78rem 0.66rem;
        }

        @media (max-width: 1024px) {
            .video-player-layout {
                grid-template-columns: 1fr;
            }

            #video-playlist-viewer-modal.video-player-theater .video-player-layout {
                grid-template-columns: 1fr;
            }

            .video-player-modal-shell {
                width: min(100vw - 0.85rem, 1200px);
                height: min(100dvh - 0.85rem, 980px);
                max-height: calc(100dvh - 0.85rem);
            }

            #video-playlist-viewer-modal.video-player-theater .video-player-modal-shell {
                width: min(100vw - 0.35rem, 1260px);
                height: min(100dvh - 0.35rem, 990px);
                max-height: calc(100dvh - 0.35rem);
            }

            .video-player-sidebar {
                border-left: 0;
                border-top: 1px solid rgba(226, 232, 240, 0.9);
                max-height: min(42vh, 24rem);
            }

            .video-player-items-scroll {
                max-height: min(34vh, 20rem);
            }
        }

        @media (max-width: 768px) {
            .video-admin-builder-grid,
            .video-admin-inline-row {
                grid-template-columns: 1fr;
                flex-direction: column;
                align-items: stretch;
            }

            .video-admin-action-btn,
            .video-admin-action-btn-alt,
            .video-admin-clear-btn {
                justify-content: center;
            }

            .video-player-modal-shell {
                width: calc(100vw - 0.75rem);
                height: calc(100dvh - 0.75rem);
                max-height: calc(100dvh - 0.75rem);
            }

            .video-player-modal-card {
                border-radius: 22px;
            }

            .video-playlist-toolbar {
                position: static;
                margin-left: 0;
                margin-right: 0;
            }

            .video-playlist-card {
                max-height: none;
            }

            .video-player-stage-footer {
                flex-direction: column;
                align-items: stretch;
            }

            .video-player-actions {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
                justify-content: stretch;
            }

            .video-player-header {
                padding: 0.95rem 0.95rem 0.78rem;
            }

            .video-player-nav-btn {
                width: 100%;
                justify-content: center;
            }

            .video-player-frame-shell {
                min-height: 240px;
                padding: 0.65rem;
            }

            .video-player-stage-footer {
                padding: 0.8rem;
            }
        }

        @media (max-width: 768px), (pointer: coarse) {
            .video-playlist-form-shell,
            .video-playlist-admin-shell,
            .video-admin-builder-panel {
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
            }
        }

        .tools-timer-fullscreen-brand {
            display: none;
            position: absolute;
            top: 0.72rem;
            right: 0.85rem;
            align-items: center;
            gap: 0.35rem;
            padding: 0.28rem 0.45rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.62);
            box-shadow: 0 14px 30px -24px rgba(15, 23, 42, 0.44);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            color: #0f172a;
            font-size: 0.56rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            opacity: 0.74;
            z-index: 6;
        }

        .tools-timer-fullscreen-brand span {
            line-height: 1;
            white-space: nowrap;
        }

        .tools-timer-fullscreen-brandmark {
            width: auto;
            height: 0.8rem;
            display: block;
        }

        #tools-timer-card:fullscreen,
        #tools-timer-card:-webkit-full-screen {
            width: 100vw;
            height: 100vh;
            max-width: none;
            max-height: none;
            border-radius: 0;
            border: 0;
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            grid-auto-rows: auto;
            gap: 0.85rem;
            align-content: start;
            justify-items: center;
            padding: 1rem clamp(0.9rem, 2vw, 2rem) 1.2rem;
            overflow-y: auto;
        }

        #tools-timer-card:fullscreen .tools-timer-fullscreen-brand,
        #tools-timer-card:-webkit-full-screen .tools-timer-fullscreen-brand {
            display: inline-flex;
        }

        #tools-timer-card:fullscreen #tools-timer-display,
        #tools-timer-card:-webkit-full-screen #tools-timer-display {
            font-size: clamp(4.1rem, 10vw, 9.4rem);
            line-height: 0.9;
            font-weight: 900;
            letter-spacing: -0.08em;
            text-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
        }

        #tools-timer-card[data-timer-theme="midnight"] .tools-timer-fullscreen-brand {
            background: rgba(15, 23, 42, 0.72);
            border-color: rgba(96, 165, 250, 0.28);
            color: #e2e8f0;
        }

        #tools-timer-card:fullscreen .w-full.h-3,
        #tools-timer-card:-webkit-full-screen .w-full.h-3 {
            max-width: 1120px;
            width: 100%;
        }

        #tools-timer-card:fullscreen .tools-timer-topbar,
        #tools-timer-card:-webkit-full-screen .tools-timer-topbar {
            grid-column: 1 / -1;
            position: sticky;
            top: 0;
            z-index: 4;
            backdrop-filter: blur(10px);
            background: linear-gradient(120deg, rgba(255,255,255,0.8), rgba(255,255,255,0.52));
            padding: 0.4rem;
            border-radius: 0.8rem;
            border: 1px solid rgba(148, 163, 184, 0.2);
            width: min(1120px, 100%);
            display: flex;
            justify-content: flex-end;
        }

        #tools-timer-card:fullscreen .tools-timer-display-group,
        #tools-timer-card:-webkit-full-screen .tools-timer-display-group {
            grid-column: 1 / -1;
            grid-row: auto;
            width: min(1120px, 100%);
            align-self: center;
            text-align: center;
            justify-items: center;
        }

        #tools-timer-card:fullscreen .timer-clock-shell,
        #tools-timer-card:-webkit-full-screen .timer-clock-shell {
            grid-column: 1 / -1;
            grid-row: auto;
            align-self: start;
            width: 100%;
            max-width: 560px;
            margin-top: 0;
        }

        #tools-timer-card:fullscreen .tools-timer-settings-grid,
        #tools-timer-card:-webkit-full-screen .tools-timer-settings-grid {
            grid-column: 1 / -1;
            grid-row: auto;
            margin-top: 0;
            width: min(1120px, 100%);
            max-width: 1120px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        #tools-timer-card:fullscreen #tools-timer-custom-wrap,
        #tools-timer-card:-webkit-full-screen #tools-timer-custom-wrap {
            grid-column: 1 / -1;
            grid-row: auto;
            margin-top: 0;
            width: min(1120px, 100%);
            max-width: 1120px;
        }

        #tools-timer-card:fullscreen .tools-timer-progress-shell,
        #tools-timer-card:fullscreen #tools-timer-progress-label,
        #tools-timer-card:fullscreen .tools-timer-actions,
        #tools-timer-card:fullscreen .tools-timer-metrics-grid,
        #tools-timer-card:-webkit-full-screen .tools-timer-progress-shell,
        #tools-timer-card:-webkit-full-screen #tools-timer-progress-label,
        #tools-timer-card:-webkit-full-screen .tools-timer-actions,
        #tools-timer-card:-webkit-full-screen .tools-timer-metrics-grid {
            grid-column: 1 / -1;
        }

        #tools-timer-card:fullscreen .tools-timer-metrics-grid,
        #tools-timer-card:-webkit-full-screen .tools-timer-metrics-grid {
            margin-top: 0;
            width: min(1120px, 100%);
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        #tools-timer-card:fullscreen .tools-timer-actions,
        #tools-timer-card:-webkit-full-screen .tools-timer-actions {
            width: min(1120px, 100%);
            justify-content: center;
        }

        #tools-timer-card:fullscreen .timer-session-window,
        #tools-timer-card:-webkit-full-screen .timer-session-window {
            justify-content: center;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }

        @media (max-width: 1100px) {
            #tools-timer-card:fullscreen,
            #tools-timer-card:-webkit-full-screen {
                grid-template-columns: 1fr;
                padding: 0.9rem;
            }

            #tools-timer-card:fullscreen .tools-timer-display-group,
            #tools-timer-card:-webkit-full-screen .tools-timer-display-group,
            #tools-timer-card:fullscreen .timer-clock-shell,
            #tools-timer-card:-webkit-full-screen .timer-clock-shell,
            #tools-timer-card:fullscreen .tools-timer-settings-grid,
            #tools-timer-card:-webkit-full-screen .tools-timer-settings-grid,
            #tools-timer-card:fullscreen #tools-timer-custom-wrap,
            #tools-timer-card:-webkit-full-screen #tools-timer-custom-wrap {
                grid-column: 1 / -1;
                grid-row: auto;
                max-width: none;
                width: 100%;
            }

            #tools-timer-card:fullscreen .tools-timer-display-group,
            #tools-timer-card:-webkit-full-screen .tools-timer-display-group {
                text-align: center;
            }

            #tools-timer-card:fullscreen .tools-timer-metrics-grid,
            #tools-timer-card:-webkit-full-screen .tools-timer-metrics-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 900px) {
            #tools-timer-card:fullscreen,
            #tools-timer-card:-webkit-full-screen {
                padding: 0.78rem;
            }

            #tools-timer-card:fullscreen .tools-timer-settings-grid,
            #tools-timer-card:-webkit-full-screen .tools-timer-settings-grid {
                grid-template-columns: 1fr;
            }

            #tools-timer-card:fullscreen .timer-session-window,
            #tools-timer-card:-webkit-full-screen .timer-session-window {
                width: 100%;
                justify-content: space-between;
            }

            .tools-timer-fullscreen-brand span {
                display: none;
            }
        }
        
        /* Enhanced UI Efficiency Styles */
        .efficient-transition {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .efficient-hover:hover {
transform: translateY(-1px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .efficient-focus:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
        }
        
        .efficient-button {
position: relative;
overflow: hidden;
        }
        
        .efficient-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
        }
        
        .efficient-button:hover::before {
left: 100%;
        }

        /* Admin dashboard polish: cleaner futuristic blue surfaces */
        #admin-panel > div {
            border-radius: 16px;
        }

        .admin-dashboard-shell {
            gap: 1.35rem;
        }

        .account-settings-shell {
            position: relative;
            isolation: isolate;
        }

        .account-settings-shell::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: 1.4rem;
            background:
                radial-gradient(circle at 8% 8%, rgba(59, 130, 246, 0.12), transparent 34%),
                radial-gradient(circle at 88% 0%, rgba(14, 165, 233, 0.1), transparent 32%),
                radial-gradient(circle at 90% 90%, rgba(251, 191, 36, 0.08), transparent 36%);
            filter: blur(4px);
            pointer-events: none;
        }

        .admin-dashboard-hero {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(191, 219, 254, 0.45);
            background: linear-gradient(130deg, rgba(30, 64, 175, 0.95), rgba(37, 99, 235, 0.9), rgba(14, 165, 233, 0.9));
            box-shadow: 0 24px 50px -34px rgba(30, 64, 175, 0.75);
        }

        .admin-dashboard-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(120deg, rgba(255,255,255,0.14), transparent 42%),
                radial-gradient(circle at 88% 12%, rgba(255,255,255,0.16), transparent 38%);
            pointer-events: none;
        }

        .admin-dashboard-nav {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
        }

        .admin-nav-chip {
            border: 1px solid rgba(219, 234, 254, 0.55);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.24);
            color: #eff6ff;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            padding: 0.38rem 0.72rem;
            transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
        }

        .admin-nav-chip:hover {
            background: rgba(255, 255, 255, 0.36);
            border-color: rgba(255, 255, 255, 0.7);
            transform: translateY(-1px);
        }

        .admin-section-card {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            border-radius: 1rem;
            border: 1px solid rgba(147, 197, 253, 0.35) !important;
            background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(248,250,252,0.9)) !important;
            box-shadow: 0 20px 44px -34px rgba(30, 64, 175, 0.36);
        }

        #admin-panel input[type="search"],
        #admin-panel input[type="text"],
        #admin-panel input[type="email"],
        #admin-panel input[type="number"],
        #admin-panel select,
        #admin-panel textarea {
            border-radius: 0.75rem;
            border: 1px solid rgba(148, 163, 184, 0.32);
            background: rgba(255, 255, 255, 0.84);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
        }

        .admin-user-grid {
            align-items: start;
        }

        .admin-user-card {
            min-height: 0;
            border: 1px solid rgba(148, 163, 184, 0.26);
            background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(248,250,252,0.88));
            box-shadow: 0 14px 28px -26px rgba(15, 23, 42, 0.5);
        }

        .admin-user-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 36px -26px rgba(37, 99, 235, 0.38);
            border-color: rgba(96, 165, 250, 0.45);
        }

        .admin-user-identity {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            min-width: 0;
        }

        .admin-user-avatar {
            width: 2.35rem;
            height: 2.35rem;
            flex-shrink: 0;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.32);
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(226, 232, 240, 0.9));
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            box-shadow: 0 10px 18px -16px rgba(15, 23, 42, 0.6);
        }

        .admin-user-avatar .dashboard-streak-avatar-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .admin-user-avatar .dashboard-streak-avatar-emoji,
        .admin-user-avatar .dashboard-streak-avatar-fallback {
            font-size: 1rem;
            font-weight: 700;
            line-height: 1;
        }

        .user-settings-shell {
            max-width: 1040px !important;
            border-radius: 1.2rem;
            border: 1px solid rgba(191, 219, 254, 0.65) !important;
            background: linear-gradient(145deg, rgba(255,255,255,0.97), rgba(239,246,255,0.8)) !important;
            box-shadow: 0 30px 60px -44px rgba(30, 64, 175, 0.45);
        }

        .user-settings-primary-grid {
            display: grid;
            grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.2fr);
            gap: 1rem;
            align-items: start;
        }

        .user-settings-profile-card,
        .user-settings-form-card {
            border-radius: 1rem;
            border: 1px solid rgba(148, 163, 184, 0.24);
            background: linear-gradient(150deg, rgba(255,255,255,0.95), rgba(248,250,252,0.88));
            box-shadow: 0 16px 34px -30px rgba(15, 23, 42, 0.34);
        }

        .user-settings-form-card {
            margin-top: 0;
            padding: 1rem;
        }

        #user-settings-panel input,
        #user-settings-panel select,
        #user-settings-panel textarea {
            border-radius: 0.75rem;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(255,255,255,0.92);
        }

        #user-settings-panel button {
            border-radius: 0.75rem;
            box-shadow: 0 12px 22px -18px rgba(15, 23, 42, 0.35);
        }

        .admin-user-card .quick-set-menu {
            min-width: 11rem;
        }

        .admin-user-actions button {
            min-height: 2.3rem;
        }

        .admin-user-details summary {
            list-style: none;
        }

        .admin-user-details summary::-webkit-details-marker {
            display: none;
        }

        .admin-user-details summary::after {
            content: ' Show';
            color: #64748b;
            font-weight: 600;
        }

        .admin-user-details[open] summary::after {
            content: ' Hide';
        }

        #admin-panel .admin-optional {
            transition: opacity 220ms ease, transform 220ms ease;
        }

        #admin-panel .bg-white\/70.backdrop-blur-lg {
            background: linear-gradient(140deg, rgba(var(--brand-50), 0.82), rgba(255, 255, 255, 0.92));
            border-color: rgba(var(--brand-300), 0.28);
        }

        #admin-panel button {
            border-radius: 12px;
            border-color: rgba(var(--brand-300), 0.24) !important;
        }

        #admin-panel .border,
        #admin-panel [class*="border-gray"],
        #admin-panel [class*="border-black"] {
            border-color: rgba(var(--brand-300), 0.24) !important;
        }

        #admin-panel .bg-blue-600,
        #admin-panel .bg-blue-500 {
            background-image: linear-gradient(135deg, rgb(var(--brand-600)), rgb(var(--brand-700))) !important;
        }

        #admin-panel .bg-blue-600:hover,
        #admin-panel .bg-blue-500:hover {
            filter: brightness(1.04);
        }

        @media (max-width: 768px) {
            #admin-panel .flex.items-center.justify-between.mb-6 {
                flex-direction: column;
                align-items: stretch;
                gap: 0.75rem;
            }

            .admin-dashboard-nav {
                width: 100%;
            }

            .admin-nav-chip {
                flex: 1 1 auto;
                text-align: center;
            }

            #admin-panel .flex.gap-2 {
                width: 100%;
                flex-wrap: wrap;
            }

            #admin-panel .flex.gap-2 > button {
                flex: 1 1 auto;
            }

            .user-settings-primary-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* Streamlined Navigation */
        .nav-streamlined {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        /* Efficient Loading States */
        .efficient-loading {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
        }
        
        @keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
        }
        
        /* Modern Card Design */
        .modern-card-enhanced {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        /* Efficient Grid Layout */
        .efficient-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }
        
        /* Responsive Typography */
        .responsive-text {
font-size: clamp(0.875rem, 2.5vw, 1.125rem);
line-height: 1.6;
        }
        
        /* Efficient Form Controls */
        .efficient-input {
transition: all 0.2s ease;
border: 2px solid transparent;
        }
        
        .efficient-input:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        /* Smart Spacing */
        .smart-spacing > * + * {
margin-top: 1rem;
        }
        
        .smart-spacing-sm > * + * {
margin-top: 0.5rem;
        }
        
        /* Efficient Animations */
        .fade-in-efficient {
animation: fadeInEfficient 0.3s ease-out;
        }
        
        @keyframes fadeInEfficient {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
        }
        
        /* Mobile-First Responsive */
        @media (max-width: 768px) {
.mobile-optimized {
    padding: 1rem;
    font-size: 0.875rem;
}

.mobile-button {
    min-height: 44px;
    padding: 0.75rem 1rem;
}

.mobile-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
        }
        
        /* Accessibility Enhancements */
        .sr-only-enhanced {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
        }
        
        .focus-visible-enhanced:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
        }
        
        /* Performance Optimizations */
        .gpu-accelerated-enhanced {
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000px;
will-change: transform;
        }

        /* ================================================================
           LANDING HERO REFRESH (2026)
           ================================================================ */

        /* ================================================================
           404-STYLE SHELL (shared)
           Matches the design language of 404.html (soft gradient bg + glass card)
           ================================================================ */

        .gs-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 32px 16px;
            font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
            background:
                radial-gradient(circle at 20% 20%, rgba(79, 70, 229, 0.18), transparent 28%),
                radial-gradient(circle at 80% 0%, rgba(14, 165, 233, 0.18), transparent 32%),
                linear-gradient(135deg, #f8fafc 0%, #e0f2fe 35%, #f5f3ff 100%);
            color: #0f172a;
        }

        /* Allow Tailwind `hidden` to work even though `.gs-page` sets `display:flex` */
        .gs-page.hidden,
        #landing-page.hidden {
            display: none !important;
        }

        .gs-shell {
            width: min(960px, 100%);
            background: rgba(255, 255, 255, 0.82);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.55);
            box-shadow: 0 28px 80px -32px rgba(15, 23, 42, 0.25);
            border-radius: 24px;
            padding: clamp(20px, 4vw, 32px);
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
        }

        .gs-shell--single {
            grid-template-columns: 1fr;
            max-width: 960px;
        }

        #landing-page .gs-shell {
            width: min(1600px, calc(100% - clamp(16px, 3.5vw, 48px)));
            padding: clamp(22px, 2.8vw, 40px);
        }

        #landing-page .gs-shell--single {
            max-width: 1600px;
        }

        #landing-page .hero-grid {
            grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
        }

        #tools-page .shadow-lg,
        #tools-page .shadow-md {
            box-shadow: 0 18px 45px -32px rgba(15, 23, 42, 0.32);
        }

        @media (max-width: 1024px) {
            #landing-page .hero-grid {
                grid-template-columns: 1fr;
            }
        }

        .gs-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            background: #eef2ff;
            color: #4338ca;
            font-weight: 700;
            font-size: 13px;
            letter-spacing: -0.01em;
            width: fit-content;
        }

        .gs-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 10px;
        }

        .gs-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 18px;
            border-radius: 14px;
            font-weight: 700;
            text-decoration: none;
            border: 1px solid transparent;
            transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
        }

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

        .gs-btn-primary {
            background: linear-gradient(135deg, #2563eb, #4f46e5);
            color: #fff;
            box-shadow: 0 18px 40px -20px rgba(59, 130, 246, 0.7);
        }

        .gs-btn-secondary {
            background: #fff;
            color: #1e293b;
            border-color: rgba(148, 163, 184, 0.6);
        }

        .gs-panel {
            background: linear-gradient(180deg, rgba(59, 130, 246, 0.08), rgba(99, 102, 241, 0.08));
            border: 1px solid rgba(255, 255, 255, 0.7);
            border-radius: 18px;
            padding: 18px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
        }

        .gs-panel h2,
        .gs-panel h3 {
            margin: 0 0 8px;
            color: #1f2937;
        }

        .gs-panel p {
            margin: 0;
            color: #475569;
            line-height: 1.6;
        }

        .gs-title {
            margin: 0;
            font-size: clamp(28px, 4vw, 44px);
            line-height: 1.1;
            letter-spacing: -0.02em;
        }

        .gs-muted {
            color: #475569;
            line-height: 1.6;
        }

        .gs-brand {
            font-weight: 700;
            color: #0f172a;
        }

        .hero-shell {
            position: relative;
            overflow: hidden;
            padding: clamp(1.5rem, 4vw, 2.75rem);
            border-radius: clamp(1.25rem, 3vw, 1.75rem);
            background: radial-gradient(circle at 20% 20%, rgba(239, 246, 255, 0.9), transparent 50%),
                        radial-gradient(circle at 80% 10%, rgba(248, 250, 252, 0.8), transparent 50%),
                        linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 252, 0.95) 100%);
            border: 1px solid rgba(226, 232, 240, 0.6);
            box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.05), 0 4px 12px -4px rgba(15, 23, 42, 0.03);
            text-align: left;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .hero-shell::before {
            content: '';
            position: absolute;
            inset: -22% auto auto -14%;
            width: clamp(220px, 28vw, 360px);
            height: clamp(220px, 28vw, 360px);
            border-radius: 999px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.2), transparent 65%);
            filter: blur(2px);
            opacity: 0.9;
            pointer-events: none;
            animation: heroOrbFloat 14s ease-in-out infinite alternate;
        }

        .hero-shell::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: radial-gradient(circle at 70% 80%, rgba(59, 130, 246, 0.12), transparent 35%);
        }

        .hero-grid {
            position: relative;
            display: grid;
            gap: clamp(1.5rem, 3vw, 2.25rem);
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            align-items: stretch;
            z-index: 1;
        }

        @keyframes heroOrbFloat {
            0% {
                transform: translate3d(0, 0, 0) scale(1);
            }
            100% {
                transform: translate3d(24px, 16px, 0) scale(1.08);
            }
        }

        @media (min-width: 1080px) {
            .hero-grid {
                grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
                gap: clamp(2rem, 3.4vw, 3.25rem);
            }
        }

        .hero-copy {
            display: grid;
            gap: 1rem;
        }

        .hero-title {
            font-size: clamp(2.4rem, 4vw, 3.4rem);
            line-height: 1.1;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: #0f172a;
        }

        .hero-subtitle {
            max-width: 40rem;
            font-size: clamp(1.05rem, 2.4vw, 1.3rem);
            color: #475569;
            line-height: 1.6;
        }

        .hero-hashtags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
            margin-top: 0.25rem;
            font-weight: 700;
            color: #1d4ed8;
            font-size: 0.95rem;
            letter-spacing: -0.01em;
        }

        /* Auth modal polish */
        #login-page {
            transition: opacity 280ms ease, backdrop-filter 280ms ease;
        }

        #login-page:not(.hidden) {
            animation: fadeInBackdrop 240ms ease both;
        }

        .login-card {
            transform: translateY(8px);
            opacity: 0;
            transition: transform 260ms ease, opacity 260ms ease, box-shadow 260ms ease;
            animation: floatUp 320ms ease 40ms forwards;
        }

        #login-page:not(.hidden) .login-card {
            opacity: 1;
            transform: translateY(0);
        }

        .login-card:focus-within {
            box-shadow: 0 20px 45px -25px rgba(30, 64, 175, 0.45);
        }

        /* Custom checkboxes — crisp rounded-square with animated blue-fill tick */
        .gcse-checkbox {
            -webkit-appearance: none;
            appearance: none;
            display: inline-grid;
            place-content: center;
            width: 1.25rem;
            height: 1.25rem;
            padding: 0;
            line-height: 1;
            border-radius: 0.42rem;
            border: 1.5px solid rgba(var(--accent-400), 0.5);
            background-color: white;
            background-image: linear-gradient(165deg, rgba(255,255,255,0.98), rgba(241,245,249,0.92));
            background-position: center;
            background-repeat: no-repeat;
            background-size: 0.75rem;
            box-shadow: inset 0 1px 2px rgba(15,23,42,0.06);
            cursor: pointer;
            flex: 0 0 auto;
            align-self: center;
            vertical-align: middle;
            margin: 0;
            position: relative;
            overflow: hidden;
            transition:
                background-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
                border-color 200ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1),
                filter 220ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 150ms ease;
        }

        input[type="checkbox"] {
            width: 1.15rem;
            height: 1.15rem;
            padding: 0;
            border-radius: 0.32rem;
            vertical-align: middle;
        }

        .gcse-checkbox::before {
            display: none;
        }

        .gcse-checkbox:checked {
            background-color: rgb(var(--brand-600));
            background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
            border-color: rgb(var(--brand-600));
            box-shadow: 0 0 0 3px rgba(var(--brand-500), 0.2), 0 2px 8px -4px rgba(var(--brand-700), 0.4);
            animation: gcse-check-pop 260ms cubic-bezier(0.22, 1, 0.36, 1), gcse-check-fade 340ms ease-out;
        }

        @keyframes gcse-check-pop {
            0%   { transform: scale(0.82); }
            55%  { transform: scale(1.12); }
            100% { transform: scale(1); }
        }

        @keyframes gcse-check-fade {
            0% { filter: brightness(1.2) saturate(1.2); box-shadow: 0 0 0 0 rgba(var(--brand-400), 0); }
            55% { filter: brightness(1.06) saturate(1.08); box-shadow: 0 0 0 6px rgba(var(--brand-300), 0.25); }
            100% { filter: brightness(1) saturate(1); box-shadow: 0 0 0 3px rgba(var(--brand-500), 0.2), 0 2px 8px -4px rgba(var(--brand-700), 0.4); }
        }

        .gcse-checkbox:not(:checked):hover {
            border-color: rgb(var(--brand-400));
            background-color: rgba(var(--brand-50), 0.8);
        }

        .gcse-checkbox:checked::before {
            content: none;
        }

        .gcse-checkbox:active {
            transform: scale(0.92);
        }

        .gcse-checkbox:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(var(--brand-400), 0.4);
        }

        .hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.45rem 0.9rem;
            background: rgba(var(--brand-50), 0.95);
            border: 1px solid rgba(var(--brand-400), 0.45);
            color: rgb(var(--brand-700));
            border-radius: 999px;
            font-weight: 700;
            width: fit-content;
            box-shadow: 0 10px 30px -18px rgba(59, 130, 246, 0.35);
        }

        .hero-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.65rem;
            margin-top: 0.25rem;
        }

        .hero-meta-item {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.55rem 0.9rem;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(var(--border), 0.9);
            border-radius: 0.9rem;
            color: #1f2937;
            font-weight: 600;
            font-size: 0.95rem;
        }

        .hero-meta-item i,
        .hero-trust-pill i,
        .hero-panel-list i,
        .mobile-cta i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.15em;
            line-height: 1;
            flex: 0 0 auto;
        }

        .hero-meta-item i { color: rgb(var(--brand-600)); }

        .hero-trust {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 0.75rem;
            margin-top: 1rem;
        }

        .hero-trust-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 0.95rem;
            background: rgba(15, 23, 42, 0.02);
            border: 1px solid rgba(var(--border), 0.8);
            border-radius: 0.9rem;
            color: #0f172a;
            font-weight: 600;
        }

        .hero-trust-pill i { color: rgb(var(--brand-600)); }

        .hero-panel {
            display: flex;
            align-items: stretch;
        }

        .hero-panel-card {
            width: 100%;
            background: linear-gradient(160deg, #ffffff, #f8fafc 55%, #f1f5f9 100%);
            color: #1e293b;
            border-radius: 1.2rem;
            padding: clamp(1.25rem, 2.2vw, 1.75rem);
            border: 1px solid rgba(226, 232, 240, 0.8);
            box-shadow: 0 18px 45px -18px rgba(15, 23, 42, 0.1);
            position: relative;
            overflow: hidden;
        }

        .hero-panel-card::after {
            content: '';
            position: absolute;
            inset: -20% 20% auto auto;
            width: 260px;
            height: 260px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.08), transparent 55%);
            opacity: 0.8;
            pointer-events: none;
        }

        .hero-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            position: relative;
            z-index: 1;
        }

        .hero-panel-eyebrow {
            letter-spacing: 0.08em;
            text-transform: uppercase;
            font-size: 0.78rem;
            color: #64748b;
            margin: 0;
            font-weight: 600;
        }

        .hero-panel-chip {
            padding: 0.35rem 0.7rem;
            background: rgba(59, 130, 246, 0.1);
            border: 1px solid rgba(59, 130, 246, 0.2);
            color: #2563eb;
            border-radius: 999px;
            font-weight: 700;
            font-size: 0.85rem;
        }

        .hero-panel-list {
            list-style: none;
            padding: 0;
            margin: 1.25rem 0 1.5rem;
            display: grid;
            gap: 0.75rem;
            position: relative;
            z-index: 1;
        }

        .hero-panel-list li {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 0.75rem;
            align-items: start;
            padding: 0.85rem 0.95rem;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 0.9rem;
            font-weight: 600;
            color: #334155;
            box-shadow: 0 4px 6px -4px rgba(15, 23, 42, 0.02);
        }

        .hero-panel-list i {
            color: #60a5fa;
            margin-top: 1px;
        }

        .hero-panel-footer {
            display: grid;
            gap: 0.65rem;
            position: relative;
            z-index: 1;
        }

        .hero-avatar-row {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }

        .avatar-dot {
            width: 12px;
            height: 12px;
            border-radius: 999px;
            background: #34d399;
            box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.18);
            animation: pulse-online 1.8s ease-in-out infinite;
        }

        .hero-avatar-row .avatar-dot {
            box-shadow: 0 0 0 7px rgba(52, 211, 153, 0.16);
        }

        @keyframes pulse-online {
            0% { transform: scale(0.9); opacity: 0.9; }
            70% { transform: scale(1.35); opacity: 0; }
            100% { transform: scale(0.9); opacity: 0; }
        }

        .hero-panel-note {
            margin: 0;
            color: #64748b;
            line-height: 1.5;
        }

        #landing-page .hero-shell .text-gray-500,
        #landing-page .hero-shell .text-gray-600,
        #landing-page .hero-shell .text-gray-700 {
            color: #334155 !important;
        }

        

        

        .tools-select {
            appearance: none;
            -webkit-appearance: none;
            background-image:
                linear-gradient(45deg, transparent 50%, rgb(var(--brand-600)) 50%),
                linear-gradient(135deg, rgb(var(--brand-600)) 50%, transparent 50%),
                linear-gradient(to right, rgba(var(--brand-50), 0.95), rgba(255,255,255,0.95));
            background-position:
                calc(100% - 16px) calc(50% - 3px),
                calc(100% - 10px) calc(50% - 3px),
                0 0;
            background-size: 6px 6px, 6px 6px, 100% 100%;
            background-repeat: no-repeat;
            border-color: rgba(var(--border), 0.85);
            box-shadow: 0 4px 12px -9px rgba(15, 23, 42, 0.45);
            transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease;
            padding-right: 2.25rem;
        }

        .tools-select:hover {
            border-color: rgba(var(--brand-400), 0.7);
            box-shadow: 0 10px 20px -15px rgba(37, 99, 235, 0.45);
        }

        .tools-select:focus {
            box-shadow: 0 0 0 3px rgba(var(--brand-300), 0.28);
        }

        .tools-calc-btn {
            border-radius: 0.95rem;
            border: 1px solid rgba(var(--accent-300), 0.35);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.96));
            color: rgb(var(--text));
            font-weight: 700;
            font-size: 0.82rem;
            min-height: 2.7rem;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 10px 18px -16px rgba(15, 23, 42, 0.28);
            transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
        }

        .tools-calc-btn:hover {
            background: linear-gradient(180deg, rgba(var(--brand-50), 0.96), rgba(255,255,255,0.94));
            border-color: rgba(var(--brand-400), 0.55);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 12px 20px -16px rgba(37, 99, 235, 0.45);
        }

        .tools-calc-btn:active {
            transform: translateY(1px);
        }

        .tools-calc-btn.bg-blue-600 {
            background: linear-gradient(135deg, rgb(var(--brand-500)), rgb(var(--brand-700)));
            color: #ffffff;
            border-color: rgba(var(--brand-700), 0.95);
        }

        .tools-calc-btn.bg-blue-600:hover {
            background: rgb(var(--brand-700));
        }

        .scientific-calc-shell {
            border-radius: 1.1rem;
            border: 1px solid rgba(148, 163, 184, 0.38);
            background: linear-gradient(165deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.84));
            padding: 0.75rem;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 24px 32px -26px rgba(15, 23, 42, 0.8);
        }

        .scientific-calc-topbar {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.45rem;
            margin-bottom: 0.55rem;
        }

        .calc-select-shell {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            min-width: 0;
        }

        .calc-select-label {
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #bfdbfe;
            padding-left: 0.15rem;
        }

        .calc-select-wrap {
            position: relative;
            min-width: 0;
        }

        .calc-select-wrap .tools-select-custom {
            width: 100%;
            min-height: 2.35rem;
            border-radius: 0.7rem;
            border-color: rgba(148, 163, 184, 0.45);
            background-image: linear-gradient(180deg, rgba(241, 245, 249, 0.97), rgba(219, 234, 254, 0.93));
            color: #0f172a;
            font-size: 0.76rem;
            font-weight: 700;
            line-height: 1.1;
            padding-right: 2.2rem;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.86), 0 6px 12px -10px rgba(15, 23, 42, 0.7);
        }

        .calc-select-wrap .tools-select-custom:hover {
            border-color: rgba(96, 165, 250, 0.82);
            background-image: linear-gradient(180deg, rgba(219, 234, 254, 0.98), rgba(191, 219, 254, 0.95));
        }

        .calc-select-wrap .tools-select-custom:focus {
            box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.28), inset 0 1px 0 rgba(255,255,255,0.9);
        }

        .calc-select-icon {
            position: absolute;
            right: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: #1d4ed8;
            font-size: 0.78rem;
            pointer-events: none;
            opacity: 0.95;
        }

        .scientific-calc-display-wrap {
            border-radius: 0.9rem;
            border: 1px solid rgba(148, 163, 184, 0.4);
            background: linear-gradient(180deg, rgba(203, 213, 225, 0.18), rgba(255, 255, 255, 0.06));
            padding: 0.55rem;
            margin-bottom: 0.6rem;
        }

        .scientific-calc-display {
            width: 100%;
            border: 1px solid rgba(203, 213, 225, 0.45);
            background: linear-gradient(180deg, #dbeafe, #e2e8f0);
            color: #0f172a;
            border-radius: 0.75rem;
            padding: 0.65rem 0.7rem;
            font-size: 0.9rem;
            font-weight: 700;
            letter-spacing: 0.01em;
        }

        .scientific-calc-display:focus {
            outline: 2px solid rgba(59, 130, 246, 0.45);
            outline-offset: 1px;
        }

        .scientific-calc-result {
            margin-top: 0.5rem;
            min-height: 1.15rem;
            font-size: 0.78rem;
            font-weight: 700;
            color: #bfdbfe;
        }

        .scientific-calc-result-error {
            color: #fecaca;
        }

        .scientific-calc-secondary {
            margin-top: 0.18rem;
            min-height: 1rem;
            font-size: 0.67rem;
            color: #cbd5e1;
            line-height: 1.4;
        }

        .scientific-calc-secondary-error {
            color: #fecdd3;
        }

        .scientific-calc-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 0.45rem;
        }

        .scientific-calc-shell .tools-calc-btn {
            border-radius: 0.65rem;
            min-height: 2.35rem;
            padding: 0.42rem 0.18rem;
            border-color: rgba(148, 163, 184, 0.28);
            background: linear-gradient(180deg, rgba(241, 245, 249, 0.95), rgba(203, 213, 225, 0.88));
            color: #0f172a;
            font-size: 0.78rem;
            line-height: 1.12;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 4px 8px -6px rgba(15, 23, 42, 0.7);
        }

        .scientific-calc-topbar .tools-select {
            min-width: 0;
            width: 100%;
        }

        .scientific-calc-shell .tools-calc-btn:hover {
            border-color: rgba(96, 165, 250, 0.8);
            background: linear-gradient(180deg, rgba(219, 234, 254, 0.96), rgba(191, 219, 254, 0.92));
        }

        .scientific-calc-shell .tools-calc-btn.is-active,
        .scientific-calc-shell .tools-calc-toggle.is-active {
            background: linear-gradient(180deg, rgba(250, 204, 21, 0.95), rgba(234, 179, 8, 0.9));
            border-color: rgba(202, 138, 4, 0.85);
            color: #422006;
        }

        .scientific-calc-shell .tools-calc-fn {
            background: linear-gradient(180deg, rgba(224, 231, 255, 0.95), rgba(199, 210, 254, 0.9));
            border-color: rgba(129, 140, 248, 0.55);
            color: #3730a3;
        }

        .scientific-calc-shell .tools-calc-op {
            background: linear-gradient(180deg, rgba(226, 232, 240, 0.95), rgba(203, 213, 225, 0.9));
            color: #1e293b;
        }

        .scientific-calc-shell .tools-calc-equals {
            background: linear-gradient(180deg, rgba(37, 99, 235, 0.95), rgba(29, 78, 216, 0.92));
            color: #ffffff;
            border-color: rgba(30, 64, 175, 0.9);
        }

        @media (max-width: 640px) {
            .scientific-calc-topbar {
                grid-template-columns: 1fr;
            }

            .calc-select-label {
                font-size: 0.58rem;
            }

            .scientific-calc-grid {
                gap: 0.38rem;
            }

            .scientific-calc-shell .tools-calc-btn {
                min-height: 2.15rem;
                font-size: 0.72rem;
                padding: 0.38rem 0.14rem;
            }
        }

        .tools-wheel-stage {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 0.35rem;
            padding-top: 0.35rem;
        }

        .tools-wheel-canvas {
            width: min(100%, 280px);
            height: auto;
            border-radius: 999px;
            border: 6px solid rgba(59, 130, 246, 0.16);
            background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.95), rgba(219, 234, 254, 0.8));
            box-shadow: 0 16px 24px -20px rgba(37, 99, 235, 0.55);
        }

        .tools-wheel-pointer {
            position: absolute;
            top: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 16px solid #dc2626;
            filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.35));
            z-index: 2;
        }

        .tools-planner-item {
            display: flex;
            align-items: flex-start;
            gap: 0.85rem;
            border-radius: 1rem;
            border: 1px solid rgba(var(--border), 0.8);
            background: rgba(255, 255, 255, 0.94);
            padding: 0.9rem 1rem;
            transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
        }

        .tools-planner-item:hover {
            transform: translateY(-1px);
            border-color: rgba(var(--brand-300), 0.8);
            box-shadow: 0 16px 24px -24px rgba(37, 99, 235, 0.5);
        }

        .tools-planner-item.is-complete {
            opacity: 0.75;
            background: rgba(248, 250, 252, 0.95);
        }

        .tools-planner-check {
            width: 1.2rem;
            height: 1.2rem;
            margin-top: 0.15rem;
            accent-color: rgb(var(--brand-600));
        }

        .tools-priority-chip {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            padding: 0.2rem 0.55rem;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .tools-priority-chip.high {
            background: #fee2e2;
            color: #b91c1c;
        }

        .tools-priority-chip.medium {
            background: #fef3c7;
            color: #b45309;
        }

        .tools-priority-chip.low {
            background: #dcfce7;
            color: #15803d;
        }

        #command-palette-results {
            scrollbar-width: thin;
            scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
        }

        .command-palette-group {
            padding: 0.25rem 0 0.75rem;
        }

        .command-palette-label {
            padding: 0 0.55rem 0.45rem;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #94a3b8;
        }

        .command-palette-item {
            width: 100%;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 0.85rem;
            border-radius: 1rem;
            border: 1px solid transparent;
            background: transparent;
            color: #1e293b;
            padding: 0.9rem;
            text-align: left;
            transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
        }

        .command-palette-item:hover,
        .command-palette-item.active {
            background: rgba(59, 130, 246, 0.07);
            border-color: rgba(96, 165, 250, 0.3);
            transform: translateY(-1px);
        }

        .command-palette-icon {
            width: 2.35rem;
            height: 2.35rem;
            border-radius: 0.9rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(59, 130, 246, 0.1);
            color: #2563eb;
        }

        .command-palette-shortcut {
            border-radius: 0.7rem;
            background: rgba(0, 0, 0, 0.06);
            padding: 0.35rem 0.55rem;
            font-size: 0.72rem;
            font-weight: 800;
            color: #64748b;
        }

        @media (max-width: 820px), (hover: none) and (pointer: coarse) {
            .mobile-hide-keyboard-shortcuts,
            .command-palette-shortcut,
            #keyboard-shortcuts-modal {
                display: none !important;
            }
        }

        .command-palette-empty {
            border-radius: 1rem;
            border: 1px dashed rgba(147, 197, 253, 0.45);
            padding: 1.25rem;
            text-align: center;
            color: #94a3b8;
        }

        /* Command palette is always light-mode regardless of site theme */
        body.dark-theme #command-palette-modal > div {
            background: white !important;
            border-color: rgba(219, 234, 254, 0.8) !important;
            box-shadow: 0 30px 80px -30px rgba(59, 130, 246, 0.2), 0 8px 32px -16px rgba(15, 23, 42, 0.12) !important;
        }

        body.dark-theme #command-palette-modal .border-b {
            border-color: rgba(226, 232, 240, 0.8) !important;
        }

        body.dark-theme #command-palette-modal .rounded-2xl {
            background: rgba(248, 250, 252, 0.9) !important;
            border-color: rgba(219, 234, 254, 0.6) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.9) !important;
        }

        body.dark-theme #command-palette-input {
            color: #1e293b !important;
        }

        body.dark-theme #command-palette-input::placeholder {
            color: #9ca3af !important;
        }

        #command-palette-modal .rounded-2xl {
            border-radius: 1.35rem;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.82));
            border: 1px solid rgba(148, 163, 184, 0.18);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
        }

        body.dark-theme #command-palette-modal .rounded-2xl {
            background: rgba(248, 250, 252, 0.9) !important;
        }

        body.dark-theme .command-palette-item {
            color: #1e293b !important;
        }

        body.dark-theme .command-palette-label {
            color: #64748b !important;
        }

        .hero-cta-links {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .ghost-link {
            color: #2563eb;
            font-weight: 700;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.55rem 0.85rem;
            border: 1px solid rgba(226, 232, 240, 0.8);
            border-radius: 0.9rem;
            transition: background-color 0.2s ease, transform 0.18s ease;
        }

        .ghost-link:hover {
            background-color: rgba(59, 130, 246, 0.08);
            transform: translateY(-1px);
        }

        .mobile-cta-bar {
            display: none;
            position: sticky;
            bottom: 0.75rem;
            z-index: 80;
            width: 100%;
            gap: 0.75rem;
            padding: 0.75rem 0.5rem;
        }

        .mobile-cta {
            flex: 1 1 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.75rem 0.5rem;
            border-radius: 0.9rem;
            font-weight: 700;
            border: 1px solid transparent;
            box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
        }

        .mobile-cta.primary {
            background: linear-gradient(135deg, rgb(var(--brand-600)), rgb(var(--brand-700)));
            color: #fff;
        }

        .mobile-cta.ghost {
            background: rgba(255, 255, 255, 0.92);
            border-color: rgba(var(--border), 0.9);
            color: #0f172a;
        }

        @media (max-width: 768px) {
            .hero-shell { padding: 1.25rem; }
            .hero-meta-item { width: 100%; }
            #app-status-banner {
                margin-left: 0.75rem;
                margin-right: 0.75rem;
            }
            .blog-card-image {
                height: 11.5rem;
            }
            .hero-trust { grid-template-columns: 1fr; }
            .mobile-cta-bar { display: flex; }
        }

        @media (prefers-reduced-motion: reduce) {
            .animate-hero-title,
            .animate-hero-subtitle,
            .animate-hero-buttons,
            .animate-feature-card {
                animation: none !important;
                transform: none !important;
            }
            html { scroll-behavior: auto; }
        }

        :root {
            --motion-snap-fast: 140ms;
            --motion-snap-base: 220ms;
            --motion-snap-slow: 320ms;
            --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
            --ease-swift: cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        @keyframes morphFadeIn {
            0% {
                opacity: 0;
                transform: translateY(8px) scale(0.985);
                filter: blur(6px);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
        }

        @keyframes morphFadeOut {
            0% {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
            100% {
                opacity: 0;
                transform: translateY(-6px) scale(0.992);
                filter: blur(4px);
            }
        }

        @keyframes pageEnter {
            0% {
                opacity: 0;
                transform: translateY(10px) scale(0.992);
                filter: blur(4px);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
        }

        @keyframes pageLeave {
            0% {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
            100% {
                opacity: 0;
                transform: translateY(-8px) scale(0.994);
                filter: blur(3px);
            }
        }

        .fade-in,
        .animate-fade-in {
            animation: morphFadeIn var(--motion-snap-base) var(--ease-smooth) both;
            will-change: transform, opacity, filter;
            transform: translateZ(0);
            backface-visibility: hidden;
        }

        .page-enter-modern,
        .page-transition-enter {
            animation: pageEnter var(--motion-snap-base) var(--ease-smooth) both;
            will-change: transform, opacity, filter;
        }

        .page-leave-modern,
        .page-transition-leave {
            animation: pageLeave var(--motion-snap-fast) var(--ease-swift) both;
            will-change: transform, opacity, filter;
        }

        button,
        .btn,
        .glass-button,
        .btn-primary,
        .btn-secondary,
        .mobile-cta,
        .nav-link,
        .card-hover,
        .modern-card {
            transition: transform var(--motion-snap-fast) var(--ease-swift),
                        opacity var(--motion-snap-fast) ease,
                        background-color var(--motion-snap-base) ease,
                        border-color var(--motion-snap-base) ease,
                        box-shadow var(--motion-snap-base) var(--ease-smooth);
            transform: translateZ(0);
        }

        button:hover,
        .btn:hover,
        .glass-button:hover,
        .btn-primary:hover,
        .mobile-cta:hover,
        .card-hover:hover,
        .modern-card:hover {
            transform: translateY(-2px) translateZ(0);
        }

        button:active,
        .btn:active,
        .glass-button:active,
        .btn-primary:active,
        .mobile-cta:active {
            transform: translateY(0) scale(0.985) translateZ(0);
        }

        #mobile-menu {
            transform: translateX(100%);
            opacity: 0;
            filter: blur(2px);
            pointer-events: none;
            transition: transform var(--motion-snap-base) var(--ease-smooth),
                        opacity var(--motion-snap-fast) ease,
                        filter var(--motion-snap-fast) ease;
            will-change: transform, opacity, filter;
        }

        #mobile-menu.menu-open {
            transform: translateX(0);
            opacity: 1;
            filter: blur(0);
            pointer-events: auto;
        }

        #upgrade-modal > div,
        #edit-user-modal > div,
        #confirmation-modal > div,
        #event-modal > div,
        #profile-picture-crop-modal > div,
        #image-crop-modal > div,
        #keyboard-shortcuts-modal > div,
        #maintenance-template-modal > div,
        #blog-viewer-modal > div,
        #lesson-viewer-modal > div,
        #preview-modal > div,
        #legal-modal > div,
        #dmca-modal > div {
            transform: translateY(10px) scale(0.985);
            opacity: 0;
            filter: blur(6px);
            transition: transform var(--motion-snap-base) var(--ease-smooth),
                        opacity var(--motion-snap-fast) ease,
                        filter var(--motion-snap-fast) ease;
            will-change: transform, opacity, filter;
        }

        #upgrade-modal:not(.hidden) > div,
        #edit-user-modal:not(.hidden) > div,
        #confirmation-modal:not(.hidden) > div,
        #event-modal:not(.hidden) > div,
        #profile-picture-crop-modal:not(.hidden) > div,
        #image-crop-modal:not(.hidden) > div,
        #keyboard-shortcuts-modal:not(.hidden) > div,
        #maintenance-template-modal:not(.hidden) > div,
        #blog-viewer-modal:not(.hidden) > div,
        #lesson-viewer-modal:not(.hidden) > div,
        #preview-modal:not(.hidden) > div,
        #legal-modal:not(.hidden) > div,
        #dmca-modal:not(.hidden) > div {
            transform: translateY(0) scale(1);
            opacity: 1;
            filter: blur(0);
        }

        .transition-all {
            transition: all var(--motion-snap-base) var(--ease-smooth);
        }

        .transition-transform {
            transition: transform var(--motion-snap-base) var(--ease-smooth);
        }

        .transition-opacity {
            transition: opacity var(--motion-snap-base) ease;
        }

        @media (prefers-reduced-motion: reduce) {
            .fade-in,
            .animate-fade-in,
            .page-enter-modern,
            .page-leave-modern,
            .page-transition-enter,
            .page-transition-leave,
            #mobile-menu,
            #mobile-menu.menu-open,
            #upgrade-modal > div,
            #edit-user-modal > div,
            #confirmation-modal > div,
            #event-modal > div,
            #profile-picture-crop-modal > div,
            #image-crop-modal > div,
            #keyboard-shortcuts-modal > div,
            #maintenance-template-modal > div,
            #blog-viewer-modal > div,
            #lesson-viewer-modal > div,
            #preview-modal > div,
            #legal-modal > div,
            #dmca-modal > div {
                animation: none !important;
                transition: none !important;
                transform: none !important;
                filter: none !important;
                opacity: 1 !important;
            }
        }

        /* Universal surface consistency */
        #tools-page > div,
        #account-settings-page .bg-white\/70,
        #account-settings-page .bg-white\/50,
        #useful-links-page .bg-white\/70 {
            position: relative;
            overflow: hidden;
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 18px 40px -28px rgba(15, 23, 42, 0.22);
            transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
        }

        #tools-page > div:hover,
        #account-settings-page .bg-white\/70:hover,
        #account-settings-page .bg-white\/50:hover,
        #useful-links-page .bg-white\/70:hover {
            transform: translateY(-2px);
            box-shadow: 0 22px 50px -30px rgba(30, 64, 175, 0.24);
            border-color: rgba(var(--accent-300), 0.45);
        }

        .page > div:first-child h2,
        #account-settings-page h2,
        #useful-links-page h2 {
            letter-spacing: -0.03em;
        }

        /* Better checkbox visibility */
        input[type="checkbox"]:not(.gcse-checkbox) {
            border: 1.75px solid rgba(51, 65, 85, 0.42);
            box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35);
        }

        input[type="checkbox"]:not(.gcse-checkbox):hover {
            border-color: rgba(var(--accent-500), 0.55);
        }

        .gcse-checkbox {
            border-color: rgba(51, 65, 85, 0.35);
            box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35), 0 1px 2px rgba(15, 23, 42, 0.06);
        }

        .gcse-checkbox:not(:checked):hover {
            border-color: rgba(var(--accent-500), 0.65);
            background-color: rgba(var(--accent-50), 0.95);
        }

        /* Tools page enhancements */
        .timer-setting-card,
        .timer-metric-card,
        #tools-page .tools-panel-card {
            border-radius: 1rem;
            border: 1px solid rgba(var(--accent-300), 0.42);
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(239, 246, 255, 0.72));
            box-shadow: 0 18px 42px -34px rgba(30, 64, 175, 0.38), inset 0 1px 0 rgba(255,255,255,0.72);
            backdrop-filter: blur(16px);
        }

        .timer-setting-card {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            padding: 0.85rem 0.95rem;
            min-height: 100%;
        }

        .timer-setting-label,
        .timer-metric-label {
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #64748b;
        }

        .timer-setting-control {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .timer-metric-card {
            padding: 0.85rem 0.95rem;
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            min-height: 100%;
        }

        .timer-metric-value {
            font-size: 1.65rem;
            line-height: 1.1;
            font-weight: 900;
            letter-spacing: -0.03em;
            color: #0f172a;
        }

        .tools-timer-topbar {
            position: relative;
            z-index: 2;
        }

        .tools-timer-display-group {
            position: relative;
            z-index: 1;
            display: grid;
            justify-items: center;
            gap: 0.2rem;
            margin-top: 0.25rem;
        }

        .tools-timer-settings-grid {
            position: relative;
            z-index: 1;
        }

        .tools-timer-progress-shell,
        .tools-timer-actions,
        .tools-timer-metrics-grid {
            position: relative;
            z-index: 1;
        }

        .tools-timer-progress-shell {
            position: relative;
            height: 0.9rem !important;
            border-radius: 999px;
            overflow: hidden;
            border-color: rgba(148, 163, 184, 0.3) !important;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(226, 232, 240, 0.72)) !important;
            box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.12);
        }

        #tools-timer-progress {
            position: relative;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(120deg, #38bdf8 0%, #3b82f6 48%, #2563eb 100%);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.34), 0 0 14px -6px rgba(37, 99, 235, 0.72);
            transition: width 380ms cubic-bezier(0.22, 1, 0.36, 1), filter 240ms ease, background 240ms ease;
            overflow: hidden;
        }

        #tools-timer-progress::before,
        #tools-timer-progress::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        #tools-timer-progress::before {
            background:
                radial-gradient(20px 8px at 12% 68%, rgba(255,255,255,0.38), transparent 70%),
                radial-gradient(24px 10px at 38% 58%, rgba(255,255,255,0.34), transparent 72%),
                radial-gradient(18px 8px at 72% 62%, rgba(255,255,255,0.3), transparent 70%);
            opacity: 0.52;
            transform: translateX(0);
        }

        #tools-timer-progress.is-running::before {
            animation: timer-water-flow 1.35s linear infinite;
        }

        #tools-timer-progress::after {
            background: linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0));
            opacity: 0.65;
        }

        @keyframes timer-water-flow {
            from { transform: translateX(0); }
            to { transform: translateX(22px); }
        }

        #tools-timer-card {
            position: relative;
            overflow: hidden;
            transition: transform 260ms ease, box-shadow 260ms ease, background 260ms ease;
            box-shadow: 0 24px 50px -38px rgba(37, 99, 235, 0.45);
        }

        #tools-timer-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(255,255,255,0.72), transparent 45%);
            pointer-events: none;
        }

        #tools-timer-card[data-timer-theme="blue"] {
            background: linear-gradient(145deg, rgba(239,246,255,0.96), rgba(224,231,255,0.94));
        }

        #tools-timer-card[data-timer-theme="sunset"] {
            background: linear-gradient(145deg, rgba(255,247,237,0.97), rgba(254,226,226,0.95));
        }

        #tools-timer-card[data-timer-theme="forest"] {
            background: linear-gradient(145deg, rgba(240,253,244,0.97), rgba(220,252,231,0.94));
        }

        #tools-timer-card[data-timer-theme="midnight"] {
            background: linear-gradient(145deg, rgba(15,23,42,0.98), rgba(30,41,59,0.96));
        }

        #tools-timer-card[data-timer-theme="aurora"] {
            background: linear-gradient(145deg, rgba(236, 253, 245, 0.96), rgba(224, 231, 255, 0.94), rgba(233, 213, 255, 0.92));
        }

        #tools-timer-card[data-timer-theme="rose"] {
            background: linear-gradient(145deg, rgba(255, 241, 242, 0.98), rgba(254, 226, 226, 0.96), rgba(255, 247, 237, 0.94));
        }

        #tools-timer-card[data-timer-theme="midnight"] #tools-timer-display,
        #tools-timer-card[data-timer-theme="midnight"] .timer-metric-value,
        #tools-timer-card[data-timer-theme="midnight"] #tools-timer-status,
        #tools-timer-card[data-timer-theme="midnight"] .timer-setting-label,
        #tools-timer-card[data-timer-theme="midnight"] .timer-metric-label,
        #tools-timer-card[data-timer-theme="midnight"] .timer-setting-control span,
        #tools-timer-card[data-timer-theme="midnight"] #tools-timer-progress-label {
            color: #e2e8f0 !important;
        }

        .timer-session-window {
            margin-top: 0.8rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.65rem;
            border-radius: 999px;
            border: 1px solid rgba(37, 99, 235, 0.2);
            background: rgba(255, 255, 255, 0.7);
            padding: 0.35rem 0.75rem;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: #1d4ed8;
        }

        .timer-clock-shell {
            border-radius: 1rem;
            border: 1px solid rgba(37, 99, 235, 0.16);
            background: rgba(255, 255, 255, 0.64);
            padding: 0.85rem;
        }

        .timer-clock-toolbar {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 0.65rem;
        }

        .timer-clock-mode {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            border-radius: 999px;
            border: 1px solid rgba(37, 99, 235, 0.2);
            background: rgba(239, 246, 255, 0.78);
            color: #1e40af;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 0.3rem 0.65rem;
            justify-self: start;
        }

        .timer-clock-help {
            margin: 0.5rem 0 0;
            font-size: 0.75rem;
            font-weight: 600;
            color: #475569;
            text-align: left;
        }

        .timer-clock-wrap {
            margin-top: 0.7rem;
            border-radius: 0.95rem;
            border: 1px solid rgba(148, 163, 184, 0.3);
            background: rgba(255, 255, 255, 0.9);
            padding: 0.95rem 0.9rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.65rem;
        }

        .timer-clock-wrap[data-clock-display="digital"] {
            justify-content: center;
        }

        .timer-clock-wrap[data-clock-display="analog"] {
            justify-content: center;
        }

        .tools-timer-analog-clock {
            width: 86px;
            height: 86px;
            border-radius: 999px;
            border: 3px solid rgba(37, 99, 235, 0.35);
            background:
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.94), rgba(219, 234, 254, 0.86)),
                repeating-conic-gradient(from 0deg, rgba(37, 99, 235, 0.22) 0deg 6deg, transparent 6deg 30deg);
            position: relative;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 14px 22px -18px rgba(30, 64, 175, 0.62);
        }

        .tools-timer-clock-number {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) rotate(var(--clock-angle)) translateY(-34px) rotate(calc(-1 * var(--clock-angle)));
            font-size: 0.58rem;
            font-weight: 800;
            color: #1e3a8a;
            line-height: 1;
            font-variant-numeric: tabular-nums;
            z-index: 2;
        }

        .tools-timer-analog-hand {
            position: absolute;
            left: 50%;
            bottom: 50%;
            transform-origin: 50% 100%;
            border-radius: 999px;
            background: #1e3a8a;
            transition: transform 120ms linear;
            z-index: 3;
        }

        .tools-timer-analog-hand.hour {
            width: 4px;
            height: 25px;
            margin-left: -2px;
        }

        .tools-timer-analog-hand.minute {
            width: 3px;
            height: 33px;
            margin-left: -1.5px;
            background: #1d4ed8;
        }

        .tools-timer-analog-hand.second {
            width: 2px;
            height: 37px;
            margin-left: -1px;
            background: #dc2626;
        }

        .tools-timer-analog-center {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: #1d4ed8;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
            z-index: 4;
        }

        .tools-timer-digital-clock {
            margin: 0;
            font-size: 1.32rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            color: #0f172a;
            font-variant-numeric: tabular-nums;
            line-height: 1.2;
            padding-top: 0.2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        #tools-timer-display {
            margin-top: 0.65rem;
            margin-bottom: 0.15rem;
            line-height: 1.04;
            font-variant-numeric: tabular-nums;
            font-family: 'Space Grotesk', 'Plus Jakarta Sans', 'Avenir Next', 'Segoe UI', sans-serif;
            font-size: clamp(2.2rem, 4.3vw, 3.5rem);
            font-weight: 800;
            letter-spacing: 0.04em;
            text-wrap: balance;
            transition: color 220ms ease, text-shadow 220ms ease;
        }

        #tools-timer-card[data-timer-urgency="calm"] #tools-timer-display {
            color: #1d4ed8;
            text-shadow: 0 10px 26px rgba(59, 130, 246, 0.2);
        }

        #tools-timer-card[data-timer-urgency="focus"] #tools-timer-display {
            color: #0f766e;
            text-shadow: 0 10px 24px rgba(13, 148, 136, 0.2);
        }

        #tools-timer-card[data-timer-urgency="rush"] #tools-timer-display {
            color: #b45309;
            text-shadow: 0 10px 26px rgba(245, 158, 11, 0.22);
        }

        #tools-timer-card[data-timer-urgency="critical"] #tools-timer-display {
            color: #dc2626;
            text-shadow: 0 10px 28px rgba(220, 38, 38, 0.25);
        }

        #tools-timer-progress-label[data-timer-urgency="critical"],
        #tools-timer-status[data-timer-urgency="critical"] {
            color: #b91c1c !important;
        }

        #tools-timer-progress-label[data-timer-urgency="rush"],
        #tools-timer-status[data-timer-urgency="rush"] {
            color: #b45309 !important;
        }

        .timer-primary-actions {
            gap: 0.6rem;
        }

        .timer-primary-actions button,
        #tools-timer-pip-toggle {
            min-height: 2.7rem;
            font-size: 0.88rem;
            font-weight: 700;
        }

        .tools-timer-pip {
            position: fixed;
            left: calc(100vw - 280px);
            top: calc(100vh - 184px);
            width: 260px;
            height: 148px;
            min-width: 220px;
            min-height: 130px;
            max-width: 420px;
            max-height: 280px;
            resize: both;
            overflow: hidden;
            border-radius: 1rem;
            border: 1px solid rgba(148, 163, 184, 0.42);
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.95));
            box-shadow: 0 26px 48px -34px rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(10px);
            z-index: 1400;
            transition: box-shadow 150ms ease, border-color 150ms ease;
            user-select: none;
            -webkit-user-select: none;
        }

        .tools-timer-pip.is-running {
            border-color: rgba(37, 99, 235, 0.5);
            box-shadow: 0 24px 46px -30px rgba(37, 99, 235, 0.6);
        }

        .tools-timer-pip.is-dragging {
            cursor: grabbing;
            box-shadow: 0 28px 52px -28px rgba(15, 23, 42, 0.55);
        }

        .tools-timer-pip.is-snapping {
            transition: left 180ms ease, top 180ms ease, box-shadow 160ms ease;
        }

        .tools-timer-pip-snap-zones {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 1390;
        }

        .tools-timer-pip-snap-zone {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 56px;
            border: 2px dashed rgba(37, 99, 235, 0.38);
            background: rgba(59, 130, 246, 0.08);
            opacity: 0.7;
            transition: background-color 120ms ease, border-color 120ms ease, opacity 120ms ease;
        }

        .tools-timer-pip-snap-zone.left {
            left: 0;
            border-left: 0;
        }

        .tools-timer-pip-snap-zone.right {
            right: 0;
            border-right: 0;
        }

        .tools-timer-pip-snap-zone.is-active {
            background: rgba(59, 130, 246, 0.22);
            border-color: rgba(37, 99, 235, 0.68);
            opacity: 1;
        }

        .tools-timer-pip-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            padding: 0.5rem 0.65rem;
            border-bottom: 1px solid rgba(148, 163, 184, 0.3);
            background: linear-gradient(130deg, rgba(219, 234, 254, 0.85), rgba(255, 255, 255, 0.85));
            cursor: grab;
            touch-action: none;
        }

        .tools-timer-pip-title {
            font-size: 0.72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #1e40af;
        }

        .tools-timer-pip-actions {
            display: flex;
            align-items: center;
            gap: 0.38rem;
        }

        .tools-timer-pip-btn {
            border: 1px solid rgba(37, 99, 235, 0.2);
            background: rgba(255, 255, 255, 0.9);
            color: #1e3a8a;
            border-radius: 0.6rem;
            font-size: 0.72rem;
            font-weight: 700;
            padding: 0.22rem 0.5rem;
            min-width: 2.2rem;
            transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
        }

        .tools-timer-pip-btn:hover {
            background: rgba(219, 234, 254, 0.9);
            border-color: rgba(37, 99, 235, 0.45);
        }

        .tools-timer-pip-close {
            font-size: 1rem;
            line-height: 1;
            padding-left: 0.45rem;
            padding-right: 0.45rem;
        }

        .tools-timer-pip-body {
            height: calc(100% - 40px);
            display: grid;
            align-content: center;
            justify-items: center;
            gap: 0.3rem;
            padding: 0.35rem 0.65rem 0.7rem;
        }

        .tools-timer-pip-time {
            margin: 0;
            font-size: clamp(1.2rem, 1rem + 1.35vw, 1.8rem);
            font-weight: 800;
            letter-spacing: 0.08em;
            color: #0f172a;
            font-variant-numeric: tabular-nums;
            font-family: 'Space Grotesk', 'Plus Jakarta Sans', 'Avenir Next', 'Segoe UI', sans-serif;
            transition: color 180ms ease, text-shadow 180ms ease;
        }

        .tools-timer-pip[data-timer-urgency="critical"] .tools-timer-pip-time {
            color: #dc2626;
            text-shadow: 0 8px 20px rgba(220, 38, 38, 0.2);
        }

        .tools-timer-pip[data-timer-urgency="rush"] .tools-timer-pip-time {
            color: #b45309;
            text-shadow: 0 8px 18px rgba(245, 158, 11, 0.2);
        }

        .tools-timer-pip-status {
            margin: 0;
            text-align: center;
            font-size: 0.72rem;
            font-weight: 600;
            color: #475569;
            line-height: 1.3;
        }

        @media (max-width: 768px) {
            .timer-clock-toolbar {
                grid-template-columns: 1fr;
            }

            #tools-timer-pip-toggle {
                width: 100%;
            }

            .timer-clock-help {
                font-size: 0.72rem;
            }
        }

        .middle-autoscroll-indicator {
            position: fixed;
            width: 34px;
            height: 34px;
            margin-left: -17px;
            margin-top: -17px;
            border-radius: 999px;
            border: 1px solid rgba(37, 99, 235, 0.45);
            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(219,234,254,0.86));
            box-shadow: 0 12px 28px -20px rgba(30, 64, 175, 0.72);
            pointer-events: none;
            z-index: 1700;
        }

        .middle-autoscroll-indicator::before,
        .middle-autoscroll-indicator::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 999px;
        }

        .middle-autoscroll-indicator::before {
            width: 8px;
            height: 8px;
            background: rgba(30, 64, 175, 0.8);
        }

        .middle-autoscroll-indicator::after {
            width: 22px;
            height: 22px;
            border: 1px dashed rgba(37, 99, 235, 0.35);
        }

        .middle-autoscroll-indicator.is-active {
            animation: middle-autoscroll-pulse 1s ease-in-out infinite;
        }

        @keyframes middle-autoscroll-pulse {
            0%,
            100% {
                transform: scale(1);
                opacity: 0.95;
            }
            50% {
                transform: scale(1.08);
                opacity: 1;
            }
        }

        .dashboard-exam-card {
            display: grid;
            grid-template-columns: 1.45fr minmax(220px, 1fr);
            gap: 0.95rem;
            padding: 1rem;
            border-radius: 1rem;
            border: 1px solid rgba(191, 219, 254, 0.9);
            background: linear-gradient(140deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.95));
            box-shadow: 0 18px 30px -28px rgba(37, 99, 235, 0.6);
        }

        .avatar-emoji-pill {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
            border: 1px solid rgba(191, 219, 254, 0.85);
            background: linear-gradient(150deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.92));
            line-height: 1;
            user-select: none;
            z-index: 1;
        }

        .avatar-emoji-pill.hidden {
            display: none !important;
        }

        .avatar-emoji-header {
            font-size: 1rem;
            box-shadow: 0 4px 14px -9px rgba(15, 23, 42, 0.5);
        }

        .avatar-emoji-account {
            font-size: 1.65rem;
            box-shadow: 0 8px 18px -12px rgba(15, 23, 42, 0.42);
        }

        .emoji-avatar-preset-btn {
            border: 1px solid rgba(148, 163, 184, 0.45);
            background: rgba(255, 255, 255, 0.94);
            border-radius: 0.6rem;
            width: 2.1rem;
            height: 2.1rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            transition: transform 130ms ease, border-color 130ms ease, background-color 130ms ease;
        }

        .emoji-avatar-preset-btn:hover {
            transform: translateY(-1px);
            border-color: rgba(37, 99, 235, 0.45);
            background: rgba(219, 234, 254, 0.78);
        }

        body.avatar-onboarding-active {
            overflow: hidden;
        }

        .avatar-onboarding-overlay {
            position: fixed;
            inset: 0;
            z-index: 16000;
            background:
                radial-gradient(circle at 18% 20%, rgba(37, 99, 235, 0.16), transparent 34%),
                radial-gradient(circle at 82% 82%, rgba(249, 115, 22, 0.14), transparent 34%),
                rgba(2, 6, 23, 0.64);
            backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.1rem;
        }

        .avatar-onboarding-overlay.hidden {
            display: none !important;
        }

        .avatar-onboarding-card {
            width: min(100%, 30rem);
            border-radius: 1.15rem;
            border: 1px solid rgba(191, 219, 254, 0.45);
            background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.95));
            box-shadow: 0 34px 70px -44px rgba(15, 23, 42, 0.85);
            padding: 1.25rem 1.2rem 1.1rem;
        }

        .avatar-onboarding-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.7rem;
        }

        .avatar-onboarding-kicker {
            margin: 0;
            font-size: 0.66rem;
            font-weight: 900;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #1d4ed8;
        }

        .avatar-onboarding-close {
            width: 2rem;
            height: 2rem;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(255, 255, 255, 0.84);
            color: #475569;
            font-size: 1.1rem;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease, transform 140ms ease;
        }

        .avatar-onboarding-close:hover {
            border-color: rgba(37, 99, 235, 0.38);
            color: #1d4ed8;
            background: rgba(239, 246, 255, 0.96);
            transform: translateY(-1px);
        }

        .avatar-onboarding-title {
            margin: 0.45rem 0 0;
            font-size: 1.2rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.25;
        }

        .avatar-onboarding-help {
            margin: 0.45rem 0 0;
            font-size: 0.84rem;
            font-weight: 600;
            color: #475569;
            line-height: 1.45;
        }

        .avatar-slot-shell {
            margin-top: 0.95rem;
            border-radius: 0.95rem;
            border: 1px solid rgba(59, 130, 246, 0.3);
            background: rgba(255, 255, 255, 0.86);
            padding: 0.72rem;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 0.58rem;
        }

        .avatar-slot-step {
            width: 2.15rem;
            height: 2.15rem;
            border-radius: 0.72rem;
            border: 1px solid rgba(59, 130, 246, 0.34);
            background: linear-gradient(150deg, rgba(255,255,255,0.95), rgba(219, 234, 254, 0.86));
            color: #1d4ed8;
            font-size: 0.78rem;
            font-weight: 900;
            transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease;
        }

        .avatar-slot-step:hover {
            transform: translateY(-1px);
            border-color: rgba(37, 99, 235, 0.54);
            background: rgba(219, 234, 254, 0.95);
        }

        .avatar-slot-window {
            border-radius: 0.82rem;
            border: 1px solid rgba(148, 163, 184, 0.3);
            background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(226, 232, 240, 0.88));
            min-height: 5.8rem;
            padding: 0.38rem 0.4rem;
            display: grid;
            justify-items: center;
            align-content: center;
            gap: 0.3rem;
            outline: none;
            cursor: ns-resize;
        }

        .avatar-slot-item {
            line-height: 1;
            user-select: none;
            transition: transform 180ms ease, opacity 180ms ease;
        }

        .avatar-slot-item.is-active {
            font-size: 2.18rem;
            filter: drop-shadow(0 10px 14px rgba(59, 130, 246, 0.26));
        }

        .avatar-slot-item.is-faded {
            font-size: 1.25rem;
            opacity: 0.45;
            transform: scale(0.92);
        }

        .avatar-slot-window.is-spinning .avatar-slot-item.is-active {
            animation: avatar-slot-spin 180ms ease;
        }

        .avatar-slot-grid {
            margin-top: 0.62rem;
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 0.36rem;
        }

        .avatar-slot-chip {
            border-radius: 0.58rem;
            border: 1px solid rgba(148, 163, 184, 0.36);
            background: rgba(255, 255, 255, 0.95);
            min-height: 2.05rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
            line-height: 1;
            transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
        }

        .avatar-slot-chip:hover {
            border-color: rgba(37, 99, 235, 0.42);
            background: rgba(219, 234, 254, 0.86);
            transform: translateY(-1px);
        }

        .avatar-slot-chip.is-active,
        .avatar-slot-chip[aria-pressed="true"] {
            border-color: rgba(37, 99, 235, 0.56);
            background: linear-gradient(145deg, rgba(219, 234, 254, 0.94), rgba(191, 219, 254, 0.9));
            box-shadow: 0 8px 18px -14px rgba(37, 99, 235, 0.72);
        }

        .avatar-onboarding-actions {
            margin-top: 0.88rem;
            display: flex;
            flex-wrap: wrap;
            gap: 0.52rem;
            justify-content: flex-end;
        }

        .avatar-onboarding-btn {
            border-radius: 0.72rem;
            border: 1px solid transparent;
            font-size: 0.8rem;
            font-weight: 800;
            padding: 0.52rem 0.88rem;
            transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
        }

        .avatar-onboarding-btn.secondary {
            border-color: rgba(59, 130, 246, 0.28);
            background: rgba(239, 246, 255, 0.95);
            color: #1e40af;
        }

        .avatar-onboarding-btn.ghost {
            border-color: rgba(148, 163, 184, 0.38);
            background: rgba(255, 255, 255, 0.94);
            color: #334155;
        }

        .avatar-onboarding-btn.primary {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            color: white;
            box-shadow: 0 10px 20px -14px rgba(37, 99, 235, 0.82);
        }

        .avatar-onboarding-btn:hover {
            transform: translateY(-1px);
        }

        .avatar-onboarding-message {
            margin: 0.68rem 0 0;
            min-height: 1.05rem;
            font-size: 0.74rem;
            font-weight: 700;
            color: #64748b;
        }

        .avatar-onboarding-message[data-tone="info"],
        .avatar-onboarding-message[data-tone="muted"] {
            color: #334155;
        }

        .avatar-onboarding-message[data-tone="error"] {
            color: #b91c1c;
        }

        .avatar-onboarding-message[data-tone="success"] {
            color: #047857;
        }

        @keyframes avatar-slot-spin {
            0% {
                transform: translateY(8px) scale(0.9);
                opacity: 0.72;
            }
            100% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }

        .dashboard-streak-card {
            position: relative;
            overflow: hidden;
            --streak-heat: 0%;
            display: grid;
            grid-template-columns: 1.3fr minmax(250px, 1fr);
            gap: 0.95rem;
            padding: 1rem;
            border-radius: 1rem;
            border: 1px solid rgba(251, 191, 36, 0.42);
            background: linear-gradient(140deg, rgba(255, 251, 235, 0.96), rgba(255, 255, 255, 0.98));
            box-shadow: 0 18px 32px -25px rgba(217, 119, 6, 0.45);
        }

        .dashboard-streak-card::before,
        .dashboard-streak-card::after {
            content: '';
            position: absolute;
            pointer-events: none;
            transition: opacity 320ms ease, transform 320ms ease;
        }

        .dashboard-streak-card::before {
            inset: -24% 42% auto -24%;
            height: 60%;
            background: radial-gradient(circle at center, rgba(251, 191, 36, 0.2), transparent 66%);
            opacity: 0.35;
        }

        .dashboard-streak-card::after {
            right: -18%;
            bottom: -36%;
            width: 52%;
            height: 66%;
            background: radial-gradient(circle at center, rgba(249, 115, 22, 0.18), transparent 70%);
            opacity: 0.28;
        }

        .dashboard-streak-card[data-streak-tier="warm"]::before,
        .dashboard-streak-card[data-streak-tier="surge"]::before,
        .dashboard-streak-card[data-streak-tier="blaze"]::before,
        .dashboard-streak-card[data-streak-tier="inferno"]::before {
            opacity: 0.52;
            transform: scale(1.06);
        }

        .dashboard-streak-card[data-streak-tier="blaze"]::after,
        .dashboard-streak-card[data-streak-tier="inferno"]::after {
            opacity: 0.55;
            transform: translate(-6%, -6%) scale(1.08);
        }

        .dashboard-streak-card[data-streak-intensity="cold"] .dashboard-streak-flame-core {
            filter: saturate(0.75);
        }

        .dashboard-streak-card[data-streak-intensity="warm"] .dashboard-streak-flame-core {
            filter: saturate(1);
        }

        .dashboard-streak-card[data-streak-intensity="hot"] .dashboard-streak-flame-core {
            filter: saturate(1.12);
            box-shadow: 0 20px 36px -24px rgba(234, 88, 12, 0.85);
        }

        .dashboard-streak-overview {
            border-radius: 0.9rem;
            border: 1px solid rgba(245, 158, 11, 0.18);
            background: rgba(255, 255, 255, 0.86);
            padding: 0.9rem;
            position: relative;
            z-index: 1;
        }

        .dashboard-streak-kicker {
            margin: 0;
            font-size: 0.67rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #b45309;
        }

        .dashboard-streak-kicker-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.65rem;
        }

        .dashboard-streak-new-tag {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2.35rem;
            padding: 0.18rem 0.52rem;
            border-radius: 999px;
            border: 1px solid rgba(249, 115, 22, 0.5);
            background: linear-gradient(135deg, rgba(254, 215, 170, 0.94), rgba(253, 186, 116, 0.9));
            color: #9a3412;
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            box-shadow: 0 7px 18px -13px rgba(249, 115, 22, 0.8);
            animation: streak-new-pulse 1.9s ease-in-out infinite;
        }

        .dashboard-streak-title {
            margin: 0.32rem 0 0;
            font-size: 1.2rem;
            font-weight: 800;
            color: #111827;
            line-height: 1.25;
        }

        .dashboard-streak-meta {
            margin: 0.42rem 0 0;
            font-size: 0.83rem;
            font-weight: 600;
            color: #475569;
        }

        .dashboard-streak-visual {
            margin-top: 0.8rem;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: 0.72rem;
        }

        .dashboard-streak-flame-core {
            width: 4.35rem;
            height: 4.35rem;
            border-radius: 999px;
            border: 1px solid rgba(251, 191, 36, 0.45);
            background:
                radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.98), rgba(254, 243, 199, 0.95) 52%, rgba(253, 186, 116, 0.7));
            display: grid;
            align-content: center;
            justify-items: center;
            gap: 0.18rem;
            box-shadow: 0 18px 34px -28px rgba(217, 119, 6, 0.75);
            animation: streak-flame-pulse 2.2s ease-in-out infinite;
            position: relative;
            isolation: isolate;
        }

        .dashboard-streak-flame-aura {
            position: absolute;
            inset: -0.48rem;
            border-radius: inherit;
            background: radial-gradient(circle at center, rgba(251, 191, 36, 0.32), rgba(249, 115, 22, 0.1) 55%, transparent 72%);
            filter: blur(1.5px);
            z-index: -1;
            animation: streak-aura-breathe 2.4s ease-in-out infinite;
        }

        .dashboard-streak-flame-ember {
            position: absolute;
            width: 0.45rem;
            height: 0.45rem;
            border-radius: 999px;
            background: radial-gradient(circle at 35% 35%, rgba(254, 243, 199, 0.95), rgba(249, 115, 22, 0.82));
            box-shadow: 0 0 0.3rem rgba(249, 115, 22, 0.56);
            opacity: 0;
            pointer-events: none;
        }

        .dashboard-streak-flame-ember.ember-a {
            left: 0.9rem;
            bottom: 0.65rem;
            animation: streak-ember-float 1.75s ease-in-out infinite;
        }

        .dashboard-streak-flame-ember.ember-b {
            right: 0.82rem;
            bottom: 0.72rem;
            animation: streak-ember-float 1.95s ease-in-out 180ms infinite;
        }

        .dashboard-streak-flame-ember.ember-c {
            left: 2rem;
            bottom: 0.5rem;
            animation: streak-ember-float 1.65s ease-in-out 320ms infinite;
        }

        .dashboard-streak-flame-icon {
            font-size: 0.42rem;
            letter-spacing: 0.16em;
            font-weight: 900;
            text-transform: uppercase;
            color: #c2410c;
        }

        .dashboard-streak-flame-value {
            font-size: 1rem;
            font-weight: 900;
            letter-spacing: -0.03em;
            color: #9a3412;
            font-variant-numeric: tabular-nums;
        }

        .dashboard-streak-heat-wrap {
            display: grid;
            gap: 0.32rem;
        }

        .dashboard-streak-heat-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.55rem;
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-weight: 800;
            color: #92400e;
        }

        .dashboard-streak-heat-track {
            width: 100%;
            height: 0.55rem;
            border-radius: 999px;
            border: 1px solid rgba(251, 191, 36, 0.3);
            background: rgba(255, 237, 213, 0.7);
            overflow: hidden;
        }

        .dashboard-streak-heat-track > span {
            display: block;
            width: 0;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, rgba(250, 204, 21, 0.96), rgba(249, 115, 22, 0.95), rgba(239, 68, 68, 0.9));
            transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
            box-shadow: 0 0 14px rgba(249, 115, 22, 0.42);
        }

        .dashboard-streak-sparkline {
            display: grid;
            grid-template-columns: repeat(14, minmax(0, 1fr));
            align-items: end;
            gap: 0.2rem;
            min-height: 1.1rem;
        }

        .dashboard-streak-spark {
            height: var(--spark-h, 24%);
            min-height: 0.25rem;
            border-radius: 999px;
            background: rgba(251, 191, 36, 0.32);
            transition: height 280ms ease, background-color 280ms ease, box-shadow 280ms ease;
        }

        .dashboard-streak-spark.is-active {
            background: linear-gradient(180deg, rgba(249, 115, 22, 0.94), rgba(245, 158, 11, 0.96));
            box-shadow: 0 0 10px rgba(249, 115, 22, 0.45);
            animation: streak-spark-flicker 1.4s ease-in-out infinite;
            animation-delay: calc(var(--spark-h) * -10ms);
        }

        .dashboard-streak-challenge {
            margin: 0.72rem 0 0;
            font-size: 0.76rem;
            font-weight: 700;
            color: #7c2d12;
            border-radius: 0.72rem;
            border: 1px dashed rgba(251, 146, 60, 0.38);
            background: rgba(255, 247, 237, 0.88);
            padding: 0.42rem 0.56rem;
        }

        .dashboard-streak-utility-row {
            margin-top: 0.65rem;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.45rem;
        }

        .dashboard-streak-freeze-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.42rem;
            border-radius: 999px;
            border: 1px solid rgba(125, 211, 252, 0.52);
            background: linear-gradient(135deg, rgba(224, 242, 254, 0.94), rgba(186, 230, 253, 0.86));
            color: #075985;
            padding: 0.28rem 0.58rem;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
        }

        .dashboard-streak-freeze-label {
            font-size: 0.64rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .dashboard-streak-freeze-value {
            font-size: 0.86rem;
            font-weight: 900;
            line-height: 1;
        }

        .dashboard-streak-achievements {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.35rem;
        }

        .dashboard-streak-achievement {
            display: inline-flex;
            align-items: center;
            padding: 0.2rem 0.46rem;
            border-radius: 999px;
            border: 1px dashed rgba(148, 163, 184, 0.5);
            background: rgba(248, 250, 252, 0.95);
            color: #64748b;
            font-size: 0.64rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .dashboard-streak-achievement.is-earned {
            border-style: solid;
            border-color: rgba(245, 158, 11, 0.45);
            background: linear-gradient(135deg, rgba(255, 237, 213, 0.95), rgba(254, 243, 199, 0.88));
            color: #9a3412;
            box-shadow: 0 6px 15px -12px rgba(249, 115, 22, 0.8);
        }

        .dashboard-streak-metrics {
            margin-top: 0.75rem;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.5rem;
        }

        .dashboard-streak-metric {
            border: 1px solid rgba(251, 191, 36, 0.32);
            background: rgba(255, 251, 235, 0.9);
            border-radius: 0.7rem;
            padding: 0.52rem;
            display: grid;
            gap: 0.18rem;
        }

        .dashboard-streak-metric-value {
            font-size: 0.92rem;
            font-weight: 800;
            color: #b45309;
        }

        .dashboard-streak-metric-label {
            font-size: 0.7rem;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .dashboard-streak-list-wrap {
            border-radius: 0.9rem;
            border: 1px solid rgba(250, 204, 21, 0.3);
            background: rgba(255, 255, 255, 0.8);
            padding: 0.82rem;
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            position: relative;
            z-index: 1;
        }

        .dashboard-streak-podium {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.45rem;
            margin-bottom: 0.25rem;
        }

        .dashboard-streak-podium-empty {
            grid-column: 1 / -1;
            margin: 0;
            font-size: 0.72rem;
            font-weight: 600;
            color: #64748b;
            text-align: center;
            padding: 0.42rem 0.1rem;
        }

        .dashboard-streak-podium-item {
            border-radius: 0.75rem;
            border: 1px solid rgba(251, 191, 36, 0.34);
            background: rgba(255, 255, 255, 0.94);
            padding: 0.38rem 0.3rem 0.34rem;
            display: grid;
            justify-items: center;
            align-content: end;
            gap: 0.22rem;
        }

        .dashboard-streak-podium-item.rank-1 {
            background: linear-gradient(180deg, rgba(254, 243, 199, 0.98), rgba(255, 237, 213, 0.94));
            border-color: rgba(245, 158, 11, 0.48);
            transform: translateY(-0.2rem);
        }

        .dashboard-streak-podium-item.is-current {
            box-shadow: 0 10px 20px -15px rgba(234, 88, 12, 0.72);
            border-color: rgba(234, 88, 12, 0.55);
        }

        .dashboard-streak-podium-rank {
            font-size: 0.62rem;
            font-weight: 900;
            color: #92400e;
            letter-spacing: 0.12em;
        }

        .dashboard-streak-podium-avatar {
            width: 1.8rem;
            height: 1.8rem;
            border-radius: 999px;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.42);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.92);
            line-height: 1;
        }

        .dashboard-streak-podium-name {
            margin: 0;
            font-size: 0.66rem;
            font-weight: 700;
            color: #334155;
            max-width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .dashboard-streak-podium-pillar {
            width: 100%;
            min-height: 2.2rem;
            height: var(--podium-height, 3.6rem);
            border-radius: 0.55rem;
            border: 1px solid rgba(249, 115, 22, 0.4);
            background: linear-gradient(180deg, rgba(251, 191, 36, 0.9), rgba(249, 115, 22, 0.92));
            display: grid;
            place-items: center;
            color: #7c2d12;
            font-size: 0.68rem;
            font-weight: 800;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.52);
        }

        .dashboard-streak-podium-pillar strong {
            font-size: 0.72rem;
            letter-spacing: 0.03em;
        }

        .dashboard-streak-list-label {
            margin: 0;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.11em;
            text-transform: uppercase;
            color: #92400e;
        }

        .dashboard-streak-list {
            display: grid;
            gap: 0.42rem;
        }

        .dashboard-streak-empty {
            margin: 0;
            font-size: 0.8rem;
            font-weight: 600;
            color: #64748b;
        }

        .dashboard-streak-row {
            border: 1px solid rgba(251, 191, 36, 0.26);
            border-radius: 0.72rem;
            background: rgba(255, 255, 255, 0.94);
            padding: 0.42rem 0.52rem;
            display: grid;
            grid-template-columns: auto auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 0.45rem;
            animation: streak-row-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
            animation-delay: var(--streak-row-delay, 0ms);
        }

        .dashboard-streak-row.is-current {
            border-color: rgba(234, 88, 12, 0.45);
            background: rgba(255, 237, 213, 0.84);
        }

        .dashboard-streak-rank-badge {
            width: 1.35rem;
            height: 1.35rem;
            border-radius: 9999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            font-weight: 800;
            color: #9a3412;
            background: rgba(254, 215, 170, 0.82);
        }

        .dashboard-streak-rank-badge.has-medal {
            width: 1.6rem;
            background: linear-gradient(135deg, rgba(254, 243, 199, 0.96), rgba(252, 211, 77, 0.92));
            color: #7c2d12;
            box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.36);
        }

        .dashboard-streak-avatar {
            width: 1.7rem;
            height: 1.7rem;
            border-radius: 9999px;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.45);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(248, 250, 252, 0.92);
            line-height: 1;
        }

        .dashboard-streak-avatar-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .dashboard-streak-avatar-emoji {
            font-size: 0.92rem;
        }

        .dashboard-streak-avatar-fallback {
            font-size: 0.76rem;
            font-weight: 800;
            color: #334155;
        }

        .dashboard-streak-name {
            min-width: 0;
            font-size: 0.78rem;
            font-weight: 700;
            color: #0f172a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .dashboard-streak-value {
            font-size: 0.72rem;
            font-weight: 800;
            color: #7c2d12;
        }

        @keyframes streak-flame-pulse {
            0%,
            100% {
                transform: scale(1);
                box-shadow: 0 18px 34px -28px rgba(217, 119, 6, 0.75);
            }
            50% {
                transform: scale(1.04);
                box-shadow: 0 22px 40px -26px rgba(234, 88, 12, 0.82);
            }
        }

        @keyframes streak-aura-breathe {
            0%,
            100% {
                transform: scale(1);
                opacity: 0.75;
            }
            50% {
                transform: scale(1.08);
                opacity: 1;
            }
        }

        @keyframes streak-ember-float {
            0% {
                transform: translateY(0) scale(0.65);
                opacity: 0;
            }
            25% {
                opacity: 1;
            }
            100% {
                transform: translateY(-1.05rem) scale(1);
                opacity: 0;
            }
        }

        @keyframes streak-new-pulse {
            0%,
            100% {
                transform: translateY(0);
                box-shadow: 0 7px 18px -13px rgba(249, 115, 22, 0.8);
            }
            50% {
                transform: translateY(-1px);
                box-shadow: 0 10px 22px -12px rgba(249, 115, 22, 0.95);
            }
        }

        @keyframes streak-spark-flicker {
            0%,
            100% {
                opacity: 0.92;
            }
            50% {
                opacity: 1;
            }
        }

        @keyframes streak-row-enter {
            from {
                opacity: 0;
                transform: translateY(8px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Keep streak leaderboard visually stable without constant jitter. */
        .dashboard-streak-new-tag,
        .dashboard-streak-flame-core,
        .dashboard-streak-flame-aura,
        .dashboard-streak-flame-ember,
        .dashboard-streak-spark.is-active,
        .dashboard-streak-row {
            animation: none !important;
        }

        .dashboard-streak-row {
            transition: border-color 160ms ease, background-color 160ms ease;
        }

        .dashboard-exam-main {
            border-radius: 0.9rem;
            border: 1px solid rgba(148, 163, 184, 0.24);
            background: rgba(255, 255, 255, 0.85);
            padding: 0.9rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .dashboard-exam-kicker {
            margin: 0;
            font-size: 0.67rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #2563eb;
        }

        .dashboard-exam-title {
            margin: 0.2rem 0 0;
            font-size: 1.22rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1.25;
        }

        .dashboard-exam-meta {
            margin: 0.42rem 0 0;
            font-size: 0.86rem;
            font-weight: 600;
            color: #334155;
        }

        .dashboard-exam-main-actions {
            margin-top: 0.18rem;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.45rem;
        }

        .dashboard-exam-pin-btn {
            border: 1px solid rgba(37, 99, 235, 0.28);
            border-radius: 0.68rem;
            background: rgba(255, 255, 255, 0.92);
            color: #1e40af;
            font-size: 0.74rem;
            font-weight: 700;
            padding: 0.38rem 0.68rem;
            transition: border-color 130ms ease, background-color 130ms ease;
        }

        .dashboard-exam-pin-btn:hover {
            border-color: rgba(37, 99, 235, 0.52);
            background: rgba(219, 234, 254, 0.9);
        }

        .dashboard-exam-pin-btn.is-pinned {
            border-color: rgba(29, 78, 216, 0.62);
            background: rgba(219, 234, 254, 0.96);
            color: #1d4ed8;
        }

        .dashboard-exam-list-wrap {
            border-radius: 0.9rem;
            border: 1px solid rgba(148, 163, 184, 0.24);
            background: rgba(255, 255, 255, 0.78);
            padding: 0.82rem;
            display: flex;
            flex-direction: column;
            gap: 0.62rem;
        }

        .dashboard-exam-list-label {
            margin: 0;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.11em;
            text-transform: uppercase;
            color: #475569;
        }

        .dashboard-exam-list {
            display: grid;
            gap: 0.48rem;
            max-height: 16rem;
            overflow-y: auto;
            padding-right: 0.12rem;
        }

        .dashboard-exam-list::-webkit-scrollbar {
            width: 0.42rem;
        }

        .dashboard-exam-list::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.58);
        }

        .dashboard-exam-empty {
            margin: 0;
            font-size: 0.8rem;
            font-weight: 600;
            color: #64748b;
        }

        .dashboard-exam-pill {
            width: 100%;
            border: 1px solid rgba(148, 163, 184, 0.28);
            border-radius: 0.72rem;
            background: rgba(255, 255, 255, 0.95);
            padding: 0.42rem;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 0.45rem;
            align-items: center;
            transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease;
        }

        .dashboard-exam-pill:hover,
        .dashboard-exam-pill.is-pinned {
            transform: translateY(-1px);
            border-color: rgba(37, 99, 235, 0.45);
            background: rgba(239, 246, 255, 0.95);
        }

        .dashboard-exam-pill.is-selected {
            border-color: rgba(30, 64, 175, 0.52);
            box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.42);
        }

        .dashboard-exam-pill-open {
            border: 0;
            background: transparent;
            text-align: left;
            padding: 0.16rem 0.12rem;
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: 0.46rem;
            min-width: 0;
        }

        .dashboard-exam-pill-order {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.55rem;
            height: 1.55rem;
            border-radius: 999px;
            background: rgba(219, 234, 254, 0.85);
            border: 1px solid rgba(147, 197, 253, 0.62);
            color: #1e3a8a;
            font-size: 0.72rem;
            font-weight: 800;
            line-height: 1;
        }

        .dashboard-exam-pill-copy {
            min-width: 0;
            display: grid;
            gap: 0.18rem;
        }

        .dashboard-exam-pill-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.32rem;
            flex-wrap: wrap;
        }

        .dashboard-exam-pill-calendar,
        .dashboard-exam-pill-pin {
            border: 1px solid rgba(37, 99, 235, 0.28);
            border-radius: 0.62rem;
            background: rgba(255, 255, 255, 0.96);
            color: #1d4ed8;
            font-size: 0.72rem;
            font-weight: 700;
            padding: 0.34rem 0.58rem;
            white-space: nowrap;
            transition: background-color 130ms ease, border-color 130ms ease;
        }

        .dashboard-exam-pill-calendar:hover,
        .dashboard-exam-pill-pin:hover {
            background: rgba(219, 234, 254, 0.9);
            border-color: rgba(37, 99, 235, 0.5);
        }

        .dashboard-exam-pill-pin.is-pinned {
            background: rgba(191, 219, 254, 0.95);
            border-color: rgba(37, 99, 235, 0.6);
            color: #1e3a8a;
        }

        .dashboard-exam-pill-title {
            font-size: 0.83rem;
            font-weight: 700;
            color: #0f172a;
        }

        .dashboard-exam-pill-meta {
            font-size: 0.73rem;
            font-weight: 600;
            color: #475569;
        }

        .dashboard-exam-list-actions {
            display: flex;
            justify-content: flex-end;
        }

        .dashboard-exam-open-calendar {
            align-self: flex-start;
            border: 1px solid rgba(37, 99, 235, 0.25);
            border-radius: 0.68rem;
            background: rgba(219, 234, 254, 0.88);
            color: #1d4ed8;
            font-size: 0.74rem;
            font-weight: 700;
            padding: 0.38rem 0.66rem;
            transition: background-color 140ms ease, border-color 140ms ease;
        }

        .dashboard-exam-open-calendar-main {
            margin-left: auto;
        }

        .dashboard-exam-open-calendar-list {
            margin-left: 0;
        }

        .dashboard-exam-pin-help {
            margin: 0;
            font-size: 0.72rem;
            font-weight: 600;
            color: #64748b;
        }

        .dashboard-exam-open-calendar:hover {
            background: rgba(191, 219, 254, 0.92);
            border-color: rgba(37, 99, 235, 0.45);
        }

        .dashboard-study-shortcuts {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
            gap: 0.7rem;
        }

        .dashboard-study-shortcut-btn {
            border: 1px solid rgba(191, 219, 254, 0.9);
            border-radius: 0.9rem;
            background: linear-gradient(140deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.9));
            color: #1e3a8a;
            font-size: 0.86rem;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            min-height: 2.8rem;
            padding: 0.58rem 0.8rem;
            box-shadow: 0 14px 24px -24px rgba(37, 99, 235, 0.7);
            transition: transform 130ms ease, border-color 130ms ease, background-color 130ms ease;
        }

        .dashboard-study-shortcut-btn i {
            color: #2563eb;
            font-size: 0.9rem;
        }

        .dashboard-study-shortcut-btn:hover {
            transform: translateY(-1px);
            border-color: rgba(59, 130, 246, 0.65);
            background: rgba(219, 234, 254, 0.92);
        }

        .nav-tab-group {
            border: 1px solid rgba(191, 219, 254, 0.62);
            border-radius: 0.95rem;
            background: rgba(248, 250, 252, 0.56);
            padding: 0.78rem;
        }

        .nav-tab-group + .nav-tab-group {
            margin-top: 0.72rem;
        }

        .nav-tab-group.nav-tab-group-muted {
            border-color: rgba(203, 213, 225, 0.58);
            background: rgba(248, 250, 252, 0.38);
        }

        .nav-tab-group-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.72rem;
            margin-bottom: 0.58rem;
        }

        .nav-tab-group-title {
            margin: 0;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #1e3a8a;
        }

        .nav-tab-group-help {
            margin: 0;
            font-size: 0.72rem;
            font-weight: 600;
            color: #64748b;
        }

        .nav-tab-empty {
            margin: 0;
            font-size: 0.78rem;
            font-weight: 600;
            color: #64748b;
            padding: 0.2rem 0.1rem;
        }

        .nav-tab-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.85rem;
            border-radius: 0.85rem;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(255, 255, 255, 0.94);
            padding: 0.72rem 0.8rem;
            transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
        }

        .nav-tab-item-copy {
            flex: 1;
            min-width: 0;
        }

        .nav-tab-item.is-draggable {
            cursor: grab;
        }

        .nav-tab-item.is-dragging {
            opacity: 0.62;
            transform: scale(0.99);
            cursor: grabbing;
        }

        .nav-tab-item.is-drop-target {
            border-color: rgba(59, 130, 246, 0.64);
            box-shadow: 0 0 0 2px rgba(147, 197, 253, 0.72), 0 14px 28px -26px rgba(37, 99, 235, 0.6);
        }

        .nav-tab-item.is-hidden {
            border-style: dashed;
            opacity: 0.82;
            background: rgba(248, 250, 252, 0.9);
        }

        .nav-tab-label {
            margin: 0;
            font-size: 0.88rem;
            font-weight: 700;
            color: #0f172a;
        }

        .nav-tab-meta {
            margin: 0.15rem 0 0;
            font-size: 0.74rem;
            font-weight: 600;
            color: #64748b;
        }

        .nav-tab-actions {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .nav-tab-action-btn {
            border: 1px solid rgba(148, 163, 184, 0.4);
            border-radius: 0.62rem;
            background: rgba(255, 255, 255, 0.96);
            color: #0f172a;
            font-size: 0.76rem;
            font-weight: 700;
            min-width: 2rem;
            padding: 0.36rem 0.54rem;
            transition: background-color 120ms ease, border-color 120ms ease;
        }

        .nav-tab-action-btn:hover:not(:disabled) {
            background: rgba(219, 234, 254, 0.92);
            border-color: rgba(37, 99, 235, 0.42);
        }

        .nav-tab-action-btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .nav-tab-action-btn-wide {
            min-width: 4.8rem;
        }

        .nav-tab-drag-handle {
            min-width: 2.15rem;
            cursor: grab;
            color: #475569;
        }

        .nav-tab-drag-handle:active {
            cursor: grabbing;
        }

        .admin-section-target {
            position: relative;
            animation: admin-section-target-pulse 1.35s ease;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.42), 0 18px 32px -28px rgba(37, 99, 235, 0.65);
        }

        @keyframes admin-section-target-pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55), 0 16px 26px -22px rgba(37, 99, 235, 0.45);
            }
            55% {
                box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.12), 0 22px 36px -24px rgba(37, 99, 235, 0.62);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0), 0 18px 30px -28px rgba(37, 99, 235, 0.5);
            }
        }

        body.dark-theme .timer-session-window,
        body.dark-theme .timer-clock-shell,
        body.dark-theme .timer-clock-wrap,
        body.dark-theme .dashboard-exam-card,
        body.dark-theme .dashboard-streak-card,
        body.dark-theme .dashboard-exam-main,
        body.dark-theme .dashboard-streak-overview,
        body.dark-theme .dashboard-exam-list-wrap,
        body.dark-theme .dashboard-streak-list-wrap,
        body.dark-theme .dashboard-streak-flame-core,
        body.dark-theme .dashboard-streak-heat-track,
        body.dark-theme .dashboard-streak-challenge,
        body.dark-theme .dashboard-exam-pill,
        body.dark-theme .dashboard-streak-row,
        body.dark-theme .dashboard-study-shortcut-btn,
        body.dark-theme .nav-tab-group,
        body.dark-theme .nav-tab-item,
        body.dark-theme .tools-timer-pip {
            background: rgba(15, 23, 42, 0.88) !important;
            border-color: rgba(71, 85, 105, 0.78) !important;
            color: #e2e8f0 !important;
        }

        body.dark-theme .tools-timer-pip-header {
            background: rgba(30, 41, 59, 0.86);
            border-bottom-color: rgba(71, 85, 105, 0.7);
        }

        body.dark-theme .tools-timer-pip-btn,
        body.dark-theme .dashboard-exam-open-calendar,
        body.dark-theme .dashboard-exam-pin-btn,
        body.dark-theme .dashboard-exam-pill-calendar,
        body.dark-theme .dashboard-exam-pill-pin,
        body.dark-theme .dashboard-study-shortcut-btn,
        body.dark-theme .nav-tab-action-btn {
            background: rgba(30, 41, 59, 0.95);
            color: #dbeafe;
            border-color: rgba(96, 165, 250, 0.35);
        }

        body.dark-theme .tools-timer-digital-clock,
        body.dark-theme .timer-clock-help,
        body.dark-theme .dashboard-clock-number,
        body.dark-theme .tools-timer-clock-number,
        body.dark-theme .dashboard-exam-title,
        body.dark-theme .dashboard-streak-title,
        body.dark-theme .dashboard-exam-pill-title,
        body.dark-theme .dashboard-streak-name,
        body.dark-theme .nav-tab-group-title,
        body.dark-theme .nav-tab-label,
        body.dark-theme .dashboard-streak-flame-value,
        body.dark-theme .dashboard-streak-heat-head,
        body.dark-theme .tools-timer-pip-time {
            color: #f8fafc;
        }

        body.dark-theme .dashboard-exam-meta,
        body.dark-theme .dashboard-streak-meta,
        body.dark-theme .dashboard-exam-pill-meta,
        body.dark-theme .dashboard-exam-empty,
        body.dark-theme .dashboard-streak-empty,
        body.dark-theme .dashboard-streak-metric-label,
        body.dark-theme .dashboard-exam-pin-help,
        body.dark-theme .nav-tab-group-help,
        body.dark-theme .nav-tab-empty,
        body.dark-theme .nav-tab-meta,
        body.dark-theme .dashboard-streak-challenge,
        body.dark-theme .tools-timer-pip-status {
            color: #94a3b8;
        }

        body.dark-theme .dashboard-streak-kicker,
        body.dark-theme .dashboard-streak-list-label,
        body.dark-theme .dashboard-streak-metric-value,
        body.dark-theme .dashboard-streak-value,
        body.dark-theme .dashboard-streak-flame-icon,
        body.dark-theme .dashboard-streak-rank-badge,
        body.dark-theme .dashboard-streak-avatar-fallback {
            color: #fde68a;
        }

        body.dark-theme .avatar-emoji-pill,
        body.dark-theme .dashboard-streak-metric,
        body.dark-theme .dashboard-streak-avatar,
        body.dark-theme .dashboard-streak-spark,
        body.dark-theme .emoji-avatar-preset-btn {
            background: rgba(30, 41, 59, 0.94);
            border-color: rgba(96, 165, 250, 0.35);
            color: #f8fafc;
        }

        body.dark-theme .dashboard-streak-spark.is-active {
            background: linear-gradient(180deg, rgba(251, 146, 60, 0.92), rgba(245, 158, 11, 0.9));
            box-shadow: 0 0 10px rgba(251, 146, 60, 0.44);
        }

        body.dark-theme .dashboard-exam-pill-order {
            background: rgba(37, 99, 235, 0.28);
            border-color: rgba(96, 165, 250, 0.45);
            color: #bfdbfe;
        }

        body.dark-theme .dashboard-exam-pill.is-selected {
            border-color: rgba(96, 165, 250, 0.56) !important;
            box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.36);
        }

        body.dark-theme .dashboard-study-shortcut-btn i {
            color: #93c5fd;
        }

        #site-announcement-banner {
            margin: 0.75rem 1rem 0;
        }

        #event-countdown-banner {
            margin: 0.45rem 1rem 0;
        }

        .countdown-banner-shell {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.65rem;
            padding: 0.4rem 0.68rem;
            border: 1px solid rgba(180, 83, 9, 0.22);
            border-radius: 0.82rem;
            background: linear-gradient(135deg, #facc15 0%, #f59e0b 100%);
            color: #78350f;
            box-shadow: 0 14px 26px -24px rgba(146, 64, 14, 0.72);
        }

        .countdown-banner-main {
            min-width: 0;
            flex: 1 1 auto;
            display: flex;
            align-items: center;
            gap: 0.45rem;
        }

        .countdown-banner-message {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 0.84rem;
            font-weight: 700;
            line-height: 1.25;
        }

        .countdown-banner-controls {
            display: flex;
            align-items: center;
            gap: 0.28rem;
            flex-shrink: 0;
        }

        .countdown-banner-nav,
        .countdown-banner-restore,
        .countdown-banner-dismiss {
            border: 0;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.28);
            color: #78350f;
            font-weight: 800;
        }

        .countdown-banner-nav,
        .countdown-banner-dismiss {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            line-height: 1;
        }

        .countdown-banner-nav {
            width: 1.85rem;
            height: 1.85rem;
            line-height: 1;
            font-size: 1.08rem;
            transition: background-color 120ms ease;
        }

        .countdown-banner-nav:hover {
            background: rgba(255, 255, 255, 0.42);
        }

        .countdown-banner-index {
            font-size: 0.69rem;
            font-weight: 800;
            line-height: 1;
            padding: 0.16rem 0.44rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.24);
        }

        .countdown-banner-restore {
            padding: 0.32rem 0.56rem;
            font-size: 0.72rem;
            line-height: 1.1;
        }

        .countdown-banner-dismiss {
            width: 1.9rem;
            height: 1.9rem;
            line-height: 1;
            font-size: 1.04rem;
        }

        .site-announcement-nav {
            display: flex;
            align-items: center;
            gap: 0.32rem;
            flex-shrink: 0;
        }

        .site-announcement-arrow {
            border: 0;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.18);
            color: inherit;
            min-width: 1.9rem;
            min-height: 1.9rem;
            line-height: 1;
            font-size: 1.04rem;
            font-weight: 700;
            transition: background-color 120ms ease;
        }

        .site-announcement-arrow:hover {
            background: rgba(255, 255, 255, 0.28);
        }

        .site-announcement-shell {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.9rem;
            padding: 0.8rem 0.95rem;
            border: 1px solid rgba(37, 99, 235, 0.16);
            border-radius: 1rem;
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(29, 78, 216, 0.92));
            color: #eff6ff;
            box-shadow: 0 18px 38px -28px rgba(30, 64, 175, 0.75);
        }

        .site-announcement-copy {
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 0.65rem;
            font-size: 0.92rem;
            font-weight: 700;
        }

        .site-announcement-message {
            min-width: 0;
            line-height: 1.35;
        }

        .site-announcement-progress {
            flex-shrink: 0;
            font-size: 0.72rem;
            font-weight: 700;
            color: rgba(219, 234, 254, 0.96);
            background: rgba(255, 255, 255, 0.14);
            padding: 0.22rem 0.5rem;
            border-radius: 999px;
        }

        .site-announcement-actions {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            flex-shrink: 0;
        }

        .site-announcement-restore,
        .site-announcement-dismiss {
            border: 0;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.14);
            color: inherit;
            padding: 0.4rem 0.7rem;
            font-weight: 700;
        }

        .site-announcement-dismiss {
            min-width: 2.25rem;
            padding-left: 0.55rem;
            padding-right: 0.55rem;
            font-size: 1.1rem;
            line-height: 1;
        }

        html.low-spec body {
            background-attachment: scroll;
        }

        html.low-spec body::before,
        html.low-spec body::after {
            display: none;
            animation: none !important;
        }

        html.low-spec .page:not(.hidden),
        html.low-spec .page-enter-modern,
        html.low-spec .page-leave-modern {
            animation: none !important;
        }

        @media (hover: none), (pointer: coarse) {
            button:hover,
            .btn:hover,
            .glass-button:hover,
            .btn-primary:hover,
            .mobile-cta:hover,
            .card-hover:hover,
            .modern-card:hover,
            .hover-lift:hover,
            .hover-scale:hover,
            .hover-raise:hover,
            .nav-link:hover {
                transform: none !important;
                box-shadow: none !important;
            }

            .nav-link:hover::before,
            .nav-link:hover::after,
            button:hover::after,
            [data-tooltip]:hover::after {
                opacity: 0 !important;
                transform: none !important;
            }

            #mobile-menu,
            #mobile-menu.menu-open {
                filter: none !important;
            }
        }

        @media (max-width: 768px) {
            body {
                background-attachment: scroll;
            }

            body::before,
            body::after {
                display: none;
            }

            #mobile-menu {
                transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease !important;
            }

            .custom-tooltip {
                max-width: min(16rem, calc(100vw - 1rem));
                font-size: 12px;
                padding: 8px 10px;
            }
        }

        @media (max-width: 640px) {
            #site-announcement-banner {
                margin: 0.5rem 0.75rem 0;
            }

            #event-countdown-banner {
                margin: 0.35rem 0.75rem 0;
            }

            .countdown-banner-shell {
                gap: 0.48rem;
                padding: 0.36rem 0.55rem;
            }

            .countdown-banner-message {
                font-size: 0.77rem;
            }

            .countdown-banner-controls {
                gap: 0.2rem;
            }

            .countdown-banner-index,
            .countdown-banner-restore {
                display: none;
            }

            .countdown-banner-nav,
            .countdown-banner-dismiss {
                width: 1.8rem;
                height: 1.8rem;
            }

            .timer-session-window {
                width: 100%;
                justify-content: space-between;
                gap: 0.45rem;
                font-size: 0.68rem;
                padding-left: 0.6rem;
                padding-right: 0.6rem;
            }

            .timer-clock-wrap {
                width: 100%;
            }

            .timer-clock-toolbar {
                grid-template-columns: 1fr;
            }

            .timer-clock-help {
                text-align: center;
            }

            .tools-timer-analog-clock {
                width: 74px;
                height: 74px;
            }

            .tools-timer-clock-number {
                transform: translate(-50%, -50%) rotate(var(--clock-angle)) translateY(-29px) rotate(calc(-1 * var(--clock-angle)));
                font-size: 0.54rem;
            }

            .tools-timer-pip {
                width: min(92vw, 320px);
                min-width: min(92vw, 220px);
                max-width: 92vw;
            }

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

            .dashboard-streak-card {
                grid-template-columns: 1fr;
            }

            .dashboard-streak-visual {
                grid-template-columns: 1fr;
                justify-items: start;
            }

            .dashboard-streak-flame-core {
                width: 100%;
                height: auto;
                min-height: 3.15rem;
                grid-template-columns: auto auto;
                justify-content: space-between;
                justify-items: start;
                align-items: center;
                padding: 0.6rem 0.75rem;
            }

            .dashboard-streak-flame-icon {
                font-size: 0.6rem;
            }

            .dashboard-streak-flame-value {
                font-size: 1.2rem;
            }

            .dashboard-streak-metrics {
                grid-template-columns: 1fr;
            }

            .dashboard-exam-main-actions {
                width: 100%;
                justify-content: space-between;
            }

            .dashboard-exam-open-calendar-main {
                margin-left: 0;
            }

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

            .dashboard-exam-pill-open {
                grid-template-columns: auto minmax(0, 1fr);
            }

            .dashboard-exam-pill-actions {
                justify-content: flex-start;
            }

            .nav-tab-item {
                flex-direction: column;
                align-items: stretch;
            }

            .nav-tab-actions {
                justify-content: flex-start;
            }

            .site-announcement-shell {
                align-items: flex-start;
                padding: 0.68rem 0.78rem;
                border-radius: 0.9rem;
            }

            .site-announcement-nav {
                margin-top: 0.1rem;
            }

            .site-announcement-copy {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.45rem;
                font-size: 0.84rem;
            }

            .site-announcement-message {
                display: -webkit-box;
                line-clamp: 2;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .site-announcement-progress {
                font-size: 0.68rem;
            }

            .site-announcement-restore {
                display: none;
            }

            #app-status-banner {
                margin-top: 0.6rem;
                padding: 0.72rem 0.82rem;
            }
        }

        @media (max-width: 1024px) {
            #main-app > header[role="banner"] {
                flex-wrap: nowrap !important;
                align-items: center;
                gap: 0.55rem !important;
                padding: 0.56rem 0.8rem !important;
            }

            #main-app > header[role="banner"] > div:first-child,
            #main-app > header[role="banner"] > div:last-child {
                display: flex;
                align-items: center;
            }

            #main-app > header[role="banner"] > div:last-child {
                margin-left: auto;
            }

            #main-app > header[role="banner"] > div:first-child img {
                height: 2rem;
                width: auto;
            }

            #main-app > header[role="banner"] #hamburger-button {
                padding: 0.55rem;
                min-width: 44px;
                min-height: 44px;
            }
        }

        @media (max-width: 640px) {
            #main-app > header[role="banner"] {
                padding: 0.45rem 0.65rem !important;
                gap: 0.45rem !important;
            }

            #main-app > header[role="banner"] > div:first-child img {
                height: 1.8rem;
            }
        }

        @media (hover: none), (pointer: coarse) {
            #main-app > header[role="banner"] #hamburger-button {
                min-width: 46px;
                min-height: 46px;
            }

            .countdown-banner-nav,
            .countdown-banner-dismiss {
                min-width: 2rem;
                min-height: 2rem;
            }
        }

        #tools-timer-card[data-timer-theme="midnight"] .timer-setting-card,
        #tools-timer-card[data-timer-theme="midnight"] .timer-metric-card {
            background: rgba(15, 23, 42, 0.48);
            border-color: rgba(96, 165, 250, 0.25);
        }

        #tools-timer-card.is-break-mode {
            box-shadow: 0 24px 48px -30px rgba(16, 185, 129, 0.35);
        }

        #tools-page textarea,
        #tools-page .tools-select,
        #tools-page input[type="text"],
        #tools-page input[type="search"],
        #account-settings-page .tools-select {
            box-shadow: 0 8px 20px -18px rgba(15, 23, 42, 0.22);
        }

        #tools-notes-input {
            line-height: 1.65;
            background-image: linear-gradient(to bottom, rgba(255,255,255,0.96), rgba(248,250,252,0.96));
        }

        #tools-randomiser-output {
            line-height: 1.7;
            font-weight: 600;
        }

        .tools-calc-btn,
        .theme-preset-btn,
        #tools-page button,
        #account-settings-page button {
            transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
        }

        .tools-panel-card {
            position: relative;
            overflow: hidden;
            isolation: isolate;
        }

        .tools-panel-card::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(135deg, rgba(255,255,255,0.28), transparent 38%);
            opacity: 0.9;
        }

        .tools-panel-card::before {
            content: '';
            position: absolute;
            inset: 1px;
            border-radius: inherit;
            border: 1px solid rgba(255,255,255,0.42);
            pointer-events: none;
            opacity: 0.8;
        }

        body.dark-theme .tools-panel-card::after {
            background: linear-gradient(135deg, rgba(148,163,184,0.08), transparent 42%);
        }

        .tools-calc-toggle {
            min-height: 2.75rem;
            font-weight: 800;
        }

        .calculator-shell-top,
        .calculator-keypad {
            position: relative;
            z-index: 1;
        }

        #feedback-dismiss-button {
            font-size: 1rem;
            line-height: 1;
        }

        body.feedback-widget-hidden #feedback-dismiss-button,
        body.feedback-widget-hidden .sil-widget-feedback,
        body.feedback-widget-hidden [id*="bawkbox"],
        body.feedback-widget-hidden [class*="bawkbox"] {
            display: none !important;
        }

        #theme-quick-toggle,
        #theme-quick-toggle-mobile {
            box-shadow: 0 12px 28px -22px rgba(37, 99, 235, 0.45);
        }

        body.dark-theme #theme-quick-toggle,
        body.dark-theme #theme-quick-toggle-mobile {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.84)) !important;
            border-color: rgba(96, 165, 250, 0.35) !important;
            color: #e0f2fe !important;
        }

        .tools-calc-btn:hover,
        .theme-preset-btn:hover,
        #tools-page button:hover,
        #account-settings-page button:hover {
            transform: translateY(-1px);
        }

        .theme-preset-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 2.75rem;
            padding: 0.75rem 0.95rem;
            border-radius: 0.9rem;
            border: 1px solid rgba(203, 213, 225, 0.95);
            background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.95));
            color: #334155;
            font-size: 0.9rem;
            font-weight: 700;
            box-shadow: 0 12px 28px -24px rgba(15, 23, 42, 0.28);
        }

        .theme-preset-btn.is-active {
            border-color: rgba(var(--accent-500), 0.75);
            background: linear-gradient(135deg, rgba(var(--accent-50), 0.98), rgba(var(--accent-100), 0.95));
            color: rgb(var(--accent-700));
            box-shadow: 0 16px 34px -24px rgba(var(--accent-500), 0.42);
        }

        .dashboard-board-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-top: 0.3rem;
            padding: 0.45rem 0.85rem;
            border-radius: 999px;
            border: 1px solid rgba(var(--accent-300), 0.4);
            background: linear-gradient(135deg, rgba(var(--accent-50), 0.96), rgba(255,255,255,0.82));
            color: rgb(var(--accent-700));
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            box-shadow: 0 12px 24px -22px rgba(37, 99, 235, 0.35);
        }

        .tools-shell {
            position: relative;
            border-radius: 1.6rem;
            padding: 1rem;
            background:
                radial-gradient(circle at 8% 4%, rgba(219, 234, 254, 0.66), transparent 34%),
                radial-gradient(circle at 94% 10%, rgba(186, 230, 253, 0.52), transparent 32%),
                linear-gradient(155deg, rgba(248, 250, 252, 0.88), rgba(239, 246, 255, 0.76));
            border: 1px solid rgba(191, 219, 254, 0.6);
        }

        button i,
        button svg,
        .nav-link i,
        .nav-link svg,
        .tools-page-chip i,
        .tools-status-pill i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            vertical-align: middle;
            flex-shrink: 0;
        }

        .tools-page-hero {
            position: relative;
            isolation: isolate;
            overflow: hidden;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 1rem;
            padding: clamp(1rem, 2vw, 1.35rem);
            border-radius: 1.35rem;
            border: 1px solid rgba(191, 219, 254, 0.34);
            background-color: #2100eb;
            background-image: linear-gradient(132deg, rgba(33, 0, 235, 0.88) 0%, rgba(29, 78, 216, 0.84) 52%, rgba(14, 116, 232, 0.78) 100%);
            box-shadow: 0 24px 44px -34px rgba(30, 64, 175, 0.7);
        }

        .tools-page-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            opacity: 0.2;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='120' viewBox='0 0 360 120'%3E%3Cdefs%3E%3Cpattern id='p' width='250' height='30' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' stroke='%23E2E8FF' stroke-width='4' d='M-62.5-15C-31.3-15 0-7.5 0-7.5S31.3 0 62.5 0 125-7.5 125-7.5s31.3-7.5 62.5-7.5S250-7.5 250-7.5 281.3 0 312.5 0'/%3E%3Cpath fill='none' stroke='%23E2E8FF' stroke-width='4' d='M-62.5 0C-31.3 0 0 7.5 0 7.5S31.3 15 62.5 15 125 7.5 125 7.5s31.3-7.5 62.5-7.5S250 7.5 250 7.5 281.3 15 312.5 15'/%3E%3Cpath fill='none' stroke='%23E2E8FF' stroke-width='4' d='M-62.5 15C-31.3 15 0 22.5 0 22.5S31.3 30 62.5 30 125 22.5 125 22.5s31.3-7.5 62.5-7.5S250 22.5 250 22.5 281.3 30 312.5 30'/%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23p)' width='100%25' height='100%25'/%3E%3C/svg%3E");
            background-size: 380px 120px;
            background-position: 0 0;
            background-repeat: repeat;
            animation: toolsWaveDrift 30s linear infinite;
        }

        .tools-page-hero::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 10% 14%, rgba(255, 255, 255, 0.23), transparent 42%),
                radial-gradient(circle at 88% 84%, rgba(191, 219, 254, 0.2), transparent 44%);
        }

        .tools-page-hero > * {
            position: relative;
            z-index: 1;
        }

        .tools-hero-title {
            color: #f8fbff;
            text-shadow: 0 12px 26px rgba(15, 23, 42, 0.35);
        }

        .tools-hero-description {
            color: rgba(239, 246, 255, 0.94);
        }

        @keyframes toolsWaveDrift {
            0% {
                transform: translate3d(0, 0, 0);
            }
            50% {
                transform: translate3d(-26px, 4px, 0);
            }
            100% {
                transform: translate3d(-52px, 0, 0);
            }
        }

        .tools-section-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.45rem 0.85rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.16);
            border: 1px solid rgba(219, 234, 254, 0.36);
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #eff6ff;
        }

        .tools-page-hero-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            justify-content: flex-end;
        }

        .tools-page-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.7rem 1rem;
            border-radius: 1rem;
            background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(219,234,254,0.18));
            border: 1px solid rgba(191, 219, 254, 0.34);
            color: #eff6ff;
            font-size: 0.85rem;
            font-weight: 700;
            box-shadow: 0 16px 34px -28px rgba(15, 23, 42, 0.5);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        .tools-quick-nav {
            display: flex;
            flex-wrap: wrap;
            gap: 0.55rem;
        }

        .tools-quick-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 2.2rem;
            padding: 0.48rem 0.92rem;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.34);
            background: rgba(255, 255, 255, 0.86);
            color: #1e3a8a;
            font-size: 0.76rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            text-decoration: none;
            transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
        }

        .tools-quick-link:hover {
            border-color: rgba(37, 99, 235, 0.55);
            background: rgba(219, 234, 254, 0.92);
            transform: translateY(-1px);
        }

        .tools-section-block {
            scroll-margin-top: 92px;
        }

        .tools-stage-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.9fr);
            gap: 1.5rem;
            align-items: start;
        }

        .tools-sidebar-stack,
        .tools-utility-grid {
            display: grid;
            gap: 1.5rem;
        }

        .tools-sidebar-stack {
            grid-template-columns: 1fr;
        }

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

        .tools-status-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            min-height: 2.5rem;
            padding: 0.55rem 0.9rem;
            border-radius: 999px;
            border: 1px solid rgba(191, 219, 254, 0.8);
            background: linear-gradient(135deg, rgba(239, 246, 255, 0.9), rgba(255, 255, 255, 0.76));
            color: #1d4ed8;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .tools-hero-panel,
        .tools-compact-panel,
        .tools-utility-card,
        .tools-grade-panel {
            transition: border-color 170ms ease, box-shadow 170ms ease, transform 170ms ease;
        }

        .tools-hero-panel:hover,
        .tools-compact-panel:hover,
        .tools-utility-card:hover,
        .tools-grade-panel:hover {
            transform: translateY(-2px);
            border-color: rgba(147, 197, 253, 0.76);
            box-shadow: 0 20px 36px -30px rgba(37, 99, 235, 0.32);
        }

        #tools-grade-chart {
            display: block;
            width: 100%;
            height: 100%;
        }

        .tools-grade-panel canvas {
            image-rendering: auto;
        }

        @keyframes gentleFloatCard {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-3px); }
        }

        @supports (animation-timeline: view()) {
            .tools-panel-card,
            #subject-grid > div,
            #calendar-page > div {
                animation: fadeInUpSoft both;
                animation-timeline: view();
                animation-range: entry 10% cover 28%;
            }
        }

        @keyframes fadeInUpSoft {
            from {
                opacity: 0;
                transform: translateY(24px) scale(0.985);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        body.dark-theme .dashboard-board-badge,
        body.dark-theme .tools-page-chip,
        body.dark-theme .tools-section-eyebrow,
        body.dark-theme .tools-quick-link {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.78), rgba(30, 41, 59, 0.7));
            border-color: rgba(96, 165, 250, 0.25);
            color: #dbeafe;
        }

        body.dark-theme .tools-shell {
            background:
                radial-gradient(circle at 8% 4%, rgba(37, 99, 235, 0.18), transparent 36%),
                radial-gradient(circle at 94% 10%, rgba(56, 189, 248, 0.16), transparent 36%),
                linear-gradient(155deg, rgba(15, 23, 42, 0.86), rgba(30, 41, 59, 0.74));
            border-color: rgba(96, 165, 250, 0.18);
        }

        body.dark-theme .tools-page-hero {
            border-radius: 1.6rem;
        }

        body.dark-theme .tools-page-hero .tools-section-eyebrow,
        body.dark-theme .tools-page-hero .tools-page-chip {
            background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(191,219,254,0.13));
            border-color: rgba(219, 234, 254, 0.34);
            color: #eff6ff;
        }

        body.dark-theme #tools-timer-card,
        body.dark-theme .tools-grade-panel .bg-white\/85,
        body.dark-theme .tools-grade-panel .bg-white\/80,
        body.dark-theme .tools-grade-panel .bg-white,
        body.dark-theme .tools-grade-panel .bg-gray-50,
        body.dark-theme .tools-compact-panel .bg-white\/90,
        body.dark-theme .tools-utility-card .bg-white\/90,
        body.dark-theme .tools-utility-card .bg-blue-50\/70,
        body.dark-theme .tools-panel-card .bg-gray-100,
        body.dark-theme .tools-panel-card .bg-gray-100\/80,
        body.dark-theme .tools-panel-card .bg-gray-200,
        body.dark-theme .tools-panel-card .bg-blue-50 {
            background: linear-gradient(145deg, rgba(15, 23, 42, 0.86), rgba(30, 41, 59, 0.72), rgba(30, 64, 175, 0.12)) !important;
            border-color: rgba(96, 165, 250, 0.18) !important;
            color: #e2e8f0 !important;
        }

        body.dark-theme .tools-grade-panel thead,
        body.dark-theme .tools-grade-panel thead.bg-gray-50,
        body.dark-theme .tools-grade-panel .sticky.top-0 {
            background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.92)) !important;
            color: #dbeafe !important;
        }

        body.dark-theme #tools-timer-progress {
            background: linear-gradient(90deg, rgba(96, 165, 250, 0.95), rgba(129, 140, 248, 0.96));
        }

        body.dark-theme #tools-page .tools-panel-card::before {
            border-color: rgba(148, 163, 184, 0.12);
        }

        body.dark-theme .tools-status-pill {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(30, 41, 59, 0.78));
            border-color: rgba(96, 165, 250, 0.24);
            color: #dbeafe;
        }

        .dashboard-clock-shell {
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: center;
            gap: 1rem;
            min-width: min(100%, 22rem);
            font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
        }

        .dashboard-clock-analog {
            position: relative;
            width: 5.25rem;
            height: 5.25rem;
            border-radius: 999px;
            border: 1px solid rgba(191, 219, 254, 0.9);
            background:
                radial-gradient(circle at center, rgba(255,255,255,0.92) 0 35%, transparent 36%),
                radial-gradient(circle at 30% 30%, rgba(191, 219, 254, 0.65), transparent 55%),
                linear-gradient(145deg, rgba(255,255,255,0.98), rgba(224, 231, 255, 0.92));
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 18px 35px -24px rgba(37, 99, 235, 0.42);
        }

        .dashboard-clock-analog::before {
            content: '';
            position: absolute;
            inset: 0.5rem;
            border-radius: inherit;
            border: 1px dashed rgba(96, 165, 250, 0.22);
            z-index: 1;
        }

        .dashboard-clock-number {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) rotate(var(--clock-angle)) translateY(-1.78rem) rotate(calc(-1 * var(--clock-angle)));
            font-size: 0.56rem;
            font-weight: 800;
            color: #1e3a8a;
            line-height: 1;
            font-variant-numeric: tabular-nums;
            z-index: 2;
        }

        .dashboard-clock-hand {
            position: absolute;
            left: 50%;
            bottom: 50%;
            width: 0.24rem;
            border-radius: 999px;
            transform-origin: center bottom;
            transform: translateX(-50%) rotate(0deg);
            box-shadow: 0 0 0 1px rgba(255,255,255,0.18);
            z-index: 3;
        }

        .dashboard-clock-hand.hour {
            height: 1.25rem;
            background: #1e293b;
        }

        .dashboard-clock-hand.minute {
            height: 1.72rem;
            background: #2563eb;
        }

        .dashboard-clock-hand.second {
            width: 0.12rem;
            height: 2rem;
            background: #ec4899;
        }

        .dashboard-clock-center {
            position: absolute;
            inset: 50% auto auto 50%;
            width: 0.75rem;
            height: 0.75rem;
            border-radius: 999px;
            transform: translate(-50%, -50%);
            background: linear-gradient(135deg, #1d4ed8, #7c3aed);
            box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.82);
            z-index: 4;
        }

        .dashboard-clock-digital {
            min-width: 0;
            text-align: left;
        }

        #clock-time {
            margin: 0;
            font-family: 'Space Grotesk', 'Plus Jakarta Sans', 'Avenir Next', 'Segoe UI', sans-serif;
            font-size: clamp(1.55rem, 2.35vw, 2.05rem);
            font-weight: 800;
            letter-spacing: 0.08em;
            color: #0f172a;
            font-variant-numeric: tabular-nums;
            line-height: 1.08;
        }

        #clock-date {
            margin-top: 0.34rem;
            font-size: 0.66rem;
            letter-spacing: 0.16em;
            font-weight: 700;
            color: #64748b;
        }

        .dashboard-clock-focus-label {
            margin-top: 0.35rem;
            color: #2563eb;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .calendar-shell {
            display: grid;
            gap: 1rem;
        }

        .calendar-action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 2.75rem;
            padding: 0.65rem 1rem;
            border-radius: 999px;
            border: 1px solid rgba(191, 219, 254, 0.85);
            background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(239,246,255,0.88));
            color: #1d4ed8;
            font-size: 0.82rem;
            font-weight: 800;
        }

        .calendar-insights-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1rem;
        }

        .calendar-insight-card {
            position: relative;
            overflow: hidden;
            border-radius: 1.15rem;
            border: 1px solid rgba(191, 219, 254, 0.6);
            background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(239,246,255,0.72), rgba(224,231,255,0.7));
            padding: 1rem 1.1rem;
            box-shadow: 0 20px 40px -30px rgba(37, 99, 235, 0.32);
        }

        .calendar-insight-card::after {
            content: '';
            position: absolute;
            inset: auto -1.5rem -1.5rem auto;
            width: 4.25rem;
            height: 4.25rem;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(96, 165, 250, 0.22), transparent 68%);
        }

        .calendar-insight-card-wide {
            grid-column: span 1;
        }

        .calendar-insight-label {
            font-size: 0.76rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #64748b;
        }

        .calendar-insight-value,
        .calendar-insight-feature {
            margin-top: 0.45rem;
            font-size: 1.7rem;
            line-height: 1.05;
            font-weight: 900;
            letter-spacing: -0.03em;
            color: #0f172a;
        }

        .calendar-insight-feature {
            font-size: 1.1rem;
            line-height: 1.35;
        }

        .calendar-insight-subtext {
            margin-top: 0.35rem;
            color: #64748b;
            font-size: 0.84rem;
            line-height: 1.45;
        }

        .calendar-board {
            position: relative;
            overflow: hidden;
        }

        .calendar-board::before {
            content: '';
            position: absolute;
            inset: -15% auto auto 65%;
            width: 12rem;
            height: 12rem;
            border-radius: 999px;
            background: radial-gradient(circle, rgba(96, 165, 250, 0.16), transparent 68%);
            pointer-events: none;
        }

        .calendar-day {
            overflow: hidden;
        }

        #calendar-agenda {
            display: grid;
            gap: 0.9rem;
        }

        #calendar-agenda .calendar-agenda-item,
        #calendar-agenda > div {
            border-radius: 1rem;
            border: 1px solid rgba(226, 232, 240, 0.95);
            background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(248,250,252,0.92));
            box-shadow: 0 18px 34px -28px rgba(15, 23, 42, 0.14);
        }

        .flashcards-workspace {
            display: grid;
            grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.5fr);
            gap: 1.5rem;
            align-items: start;
        }

        .flashcards-sidebar,
        .flashcards-editor,
        .flashcards-study-shell,
        .flashcards-composer-card,
        .flashcards-editor-card,
        .flashcards-stat-card,
        .flashcards-empty-state {
            border-radius: 1.1rem;
            border: 1px solid rgba(191, 219, 254, 0.52);
            background: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(239,246,255,0.76));
            box-shadow: 0 20px 40px -34px rgba(37, 99, 235, 0.34), inset 0 1px 0 rgba(255,255,255,0.78);
        }

        .flashcards-sidebar,
        .flashcards-editor,
        .flashcards-study-shell {
            padding: 1rem;
        }

        .flashcards-create-form {
            display: grid;
            gap: 0.8rem;
        }

        .flashcards-section-heading h4,
        .flashcards-editor-title {
            color: #0f172a;
            font-weight: 900;
            letter-spacing: -0.03em;
        }

        .flashcards-section-heading p,
        .flashcards-editor-description,
        .flashcards-empty-state p {
            margin-top: 0.2rem;
            color: #64748b;
            font-size: 0.92rem;
            line-height: 1.5;
        }

        .flashcards-deck-list,
        .flashcards-card-list {
            display: grid;
            gap: 0.8rem;
        }

        .flashcards-deck-item {
            display: grid;
            gap: 0.55rem;
            width: 100%;
            padding: 0.95rem;
            border-radius: 1rem;
            border: 1px solid rgba(191, 219, 254, 0.45);
            background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,250,252,0.92));
            text-align: left;
        }

        .flashcards-deck-item.is-active {
            border-color: rgba(37, 99, 235, 0.55);
            box-shadow: 0 22px 36px -30px rgba(37, 99, 235, 0.55);
            transform: translateY(-1px);
        }

        .flashcards-deck-item-header,
        .flashcards-editor-header,
        .flashcards-study-topbar,
        .flashcards-study-progress-meta,
        .flashcards-editor-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .flashcards-deck-title {
            font-size: 1rem;
            font-weight: 800;
            color: #0f172a;
        }

        .flashcards-deck-subject,
        .flashcards-editor-kicker {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            color: #2563eb;
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .flashcards-deck-meta {
            color: #64748b;
            font-size: 0.82rem;
            line-height: 1.45;
        }

        .flashcards-editor-grid,
        .flashcards-composer-grid,
        .flashcards-stats-row {
            display: grid;
            gap: 1rem;
            margin-top: 1rem;
        }

        .flashcards-editor-grid,
        .flashcards-stats-row {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

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

        .flashcards-editor-card,
        .flashcards-composer-card {
            padding: 1rem;
        }

        .flashcards-editor-card-wide {
            grid-column: span 1;
        }

        .flashcards-input-label,
        .flashcards-stat-label {
            display: block;
            margin-bottom: 0.4rem;
            color: #64748b;
            font-size: 0.74rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .flashcards-stat-value {
            font-size: 1.4rem;
            line-height: 1.1;
            font-weight: 900;
            color: #0f172a;
        }

        .flashcards-card-item {
            display: grid;
            gap: 0.9rem;
            padding: 1rem;
            border-radius: 1rem;
            border: 1px solid rgba(226, 232, 240, 0.95);
            background: rgba(255,255,255,0.92);
        }

        .flashcards-card-item-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.8rem;
        }

        .flashcards-card-item-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .flashcards-empty-state {
            min-height: 20rem;
            display: grid;
            place-items: center;
            text-align: center;
            padding: 1.4rem;
        }

        .flashcards-empty-state i {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 3.25rem;
            height: 3.25rem;
            margin-bottom: 0.9rem;
            border-radius: 1rem;
            background: linear-gradient(135deg, rgba(219,234,254,0.9), rgba(224,231,255,0.8));
            color: #2563eb;
            font-size: 1.2rem;
        }

        .flashcards-study-progress-bar {
            width: 100%;
            height: 0.7rem;
            border-radius: 999px;
            overflow: hidden;
            background: rgba(191, 219, 254, 0.44);
            border: 1px solid rgba(191, 219, 254, 0.65);
        }

        .flashcards-study-progress-bar span {
            display: block;
            height: 100%;
            width: 0;
            border-radius: inherit;
            background: linear-gradient(90deg, #2563eb, #7c3aed, #0ea5e9);
            transition: width 220ms ease;
        }

        .flashcards-study-card {
            width: 100%;
            min-height: 20rem;
            margin-top: 1rem;
            perspective: 1600px;
            border: none;
            background: transparent !important;
            padding: 0;
        }

        .flashcards-study-card:hover {
            transform: none !important;
        }

        .flashcards-study-card-inner {
            position: relative;
            display: block;
            width: 100%;
            min-height: 20rem;
            transform-style: preserve-3d;
            transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
        }

        .flashcards-study-card.is-flipped .flashcards-study-card-inner {
            transform: rotateY(180deg);
        }

        .flashcards-study-face {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 1rem;
            padding: 2rem;
            border-radius: 1.4rem;
            border: 1px solid rgba(191, 219, 254, 0.58);
            background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(239,246,255,0.86), rgba(224,231,255,0.82));
            box-shadow: 0 30px 60px -44px rgba(37, 99, 235, 0.52);
            backface-visibility: hidden;
        }

        .flashcards-study-back {
            transform: rotateY(180deg);
            background: linear-gradient(145deg, rgba(239,246,255,0.96), rgba(224,231,255,0.9), rgba(233,213,255,0.84));
        }

        .flashcards-study-face-label {
            color: #2563eb;
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .flashcards-study-copy {
            color: #0f172a;
            font-size: clamp(1.2rem, 2vw, 1.65rem);
            line-height: 1.45;
            font-weight: 800;
            white-space: pre-wrap;
        }

        .flashcards-study-hint {
            color: #64748b;
            font-size: 0.92rem;
            line-height: 1.5;
        }

        .flashcards-study-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-top: 1rem;
        }

        body.dark-theme .dashboard-clock-shell,
        body.dark-theme .calendar-insight-card,
        body.dark-theme .flashcards-sidebar,
        body.dark-theme .flashcards-editor,
        body.dark-theme .flashcards-study-shell,
        body.dark-theme .flashcards-composer-card,
        body.dark-theme .flashcards-editor-card,
        body.dark-theme .flashcards-stat-card,
        body.dark-theme .flashcards-empty-state,
        body.dark-theme .flashcards-card-item,
        body.dark-theme .flashcards-deck-item,
        body.dark-theme .flashcards-study-face,
        body.dark-theme #calendar-agenda > div {
            background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.8), rgba(30, 64, 175, 0.14)) !important;
            border-color: rgba(96, 165, 250, 0.18) !important;
            color: #e2e8f0;
        }

        body.dark-theme .dashboard-clock-analog {
            background:
                radial-gradient(circle at center, rgba(15,23,42,0.96) 0 35%, transparent 36%),
                radial-gradient(circle at 30% 30%, rgba(96, 165, 250, 0.24), transparent 55%),
                linear-gradient(145deg, rgba(15,23,42,0.98), rgba(30,41,59,0.92));
            border-color: rgba(96, 165, 250, 0.24);
        }

        body.dark-theme .dashboard-clock-hand.hour {
            background: #e2e8f0;
        }

        body.dark-theme .dashboard-clock-hand.minute {
            background: #60a5fa;
        }

        body.dark-theme .dashboard-clock-focus-label,
        body.dark-theme .calendar-insight-value,
        body.dark-theme .calendar-insight-feature,
        body.dark-theme .flashcards-section-heading h4,
        body.dark-theme .flashcards-editor-title,
        body.dark-theme .flashcards-deck-title,
        body.dark-theme .flashcards-stat-value,
        body.dark-theme .flashcards-study-copy {
            color: #f8fafc !important;
        }

        body.dark-theme #clock-time {
            color: #e2e8f0;
        }

        body.dark-theme #clock-date {
            color: #cbd5e1;
        }

        body.dark-theme .calendar-insight-label,
        body.dark-theme .calendar-insight-subtext,
        body.dark-theme .flashcards-section-heading p,
        body.dark-theme .flashcards-editor-description,
        body.dark-theme .flashcards-deck-meta,
        body.dark-theme .flashcards-input-label,
        body.dark-theme .flashcards-study-hint,
        body.dark-theme .flashcards-study-progress-meta {
            color: #cbd5e1 !important;
        }

        body.dark-theme .calendar-action-btn {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.86));
            border-color: rgba(96, 165, 250, 0.24);
            color: #dbeafe;
        }

        body.dark-theme .flashcards-study-back {
            background: linear-gradient(145deg, rgba(30, 41, 59, 0.92), rgba(49, 46, 129, 0.82), rgba(91, 33, 182, 0.24)) !important;
        }

        @media (max-width: 1100px) {
            .flashcards-workspace,
            .tools-stage-grid {
                grid-template-columns: 1fr;
            }

            .calendar-insights-grid,
            .tools-utility-grid,
            .flashcards-composer-grid,
            .flashcards-editor-grid,
            .flashcards-stats-row {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 720px) {
            .avatar-onboarding-card {
                padding: 1rem 0.92rem;
            }

            .avatar-slot-grid {
                grid-template-columns: repeat(4, minmax(0, 1fr));
            }

            .avatar-onboarding-actions {
                width: 100%;
            }

            .avatar-onboarding-btn {
                flex: 1 1 100%;
                justify-content: center;
                text-align: center;
            }

            .dashboard-streak-card {
                grid-template-columns: 1fr;
                gap: 0.7rem;
            }

            .dashboard-streak-utility-row {
                flex-direction: column;
                align-items: flex-start;
            }

            .dashboard-streak-podium {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 0.35rem;
            }

            .dashboard-streak-podium-item.rank-1 {
                transform: translateY(-0.12rem);
            }

            .dashboard-clock-shell {
                grid-template-columns: 1fr;
                justify-items: center;
                text-align: center;
            }

            .dashboard-clock-digital {
                text-align: center;
            }

            .dashboard-study-shortcuts {
                grid-template-columns: 1fr;
            }

            .calendar-top-controls {
                width: 100%;
                justify-content: flex-start;
            }

            .flashcards-study-face {
                padding: 1.35rem;
            }

            .flashcards-card-item-grid {
                grid-template-columns: 1fr;
            }
        }

        /* About page redesign */
        #about-page {
            max-width: 76rem;
        }

        .about-shell {
            position: relative;
            isolation: isolate;
        }

        .about-orb {
            position: absolute;
            border-radius: 999px;
            filter: blur(54px);
            opacity: 0.7;
            pointer-events: none;
            z-index: 0;
        }

        .about-orb-one {
            width: 14rem;
            height: 14rem;
            top: 2rem;
            right: 6%;
            background: radial-gradient(circle, rgba(96, 165, 250, 0.42), rgba(59, 130, 246, 0));
        }

        .about-orb-two {
            width: 12rem;
            height: 12rem;
            left: 2%;
            bottom: 5rem;
            background: radial-gradient(circle, rgba(167, 139, 250, 0.28), rgba(59, 130, 246, 0));
        }

        .about-hero-card,
        .about-focus-panel,
        .about-cta-card,
        .about-story-card,
        .about-visual-card,
        .about-stat-card {
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(191, 219, 254, 0.62);
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(239, 246, 255, 0.72));
            box-shadow: 0 26px 60px -42px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255,255,255,0.8);
            backdrop-filter: blur(18px);
        }

        .about-hero-card::before,
        .about-focus-panel::before,
        .about-cta-card::before,
        .about-story-card::before,
        .about-visual-card::before,
        .about-stat-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.34), transparent 42%);
            pointer-events: none;
        }

        .about-hero-card {
            border-radius: 2rem;
            padding: clamp(1.4rem, 3vw, 2.4rem);
        }

        .about-hero-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.88fr);
            gap: 1.5rem;
            align-items: center;
        }

        .about-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.55rem 0.95rem;
            border-radius: 999px;
            border: 1px solid rgba(147, 197, 253, 0.6);
            background: rgba(239, 246, 255, 0.84);
            color: rgb(30, 64, 175);
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .about-chip--soft {
            background: rgba(255,255,255,0.72);
            color: rgb(51, 65, 85);
        }

        .about-title {
            font-size: clamp(2.1rem, 4vw, 3.7rem);
            line-height: 1.05;
            font-weight: 900;
            letter-spacing: -0.05em;
            color: #0f172a;
            max-width: 14ch;
        }

        .about-lead {
            font-size: clamp(1.02rem, 2vw, 1.18rem);
            line-height: 1.75;
            color: #334155;
            max-width: 58ch;
        }

        .about-body {
            font-size: 1rem;
            line-height: 1.8;
            color: #475569;
            max-width: 62ch;
        }

        .about-pill-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .about-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            min-height: 2.75rem;
            padding: 0.7rem 1rem;
            border-radius: 1rem;
            background: rgba(255,255,255,0.72);
            border: 1px solid rgba(191, 219, 254, 0.72);
            color: #1e3a8a;
            font-weight: 700;
            box-shadow: 0 12px 26px -22px rgba(37, 99, 235, 0.3);
        }

        .about-visual-card {
            border-radius: 1.75rem;
            padding: 1rem;
        }

        .about-hero-image {
            width: 100%;
            height: auto;
            aspect-ratio: 5 / 4;
            object-fit: cover;
            border-radius: 1.3rem;
            box-shadow: 0 24px 44px -30px rgba(15, 23, 42, 0.35);
        }

        .about-visual-caption {
            margin-top: 0.85rem;
            color: #475569;
            font-size: 0.95rem;
            line-height: 1.65;
        }

        .about-stat-grid,
        .about-story-grid {
            display: grid;
            gap: 1rem;
        }

        .about-stat-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin-top: 1rem;
        }

        .about-stat-card {
            border-radius: 1.15rem;
            padding: 1rem;
        }

        .about-stat-value {
            display: block;
            font-size: 1.15rem;
            font-weight: 900;
            color: #0f172a;
            letter-spacing: -0.03em;
        }

        .about-stat-label {
            display: block;
            margin-top: 0.35rem;
            font-size: 0.92rem;
            line-height: 1.6;
            color: #475569;
        }

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

        .about-story-card {
            border-radius: 1.5rem;
            padding: 1.35rem;
            min-height: 100%;
        }

        .about-story-card--blue {
            background: linear-gradient(145deg, rgba(239,246,255,0.9), rgba(219,234,254,0.72));
        }

        .about-story-card--emerald {
            background: linear-gradient(145deg, rgba(236,253,245,0.92), rgba(209,250,229,0.74));
        }

        .about-story-card--violet {
            background: linear-gradient(145deg, rgba(245,243,255,0.92), rgba(233,213,255,0.74));
        }

        .about-story-card--amber {
            background: linear-gradient(145deg, rgba(255,251,235,0.94), rgba(254,243,199,0.76));
        }

        .about-card-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 3rem;
            height: 3rem;
            margin-bottom: 1rem;
            border-radius: 1rem;
            background: rgba(255,255,255,0.82);
            color: #2563eb;
            box-shadow: 0 12px 26px -20px rgba(37, 99, 235, 0.34);
        }

        .about-story-card h3,
        .about-section-title {
            font-size: 1.45rem;
            line-height: 1.2;
            font-weight: 800;
            letter-spacing: -0.03em;
            color: #0f172a;
        }

        .about-story-card p {
            margin-top: 0.85rem;
            color: #475569;
            line-height: 1.75;
        }

        .about-focus-panel,
        .about-cta-card {
            border-radius: 1.8rem;
            padding: clamp(1.2rem, 2.6vw, 2rem);
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
            gap: 1.5rem;
            align-items: center;
        }

        .about-checklist {
            display: grid;
            gap: 0.9rem;
        }

        .about-check-item {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            padding: 0.95rem 1rem;
            border-radius: 1rem;
            background: rgba(255,255,255,0.72);
            border: 1px solid rgba(191, 219, 254, 0.72);
            color: #1e293b;
            font-weight: 600;
        }

        .about-check-item i {
            color: #2563eb;
        }

        .about-cta-card {
            background: linear-gradient(145deg, rgba(248,250,252,0.88), rgba(224,231,255,0.78), rgba(239,246,255,0.8));
        }

        .about-cta-button {
            min-height: 3rem;
            padding: 0.85rem 1.2rem;
            border-radius: 1rem;
            font-weight: 800;
            transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
        }

        .about-cta-button:hover {
            transform: translateY(-1px);
        }

        .about-cta-button--primary {
            color: white;
            background: linear-gradient(135deg, rgb(37, 99, 235), rgb(79, 70, 229));
            box-shadow: 0 18px 34px -22px rgba(37, 99, 235, 0.5);
        }

        .about-cta-button--secondary {
            color: #1e3a8a;
            background: rgba(255,255,255,0.78);
            border: 1px solid rgba(147, 197, 253, 0.7);
            box-shadow: 0 14px 30px -24px rgba(37, 99, 235, 0.34);
        }

        .landing-conversion-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
            gap: 1rem;
            align-items: stretch;
        }

        .landing-conversion-card {
            border-radius: 1.65rem;
            padding: clamp(1.1rem, 2.2vw, 1.55rem);
            border: 1px solid rgba(191, 219, 254, 0.68);
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(239, 246, 255, 0.76));
            box-shadow: 0 24px 52px -38px rgba(37, 99, 235, 0.3);
        }

        .landing-conversion-card--spotlight {
            background: linear-gradient(145deg, rgba(239, 246, 255, 0.94), rgba(224, 231, 255, 0.82));
        }

        .landing-plan-controls {
            display: grid;
            gap: 0.8rem;
        }

        .landing-plan-field {
            display: grid;
            gap: 0.4rem;
            font-size: 0.85rem;
            font-weight: 700;
            color: #334155;
        }

        .landing-plan-input-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 0.6rem;
        }

        .landing-plan-input-row input[type="range"] {
            width: 100%;
            accent-color: #2563eb;
        }

        .landing-plan-input-row input[type="number"] {
            width: 100%;
            min-height: 2.45rem;
            border-radius: 0.8rem;
            border: 1px solid rgba(148, 163, 184, 0.45);
            background: rgba(255, 255, 255, 0.92);
            color: #0f172a;
            font-weight: 700;
            padding: 0.5rem 0.75rem;
        }

        .landing-plan-value {
            min-width: 3.4rem;
            text-align: right;
            font-size: 0.95rem;
            font-weight: 900;
            color: #1e3a8a;
        }

        .landing-plan-summary {
            border-radius: 0.95rem;
            border: 1px solid rgba(191, 219, 254, 0.75);
            background: rgba(255, 255, 255, 0.78);
            color: #1e293b;
            font-size: 0.94rem;
            line-height: 1.6;
            padding: 0.8rem 0.95rem;
        }

        .landing-plan-results {
            display: grid;
            gap: 0.65rem;
        }

        .landing-plan-result-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.8rem;
            border-radius: 0.9rem;
            border: 1px solid rgba(191, 219, 254, 0.72);
            background: rgba(255, 255, 255, 0.72);
            color: #334155;
            font-size: 0.86rem;
            font-weight: 700;
            padding: 0.7rem 0.85rem;
        }

        .landing-plan-result-item strong {
            color: #0f172a;
            font-size: 0.9rem;
            font-weight: 900;
            text-align: right;
        }

        .landing-countdown-kicker {
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #1d4ed8;
        }

        .landing-countdown-number {
            margin-top: 0.35rem;
            font-size: clamp(2rem, 4vw, 2.7rem);
            line-height: 1;
            font-weight: 900;
            letter-spacing: -0.045em;
            color: #0f172a;
        }

        .landing-countdown-copy {
            margin-top: 0.45rem;
            color: #475569;
            font-size: 0.9rem;
            line-height: 1.55;
        }

        .landing-pro-value-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.55rem;
        }

        .landing-pro-value-item {
            border-radius: 0.9rem;
            border: 1px solid rgba(191, 219, 254, 0.75);
            background: rgba(255, 255, 255, 0.8);
            padding: 0.65rem;
        }

        .landing-pro-value-label {
            display: block;
            color: #64748b;
            font-size: 0.72rem;
            font-weight: 700;
            line-height: 1.4;
        }

        .landing-pro-value-strong {
            display: block;
            margin-top: 0.2rem;
            color: #0f172a;
            font-size: 0.83rem;
            font-weight: 900;
            line-height: 1.35;
        }

        .landing-time-saved-copy {
            color: #334155;
            font-size: 0.9rem;
            line-height: 1.6;
        }

        .landing-desktop-cta-bar {
            position: fixed;
            left: 50%;
            bottom: 1rem;
            width: min(1060px, calc(100% - 2rem));
            z-index: 120;
            transform: translate(-50%, 1rem);
            opacity: 0;
            pointer-events: none;
            transition: opacity 220ms ease, transform 220ms ease;
        }

        .landing-desktop-cta-bar.is-visible {
            opacity: 1;
            transform: translate(-50%, 0);
            pointer-events: auto;
        }

        .landing-desktop-cta-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            border-radius: 1rem;
            border: 1px solid rgba(147, 197, 253, 0.84);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(239, 246, 255, 0.9));
            box-shadow: 0 24px 52px -36px rgba(15, 23, 42, 0.35);
            padding: 0.85rem 1rem;
            backdrop-filter: blur(10px);
        }

        .landing-desktop-cta-kicker {
            color: #1d4ed8;
            font-size: 0.68rem;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .landing-desktop-cta-copy {
            margin-top: 0.22rem;
            color: #1e293b;
            font-size: 0.86rem;
            line-height: 1.5;
            max-width: 56ch;
        }

        .landing-desktop-cta-actions {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            flex-shrink: 0;
        }

        .landing-desktop-cta-actions .about-cta-button {
            min-height: 2.45rem;
            padding: 0.62rem 0.95rem;
            font-size: 0.84rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        body.dark-theme .about-hero-card,
        body.dark-theme .about-focus-panel,
        body.dark-theme .about-cta-card,
        body.dark-theme .about-story-card,
        body.dark-theme .about-visual-card,
        body.dark-theme .about-stat-card {
            border-color: rgba(96, 165, 250, 0.28);
            background: linear-gradient(145deg, rgba(15, 23, 42, 0.78), rgba(30, 41, 59, 0.72));
            box-shadow: 0 28px 60px -40px rgba(2, 6, 23, 0.6), inset 0 1px 0 rgba(148,163,184,0.12);
        }

        body.dark-theme .about-chip,
        body.dark-theme .about-pill,
        body.dark-theme .about-check-item,
        body.dark-theme .about-cta-button--secondary {
            background: rgba(15, 23, 42, 0.56);
            border-color: rgba(96, 165, 250, 0.28);
            color: #dbeafe;
        }

        body.dark-theme .about-chip--soft,
        body.dark-theme .about-visual-caption,
        body.dark-theme .about-body,
        body.dark-theme .about-story-card p,
        body.dark-theme .about-stat-label {
            color: #cbd5e1;
        }

        body.dark-theme .about-title,
        body.dark-theme .about-lead,
        body.dark-theme .about-stat-value,
        body.dark-theme .about-story-card h3,
        body.dark-theme .about-section-title,
        body.dark-theme .about-check-item {
            color: #f8fafc;
        }

        body.dark-theme .about-orb-one {
            background: radial-gradient(circle, rgba(59, 130, 246, 0.28), rgba(59, 130, 246, 0));
        }

        body.dark-theme .about-orb-two {
            background: radial-gradient(circle, rgba(139, 92, 246, 0.22), rgba(59, 130, 246, 0));
        }

        body.dark-theme .landing-conversion-card {
            border-color: rgba(96, 165, 250, 0.3);
            background: linear-gradient(145deg, rgba(15, 23, 42, 0.82), rgba(30, 41, 59, 0.72));
            box-shadow: 0 28px 58px -42px rgba(2, 6, 23, 0.64);
        }

        body.dark-theme .landing-plan-field,
        body.dark-theme .landing-plan-summary,
        body.dark-theme .landing-countdown-copy,
        body.dark-theme .landing-time-saved-copy,
        body.dark-theme .landing-pro-value-label {
            color: #cbd5e1;
        }

        body.dark-theme .landing-plan-result-item,
        body.dark-theme .landing-pro-value-item,
        body.dark-theme .landing-plan-summary,
        body.dark-theme .landing-plan-input-row input[type="number"] {
            border-color: rgba(96, 165, 250, 0.28);
            background: rgba(15, 23, 42, 0.58);
            color: #f8fafc;
        }

        body.dark-theme .landing-plan-result-item strong,
        body.dark-theme .landing-pro-value-strong,
        body.dark-theme .landing-countdown-number,
        body.dark-theme .landing-plan-value {
            color: #f8fafc;
        }

        body.dark-theme .landing-desktop-cta-inner {
            border-color: rgba(96, 165, 250, 0.3);
            background: linear-gradient(135deg, rgba(2, 6, 23, 0.94), rgba(15, 23, 42, 0.92));
            box-shadow: 0 24px 52px -34px rgba(2, 6, 23, 0.85);
        }

        body.dark-theme .landing-desktop-cta-copy {
            color: #dbeafe;
        }

        @media (max-width: 1023px) {
            .landing-desktop-cta-bar {
                display: none !important;
            }
        }

        .admin-theme-preset {
            min-height: 2.5rem;
        }

        /* User experience preference modes */
        body.compact-ui .page {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        body.compact-ui .glass-card-premium,
        body.compact-ui .bg-white\/70,
        body.compact-ui .bg-white\/50 {
            padding: 1rem;
        }

        body.compact-ui nav a,
        body.compact-ui nav button {
            padding: 0.5rem 0.8rem;
        }

        body.compact-badges-ui .subject-badge,
        body.compact-badges-ui .grade-chip,
        body.compact-badges-ui .hero-pill,
        body.compact-badges-ui .tools-priority-chip {
            padding: 0.3rem 0.55rem;
            border-radius: 999px;
            font-size: 0.72rem;
        }

        body.sharp-ui .glass-card-premium,
        body.sharp-ui .bg-white\/70,
        body.sharp-ui .bg-white\/50,
        body.sharp-ui .rounded-2xl,
        body.sharp-ui .rounded-xl,
        body.sharp-ui .rounded-lg,
        body.sharp-ui .theme-preset-btn,
        body.sharp-ui .timer-setting-card,
        body.sharp-ui .timer-metric-card {
            border-radius: 0.7rem !important;
        }

        body.reduced-motion-ui *,
        body.reduced-motion-ui *::before,
        body.reduced-motion-ui *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }

        #event-countdown-banner,
        #site-announcement-banner,
        #app-status-banner {
            font-size: calc(0.95rem * var(--ui-banner-scale));
        }

        #page-footer {
            font-size: calc(0.875rem * var(--ui-footer-scale));
            padding-top: calc(1rem * var(--ui-footer-scale));
            padding-bottom: calc(1rem * var(--ui-footer-scale));
        }

        #page-footer #footer-content {
            transition: max-height 200ms ease, opacity 200ms ease, margin 200ms ease;
            max-height: 420px;
            opacity: 1;
            overflow: hidden;
            visibility: visible;
            transform: translateY(0);
        }

        body.footer-collapsed #page-footer {
            padding-top: 0.6rem;
            padding-bottom: 0.6rem;
        }

        body.footer-collapsed #page-footer #footer-content {
            max-height: 0;
            opacity: 0;
            margin: 0;
            padding: 0;
            border: none;
            overflow: hidden;
            visibility: hidden;
            pointer-events: none;
            display: none;
        }

        @media (max-width: 768px) {
            .tools-shell {
                border-radius: 1.05rem;
                padding: 0.72rem;
            }

            .tools-page-hero {
                border-radius: 1rem;
            }

            .tools-page-hero,
            .tools-stage-grid,
            .tools-utility-grid {
                grid-template-columns: 1fr;
            }

            .tools-page-hero {
                align-items: stretch;
            }

            .tools-page-hero-chips {
                justify-content: flex-start;
            }

            .tools-quick-nav {
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 0.2rem;
                -webkit-overflow-scrolling: touch;
            }

            .tools-quick-link {
                white-space: nowrap;
            }

            .about-hero-grid,
            .about-focus-panel,
            .about-cta-card,
            .about-story-grid,
            .landing-conversion-grid,
            .landing-pro-value-grid {
                grid-template-columns: 1fr;
            }

            .about-title {
                max-width: none;
            }

            .about-stat-grid {
                grid-template-columns: 1fr;
            }

            .timer-setting-card,
            .timer-metric-card {
                padding: 0.9rem;
            }

            .timer-metric-value {
                font-size: 1.35rem;
            }

            .theme-preset-btn {
                min-height: 2.5rem;
                font-size: 0.85rem;
            }
        }

        @media (hover: none), (pointer: coarse) {
            .tools-panel-card,
            .tools-hero-panel,
            .tools-compact-panel,
            .tools-utility-card,
            .tools-grade-panel,
            #tools-flashcards-panel {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                box-shadow: 0 14px 28px -26px rgba(15, 23, 42, 0.3) !important;
            }

            .tools-page-hero::before {
                animation: none;
                opacity: 0.16;
            }

            .tools-hero-panel:hover,
            .tools-compact-panel:hover,
            .tools-utility-card:hover,
            .tools-grade-panel:hover {
                transform: none;
                border-color: rgba(191, 219, 254, 0.72);
                box-shadow: 0 14px 28px -26px rgba(15, 23, 42, 0.3);
            }
        }

        /* ─────────────────────────────────────────────────────
           Scroll-reveal: elements animate in when they enter
           the viewport. JS adds .sr--in via IntersectionObserver.
           ───────────────────────────────────────────────────── */
        .sr {
            opacity: 0;
            transform: translateY(38px);
            transition:
                opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
            will-change: opacity, transform;
        }
        .sr.sr--in {
            opacity: 1;
            transform: translateY(0) !important;
        }
        .sr--from-left  { transform: translateX(-38px); }
        .sr--from-right { transform: translateX(38px); }
        .sr--scale      { transform: scale(0.93) translateY(20px); }
        .sr--scale.sr--in { transform: scale(1) translateY(0) !important; }
        .sr--d1 { transition-delay: 0.10s; }
        .sr--d2 { transition-delay: 0.20s; }
        .sr--d3 { transition-delay: 0.30s; }
        .sr--d4 { transition-delay: 0.40s; }
        .sr--d5 { transition-delay: 0.50s; }

        @media (prefers-reduced-motion: reduce) {
            .sr { opacity: 1 !important; transform: none !important; transition: none !important; }

            .tools-page-hero::before {
                animation: none;
            }
        }

        /* ─────────────────────────────────────────────────────
           Playlist search icon: reliable vertical centring
           ───────────────────────────────────────────────────── */
        #playlist-search ~ span,
        .search-icon-wrapper {
            pointer-events: none;
        }

        /* Keep mobile drawer actions tappable above its dimmed backdrop. */
        #mobile-menu {
            z-index: 1201 !important;
            -webkit-overflow-scrolling: touch;
        }

        #mobile-menu.hidden {
            pointer-events: none !important;
        }

        #mobile-menu.menu-open,
        #mobile-menu:not(.hidden) {
            pointer-events: auto !important;
        }

        .mobile-menu-backdrop {
            position: fixed;
            inset: 0;
            z-index: 1200;
            background: rgba(15, 23, 42, 0.45);
            touch-action: none;
        }