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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Modern Professional Color Palette - Indigo & Slate */
    --accent-50: #eef2ff;
    --accent-100: #e0e7ff;
    --accent-200: #c7d2fe;
    --accent-300: #a5b4fc;
    --accent-400: #818cf8;
    --accent-500: #6366f1;
    --accent-600: #4f46e5;
    --accent-700: #4338ca;
    --accent-800: #3730a3;
    --accent-900: #312e81;

    /* Brand Colors */
    --gcsemate-blue: #4f46e5;
    --gcsemate-blue-hover: #4338ca;
    --gcsemate-blue-light: #6366f1;

    /* Clean, professional backgrounds - Light Mode Only */
    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f8fafc;
    --bg-accent: #eef2ff;

    /* Text Colors */
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-light: #64748b;

    /* Borders */
    --border-color: #e2e8f0;
    --border-color-hover: #cbd5e1;

    /* Semantic Colors */
    --color-success: #10b981;
    --color-success-light: #d1fae5;
    --color-success-text: #065f46;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-warning-text: #92400e;
    --color-error: #ef4444;
    --color-error-light: #fee2e2;
    --color-error-text: #991b1b;
    --color-info: #3b82f6;
    --color-info-light: #dbeafe;
    --color-info-text: #1e40af;

    /* Shadows - Soft & Modern */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Pastel Colors for Cards */
    --pastel-pink: #fce7f3;
    --pastel-blue: #dbeafe;
    --pastel-purple: #e9d5ff;
    --pastel-teal: #ccfbf1;
    --pastel-orange: #fed7aa;
    --pastel-yellow: #fef3c7;
    --pastel-green: #d1fae5;
    --pastel-indigo: #e0e7ff;

    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;

    /* Animations */
    --animation-fast: 150ms;
    --animation-normal: 250ms;
    --animation-slow: 400ms;
    --animation-lazy: 600ms;

    /* UI Elements */
    --backdrop-blur: blur(12px);
    --card-radius: 1rem;
    --input-radius: 0.75rem;
    --button-radius: 9999px; /* Pill shape buttons */

    /* Typography */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;

    /* Icons */
    --icon-xs: 12px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;
    --icon-2xl: 40px;

    /* Transitions */
    --theme-transition: none; /* Disable theme transition as we are light mode only */
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Dark Mode Variables - Removed for Light Mode Only */
/* [data-theme='dark'] block removed */

/* ═══════════════════════════════════════════════════════════════ */
/* CRITICAL: FontAwesome icon fix - MUST be before body styles */
/* ═══════════════════════════════════════════════════════════════ */
/* This ensures icons work even if other rules try to override */
i[class*='fa-'],
[class*='fa-'],
i.fa,
i.fas,
i.far,
i.fab,
i.fal,
i.fad,
.fa,
.fas,
.far,
.fab,
.fal,
.fad {
    font-family:
        'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'Font Awesome 6 Brands', 'FontAwesome' !important;
    font-style: normal !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

i[class*='far'],
[class*='far'],
i.far,
.far {
    font-weight: 400 !important;
}

i[class*='fab'],
[class*='fab'],
i.fab,
.fab {
    font-family: 'Font Awesome 6 Brands', 'FontAwesome' !important;
    font-weight: 400 !important;
}

i[class*='fal'],
[class*='fal'],
i.fal,
.fal {
    font-weight: 300 !important;
}

/* Base styles - EdTech-inspired design */
body {
    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        'Helvetica Neue',
        Arial,
        sans-serif;
    background-color: var(--bg-primary);
    -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: var(--text-primary);
    font-weight: 400;
}

/* ========================================== */
/* CRITICAL: Color Contrast Fixes */
/* ========================================== */

/* Dark backgrounds need white text */
.bg-slate-900,
.bg-slate-800,
.bg-gray-900,
.bg-gray-800,
.bg-blue-900,
.bg-blue-800,
.bg-indigo-900,
.bg-indigo-800,
.bg-purple-900,
.bg-purple-800,
.bg-navy-900,
[class*='bg-slate-9'],
[class*='bg-gray-9'],
[class*='bg-navy-9'] {
    color: #ffffff !important;
}

.bg-slate-900 *:not(button):not(a):not([class*='text-']),
.bg-slate-800 *:not(button):not(a):not([class*='text-']),
.bg-gray-900 *:not(button):not(a):not([class*='text-']),
.bg-gray-800 *:not(button):not(a):not([class*='text-']),
.bg-navy-900 *:not(button):not(a):not([class*='text-']) {
    color: #ffffff !important;
}

/* Ensure headings on dark backgrounds are white */
.bg-slate-900 h1,
.bg-slate-900 h2,
.bg-slate-900 h3,
.bg-slate-900 h4,
.bg-slate-900 h5,
.bg-slate-900 h6,
.bg-gray-900 h1,
.bg-gray-900 h2,
.bg-gray-900 h3,
.bg-gray-900 h4,
.bg-gray-900 h5,
.bg-gray-900 h6,
.bg-navy-900 h1,
.bg-navy-900 h2,
.bg-navy-900 h3,
.bg-navy-900 h4,
.bg-navy-900 h5,
.bg-navy-900 h6 {
    color: #ffffff !important;
}

/* Light backgrounds need dark text */
.bg-white,
.bg-gray-50,
.bg-gray-100,
.bg-blue-50,
.bg-blue-100 {
    color: #0f172a !important;
}

.bg-white *:not(button):not(a):not([class*='text-']),
.bg-gray-50 *:not(button):not(a):not([class*='text-']),
.bg-gray-100 *:not(button):not(a):not([class*='text-']) {
    color: #0f172a !important;
}

/* EdTech-inspired typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-primary);
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
}

p,
span,
div {
    font-family: 'Inter', sans-serif;
}

/* Performance optimizations */
* {
    box-sizing: border-box;
}

/* Optimize animations for GPU acceleration */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ED TECH-INSPIRED CARDS - Clean, Modern, Professional */
/* ═══════════════════════════════════════════════════════════════ */
.glass-card-premium,
.card-modern,
.modern-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    will-change: transform, box-shadow, border-color;
    backface-visibility: hidden;
    /* Enhanced contrast for card content */
    color: var(--text-primary);
}

/* Ensure all text in cards is readable */
.glass-card-premium *,
.card-modern *,
.modern-card * {
    color: inherit;
}

.glass-card-premium h1,
.glass-card-premium h2,
.glass-card-premium h3,
.card-modern h1,
.card-modern h2,
.card-modern h3,
.modern-card h1,
.modern-card h2,
.modern-card h3 {
    color: var(--text-primary);
    font-weight: 700;
}

.glass-card-premium p,
.card-modern p,
.modern-card p {
    color: var(--text-primary);
}

.glass-card-premium:hover,
.card-modern:hover,
.modern-card:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: rgb(var(--accent-400));
}

.glass-card-premium:active,
.card-modern:active,
.modern-card:active {
    transform: translateY(0) translateZ(0);
    box-shadow: var(--shadow-md);
}

