/* === student-portal/css/student-portal-base.css === */
/* student-portal-base.css - Root variables, resets, body, container, loading, utilities */

        /* Hide header */
        #header {
            display: none !important;
        }

        /* Core Styles */
 :root {
    /* Colors */
    --primary-color: #ff7c00;
    --primary-hover: #ff9a44;
    --background-dark: #2d2929;
    --text-light: rgba(255, 255, 255, 0.9);
    --text-dim: rgba(255, 255, 255, 0.7);

    /* Spacing scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Typography */
    --font-sm: 0.85rem;
    --font-base: 1rem;
    --font-lg: 1.25rem;
    --font-xl: 1.5rem;

    /* Surfaces */
    --surface-glass: rgba(255, 255, 255, 0.1);
    --surface-hover: rgba(255, 255, 255, 0.15);
    --surface-active: rgba(255, 124, 0, 0.15);
    --border-subtle: rgba(255, 255, 255, 0.2);
    --border-focus: rgba(255, 124, 0, 0.6);

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 20px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 15px rgba(255, 124, 0, 0.3);

    /* Layout */
    --padding-mobile: 16px;
    --padding-desktop: 32px;
    --z-modal: 2000;
    --z-loading: 1999;
    --z-header: 100;
    --z-background: -1;
       }

/* Global keyboard focus ring */
:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Form inputs keep their own focus style */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(255, 124, 0, 0.25);
}

 .background-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: var(--z-background);
            pointer-events: none;
            /* animation removed — too distracting */
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1002%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(45%2c 41%2c 41%2c 1)'%3e%3c/rect%3e%3cg transform='translate(0%2c 0)' stroke-linecap='round' stroke='url(%26quot%3b%23SvgjsRadialGradient1003%26quot%3b)'%3e%3cpath d='M150 255.09 L150 304.9' stroke-width='15'%3e%3c/path%3e%3cpath d='M170 131.96 L170 428.04' stroke-width='15'%3e%3c/path%3e%3cpath d='M190 114.42 L190 445.58' stroke-width='15'%3e%3c/path%3e%3cpath d='M210 114.44 L210 445.56' stroke-width='15'%3e%3c/path%3e%3cpath d='M230 213.51 L230 346.49' stroke-width='15'%3e%3c/path%3e%3cpath d='M250 226.82 L250 333.18' stroke-width='15'%3e%3c/path%3e%3cpath d='M270 242.19 L270 317.81' stroke-width='15'%3e%3c/path%3e%3cpath d='M290 132.03 L290 427.97' stroke-width='15'%3e%3c/path%3e%3cpath d='M310 75.97 L310 484.03' stroke-width='15'%3e%3c/path%3e%3cpath d='M330 140.17 L330 419.83' stroke-width='15'%3e%3c/path%3e%3cpath d='M350 79.03 L350 480.97' stroke-width='15'%3e%3c/path%3e%3cpath d='M370 238.71 L370 321.29' stroke-width='15'%3e%3c/path%3e%3cpath d='M390 63.29 L390 496.71' stroke-width='15'%3e%3c/path%3e%3cpath d='M410 124.6 L410 435.4' stroke-width='15'%3e%3c/path%3e%3cpath d='M430 104.31 L430 455.69' stroke-width='15'%3e%3c/path%3e%3cpath d='M450 197.12 L450 362.88' stroke-width='15'%3e%3c/path%3e%3cpath d='M470 240.84 L470 319.16' stroke-width='15'%3e%3c/path%3e%3cpath d='M490 70.62 L490 489.38' stroke-width='15'%3e%3c/path%3e%3cpath d='M510 197.34 L510 362.66' stroke-width='15'%3e%3c/path%3e%3cpath d='M530 185.75 L530 374.25' stroke-width='15'%3e%3c/path%3e%3cpath d='M550 233.06 L550 326.94' stroke-width='15'%3e%3c/path%3e%3cpath d='M570 97.81 L570 462.19' stroke-width='15'%3e%3c/path%3e%3cpath d='M590 95.45 L590 464.55' stroke-width='15'%3e%3c/path%3e%3cpath d='M610 96.88 L610 463.12' stroke-width='15'%3e%3c/path%3e%3cpath d='M630 177.42 L630 382.58' stroke-width='15'%3e%3c/path%3e%3cpath d='M650 105.92 L650 454.08' stroke-width='15'%3e%3c/path%3e%3cpath d='M670 186.93 L670 373.07' stroke-width='15'%3e%3c/path%3e%3cpath d='M690 256.46 L690 303.54' stroke-width='15'%3e%3c/path%3e%3cpath d='M710 93.61 L710 466.39' stroke-width='15'%3e%3c/path%3e%3cpath d='M730 110.04 L730 449.96' stroke-width='15'%3e%3c/path%3e%3cpath d='M750 196.95 L750 363.05' stroke-width='15'%3e%3c/path%3e%3cpath d='M770 178.28 L770 381.72' stroke-width='15'%3e%3c/path%3e%3cpath d='M790 218.09 L790 341.92' stroke-width='15'%3e%3c/path%3e%3cpath d='M810 74.78 L810 485.22' stroke-width='15'%3e%3c/path%3e%3cpath d='M830 83.28 L830 476.73' stroke-width='15'%3e%3c/path%3e%3cpath d='M850 183.53 L850 376.48' stroke-width='15'%3e%3c/path%3e%3cpath d='M870 249.84 L870 310.17' stroke-width='15'%3e%3c/path%3e%3cpath d='M890 123.81 L890 436.19' stroke-width='15'%3e%3c/path%3e%3cpath d='M910 183.99 L910 376.01' stroke-width='15'%3e%3c/path%3e%3cpath d='M930 66.54 L930 493.46' stroke-width='15'%3e%3c/path%3e%3cpath d='M950 236.62 L950 323.38' stroke-width='15'%3e%3c/path%3e%3cpath d='M970 109.81 L970 450.19' stroke-width='15'%3e%3c/path%3e%3cpath d='M990 133.38 L990 426.63' stroke-width='15'%3e%3c/path%3e%3cpath d='M1010 208.34 L1010 351.65' stroke-width='15'%3e%3c/path%3e%3cpath d='M1030 218.09 L1030 341.91' stroke-width='15'%3e%3c/path%3e%3cpath d='M1050 248.28 L1050 311.71' stroke-width='15'%3e%3c/path%3e%3cpath d='M1070 191.13 L1070 368.87' stroke-width='15'%3e%3c/path%3e%3cpath d='M1090 141.13 L1090 418.88' stroke-width='15'%3e%3c/path%3e%3cpath d='M1110 249.12 L1110 310.88' stroke-width='15'%3e%3c/path%3e%3cpath d='M1130 84.91 L1130 475.09' stroke-width='15'%3e%3c/path%3e%3cpath d='M1150 211.07 L1150 348.93' stroke-width='15'%3e%3c/path%3e%3cpath d='M1170 246.77 L1170 313.23' stroke-width='15'%3e%3c/path%3e%3cpath d='M1190 158.69 L1190 401.31' stroke-width='15'%3e%3c/path%3e%3cpath d='M1210 218.26 L1210 341.74' stroke-width='15'%3e%3c/path%3e%3cpath d='M1230 113.88 L1230 446.12' stroke-width='15'%3e%3c/path%3e%3cpath d='M1250 187.94 L1250 372.06' stroke-width='15'%3e%3c/path%3e%3cpath d='M1270 185.73 L1270 374.27' stroke-width='15'%3e%3c/path%3e%3cpath d='M1290 180.03 L1290 379.97' stroke-width='15'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1002'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cradialGradient cx='720' cy='280' r='625.75' gradientUnits='userSpaceOnUse' id='SvgjsRadialGradient1003'%3e%3cstop stop-color='rgba(0%2c 0%2c 0%2c 1)' offset='0.25'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 124%2c 0%2c 1)' offset='1'%3e%3c/stop%3e%3c/radialGradient%3e%3c/defs%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
/* Reset box-sizing */
*, *::before, *::after {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--background-dark);
    color: var(--text-light);
    min-height: 100vh;
    font-size: 16px;
    line-height: 1.5;
}

html {
    overflow-x: hidden; /* Prevent horizontal scrollbar */
}
body {
    overflow-x: hidden;
    overflow-y: auto;
}

        /* Container Structure */
        .container {
              background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin: 0 auto;
            width: 100%;
        }
.form-group {
    margin-bottom: 1rem;
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
}

textarea.form-input {
    min-height: 100px;
    resize: vertical;
}

.button.primary {
    width: 100%;
    padding: 0.75rem;
    background: #ff7c00;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.button.primary:hover {
    background: #ff9a44;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 124, 0, 0.4);
}

.button.primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 124, 0, 0.3);
}

/* Success/Info Messages */
        .success-message {
            padding: 1rem;
            background: rgba(52, 199, 89, 0.2);
            color: #34c759;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
            text-align: center;
        }

    .no-history {
        text-align: center;
        color: rgba(255, 255, 255, 0.6);
        padding: 20px;
        font-style: italic;
    }
    .no-requirements,
.no-milestones {
    text-align: center;
    padding: 32px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}
    .no-practice {
        text-align: center;
        padding: 32px;
        color: rgba(255, 255, 255, 0.6);
    }

        /* Loading and Error States */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: var(--primary-color);
            animation: spin 1s linear infinite;
        }

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

        .error-message {
            padding: 1rem;
            background: rgba(255, 59, 48, 0.2);
            color: #ff3b30;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
            text-align: center;
        }

.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: rgba(255, 255, 255, 0.6);
}

.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
    opacity: 0.4;
}

.empty-state-title {
    font-size: var(--font-lg);
    color: var(--text-light);
    margin-bottom: var(--space-sm);
    font-style: normal;
}

.empty-state-message {
    font-size: var(--font-sm);
    color: var(--text-dim);
    margin-bottom: var(--space-lg);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.empty-state-action {
    display: inline-block;
    padding: 10px 24px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: var(--font-sm);
    transition: all var(--transition-base);
    text-decoration: none;
}

.empty-state-action:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 124, 0, 0.3);
}

/* Inline Field Validation */
.field-error {
    color: #ff6b6b;
    font-size: 0.8rem;
    margin-top: 4px;
    display: none;
}
.field-error.visible { display: block; }
.form-group.has-error .form-input {
    border-color: #ff6b6b;
}

/* Error Message */
.error-message {
    background: rgba(244, 67, 54, 0.2);
    color: #f44336;
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
    text-align: center;
}

footer {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    position: relative;
    z-index: 10;
    visibility: hidden !important;
}

/* ============================================= */
/* Mobile Optimization: 480px and Below          */
/* ============================================= */
@media (max-width: 480px) {
    /* Reduce padding for more content space */
    .container,
    .student-header,
    .calendar-container,
    .section-container {
        padding: 16px !important;
    }

    /* Ensure touch targets meet 44x44px minimum */
    .button,
    .tab-button,
    .nav-button {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }
}

@media (max-width: 360px) {
    /* Additional 360px specific fixes */
    .container,
    .student-header {
        padding: 12px !important;
    }
}

/* ============================================= */
/* Landscape Orientation Handling               */
/* ============================================= */
@media (max-height: 600px) and (orientation: landscape) {
    /* Modals in landscape need to be scrollable */
    .modal {
        padding: 20px !important;
        overflow-y: auto !important;
    }

    .modal-content {
        width: 80% !important;
        overflow: visible !important;
    }

    /* Reduce vertical padding and margins */
    .container,
    .section-container {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Compact headers in landscape */
    .student-header {
        padding: 12px 16px;
    }

    /* Reduce profile photo size in landscape */
    .profile-photo-container {
        width: 80px !important;
        height: 80px !important;
    }

    /* Compact timer display */
    .timer-display {
        font-size: 2rem;
    }

    /* Reduce vertical spacing */
    h1, h2, h3 {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}

/* ==============================
   Fade-in Animation
   ============================== */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

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

/* ==============================
   Utility Classes
   ============================== */
.text-dim {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.6);
}

/* ==============================
   Loading Pulse (skeleton text)
   ============================== */
.loading-pulse {
    animation: loadingPulse 1.5s ease-in-out infinite;
}

@keyframes loadingPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* ==============================
   Skeleton Loaders
   ============================== */
.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

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

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    width: 80%;
}

.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 60%; }

.skeleton-card {
    height: 80px;
    margin-bottom: var(--space-md);
}

.skeleton-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* ==============================
   Scroll-triggered Animations
   ============================== */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 124, 0, 0.2); }
    50% { box-shadow: 0 0 20px rgba(255, 124, 0, 0.45); }
}

@keyframes numberPop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

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

/* ==============================
   Section Container & Header
   ============================== */
.section-container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 32px;
    animation: slideUp 0.5s ease-out both;
}
.section-header {
    color: white;
    font-size: 1.25rem;
    position: relative;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-light);
}
.section-header h3 {
    margin: 0;
    font-size: 1.5rem;
}

/* ==============================
   Form Row
   ============================== */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ==============================
   iPhone 12 Pro Optimizations (390px)
   ============================== */
@media screen and (max-width: 390px) {
    /* Login Page Layout */
    #loginPage {
        flex-direction: column;
        height: 100vh;
        padding: 20px;
        overflow-y: auto;
    }

    .branding-section {
        padding: 20px 15px;
        margin-top: 20px;
    }

    .branding-section h1 {
        font-size: 28px;
        margin-bottom: 10px;
        text-align: center;
    }

    .tag-line {
        font-size: 16px;
        margin: 10px 0;
        text-align: center;
    }

    .features {
        margin-top: 20px;
    }

    .feature-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    /* Login Cards Layout */
    .login-section .feature-item {
        background: rgba(45, 41, 41, 0.95);
        border-radius: 12px;
        padding: 16px;
        margin: 8px 0;
        width: 100%;
    }
    /* Login Page Components */
    .feature-item {
        padding: 16px;
        margin: 10px 0;
        background: rgba(45, 41, 41, 0.95);
        border-radius: 12px;
        min-height: 80px;
    }
        .feature-icon {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }
    .login-container {
        padding: 15px;
        width: 100%;
    }

    .input-group {
        margin-bottom: 15px;
    }

    .input-group input {
        height: 44px;
        font-size: 16px;
        padding: 10px;
    }

    .button {
        height: 44px;
        font-size: 16px;
    }

    /* Student Portal Layout */
    #studentPortal {
        padding: 0 12px;
        padding-bottom: 40px;
    }

    .container {
        padding: 15px;
        margin: 10px 0;
    }

    /* Student Header */
    .student-header {
        padding: 15px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .profile-photo-container {
        width: 100px;
        height: 100px;
        margin: 0 auto 15px;
        border-radius: 8px;
        overflow: hidden;
    }

    /* Welcome Section */
    .student-name {
        font-size: 24px;
        text-align: center;
        background: linear-gradient(45deg, #ff7c00, #ff9a44);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin: 10px 0;
    }
    /* Student Profile Card */
    .student-info-card {
        background: rgba(45, 41, 41, 0.95);
        border-radius: 12px;
        padding: 20px;
        margin: 10px 0;
    }
    .student-details {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 8px;
        margin: 16px 0;
        font-size: 14px;
    }
    .detail-row {
        justify-content: center;
        flex-direction: inherit;
    }
    /* Stats Container */
    .stats-container {
        grid-template-columns: 1fr;
        gap: 15px;
        margin: 15px 0;
    }
    .welcome-text {
        font-size: 24px;
        color: var(--primary-color);
        text-align: center;
        margin: 8px 0;
    }
    /* Progress Stats */
    .progress-stats {
        display: grid;
        gap: 16px;
        margin: 16px 0;
    }
    .stat-box {
        background: rgba(30, 30, 30, 0.95);
        padding: 16px;
        border-radius: 8px;
        text-align: center;
    }
    .stat-value {
        font-size: 32px;
        color: var(--primary-color);
    }
    .stat-card {
        padding: 15px;
    }

    .stat-card h3 {
        font-size: 14px;
    }

    .stat-value {
        font-size: 24px;
    }
    /* Level & Requirements */
    .current-level,
    .level-requirements {
        padding: 15px;
        margin: 10px 0;
        background: rgba(30, 30, 30, 0.95);
        border-radius: 8px;
    }

    .section-title {
        font-size: 18px;
        margin-bottom: 16px;
        text-transform: uppercase;
    }
    /* Class Management */
    .classes-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .class-entry {
        padding: 15px;
    }

    .class-name {
        font-size: 16px;
    }

    /* Calendar Section */
    .class-calendar-section {
        padding: 15px;
        margin: 15px 0;
        overflow: hidden;
    }

    #calendar {
        min-height: 400px;
    }

    .fc .fc-toolbar {
        flex-direction: column;
        gap: 10px;
    }

    .fc .fc-toolbar-title {
        font-size: 18px;
    }

    .fc-header-toolbar {
        padding: 10px !important;
    }

    .fc-button {
        padding: 6px 12px !important;
    }

    /* Practice Section */
    .practice-log-section {
        padding: 15px;
    }

    .practice-log-form {
        gap: 15px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-input {
        height: 44px;
        font-size: 16px;
    }

    textarea.form-input {
        height: 100px;
    }

    /* Skills Heatmap */
    .skill-heatmap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 15px;
        margin: 10px 0;
    }
    .heatmap-inner {
        min-width: 600px;
        padding: 0 16px;
    }
    .heatmap-table {
        min-width: 500px;
    }
    .heatmap-cell {
        padding: 12px 8px;
        font-size: 13px;
        text-align: center;
        min-height: 60px;
    }
    /* Progress Chart */
    .chart-container {
        height: 200px;
        margin: 15px 0;
        padding: 15px;
        background: rgba(45, 41, 41, 0.95);
        border-radius: 12px;
    }
    /* Progress Chart */
    .progress-chart {
        background: rgba(45, 41, 41, 0.95);
        border-radius: 12px;
        padding: 16px;
        margin: 16px 0;
        height: 200px;
    }
    .chart-title {
        font-size: 16px;
        margin-bottom: 12px;
    }
    /* Progress Values */
    .progress-value {
        font-size: 36px;
        color: var(--primary-color);
        text-align: center;
        margin: 10px 0;
    }
    /* Progress Section Adjustments */
    .progress-section {
        margin: 15px 0;
        padding: 20px;
        background: rgba(45, 41, 41, 0.95);
        border-radius: 12px;
    }
    /* Progress Photos */
    .photo-slider-section {
        margin: 15px 0;
        padding: 15px;
        background: rgba(45, 41, 41, 0.95);
        border-radius: 12px;
    }
    /* Photo Progress Section */
    .progress-photos {
        background: rgba(45, 41, 41, 0.95);
        border-radius: 12px;
        padding: 16px;
        margin: 16px 0;
    }
    .slider-wrapper {
        height: 200px;
        border-radius: 8px;
        overflow: hidden;
    }
    .photo-card {
        aspect-ratio: 16/9;
        border-radius: 8px;
        overflow: hidden;
        margin: 12px 0;
    }
    /* Achievement Filters */
    .category-button {
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 14px;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: white;
    }
    .category-button.active {
        background: var(--primary-color);
        border-color: var(--primary-color);
    }
    .photo-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
    }
    /* Input & Button Sizing */
    input,
    button,
    .button {
        height: 44px;
        font-size: 16px;
        border-radius: 8px;
    }
    .nav-button {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        color: white;
    }
    /* Improved Touch Targets */
    .button,
    .nav-button,
    .stat-box,
    .heatmap-cell {
        min-height: 44px;
        touch-action: manipulation;
    }
    /* Modals */
    .modal-content {
        width: 95% !important;
        margin: 10px auto !important;
        padding: 15px !important;
        min-width: auto !important;
    }

    .modal-title {
        font-size: 20px;
    }

    /* Photo Gallery */
    .photo-slider-section {
        padding: 15px;
    }

    .slider-wrapper {
        height: 300px;
    }

    .slider-nav {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    /* Loading State */
    .loading-spinner {
        width: 40px;
        height: 40px;
    }

    /* Scrolling Improvements */
    .skill-heatmap::-webkit-scrollbar {
        height: 4px;
    }

    .skill-heatmap::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 2px;
    }

    /* Safe Area Spacing */
    .container {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
        padding-bottom: calc(env(safe-area-inset-bottom) + 60px);
    }
    /* Chart Legend */
    .chart-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 10px;
        font-size: 12px;
    }
    /* Skill Progress Headers */
    .skill-progress-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }
    .skill-progress-title {
        font-size: 18px;
        color: var(--primary-color);
    }
    /* Fix for iPhone Notch */
    #loginPage {
        padding-top: max(20px, env(safe-area-inset-top));
    }
}

/* ==============================
   Reduced Motion (accessibility)
   ============================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* === student-portal/css/student-portal-auth.css === */
/* student-portal-auth.css - Login page, branding, password forms */

/* ==============================
   Form Elements (shared)
   ============================== */
.input-group {
    margin-bottom: 1.5rem;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 500;
}