/* Vibrant pastel cards with colorful accents */
.card-pastel-pink {
    background: linear-gradient(135deg, var(--pastel-pink), #fdf2f8);
    border: 1px solid rgba(244, 63, 94, 0.15);
}

.card-pastel-blue {
    background: linear-gradient(135deg, var(--pastel-blue), #eff6ff);
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.card-pastel-purple {
    background: linear-gradient(135deg, var(--pastel-purple), #f5f3ff);
    border: 1px solid rgba(139, 92, 246, 0.15);
}

.card-pastel-teal {
    background: linear-gradient(135deg, var(--pastel-teal), #f0fdfa);
    border: 1px solid rgba(20, 184, 166, 0.15);
}

.card-pastel-orange {
    background: linear-gradient(135deg, var(--pastel-orange), #fff7ed);
    border: 1px solid rgba(249, 115, 22, 0.15);
}

.card-pastel-yellow {
    background: linear-gradient(135deg, var(--pastel-yellow), #fffbeb);
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.card-pastel-green {
    background: linear-gradient(135deg, var(--pastel-green), #f0fdf4);
    border: 1px solid rgba(16, 185, 129, 0.15);
}

.card-pastel-indigo {
    background: linear-gradient(135deg, var(--pastel-indigo), #eef2ff);
    border: 1px solid rgba(99, 102, 241, 0.15);
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED INTERACTIVE ELEMENTS - Premium Micro-interactions */
/* ═══════════════════════════════════════════════════════════════ */
.interactive-element {
    transition:
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.interactive-element:hover {
    transform: scale(1.02) translateZ(0);
}

.interactive-element:active {
    transform: scale(0.97) translateZ(0);
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════ */
/* MODERN BUTTONS - Pill Shape, Gradient, Shadow */
/* ═══════════════════════════════════════════════════════════════ */
.btn-gradient,
button[class*='bg-blue'],
.btn-primary {
    background: linear-gradient(135deg, var(--accent-600), var(--accent-500)) !important;
    border: none;
    border-radius: 9999px; /* Pill shape */
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    will-change: transform, box-shadow;
    backface-visibility: hidden;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 6px -1px rgba(79, 70, 229, 0.3),
        0 2px 4px -1px rgba(79, 70, 229, 0.15);
    cursor: pointer;
    letter-spacing: 0.01em;
}

/* Ensure white text and icons on primary buttons */
.btn-gradient i,
button[class*='bg-blue'] i,
.btn-primary i,
.btn-gradient svg,
button[class*='bg-blue'] svg,
.btn-primary svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Shine effect on hover */
.btn-gradient::before,
button[class*='bg-blue']::before,
.btn-primary::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.6s ease;
}

.btn-gradient:hover,
button[class*='bg-blue']:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 15px -3px rgba(79, 70, 229, 0.4),
        0 4px 6px -2px rgba(79, 70, 229, 0.2);
    background: linear-gradient(135deg, var(--accent-500), var(--accent-400)) !important;
}

.btn-gradient:hover::before,
button[class*='bg-blue']:hover::before,
.btn-primary:hover::before {
    left: 100%;
}

.btn-gradient:active,
button[class*='bg-blue']:active,
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px -1px rgba(79, 70, 229, 0.2);
}

/* Secondary buttons */
button.bg-white,
button.bg-gray,
.btn-secondary {
    background: #ffffff;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    border-radius: 9999px; /* Pill shape */
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

button.bg-white:hover,
button.bg-gray:hover,
.btn-secondary:hover {
    background: var(--bg-primary);
    border-color: var(--accent-300);
    color: var(--accent-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

button.bg-white:active,
button.bg-gray:active,
.btn-secondary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* 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;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED SCROLLBAR - Modern, Clean, Professional */
/* ═══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.6);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgb(var(--accent-400)), rgb(var(--accent-600)));
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgb(var(--accent-600)), rgb(var(--accent-700)));
    background-clip: padding-box;
    transform: scale(1.1);
}
/* 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;
}

@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;
    }
}

/* 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(59, 130, 246, 0.6);
    outline-offset: 2px;
    border-radius: 4px;
}

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;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED PAGE LAYOUT - Optimal Spacing & Visual Flow */
/* ═══════════════════════════════════════════════════════════════ */
.page {
    padding: var(--spacing-6) var(--spacing-4);
    animation: pageFadeIn var(--animation-normal) cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

@keyframes pageFadeIn {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.98) translateZ(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) translateZ(0);
    }
}

@media (min-width: 640px) {
    .page {
        padding: 2rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .page {
        padding: 2.5rem 2rem;
        max-width: 1400px;
        margin: 0 auto;
    }
}

/* Global shell utilities for consistent spacing */
.app-shell {
    width: min(1200px, 100%);
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.app-shell--wide {
    width: min(1400px, 100%);
}

.page-section {
    margin-block: clamp(1.5rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.page-section__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.page-section__eyebrow {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--text-light);
}

.page-section__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--text-primary);
}

.page-section__subtitle {
    color: var(--text-secondary);
    max-width: 55ch;
    font-size: 0.95rem;
}

.page-section__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.page-section__actions .btn,
.page-section__actions button {
    min-height: 2.75rem;
}

.card-grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 640px) {
    .card-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .card-grid--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.utility-toolbar {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    padding: clamp(1rem, 3vw, 1.75rem);
    box-shadow: var(--shadow-md);
}

.utility-toolbar__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

.utility-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    background: rgba(var(--accent-100), 0.8);
    color: rgb(var(--accent-600));
    font-weight: 600;
}

.quick-action-card {
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(var(--accent-50), 0.85), rgba(255, 255, 255, 0.95));
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition:
        transform var(--animation-normal) var(--ease-out-expo),
        box-shadow var(--animation-fast) var(--ease-smooth);
}

.quick-action-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

button.quick-action-card {
    border: none;
    background: none;
    cursor: pointer;
}

.quick-action-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--accent-100), 0.8);
    color: rgb(var(--accent-600));
    font-size: 1.1rem;
}

.quick-action-card__title {
    font-weight: 600;
    color: var(--text-primary);
}

.quick-action-card__desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* 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;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED GRID LAYOUT - Modern Spacing & Visual Hierarchy */
/* ═══════════════════════════════════════════════════════════════ */
.grid {
    gap: 1rem;
    display: grid;
}

@media (min-width: 640px) {
    .grid {
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .grid {
        gap: 2rem;
    }
}

/* Staggered grid item animations */
.grid > * {
    animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.grid > *:nth-child(1) {
    animation-delay: 0.05s;
}
.grid > *:nth-child(2) {
    animation-delay: 0.1s;
}
.grid > *:nth-child(3) {
    animation-delay: 0.15s;
}
.grid > *:nth-child(4) {
    animation-delay: 0.2s;
}
.grid > *:nth-child(5) {
    animation-delay: 0.25s;
}
.grid > *:nth-child(6) {
    animation-delay: 0.3s;
}

/* 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);
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED FORM INPUTS - Modern, Accessible, Interactive */
/* ═══════════════════════════════════════════════════════════════ */
input,
textarea,
select {
    padding: 0.75rem 1rem;
    border-radius: 0.625rem;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 0.75rem;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 1);
    transform: translateZ(0);
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgb(var(--accent-500));
    box-shadow:
        0 0 0 3px rgba(var(--accent-500), 0.15),
        0 4px 12px -2px rgba(var(--accent-500), 0.25);
    outline: none;
    transform: translateY(-1px) scale(1.01) translateZ(0);
}

input:hover,
textarea:hover,
select:hover {
    border-color: rgba(var(--accent-400), 0.3);
}

/* 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;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED HEADER - Modern, Clean, Professional */
/* ═══════════════════════════════════════════════════════════════ */
header {
    padding: 1rem 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

@media (min-width: 640px) {
    header {
        padding: 1.25rem 2rem;
    }
}

/* Header scroll effect */
header.scrolled {
    box-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.95);
}

/* 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;
}

@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 - Fast, Smooth, GPU-Accelerated */
/* ═══════════════════════════════════════════════════════════════ */
.transition-all {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity, background-color, border-color;
}
.transition-transform {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    transform: translateZ(0);
}
.transition-opacity {
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}
.transition-height {
    transition: max-height 0.35s 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.34, 1.56, 0.64, 1);
    will-change: transform, opacity;
    transform: translateZ(0);
}

.transition-bounce {
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
    transform: translateZ(0);
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED HOVER EFFECTS - Modern, Smooth, Professional */
/* ═══════════════════════════════════════════════════════════════ */
.hover-lift {
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.hover-lift:hover:not(:disabled) {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.12);
}

.hover-scale {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.hover-scale:hover:not(:disabled) {
    transform: scale(1.03) translateZ(0);
}

.hover-float {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.hover-float:hover {
    transform: translateY(-6px) 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);
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED PRIMARY BUTTON - Premium Gradient with Shine Effect */
/* ═══════════════════════════════════════════════════════════════ */
/* Override existing .btn-primary with EdTech style */
.btn-primary {
    background: var(--bg-secondary) !important;
    border: none !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9375rem !important;
    border-radius: var(--button-radius) !important;
    padding: 0.875rem 1.75rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform: translateZ(0) !important;
    box-shadow: var(--shadow-sm) !important;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.btn-primary:hover {
    background: #1a2f4d !important;
    transform: translateY(-1px) translateZ(0) !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:active {
    transform: translateY(0) translateZ(0) !important;
    box-shadow: var(--shadow-sm) !important;
}

.btn-secondary {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    border-radius: 0.5rem !important;
    padding: 0.75rem 1.5rem !important;
    transition: all 0.15s ease-out !important;
}

.btn-secondary:hover {
    background: #f9f9f9 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

.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, 0.06);
}

.folder-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.18),
        rgba(255, 255, 255, 0) 30%,
        rgba(0, 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, 0.06);
}

.folder-icon-sm::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.18),
        rgba(255, 255, 255, 0) 30%,
        rgba(0, 0, 0, 0.05) 100%
    );
}

/* Enhanced Modern Card Styles without glassmorphism */
.modern-card {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.15s ease-out;
}

.modern-card:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Enhanced Input Styles */
.glass-input {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: border-color 0.15s ease-out;
    color: var(--text-primary);
}

.glass-input:focus {
    background: var(--bg-card);
    border-color: var(--color-info);
    outline: 2px solid var(--color-info-light);
    outline-offset: 2px;
    color: var(--text-primary);
}

.glass-input::placeholder {
    color: var(--text-light);
    opacity: 0.7;
}

/* Enhanced Text Readability */
.glass-text {
    color: var(--text-primary);
    font-weight: 500;
}

.glass-text-light {
    color: var(--text-secondary);
    font-weight: 400;
}

/* Enhanced contrast for better readability */
.modern-card h1,
.modern-card h2,
.modern-card h3 {
    color: var(--text-primary);
    font-weight: 700;
}

.modern-card p {
    color: var(--text-primary);
    font-weight: 400;
}

/* Enhanced button text */
.glass-button {
    background: rgba(59, 130, 246, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.glass-button:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
}

/* 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 - GPU Acceleration & Smooth Rendering */
/* ═══════════════════════════════════════════════════════════════ */
.will-change-transform {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.will-change-opacity {
    will-change: opacity;
}
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
}

/* Optimize repaints and reflows */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Reduce layout thrashing */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* 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 - Modern, Smooth, Professional */
/* ═══════════════════════════════════════════════════════════════ */
.nav-link {
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    overflow: visible;
    will-change: transform, color;
    backface-visibility: hidden;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

/* Modern underline animation with gradient */
.nav-link::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 100%;
    height: 2.5px;
    background: linear-gradient(90deg, rgb(var(--accent-500)), rgb(var(--accent-600)));
    border-radius: 2px;
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    z-index: 1;
    transform-origin: center;
}

.nav-link:hover {
    transform: translateY(-2px) translateZ(0);
    color: rgb(var(--accent-600));
}

.nav-link:hover::before {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
}

/* Active navigation link - enhanced */
.nav-link.active {
    color: rgb(var(--accent-600));
    font-weight: 600;
    outline: none !important;
    background-color: rgba(var(--accent-50), 0.6);
}

.nav-link.active::before {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
    height: 3px;
}

/* Focus states for accessibility */
.nav-link:focus-visible {
    outline: 2px solid rgb(var(--accent-500));
    outline-offset: 3px;
    border-radius: 6px;
}

.nav-link:active {
    transform: translateY(0) translateZ(0);
}

/* Remove conflicting styles */
.nav-link {
    border: 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 - Bright GCSEMate Blue */
.text-blue-600 {
    color: #0ea5e9 !important;
}
.text-blue-700 {
    color: #0284c7 !important;
}
.bg-blue-50 {
    background-color: #f0f9ff !important;
}
.bg-blue-100 {
    background-color: #e0f2fe !important;
}
.bg-blue-600 {
    background-color: #0ea5e9 !important;
    color: #ffffff !important;
}
.bg-blue-700 {
    background-color: #0284c7 !important;
    color: #ffffff !important;
}
.hover\:bg-blue-700:hover {
    background-color: #0284c7 !important;
    color: #ffffff !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-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;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED PREMIUM UI ANIMATIONS - Modern & Sleek Design System */
/* ═══════════════════════════════════════════════════════════════ */
/* Upgraded for 2024: 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);
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED PAGE TRANSITIONS - Ultra-Smooth & Buttery */
/* ═══════════════════════════════════════════════════════════════ */
.page-enter-modern {
    animation: fadeInUpModern 320ms var(--ease-out-expo) both;
    will-change: transform, opacity;
}
.page-leave-modern {
    animation: fadeOutModern 240ms var(--ease-smooth) both;
    will-change: transform, opacity;
}
@keyframes fadeInUpModern {
    0% {
        opacity: 0;
        transform: translate3d(0, 8px, 0) scale(0.99);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}
@keyframes fadeOutModern {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate3d(0, -6px, 0) scale(0.99);
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED AOS ANIMATIONS - Smooth, Fast, Modern */
/* ═══════════════════════════════════════════════════════════════ */
[data-animate] {
    opacity: 1;
    transform: translateZ(0);
}
.aos-animate {
    opacity: 1;
}
.aos-fade-up {
    animation: fadeUpModern 400ms var(--ease-out-expo) both;
    will-change: transform, opacity;
}
.aos-blur-in {
    animation: blurInModern 400ms var(--ease-out-expo) both;
    will-change: transform, opacity;
}
.aos-zoom-in {
    animation: zoomInModern 400ms var(--ease-out-expo) both;
    will-change: transform, opacity;
}
.aos-slide-right {
    animation: slideRightModern 400ms var(--ease-out-expo) both;
    will-change: transform, opacity;
}
@keyframes fadeUpModern {
    from {
        opacity: 0;
        transform: translate3d(0, 8px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes blurInModern {
    from {
        opacity: 0;
        transform: translate3d(0, 4px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes zoomInModern {
    0% {
        opacity: 0;
        transform: scale3d(0.97, 0.97, 1);
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}
@keyframes slideRightModern {
    from {
        opacity: 0;
        transform: translate3d(-8px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 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;
    }
}
@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);
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED UTILITY ANIMATIONS - Fast, Smooth, Professional */
/* ═══════════════════════════════════════════════════════════════ */
.fade-in {
    animation: fadeInModern 280ms var(--ease-out-expo) forwards;
    will-change: opacity;
}
.slide-in-up {
    animation: slideInUpModern 320ms var(--ease-out-expo) forwards;
    will-change: transform, opacity;
}
.slide-in-down {
    animation: slideInDownModern 320ms var(--ease-out-expo) forwards;
    will-change: transform, opacity;
}
.slide-in-left {
    animation: slideInLeftModern 320ms var(--ease-out-expo) forwards;
    will-change: transform, opacity;
}
.slide-in-right {
    animation: slideInRightModern 320ms var(--ease-out-expo) forwards;
    will-change: transform, opacity;
}
.page-transition-enter {
    animation: slideInUpModern 300ms var(--ease-out-expo) both;
    will-change: transform, opacity;
}
.bounce {
    animation: bounceModern 1.2s var(--ease-spring) infinite;
    will-change: transform;
}
.pulse {
    animation: pulseModern 2s var(--ease-smooth) infinite;
    will-change: transform;
}

@keyframes fadeInModern {
    from {
        opacity: 0;
        transform: translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateZ(0);
    }
}

@keyframes slideInDownModern {
    from {
        transform: translateY(-12px) translateZ(0);
        opacity: 0;
    }
    to {
        transform: translateY(0) translateZ(0);
        opacity: 1;
    }
}

@keyframes slideInLeftModern {
    from {
        transform: translateX(-12px) translateZ(0);
        opacity: 0;
    }
    to {
        transform: translateX(0) translateZ(0);
        opacity: 1;
    }
}

@keyframes slideInRightModern {
    from {
        transform: translateX(12px) translateZ(0);
        opacity: 0;
    }
    to {
        transform: translateX(0) translateZ(0);
        opacity: 1;
    }
}

@keyframes bounceModern {
    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, -1px, 0);
    }
}

@keyframes pulseModern {
    0%,
    100% {
        transform: scale(1) translateZ(0);
        opacity: 1;
    }
    50% {
        transform: scale(1.05) translateZ(0);
        opacity: 0.8;
    }
}
/* 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: #fde68a;
    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: #bfdbfe;
    color: #1e40af;
    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: #3b82f6;
}
.calendar-day.has-global-event::after {
    background-color: #16a34a;
}
/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED LANDING PAGE ANIMATIONS - Staggered, Smooth, Modern */
/* ═══════════════════════════════════════════════════════════════ */
.animate-hero-title {
    animation: slideInUpModern 400ms cubic-bezier(0.16, 1, 0.3, 1) 100ms forwards;
    opacity: 0;
    transform: translateY(20px) translateZ(0);
}
.animate-hero-subtitle {
    animation: slideInUpModern 400ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards;
    opacity: 0;
    transform: translateY(20px) translateZ(0);
}
.animate-hero-buttons {
    animation: slideInUpModern 400ms cubic-bezier(0.16, 1, 0.3, 1) 300ms forwards;
    opacity: 0;
    transform: translateY(20px) translateZ(0);
}
.animate-feature-card {
    animation: slideInUpModern 350ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateY(15px) translateZ(0);
}

@keyframes slideInUpModern {
    0% {
        opacity: 0;
        transform: translateY(20px) translateZ(0) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateZ(0) scale(1);
    }
}
/* 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: 0.95;
    }
    50% {
        transform: translateY(-2px) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: translateY(4px) translateZ(0);
        opacity: 0.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;
}
/* Disable any Tailwind backdrop blur utilities globally (no blur UX) */
.backdrop-blur,
.backdrop-blur-sm,
.backdrop-blur-md,
.backdrop-blur-lg,
.backdrop-blur-xl,
[class*='backdrop-blur-'] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Remove shadows from common UI elements */
button,
.card,
.card-modern,
.modern-card,
.glass-card,
.glass-card-premium,
.glass-effect,
.btn-primary,
.btn-secondary,
.btn-gradient,
.glass-button {
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED LOADING STATES - Modern, Smooth, Professional */
/* ═══════════════════════════════════════════════════════════════ */
/* ========================================== */
/* Navigation Layout Fixes */
/* ========================================== */

/* Prevent navigation tabs from wrapping vertically */
header nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

header nav::-webkit-scrollbar {
    display: none;
}

/* Ensure nav links stay inline */
header nav a {
    flex-shrink: 0;
    white-space: nowrap;
}

#primary-nav {
    flex-wrap: wrap !important;
    overflow-x: visible;
    row-gap: 0.5rem;
    justify-content: flex-start;
}

#primary-nav a {
    flex-shrink: 1 !important;
}

@media (min-width: 1536px) {
    #primary-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto;
    }
}

#videos-quick-link {
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.25);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

#videos-quick-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 30px rgba(59, 130, 246, 0.3);
}

#videos-quick-link:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Fix for mobile menu nav links */
#mobile-menu nav a {
    width: 100%;
    white-space: normal;
}

#page-loading-overlay {
    background: rgba(255, 255, 255, 0.95);
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}
#page-loading-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}
.loading-orb {
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    border: 3.5px solid rgba(59, 130, 246, 0.12);
    border-top-color: rgb(var(--accent-600));
    animation: spinModern 800ms cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform: translateZ(0);
}
.loading-pulse {
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    background: rgb(var(--accent-600));
    animation: pulseDotModern 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    transform: translateZ(0);
}
.loading-pulse:nth-child(2) {
    animation-delay: 150ms;
}
.loading-pulse:nth-child(3) {
    animation-delay: 300ms;
}
@keyframes pulseDotModern {
    0%,
    100% {
        transform: translateY(0) translateZ(0) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translateY(-8px) translateZ(0) scale(1.1);
        opacity: 1;
    }
}
@keyframes spinModern {
    0% {
        transform: rotate(0deg) translateZ(0);
    }
    100% {
        transform: rotate(360deg) translateZ(0);
    }
}

/* 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 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.32s ease;
}
.hover-raise:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}
.hover-tint:hover {
    background-color: rgba(var(--accent-50), 0.8);
}

/* ========================================== */
/* Navigation Layout Fixes - CRITICAL */
/* ========================================== */

/* Prevent navigation tabs from wrapping vertically */
header nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

header nav::-webkit-scrollbar {
    display: none;
}

/* Ensure nav links stay inline and don't wrap */
header nav a {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    min-width: fit-content;
}

/* Fix for mobile menu nav links - allow wrapping in mobile */
#mobile-menu nav a {
    width: 100%;
    white-space: normal;
    flex-shrink: 1;
}

a.nav-link {
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
    border-radius: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    flex-shrink: 0;
    white-space: nowrap;
}
a.nav-link:hover {
    background-color: rgba(var(--accent-50), 0.7);
}

/* ========================================== */
/* Additional Color Contrast Fixes - CRITICAL */
/* ========================================== */

/* Ensure buttons have proper contrast */
button:not([class*='bg-']):not(.btn-secondary):not(.btn-ghost) {
    background-color: #3b82f6;
    color: #ffffff;
}

/* Text color utilities - enforce proper contrast */
.text-gray-800 {
    color: #1e293b !important;
}
.text-gray-700 {
    color: #334155 !important;
}
.text-gray-600 {
    color: #475569 !important;
}
.text-gray-500 {
    color: #64748b !important;
}
.text-white {
    color: #ffffff !important;
}

/* Card text contrast */
.card,
[class*='card-'],
.bg-white .prose,
.bg-gray-50 .prose {
    color: #0f172a;
}

.bg-slate-900 .prose,
.bg-gray-900 .prose,
.bg-navy-900 .prose {
    color: #ffffff;
}

/* Form inputs contrast - ensure white background */
input:not([type='checkbox']):not([type='radio']),
textarea,
select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 2px solid #cbd5e1 !important;
}

input::placeholder,
textarea::placeholder {
    color: #94a3b8 !important;
}

/* Ensure labels are readable */
label {
    color: #334155 !important;
    font-weight: 500;
}

/* Link contrast */
a:not(.nav-link):not(.btn):not([class*='bg-']) {
    color: #2563eb;
}

a:not(.nav-link):not(.btn):not([class*='bg-']):hover {
    color: #1d4ed8;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED MOBILE MENU - Smooth Slide Animation */
/* ═══════════════════════════════════════════════════════════════ */
#mobile-menu {
    padding-top: env(safe-area-inset-top, 0);
    transform: translateX(100%) translateZ(0);
    transition:
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

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

#mobile-menu .nav-link {
    min-height: 56px;
    letter-spacing: 0.2px;
    justify-content: flex-start;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    will-change: transform, background-color;
}

#mobile-menu .nav-link:hover {
    transform: translateX(4px) translateZ(0);
    background-color: rgba(var(--accent-50), 0.8);
}

#mobile-menu .nav-link:active {
    transform: translateX(2px) translateZ(0);
}

/* Low-spec mode tuning for ultra-smoothness */
.low-spec .hover-raise:hover {
    transform: none;
    box-shadow: 0 8px 18px rgba(0, 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:
        'SF Pro Text',
        'SF Pro Display',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        'Helvetica Neue',
        Arial,
        'Noto Sans',
        'Apple Color Emoji',
        'Segoe UI Emoji',
        'Segoe UI Symbol',
        sans-serif;
}
/* IP Address and Location Highlighting */
.ip-address {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    background: linear-gradient(135deg, rgb(var(--accent-blue-500)), rgb(var(--accent-blue-600)));
    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(var(--accent-blue-500), 0.3);
    display: inline-block;
    margin: 2px;
}

.location-info {
    background: linear-gradient(135deg, rgb(var(--accent-500)), rgb(var(--accent-600)));
    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(var(--accent-500), 0.3);
    display: inline-block;
    margin: 2px;
}

.activity-item {
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.activity-item:hover {
    background-color: var(--bg-accent);
    border-left-color: rgb(var(--accent-500));
    transform: translateX(2px);
}

.activity-item.session-start {
    border-left-color: rgb(var(--accent-blue-500));
}

.activity-item.subject-start {
    border-left-color: rgb(var(--accent-purple-500));
}

.activity-item.file-open {
    border-left-color: rgb(var(--accent-500));
}

.activity-item.file-close {
    border-left-color: var(--color-error);
}

.activity-item.heartbeat {
    border-left-color: #8b8b9a;
}

/* 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: var(--bg-card);
    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, var(--bg-card), var(--bg-card-hover));
    border-bottom: 2px solid var(--border-color);
}

.activity-table tr:hover {
    background: linear-gradient(135deg, var(--bg-accent), var(--bg-card-hover));
}

.activity-table td {
    border-bottom: 1px solid #f1f5f9;
}

/* Status indicators */
.status-online {
    background: linear-gradient(135deg, rgb(var(--accent-500)), rgb(var(--accent-600)));
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-offline {
    background: linear-gradient(135deg, #8b8b9a, #6b6b7a);
    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, rgb(var(--accent-500)), rgb(var(--accent-600)));
    color: white;
    font-weight: 600;
}

.calendar-day.has-study {
    background: linear-gradient(135deg, rgb(var(--accent-blue-500)), rgb(var(--accent-blue-600)));
    color: white;
    font-weight: 600;
}

.calendar-day.has-both {
    background: linear-gradient(
        135deg,
        rgb(var(--accent-purple-500)),
        rgb(var(--accent-purple-600))
    );
    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, var(--bg-card), var(--bg-card-hover));
    border-radius: 12px;
    padding: 16px;
    box-shadow: var(--shadow-md);
}

.chart-bar {
    transition: all 0.3s ease;
    cursor: pointer;
}

.chart-bar:hover {
    transform: scaleY(1.1);
    filter: brightness(1.1);
}

/* 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, var(--bg-card), var(--bg-card-hover));
    border: 1px solid var(--border-color);
    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(--accent-500)) 0%, rgb(var(--accent-600)) 100%);
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 600;
    color: white;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(var(--accent-500), 0.3);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--accent-500), 0.4);
    background: linear-gradient(135deg, rgb(var(--accent-600)) 0%, rgb(var(--accent-700)) 100%);
}
.btn-primary:active {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED MODERN CARDS - Premium Hover Effects */
/* ═══════════════════════════════════════════════════════════════ */
.card-modern {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    will-change: transform, box-shadow, border-color;
    backface-visibility: hidden;
}
.card-modern:hover {
    transform: translateY(-4px) translateZ(0);
    border-color: rgba(var(--accent-500), 0.25);
    box-shadow:
        0 12px 24px -8px rgba(0, 0, 0, 0.1),
        0 4px 12px -4px rgba(var(--accent-500), 0.15);
}
.card-modern:active {
    transform: translateY(-2px) translateZ(0);
}

/* Enhanced focus indicators for better accessibility */
*:focus {
    outline: 2px solid rgb(var(--accent-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: 0.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) {
    /* Ensure minimum touch target size - WCAG AA compliant */
    button,
    a,
    [role='button'],
    .nav-link {
        min-height: 48px;
        min-width: 48px;
        padding: 0.75rem 1rem;
    }

    /* Improve text readability on mobile - Larger, clearer text */
    .text-sm {
        font-size: 0.9375rem;
    }
    .text-base {
        font-size: 1.0625rem;
    }
    .text-lg {
        font-size: 1.1875rem;
    }
    .text-xl {
        font-size: 1.375rem;
    }
    .text-2xl {
        font-size: 1.75rem;
    }
    .text-3xl {
        font-size: 2rem;
    }

    /* Better spacing for mobile with safe areas */
    .p-4 {
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }
    .p-6 {
        padding: 1.25rem;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    }
    .p-8 {
        padding: 1.5rem;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
    }

    /* Page padding optimization */
    .page {
        padding: 1rem !important;
    }

    /* Enhanced buttons for mobile */
    .btn-primary,
    .btn-secondary,
    .glass-button {
        min-height: 56px;
        font-size: 1.0625rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.875rem 1.5rem;
        width: 100%;
        max-width: 100%;
    }

    /* Improved tap targets */
    input,
    textarea,
    select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        min-height: 44px;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
    }

    /* Card improvements for mobile */
    .card-modern,
    .bg-white\/70,
    .bg-white\/50 {
        border-radius: 12px;
        margin: 0.5rem 0;
        padding: 1rem;
    }

    /* Grid improvements for mobile */
    .grid {
        gap: 0.75rem !important;
    }

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

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

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

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

    /* Header optimizations */
    header {
        padding: 0.75rem 1rem !important;
        flex-wrap: wrap;
    }

    header img {
        max-height: 2.5rem;
    }

    /* Navigation improvements */
    nav {
        font-size: 0.875rem;
    }

    /* 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(59, 130, 246, 0.1);
        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 */
    #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;
        user-select: none;
    }

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

    .image-resize-wrapper {
        position: relative;
        display: inline-block;
        max-width: 100%;
        margin: 0.75rem 0;
    }

    .image-resize-wrapper .blog-inline-image {
        margin: 0;
        display: block;
    }

    .resize-handle {
        position: absolute;
        width: 12px;
        height: 12px;
        background-color: #3b82f6;
        border: 2px solid white;
        border-radius: 50%;
        z-index: 1001;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transition:
            transform 0.1s ease,
            background-color 0.1s ease;
    }

    .resize-handle:hover {
        transform: scale(1.2);
        background-color: #2563eb;
    }

    .image-delete-btn {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 24px;
        height: 24px;
        background-color: #ef4444;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 1002;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transition:
            transform 0.1s ease,
            background-color 0.1s ease;
    }

    .image-delete-btn:hover {
        transform: scale(1.1);
        background-color: #dc2626;
    }

    .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-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-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;
    }

    /* 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 */
    .card-modern,
    .bg-white\/70,
    .bg-white\/50 {
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
    }

    .card-modern:hover,
    .bg-white\/70:hover,
    .bg-white\/50:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    /* Better button styles */
    button,
    .btn-primary,
    .btn-secondary {
        transition: all 0.2s ease;
        font-weight: 500;
    }

    button:hover,
    .btn-primary:hover,
    .btn-secondary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    button:active,
    .btn-primary:active,
    .btn-secondary: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;
    }

    /* 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;
    }

    /* ═══════════════════════════════════════════════════════════════ */
    /* ENHANCED TYPOGRAPHY - Modern, Clean, Professional */
    /* ═══════════════════════════════════════════════════════════════ */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-top: 1rem;
        margin-bottom: 0.75rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.2;
    }

    h1 {
        font-size: clamp(2rem, 5vw, 3rem);
    }

    h2 {
        font-size: clamp(1.5rem, 4vw, 2.25rem);
    }

    h3 {
        font-size: clamp(1.25rem, 3vw, 1.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: 0.7;
    pointer-events: none;
}
.video-brand-controls {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    gap: 6px;
}
:fullscreen .video-brand-watermark {
    opacity: 0.85;
}

/* 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%;
}

/* 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;
}

/* Ensure white text on blue backgrounds */
.bg-blue-600,
.bg-blue-700,
[class*='bg-blue-600'],
[class*='bg-blue-700'],
[style*='background: #1E3A5F'],
[style*='background: var(--bg-secondary)'] {
    color: #ffffff !important;
}

.bg-blue-600 *,
.bg-blue-700 *,
[class*='bg-blue-600'] *,
[class*='bg-blue-700'] *,
[style*='background: #1E3A5F'] *,
[style*='background: var(--bg-secondary)'] * {
    color: #ffffff !important;
}

.bg-blue-600 i,
.bg-blue-700 i,
[class*='bg-blue-600'] i,
[class*='bg-blue-700'] i,
[style*='background: #1E3A5F'] i,
[style*='background: var(--bg-secondary)'] i {
    color: #ffffff !important;
}

/* Video tab readability improvements */
#videos-page .playlist-card {
    color: var(--text-primary) !important;
}

#videos-page .playlist-card button {
    color: inherit !important;
}

#videos-page .playlist-card i.fa-pencil-alt {
    color: #ffffff !important;
}

#videos-page .playlist-card i.fa-trash-alt {
    color: #ef4444 !important; /* Red color for delete icon */
}

/* Keep delete icon white when inside red background button */
#videos-page .playlist-card button[class*='bg-red'] i.fa-trash-alt {
    color: #ffffff !important;
}

/* Ensure text is readable in video cards */
#videos-page .text-gray-600,
#videos-page .text-gray-500,
#videos-page .text-gray-700 {
    color: var(--text-secondary) !important;
}

[data-theme='dark'] #videos-page .text-gray-600,
[data-theme='dark'] #videos-page .text-gray-500,
[data-theme='dark'] #videos-page .text-gray-700 {
    color: var(--text-secondary) !important;
}

/* Improve icon visibility in video cards */
#videos-page .playlist-card i[class*='fa-'] {
    opacity: 1 !important;
    color: inherit !important;
}

#videos-page .playlist-card button[class*='bg-red'] i {
    color: #ffffff !important;
}

#videos-page .playlist-card button[class*='bg-blue'] i {
    color: #ffffff !important;
}

/* Performance Optimizations */
.gpu-accelerated-enhanced {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
}

/* ═══════════════════════════════════════════════════════════════ */
/* PLAYLIST & SUBJECT CARD ANIMATIONS */
/* ═══════════════════════════════════════════════════════════════ */
.animate-fade-in-up {
    animation: fadeInUpModern 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Line clamp utilities for text truncation */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

/* ═══════════════════════════════════════════════════════════════ */
/* ED TECH-INSPIRED PAGE & LAYOUT STYLES */
/* ═══════════════════════════════════════════════════════════════ */
/* Page background - padding handled by existing .page rules */
.page {
    background-color: var(--bg-primary) !important;
}

#page-content {
    background-color: var(--bg-primary) !important;
}

/* EdTech-inspired input styles */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='url'],
textarea,
select {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--input-radius);
    color: var(--text-primary);
    font-size: 0.9375rem;
    padding: 0.75rem 1rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='url']:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--bg-secondary);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

/* EdTech-inspired playlist cards */
#playlist-grid > div,
.playlist-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-md) !important;
}

#playlist-grid > div:hover,
.playlist-card:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-2px) !important;
}