.input-group input {
    width: 100%;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.input-group input:focus {
    outline: none;
    border-color: #ff7c00;
    box-shadow: 0 0 0 3px rgba(255, 124, 0, 0.15);
}

.button {
    width: 100%;
    padding: 0.85rem;
    background: linear-gradient(135deg, #ff7c00, #e06800);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button:hover {
    background: linear-gradient(135deg, #ff9a44, #ff7c00);
    box-shadow: 0 4px 16px rgba(255, 124, 0, 0.3);
    transform: translateY(-1px);
}

.button:active {
    transform: translateY(0);
}

/* ==============================
   Inline Validation
   ============================== */
.input-group.has-error input {
    border-color: #ff3b30;
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.15);
}

.field-error {
    font-size: 0.8rem;
    color: #ff3b30;
    margin-top: 6px;
    display: none;
}

.field-error.visible {
    display: block;
}

/* ==============================
   Caps Lock Warning
   ============================== */
.caps-lock-warning {
    display: none;
    font-size: 0.8rem;
    color: #ff9500;
    margin-top: 6px;
    align-items: center;
    gap: 6px;
}

.caps-lock-warning.visible {
    display: flex;
}

/* ==============================
   Button Loading State
   ============================== */
.button.loading {
    pointer-events: none;
    opacity: 0.8;
}

.button .btn-spinner i {
    margin-right: 6px;
}

/* ==============================
   Login/Reset Transition
   ============================== */
.login-container {
    animation: fadeSlideIn 0.3s ease;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

        /* Password Change Modal */
        #passwordChangeModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* Add this to your CSS */
#passwordChangeModal.force-visible {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 2147483647 !important; /* Max possible z-index */
  background: rgba(0, 0, 0, 0.9) !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Password field container styling */
#passwordChangeModal .input-group {
    position: relative;
    margin-bottom: 15px;
}
#passwordChangeModal .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #333;
    border: 2px solid #ff7c00;
    border-radius: 8px;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    z-index: 100000;
}

#passwordChangeModal.active {
    display: block;
    opacity: 1;
    visibility: visible;
}

#passwordChangeModal .modal-content.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
    z-index: 10000 !important;
    background-color: rgba(40, 40, 40, 0.95) !important; /* Darker background */
    box-shadow: 0 0 20px rgba(255, 124, 0, 0.4); /* Orange glow to match your theme */
}

/* ==============================
   Login Page Layout (Centered)
   ============================== */
#loginPage {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height — accounts for iOS Safari toolbar */
    z-index: 0 !important;
    background: #0d0d0d;
    display: flex;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.login-page-inner {
    width: 100%;
    max-width: 560px;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto 0; /* Vertical center when room, sticks to top when overflowing */
}

#studentPortal {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(16px, 3vw, 48px);
    padding-bottom: 50px;
    min-height: 100vh;
    height: auto;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    overflow-x: hidden;
}
#studentPortal.visible {
    display: block;
    opacity: 1;
    visibility: visible;
}

#loginPage.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ==============================
   Branding (Logo + Title)
   ============================== */
.branding-section {
    text-align: center;
    color: #fff;
    margin-bottom: 2rem;
}

.login-logo {
    width: 120px;
    height: auto;
    margin-bottom: 1.25rem;
    border-radius: 16px;
    opacity: 0.95;
}

.branding-section h1 {
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
    background: linear-gradient(135deg, #ff7c00, #ff9a44);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}

.tag-line {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.tag-container {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 13px;
    margin-right: 8px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.1);
}
.tag {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.1);
}
.tag-wrapper {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

/* ==============================
   Login Section + Card
   ============================== */
.login-section {
    width: 100%;
    color: #fff;
    margin-bottom: 2.5rem;
}

.login-container {
    position: relative;
    background: rgba(30, 30, 30, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 124, 0, 0.15);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 60px rgba(255, 124, 0, 0.04);
    padding: 2.5rem 2rem;
    border-radius: 16px;
    width: 100%;
    margin: 0 auto;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-sizing: border-box;
}

#resetContainer {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
#resetContainer.visible {
    opacity: 1;
    visibility: visible;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(135deg, #ff7c00, #ff9a44);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.4rem;
}

.login-header p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    margin: 0;
}

.contact-link {
    color: #ff7c00;
    text-decoration: none;
    transition: color 0.2s;
}

.contact-link:hover {
    color: #ff9a44;
}

.help-text {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    font-size: 0.85rem;
}

.help-text p {
    color: rgba(255, 255, 255, 0.45);
    margin: 6px 0;
}

.input-helper-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 6px;
}

.button.secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 10px;
    width: 100%;
    transition: all 0.2s;
    font-weight: 500;
}

.button.secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 124, 0, 0.3);
    box-shadow: none;
    transform: none;
}

/* ==============================
   Feature Cards (3x2 grid)
   ============================== */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 124, 0, 0.15);
}

.feature-item h3 {
    margin: 0 0 4px 0;
    font-size: 0.85rem;
    color: var(--text-light);
    font-weight: 600;
}

.feature-item p {
    margin: 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.4;
}

.feature-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    margin-bottom: 10px;
    margin-right: 0;
    background: rgba(255, 124, 0, 0.1);
    color: #ff7c00;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* ================================================== */
/* Mobile Login Page Adjustments (Combined & Refined) */
/* Targeting screens up to 768px wide             */
/* ================================================== */
html, body {
    height: auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
    overflow-y: auto;   /* Allow vertical scroll */
    -webkit-overflow-scrolling: touch;
}

/* ============================================= */
/* == FINAL & CORRECTED PASSWORD ICON CSS FIX == */
/* ============================================= */

/* 1. Make the new wrapper our positioning anchor. This isolates the input and icon. */
#loginContainer .password-wrapper {
    position: relative;
    width: 100%; /* The wrapper takes the full width */
}

/* 2. Style the input that is INSIDE our new wrapper. */
/* This rule is more specific than your general ".input-group input" rule. */
#loginContainer .password-wrapper input {
    width: 100%; /* The input fills its wrapper */
    box-sizing: border-box; /* Includes padding in the width calculation */

    /* CRITICAL: This adds space on the right for the icon to sit. */
    padding-right: 45px !important;
}

/* 3. Position the icon button absolutely INSIDE the wrapper. */
#loginContainer .password-wrapper .password-toggle {
    position: absolute;
    top: 50%;
    right: 12px; /* Distance from the right edge */
    transform: translateY(-50%); /* This perfectly centers the icon vertically */

    /* Style the button to be transparent and functional */
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2rem;
    padding: 0;
    width: 30px; /* Clickable area */
    height: 30px; /* Clickable area */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2; /* Ensure it's on top of the input field */
    transition: color 0.2s ease;
}

#loginContainer .password-wrapper .password-toggle:hover {
    color: var(--primary-color);
}

/* ==============================
   Mobile Login Adjustments
   ============================== */
@media (max-width: 768px) {
    .login-page-inner {
        padding: 32px 20px;
        max-width: 100%;
    }

    .login-logo {
        width: 90px;
    }

    .branding-section h1 {
        font-size: 1.6rem;
    }

    .tag-line {
        font-size: 0.95rem;
    }

    .login-container {
        padding: 2rem 1.5rem;
    }

    .features {
        display: none;
    }

    .login-section {
        margin-bottom: 1.5rem;
    }

    .input-group input,
    .button {
        min-height: 48px;
        padding: 12px 15px;
        font-size: 1rem;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .login-page-inner {
        padding: 24px 16px;
    }

    .login-logo {
        width: 80px;
    }

    .branding-section h1 {
        font-size: 1.4rem;
    }

    .features {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .feature-item p {
        display: none;
    }

    .feature-item {
        padding: 14px 10px;
    }
}

@media (max-width: 360px) {
    .login-page-inner {
        padding: 20px 12px;
    }

    .login-container {
        padding: 1.5rem 1.2rem;
    }

    .features {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==============================
   Password Change Modal
   ============================== */
#passwordChangeModal h2 {
    color: #ff7c00;
    font-size: 24px;
    margin-bottom: 16px;
}

#passwordChangeModal p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 24px;
}

#passwordChangeModal .input-group {
    margin-bottom: 16px;
}

#passwordChangeModal input {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px;
    border-radius: 8px;
    color: white;
}

#passwordChangeModal button {
    width: 100%;
    background: #ff7c00;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

#passwordChangeModal button:hover {
    background: #ff9a44;
}

/* ==============================
   Temp Password & Instructions
   ============================== */
.temp-password {
    font-family: monospace;
    font-size: 24px;
    color: #ff7c00;
    background: rgba(0, 0, 0, 0.2);
    padding: 16px;
    border-radius: 8px;
    text-align: center;
    margin: 24px 0;
}

.next-steps {
    margin: 24px 0;
}

.next-steps ol {
    padding-left: 24px;
}

.next-steps li {
    color: rgba(255, 255, 255, 0.9);
    margin: 12px 0;
}

.instructions {
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
}

.instructions ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.instructions li {
    margin: 0.5rem 0;
    color: rgba(255, 255, 255, 0.8);
}

/* ==============================
   Landscape Login Overrides
   ============================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .login-page-inner {
        padding: 12px 16px;
        max-width: 480px;
    }

    .login-logo {
        width: 50px;
        margin-bottom: 6px;
    }

    .branding-section {
        margin-bottom: 0.75rem;
    }

    .branding-section h1 {
        font-size: 1.3rem;
    }

    .tag-line {
        display: none;
    }

    .features {
        display: none;
    }

    .login-container {
        padding: 1.25rem;
    }

    .login-header {
        margin-bottom: 1rem;
    }

    .input-group {
        margin-bottom: 0.75rem;
    }
}


/* === student-portal/css/student-portal-header.css === */
/* student-portal-header.css - Student header card, profile photo, stats */

/* ============================== */
/* Student Header Grid Layout     */
/* ============================== */
.student-header {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin: 32px 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    align-items: center;
    position: relative;
}

/* This targets the div containing the profile photo */
.profile-section {
    grid-column: 1 / 2;
}

/* This targets the div containing the welcome text and details */
.student-info {
    grid-column: 2 / 3;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 2rem;
}

/* This targets the div containing the progress stats */
.progress-section {
    grid-column: 3 / 4;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 250px;
    align-items: flex-end;
}

/* ============================== */
/* Stats Container & Cards        */
/* ============================== */
.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    animation: scaleIn 0.4s ease-out both;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.12s; }
.stat-card:nth-child(3) { animation-delay: 0.19s; }
.stat-card:nth-child(4) { animation-delay: 0.26s; }

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 124, 0, 0.15);
    border-color: rgba(255, 124, 0, 0.35);
}

.stat-card h3 {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9em;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-card .stat-value {
    font-size: 2.5em;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 10px rgba(255, 124, 0, 0.3);
    font-weight: bold;
    animation: numberPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

/* ============================== */
/* Profile Photo Section          */
/* ============================== */
.profile-photo-container {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
}

.profile-photo-container:hover {
    box-shadow: 0 0 20px rgba(255, 124, 0, 0.3), 0 8px 25px rgba(0, 0, 0, 0.3);
}

.profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.photo-upload-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.profile-photo-container:hover .photo-upload-overlay {
    opacity: 1;
}

.upload-button {
    background: none;
    border: 2px solid white;
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.upload-button:hover {
    background: white;
    color: black;
}

.upload-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(0, 0, 0, 0.5);
}

.upload-progress-bar {
    height: 100%;
    background: #FF6B00;
    width: 0%;
    transition: width 0.3s ease;
}

/* ============================== */
/* Student Info Section            */
/* ============================== */
.student-name {
    font-size: 2.5em;
    background: linear-gradient(45deg, #ff7c00, #ff9a44);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    font-weight: bold;
    text-transform: uppercase;
}

.student-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
}

.detail-row i {
    color: rgba(255, 255, 255, 0.6);
    width: 20px;
}

.detail-label {
    color: rgba(255, 255, 255, 0.6);
}

.separator {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 0.25rem;
}

/* ============================== */
/* Progress Cards                  */
/* ============================== */
.progress-section .progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
    width: 100%;
}

.progress-section .progress {
    height: 100%;
    background: #ff7c00;
    transition: width 0.3s ease;
}

.progress-section .progress-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.progress-card,
.lessons-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1rem;
}

.overall-progress-label,
.lessons-label,
.payment-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.overall-progress-value,
.lessons-value {
    font-size: 2rem;
    font-weight: bold;
    color: #ff7c00;
}

.payment-date {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

/* ============================== */
/* Student Goals                   */
/* ============================== */
.student-goals-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 32px 0;
}

.student-goals-container .stat-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 24px;
    position: relative;
    transition: all 0.3s ease;
}

.student-goals-container .stat-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* ==============================
   Stat Content
   ============================== */
.stat-content {
    position: relative;
    min-height: 100px;
}

/* ==============================
   Announcement Bar Hide
   ============================== */
.header-announcement-bar-wrapper {
    visibility: hidden !important;
}

/* ==============================
   Status Badges
   ============================== */
.status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.9em;
    text-transform: capitalize;
}
.status-active, .status-flex {
    background-color: rgba(52, 199, 89, 0.2);
    color: #34c759;
}
.status-paused, .status-past_due, .status-pending {
    background-color: rgba(255, 149, 0, 0.2);
    color: #ff9500;
}
.status-inactive, .status-archived {
    background-color: rgba(255, 59, 48, 0.2);
    color: #ff3b30;
}
.status-default {
    background-color: rgba(142, 142, 147, 0.2);
    color: #8e8e93;
}

/* ============================== */
/* Responsive: Header              */
/* ============================== */
@media (max-width: 1024px) {
    .student-header {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 24px;
    }

    .profile-section,
    .student-info,
    .progress-section {
        grid-column: 1 / -1;
        text-align: center;
    }

    .profile-section {
        display: flex;
        justify-content: center;
    }

    .student-info {
        padding-right: 0;
        align-items: center;
    }

    .progress-section {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        gap: 1rem;
        width: 100%;
        align-items: stretch;
        min-width: auto;
    }

    .detail-row {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .student-header {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 24px;
    }

    .stats-container {
        grid-template-columns: 1fr;
    }

    .progress-section {
        flex-direction: column;
    }

    .progress-card,
    .lessons-card {
        width: 100%;
        max-width: 400px;
    }

    .profile-section {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .separator {
        display: none;
    }

    .detail-row {
        gap: 0.75rem;
    }

    .student-goals-container {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .student-header {
        padding: 15px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }

    .profile-photo-container {
        width: 100px;
        height: 100px;
        margin: 0 auto 15px;
        border-radius: 8px;
        overflow: hidden;
    }

    .student-name {
        font-size: 24px;
        text-align: center;
        margin: 10px 0;
    }

    .student-details {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 8px;
        margin: 16px 0;
        font-size: 14px;
    }

    .detail-row {
        flex-direction: column;
        gap: 4px;
    }

    .stats-container {
        grid-template-columns: 1fr;
        gap: 15px;
        margin: 15px 0;
    }

    .stat-card {
        padding: 15px;
    }

    .stat-card h3 {
        font-size: 14px;
    }

    .progress-section {
        margin: 15px 0;
        padding: 20px;
        background: rgba(45, 41, 41, 0.95);
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .student-header {
        padding: 16px;
        gap: 1rem;
    }

    .student-name {
        font-size: 1.8rem;
    }

    .profile-photo-container {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 360px) {
    .container,
    .student-header {
        padding: 12px !important;
    }

    .student-name {
        font-size: 1.5em;
    }
}

/* ============================== */
/* Quick Actions Row              */
/* ============================== */
.quick-actions-row {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.quick-action-btn {
    flex: 1;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 18px;
    background: rgba(255, 124, 0, 0.12);
    border: 1px solid rgba(255, 124, 0, 0.25);
    border-radius: 12px;
    color: #ff9a44;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.quick-action-btn:hover {
    background: rgba(255, 124, 0, 0.22);
    border-color: rgba(255, 124, 0, 0.45);
    transform: translateY(-1px);
}

.quick-action-btn i {
    font-size: 1.1rem;
}

.quick-action-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #ff3b30;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.quick-action-badge.hidden {
    display: none;
}

/* ============================== */
/* Dashboard Cards Row            */
/* ============================== */
.dashboard-cards-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.dashboard-card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.2s ease;
}

.dashboard-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.dashboard-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 124, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ff7c00;
    font-size: 1.1rem;
}

.dashboard-card-body {
    flex: 1;
    min-width: 0;
}

.dashboard-card-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 4px 0;
}

.dashboard-card-value {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
    font-weight: 600;
}

.dashboard-card-value .value-large {
    font-size: 1.6rem;
    font-weight: 700;
    color: #ff7c00;
}

.dashboard-card-value .value-unit {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 2px;
}

.dashboard-card-value .value-sub {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.dashboard-card-value .next-class-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-card-value .next-class-time {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    margin-top: 2px;
}

/* Clickable dashboard card */
.dashboard-card.clickable {
    cursor: pointer;
}

.dashboard-card.clickable:hover {
    border-color: rgba(255, 124, 0, 0.3);
}

/* ============================== */
/* Recommended Classes Grid       */
/* ============================== */
.recommended-classes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* ============================== */
/* Responsive: Dashboard Cards    */
/* ============================== */
@media (max-width: 1024px) {
    .dashboard-cards-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .quick-actions-row {
        gap: 8px;
    }

    .quick-action-btn {
        min-width: 0;
        padding: 12px 10px;
        font-size: 0.8rem;
        flex-direction: column;
        gap: 4px;
    }

    .quick-action-btn i {
        font-size: 1.2rem;
    }

    .dashboard-cards-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .dashboard-card {
        padding: 12px;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
    }

    .dashboard-card-icon {
        width: 36px;
        height: 36px;
    }

    .dashboard-card-value {
        font-size: 1rem;
    }

    .recommended-classes-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 360px) {
    .dashboard-cards-row {
        grid-template-columns: 1fr;
    }
}

/* Landscape Orientation */
@media (max-height: 600px) and (orientation: landscape) {
    .student-header {
        padding: 12px 16px;
    }

    .profile-photo-container {
        width: 80px;
        height: 80px;
    }
}


/* === student-portal/css/student-portal-tabs.css === */
/* student-portal-tabs.css - Tab navigation bar, panels */

/* ============================== */
/* Tab Styles                     */
/* ============================== */

.tabs-nav-container {
    margin: 32px 0;
    padding-bottom: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px;
}

.tab-button {
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dim);
    background-color: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tab-button:hover {
    color: var(--text-light);
}

.tab-button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    text-shadow: 0 0 12px rgba(255, 124, 0, 0.4);
}

.tab-button i {
    font-size: 1.1em;
    opacity: 0.8;
}

.tab-button.active i {
    opacity: 1;
}

/* Tab Badge for Notifications */
.tab-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ff7c00;
    color: white;
    font-size: 0.7em;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
}

.tab-badge.hidden {
    display: none;
}

.tab-button {
    position: relative; /* Required for absolute positioning of badge */
}

/* Tab Content Area */
.tabs-content {
    padding-top: 32px;
}

.tab-panel {
    display: none;
    animation: fadeInTab 0.4s ease-out;
}

.tab-panel.active {
    display: block;
}

/* Tab Panel Title */
.tab-panel h2 {
    font-size: 1.8rem;
    color: var(--text-light);
    margin-bottom: 24px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(15px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Responsive Tab Scrolling */
.tabs-nav-container::-webkit-scrollbar {
    height: 3px;
}

.tabs-nav-container::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

/* ============================== */
/* Responsive: Tabs                */
/* ============================== */
@media (max-width: 768px) {
    .tabs-nav-container {
        margin: 24px 0;
    }

    .tabs-nav {
        padding: 0 8px;
        gap: 4px;
    }

    .tab-button {
        padding: 10px 16px;
        font-size: 0.9rem;
        gap: 5px;
    }

    .tab-panel h2 {
        font-size: 1.5rem;
        margin-bottom: 16px;
    }
}

@media (max-width: 480px) {
    .tab-button {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    /* Ensure touch targets meet 44x44px minimum */
    .tab-button {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 16px;
    }
}


/* === student-portal/css/student-portal-modals.css === */
/* student-portal-modals.css - Modal base styles (shared across modules) */

/* ============================== */
/* Modal Overlay                   */
/* ============================== */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Overlay doesn't scroll — content scrolls internally */
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.25s ease;
    backdrop-filter: blur(4px);
}

.modal.active {
    display: flex;
    opacity: 1;
}

/* ============================== */
/* Modal Content Card              */
/* ============================== */
.modal-content {
    background: var(--background-dark, #2d2929);
    padding: 2rem;
    padding-top: 48px;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    width: 90%;
    max-width: 560px;
    min-width: 300px;
    color: var(--text-light, rgba(255, 255, 255, 0.9));
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    /* Entrance animation */
    transform: translateY(20px) scale(0.97);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.25s ease;
}

.modal.active .modal-content,
.modal-overlay.show .modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.modal-content.dark-theme {
    background: rgba(32, 32, 32, 0.97);
}

/* ============================== */
/* Modal Title                     */
/* ============================== */
.modal-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    padding-right: 40px;
    line-height: 1.3;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.modal-content h2 {
    color: var(--primary-color, #ff7c00);
}

/* ============================== */
/* Modal Close Button              */
/* ============================== */
.modal .close-button {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    z-index: 1;
}

.modal .close-button:hover {
    color: white;
    background: rgba(255, 124, 0, 0.25);
    border-color: rgba(255, 124, 0, 0.3);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
    color: #888;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.modal-close:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

/* ============================== */
/* Modal Header                    */
/* ============================== */
.modal-header {
    margin-bottom: 16px;
    position: relative;
}

/* ============================== */
/* Modal Subtitle                  */
/* ============================== */
.modal-subtitle {
    margin-bottom: 1.5rem;
    color: var(--text-dim, rgba(255, 255, 255, 0.7));
}

/* ============================== */
/* Modal Button                    */
/* ============================== */
.modal-button {
    display: inline-block;
    padding: 12px 28px;
    background: var(--primary-color, #ff7c00);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
    margin-top: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.modal-button:hover {
    background: var(--primary-hover, #ff9a44);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* ============================== */
/* Modal Actions (button row)      */
/* ============================== */
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* ============================== */
/* Modal Details (class modal)     */
/* ============================== */
.modal-details {
    margin-top: 16px;
}

.modal-description {
    color: white;
    margin-bottom: 0.5rem;
}

/* ============================== */
/* Confirmation Modal              */
/* ============================== */
#confirmationModal .modal-content {
    max-width: 480px;
    text-align: left;
}

#confirmationModal .modal-title {
    font-size: 1.4rem;
    text-align: left;
}

#confirmationModal p {
    margin: 1rem 0;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.confirmation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* ============================== */
/* Thank You Modal                 */
/* ============================== */
#thankYouModal .modal-content {
    max-width: 520px;
    text-align: left;
}

#thankYouModal h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

#thankYouModal .confirmation-details {
    margin: 1rem 0;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border-left: 3px solid #4CAF50;
}

#thankYouModal .confirmation-details p {
    margin: 0.4rem 0;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

#thankYouModal .confirmation-details h3 {
    color: white;
    font-size: 1.15rem;
    margin: 0.25rem 0;
}

#thankYouModal .calendar-buttons {
    margin: 1rem 0;
}

#thankYouModal .confirmation-actions {
    justify-content: flex-end;
}

/* ============================== */
/* Error Modal                     */
/* ============================== */
#errorModal {
    z-index: 2100;
}

#errorModal .modal-content {
    max-width: 400px;
    border-left: 4px solid #ff3b30;
}

#errorModal h2 {
    color: #ff3b30;
}