/* EdTech-inspired subject cards */
#subject-grid > div {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-md) !important;
}

#subject-grid > div:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-2px) !important;
}

/* Header styling (EdTech style) */
header {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Dark blue sections (EdTech style) */
.section-dark,
[class*='bg-blue'][class*='dark'] {
    background: var(--bg-secondary) !important;
    color: #ffffff !important;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
[class*='bg-blue'][class*='dark'] h1,
[class*='bg-blue'][class*='dark'] h2,
[class*='bg-blue'][class*='dark'] h3 {
    color: #ffffff !important;
}

/* Glass effect adjustments for EdTech style */
.glass-card,
.glass-effect,
[class*='backdrop-blur'] {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid var(--border-color) !important;
}

/* Text color adjustments */
.text-gray-900,
.text-gray-800 {
    color: var(--text-primary) !important;
}

.text-gray-600,
.text-gray-500 {
    color: var(--text-secondary) !important;
}

.text-gray-400 {
    color: var(--text-light) !important;
}

/* Override semi-transparent backgrounds for EdTech style (more selective) */
.page [class*='bg-white/70'],
.page [class*='bg-white/50'],
.page [class*='bg-white/90'],
.page [class*='bg-white/95'],
#playlist-grid [class*='bg-white/'],
#subject-grid [class*='bg-white/'] {
    background: var(--bg-card) !important;
}

/* Preserve existing padding - don't override */
/* Padding is already handled by existing .page rules in the stylesheet */

/* Ensure proper spacing for cards */
#playlist-grid,
#subject-grid {
    gap: 1.5rem !important;
}

/* Update border colors (selective) */
.page [class*='border-gray-200'],
.page [class*='border-gray-300'],
#playlist-grid > div[class*='border'],
#subject-grid > div[class*='border'] {
    border-color: var(--border-color) !important;
}

/* Override blue buttons to use EdTech dark blue */
button[class*='bg-blue-600'],
button[class*='bg-blue-700'],
[class*='from-blue-600'],
[class*='to-blue-700'],
[class*='from-blue-700'],
[class*='to-blue-800'] {
    background: var(--bg-secondary) !important;
    background-image: none !important;
}

button[class*='bg-blue-600']:hover,
button[class*='bg-blue-700']:hover {
    background: #1a2f4d !important;
}

/* Update gradient buttons */
[class*='bg-gradient-to-r'][class*='from-blue'] {
    background: var(--bg-secondary) !important;
    background-image: none !important;
}

[class*='bg-gradient-to-r'][class*='from-blue']:hover {
    background: #1a2f4d !important;
}

/* Ensure FontAwesome icons display correctly - MUST come before universal selector */
i[class*='fa-'],
i.fa,
i.fas,
i.far,
i.fab,
i.fal,
i.fad,
.fa,
.fas,
.far,
.fab,
.fal,
.fad,
[class*='fa-'] {
    font-family:
        'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'Font Awesome 6 Brands', 'FontAwesome' !important;
    font-style: normal !important;
    font-weight: 900 !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    display: inline-block !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Regular weight icons */
i.far,
.far {
    font-weight: 400 !important;
}

/* Brand icons */
i.fab,
.fab {
    font-family: 'Font Awesome 6 Brands', 'FontAwesome' !important;
    font-weight: 400 !important;
}

/* Light icons */
i.fal,
.fal {
    font-weight: 300 !important;
}

/* Duotone icons */
i.fad,
.fad {
    font-weight: 900 !important;
}

/* Apply Inter font to specific elements only (not universal) */
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
div:not([class*='fa-']):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad),
span:not([class*='fa-']):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad),
a:not([class*='fa-']):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad),
button:not([class*='fa-']):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad),
input:not([class*='fa-']),
textarea:not([class*='fa-']),
select:not([class*='fa-']),
label:not([class*='fa-']),
li:not([class*='fa-']),
td:not([class*='fa-']),
th:not([class*='fa-']) {
    font-family:
        'Inter',
        -apple-system,
        BlinkMacSystemFont,
        'Segoe UI',
        Roboto,
        'Helvetica Neue',
        Arial,
        sans-serif !important;
}