#errorModal p {
    margin: 1.5rem 0;
}

/* ============================== */
/* Waitlist Modal                  */
/* ============================== */
.waitlist-info {
    margin: 1rem 0;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    text-align: left;
}

.waitlist-info p {
    margin: 0.5rem 0;
}

/* ============================== */
/* Class Modal Title Override      */
/* ============================== */
#classModal .modal-content {
    max-width: 600px;
    text-align: left;
}

#classModal .modal-title {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

/* ============================== */
/* Modal Overlay (Practice Tool)   */
/* ============================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.show {
    display: flex;
    opacity: 1;
}

/* ============================== */
/* Modal Media (Gallery modals)    */
/* ============================== */
.modal-media-container {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    aspect-ratio: 16/9;
}

.modal-media {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.modal-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
}

/* ============================== */
/* Toast Notifications             */
/* ============================== */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--background-dark, #2d2929);
    color: var(--text-light, rgba(255, 255, 255, 0.9));
    padding: 1rem 1.25rem;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 2100;
    min-width: 280px;
    max-width: 440px;
    border-left: 4px solid var(--primary-color, #ff7c00);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: toastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.toast-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    margin-top: 1px;
}

.toast-body {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 2px;
    letter-spacing: 0.01em;
}

.toast-message {
    font-size: 0.88rem;
    line-height: 1.4;
    opacity: 0.9;
    word-break: break-word;
}

.toast-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.toast-close:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Toast type variants */
.toast-success {
    border-left: 4px solid #34c759;
    background: linear-gradient(135deg, #2d2929 0%, #1e3a1e 100%);
}

.toast-success .toast-icon {
    background: rgba(52, 199, 89, 0.2);
    color: #34c759;
}

.toast-error {
    border-left: 4px solid #ff3b30;
    background: linear-gradient(135deg, #2d2929 0%, #3a1e1e 100%);
}

.toast-error .toast-icon {
    background: rgba(255, 59, 48, 0.2);
    color: #ff3b30;
}

.toast-info {
    border-left: 4px solid #4db5c3;
    background: linear-gradient(135deg, #2d2929 0%, #1e2a3a 100%);
}

.toast-info .toast-icon {
    background: rgba(77, 181, 195, 0.2);
    color: #4db5c3;
}

.toast-warning {
    border-left: 4px solid #ff9500;
    background: linear-gradient(135deg, #2d2929 0%, #3a2f1e 100%);
}

.toast-warning .toast-icon {
    background: rgba(255, 149, 0, 0.2);
    color: #ff9500;
}

/* Toast animations */
@keyframes toastSlideIn {
    from {
        transform: translateX(120%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-hiding {
    animation: toastSlideOut 0.3s ease-in forwards;
}

@keyframes toastSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

/* Toast responsive */
@media (max-width: 480px) {
    .toast {
        bottom: 1rem;
        right: 1rem;
        left: 1rem;
        min-width: unset;
        max-width: unset;
    }
}

/* ============================== */
/* Body scroll lock when modal open */
/* ============================== */
body.modal-open {
    overflow: hidden;
}

/* ============================== */
/* Responsive: Modals              */
/* ============================== */
@media (max-width: 768px) {
    .modal {
        padding: 16px;
        align-items: center;
    }

    .modal-content,
    .modal-content.dark-theme {
        width: 95%;
        max-width: none;
        min-width: auto;
        padding: 20px;
        padding-top: 44px;
        border-radius: 12px;
    }

    .modal-title {
        font-size: 1.3rem;
    }

    .modal-media-container {
        max-height: 80vh;
    }

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

    .modal-actions .button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .modal {
        padding: 10px;
    }

    .modal-content,
    .modal-content.dark-theme {
        width: 100%;
        padding: 16px;
        padding-top: 44px;
        border-radius: 10px;
    }

    .modal-title {
        font-size: 1.2rem;
    }
}

/* Landscape Orientation */
@media (max-height: 600px) and (orientation: landscape) {
    .modal {
        padding: 10px;
    }

    .modal-content {
        max-height: 85vh;
        width: 70%;
    }
}


/* === student-portal/css/student-portal-skills.css === */
/* student-portal-skills.css - Skills heatmap, skill cards, progress bars, chart */

/* ============================================= */
/* Skill Modal                                   */
/* ============================================= */

/* Inherits overlay from .modal in modals.css */
#skillModal .modal-content {
    max-width: 620px;
    text-align: left;
}

#skillModal .modal-title {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 16px;
    font-weight: 600;
    padding-right: 50px;
    max-width: calc(100% - 50px);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

#skillModal .modal-title .difficulty {
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Modal stats summary bar */
.modal-stats-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    flex-wrap: wrap;
}

.modal-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.7);
}

.modal-stat-value {
    font-weight: 600;
    color: white;
}

.modal-stat-item.mastered .modal-stat-value { color: #4CAF50; }
.modal-stat-item.in-progress .modal-stat-value { color: #FFC107; }
.modal-stat-item.not-started .modal-stat-value { color: rgba(255, 255, 255, 0.4); }

/* Scrollable skill list inside modal */
#skillList {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}

#skillList::-webkit-scrollbar { width: 6px; }
#skillList::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); border-radius: 6px; }
#skillList::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
#skillList::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Modal skill cards — spacing */
#skillList .skill-card {
    margin-bottom: 8px;
}

#skillList .skill-card:last-child {
    margin-bottom: 0;
}

/* ============================================= */
/* Archetype Section                             */
/* ============================================= */

.archetype-section {
    margin-bottom: 1.5rem;
}

.archetype-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1.5rem;
}

.archetype-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 1.25rem;
}

.archetype-emoji {
    font-size: 2.4rem;
    line-height: 1;
    flex-shrink: 0;
}

.archetype-name {
    font-size: 1.15rem;
    font-weight: 600;
    color: white;
    margin: 0 0 4px 0;
}

.archetype-description {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    line-height: 1.4;
}

.archetype-chart-wrapper {
    position: relative;
    height: 300px;
}

@media (max-width: 768px) {
    .archetype-chart-wrapper {
        height: 240px;
    }
}

/* ============================================= */
/* Mastery Summary Bar                           */
/* ============================================= */

.mastery-summary {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.mastery-summary:empty {
    display: none;
}

.mastery-stat {
    flex: 1;
    min-width: 140px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.mastery-stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

.mastery-stat-label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mastery-stat.accent-green .mastery-stat-value { color: #4CAF50; }
.mastery-stat.accent-yellow .mastery-stat-value { color: #FFC107; }
.mastery-stat.accent-orange .mastery-stat-value { color: var(--primary-color, #ff7c00); }

/* ============================================= */
/* Skills Section Container                      */
/* ============================================= */

.skills-section {
    margin: 2rem 0;
}

.skills-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* ============================================= */
/* Heatmap                                       */
/* ============================================= */

.heatmap-view {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}

.heatmap-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.heatmap-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    min-width: 600px;
}

.heatmap-table th {
    padding: 12px 8px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: transparent;
}

.heatmap-table th:first-child {
    text-align: left;
    padding-left: 16px;
}

/* Difficulty label cells (first column) */
.difficulty-level {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    padding: 16px;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
}

.heatmap-cell {
    padding: 16px 12px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.heatmap-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.heatmap-cell .completion-value {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
}

.heatmap-cell .skill-count {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 2px;
}

/* Heatmap scrollbar */
.heatmap-view::-webkit-scrollbar,
.heatmap-table-wrapper::-webkit-scrollbar {
    height: 5px;
}
.heatmap-view::-webkit-scrollbar-track,
.heatmap-table-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
}
.heatmap-view::-webkit-scrollbar-thumb,
.heatmap-table-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 5px;
}

/* ============================================= */
/* Completion Color Classes                      */
/* ============================================= */

.completion-90-100 { background-color: #ff7c00; color: white; }
.completion-75-89  { background-color: #ff9a44; color: white; }
.completion-50-74  { background-color: #ffb777; color: #1a1a1a; }
.completion-25-49  { background-color: #ffd4aa; color: #1a1a1a; }
.completion-0-24   { background-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); }

/* Heatmap Legend */
.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    justify-content: flex-end;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.heatmap-legend-label {
    margin-right: 4px;
}

.heatmap-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
}

.heatmap-legend-item {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ============================================= */
/* View Controls (Heatmap / List toggle)         */
/* ============================================= */

.view-controls {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 3px;
}

.view-button {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.view-button:hover {
    color: white;
    background: rgba(255, 255, 255, 0.06);
}

.view-button.active {
    background: var(--primary-color, #ff7c00);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 124, 0, 0.3);
}

/* ============================================= */
/* List View — Filters                           */
/* ============================================= */

.list-view {
    display: none;
}

.skills-filter {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.skills-filter select {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: border-color 0.2s ease;
}
.skills-filter select:hover {
    border-color: rgba(255, 255, 255, 0.3);
}
.skills-filter select:focus {
    outline: none;
    border-color: var(--primary-color, #ff7c00);
}

/* List grid layout */
.skills-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    max-height: 600px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Glassmorphism scrollbar for skills list */
.skills-list::-webkit-scrollbar {
    width: 6px;
}
.skills-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}
.skills-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.skills-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* ============================================= */
/* Skill Cards                                   */
/* ============================================= */

.skill-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
}

.skill-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

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

.skill-card .skill-name {
    font-size: 0.95rem;
    color: white;
    font-weight: 500;
    flex: 1;
    min-width: 0;
}

.skill-card .skill-category {
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 12px;
    display: inline-block;
    white-space: nowrap;
    flex-shrink: 0;
}

.skill-card .skill-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.skill-card .skill-difficulty-badge {
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 8px;
    white-space: nowrap;
    /* Defaults — overridden by .level-* class */
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

.skill-card .skill-completion-badge {
    font-size: 0.82rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

.skill-card .progress-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 6px;
}

.skill-card .skill-progress-container {
    margin-top: 10px;
}

.skill-card .progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin: 0;
}

.skill-card .progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Speed badge (used in list view & modal) */
.speed-badge {
    display: inline-block;
    background: rgba(77, 181, 195, 0.2);
    color: var(--accent-color, #4db5c3);
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 500;
}

.speed-badge-secondary {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.78rem;
    margin-left: 0.5rem;
}

.skill-speed-row {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============================================= */
/* Category Colors (shared)                      */
/* ============================================= */

.skill-category {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 124, 0, 0.2);
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-block;
}

.skill-category-rhythm-guitar {
    background: rgba(33, 150, 243, 0.2);
    color: #64b5f6;
}

.skill-category-lead-guitar {
    background: rgba(244, 67, 54, 0.2);
    color: #ef5350;
}

.skill-category-music-theory {
    background: rgba(255, 152, 0, 0.2);
    color: #ffb74d;
}

.skill-category-improvisation {
    background: rgba(156, 39, 176, 0.2);
    color: #ce93d8;
}

.skill-category-fretboard {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
}

.skill-category-default {
    background: rgba(158, 158, 158, 0.2);
    color: #bdbdbd;
}

/* ============================================= */
/* Difficulty Level Colors (matches teacher portal) */
/* ============================================= */

/* These use [class*=] to win over .skill-card .skill-difficulty-badge defaults */
.skill-difficulty-badge.level-beginner,
.difficulty.level-beginner,
td.level-beginner          { background: rgba(76, 175, 80, 0.2);  color: #A5D6A7; }

.skill-difficulty-badge.level-beg-inter,
.difficulty.level-beg-inter,
td.level-beg-inter         { background: rgba(156, 39, 176, 0.2); color: #CE93D8; }

.skill-difficulty-badge.level-intermediate,
.difficulty.level-intermediate,
td.level-intermediate      { background: rgba(33, 150, 243, 0.2); color: #90CAF9; }

.skill-difficulty-badge.level-inter-adv,
.difficulty.level-inter-adv,
td.level-inter-adv         { background: rgba(244, 67, 54, 0.2);  color: #EF9A9A; }

.skill-difficulty-badge.level-advanced-1,
.skill-difficulty-badge.level-advanced-2,
.difficulty.level-advanced-1,
.difficulty.level-advanced-2,
td.level-advanced-1,
td.level-advanced-2        { background: rgba(255, 152, 0, 0.2);  color: #FFCC80; }

.no-skills {
    text-align: center;
    padding: 32px 24px;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    grid-column: 1 / -1;
    font-size: 0.95rem;
}

/* ============================================= */
/* Skill Header & Name (generic)                 */
/* ============================================= */

.skill-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.skill-name {
    color: ghostwhite;
    font-size: 1.05em;
    font-weight: 500;
    margin-bottom: 4px;
}

/* ============================================= */
/* Progress Bars                                 */
/* ============================================= */

.skill-progress {
    margin-top: 12px;
}

.skill-progress-container {
    margin-top: 12px;
}

.progress-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}

.progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.progress-fill {
    height: 100%;
    background: var(--primary-color, #ff7c00);
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Progress fill completion color variants */
.progress-fill.completion-90-100 { background-color: #4CAF50; }
.progress-fill.completion-75-89  { background-color: #8BC34A; }
.progress-fill.completion-50-74  { background-color: #FFC107; }
.progress-fill.completion-25-49  { background-color: #FF9800; }
.progress-fill.completion-0-24   { background-color: #f44336; }

.progress-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.label {
    color: rgba(255, 255, 255, 0.6);
}

/* ============================================= */
/* Modal Skills Section (in Class Modal)         */
/* ============================================= */

.modal-skills-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.modal-skills-section h4 {
    color: var(--primary-color);
    margin-bottom: 12px;
    font-size: 1.05rem;
    font-weight: 500;
}

#modalSkillsList {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 150px;
    overflow-y: auto;
    padding-right: 8px;
}

#modalSkillsList::-webkit-scrollbar { width: 6px; }
#modalSkillsList::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); border-radius: 6px; }
#modalSkillsList::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
#modalSkillsList::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}

.skill-item-modal {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-left: 3px solid transparent;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.skill-item-modal .difficulty-tag-modal {
    font-size: 0.72rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    margin-left: 8px;
    vertical-align: middle;
}

/* ============================================= */
/* Skill Details (Modal)                         */
/* ============================================= */

.skill-details {
    margin: 8px 0;
    color: white;
}

.skill-category-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.skill-details .progress-bar {
    height: 10px;
    margin: 20px 0;
}

.history-timeline {
    margin: 20px 0;
    padding-left: 24px;
    border-left: 2px solid rgba(255, 255, 255, 0.15);
}

.history-entry {
    position: relative;
    margin-bottom: 16px;
    padding-left: 24px;
}

.history-entry::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 6px;
    width: 12px;
    height: 12px;
    background: var(--primary-color, #ff7c00);
    border-radius: 50%;
}

.requirements-list li {
    margin-bottom: 12px;
    padding-left: 24px;
    position: relative;
}

.requirements-list li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    color: var(--primary-color, #ff7c00);
}

/* ============================================= */
/* Chart Container & Difficulty Filter           */
/* ============================================= */

.chart-container {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    margin: 32px 0;
    position: relative;
}

.chart-container canvas {
    height: 360px !important;
    max-height: 360px;
}

.chart-container .section-header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.chart-container .section-header h2 {
    margin: 0;
    font-size: 1.2rem;
}

/* Chart difficulty filter dropdown — replaces inline styles */
#chartDifficultyFilter {
    background: rgba(0, 0, 0, 0.3);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

#chartDifficultyFilter:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

#chartDifficultyFilter:focus {
    outline: none;
    border-color: var(--primary-color, #ff7c00);
}

#chartCategory {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
}

/* ============================================= */
/* Skill Item (Practice Log)                     */
/* ============================================= */

.skill-item__name {
    font-weight: 600;
    font-size: 1.05em;
    color: #f0f0f0;
    margin-bottom: 4px;
}

.skill-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.skill-meta-tag {
    font-size: 0.78em;
    padding: 2px 8px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

.skill-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.skill-tag-container {
    display: flex;
    gap: 4px;
    align-items: center;
}

.skill-name-tag {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85em;
}

/* ============================================= */
/* Responsive                                    */
/* ============================================= */

@media (max-width: 768px) {
    .mastery-summary {
        gap: 10px;
    }

    .mastery-stat {
        min-width: 0;
        padding: 12px;
    }

    .mastery-stat-value {
        font-size: 1.3rem;
    }

    .skills-filter {
        flex-direction: column;
    }

    .skills-list {
        grid-template-columns: 1fr;
    }

    .heatmap-legend {
        justify-content: center;
        flex-wrap: wrap;
    }

    .chart-container {
        padding: 16px;
    }

    .chart-container canvas {
        height: 280px !important;
        max-height: 280px;
    }

    .chart-container .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .heatmap-table {
        min-width: 540px;
    }

    .heatmap-cell {
        padding: 12px 8px;
        font-size: 0.85rem;
    }

    .heatmap-view::-webkit-scrollbar,
    .heatmap-table-wrapper::-webkit-scrollbar {
        height: 4px;
    }
}

@media (max-width: 480px) {
    .skills-list {
        grid-template-columns: 1fr;
    }

    .heatmap-cell {
        padding: 10px 6px;
        font-size: 0.8rem;
    }

    .heatmap-cell .completion-value {
        font-size: 0.95rem;
    }

    .view-controls {
        width: 100%;
    }

    .view-button {
        flex: 1;
        text-align: center;
    }

    .chart-container {
        padding: 12px;
    }

    .chart-container canvas {
        height: 220px !important;
        max-height: 220px;
    }
}

/* Archetype Recommendations */
.archetype-recs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.archetype-rec-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 16px;
}
.archetype-rec-card h4 { color: var(--text-light); margin: 0 0 4px; }
.archetype-rec-card .rec-meta { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 8px; }
.archetype-rec-card .rec-readiness {
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}
.archetype-rec-card .rec-readiness-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 3px;
    transition: width 0.3s ease;
}
.archetype-rec-card .rec-readiness-text {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-top: 4px;
}

/* Speed Progress */
.speed-progress-list { display: flex; flex-direction: column; gap: 12px; }
.speed-progress-item {
    display: flex; align-items: center; gap: 16px;
    background: rgba(255,255,255,0.05); padding: 12px 16px; border-radius: 8px;
}
.speed-progress-item .speed-rank {
    font-size: 1.2rem; font-weight: 700; color: var(--primary-color); min-width: 30px;
}
.speed-progress-item .speed-info { flex: 1; }
.speed-progress-item .speed-name { color: var(--text-light); font-size: 0.95rem; }
.speed-progress-item .speed-meta { font-size: 0.8rem; color: var(--text-dim); }
.speed-progress-item .speed-bar {
    width: 120px; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden;
}
.speed-progress-item .speed-bar-fill {
    height: 100%; background: var(--primary-color); border-radius: 4px;
}
.speed-progress-item .speed-value {
    font-size: 1.1rem; font-weight: 600; color: var(--primary-color); min-width: 70px; text-align: right;
}


/* === student-portal/css/student-portal-classes.css === */
/* student-portal-classes.css - Calendar/FullCalendar overrides, class cards, registration */

/* ============================================= */
/* Calendar Section                              */
/* ============================================= */

.class-calendar-section {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin: 32px 0;
    text-align: center;
}

/* Class Schedule Styles */
.class-section {
    margin-top: 2rem;
}

.calendar-container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 2rem;
}

#calendar {
    margin-top: 1rem;
    background: transparent;
    min-height: 500px;
}

/* ============================================= */
/* FullCalendar Theme Overrides                  */
/* ============================================= */

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

/* Calendar header and content */
.fc .fc-toolbar {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 20px;
}

.fc-col-header-cell {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

.fc-col-header-cell-cushion {
    color: ghostwhite !important;
}

.fc .fc-toolbar-title {
    color: white;
}

.fc .fc-view-harness {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.fc .fc-scrollgrid {
    border: none !important;
}

.fc .fc-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.fc .fc-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ff7c00;
}

.fc .fc-button-active {
    background: rgba(33, 150, 243, 0.5) !important;
}

.fc-theme-standard .fc-scrollgrid {
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.fc th[role="presentation"] {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.fc-theme-standard td,
.fc-theme-standard th {
    border-color: rgba(255, 255, 255, 0.1);
}

.fc-day-today {
    background-color: rgba(255, 124, 0, 0.1) !important;
    box-shadow: inset 0 0 10px rgba(255, 124, 0, 0.2);
}

/* Calendar Event Base */
.fc-event {
    border: none !important;
    border-radius: 6px !important;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fc-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.fc th {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

/* Hide the default blue dot in month view */
.fc-daygrid-event-dot {
    display: none;
}

/* Week view: reasonable slot height so class names are readable */
.fc-timegrid-slot {
    height: 3em !important;
}

.fc-timegrid-event {
    min-height: 50px !important;
}

/* ============================================= */
/* Calendar Event Content Layout                 */
/* ============================================= */

.fc-daygrid-event {
    white-space: normal !important;
    margin-bottom: 3px !important;
    padding: 0 !important;
}

.fc-daygrid-event .fc-event-main {
    padding: 8px 10px;
}

.fc-timegrid-event .fc-event-main {
    padding: 6px 8px;
}

.fc-event-main-frame {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 2px;
}

/* Time — small, subdued */
.fc-event-time {
    font-size: 0.7em;
    font-weight: 500;
    opacity: 0.8;
    letter-spacing: 0.02em;
}

/* Title — prominent */
.fc-event-title-container {
    font-weight: 700;
    font-size: 0.82em;
    line-height: 1.25;
    flex-grow: 1;
}

/* Details row (category + capacity) */
.fc-event-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    gap: 4px;
}

.fc-event-details .category {
    font-size: 0.65em;
    opacity: 0.75;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.fc-event-details .capacity {
    font-size: 0.65em;
    background: rgba(255, 255, 255, 0.2);
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 600;
    margin-left: 0;
}

/* ============================================= */
/* FullCalendar List View                        */
/* ============================================= */

.fc-list {
    border: none !important;
    background: transparent !important;
}

/* Override FullCalendar's inline background-color on event rows */
.fc-list-event {
    background: none !important;
}

/* Day header row — dark bar with orange accent text */
.fc-list-day th {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.fc-list-day-cushion {
    background: rgba(255, 255, 255, 0.06) !important;
    padding: 10px 16px !important;
    border-bottom: 2px solid rgba(255, 124, 0, 0.3) !important;
}

.fc-list-day-cushion a,
.fc-list-day-text,
.fc-list-day-side-text {
    color: #ff7c00 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-size: 0.95em !important;
}

/* Table body background */
.fc-list-table,
.fc-list-table tbody,
.fc-list-table thead {
    background: transparent !important;
}

/* Event rows — dark with subtle separator */
.fc-list-event td {
    background: rgba(255, 255, 255, 0.02) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    padding: 14px 16px !important;
    vertical-align: middle;
}

.fc-list-event:hover td {
    background: rgba(255, 255, 255, 0.07) !important;
}

/* Event dot — accent color from category */
.fc-list-event-graphic {
    width: 14px !important;
    padding: 10px 6px !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    vertical-align: middle;
}

.fc-list-event-dot {
    border-width: 5px !important;
}

/* Time column */
.fc-list-event-time {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.88em !important;
    white-space: nowrap;
    font-weight: 400;
}

/* Title column — hide the custom eventContent frame in list view */
.fc-list-event-title {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 500 !important;
    font-size: 0.95em !important;
}

/* Hide the custom event content layout in list view (time/details/capacity) */
.fc-list-event .fc-event-main-frame {
    display: block !important;
}

.fc-list-event .fc-event-time,
.fc-list-event .fc-event-details {
    display: none !important;
}

.fc-list-event .fc-event-title-container {
    font-size: 1em !important;
    font-weight: 500 !important;
}

/* Empty state */
.fc-list-empty {
    background: transparent !important;
}

.fc-list-empty-cushion {
    color: rgba(255, 255, 255, 0.5) !important;
    font-style: italic;
}

/* Scrollgrid border in list view */
.fc-list .fc-scrollgrid {
    border: none !important;
}

/* ============================================= */
/* Classes Grid                                  */
/* ============================================= */

.classes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* .upcoming-classes and .class-history are styled by .section-container in base.css */

/* ============================================= */
/* Class Entry                                   */
/* ============================================= */

.class-entry {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: fit-content;
}

.class-entry:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 12px rgba(255, 124, 0, 0.1);
    border-color: rgba(255, 124, 0, 0.25);
}

/* Ensure proper spacing and alignment within entries */
.class-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.class-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    margin: 0;
}

.class-title {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 16px;
    font-weight: 500;
}

.modal-header {
    margin-bottom: 16px !important;
    position: relative !important;
}

.class-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.class-details {
    display: grid;
    gap: 0.75rem;
    margin: 20px 0;
}

.class-actions {
    margin-top: 0.75rem;
}

/* ============================================= */
/* Difficulty & Detail Styles                    */
/* ============================================= */

.difficulty-level {
    background: rgba(0, 0, 0, 0.05);
    font-weight: 600;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
}

.detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.75rem;
    border-radius: 8px;
}

.detail-row i {
    color: rgba(255, 255, 255, 0.6);
    width: 20px;
}

/* Description */
.event-description {
    margin: 20px 0;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

/* Event Details */
.event-details {
    margin-bottom: 20px;
}

/* ============================================= */
/* Category & Difficulty Tags                    */
/* ============================================= */

.category-tag,
.difficulty-tag {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    white-space: nowrap;
}

/* Category colors applied inline via CATEGORY_COLORS in JS */

/* Difficulty Tag Colors (matching skills tab color system) */
.difficulty-tag {
    background: rgba(33, 150, 243, 0.2);
    color: #90CAF9;
}

.difficulty-tag.level-beginner {
    background: rgba(76, 175, 80, 0.2);
    color: #A5D6A7;
}

.difficulty-tag.level-beg-inter {
    background: rgba(156, 39, 176, 0.2);
    color: #CE93D8;
}

.difficulty-tag.level-intermediate {
    background: rgba(33, 150, 243, 0.2);
    color: #90CAF9;
}

.difficulty-tag.level-inter-adv {
    background: rgba(244, 67, 54, 0.2);
    color: #EF9A9A;
}

.difficulty-tag.level-advanced-1,
.difficulty-tag.level-advanced-2 {
    background: rgba(255, 152, 0, 0.2);
    color: #FFCC80;
}

/* Modal skill difficulty tags */
.difficulty-tag-modal {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 500;
    background: rgba(33, 150, 243, 0.2);
    color: #90CAF9;
}

.difficulty-tag-modal.level-beginner {
    background: rgba(76, 175, 80, 0.2);
    color: #A5D6A7;
}

.difficulty-tag-modal.level-beg-inter {
    background: rgba(156, 39, 176, 0.2);
    color: #CE93D8;
}

.difficulty-tag-modal.level-intermediate {
    background: rgba(33, 150, 243, 0.2);
    color: #90CAF9;
}

.difficulty-tag-modal.level-inter-adv {
    background: rgba(244, 67, 54, 0.2);
    color: #EF9A9A;
}

.difficulty-tag-modal.level-advanced-1,
.difficulty-tag-modal.level-advanced-2 {
    background: rgba(255, 152, 0, 0.2);
    color: #FFCC80;
}


/* ============================================= */
/* Class History                                 */
/* ============================================= */

/* Recommended & History sections — vertical card stack, scrollable */
.classes-scroll-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 600px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

.classes-scroll-list::-webkit-scrollbar {
    width: 6px;
}

.classes-scroll-list::-webkit-scrollbar-track {
    background: transparent;
}

.classes-scroll-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

/* .class-history-entry inherits spacing from .class-entry;
   border-left set inline via category color */

.class-notes {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95em;
    line-height: 1.5;
}

/* Feedback content styling - allows structured HTML inside flex containers */
.feedback-content {
    display: block;
    flex: 1;
    font-style: normal;
}

.feedback-content h3 {
    display: block;
    font-size: 1em;
    font-weight: 600;
    color: ghostwhite;
    margin: 16px 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.feedback-content h3:first-child {
    margin-top: 0;
}

.feedback-content p {
    display: block;
    margin: 0 0 8px 0;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    font-style: italic;
}

.day-tag {
    background: rgba(255, 124, 0, 0.2);
    color: #ff7c00;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 500;
}

.history-date {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
}

/* ============================================= */
/* Class Modal Specific Styles                   */
/* ============================================= */

/* classModal title inherits from modals.css .modal-title */

.attendees-info {
    margin: 16px 0;
    padding: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.class-description {
    margin: 20px 0;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

.capacity {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin-left: 8px;
}

/* Modal skills list */
.skill-item-modal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
}

.skill-item-modal:last-child {
    border-bottom: none;
}

.skill-item-modal .difficulty-tag-modal {
    margin-left: 8px;
}

.skill-progress-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.skill-progress-bar {
    width: 60px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.skill-progress-bar > div {
    height: 100%;
    transition: width 0.3s ease;
}

.skill-progress-pct {
    font-weight: 600;
    font-size: 0.85em;
    min-width: 35px;
    text-align: right;
}

.loading-skills {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    padding: 12px 0;
}

/* History completed badge */
.history-badge {
    background: rgba(76, 175, 80, 0.2);
    color: #4CAF50;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
}

/* Calendar add-to-calendar button icons */
.calendar-button i {
    margin-right: 8px;
}

/* ============================================= */
/* Registered Classes Grid                       */
/* ============================================= */

.registered-classes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  /* Creates 2 equal columns */
    gap: 24px;  /* Space between grid items */
    width: 100%;
    padding: 24px;
}

/* .registered-class-card inherits dark background from .class-entry */

/* ============================================= */
/* Registration & Cancel Buttons                 */
/* ============================================= */

.register-button {
    width: 100%;
    background: rgba(33, 150, 243, 0.3);
    color: white;
    border: 1px solid rgba(33, 150, 243, 0.5);
    border-radius: 6px;
    padding: 8px 16px;
    margin-top: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.register-button:hover {
    background: rgba(33, 150, 243, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
}

/* Training vs Instruction Colors */
.training-class .register-button {
    background: #ff7c00;
}

.training-class .register-button:hover {
    background: #ff9a44;
    box-shadow: 0 4px 15px rgba(255, 124, 0, 0.35);
}

.registration-button {
    width: 100%;
    padding: 12px;
    background: #ff7c00;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.registration-button:hover {
    background: #ff9a44;
}

.cancel-button {
    align-self: flex-end;
    background: rgba(244, 67, 54, 0.2);
    color: #ef5350;
    border: 1px solid rgba(244, 67, 54, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cancel-button:hover {
    background: rgba(244, 67, 54, 0.3);
    border-color: rgba(244, 67, 54, 0.5);
}

/* ============================================= */
/* Confirmation Actions                          */
/* ============================================= */

.confirmation-content {
    text-align: center;
}

.confirmation-details {
    margin: 24px 0;
}

.confirmation-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

/* ============================================= */
/* Recommended Classes                           */
/* ============================================= */

.recommended-class .class-details {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 16px;
}

.progress-section {
    margin: 16px 0 0;
}

.progress-section .progress-text {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    font-size: 0.9em;
}

.progress-section .progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-section .progress {
    height: 100%;
    transition: width 0.3s ease;
}

/* ============================================= */
/* Responsive: Classes & Calendar                */
/* ============================================= */

@media (max-width: 1024px) {
    .registered-classes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 16px;
    }
}

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

    .registered-classes-grid {
        grid-template-columns: 1fr;  /* Single column on mobile */
    }

    .class-header {
        flex-direction: column;
    }

    .class-tags {
        width: 100%;
        justify-content: flex-start;
    }

    .class-details {
        grid-template-columns: 1fr;
    }

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

    /* Class Management */
    .class-entry {
        padding: 15px;
    }

    .class-name {
        font-size: 16px;
    }

    /* Calendar Section */
    .class-calendar-section {
        padding: 15px;
        margin: 15px 0;
        /* Ensure the section allows the calendar to grow */
        overflow: hidden; /* Prevent container collapsing issues */
    }

    #calendar {
        min-height: 400px;
    }

    .fc .fc-toolbar {
        flex-direction: column;
        gap: 10px;
    }

    .fc .fc-toolbar-title {
        font-size: 18px;
    }

    .fc-header-toolbar {
        padding: 10px !important;
    }

    .fc-button {
        padding: 6px 12px !important;
    }
}

@media (max-width: 480px) {
    /* Single column grids */
    .classes-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    .calendar-container {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/* ==============================
   Time Slot
   ============================== */
.time-slot {
    padding: 16px 0;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
}

/* ==============================
   Priority Styles
   ============================== */
/* Progress colors based on priority */
.priority-high .progress {
    background: linear-gradient(to right, #4CAF50, #8BC34A);
}

.priority-medium .progress {
    background: linear-gradient(to right, #FFC107, #FFB300);
}

.priority-low .progress {
    background: linear-gradient(to right, #FF9800, #FF7043);
}

/* Priority text styling */
.class-priority {
    margin-top: 12px;
    font-weight: 500;
}
.priority-section {
    margin: 16px 0;
    color: #4CAF50;
    font-size: 0.9em;
}
.priority-high .class-priority {
    color: #4CAF50;
}

.priority-medium .class-priority {
    color: #FFC107;
}

.priority-low .class-priority {
    color: #FF9800;
}

.class-management {
    margin-bottom: 32px;
}

/* Waitlist History */
.waitlist-entry {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 12px 16px; margin-bottom: 8px;
}
.waitlist-entry-info h4 { color: var(--text-light); margin: 0 0 4px; font-size: 0.95rem; }
.waitlist-entry-info p { color: var(--text-dim); margin: 0; font-size: 0.85rem; }
.waitlist-status-badge {
    padding: 4px 12px; border-radius: 12px; font-size: 0.8rem; font-weight: 600;
}
.waitlist-status-badge.waiting { background: rgba(255,193,7,0.2); color: #ffc107; }
.waitlist-status-badge.notified { background: rgba(33,150,243,0.2); color: #2196f3; }
.waitlist-status-badge.converted { background: rgba(76,175,80,0.2); color: #4caf50; }
.waitlist-status-badge.expired { background: rgba(158,158,158,0.2); color: #9e9e9e; }


/* === student-portal/css/student-portal-practice.css === */
/* student-portal-practice.css - Practice tool, metronome, goals, practice log */

/* ============================================= */
/* Metronome Styles                              */
/* ============================================= */

.metronome-container {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.metronome-container h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-dim);
    font-size: 1rem;
    margin-bottom: 1rem;
}
.metronome-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.bpm-display {
    font-size: 2rem;
    font-weight: bold;
    color: var(--accent-orange);
    min-width: 70px;
    text-align: center;
}
.metronome-controls .slider {
    flex-grow: 1;
}

.metronome-toggle-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-light);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    margin-left: auto; /* This pushes it to the far right of the flex container */
}

.metronome-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--primary-color);
}

/* Slider */
.slider {
    flex-grow: 1;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #444;
    outline: none;
    border-radius: 4px;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary-color);
    cursor: pointer;
    border-radius: 50%;
}

/* Beat Indicator */
.beat-indicator {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}
.beat-indicator span {
    width: 28px; /* Slightly larger */
    height: 28px;
    background: #444;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--text-dim);
    border: 2px solid transparent; /* Add a transparent border for smooth transitions */
    cursor: pointer; /* Indicate that the beats are clickable */
}

/* Style for beats that are set as ACCENTS */
.beat-indicator span.accent {
    border-color: var(--primary-color);
    font-weight: bold;
}

/* Style for the CURRENTLY PLAYING beat */
.beat-indicator span.active {
    background: var(--primary-color);
    transform: scale(1.2);
    box-shadow: 0 0 15px var(--primary-color);
    color: white;
}

/* Styles for new metronome controls */
.time-signature-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 1rem;
    color: var(--text-dim);
}

.form-input-sm {
    background: rgba(0,0,0,0.2);
    border: 1px solid #555;
    color: var(--text-light);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.9rem;
}

/* Updated beat indicator to handle accents */
.beat-indicator span.accent {
    border: 2px solid var(--primary-hover);
}

/* ============================================= */
/* Practice Tab Tool Styles                      */
/* ============================================= */

.practice-tool-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 992px) {
    .practice-tool-grid { grid-template-columns: 1.5fr 1fr; } /* Give more space to skill selection */
}

.tool-section h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}
.tool-subtitle {
    color: var(--text-dim);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.practice-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    max-height: 350px;
    overflow-y: auto;
    padding-right: 8px;
}

/* Glassmorphism scrollbar for practice generator */
.practice-items::-webkit-scrollbar { width: 6px; }
.practice-items::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}
.practice-items::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.practice-items::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.22);
}
.practice-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    user-select: none;
}
.practice-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}
.practice-item.selected {
    border-color: var(--primary-color);
    background: rgba(255, 124, 0, 0.15);
    box-shadow: 0 0 15px rgba(255, 124, 0, 0.2);
}
.practice-item h4 {
    font-size: 1rem;
    margin: 0 0 5px 0;
    color: var(--text-light);
}
.practice-item p {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin: 0;
}

/* Duration Selector & Timer Controls */
.duration-selector, .timer-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.duration-btn, .timer-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-light);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.duration-btn:hover, .timer-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--primary-color);
}
.duration-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}
.timer-btn.start-btn {
    background: var(--primary-color);
    color: white;
    font-weight: bold;
}
.timer-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.05);
}

/* ============================================= */
/* Timer Display                                 */
/* ============================================= */

.timer-display-wrapper {
    text-align: center;
    margin: 2rem 0;
}
.timer-display {
    font-size: 4rem;
    font-weight: 700;
    color: var(--accent-orange);
    line-height: 1;
}
.current-activity {
    font-size: 1.1rem;
    color: var(--text-light);
    height: 1.5em; /* Prevent layout shift when text changes */
}

/* Schedule Display */
.schedule-display-container {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    text-align: center;
}
.schedule-display-container h4 {
    color: var(--text-dim);
    margin-bottom: 1rem;
}
.schedule-item-badge {
    display: inline-block;
    background: var(--primary-blue);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    margin: 4px;
}

/* ============================================= */
/* Practice Instructions & Skill Resources       */
/* ============================================= */

.practice-instructions-box {
    background: rgba(255, 140, 0, 0.08);
    border-left: 3px solid var(--primary-color, #FF8C00);
    padding: 8px 12px;
    margin: 8px 0;
    border-radius: 0 8px 8px 0;
}
.practice-instructions-label {
    font-size: 0.75rem;
    color: var(--primary-color, #FF8C00);
    margin: 0 0 2px;
    font-weight: 600;
}
.practice-instructions-text {
    font-size: 0.8rem;
    color: var(--text-light, #ddd);
    margin: 0;
    line-height: 1.4;
}

.skill-resources-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
}

.skill-resource-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255, 140, 0, 0.12);
    border: 1px solid rgba(255, 140, 0, 0.25);
    border-radius: 20px;
    color: var(--primary-color, #FF8C00);
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.skill-resource-link:hover {
    background: rgba(255, 140, 0, 0.22);
    border-color: var(--primary-color, #FF8C00);
    color: #fff;
}
.skill-resource-link i {
    font-size: 0.85rem;
}

/* ============================================= */
/* Modal Styles for Practice Tool                */
/* ============================================= */

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px);
    display: none; align-items: center; justify-content: center;
    z-index: 1000; opacity: 0; transition: opacity 0.3s ease;
}
.modal-overlay.show { display: flex; opacity: 1; }
.modal-close { position: absolute; top: 10px; right: 15px; font-size: 1.5rem; color: #888; cursor: pointer; }
.modal-subtitle { margin-bottom: 1.5rem; color: var(--text-dim); }
.highlight-action { background: rgba(0,0,0,0.2); padding: 1rem; border-radius: 8px; margin-top: 1.5rem; }
.modal-button {
    display: inline-block;
    padding: 12px 28px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    margin-top: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.modal-button:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* ============================================= */
/* NEW Practice Tool Styles                      */
/* ============================================= */

.practice-tool-container {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
    align-items: flex-start;
}
@media (max-width: 992px) {
    .practice-tool-container { grid-template-columns: 1fr; }
}

.tool-column h3 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================= */
/* Practice Log Form                             */
/* ============================================= */

.practice-section {
    margin-bottom: 32px;
}

.practice-log-form {
    display: grid;
    gap: 24px;
}

/* ============================================= */
/* Practice Entries (History)                     */
/* ============================================= */

.practice-entry {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Adds space between header, skills, footer */
}

/* Header: Date on left, Duration on right */
.practice-entry__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    font-size: 0.9em;
    color: #ccc;
}

.practice-date {
    font-weight: bold;
    color: #ff9800; /* Example accent color */
}

/* Container for the list of skills */
.practice-entry__skills {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Space between each skill item */
}

/* Footer for mood, focus, etc. */
.practice-entry__footer {
    display: flex;
    gap: 20px;
    font-size: 0.9em;
    color: #ccc;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
}

/* Styling for the entire notes block */
.practice-entry__notes {
    background-color: rgba(0, 0, 0, 0.2); /* A slightly darker box to contain the notes */
    border-radius: 6px;
    padding: 12px;
    font-size: 0.9em; /* Make notes text slightly smaller */
    line-height: 1.5; /* Improve readability */
}

/* Style the "Notes:" label */
.practice-entry__notes strong {
    display: block; /* Puts the label on its own line */
    margin-bottom: 5px; /* Adds space between the label and the text */
    color: #ff9800; /* Use your theme's accent color for the label */
    font-weight: 600;
}

/* Style the paragraph text itself */
.practice-entry__notes p {
    color: ghostwhite; /* The main note text is soft white */
    margin: 0; /* Remove the default browser margin from the paragraph */
}

.practice-skill-name {
    font-size: 1.1em;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
}

/* ============================================= */
/* Practice Notes & Details                      */
/* ============================================= */

.practice-notes {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 12px;
    color: rgba(255, 255, 255, 0.9);
}
.practice-notes p {
    margin-top: 8px;
    line-height: 1.5;
}

.practice-history-list {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 16px;
}

.practice-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

/* ============================================= */
/* Practice History Section                      */
/* ============================================= */

.practice-history-section {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin: 32px 0;
}

.practice-history-entry {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    transition: transform 0.2s ease;
}

.practice-history-entry:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
}

.practice-date {
    color: #ff7c00;
    font-size: 1.1em;
}

.practice-details {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.9);
}

.practice-duration,
.practice-mood,
.practice-focus,
.practice-rating {
    color: rgba(255, 255, 255, 0.8);
    margin: 5px 0;
}

.practice-duration {
    background: rgba(255, 124, 0, 0.2);
    color: #ff7c00;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 500;
}

.practiced-skill {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 4px 8px;
    margin: 4px 0;
    display: inline-block;
    margin-right: 8px;
}

.no-practice {
    text-align: center;
    padding: 32px;
    color: rgba(255, 255, 255, 0.6);
}

/* ============================================= */
/* Responsive: Practice                          */
/* ============================================= */

@media (max-width: 768px) {
    /* Practice Section */
    .practice-log-section {
        padding: 15px;
    }

    .practice-log-form {
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .timer-display {
        font-size: 2.5rem;
    }

    /* Practice tool single column */
    .practice-tool-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 360px) {
    .timer-display {
        font-size: 2rem;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    /* Compact timer display */
    .timer-display {
        font-size: 2rem;
    }
}

/* ==============================
   Goals Section
   ============================== */
.goal-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.goal-list li {
    color: ghostwhite;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.goal-list li:last-child {
    border-bottom: none;
}

.placeholder {
    color: ghostwhite;
    font-style: italic;
}

.edit-button {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    z-index: 10;
}

.edit-button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.goal-editor {
    display: none;
}

.goal-editor textarea {
    width: 100%;
    min-height: 100px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px;
    color: white;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
    margin-bottom: 12px;
}

.goal-editor textarea:focus {
    outline: none;
    border-color: #ff7c00;
}

.button-group {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.save-button,
.cancel-button {
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.save-button {
    background: #ff7c00;
    color: white;
    border: none;
}

.save-button:hover {
    background: #ff9a44;
}

.cancel-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

#why_playing_text {
    color: ghostwhite;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.goal-display-item {
    display: block;
    width: 100%;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: ghostwhite;
    line-height: 1.5;
    min-height: 1.5em;
    background-color: transparent;
}

.goal-display-item.placeholder {
    font-style: italic;
    opacity: 0.7;
}

/* Hide the button when editor is active */
.goal-editor:not([style*="display: none"]) ~ .edit-button {
    display: none;
}

/* ==============================
   Practice Tool Timer & Duration
   ============================== */
.duration-selector {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 2rem;
}
.duration-btn {
    background: transparent;
    border: 1px solid #555;
    color: var(--text-dim);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.duration-btn.active, .duration-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.timer-display-wrapper { text-align: center; margin: 2rem 0; }
.timer-display { font-size: 5rem; font-weight: 700; color: var(--text-light); line-height: 1; }
.current-activity { font-size: 1.1rem; color: var(--primary-color); height: 1.5em; }

.timer-controls { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.timer-btn { /* Basic button style */ }
.start-btn { background: var(--primary-color); color: white; }

.metronome-container { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #444; }
.metronome-controls { display: flex; align-items: center; gap: 1rem; }
.bpm-display { font-size: 2rem; font-weight: 500; color: var(--text-light); min-width: 60px; text-align: center; }
.metronome-toggle-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-light);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    margin-left: auto;
}

.metronome-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--primary-color);
}

/* ==============================
   Practiced Skills Display
   ============================== */
.practiced-skills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}
.practiced-skill-tag {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    color: var(--text-dim);
}
.skill-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
}

/* ==============================
   Practice Streak Badge
   ============================== */
.practice-streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 124, 0, 0.15);
    border: 1px solid rgba(255, 124, 0, 0.3);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.95rem;
    color: #ff9a44;
    margin-left: 16px;
    vertical-align: middle;
}

.practice-streak-badge .streak-fire {
    font-size: 1.1rem;
}

.practice-streak-badge .streak-count {
    font-weight: 600;
}

.practice-streak-badge.no-streak {
    opacity: 0.5;
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dim);
}

/* ==============================
   Practice Analytics Summary
   ============================== */
.practice-analytics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.analytics-stat {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.analytics-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

.analytics-stat-label {
    font-size: 0.8rem;
    color: var(--text-dim);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .practice-analytics {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .practice-analytics {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .analytics-stat {
        padding: 12px 8px;
    }
    .analytics-stat-value {
        font-size: 1.2rem;
    }
}

/* ==============================
   Practice Visuals (Heatmap + Chart)
   ============================== */
.practice-visuals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.practice-visual-card {
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 20px;
}

.practice-visual-card h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.practice-visual-card h3 i {
    color: var(--primary-color);
    font-size: 0.9rem;
}

.practice-visual-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.practice-visual-header h3 {
    margin-bottom: 0;
}

.practice-streak-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
}

.streak-label {
    color: var(--text-dim);
}

.streak-label strong {
    color: var(--primary-color);
}

.streak-divider {
    color: var(--border-subtle);
}

/* Heatmap Grid */
.practice-heatmap {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 3px;
    margin-bottom: 12px;
}

.heatmap-cell {
    aspect-ratio: 1;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.04);
    transition: background 0.2s;
    position: relative;
    min-width: 0;
}

.heatmap-cell[data-level="1"] { background: rgba(255, 124, 0, 0.2); }
.heatmap-cell[data-level="2"] { background: rgba(255, 124, 0, 0.4); }
.heatmap-cell[data-level="3"] { background: rgba(255, 124, 0, 0.65); }
.heatmap-cell[data-level="4"] { background: rgba(255, 124, 0, 0.9); }

.heatmap-cell:hover {
    outline: 1px solid var(--primary-color);
    z-index: 1;
}

.heatmap-cell .heatmap-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: var(--text-light);
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}

.heatmap-cell:hover .heatmap-tooltip {
    display: block;
}

/* Heatmap Legend */
.heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--text-dim);
}

.heatmap-legend-label {
    margin: 0 4px;
}

.heatmap-cell-legend {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.04);
}

.heatmap-cell-legend[data-level="1"] { background: rgba(255, 124, 0, 0.2); }
.heatmap-cell-legend[data-level="2"] { background: rgba(255, 124, 0, 0.4); }
.heatmap-cell-legend[data-level="3"] { background: rgba(255, 124, 0, 0.65); }
.heatmap-cell-legend[data-level="4"] { background: rgba(255, 124, 0, 0.9); }

/* Weekly Chart */
.practice-chart-wrap {
    position: relative;
    height: 220px;
}

.practice-chart-wrap canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 900px) {
    .practice-visuals {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .practice-visual-card {
        padding: 14px;
    }
    .practice-heatmap {
        gap: 2px;
    }
    .practice-visual-header {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* === student-portal/css/student-portal-achievements.css === */
/* student-portal-achievements.css - Achievements, levels, milestones, timeline */

/* Achievements & Level Section Styles */
.achievement-section {
    display: grid;
    gap: 2rem;
    margin-top: 2rem;
}

.achievement-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.2), rgba(255,255,255,0.1));
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    height: 200px;
    border-radius: 16px;
    margin-bottom: 16px;
}

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

/* Level Progress Card */
.level-progress-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 2fr;
}

.current-level {
    text-align: center;
}

.level-name {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1rem;
}

.level-progress {
    width: 80%;
    transition: all 0.3s ease;
}

.progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: white;
    transition: width 0.3s ease;
}

.progress-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

/* Level Requirements */
.level-requirements {
    padding-left: 2rem;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.requirements-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.requirement-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.requirement-name {
    font-size: 1.1em;
    font-weight: 500;
    color: white;
}

.requirement-speed {
    color: #ff7c00;
    font-weight: 500;
}

.requirement-progress {
    margin-top: 8px;
}

.requirement-icon {
    width: 24px;
    height: 24px;
    color: var(--primary-color);
}

.requirement-complete {
    background: rgba(52, 199, 89, 0.1);
}

/* ============================================================================ */
/* SCROLL CONTAINER                                                           */
/* ============================================================================ */
.achievements-scroll-container {
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,124,0,0.4) rgba(255,255,255,0.05);
}
.achievements-scroll-container::-webkit-scrollbar { width: 6px; }
.achievements-scroll-container::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 3px; }
.achievements-scroll-container::-webkit-scrollbar-thumb { background: rgba(255,124,0,0.4); border-radius: 3px; }

/* ============================================================================ */
/* SUMMARY STRIP                                                               */
/* ============================================================================ */
.achievements-summary {
    color: var(--text-dim);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* ============================================================================ */
/* FILTER BAR (categories + earned/locked toggle)                              */
/* ============================================================================ */
.achievement-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.achievement-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.category-button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-dim);
    padding: 6px 14px;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-size: 0.85rem;
}

.category-button:hover {
    border-color: var(--primary-color);
    color: var(--text-light);
}

.category-button.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

/* Category count badges */
.category-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    margin-left: 6px;
}
.category-button.active .category-count {
    background: rgba(255,255,255,0.25);
    color: white;
}

/* Earned/Locked view toggle */
.achievement-view-toggle {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
}
.view-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}
.view-toggle-btn:hover {
    color: var(--text-light);
}
.view-toggle-btn.active {
    background: var(--primary-color);
    color: white;
}

/* ============================================================================ */
/* ACHIEVEMENTS GRID                                                           */
/* ============================================================================ */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    padding: 0.5rem 0;
    width: 100%;
}

.achievements-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* ============================================================================ */
/* ACHIEVEMENT CARD (compact — single source of truth)                         */
/* ============================================================================ */
.achievement-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 20px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.achievement-card:hover {
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.08);
}

.achievement-card.locked {
    opacity: 0.85;
}

.achievement-card.locked:hover {
    opacity: 1;
}

.achievement-card.locked .achievement-name {
    color: rgba(255, 255, 255, 0.9);
}
.achievement-card.locked .achievement-description {
    color: rgba(255, 255, 255, 0.7);
}
.achievement-card.locked .achievement-points,
.achievement-card.locked .achievement-status {
    color: rgba(255, 255, 255, 0.8);
}

/* Earned card glow */
.achievement-card.earned {
    background: linear-gradient(135deg, rgba(255, 124, 0, 0.12), rgba(255, 154, 68, 0.08));
    border: 2px solid #ff7c00;
    box-shadow: 0 0 0 1px rgba(255, 154, 68, 0.6),
                0 0 15px rgba(255, 124, 0, 0.4),
                0 0 30px rgba(255, 124, 0, 0.2),
                0 6px 24px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}
.achievement-card.earned:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: #ff9a44;
    box-shadow: 0 0 0 1px rgba(255, 154, 68, 0.8),
                0 0 25px rgba(255, 124, 0, 0.6),
                0 0 50px rgba(255, 124, 0, 0.3),
                0 10px 40px rgba(0, 0, 0, 0.4);
}
.achievement-card.earned .progress-ring-circle {
    stroke: var(--primary-color);
    stroke-width: 3.5;
    filter: drop-shadow(0 0 3px rgba(255, 124, 0, 0.5));
}