/* Code and monospace exceptions */
code,
pre,
kbd,
samp {
    font-family: 'Courier New', Courier, monospace !important;
}

/* Main app background (EdTech style) */
#main-app {
    background-color: var(--bg-primary) !important;
}

/* Update skeleton colors */
.skeleton {
    background: linear-gradient(90deg, #e5e7eb 25%, #d1d5db 50%, #e5e7eb 75%) !important;
    background-size: 200% 100% !important;
}

/* Footer styling (EdTech style) */
footer {
    background-color: var(--bg-card) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* ═══════════════════════════════════════════════════════════════ */
/* FONTAWESOME ICON FIX - High specificity to override everything */
/* ═══════════════════════════════════════════════════════════════ */

/* Force FontAwesome font-family with maximum specificity */
/* Use both :before/:after and ::before/::after for maximum compatibility */
i[class*='fa-']::before,
i[class*='fa-']:before,
i[class*='fa-']::after,
i[class*='fa-']:after,
i.fa::before,
i.fa:before,
i.fa::after,
i.fa:after,
i.fas::before,
i.fas:before,
i.fas::after,
i.fas:after,
i.far::before,
i.far:before,
i.far::after,
i.far:after,
i.fab::before,
i.fab:before,
i.fab::after,
i.fab:after,
i.fal::before,
i.fal:before,
i.fal::after,
i.fal:after,
i.fad::before,
i.fad:before,
i.fad::after,
i.fad:after,
.fa::before,
.fa:before,
.fa::after,
.fa:after,
.fas::before,
.fas:before,
.fas::after,
.fas:after,
.far::before,
.far:before,
.far::after,
.far:after,
.fab::before,
.fab:before,
.fab::after,
.fab:after,
.fal::before,
.fal:before,
.fal::after,
.fal:after,
.fad::before,
.fad:before,
.fad::after,
.fad:after {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.far::before,
.far:before,
.far::after,
.far:after,
i.far::before,
i.far:before,
i.far::after,
i.far:after {
    font-weight: 400 !important;
}

.fab::before,
.fab:before,
.fab::after,
.fab:after,
i.fab::before,
i.fab:before,
i.fab::after,
i.fab:after {
    font-family: 'Font Awesome 6 Brands' !important;
    font-weight: 400 !important;
}

.fal::before,
.fal:before,
.fal::after,
.fal:after,
i.fal::before,
i.fal:before,
i.fal::after,
i.fal:after {
    font-weight: 300 !important;
}

/* Ensure icon elements themselves use FontAwesome - MAXIMUM SPECIFICITY */
i[class*='fa-'],
i.fa,
i.fas,
i.far,
i.fab,
i.fal,
i.fad,
.fa,
.fas,
.far,
.fab,
.fal,
.fad,
[class*='fa-'] {
    font-family:
        'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'Font Awesome 6 Brands', 'FontAwesome' !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    display: inline-block !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Specific weight rules for each icon type */
i.fas,
.fas,
i[class*='fas'] {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
}

i.far,
.far,
i[class*='far'] {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 400 !important;
}

i.fab,
.fab,
i[class*='fab'] {
    font-family: 'Font Awesome 6 Brands', 'FontAwesome' !important;
    font-weight: 400 !important;
}

i.fal,
.fal,
i[class*='fal'] {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 300 !important;
}

i.fad,
.fad,
i[class*='fad'] {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
}

/* CRITICAL OVERRIDE: Force FontAwesome on any element with fa- class */
[class*='fa-'] {
    font-family:
        'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'Font Awesome 6 Brands', 'FontAwesome' !important;
}

/* ═══════════════════════════════════════════════════════════════ */
/* FINAL FONTAWESOME FIX - Must be at the very end to override all */
/* ═══════════════════════════════════════════════════════════════ */

/* FontAwesome uses ::before pseudo-elements - ensure they have correct font */
/* Use both :before and ::before for maximum compatibility */
i.fas::before,
i.fas:before,
i.far::before,
i.far:before,
i.fab::before,
i.fab:before,
i.fal::before,
i.fal:before,
i.fad::before,
i.fad:before,
.fas::before,
.fas:before,
.far::before,
.far:before,
.fab::before,
.fab:before,
.fal::before,
.fal:before,
.fad::before,
.fad:before,
i[class*='fa-']::before,
i[class*='fa-']:before,
[class*='fa-']::before,
[class*='fa-']:before {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.fab::before,
.fab:before,
i.fab::before,
i.fab:before,
[class*='fab']::before,
[class*='fab']:before {
    font-family: 'Font Awesome 6 Brands' !important;
    font-weight: 400 !important;
}

.far::before,
.far:before,
i.far::before,
i.far:before,
[class*='far']::before,
[class*='far']:before {
    font-weight: 400 !important;
}

.fal::before,
.fal:before,
i.fal::before,
i.fal:before,
[class*='fal']::before,
[class*='fal']:before {
    font-weight: 300 !important;
}

/* Ultimate override - any i element with fa- in class */
i[class*='fa-'],
[class*='fa-'] {
    font-family:
        'Font Awesome 6 Free', 'Font Awesome 6 Pro', 'Font Awesome 6 Brands', 'FontAwesome' !important;
    font-style: normal !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
}

i[class*='far'],
[class*='far'] {
    font-weight: 400 !important;
}

i[class*='fab'],
[class*='fab'] {
    font-family: 'Font Awesome 6 Brands', 'FontAwesome' !important;
    font-weight: 400 !important;
}

i[class*='fal'],
[class*='fal'] {
    font-weight: 300 !important;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ICON ALIGNMENT & SPACING IMPROVEMENTS */
/* ═══════════════════════════════════════════════════════════════ */

/* Ensure icons are properly aligned in buttons and containers */
button i,
.btn i,
a i,
[class*='button'] i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

/* Icon spacing in flex containers */
.flex i,
[class*='flex'] i {
    flex-shrink: 0;
}

/* Better icon alignment in text */
i + span,
span + i {
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════ */
/* LAYOUT & PADDING IMPROVEMENTS */
/* ═══════════════════════════════════════════════════════════════ */

/* Subject dashboard cards - prevent cutoff */
#subject-grid .card,
#subject-grid > div {
    overflow: visible !important;
}

/* Better padding for cards */
.card-modern,
.modern-card,
.glass-card-premium {
    padding: 1.5rem !important;
}

@media (min-width: 640px) {
    .card-modern,
    .modern-card,
    .glass-card-premium {
        padding: 1.75rem !important;
    }
}

/* Playlist cards spacing */
.playlist-card {
    padding: 1.5rem !important;
}

@media (min-width: 640px) {
    .playlist-card {
        padding: 1.75rem !important;
    }
}

/* Button padding improvements */
button[class*='px-4'][class*='py-3'] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* View spec button specific improvements */
button[class*='View Spec'],
button:has(i.fa-file-pdf) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
}

/* Ensure text doesn't overflow in buttons */
button span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dark blue background text/icon fixes */
[style*='background: var(--bg-secondary)'],
[style*='background: #1E3A5F'],
[style*='background: #1a2f4d'],
[class*='bg-blue-600'],
[class*='bg-blue-700'] {
    color: #ffffff !important;
}

[style*='background: var(--bg-secondary)'] i,
[style*='background: #1E3A5F'] i,
[style*='background: #1a2f4d'] i,
[class*='bg-blue-600'] i,
[class*='bg-blue-700'] i,
[style*='background: var(--bg-secondary)'] svg,
[style*='background: #1E3A5F'] svg,
[style*='background: #1a2f4d'] svg,
[class*='bg-blue-600'] svg,
[class*='bg-blue-700'] svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════ */
/* DESIGN IMPROVEMENT #1: DARK MODE SUPPORT */
/* ═══════════════════════════════════════════════════════════════ */

/* Theme toggle button */
#theme-toggle {
    transition: var(--theme-transition);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

#theme-toggle:hover {
    background: var(--bg-card-hover);
    transform: scale(1.05);
}

#theme-toggle:focus {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
}

/* Dark mode body styles with smooth transition */
body,
#main-app {
    transition:
        background-color 0.5s ease,
        color 0.5s ease;
}

[data-theme='dark'] body,
[data-theme='dark'] #main-app {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme='dark'] .bg-white,
[data-theme='dark'] .bg-white\/90,
[data-theme='dark'] .bg-white\/70,
[data-theme='dark'] .bg-white\/50 {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

[data-theme='dark'] .text-gray-900,
[data-theme='dark'] .text-gray-800,
[data-theme='dark'] .text-gray-700 {
    color: var(--text-primary) !important;
}

[data-theme='dark'] .text-gray-600,
[data-theme='dark'] .text-gray-500 {
    color: var(--text-secondary) !important;
}

[data-theme='dark'] .border-gray-200,
[data-theme='dark'] .border-gray-300 {
    border-color: var(--border-color) !important;
}

[data-theme='dark'] header {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme='dark'] .card-modern,
[data-theme='dark'] .modern-card,
[data-theme='dark'] .glass-card-premium {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Comprehensive dark mode text color fixes */
[data-theme='dark'] .text-gray-400,
[data-theme='dark'] .text-gray-300 {
    color: var(--text-light) !important;
}

[data-theme='dark'] .text-blue-800,
[data-theme='dark'] .text-blue-700,
[data-theme='dark'] .text-blue-600 {
    color: #93c5fd !important;
}

[data-theme='dark'] .text-green-700,
[data-theme='dark'] .text-green-600 {
    color: #6ee7b7 !important;
}

[data-theme='dark'] .bg-gray-50,
[data-theme='dark'] .bg-gray-100,
[data-theme='dark'] .bg-gray-200,
[data-theme='dark'] .bg-gray-300 {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

[data-theme='dark'] .bg-blue-50,
[data-theme='dark'] .bg-blue-100,
[data-theme='dark'] .bg-indigo-50 {
    background-color: rgba(30, 58, 138, 0.3) !important;
}

[data-theme='dark'] .bg-white\/70,
[data-theme='dark'] .bg-white\/60,
[data-theme='dark'] .bg-white\/50 {
    background-color: rgba(30, 41, 59, 0.7) !important;
}

/* Dark mode table styles */
[data-theme='dark'] table,
[data-theme='dark'] thead,
[data-theme='dark'] tbody,
[data-theme='dark'] tr,
[data-theme='dark'] td,
[data-theme='dark'] th {
    color: var(--text-primary) !important;
}

[data-theme='dark'] .divide-gray-100,
[data-theme='dark'] .divide-gray-200 {
    border-color: var(--border-color) !important;
}

/* Dark mode playlist card fixes */
[data-theme='dark'] .playlist-card,
[data-theme='dark'] .playlist-card.bg-white {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

[data-theme='dark'] .playlist-card button.bg-white {
    background-color: var(--bg-card-hover) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme='dark'] .playlist-card button.bg-white i {
    color: var(--text-primary) !important;
}

[data-theme='dark'] .playlist-card button.text-red-600 {
    color: #fca5a5 !important;
}

[data-theme='dark'] .playlist-card button.text-red-600:hover {
    background-color: rgba(239, 68, 68, 0.2) !important;
}

/* Dark mode icon alignment fixes */
[data-theme='dark'] i[class*='fa-'],
[data-theme='dark'] [class*='fa-'] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

/* Ensure icons are visible in dark mode */
i[class*='fa-'],
[class*='fa-'] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
}

/* Dark mode support for Tailwind dark: classes using data-theme */
[data-theme='dark'] .dark\:bg-gray-700,
[data-theme='dark'] .dark\:bg-gray-800 {
    background-color: var(--bg-card) !important;
}

[data-theme='dark'] .dark\:bg-gray-600 {
    background-color: var(--bg-card-hover) !important;
}

[data-theme='dark'] .dark\:text-gray-100,
[data-theme='dark'] .dark\:text-gray-200,
[data-theme='dark'] .dark\:text-gray-300,
[data-theme='dark'] .dark\:text-gray-400 {
    color: var(--text-primary) !important;
}

[data-theme='dark'] .dark\:text-gray-400 {
    color: var(--text-secondary) !important;
}

[data-theme='dark'] .dark\:text-red-400 {
    color: #fca5a5 !important;
}

[data-theme='dark'] .dark\:text-blue-400 {
    color: #93c5fd !important;
}

[data-theme='dark'] .dark\:border-gray-600,
[data-theme='dark'] .dark\:border-gray-700 {
    border-color: var(--border-color) !important;
}

[data-theme='dark'] .dark\:ring-blue-500 {
    --tw-ring-color: #3b82f6 !important;
}

[data-theme='dark'] .dark\:hover\:bg-gray-600:hover {
    background-color: var(--bg-card-hover) !important;
}

[data-theme='dark'] .dark\:hover\:bg-red-900\/30:hover {
    background-color: rgba(127, 29, 29, 0.3) !important;
}

[data-theme='dark'] .dark\:hover\:text-red-400:hover {
    color: #fca5a5 !important;
}

[data-theme='dark'] .dark\:text-red-400 {
    color: #fca5a5 !important;
}

/* Pricing page specific dark mode fixes */
[data-theme='dark'] #features-page h2,
[data-theme='dark'] #features-page h3,
[data-theme='dark'] #features-page .text-gray-800,
[data-theme='dark'] #features-page .text-gray-900 {
    color: var(--text-primary) !important;
}

[data-theme='dark'] #features-page .text-gray-600,
[data-theme='dark'] #features-page .text-gray-700,
[data-theme='dark'] #features-page .text-gray-500 {
    color: var(--text-secondary) !important;
}

[data-theme='dark'] #features-page .text-blue-800,
[data-theme='dark'] #features-page .text-blue-700 {
    color: #93c5fd !important;
}

[data-theme='dark'] #features-page .bg-white\/70,
[data-theme='dark'] #features-page .bg-white\/60,
[data-theme='dark'] #features-page .bg-white\/50 {
    background-color: rgba(30, 41, 59, 0.7) !important;
}

[data-theme='dark'] #features-page .bg-blue-50,
[data-theme='dark'] #features-page .bg-indigo-50 {
    background-color: rgba(30, 58, 138, 0.3) !important;
}