.achievement-card.hidden {
    display: none;
}

/* Stagger animation */
.achievement-card:nth-child(3n) { transition-delay: 0.1s; }
.achievement-card:nth-child(3n+1) { transition-delay: 0.2s; }
.achievement-card:nth-child(3n+2) { transition-delay: 0.3s; }

/* Badge container — compact */
.achievement-badge-container {
    position: relative;
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
}

/* Level Badge */
.level-badge {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    position: relative;
    margin: 2rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, var(--primary-color), #ff9a44);
    border-radius: 50%;
    box-shadow: 0 8px 32px rgba(255, 124, 0, 0.3);
}

.level-badge::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: inherit;
    border-radius: 50%;
    filter: blur(10px);
    opacity: 0.4;
    z-index: -1;
}

.level-icon {
    font-size: 48px;
    margin-bottom: 12px;
    color: white;
}

.level-text {
    font-size: 24px;
    color: white;
    font-weight: bold;
}

.level-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    margin-top: 1rem;
}

/* Make the progress overlay glow */
.level-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    filter: blur(10px);
    opacity: 0.5;
    border-radius: 50%;
}

/* Achievement Ring / Progress SVG */
.progress-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-ring-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 3;
}

.progress-ring-circle {
    fill: none;
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 3;
    transition: stroke-dasharray 0.5s ease;
}

/* Icon — compact, positioned over ring */
.achievement-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 26px;
    line-height: 1;
    color: white;
    z-index: 2;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.achievement-icon.grayscale {
    filter: grayscale(100%);
    opacity: 0.6;
}

/* Card inner elements — compact */
.achievement-name {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    color: white;
    margin: 0 0 4px 0;
}

.achievement-description {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.4;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.achievement-points {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.achievement-status {
    width: 100%;
    font-size: 0.8rem;
    padding-top: 8px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.achievement-status.earned {
    color: #4CAF50;
    font-weight: 600;
}
.achievement-status.earned .checkmark {
    margin-right: 4px;
}
.achievement-status.locked {
    color: rgba(255, 255, 255, 0.5);
}
.achievement-status.locked .lock-icon {
    margin-right: 4px;
}

/* Legacy grid class (backward compat) */
.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    width: 100%;
    margin-top: 15px;
}

/* No achievements message */
.no-achievements,
.no-achievements-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: var(--text-dim);
}

/* ============================================================================ */
/* ACHIEVEMENT RESPONSIVE                                                      */
/* ============================================================================ */
@media (max-width: 768px) {
    .achievement-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .achievement-view-toggle {
        width: 100%;
    }
    .view-toggle-btn {
        flex: 1;
        text-align: center;
    }
    .achievement-grid,
    .achievements-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

@media (max-width: 480px) {
    .achievement-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .achievement-filters button {
        width: 100%;
    }
}

/* ============================================================================ */
/* ENHANCED MILESTONE TIMELINE STYLES */
/* ============================================================================ */

/* Recent Milestones Container */
.recent-milestones {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Timeline Container */
.milestones-timeline-wrapper {
    position: relative;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Vertical Timeline Line */
.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(
        to bottom,
        var(--primary-color),
        rgba(255, 124, 0, 0.3)
    );
    transform: translateX(-50%);
    z-index: 0;
}

/* Individual Timeline Item */
.timeline-item {
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding-right: calc(50% + 40px);
    padding-bottom: 60px;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.5s ease-out;
}

.timeline-item.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Alternate items to the right */
.timeline-item:nth-child(even) {
    justify-content: flex-start;
    padding-right: 0;
    padding-left: calc(50% + 40px);
    transform: translateX(30px);
}

.timeline-item:nth-child(even).visible {
    transform: translateX(0);
}

/* Timeline Icon/Badge */
.timeline-icon {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), #ff9a44);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    border: 4px solid rgba(45, 41, 41, 1);
    box-shadow: 0 4px 15px rgba(255, 124, 0, 0.4);
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-item:hover .timeline-icon {
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(255, 124, 0, 0.6);
}

/* Latest/Most Recent Highlight */
.timeline-item.latest .timeline-icon {
    width: 70px;
    height: 70px;
    font-size: 32px;
    border-width: 5px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(255, 124, 0, 0.4);
    }
    50% {
        box-shadow: 0 6px 25px rgba(255, 124, 0, 0.8);
    }
}

/* Content Card */
.timeline-content {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 24px;
    max-width: 450px;
    position: relative;
    transition: all 0.3s ease;
}

.timeline-content::before {
    content: '';
    position: absolute;
    top: 30px;
    right: -10px;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transform: rotate(45deg);
    backdrop-filter: blur(10px);
}

.timeline-item:nth-child(even) .timeline-content::before {
    right: auto;
    left: -10px;
}

.timeline-item:hover .timeline-content {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 124, 0, 0.3);
}

/* Timeline Content Elements */
.timeline-content h3 {
    color: var(--primary-color);
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.timeline-date {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85em;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.timeline-date::before {
    content: '\1F4C5';
    font-size: 1.1em;
}

.timeline-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95em;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.timeline-points {
    display: inline-block;
    background: rgba(255, 124, 0, 0.15);
    border: 1px solid rgba(255, 124, 0, 0.3);
    border-radius: 20px;
    padding: 6px 16px;
    color: var(--primary-color);
    font-size: 0.9em;
    font-weight: 600;
}

/* Category Badge */
.timeline-category {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Time Period Headers */
.timeline-period {
    text-align: center;
    padding: 20px 0 40px 0;
    position: relative;
    z-index: 3;
}

.timeline-period h4 {
    display: inline-block;
    background: rgba(45, 41, 41, 0.95);
    padding: 10px 24px;
    border-radius: 30px;
    color: var(--primary-color);
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 2px solid rgba(255, 124, 0, 0.3);
}

/* No Milestones State */
.no-milestones-timeline {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.no-milestones-timeline .empty-state-icon {
    font-size: 48px;
    margin-bottom: 20px;
    color: rgba(255, 124, 0, 0.25);
}

.no-milestones-timeline h3 {
    font-size: 1.3em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 10px 0;
}

.no-milestones-timeline p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.95em;
}

/* Loading Skeleton */
.timeline-skeleton {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px 20px;
}

.timeline-skeleton-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding-left: calc(50% + 40px);
}

.timeline-skeleton-item:nth-child(even) {
    padding-left: 0;
    padding-right: calc(50% + 40px);
    flex-direction: row-reverse;
}

.skeleton-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-content {
    flex: 1;
    max-width: 450px;
}

.skeleton-line {
    height: 20px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 10px;
}

.skeleton-line.short {
    width: 60%;
}

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

/* ============================================================================ */
/* TIMELINE RESPONSIVE DESIGN */
/* ============================================================================ */

@media (max-width: 1200px) {
    #milestonesTimeline {
        /* Keep for backward compatibility */
    }
}

@media (max-width: 768px) {
    /* Stack timeline vertically on mobile */
    .timeline-line {
        left: 30px;
    }

    .timeline-item,
    .timeline-item:nth-child(even) {
        padding-left: 80px;
        padding-right: 0;
        justify-content: flex-start;
    }

    .timeline-icon {
        left: 30px;
    }

    .timeline-content::before {
        right: auto;
        left: -10px;
    }

    .timeline-content {
        max-width: 100%;
    }

    .timeline-item.latest .timeline-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .timeline-skeleton-item,
    .timeline-skeleton-item:nth-child(even) {
        padding-left: 80px;
        padding-right: 0;
        flex-direction: row;
    }

    .level-progress-grid {
        grid-template-columns: 1fr;
    }

    .achievements-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* Legacy styles for backward compatibility */
.milestone-entry {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}

.milestone-entry:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.milestone-title {
    color: white;
    font-size: 1.1em;
    font-weight: 500;
    margin-bottom: 6px;
    line-height: 1.3;
}

.milestone-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95em;
    line-height: 1.5;
    flex-grow: 1;
    margin-bottom: 10px;
}

/* Additional Achievement Responsive */
@media (max-width: 768px) {
    .level-progress-card {
        grid-template-columns: 1fr;
    }

    .level-requirements {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        padding-top: 2rem;
    }

    .achievements-container {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

.no-requirements,
.no-milestones {
    text-align: center;
    padding: 32px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* Achievement Section Styles (duplicate consolidation) */
.achievement-section {
    display: grid;
    gap: 2rem;
    margin-top: 2rem;
}

/* Achievement Modal */
.achievement-modal .modal-content {
    max-width: 600px;
    background: #2a2a2a;
    border-top: 4px solid var(--primary-color);
}

.ach-modal-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.ach-modal-header h1 {
    font-size: 1.8rem;
    margin: 0 0 0.5rem 0;
    color: var(--primary-color);
}

.ach-modal-header p {
    font-size: 1rem;
    color: var(--text-dim);
    line-height: 1.5;
}

.ach-modal-icon-container {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.ach-modal-icon-container .section-icon {
    font-size: 3rem;
    width: 80px;
    height: 80px;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ach-modal-section {
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.ach-modal-section h2 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.req-list { display: flex; flex-direction: column; gap: 0.75rem; }
.req-item { display: flex; justify-content: space-between; align-items: center; }
.req-item-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; }
.req-item-name { font-weight: 500; }
.progress-bar-container { height: 8px; background: rgba(0,0,0,0.3); border-radius: 4px; }
.progress-bar-fill { height: 100%; background: var(--primary-color); border-radius: 4px; transition: width 0.3s; }
.req-item-progress.complete .progress-bar-fill { background: #2ecc71; }

/* Legacy status classes (backward compat) */
.earned-status {
    color: #4CAF50;
}
.locked-status {
    color: rgba(255, 255, 255, 0.5);
}
.checkmark {
    color: #4CAF50;
    margin-right: 4px;
}
.lock-icon {
    opacity: 0.5;
    margin-right: 4px;
}

/* Level Progress Grid */
.level-progress-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(0, 1.6fr);
    gap: 2rem;
    align-items: start;
}

@media (max-width: 992px) {
    .level-progress-grid { grid-template-columns: 1fr; }
}

/* Styling for both cards */
.level-card, .requirements-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
}

.current-level-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

.level-badge-large {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background-color: #1c1c1c;
    border: 4px solid #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
    box-shadow: 0 0 25px rgba(0,0,0,0.5), inset 0 0 15px rgba(0,0,0,0.4);
}

.level-badge-large::after {
    content: '';
    position: absolute;
    top: -8px; left: -8px; right: -8px; bottom: -8px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    filter: blur(5px);
    opacity: 0.8;
}

.level-badge-icon { font-size: 3rem; margin-bottom: 0.5rem; color: #9c27b0; }
.level-badge-name { font-size: 2rem; font-weight: 600; line-height: 1.1; color: var(--primary-color); }
.level-badge-progress { font-size: 1rem; color: var(--text-dim); }
.level-badge-next { font-size: 0.8rem; color: #888; margin-top: 4px; }

.requirements-list-container { display: flex; flex-direction: column; gap: 0.75rem; }

.requirement-item-alt {
    background: rgba(0,0,0,0.2);
    padding: 1rem;
    border-radius: 8px;
    border-left: 3px solid #555;
}

.requirement-item-alt.complete { border-left-color: #2ecc71; }

.req-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.req-name { display: flex; align-items: center; gap: 0.75rem; font-weight: 500; font-size: 1.1rem; color: ghostwhite; }
.req-name i { color: var(--text-dim); }
.req-progress-percent { font-size: 0.9rem; color: var(--text-dim); }
.req-details { font-size: 0.85rem; color: #888; margin-bottom: 0.5rem; }
.req-progress-bar { height: 6px; background: #444; border-radius: 3px; overflow: hidden; }
.req-progress-fill { height: 100%; background: var(--primary-color); border-radius: 3px; width: 0%; transition: width 0.5s ease; }
.requirement-item-alt.complete .req-progress-fill { background-color: #2ecc71; }

/* Section headers inside the cards */
.section-header-alt {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.level-text {
    font-size: 24px;
    color: #ff7c00;
    margin-bottom: 16px;
}

.level-progress {
    width: 80%;
    margin: 0 auto;
}

.achievements-layout {
    display: grid;
    gap: 16px;
}

@media (max-width: 768px) {
    .classes-grid,
    .level-progress-grid {
        grid-template-columns: 1fr;
    }
}


/* === student-portal/css/student-portal-media.css === */
/* student-portal-media.css - Media gallery, slider, file upload, viewer */

.media-slider-slides::-webkit-scrollbar {
    display: none;
}

.slider-card {
    aspect-ratio: 16 / 6 !important;
    width: 400px;
    flex-shrink: 0;
}

.slider-slide img, .slider-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Re-use the card overlay style for the slides */
.slider-slide .media-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
    color: white;
}

/* Viewer Download Button */
.download-button-viewer {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 1rem;
    font-size: 0.9rem;
}

/* Photo Gallery Styles */
.photo-slider-section {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 32px;
    margin: 32px 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* The Fullscreen Viewer */
.media-viewer {
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.9);
}

.media-viewer.show { display: flex; }

.viewer-content {
    position: relative;
    width: 90vw;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.viewer-content img, .viewer-content video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.viewer-info {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.5);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    color: white;
    text-align: center;
}

.close-viewer, .viewer-nav {
    position: absolute;
    background: rgba(0,0,0,0.3);
    border: 1px solid #555;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
}

.close-viewer { top: 1rem; right: 1rem; }
.viewer-nav { top: 50%; transform: translateY(-50%); }
.viewer-nav.prev { left: 1rem; }
.viewer-nav.next { right: 1rem; }

/* Preview Section */
.media-preview {
    position: relative;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 2rem;
}

.preview-container {
    position: relative;
    aspect-ratio: 16/9;
}

.preview-media {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.5s ease;
    opacity: 0;
}

.preview-media.active {
    opacity: 1;
}

.preview-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    color: white;
}

/* Navigation Controls */
.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 124, 0, 0.3);
    color: white;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.nav-button:hover {
    background: rgba(255, 124, 0, 0.6);
}

.nav-button.prev {
    left: 1rem;
}

.nav-button.next {
    right: 1rem;
}

/* Fullscreen Toggle */
.fullscreen-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 124, 0, 0.3);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fullscreen-toggle:hover {
    background: rgba(255, 124, 0, 0.6);
}

.fullscreen-image-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.fullscreen-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.fullscreen-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 9999;
}

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

.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    z-index: 10000;
}

.fullscreen-content {
    position: relative;
    width: 90vw;
    height: 90vh;
    display: flex;
    flex-direction: column;
}

.fullscreen-content img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

.fullscreen-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 124, 0, 0.3);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    transition: background 0.3s ease;
    z-index: 2001;
}

.fullscreen-nav:hover {
    background: rgba(255, 124, 0, 0.6);
}

.fullscreen-nav.prev {
    left: 20px;
}

.fullscreen-nav.next {
    right: 20px;
}

.fullscreen-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px;
}

.fullscreen-description {
    font-size: 1.1em;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
}

.fullscreen-date {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 12px;
}

.fullscreen-metadata {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.fullscreen-tags {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
}

@media (max-width: 768px) {
    .fullscreen-image-container {
        bottom: 120px;
    }

    .fullscreen-info {
        padding: 15px;
    }

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

    .download-button {
        margin-top: 8px;
        width: 100%;
        justify-content: center;
    }
}

/* Upload Media Modal */
.form-group label[for="mediaFile"] {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

.form-group label[for="mediaFile"]:hover {
    background-color: var(--primary-hover);
}

/* Hide the default ugly input */
input[type="file"]#mediaFile {
    display: none;
}

#fileNameDisplay {
    margin-top: 0.5rem;
    color: var(--text-dim);
    font-style: italic;
}

/* Styles for the Upload Media Modal */
.file-preview {
    margin-top: 1rem;
    max-height: 200px;
    width: 100%;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    display: none;
    align-items: center;
    justify-content: center;
}

.file-preview img, .file-preview video {
    max-height: 200px;
    max-width: 100%;
    border-radius: 8px;
}

.progress-container {
    width: 100%;
    height: 20px;
    background-color: rgba(0,0,0,0.3);
    border-radius: 10px;
    margin: 1rem 0;
    position: relative;
    overflow: hidden;
}

.progress-bar-upload {
    width: 0%;
    height: 100%;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

#uploadProgressText {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Modal Media Container */
.modal-media-container {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    aspect-ratio: 16/9;
}

.modal-media {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.modal-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
}

.modal-details {
    margin-top: 16px;
}

.modal-description {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.modal-upload-date {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

/* Download Button */
.download-button {
    background: rgba(255, 124, 0, 0.3);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    font-size: 14px;
    line-height: 1;
    height: 36px;
    margin-left: 16px;
}

.download-button:hover {
    background: rgba(255, 124, 0, 0.6);
}

.download-button svg {
    width: 16px;
    height: 16px;
}

/* Slider Wrapper */
.slider-wrapper {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    height: 700px;
    overflow: hidden;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
}

.slide.active {
    opacity: 1;
}

/* Transition Classes */
.slide-prev {
    transform: translateX(-100%);
    opacity: 0;
}

.slide-next {
    transform: translateX(100%);
    opacity: 0;
}

.slide-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.slide-caption {
    font-size: 1.1em;
    margin-bottom: 8px;
}

.slide-date {
    font-size: 0.9em;
    opacity: 0.8;
    margin-bottom: 8px;
}

.slide-metadata {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.student-tag,
.photo-tag {
    background: rgba(255, 124, 0, 0.3);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8em;
}

.photo-id {
    font-family: monospace;
    color: #ff7c00;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: 4px;
    margin: 8px 0;
}

.photo-tag {
    background: rgba(255, 124, 0, 0.3);
    border: 1px solid rgba(255, 124, 0, 0.5);
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.9em;
    color: white;
}

.info-content {
    flex-grow: 1;
}

.dots-container {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 10;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: #ff7c00;
    width: 24px;
    border-radius: 4px;
}

.prev { left: 20px; }
.next { right: 20px; }

.zoom-controls {
    display: flex;
    gap: 10px;
    margin: 0 20px;
}

.zoom-button {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 124, 0, 0.3);
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.zoom-button:hover {
    background: rgba(255, 124, 0, 0.6);
}

/* Accessibility */
.nav-button:focus,
.fullscreen-toggle:focus,
.zoom-button:focus {
    outline: 2px solid #ff7c00;
    outline-offset: 2px;
}

.media-card:focus-visible {
    outline: 2px solid #ff7c00;
    outline-offset: 2px;
}

/* High Contrast Mode */
@media (forced-colors: active) {
    .nav-button,
    .fullscreen-toggle,
    .zoom-button {
        border: 2px solid ButtonText;
    }

    .media-card {
        border: 2px solid ButtonText;
    }
}

/* Media Responsive */
@media (max-width: 768px) {
    .slider-wrapper {
        height: 400px;
    }

    .media-image {
        height: 200px;
    }

    .slider-nav {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .fullscreen-info {
        padding: 15px;
        flex-direction: column;
        align-items: flex-start;
    }

    .zoom-button {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .download-button {
        margin-left: 0;
        margin-top: 12px;
        width: 100%;
        justify-content: center;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .media-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .media-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .preview-container {
        aspect-ratio: 4/3;
    }

    .nav-button {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .fullscreen-toggle {
        width: 32px;
        height: 32px;
    }

    .zoom-controls {
        bottom: 20px;
    }

    .zoom-button {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .modal-media-container {
        max-height: 80vh;
    }
}

@media (max-width: 480px) {
    .photo-slider-section {
        padding: 16px;
    }

    .media-grid {
        gap: 1rem;
    }

    .media-thumbnail {
        height: 150px;
    }

    .preview-info,
    .modal-info {
        padding: 1rem;
    }
}

/* Section Headers for Media Tab */
#tab-media h2 { margin-bottom: 1rem; }

.section-container .section-header {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
}

/* Interactive Slider (final section) */
.media-slider-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    border-radius: 12px;
    overflow: hidden;
    background-color: #1c1c1c;
}

.media-slider-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.slider-slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    cursor: pointer;
    background-size: cover;
    background-position: center;
}

.slider-slide.active { opacity: 1; }

/* Navigation Arrows for Slider (final section) */
.slider-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2);
    color: white; width: 40px; height: 40px; border-radius: 50%;
    font-size: 1.2rem; cursor: pointer; transition: background-color 0.2s ease;
    display: flex; align-items: center; justify-content: center;
}

.slider-nav:hover { background: rgba(0,0,0,0.6); }
.slider-nav.prev { left: 1rem; }
.slider-nav.next { right: 1rem; }

/* All Media Grid (final section) */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Unified Card Style for Grid (final section) */
.media-card {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background-color: #1c1c1c;
}

.media-card:hover { transform: scale(1.03); }
.media-card img, .media-card video { width: 100%; height: 100%; object-fit: cover; }

/* Overlay for both Slider and Grid Cards (final section) */
.media-card-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, transparent 100%);
    color: white;
}

.media-card-overlay .description { font-size: 1rem; font-weight: 600; margin: 0; }
.media-card-overlay .upload-date { font-size: 0.8rem; opacity: 0.8; margin-top: 0.25rem; }

.play-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 3.5rem; color: rgba(255, 255, 255, 0.9); pointer-events: none;
    text-shadow: 0 0 15px rgba(0,0,0,0.5);
}

/* Upload Drop Zone */
.upload-drop-zone {
    border: 2px dashed rgba(255, 124, 0, 0.4);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    position: relative;
    background: rgba(255, 124, 0, 0.03);
    margin-bottom: 1rem;
}
.upload-drop-zone:hover,
.upload-drop-zone.drag-over {
    border-color: var(--primary-color);
    background: rgba(255, 124, 0, 0.08);
}
.upload-drop-zone > i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    display: block;
}
.upload-drop-zone p {
    margin: 0.5rem 0 0.25rem;
    color: var(--text-primary);
}
.upload-drop-zone .upload-formats {
    font-size: 0.8rem;
    color: var(--text-dim);
}
.upload-drop-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.file-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-dim);
    padding: 0.5rem 0;
}
#uploadMediaModal .modal-title i {
    margin-right: 0.5rem;
}
#uploadMediaModal .file-preview {
    margin-bottom: 1rem;
}
#uploadSubmitBtn i {
    margin-right: 0.4rem;
}


/* === student-portal/css/student-portal-messaging.css === */
/* student-portal-messaging.css - Messaging UI, audio player */

/* ============================== */
/* Messaging Layout               */
/* ============================== */
.messaging-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-lg);
    height: calc(100vh - 250px);
    min-height: 500px;
}

/* ============================== */
/* Conversations Sidebar          */
/* ============================== */
.conversations-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.conversations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
    flex-shrink: 0;
}

.conversations-header h3 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    color: var(--text-light);
}

.conversation-search-input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    margin-bottom: var(--space-md);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: white;
    font-size: var(--font-sm);
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
}

.conversation-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.conversation-search-input:focus {
    outline: none;
    border-color: var(--border-focus);
}

.new-message-btn {
    padding: 8px 16px;
    font-size: var(--font-sm);
    background: var(--primary-color);
    color: #000;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.new-message-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 124, 0, 0.3);
}

.conversations-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.conversations-list::-webkit-scrollbar {
    width: 6px;
}

.conversations-list::-webkit-scrollbar-track {
    background: transparent;
}

.conversations-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.conversations-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ============================== */
/* Conversation Skeleton Loading  */
/* ============================== */
.conversation-skeleton {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
}

.conversation-skeleton .skeleton-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.conversation-skeleton .skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ============================== */
/* Conversation Item              */
/* ============================== */
.conversation-item {
    padding: 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius-md);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all var(--transition-base);
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.conversation-item:hover {
    background: var(--surface-hover);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.conversation-item.active {
    background: var(--surface-active);
    border-color: rgba(255, 124, 0, 0.35);
}

/* Avatar Circle */
.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: #000;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.avatar-circle.small {
    width: 32px;
    height: 32px;
    font-size: 0.7rem;
}

.conversation-item-content {
    flex: 1;
    min-width: 0;
}

.conversation-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.conversation-item-name {
    font-weight: 600;
    color: var(--text-light);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Unread conversation bold styling */
.conversation-item.unread .conversation-item-name {
    color: #fff;
    font-weight: 700;
}

.conversation-item.unread .conversation-item-preview {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
}

.conversation-item-preview {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.83em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.conversation-item-time {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72em;
    margin-top: 4px;
}

/* ============================== */
/* Role Badges                    */
/* ============================== */
.role-badge {
    font-size: 0.68em;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.role-badge-owner {
    background: var(--primary-color);
    color: #000;
}

.role-badge-admin {
    background: rgba(76, 175, 80, 0.8);
    color: white;
}

.role-badge-teacher {
    background: rgba(33, 150, 243, 0.8);
    color: white;
}

/* ============================== */
/* Unread Badge                   */
/* ============================== */
.unread-badge {
    background: var(--primary-color);
    color: #000;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.73em;
    font-weight: 700;
    flex-shrink: 0;
}

/* ============================== */
/* Thread Panel                   */
/* ============================== */
.thread-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.thread-panel-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.thread-header {
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--space-md);
    margin-bottom: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.thread-header h3 {
    margin: 0;
    color: var(--text-light);
    font-size: 1.1rem;
}

/* Mobile back button */
.thread-back-btn {
    display: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.thread-back-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary-color);
}

/* ============================== */
/* Message Thread                 */
/* ============================== */
.thread-messages {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--space-md) 0;
    min-height: 0;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.thread-messages::-webkit-scrollbar {
    width: 6px;
}

.thread-messages::-webkit-scrollbar-track {
    background: transparent;
}

.thread-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.thread-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ============================== */
/* Date Separator                 */
/* ============================== */
.date-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
}

.date-separator::before,
.date-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.date-separator span {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* ============================== */
/* Message Rows & Bubbles         */
/* ============================== */
.message-row {
    max-width: 75%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.message-row.sent {
    align-self: flex-end;
}

.message-row.received {
    align-self: flex-start;
}

.message-bubble {
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
    font-size: 0.9rem;
}

.message-row.sent .message-bubble {
    background: linear-gradient(135deg, #ff7c00, #ff9a44);
    color: #000;
    border-bottom-right-radius: var(--radius-sm);
}

.message-row.received .message-bubble {
    background: var(--surface-glass);
    color: var(--text-light);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom-left-radius: var(--radius-sm);
}

.message-time {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.72em;
    margin-top: 4px;
    padding: 0 8px;
}

.message-row.sent .message-time {
    text-align: right;
}

/* Read receipt checkmarks */
.message-read-receipt {
    font-size: 0.75em;
    margin-left: 4px;
    opacity: 0.5;
}

.message-read-receipt.read {
    opacity: 1;
    color: #4fc3f7;
}

/* Grouped timestamps — hidden on non-last messages in a group */
.message-row.grouped .message-time {
    display: none;
}

/* Auto-linked URLs */
.message-bubble a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.message-bubble a:hover {
    opacity: 0.8;
}

.message-row.received .message-bubble a {
    color: var(--primary-color);
}

/* Pending / failed states */
.message-row.pending {
    opacity: 0.6;
}

.message-row.pending .message-time::before {
    content: '\f017';
    font-family: 'Font Awesome 6 Free';
    font-weight: 400;
    margin-right: 4px;
    font-size: 0.9em;
}

.message-row.failed .message-bubble {
    border: 1px solid rgba(255, 80, 80, 0.5);
}

.message-row.failed .message-time {
    color: rgba(255, 80, 80, 0.7);
}

/* ============================== */
/* Scroll-to-Bottom Button        */
/* ============================== */
.scroll-to-bottom-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #000;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.scroll-to-bottom-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.scroll-to-bottom-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

/* ============================== */
/* Reply Form                     */
/* ============================== */
.reply-form-container {
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-md);
    flex-shrink: 0;
}

.reply-form {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.reply-input-wrapper {
    flex: 1;
    position: relative;
}

.reply-textarea {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-light);
    resize: none;
    font-family: inherit;
    font-size: 0.9rem;
    max-height: 150px;
    line-height: 1.5;
    transition: border-color var(--transition-base);
    box-sizing: border-box;
}

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

.reply-textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Character count */
.char-count {
    position: absolute;
    bottom: 6px;
    right: 10px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
    pointer-events: none;
    transition: color var(--transition-fast);
}

.char-count.warning {
    color: #f0ad4e;
}

.char-count.limit {
    color: #ff5050;
    font-weight: 600;
}

.send-btn {
    padding: 12px 20px;
    background: var(--primary-color);
    color: #000;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.send-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 124, 0, 0.3);
}

.send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================== */
/* Empty Thread State             */
/* ============================== */
.thread-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

.thread-empty-state svg {
    width: 120px;
    height: 120px;
    margin-bottom: 1.5rem;
    opacity: 0.35;
}

.thread-empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.4;
}

.thread-empty-state .empty-state-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.5);
}

.thread-empty-state .empty-state-message {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.35);
}

/* Sidebar empty state */
.conversations-list .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--space-md);
    text-align: center;
}

.conversations-list .empty-state i {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: var(--space-md);
}

.conversations-list .empty-state .empty-state-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.25rem;
}

.conversations-list .empty-state .empty-state-message {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.35);
}

/* ============================== */
/* New Message Modal Overrides    */
/* ============================== */
.new-msg-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.new-msg-form label {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 4px;
    display: block;
    font-size: var(--font-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.new-msg-form select,
.new-msg-form textarea {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    color: var(--text-light);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color var(--transition-base);
}

.new-msg-form select:focus,
.new-msg-form textarea:focus {
    outline: none;
    border-color: var(--border-focus);
}

.new-msg-form select option {
    background: var(--background-dark);
    color: var(--text-light);
}

.new-msg-form textarea {
    resize: vertical;
    min-height: 120px;
}

.new-msg-form .form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* ============================== */
/* Audio Player Card              */
/* ============================== */
.audio-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: var(--radius-md);
    height: 100%;
}

.audio-icon {
    flex-shrink: 0;
    font-size: 2rem;
    color: var(--primary-color);
}

.audio-info h4 {
    color: ghostwhite;
    font-size: 1.1rem;
    margin: 0 0 4px 0;
}

.audio-info p {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin: 0;
}

.audio-chord-progression {
    font-size: 0.95rem;
    color: var(--primary-color);
    margin: 0.5rem 0;
    padding: 0.5rem;
    background: rgba(255, 124, 0, 0.1);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
}

.audio-chord-progression strong {
    color: var(--text-light);
    margin-right: 0.5rem;
}

.audio-player {
    width: 100%;
    margin-top: 0.75rem;
}

.audio-player::-webkit-media-controls-panel {
    background-color: rgba(255, 124, 0, 0.2);
}

.audio-player::-webkit-media-controls-play-button,
.audio-player::-webkit-media-controls-mute-button {
    background-color: var(--primary-color);
    border-radius: 50%;
}

/* ============================== */
/* Emoji Reaction Picker          */
/* ============================== */
.reaction-picker {
    position: absolute;
    bottom: 100%;
    margin-bottom: 6px;
    display: flex;
    gap: 2px;
    padding: 6px 10px;
    background: rgba(30, 30, 35, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px) scale(0.95);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 20;
}

/* Invisible bridge that fills the gap between picker and bubble so hover doesn't break */
.reaction-picker::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
}

.message-row.sent .reaction-picker {
    right: 0;
}

.message-row.received .reaction-picker {
    left: 0;
}

/* Desktop: show picker on hover */
@media (hover: hover) {
    .message-row:hover .reaction-picker {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }
}

/* Mobile: show picker via JS class */
.message-row.picker-visible .reaction-picker {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.reaction-picker button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 4px 6px;
    border-radius: 8px;
    line-height: 1;
    transition: transform 0.12s ease, background 0.12s ease;
}

.reaction-picker button:hover {
    transform: scale(1.3);
    background: rgba(255, 255, 255, 0.1);
}

.reaction-picker button:active {
    transform: scale(1.1);
}

/* ============================== */
/* Emoji Reaction Pills           */
/* ============================== */
.message-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    padding: 0 4px;
}

.message-row.sent .message-reactions {
    justify-content: flex-end;
}

.message-row.received .message-reactions {
    justify-content: flex-start;
}

.reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1.4;
    user-select: none;
}

.reaction-pill:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.18);
}

.reaction-pill .reaction-emoji {
    font-size: 0.9rem;
    line-height: 1;
}

.reaction-pill .reaction-count {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    font-size: 0.72rem;
}

.reaction-pill.user-reacted {
    background: rgba(255, 124, 0, 0.15);
    border-color: rgba(255, 124, 0, 0.35);
}

.reaction-pill.user-reacted .reaction-count {
    color: var(--primary-color);
}

/* Long-press feedback on mobile */
.message-row.long-press-active .message-bubble {
    transform: scale(0.98);
    transition: transform 0.15s ease;
}