[data-theme='dark'] #features-page .border-blue-200 {
    border-color: rgba(59, 130, 246, 0.3) !important;
}

[data-theme='dark'] #features-page .text-green-700,
[data-theme='dark'] #features-page .text-green-600 {
    color: #6ee7b7 !important;
}

[data-theme='dark'] #features-page .bg-gray-50\/70 {
    background-color: rgba(30, 41, 59, 0.5) !important;
}

[data-theme='dark'] #features-page .border-white\/30 {
    border-color: var(--border-color) !important;
}

[data-theme='dark'] #features-page .text-blue-100,
[data-theme='dark'] #features-page .text-blue-200 {
    color: #dbeafe !important;
}

/* ═══════════════════════════════════════════════════════════════ */
/* DESIGN IMPROVEMENT #2: MICRO-INTERACTIONS & ANIMATIONS */
/* ═══════════════════════════════════════════════════════════════ */

/* Skeleton loaders */
@keyframes skeleton-loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-card-hover) 25%,
        var(--bg-card) 50%,
        var(--bg-card-hover) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--card-radius);
}

.skeleton-text {
    height: 1em;
    margin: 0.5em 0;
    border-radius: 4px;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-card {
    height: 200px;
    border-radius: var(--card-radius);
}

/* Page transition animations */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-left {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.page-transition {
    animation: fade-in var(--animation-normal) ease-out;
}

/* Success/Error animations */
@keyframes success-pulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes error-shake {
    0%,
    100% {
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

.success-animation {
    animation: success-pulse var(--animation-normal) ease-out;
}

.error-animation {
    animation: error-shake var(--animation-normal) ease-out;
}

/* Loading progress indicators */
.progress-bar {
    height: 4px;
    background: var(--bg-card-hover);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-info), var(--color-success));
    border-radius: 2px;
    animation: progress-loading 1.5s ease-in-out infinite;
}

@keyframes progress-loading {
    0% {
        width: 0%;
    }
    50% {
        width: 70%;
    }
    100% {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* DESIGN IMPROVEMENT #3: ENHANCED VISUAL HIERARCHY */
/* ═══════════════════════════════════════════════════════════════ */

/* Consistent spacing utilities */
.space-y-1 > * + * {
    margin-top: var(--spacing-1);
}
.space-y-2 > * + * {
    margin-top: var(--spacing-2);
}
.space-y-3 > * + * {
    margin-top: var(--spacing-3);
}
.space-y-4 > * + * {
    margin-top: var(--spacing-4);
}
.space-y-6 > * + * {
    margin-top: var(--spacing-6);
}
.space-y-8 > * + * {
    margin-top: var(--spacing-8);
}

/* Visual grouping */
.visual-group {
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    padding: var(--spacing-4);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}

.visual-group:hover {
    border-color: var(--border-color-hover);
    box-shadow: var(--shadow-md);
}

/* ═══════════════════════════════════════════════════════════════ */
/* DESIGN IMPROVEMENT #4: RESPONSIVE GRID IMPROVEMENTS */
/* ═══════════════════════════════════════════════════════════════ */

.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-4);
}

@media (min-width: 640px) {
    .responsive-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-6);
    }
}

@media (min-width: 1024px) {
    .responsive-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media (min-width: 1536px) {
    .responsive-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* DESIGN IMPROVEMENT #5: CUSTOM SCROLLBAR STYLING */
/* ═══════════════════════════════════════════════════════════════ */

/* Webkit scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-card);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: var(--text-secondary);
    border-radius: 6px;
    border: 2px solid var(--bg-card);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-primary);
}

[data-theme='dark'] ::-webkit-scrollbar-thumb {
    background: var(--text-light);
}

[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--text-secondary) var(--bg-card);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* DESIGN IMPROVEMENT #6: ENHANCED CARD DESIGNS */
/* ═══════════════════════════════════════════════════════════════ */

.card-enhanced {
    position: relative;
    overflow: hidden;
    transition: all var(--animation-normal) cubic-bezier(0.4, 0, 0.2, 1);
}

.card-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left var(--animation-slow) ease;
}

.card-enhanced:hover::before {
    left: 100%;
}

.card-enhanced:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* Card depth with layered shadows */
.card-depth-1 {
    box-shadow: var(--shadow-sm);
}
.card-depth-2 {
    box-shadow: var(--shadow-md);
}
.card-depth-3 {
    box-shadow: var(--shadow-lg);
}
.card-depth-4 {
    box-shadow: var(--shadow-xl);
}

/* Loading shimmer effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.shimmer {
    background: linear-gradient(
        90deg,
        var(--bg-card) 0%,
        var(--bg-card-hover) 50%,
        var(--bg-card) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* ═══════════════════════════════════════════════════════════════ */
/* DESIGN IMPROVEMENT #7: ICON SYSTEM ENHANCEMENT */
/* ═══════════════════════════════════════════════════════════════ */

.icon-xs {
    font-size: var(--icon-xs);
    width: var(--icon-xs);
    height: var(--icon-xs);
}
.icon-sm {
    font-size: var(--icon-sm);
    width: var(--icon-sm);
    height: var(--icon-sm);
}
.icon-md {
    font-size: var(--icon-md);
    width: var(--icon-md);
    height: var(--icon-md);
}
.icon-lg {
    font-size: var(--icon-lg);
    width: var(--icon-lg);
    height: var(--icon-lg);
}
.icon-xl {
    font-size: var(--icon-xl);
    width: var(--icon-xl);
    height: var(--icon-xl);
}
.icon-2xl {
    font-size: var(--icon-2xl);
    width: var(--icon-2xl);
    height: var(--icon-2xl);
}

.icon-hover {
    transition: all var(--animation-fast) ease;
}

.icon-hover:hover {
    transform: scale(1.1);
    color: var(--color-info);
}

.icon-badge {
    position: relative;
}

.icon-badge::after {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    background: var(--color-error);
    border-radius: 50%;
    border: 2px solid var(--bg-card);
}

/* ═══════════════════════════════════════════════════════════════ */
/* DESIGN IMPROVEMENT #8: COLOR PALETTE REFINEMENT */
/* ═══════════════════════════════════════════════════════════════ */

.bg-success {
    background-color: var(--color-success);
}
.bg-success-light {
    background-color: var(--color-success-light);
}
.text-success {
    color: var(--color-success);
}

.bg-warning {
    background-color: var(--color-warning);
}
.bg-warning-light {
    background-color: var(--color-warning-light);
}
.text-warning {
    color: var(--color-warning);
}

.bg-error {
    background-color: var(--color-error);
}
.bg-error-light {
    background-color: var(--color-error-light);
}
.text-error {
    color: var(--color-error);
}

.bg-info {
    background-color: var(--color-info);
}
.bg-info-light {
    background-color: var(--color-info-light);
}
.text-info {
    color: var(--color-info);
}

/* ═══════════════════════════════════════════════════════════════ */
/* DESIGN IMPROVEMENT #9: TYPOGRAPHY IMPROVEMENTS */
/* ═══════════════════════════════════════════════════════════════ */

.font-light {
    font-weight: var(--font-weight-light);
}
.font-normal {
    font-weight: var(--font-weight-normal);
}
.font-medium {
    font-weight: var(--font-weight-medium);
}
.font-semibold {
    font-weight: var(--font-weight-semibold);
}
.font-bold {
    font-weight: var(--font-weight-bold);
}
.font-extrabold {
    font-weight: var(--font-weight-extrabold);
}

.leading-tight {
    line-height: var(--line-height-tight);
}
.leading-normal {
    line-height: var(--line-height-normal);
}
.leading-relaxed {
    line-height: var(--line-height-relaxed);
}
.leading-loose {
    line-height: var(--line-height-loose);
}

/* Text truncation utilities */
.truncate-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

/* Reading mode typography */
.reading-mode {
    max-width: 65ch;
    line-height: var(--line-height-relaxed);
    font-size: 1.125rem;
}

/* ═══════════════════════════════════════════════════════════════ */
/* DESIGN IMPROVEMENT #10: VISUAL FEEDBACK SYSTEMS */
/* ═══════════════════════════════════════════════════════════════ */

/* Toast notification animations */
@keyframes toast-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast-enter {
    animation: toast-slide-in var(--animation-normal) ease-out;
}

.toast-exit {
    animation: toast-slide-out var(--animation-normal) ease-out;
}

/* Status indicators */
.status-online {
    width: 8px;
    height: 8px;
    background: var(--color-success);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.status-offline {
    width: 8px;
    height: 8px;
    background: var(--text-light);
    border-radius: 50%;
}

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

/* Form validation feedback */
.input-success {
    border-color: var(--color-success) !important;
    box-shadow: 0 0 0 3px var(--color-success-light);
}

.input-error {
    border-color: var(--color-error) !important;
    box-shadow: 0 0 0 3px var(--color-error-light);
}

/* ═══════════════════════════════════════════════════════════════ */
/* ACCESSIBILITY IMPROVEMENT #7: MOTION CONTROLS */
/* ═══════════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════════ */
/* ACCESSIBILITY IMPROVEMENT #6: FOCUS MANAGEMENT */
/* ═══════════════════════════════════════════════════════════════ */

*:focus-visible {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
    border-radius: 4px;
}

/* High contrast focus for accessibility */
.high-contrast-focus:focus-visible {
    outline: 3px solid var(--text-primary);
    outline-offset: 3px;
}

/* ============================================================================
   DESIGN IMPROVEMENTS - All 10 Design Enhancements
   ============================================================================ */

/* 1. Enhanced Visual Hierarchy & Spacing */
.page {
    padding: var(--spacing-4) var(--spacing-6);
}

@media (min-width: 768px) {
    .page {
        padding: var(--spacing-6) var(--spacing-8);
    }
}

/* Consistent spacing scale */
.space-y-1 > * + * {
    margin-top: var(--spacing-1);
}
.space-y-2 > * + * {
    margin-top: var(--spacing-2);
}
.space-y-3 > * + * {
    margin-top: var(--spacing-3);
}
.space-y-4 > * + * {
    margin-top: var(--spacing-4);
}
.space-y-6 > * + * {
    margin-top: var(--spacing-6);
}
.space-y-8 > * + * {
    margin-top: var(--spacing-8);
}

/* Card elevation system (0-5 levels) */
.card-elevation-0 {
    box-shadow: none;
}
.card-elevation-1 {
    box-shadow: var(--shadow-sm);
}
.card-elevation-2 {
    box-shadow: var(--shadow-md);
}
.card-elevation-3 {
    box-shadow: var(--shadow-lg);
}
.card-elevation-4 {
    box-shadow: var(--shadow-xl);
}
.card-elevation-5 {
    box-shadow: var(--shadow-2xl);
}

/* 2. Micro-interactions & Feedback */
.hover-scale {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.hover-scale:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

/* Loading skeleton screens */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Ripple effect on button clicks */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition:
        width 0.6s,
        height 0.6s;
}

.ripple:active::after {
    width: 300px;
    height: 300px;
}

/* Success/Error state animations */
@keyframes slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-success,
.toast-error,
.toast-info,
.toast-warning {
    animation: slide-in 0.3s ease-out;
}

/* 3. Improved Color System */
.color-hover:hover {
    filter: brightness(1.1);
    transition: filter 0.2s ease;
}

.color-active:active {
    filter: brightness(0.9);
}

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

/* Gradient overlays for hero sections */
.hero-gradient {
    background: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-700) 100%);
}