/* ============================== */
/* Responsive: Messaging          */
/* ============================== */
@media (max-width: 768px) {
    .messaging-layout {
        grid-template-columns: 1fr;
        height: auto;
        min-height: auto;
    }

    .conversations-sidebar {
        max-height: none;
        min-height: 300px;
    }

    .conversations-sidebar.mobile-hidden {
        display: none;
    }

    .thread-panel {
        min-height: 400px;
    }

    #threadPanel {
        display: none;
    }

    #threadPanel.mobile-active {
        display: flex;
    }

    .thread-back-btn {
        display: flex;
    }

    .message-row {
        max-width: 85%;
    }

    .reaction-picker button {
        font-size: 1.5rem;
        padding: 6px 8px;
    }

    .reaction-pill {
        padding: 4px 10px;
        font-size: 0.82rem;
    }
}

@media (max-width: 480px) {
    .reply-form {
        flex-direction: column;
    }

    .reply-input-wrapper {
        width: 100%;
    }

    .reply-textarea {
        width: 100%;
    }

    .send-btn {
        align-self: flex-end;
    }

    .message-row {
        max-width: 90%;
    }
}


/* === student-portal/css/student-portal-resources.css === */
/* student-portal-resources.css - Resource cards, songwriter tab, subscriptions, shop */

/* ============================================================================
   SEARCH BAR
   ============================================================================ */
.resource-search-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
}

.resource-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.4);
    font-size: 0.9rem;
    pointer-events: none;
}

.resource-search-input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: white;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.resource-search-input::placeholder {
    color: rgba(255,255,255,0.4);
}

.resource-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(0,0,0,0.3);
}

/* ============================================================================
   RESOURCE COUNT BADGES
   ============================================================================ */
.resource-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    margin-left: 8px;
}

/* ============================================================================
   COLLAPSIBLE SECTIONS
   ============================================================================ */
.resource-section-toggle {
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-chevron {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
    transition: transform 0.3s ease;
}

.resource-section.collapsed .section-chevron {
    transform: rotate(-90deg);
}

.resource-section.collapsed .resource-grid {
    display: none !important;
}

/* ============================================================================
   RESOURCE GRID
   ============================================================================ */
.resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Video cards in grid should maintain aspect ratio */
#resources-videos.resource-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 400px));
    justify-content: start;
}

/* Backing tracks: vertical list instead of grid */
#resources-backing-tracks.resource-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Make the whole card a clickable link */
.resource-item-link {
    text-decoration: none;
    color: inherit;
}

.resource-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    height: 100%;
}

.resource-item:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.resource-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    font-size: 1.8rem;
    color: var(--primary-color);
}

.resource-item-info h4 {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-light);
    margin: 0 0 4px 0;
}

.resource-item-info p {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin: 0;
}

/* ============================================================================
   AUDIO / BACKING TRACK CARDS
   ============================================================================ */
.audio-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.audio-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,124,0,0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.audio-icon {
    flex-shrink: 0;
    font-size: 1.8rem;
    line-height: 1;
    padding-top: 2px;
}

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

.audio-info h4 {
    margin: 0 0 4px 0;
    color: var(--text-light);
    font-size: 1.05rem;
    font-weight: 600;
}

.audio-info p {
    margin: 0 0 8px 0;
    color: var(--text-dim);
    font-size: 0.85rem;
}

.audio-chord-progression {
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    background: rgba(0,0,0,0.2);
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-block;
}

.audio-chord-progression strong {
    color: var(--primary-color);
    margin-right: 4px;
}

.audio-player {
    width: 100%;
    height: 36px;
    border-radius: 6px;
    filter: invert(1) hue-rotate(180deg) brightness(0.8);
}

/* ============================================================================
   VIDEO CARDS
   ============================================================================ */
.video-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    background: #1e1e1e;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
    height: 100%;
}

.video-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(255,124,0,0.3);
}

.video-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-thumbnail--placeholder {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-overlay {
    width: 80px;
    height: 80px;
    background: rgba(255, 124, 0, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

.play-overlay--centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video-card:hover .play-overlay {
    transform: scale(1.15);
    background: rgba(255, 124, 0, 1);
}

.video-card:hover .play-overlay--centered {
    transform: translate(-50%, -50%) scale(1.15);
    background: rgba(255, 124, 0, 1);
}

.play-overlay i {
    color: white;
    font-size: 32px;
    margin-left: 4px;
}

.video-card-body {
    padding: 1.25rem;
    background: #1e1e1e;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.video-card-category {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.video-card-category i {
    color: #ff7c00;
    font-size: 0.9rem;
}

.video-card-category span {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.video-card-body h4 {
    margin: 0 0 0.75rem 0;
    color: #fff;
    font-size: 1.1em;
    line-height: 1.3;
    font-weight: 600;
}

.video-card-description {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9em;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-card-linked {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.video-card-linked i {
    color: #ff7c00;
    font-size: 0.8rem;
}

.video-card-linked span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85em;
}

/* ============================================================================
   VIDEO MODAL
   ============================================================================ */
.video-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.video-modal-content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    background: #1e1e1e;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

.video-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: #2d2929;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.video-modal-header h3 {
    margin: 0;
    color: white;
    font-size: 1.2rem;
}

.video-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.video-modal-close:hover {
    background: rgba(255,255,255,0.1);
}

.video-modal-player {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: #000;
}

.video-modal-player iframe,
.video-modal-player video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================================================
   LOADING SKELETONS
   ============================================================================ */
.resource-skeleton-card {
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 75%);
    background-size: 200% 100%;
    animation: resourceShimmer 1.5s infinite;
    border-radius: 8px;
    height: 72px;
}

.resource-skeleton-card--video {
    height: 260px;
    border-radius: 16px;
}

.resource-skeleton-card--audio {
    height: 90px;
    border-radius: 12px;
}

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

/* ============================================================================
   "NEW" BADGES
   ============================================================================ */
.new-badge {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}

.video-card .new-badge,
.audio-card .new-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    margin-left: 0;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* ============================================================================
   SONGWRITER TAB
   ============================================================================ */
.songwriter-tab-button {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    color: rgba(255, 255, 255, 0.7);
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.songwriter-tab-button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 124, 0, 0.3);
}

.songwriter-tab-button.active {
    background: rgba(255, 124, 0, 0.2);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}

.songwriter-tab-button i {
    font-size: 1rem;
}

/* Songwriter Resource Card */
.songwriter-resource-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.songwriter-resource-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 124, 0, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.songwriter-resource-card h4 {
    color: var(--primary-color);
    margin: 0 0 0.75rem 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.songwriter-resource-card p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1rem 0;
    line-height: 1.6;
}

.songwriter-resource-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.songwriter-resource-links .button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Video Resource Card (link wrapper) */
.video-resource-card {
    text-decoration: none;
    display: block;
    cursor: pointer;
    width: 100%;
    max-width: 400px;
}

/* ============================================================================
   SONGWRITER — DISCORD CTA
   ============================================================================ */
.songwriter-discord-cta {
    background: linear-gradient(135deg, rgba(114, 137, 218, 0.2) 0%, rgba(114, 137, 218, 0.05) 100%);
    border: 2px solid rgba(114, 137, 218, 0.3);
}
.songwriter-discord-cta .cta-inner { padding: 1.5rem; text-align: center; }
.songwriter-discord-cta .cta-icon { font-size: 3rem; color: #7289DA; margin-bottom: 1rem; }
.songwriter-discord-cta h3 { margin-bottom: 0.5rem; color: #fff; }
.songwriter-discord-cta p { margin-bottom: 1.5rem; color: rgba(255,255,255,0.8); max-width: 600px; margin-inline: auto; }
.songwriter-discord-cta .button { display: inline-block; text-decoration: none; background: #7289DA; }

/* ============================================================================
   SONGWRITER — PLACEHOLDER CARDS
   ============================================================================ */
.songwriter-placeholder-card {
    border: 2px dashed rgba(255, 124, 0, 0.3);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(255, 124, 0, 0.1) 0%, rgba(255, 124, 0, 0.05) 100%);
}
.songwriter-placeholder-card > i { font-size: 3rem; color: var(--primary-color); margin-bottom: 1rem; opacity: 0.6; display: block; }
.songwriter-placeholder-card h4 { color: rgba(255,255,255,0.8); margin-bottom: 0.5rem; }
.songwriter-placeholder-card p { color: rgba(255,255,255,0.5); font-size: 0.9em; }

/* Colored variants */
.songwriter-placeholder-card.purple {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(156, 39, 176, 0.05) 100%);
    border-color: rgba(156, 39, 176, 0.3);
}
.songwriter-placeholder-card.purple > i { color: #9C27B0; }
.songwriter-placeholder-card.green {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
    border-color: rgba(76, 175, 80, 0.3);
}
.songwriter-placeholder-card.green > i { color: #4CAF50; }

/* ============================================================================
   SONGWRITER — SECTION HELPERS
   ============================================================================ */
.songwriter-section-subtitle {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--text-dim);
}

.songwriter-tab-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.songwriter-tab-scroll {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.25rem 0.25rem 0.5rem;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 124, 0, 0.35) rgba(255, 255, 255, 0.05);
}
/* Webkit custom scrollbar — thin glass track + orange-tinted thumb */
.songwriter-tab-scroll::-webkit-scrollbar { height: 6px; }
.songwriter-tab-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}
.songwriter-tab-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 124, 0, 0.35);
    border-radius: 3px;
}
.songwriter-tab-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 124, 0, 0.55);
}

/* Fade hints for horizontal overflow */
.songwriter-tab-wrapper::before,
.songwriter-tab-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    pointer-events: none;
    z-index: 2;
    border-radius: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.songwriter-tab-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(30, 30, 30, 0.9), transparent);
}
.songwriter-tab-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(30, 30, 30, 0.9), transparent);
}
.songwriter-tab-wrapper.scroll-left::before { opacity: 1; }
.songwriter-tab-wrapper.scroll-right::after { opacity: 1; }

/* Glassmorphism tab buttons (override base styles inside the wrapper) */
.songwriter-tab-scroll .songwriter-tab-button {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.25s ease;
}
.songwriter-tab-scroll .songwriter-tab-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 124, 0, 0.25);
    box-shadow: 0 2px 12px rgba(255, 124, 0, 0.1);
}
.songwriter-tab-scroll .songwriter-tab-button.active {
    background: rgba(255, 124, 0, 0.15);
    border-color: rgba(255, 124, 0, 0.4);
    box-shadow: 0 2px 16px rgba(255, 124, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.songwriter-placeholder-grid { display: grid; gap: 1rem; }
.songwriter-resource-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* ============================================================================
   SONGWRITER — STATUS BANNER (restricted view)
   ============================================================================ */
.songwriter-status-banner {
    border: 2px solid rgba(255, 167, 38, 0.3);
    background: linear-gradient(135deg, rgba(255, 167, 38, 0.2) 0%, rgba(255, 167, 38, 0.05) 100%);
}
.songwriter-status-banner .cta-inner { padding: 2rem; text-align: center; }
.songwriter-status-banner .cta-icon { font-size: 3rem; color: #FFA726; margin-bottom: 1rem; }
.songwriter-status-banner h3 { margin-bottom: 0.5rem; color: #fff; }
.songwriter-status-banner p { margin-bottom: 1.5rem; color: rgba(255,255,255,0.8); max-width: 600px; margin-inline: auto; }

/* ============================================================================
   SONGWRITER — LOCKED BENEFITS PREVIEW
   ============================================================================ */
.songwriter-benefits-locked { opacity: 0.5; pointer-events: none; }
.songwriter-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}
.songwriter-benefit-card {
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
}
.songwriter-benefit-card i { font-size: 2rem; margin-bottom: 0.5rem; }
.songwriter-benefit-card h4 { color: rgba(255,255,255,0.7); margin-bottom: 0.25rem; }
.songwriter-benefit-card p { color: rgba(255,255,255,0.5); font-size: 0.85em; }
.songwriter-benefit-card.discord { background: rgba(114, 137, 218, 0.1); border-color: rgba(114, 137, 218, 0.3); }
.songwriter-benefit-card.discord i { color: #7289DA; }
.songwriter-benefit-card.workshops { background: rgba(156, 39, 176, 0.1); border-color: rgba(156, 39, 176, 0.3); }
.songwriter-benefit-card.workshops i { color: #9C27B0; }
.songwriter-benefit-card.resources { background: rgba(255, 124, 0, 0.1); border-color: rgba(255, 124, 0, 0.3); }
.songwriter-benefit-card.resources i { color: var(--primary-color); }
.songwriter-benefit-card.feedback { background: rgba(76, 175, 80, 0.1); border-color: rgba(76, 175, 80, 0.3); }
.songwriter-benefit-card.feedback i { color: #4CAF50; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
    .resource-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    #resources-videos.resource-grid {
        grid-template-columns: 1fr;
    }

    .video-resource-card {
        max-width: 100% !important;
    }

    .audio-card {
        flex-direction: column;
    }

    .resource-search-input {
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
}


/* === student-portal/css/student-portal-subscriptions.css === */
/* student-portal-subscriptions.css — Subscription cards, plans grid, modals, skeletons */

/* ============================================================================
   CURRENT SUBSCRIPTION CARD
   ============================================================================ */
.sub-card {
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--primary-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.sub-card--active  { border-left-color: #4CAF50; }
.sub-card--paused  { border-left-color: #FFA726; }
.sub-card--canceling { border-left-color: #F44336; }
.sub-card--songwriter { border-left-color: #9C27B0; }

/* Header row */
.sub-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.sub-card__name {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
}

/* Status badge pill */
.sub-card__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sub-card__status--active {
    background: rgba(76, 175, 80, 0.25);
    color: #4CAF50;
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.2);
}

.sub-card__status--paused {
    background: rgba(255, 167, 38, 0.25);
    color: #FFA726;
    box-shadow: 0 0 12px rgba(255, 167, 38, 0.2);
}

.sub-card__status--canceling {
    background: rgba(244, 67, 54, 0.25);
    color: #F44336;
    box-shadow: 0 0 12px rgba(244, 67, 54, 0.2);
}

/* Card body: ring left, details right */
.sub-card__body {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

/* Detail rows */
.sub-card__details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sub-card__detail {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    line-height: 1.4;
}

.sub-card__detail .icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.sub-card__detail--warning {
    color: #F44336;
    margin-top: 4px;
}

/* Action buttons row */
.sub-card__actions {
    display: flex;
    gap: 12px;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.sub-card__action-btn {
    flex: 1;
    min-width: 150px;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-light);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.sub-card__action-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
}

.sub-card__action-btn--danger {
    background: rgba(244, 67, 54, 0.15);
    border-color: rgba(244, 67, 54, 0.4);
    color: #F44336;
}

.sub-card__action-btn--danger:hover {
    background: rgba(244, 67, 54, 0.25);
}

.sub-card__action-btn--purple {
    background: rgba(156, 39, 176, 0.15);
    border-color: rgba(156, 39, 176, 0.4);
    color: #CE93D8;
}

.sub-card__action-btn--purple:hover {
    background: rgba(156, 39, 176, 0.25);
}

.sub-card__action-btn--primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.sub-card__action-btn--primary:hover {
    filter: brightness(1.1);
}

/* ============================================================================
   LESSON USAGE PROGRESS RING
   ============================================================================ */
.sub-progress-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sub-progress-ring__svg {
    width: 80px;
    height: 80px;
    transform: rotate(-90deg);
}

.sub-progress-ring__bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 6;
}

.sub-progress-ring__fill {
    fill: none;
    stroke: #4CAF50;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease;
}

.sub-progress-ring__text {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 4px;
    text-align: center;
}

/* ============================================================================
   AVAILABLE PLANS GRID
   ============================================================================ */
.sub-section-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.sub-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.sub-plan-card {
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    border-left: 4px solid var(--primary-color);
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
}

.sub-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.sub-plan-card--current {
    border-left-color: #4CAF50;
    cursor: default;
    opacity: 0.92;
}

.sub-plan-card--current:hover {
    transform: none;
    box-shadow: none;
}

/* Product image */
.sub-plan-card__image {
    width: 100%;
    height: 200px;
    background: #000;
    overflow: hidden;
    position: relative;
}

.sub-plan-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sub-plan-card__image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    pointer-events: none;
}

/* Card content */
.sub-plan-card__content {
    padding: 1.25rem;
}

.sub-plan-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.sub-plan-card__name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
}

.sub-plan-card--current .sub-plan-card__name {
    color: #4CAF50;
}

.sub-plan-card__price {
    font-weight: 600;
    font-size: 1.1em;
    padding: 3px 12px;
    border-radius: 12px;
    background: rgba(255, 124, 0, 0.25);
    color: var(--primary-color);
}

.sub-plan-card--current .sub-plan-card__price {
    background: rgba(76, 175, 80, 0.25);
    color: #4CAF50;
}

.sub-plan-card__description {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0.5rem 0 0;
}

/* "CURRENT PLAN" badge */
.sub-plan-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(76, 175, 80, 0.9);
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 600;
    z-index: 2;
}

/* "Click to switch" CTA */
.sub-plan-card__cta {
    margin-top: 12px;
    text-align: center;
    padding: 8px;
    background: rgba(255, 124, 0, 0.1);
    border-radius: 6px;
}

.sub-plan-card__cta small {
    color: rgba(255, 124, 0, 0.9);
    font-size: 0.85em;
}

/* ============================================================================
   SHARED MODAL
   ============================================================================ */
.sub-modal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.sub-modal__content {
    background: var(--background-dark);
    padding: 2rem;
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    position: relative;
    animation: subModalFadeIn 0.2s ease-out;
}

.sub-modal__content--wide {
    max-width: 900px;
    max-height: 85vh;
    overflow-y: auto;
}

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

.sub-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(244, 67, 54, 0.15);
    border: 1px solid rgba(244, 67, 54, 0.4);
    color: #F44336;
    font-size: 1.3rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index: 2;
    line-height: 1;
}

.sub-modal__close:hover {
    background: rgba(244, 67, 54, 0.3);
}

.sub-modal__icon {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 1rem;
}

.sub-modal__title {
    margin: 0 0 1rem;
    font-size: 1.3rem;
    color: var(--text-light);
}

.sub-modal__message {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* Info-box variants */
.sub-modal__info-box {
    padding: 12px 16px;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.sub-modal__info-box--info {
    background: rgba(33, 150, 243, 0.1);
    border-left-color: #2196F3;
}

.sub-modal__info-box--warning {
    background: rgba(255, 193, 7, 0.1);
    border-left-color: #FFC107;
}

.sub-modal__info-box--danger {
    background: rgba(244, 67, 54, 0.1);
    border-left-color: #F44336;
}

.sub-modal__info-box--purple {
    background: rgba(156, 39, 176, 0.1);
    border-left-color: #9C27B0;
}

.sub-modal__info-box--orange {
    background: rgba(255, 124, 0, 0.1);
    border-left-color: #ff7c00;
}

.sub-modal__info-box--success {
    background: rgba(76, 175, 80, 0.1);
    border-left-color: #4CAF50;
}

.sub-modal__info-box strong {
    color: rgba(255, 255, 255, 0.95);
}

.sub-modal__info-box ul {
    margin: 0;
    padding-left: 1.2rem;
}

.sub-modal__info-box li {
    margin-bottom: 0.3rem;
}

/* Form field */
.sub-modal__field {
    margin-bottom: 1.5rem;
}

.sub-modal__field label {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.sub-modal__field textarea {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    resize: vertical;
    font-family: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
}

.sub-modal__field textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Button row */
.sub-modal__actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Plans grid inside change-plan modal */
.sub-modal__plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 2rem;
}

/* ============================================================================
   SKELETON LOADING
   ============================================================================ */
.sub-skeleton-card {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-left: 4px solid rgba(255, 255, 255, 0.15);
}

.sub-skeleton-card .skeleton {
    border-radius: 6px;
}

.sub-skeleton-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.sub-skeleton-card__title {
    width: 45%;
    height: 20px;
}

.sub-skeleton-card__badge {
    width: 70px;
    height: 24px;
    border-radius: 12px;
}

.sub-skeleton-card__body {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.sub-skeleton-card__ring {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sub-skeleton-card__lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sub-skeleton-card__line {
    height: 14px;
}

.sub-skeleton-card__line--short { width: 60%; }
.sub-skeleton-card__line--medium { width: 80%; }

.sub-skeleton-card__actions {
    display: flex;
    gap: 12px;
    margin-top: 1rem;
}

.sub-skeleton-card__btn {
    flex: 1;
    height: 38px;
    border-radius: 10px;
}

/* Plan card skeleton */
.sub-skeleton-plan {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    border-left: 4px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.sub-skeleton-plan__image {
    width: 100%;
    height: 160px;
}

.sub-skeleton-plan__content {
    padding: 1.25rem;
}

.sub-skeleton-plan__title {
    height: 18px;
    width: 60%;
    margin-bottom: 10px;
    border-radius: 6px;
}

.sub-skeleton-plan__price {
    height: 24px;
    width: 80px;
    border-radius: 12px;
    margin-bottom: 10px;
}

.sub-skeleton-plan__text {
    height: 12px;
    width: 90%;
    margin-bottom: 8px;
    border-radius: 6px;
}

.sub-skeleton-plan__text:last-child {
    width: 70%;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
    .sub-plans-grid,
    .sub-modal__plans-grid {
        grid-template-columns: 1fr;
    }

    .sub-card__body {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .sub-card__details {
        align-items: center;
    }

    .sub-card__actions {
        flex-direction: column;
    }

    .sub-card__action-btn {
        min-width: unset;
        width: 100%;
    }

    .sub-progress-ring__svg {
        width: 64px;
        height: 64px;
    }

    .sub-modal__content {
        padding: 1.5rem;
    }

    .sub-modal__content--wide {
        max-height: 90vh;
    }
}

@media (max-width: 480px) {
    .sub-card {
        padding: 1rem;
    }

    .sub-plan-card__content {
        padding: 1rem;
    }

    .sub-card__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .sub-modal__actions {
        flex-direction: column;
    }

    .sub-modal__actions .button {
        width: 100%;
        justify-content: center;
    }
}


/* === student-portal/css/student-portal-shop.css === */
/* student-portal-shop.css — Shop product cards, grid, filter, skeletons */

/* ============================================================================
   PRODUCT CARD (glassmorphic)
   ============================================================================ */
.shop-card {
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 1.25rem;
    border-left: 4px solid var(--primary-color);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}

.shop-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

/* Type modifiers — left border accent */
.shop-card--subscription { border-left-color: #FFC107; }
.shop-card--flex-pack    { border-left-color: #2196F3; }
.shop-card--workshop     { border-left-color: #9C27B0; }
.shop-card--event        { border-left-color: #ff7c00; }
.shop-card--product      { border-left-color: #4CAF50; }

/* Free-access muted state */
.shop-card--free {
    opacity: 0.9;
    cursor: default;
}

.shop-card--free:hover {
    transform: none;
    box-shadow: none;
}

/* ============================================================================
   PRODUCT IMAGE
   ============================================================================ */
.shop-card__image {
    width: 100%;
    height: 200px;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
}

.shop-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.shop-card__image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    pointer-events: none;
}

/* ============================================================================
   CARD HEADER
   ============================================================================ */
.shop-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.shop-card__name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
}

.shop-card__tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Category badge pill */
.shop-card__category {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
}

.shop-card__category--subscription {
    background: rgba(255, 193, 7, 0.3);
    color: #FFC107;
}

.shop-card__category--flex-pack {
    background: rgba(33, 150, 243, 0.3);
    color: #2196F3;
}

.shop-card__category--workshop {
    background: rgba(156, 39, 176, 0.3);
    color: #9C27B0;
}

.shop-card__category--event {
    background: rgba(255, 124, 0, 0.3);
    color: #ff7c00;
}

.shop-card__category--product {
    background: rgba(76, 175, 80, 0.3);
    color: #4CAF50;
}

/* Price badge */
.shop-card__price {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.1em;
}

.shop-card__price--subscription {
    background: rgba(255, 193, 7, 0.3);
    color: #FFC107;
}

.shop-card__price--flex-pack {
    background: rgba(33, 150, 243, 0.3);
    color: #2196F3;
}

.shop-card__price--workshop {
    background: rgba(156, 39, 176, 0.3);
    color: #9C27B0;
}

.shop-card__price--event {
    background: rgba(255, 124, 0, 0.3);
    color: #ff7c00;
}

.shop-card__price--product {
    background: rgba(76, 175, 80, 0.3);
    color: #4CAF50;
}

.shop-card__price--included {
    color: #4CAF50;
    font-weight: 600;
}

.shop-card__tier-label {
    font-size: 0.75em;
    opacity: 0.8;
}

/* ============================================================================
   CARD BODY
   ============================================================================ */
.shop-card__description {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0.5rem 0 0;
}

/* Workshop schedule section */
.shop-card__schedule {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 12px;
    margin-top: 12px;
}

.shop-card__schedule .detail {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 4px;
}

.shop-card__schedule .icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

/* Bottom CTA hints */
.shop-card__hint {
    margin-top: 12px;
    padding: 8px;
    border-radius: 6px;
    text-align: center;
}

.shop-card__hint small {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85em;
}

.shop-card__hint--free {
    background: rgba(76, 175, 80, 0.1);
}

.shop-card__hint--free small {
    color: rgba(76, 175, 80, 0.9);
}

.shop-card__hint--workshop {
    background: rgba(156, 39, 176, 0.1);
}

/* ============================================================================
   GRID & FILTER
   ============================================================================ */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.shop-filter-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
}

.shop-filter {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================================================
   SKELETON LOADING
   ============================================================================ */
.shop-skeleton-card {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    border-left: 4px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.shop-skeleton-card__image {
    width: 100%;
    height: 160px;
}

.shop-skeleton-card__content {
    padding: 1.25rem;
}

.shop-skeleton-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.shop-skeleton-card__title {
    height: 18px;
    width: 55%;
    border-radius: 6px;
}

.shop-skeleton-card__badge {
    height: 24px;
    width: 70px;
    border-radius: 12px;
}

.shop-skeleton-card__lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shop-skeleton-card__line {
    height: 12px;
    border-radius: 6px;
}

.shop-skeleton-card__line--long   { width: 90%; }
.shop-skeleton-card__line--medium { width: 70%; }
.shop-skeleton-card__line--short  { width: 50%; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
    .shop-grid {
        grid-template-columns: 1fr;
    }

    .shop-card__header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .shop-card {
        padding: 1rem;
    }

    .shop-card__image {
        height: 160px;
    }
}


/* === student-portal/css/student-portal-tools.css === */
/* student-portal-tools.css — Interactive Tools tab styles
   Prefixed tools- to avoid collisions with other modules.
   Sub-tab pattern mirrors songwriter tabs from student-portal-resources.css. */

/* ============================================================================
   SUB-TAB NAVIGATION (mirrors songwriter pattern)
   ============================================================================ */
.tools-tab-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.tools-tab-scroll {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 0.25rem 0.25rem 0.5rem;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 124, 0, 0.35) rgba(255, 255, 255, 0.05);
}

.tools-tab-scroll::-webkit-scrollbar { height: 6px; }
.tools-tab-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}
.tools-tab-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 124, 0, 0.35);
    border-radius: 3px;
}
.tools-tab-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 124, 0, 0.55);
}

/* Fade hints for horizontal overflow */
.tools-tab-wrapper::before,
.tools-tab-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    pointer-events: none;
    z-index: 2;
    border-radius: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.tools-tab-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(30, 30, 30, 0.9), transparent);
}
.tools-tab-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(30, 30, 30, 0.9), transparent);
}
.tools-tab-wrapper.scroll-left::before { opacity: 1; }
.tools-tab-wrapper.scroll-right::after { opacity: 1; }

/* Glassmorphism tab buttons */
.tools-tab-scroll .tools-tab-button {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
    color: var(--text-dim);
    cursor: pointer;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.25s ease;
    font-family: inherit;
}
.tools-tab-scroll .tools-tab-button i {
    margin-right: 0.4rem;
}
.tools-tab-scroll .tools-tab-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 124, 0, 0.25);
    box-shadow: 0 2px 12px rgba(255, 124, 0, 0.1);
    color: var(--text-light);
}
.tools-tab-scroll .tools-tab-button.active {
    background: rgba(255, 124, 0, 0.15);
    border-color: rgba(255, 124, 0, 0.4);
    color: var(--text-light);
    box-shadow: 0 2px 16px rgba(255, 124, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ============================================================================
   SHARED TOOL STYLES
   ============================================================================ */
.tools-container {
    padding: 1rem 0;
}

.tools-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.tools-controls label {
    color: var(--text-dim);
    font-size: var(--font-sm);
    margin-right: 0.25rem;
}

.tools-controls select {
    background: var(--surface-glass);
    color: var(--text-light);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.45rem 0.75rem;
    font-size: var(--font-sm);
    cursor: pointer;
    font-family: inherit;
}

.tools-controls select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(255, 124, 0, 0.25);
    outline: none;
}

.tools-info-card {
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.tools-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Toggle switch (reusable) */
.tools-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--font-sm);
    color: var(--text-dim);
}

.tools-toggle input[type="checkbox"] {
    display: none;
}

.tools-toggle__track {
    width: 36px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    position: relative;
    transition: background 0.2s ease;
}

.tools-toggle__track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.tools-toggle input:checked + .tools-toggle__track {
    background: var(--primary-color);
}

.tools-toggle input:checked + .tools-toggle__track::after {
    transform: translateX(16px);
}

/* ============================================================================
   FRETBOARD DIAGRAM TOOL
   ============================================================================ */
.tools-fretboard {
    padding: 0.5rem 0;
}

/* Fretboard grid container */
.tools-fretboard__board-wrapper {
    overflow-x: auto;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 124, 0, 0.35) rgba(255, 255, 255, 0.05);
}

.tools-fretboard__board {
    display: grid;
    grid-template-columns: 48px repeat(16, minmax(48px, 1fr));
    gap: 0;
    min-width: 820px;
    position: relative;
}

/* String row */
.tools-fretboard__string {
    display: contents;
}

/* Individual fret cell */
.tools-fretboard__fret {
    position: relative;
    height: 38px;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

/* String line through center of cell (note sits ON the string) */
.tools-fretboard__fret::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-50%);
    z-index: 0;
}

/* Nut (fret 0) — thicker right border */
.tools-fretboard__fret--nut {
    background: rgba(255, 255, 255, 0.05);
    border-right: 3px solid rgba(255, 255, 255, 0.5);
    min-width: 48px;
}

/* Note circle */
.tools-fretboard__note {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    position: relative;
    z-index: 1;
}

.tools-fretboard__note--active {
    opacity: 1;
    transform: scale(1);
    color: #fff;
}

.tools-fretboard__note--root {
    border: 2px solid var(--primary-color);
    box-shadow: var(--shadow-glow);
    font-weight: 700;
}

/* Fret number row */
.tools-fretboard__fret-numbers {
    display: grid;
    grid-template-columns: 48px repeat(16, minmax(48px, 1fr));
    min-width: 820px;
    margin-bottom: 0.5rem;
}

.tools-fretboard__fret-number {
    text-align: center;
    font-size: 0.7rem;
    color: var(--text-dim);
    padding-top: 0.25rem;
}

/* Fret marker row (separate row below board for guaranteed visibility) */
.tools-fretboard__marker-row {
    display: grid;
    grid-template-columns: 48px repeat(16, minmax(48px, 1fr));
    min-width: 820px;
    height: 18px;
}

.tools-fretboard__marker-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tools-fretboard__dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

/* Degree legend */
.tools-fretboard__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tools-fretboard__legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-dim);
}

.tools-fretboard__legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Scale info card */
.tools-fretboard__info {
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.tools-fretboard__info h4 {
    color: var(--primary-color);
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.tools-fretboard__info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: var(--font-sm);
    color: var(--text-dim);
}

.tools-fretboard__info-row strong {
    color: var(--text-light);
    margin-right: 0.25rem;
}

.tools-fretboard__info-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tools-fretboard__info-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

.tools-fretboard__info-chord {
    display: inline-block;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    color: var(--text-light);
}

/* Mode shapes grid */
.tools-fretboard__modes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.tools-fretboard__mode-card {
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1rem;
    transition: border-color 0.2s ease;
}

.tools-fretboard__mode-card:hover {
    border-color: rgba(255, 124, 0, 0.3);
}

.tools-fretboard__mode-card--current {
    border-color: rgba(255, 124, 0, 0.4);
    box-shadow: 0 0 12px rgba(255, 124, 0, 0.15);
}

.tools-fretboard__mode-card h5 {
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.tools-fretboard__mode-card .tools-fretboard__board {
    grid-template-columns: repeat(6, minmax(32px, 1fr));
    min-width: auto;
}

.tools-fretboard__mode-card .tools-fretboard__fret {
    height: 28px;
}

.tools-fretboard__mode-card .tools-fretboard__note {
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
}

/* Lefty mode — mirror the fretboard */
.tools-fretboard--lefty .tools-fretboard__board {
    direction: rtl;
}
.tools-fretboard--lefty .tools-fretboard__board * {
    direction: ltr;
}
.tools-fretboard--lefty .tools-fretboard__fret-numbers {
    direction: rtl;
}
.tools-fretboard--lefty .tools-fretboard__fret-numbers * {
    direction: ltr;
}

/* ============================================================================
   EAR TRAINING TOOL
   ============================================================================ */
.tools-ear {
    padding: 0.5rem 0;
}

/* Fretboard visualization for ear training */
.tools-ear__fretboard-wrapper {
    overflow-x: auto;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 124, 0, 0.35) rgba(255, 255, 255, 0.05);
}

.tools-ear__fretboard {
    min-width: 780px;
}

.tools-ear__mode-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.tools-ear__mode-btn {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    font-size: var(--font-sm);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.tools-ear__mode-btn:hover {
    background: var(--surface-hover);
    color: var(--text-light);
}

.tools-ear__mode-btn.active {
    background: var(--surface-active);
    border-color: rgba(255, 124, 0, 0.4);
    color: var(--text-light);
}

/* Play area */
.tools-ear__play-area {
    text-align: center;
    margin-bottom: 1.5rem;
}

.tools-ear__play-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary-color);
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 20px rgba(255, 124, 0, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tools-ear__play-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(255, 124, 0, 0.4);
}

.tools-ear__play-btn:active {
    transform: scale(0.95);
}

.tools-ear__play-btn--playing {
    animation: tools-pulse 1s ease-in-out infinite;
}

@keyframes tools-pulse {
    0%, 100% { box-shadow: 0 4px 20px rgba(255, 124, 0, 0.3); }
    50% { box-shadow: 0 4px 30px rgba(255, 124, 0, 0.6); }
}

/* Settings row */
.tools-ear__settings {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.tools-ear__setting-btn {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.tools-ear__setting-btn.active {
    background: var(--surface-active);
    border-color: rgba(255, 124, 0, 0.4);
    color: var(--text-light);
}

/* Answer options grid */
.tools-ear__options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.tools-ear__option {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.5rem;
    font-size: var(--font-sm);
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    font-family: inherit;
}

.tools-ear__option:hover:not(.tools-ear__option--disabled) {
    background: var(--surface-hover);
    border-color: rgba(255, 124, 0, 0.25);
}

.tools-ear__option--correct {
    background: rgba(76, 175, 80, 0.25) !important;
    border-color: rgba(76, 175, 80, 0.6) !important;
    color: #81c784 !important;
    animation: tools-flash-green 0.4s ease;
}

.tools-ear__option--incorrect {
    background: rgba(244, 67, 54, 0.25) !important;
    border-color: rgba(244, 67, 54, 0.6) !important;
    color: #ef9a9a !important;
    animation: tools-flash-red 0.4s ease;
}

.tools-ear__option--disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

@keyframes tools-flash-green {
    0% { box-shadow: 0 0 0 rgba(76, 175, 80, 0); }
    50% { box-shadow: 0 0 20px rgba(76, 175, 80, 0.4); }
    100% { box-shadow: 0 0 0 rgba(76, 175, 80, 0); }
}

@keyframes tools-flash-red {
    0% { box-shadow: 0 0 0 rgba(244, 67, 54, 0); }
    50% { box-shadow: 0 0 20px rgba(244, 67, 54, 0.4); }
    100% { box-shadow: 0 0 0 rgba(244, 67, 54, 0); }
}

/* Score display */
.tools-ear__score {
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1rem;
    text-align: center;
}

.tools-ear__score-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color);
}

.tools-ear__score-label {
    font-size: var(--font-sm);
    color: var(--text-dim);
    margin-top: 0.25rem;
}

/* Feedback text */
.tools-ear__feedback {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    min-height: 1.5em;
    margin-bottom: 1rem;
    transition: color 0.2s ease;
}

.tools-ear__feedback--correct { color: #81c784; }
.tools-ear__feedback--incorrect { color: #ef9a9a; }

/* ============================================================================
   FLASHCARD TRAINING TOOL
   ============================================================================ */
.tools-flash {
    padding: 0.5rem 0;
}

.tools-flash__mode-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.tools-flash__mode-btn {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    font-size: var(--font-sm);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.tools-flash__mode-btn:hover {
    background: var(--surface-hover);
    color: var(--text-light);
}

.tools-flash__mode-btn.active {
    background: var(--surface-active);
    border-color: rgba(255, 124, 0, 0.4);
    color: var(--text-light);
}

/* Card container */
.tools-flash__card-container {
    perspective: 800px;
    margin-bottom: 1.5rem;
}

.tools-flash__card {
    width: 100%;
    max-width: 420px;
    min-height: 220px;
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s ease;
}

.tools-flash__card--flipped {
    transform: rotateY(180deg);
}

.tools-flash__card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

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

.tools-flash__card-prompt {
    font-size: 1.1rem;
    color: var(--text-dim);
    margin-bottom: 0.75rem;
}

.tools-flash__card-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-light);
}

.tools-flash__card-detail {
    font-size: var(--font-sm);
    color: var(--text-dim);
    margin-top: 0.5rem;
}

/* Answer grid (12 buttons for note names) */
.tools-flash__answer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    max-width: 420px;
    margin: 0 auto 1.5rem;
}

.tools-flash__answer-btn {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.5rem;
    font-size: var(--font-sm);
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    font-family: inherit;
    font-weight: 600;
}

.tools-flash__answer-btn:hover:not(.tools-flash__answer-btn--disabled) {
    background: var(--surface-hover);
    border-color: rgba(255, 124, 0, 0.25);
}

.tools-flash__answer-btn--correct {
    background: rgba(76, 175, 80, 0.25) !important;
    border-color: rgba(76, 175, 80, 0.6) !important;
    color: #81c784 !important;
}

.tools-flash__answer-btn--incorrect {
    background: rgba(244, 67, 54, 0.25) !important;
    border-color: rgba(244, 67, 54, 0.6) !important;
    color: #ef9a9a !important;
}

.tools-flash__answer-btn--disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* Controls row */
.tools-flash__controls {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.tools-flash__ctrl-btn {
    background: var(--surface-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.5rem 1.25rem;
    font-size: var(--font-sm);
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.tools-flash__ctrl-btn:hover {
    background: var(--surface-hover);
    border-color: rgba(255, 124, 0, 0.25);
}

.tools-flash__ctrl-btn--primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.tools-flash__ctrl-btn--primary:hover {
    background: var(--primary-hover);
}

/* Score / feedback */
.tools-flash__score {
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1rem;
    text-align: center;
}

.tools-flash__score-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color);
}

.tools-flash__score-label {
    font-size: var(--font-sm);
    color: var(--text-dim);
    margin-top: 0.25rem;
}

.tools-flash__feedback {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    min-height: 1.5em;
    margin-bottom: 1rem;
}

.tools-flash__feedback--correct { color: #81c784; }
.tools-flash__feedback--incorrect { color: #ef9a9a; }

/* Wider card for visual flashcard modes (scale shapes, chord shapes, mode shapes) */
.tools-flash__card--visual {
    max-width: 520px;
    min-height: 280px;
}

/* Shape wrapper: string labels + grid side by side */
.tools-flash__shape-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin: 0.75rem auto 0.5rem;
    max-width: 440px;
}

/* Vertical column of string labels */
.tools-flash__string-labels {
    display: flex;
    flex-direction: column;
    padding-top: 0;
}

.tools-flash__string-label {
    font-size: 0.65rem;
    color: var(--text-dim);
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.35rem;
    min-width: 16px;
    user-select: none;
}

/* Shape grid for visual flashcard fretboard diagrams */
.tools-flash__shape {
    display: grid;
    gap: 0;
    max-width: 400px;
    flex: 1;
}

.tools-flash__shape-cell {
    position: relative;
    height: 28px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* String line through center of shape cell */
.tools-flash__shape-cell::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-50%);
    z-index: 0;
}

.tools-flash__shape-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    position: relative;
    z-index: 1;
}

.tools-flash__shape-dot--root {
    background: var(--primary-color);
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 8px rgba(255, 124, 0, 0.4);
}

.tools-flash__shape-label {
    text-align: left;
    font-size: 0.7rem;
    color: var(--text-dim);
    margin-top: 0.25rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Self-grading buttons (Got it / Missed it) */
.tools-flash__grading {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tools-flash__grade-btn {
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    border: 1px solid;
}

.tools-flash__grade-btn--correct {
    background: rgba(76, 175, 80, 0.15);
    border-color: rgba(76, 175, 80, 0.4);
    color: #81c784;
}

.tools-flash__grade-btn--correct:hover {
    background: rgba(76, 175, 80, 0.25);
    box-shadow: 0 2px 12px rgba(76, 175, 80, 0.2);
}

.tools-flash__grade-btn--incorrect {
    background: rgba(244, 67, 54, 0.15);
    border-color: rgba(244, 67, 54, 0.4);
    color: #ef9a9a;
}

.tools-flash__grade-btn--incorrect:hover {
    background: rgba(244, 67, 54, 0.25);
    box-shadow: 0 2px 12px rgba(244, 67, 54, 0.2);
}

/* Mini fretboard for note-finder flashcards */
.tools-flash__mini-fretboard {
    display: grid;
    grid-template-columns: 36px repeat(12, minmax(36px, 1fr));
    gap: 0;
    min-width: 520px;
    margin: 0.5rem auto;
}

.tools-flash__mini-fret {
    position: relative;
    height: 30px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tools-flash__mini-fret--nut {
    border-right: 3px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.03);
}

.tools-flash__mini-note {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 600;
    color: #fff;
}

.tools-flash__mini-note--highlight {
    background: var(--primary-color);
    box-shadow: 0 0 10px rgba(255, 124, 0, 0.4);
}

.tools-flash__mini-note--answer {
    background: rgba(76, 175, 80, 0.6);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
    .tools-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .tools-fretboard__board-wrapper {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .tools-fretboard__modes {
        grid-template-columns: 1fr;
    }

    .tools-ear__options {
        grid-template-columns: repeat(2, 1fr);
    }

    .tools-flash__answer-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tools-flash__mini-fretboard {
        min-width: 400px;
    }
}

@media (max-width: 480px) {
    .tools-tab-scroll .tools-tab-button {
        padding: 0.5rem 0.85rem;
        font-size: 0.8rem;
    }

    .tools-ear__play-btn {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }

    .tools-ear__options {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }

    .tools-flash__card {
        min-height: 180px;
    }

    .tools-flash__card-value {
        font-size: 1.5rem;
    }

    .tools-flash__answer-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem;
    }

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