/* 4. Typography Enhancements */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

/* Reading mode typography */
.reading-mode {
    max-width: 65ch;
    line-height: 1.75;
    font-size: 1.125rem;
}

/* 5. Card & Component Redesign */
.card-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.card-glass:hover {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: var(--shadow-xl);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Shimmer effect for 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;
    }
}

/* 6. Navigation & Menu Improvements */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.breadcrumb-item:not(:last-child)::after {
    content: '/';
    margin-left: var(--spacing-2);
    color: var(--text-light);
}

/* Sticky navigation */
.sticky-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

/* Active state indicators */
.nav-active {
    position: relative;
    color: var(--accent-600);
    font-weight: 600;
}

.nav-active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-600);
}

/* 7. Form Design Enhancements */
.floating-label {
    position: relative;
}

.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label {
    transform: translateY(-1.5rem) scale(0.85);
    color: var(--accent-600);
}

.floating-label label {
    position: absolute;
    left: var(--spacing-3);
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.2s ease;
    pointer-events: none;
    color: var(--text-secondary);
}

/* Inline validation */
.input-error {
    border-color: var(--color-error);
}

.input-success {
    border-color: var(--color-success);
}

.validation-icon {
    position: absolute;
    right: var(--spacing-3);
    top: 50%;
    transform: translateY(-50%);
}

/* 8. Data Visualization */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-card-hover);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-500), var(--accent-600));
    transition: width 0.3s ease;
    border-radius: 4px;
}

/* Heatmap visualization */
.heatmap-cell {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin: 2px;
}

.heatmap-cell[data-intensity='0'] {
    background: #ebedf0;
}
.heatmap-cell[data-intensity='1'] {
    background: #c6e48b;
}
.heatmap-cell[data-intensity='2'] {
    background: #7bc96f;
}
.heatmap-cell[data-intensity='3'] {
    background: #239a3b;
}
.heatmap-cell[data-intensity='4'] {
    background: #196127;
}

/* 9. Empty States & Onboarding */
.empty-state {
    text-align: center;
    padding: var(--spacing-12) var(--spacing-6);
}

.empty-state-icon {
    font-size: 4rem;
    color: var(--text-light);
    margin-bottom: var(--spacing-4);
}

.empty-state-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
}

.empty-state-description {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-6);
}

/* Tooltip */
.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--text-primary);
    color: white;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.tooltip:hover::after {
    opacity: 1;
}

/* 10. Dark Mode Refinements */
[data-theme='dark'] .card-glass {
    background: rgba(31, 41, 55, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme='dark'] .skeleton {
    background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
    background-size: 200% 100%;
}

[data-theme='dark'] .sticky-nav {
    background: rgba(31, 41, 55, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Smooth theme transitions */
* {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

/* Feature-specific styles */
.flashcard-card {
    perspective: 1000px;
    cursor: pointer;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flashcard-flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.flashcard-back {
    transform: rotateY(180deg);
}

/* Study planner styles */
.goal-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-card-hover);
    border-radius: 4px;
    overflow: hidden;
}

.goal-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-success), var(--color-success-light));
    transition: width 0.5s ease;
}

/* Practice questions styles */
.question-card {
    border-left: 4px solid var(--accent-600);
    padding-left: var(--spacing-4);
}

.answer-option {
    transition: all 0.2s ease;
    cursor: pointer;
}

.answer-option:hover {
    background: var(--accent-50);
    transform: translateX(4px);
}

.answer-option.correct {
    background: var(--color-success-light);
    border-color: var(--color-success);
}

.answer-option.incorrect {
    background: var(--color-error-light);
    border-color: var(--color-error);
}

/* Notes styles */
.note-card {
    transition: all 0.3s ease;
}

.note-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

/* Ensure all text and icons on dark blue backgrounds are white */
[class*='bg-blue-600'],
[class*='bg-blue-700'],
[style*='background: var(--bg-secondary)'],
[style*='background: #1E3A5F'],
[style*='background: #1e3a5f'],
[style*='background: #1a2f4d'] {
    color: #ffffff !important;
}

[class*='bg-blue-600'] *,
[class*='bg-blue-700'] *,
[style*='background: var(--bg-secondary)'] *,
[style*='background: #1E3A5F'] *,
[style*='background: #1e3a5f'] *,
[style*='background: #1a2f4d'] * {
    color: #ffffff !important;
}

[class*='bg-blue-600'] i,
[class*='bg-blue-700'] i,
[style*='background: var(--bg-secondary)'] i,
[style*='background: #1E3A5F'] i,
[style*='background: #1e3a5f'] i,
[style*='background: #1a2f4d'] i,
[class*='bg-blue-600'] svg,
[class*='bg-blue-700'] svg,
[style*='background: var(--bg-secondary)'] svg,
[style*='background: #1E3A5F'] svg,
[style*='background: #1e3a5f'] svg,
[style*='background: #1a2f4d'] svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Dark mode modals */
[data-theme='dark'] .fixed.inset-0 {
    background-color: rgba(0, 0, 0, 0.75) !important;
}

[data-theme='dark'] .bg-white\/90,
[data-theme='dark'] .bg-white\/95,
[data-theme='dark'] .bg-white\/80 {
    background-color: rgba(30, 41, 59, 0.95) !important;
    color: #ffffff !important;
}

[data-theme='dark'] .bg-white\/90 *,
[data-theme='dark'] .bg-white\/95 *,
[data-theme='dark'] .bg-white\/80 * {
    color: #ffffff !important;
}

/* Smooth theme transition */
* {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease !important;
}

/* Study groups styles */
.group-card {
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

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

/* Achievement badge */
.achievement-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
    color: white;
    border-radius: 9999px;
    font-weight: 600;
    box-shadow: var(--shadow-md);
}

/* Responsive improvements */
@media (max-width: 640px) {
    .page {
        padding: var(--spacing-4);
    }

    .card-glass {
        padding: var(--spacing-4);
    }
}

/* ═══════════════════════════════════════════════════════════════ */
/* ENHANCED CONTRAST IMPROVEMENTS FOR READABILITY */
/* ═══════════════════════════════════════════════════════════════ */

/* Ensure all buttons have readable text */
button,
.btn {
    color: var(--text-primary);
    font-weight: 500;
}

button[style*='background: var(--bg-secondary)'],
button.bg-blue-600,
button.bg-blue-700 {
    color: #ffffff !important;
    font-weight: 600;
}

/* Input fields with better contrast */
input,
textarea,
select {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 400;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-info);
    outline: 2px solid var(--color-info-light);
    outline-offset: 2px;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-light);
    opacity: 0.8;
}

/* Tables with better contrast */
table {
    color: var(--text-primary);
}

th {
    color: var(--text-primary);
    font-weight: 700;
    background-color: var(--bg-card-hover);
}

td {
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Links with better contrast */
a {
    color: var(--color-info);
    font-weight: 500;
}

a:hover {
    color: var(--color-info-text);
    text-decoration: underline;
}

/* Cards and containers */
.card,
.container,
.section {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Labels and form elements */
label {
    color: var(--text-primary);
    font-weight: 500;
}

/* Code blocks and pre */
code,
pre {
    background-color: var(--bg-card-hover);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Badges and tags */
.badge,
.tag {
    color: var(--text-primary);
    background-color: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    font-weight: 500;
}

/* Ensure icons are visible */
i.fa,
i.fas,
i.far,
svg {
    color: inherit;
}

/* Dark mode specific improvements */
[data-theme='dark'] button:not([style*='background']):not(.bg-blue-600):not(.bg-blue-700) {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

[data-theme='dark'] .bg-white {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

[data-theme='dark'] .text-white:not(button):not(.bg-blue-600):not(.bg-blue-700) {
    color: var(--text-primary) !important;
}

/* Light mode specific improvements */
:root:not([data-theme='dark']) .text-white:not(button):not(.bg-blue-600):not(.bg-blue-700) {
    color: var(--text-primary) !important;
}

:root:not([data-theme='dark'])
    button:not([style*='background']):not(.bg-blue-600):not(.bg-blue-700) {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* Enhanced text readability for all elements */
* {
    color: inherit;
}

/* Override low-contrast text */
.text-gray-400,
.text-gray-300 {
    color: var(--text-light) !important;
}

.text-gray-500,
.text-gray-600 {
    color: var(--text-secondary) !important;
}

.text-gray-700,
.text-gray-800,
.text-gray-900 {
    color: var(--text-primary) !important;
}

/* Flashcard flip animation */
#flashcard-card {
    perspective: 1000px;
    transform-style: preserve-3d;
}

#flashcard-front,
#flashcard-back {
    backface-visibility: hidden;
    transition: transform 0.6s;
}

#flashcard-front {
    transform: rotateY(0deg);
}

#flashcard-back {
    transform: rotateY(180deg);
}

#flashcard-card.flipped #flashcard-front {
    transform: rotateY(-180deg);
}

#flashcard-card.flipped #flashcard-back {
    transform: rotateY(0deg);
}

/* Ensure flashcard text is readable */
#flashcard-card,
#flashcard-front,
#flashcard-back {
    color: var(--text-primary) !important;
}

#flashcard-card h3,
#flashcard-card p {
    color: var(--text-primary) !important;
}

/* Quiz UI readability */
#practice-questions-content,
#practice-questions-content * {
    color: var(--text-primary) !important;
}

#practice-questions-content h3,
#practice-questions-content p,
#practice-questions-content label {
    color: var(--text-primary) !important;
}

/* Quiz light mode refresh */
#practice-questions-page {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 65%, #eef2ff 100%);
    padding-top: 1.5rem !important;
}

/* AI Tutor spacing fix */
#ai-tutor-page {
    padding-top: 0.5rem !important;
    margin-top: 0 !important;
}

#ai-tutor-page.page {
    padding-top: 0.5rem !important;
}

#ai-tutor-page > *:first-child,
#ai-tutor-page .flex:first-child,
#ai-tutor-page .mb-4:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#practice-questions-content {
    max-width: 780px;
    margin: 0 auto;
}

[data-theme='dark'] #practice-questions-page {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 65%, #eef2ff 100%);
    color: #0f172a;
}

.quiz-shell {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-bottom: 2rem;
}

.quiz-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 1.75rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.08);
}

.quiz-card--secondary {
    background: #f8fafc;
    border-style: dashed;
    border-color: rgba(99, 102, 241, 0.3);
}

.quiz-card--loading {
    text-align: center;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-card--results {
    padding: 2.5rem;
}

#practice-questions-page .quiz-question {
    font-size: 1.5rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    color: #0f172a;
}

.quiz-overline {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: #6366f1;
    margin-bottom: 0.5rem;
}

.quiz-progress {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.05);
}

.quiz-progress__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.quiz-badges {
    display: inline-flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.quiz-progress__bar {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.15);
    overflow: hidden;
}

.quiz-progress__bar div {
    height: 100%;
    background: linear-gradient(90deg, #a5b4fc, #6366f1);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.quiz-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
}

.quiz-pill--primary {
    background: rgba(99, 102, 241, 0.12);
    color: #4338ca;
}

.quiz-pill--warning {
    background: rgba(251, 191, 36, 0.18);
    color: #b45309;
}

.quiz-pill--success {
    background: rgba(16, 185, 129, 0.18);
    color: #065f46;
}

.quiz-pill--error {
    background: rgba(248, 113, 113, 0.2);
    color: #b91c1c;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.1rem 1.25rem;
    width: 100%;
    border-radius: 18px;
    border: 2px solid rgba(15, 23, 42, 0.1);
    background: #ffffff;
    font-weight: 600;
    color: #0f172a;
    transition: all 0.2s ease;
    text-align: left;
}

.quiz-option:not(.is-disabled):hover {
    border-color: #6366f1;
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(99, 102, 241, 0.18);
}

.quiz-option.is-disabled {
    cursor: default;
    opacity: 0.95;
}

.quiz-option.is-correct {
    border-color: #34d399;
    background: #ecfdf5;
    color: #065f46;
}

.quiz-option.is-incorrect {
    border-color: #f87171;
    background: #fef2f2;
    color: #991b1b;
}

.quiz-option__icon {
    width: 1.5rem;
    display: inline-flex;
    justify-content: center;
    color: inherit;
}

.quiz-feedback {
    border-radius: 20px;
    padding: 1.5rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #f8fafc;
    display: grid;
    gap: 1rem;
}

.quiz-feedback.is-correct {
    border-color: #34d399;
    background: #ecfdf5;
}

.quiz-feedback.is-incorrect {
    border-color: #fecaca;
    background: #fff5f5;
}

.quiz-feedback__answer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(99, 102, 241, 0.08);
    padding: 0.75rem 1rem;
    border-radius: 14px;
    font-weight: 600;
}

.quiz-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.quiz-controls__actions {
    display: flex;
    gap: 0.75rem;
}

.quiz-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #6366f1;
    border: none;
    border-radius: 999px;
    color: #ffffff;
    font-weight: 600;
    padding: 0.85rem 1.5rem;
    box-shadow: 0 12px 25px rgba(99, 102, 241, 0.35);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.quiz-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(99, 102, 241, 0.45);
}

.quiz-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.quiz-button--ghost {
    background: transparent;
    color: #475569;
    box-shadow: none;
    border: 1px solid rgba(71, 85, 105, 0.25);
}

.quiz-button--warning {
    background: #f59e0b;
    box-shadow: 0 12px 25px rgba(245, 158, 11, 0.35);
}

.quiz-button--success {
    background: #10b981;
    box-shadow: 0 12px 25px rgba(16, 185, 129, 0.35);
}

.quiz-loader__spinner {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 4px solid rgba(99, 102, 241, 0.15);
    border-top-color: #6366f1;
    margin: 0 auto 1.5rem;
    animation: quizSpin 1s linear infinite;
}

.quiz-loader__tip {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: #475569;
}

.quiz-results__meta {
    color: #475569;
    margin-bottom: 1.5rem;
}

.quiz-results__breakdown {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.quiz-results__item {
    border-radius: 16px;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
}

.quiz-results__item.is-correct {
    border-color: #34d399;
    background: #ecfdf5;
}

.quiz-results__item.is-incorrect {
    border-color: #f87171;
    background: #fef2f2;
}

.quiz-results__badge {
    font-weight: 700;
    color: #6366f1;
}

.quiz-results__actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.quiz-loader {
    max-width: 460px;
    margin: 0 auto;
}

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

[data-theme='dark'] #practice-questions-page .quiz-card,
[data-theme='dark'] #practice-questions-page .quiz-progress,
[data-theme='dark'] #practice-questions-page .quiz-results__item {
    background: #ffffff;
    color: #0f172a;
}

[data-theme='dark'] #practice-questions-page .quiz-button--ghost {
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.35);
}

[data-theme='dark'] #practice-questions-page .quiz-option {
    background: #ffffff;
    color: #0f172a;
}

/* Modal readability improvements */
.modal,
[class*='modal'],
.bg-white,
.bg-white\/70,
.bg-white\/80,
.bg-white\/90,
.bg-white\/95 {
    color: var(--text-primary) !important;
}

.modal h1,
.modal h2,
.modal h3,
.modal p,
.modal label,
.modal input,
.modal textarea,
.modal select,
[class*='modal'] h1,
[class*='modal'] h2,
[class*='modal'] h3,
[class*='modal'] p,
[class*='modal'] label,
[class*='modal'] input,
[class*='modal'] textarea,
[class*='modal'] select {
    color: var(--text-primary) !important;
}

/* Ensure all icons are visible */
i.fa,
i.fas,
i.far,
i.fab,
[class*='fa-'] {
    color: inherit !important;
}

/* Button text readability */
button:not(.bg-blue-600):not(.bg-blue-700):not(.bg-red-600):not(.bg-green-600):not(.bg-yellow-600) {
    color: var(--text-primary) !important;
}

button.bg-blue-600,
button.bg-blue-700,
button.bg-red-600,
button.bg-green-600,
button.bg-yellow-600 {
    color: #ffffff !important;
}

/* Input and form readability */
input,
textarea,
select {
    color: var(--text-primary) !important;
    background-color: var(--bg-card) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-light) !important;
    opacity: 0.7;
}

/* Fix white text on light backgrounds - ensure proper contrast */
.bg-white .text-white,
.bg-white\/70 .text-white,
.bg-white\/80 .text-white,
.bg-white\/90 .text-white,
.bg-white\/95 .text-white,
[class*='bg-white'] .text-white,
[style*='background: white'] .text-white,
[style*='background: rgba(255'] .text-white {
    color: var(--text-primary) !important;
}

/* Fix icons on light backgrounds */
.bg-white i,
.bg-white\/70 i,
.bg-white\/80 i,
.bg-white\/90 i,
.bg-white\/95 i,
[class*='bg-white'] i,
[style*='background: white'] i {
    color: var(--text-primary) !important;
}

/* Ensure modals have readable text */
.modal,
[class*='modal'],
[class*='backdrop-blur'] {
    color: var(--text-primary) !important;
}

.modal h1,
.modal h2,
.modal h3,
.modal p,
.modal label,
[class*='modal'] h1,
[class*='modal'] h2,
[class*='modal'] h3,
[class*='modal'] p,
[class*='modal'] label {
    color: var(--text-primary) !important;
}

/* Fix input text colors */
input,
textarea,
select {
    color: var(--text-primary) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-light) !important;
    opacity: 0.7;
}

/* Ensure all cards have readable text */
.card,
[class*='card'],
.bg-white\/70,
.bg-white\/80,
.bg-white\/90 {
    color: var(--text-primary) !important;
}

.card h1,
.card h2,
.card h3,
.card p,
[class*='card'] h1,
[class*='card'] h2,
[class*='card'] h3,
[class*='card'] p {
    color: var(--text-primary) !important;
}

/* Dark Mode Text Overrides - Ensure readability */
[data-theme='dark'] .text-gray-900,
[data-theme='dark'] .text-gray-800,
[data-theme='dark'] .text-gray-700 {
    color: var(--text-primary) !important;
}

[data-theme='dark'] .text-gray-600,
[data-theme='dark'] .text-gray-500 {
    color: var(--text-secondary) !important;
}

[data-theme='dark'] .bg-white {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

[data-theme='dark'] .bg-gray-50,
[data-theme='dark'] .bg-gray-100 {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

[data-theme='dark'] input,
[data-theme='dark'] textarea,
[data-theme='dark'] select {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme='dark'] input::placeholder,
[data-theme='dark'] textarea::placeholder {
    color: var(--text-light);
}

/* ═══════════════════════════════════════════════════════════════ */
/* GCSEMATE BRIGHT BLUE BUTTON OVERRIDE - Final Priority */
/* ═══════════════════════════════════════════════════════════════ */
button[class*='bg-blue'],
.bg-blue-600,
.bg-blue-700,
[class*='bg-blue-600'],
[class*='bg-blue-700'],
.btn-primary,
.btn-gradient,
button.bg-blue-600,
button.bg-blue-700 {
    background: #0ea5e9 !important;
    background-image: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: #ffffff !important;
}

button[class*='bg-blue']:hover,
.bg-blue-600:hover,
.bg-blue-700:hover,
[class*='bg-blue-600']:hover,
[class*='bg-blue-700']:hover,
.btn-primary:hover,
.btn-gradient:hover,
button.bg-blue-600:hover,
button.bg-blue-700:hover {
    background: #0284c7 !important;
    background-image: linear-gradient(135deg, #0284c7, #0369a1) !important;
    color: #ffffff !important;
}

button[class*='bg-blue'] *,
.bg-blue-600 *,
.bg-blue-700 *,
.btn-primary *,
.btn-gradient * {
    color: #ffffff !important;
}

button[class*='bg-blue'] i,
button[class*='bg-blue'] svg,
.bg-blue-600 i,
.bg-blue-600 svg,
.btn-primary i,
.btn-primary svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}