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

    :root {
        --color-primary: #2563eb;
        /* Blue (Main CTA) */
        --color-secondary: #4f46e5;
        /* Violet (Accent) */
        --color-background-light: #f9fafb;
        /* Light Background */
        --color-accent-red: #f35b5a;
        /* Error/Recording Red */
        --color-text-dark: #374151;
        --color-text-light: #6b7280;
        --color-border: #e5e7eb;
        --color-success: #10b981;
        --color-mock-bg: #f0f9ff;
        /* Light Blue for Mock Area */
        --color-mock-border: #b9e6fe;
        /* Border for Mock Area */
        --color-mock-text: #0284c7;
        /* Dark Blue Text */
    }

    body {
        font-family: 'Inter', sans-serif;
    }

    .ielts-practice-wrapper {
        max-width: 100%;
        margin: 0 auto;
        padding: 40px 24px;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

    /* =================================================================
    1. UTILITY BUTTONS
    ================================================================= */
    .btn-primary,
    .btn-secondary,
    .back-btn,
    .btn-expert-contact,
    .btn-small {
        padding: 10px 20px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-block;
        text-align: center;
    }

    .btn-primary {
        background-color: var(--color-primary);
        color: #fff;
        box-shadow: 0 4px 8px rgba(37, 99, 235, 0.4);
    }

    .btn-primary:hover {
        background-color: #1e40af;
        box-shadow: 0 6px 12px rgba(37, 99, 235, 0.5);
    }

    .btn-secondary {
        background-color: #fff;
        color: var(--color-primary);
        border: 2px solid var(--color-primary);
    }

    .btn-secondary:hover {
        background-color: var(--color-background-light);
    }

    .btn-small {
        padding: 6px 12px;
        font-size: 0.9em;
        background-color: var(--color-secondary);
        color: #fff;
        border-radius: 6px;
    }

    .btn-small:hover {
        background-color: #3730a3;
    }

    .back-btn {
        background: none;
        color: var(--color-text-light);
        padding: 5px 10px;
        font-size: 0.9em;
        font-weight: 500;
        margin-bottom: 20px;
        display: block;
        width: fit-content;
    }

    .back-btn:hover {
        color: var(--color-primary);
    }

    /* =================================================================
    2. WELCOME SCREEN - MINIMALIST HERO (V5.8)
    ================================================================= */
    #welcome-screen {
        text-align: center;
        padding: 50px 20px;
    }

    .welcome-container {
        max-width: 600px;
        margin: 0 auto;
    }

    /* --- MINIMALIST HERO UI (V5.8) --- */
    .hero-layout {
        padding: 40px 20px !important;
        text-align: center;
    }

    .lottie-hero-wrapper {
        margin-bottom: -15px;
        text-align: center;
        width: 100%;
    }

    .ai-badge {
        display: inline-block;
        background-color: #eff6ff;
        color: #2563eb;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 700;
        margin-bottom: 20px;
        letter-spacing: 0.5px;
        border: 1px solid #dbeafe;
    }

    .hero-title {
        font-size: 2.6rem !important;
        font-weight: 800 !important;
        color: #111827 !important;
        margin-bottom: 15px !important;
        line-height: 1.1;
    }

    .hero-subtext {
        font-size: 1.1rem;
        color: #6b7280;
        max-width: 500px;
        margin: 0 auto 35px;
        line-height: 1.5;
    }

    .welcome-actions {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }

    .hero-actions {
        margin-bottom: 25px;
    }

    .main-cta {
        padding: 16px 40px !important;
        font-size: 1.15rem !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 15px rgba(37, 99, 235, 0.2) !important;
        transition: all 0.2s ease !important;
    }

    .main-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 20px rgba(37, 99, 235, 0.3) !important;
    }

    .hero-footer-links {
        margin-top: 25px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    .ghost-link {
        background: none !important;
        border: none !important;
        color: #9ca3af !important;
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        cursor: pointer;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .ghost-link:hover {
        color: #2563eb !important;
    }

    .hero-footer-links .divider {
        color: #d1d5db;
        font-weight: 300;
    }

    /* Microphone Soundwave Animation */
    .soundwave-animation {
        position: relative;
        width: 280px;
        height: 180px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .soundwave-bars {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .bar {
        width: 4px;
        background: linear-gradient(180deg, #3b82f6 0%, #8b5cf6 100%);
        border-radius: 4px;
        animation: soundwave 1.2s ease-in-out infinite;
    }

    .bar-1 {
        height: 20px;
        animation-delay: 0s;
    }

    .bar-2 {
        height: 35px;
        animation-delay: 0.15s;
    }

    .bar-3 {
        height: 50px;
        animation-delay: 0.3s;
    }

    .bar-4 {
        height: 35px;
        animation-delay: 0.45s;
    }

    @keyframes soundwave {

        0%,
        100% {
            transform: scaleY(1);
            opacity: 0.7;
        }

        50% {
            transform: scaleY(1.5);
            opacity: 1;
        }
    }

    .microphone-icon {
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
        color: white;
        z-index: 1;
        animation: mic-pulse 2s ease-in-out infinite;
    }

    @keyframes mic-pulse {

        0%,
        100% {
            transform: scale(1);
            box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
        }

        50% {
            transform: scale(1.05);
            box-shadow: 0 12px 40px rgba(99, 102, 241, 0.5);
        }
    }

    /* =================================================================
    3. TOPIC SELECTION SCREEN
    ================================================================= */
    .practice-header h2 {
        font-size: 1.8em;
        color: var(--color-text-dark);
        margin-bottom: 5px;
    }

    .practice-header p {
        color: var(--color-text-light);
        margin-bottom: 20px;
    }

    .practice-tabs {
        display: flex;
        margin-bottom: 30px;
        border-bottom: 2px solid var(--color-border);
    }

    .tab-link {
        background: none;
        border: none;
        padding: 10px 20px;
        font-size: 1.1em;
        font-weight: 600;
        color: var(--color-text-light);
        cursor: pointer;
        transition: all 0.2s ease;
        border-bottom: 3px solid transparent;
        margin-bottom: -2px;
    }

    .tab-link.active {
        color: var(--color-secondary);
        border-bottom: 3px solid var(--color-secondary);
    }

    .topic-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }

    .topic-card {
        background-color: #fff;
        border: 1px solid var(--color-border);
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .topic-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

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

    .topic-part-tag {
        background-color: var(--color-background-light);
        color: var(--color-secondary);
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8em;
        font-weight: 700;
    }

    .topic-status-badge {
        background-color: var(--color-success);
        color: #fff;
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 0.75em;
        font-weight: 700;
    }

    .topic-card h4.topic-title {
        font-size: 1.3em;
        color: var(--color-text-dark);
        margin: 5px 0;
    }

    .topic-description {
        color: var(--color-text-light);
        font-size: 0.95em;
        margin-bottom: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-height: 20px;
    }

    .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 10px;
        border-top: 1px dashed var(--color-border);
    }

    /* Load More Topics Button */
    .load-more-container {
        padding: 20px 0;
    }

    .load-more-topics-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 28px;
        background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
        color: white;
        border: none;
        border-radius: 25px;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
    }

    .load-more-topics-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
    }

    .load-more-topics-btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .load-more-spinner {
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    /* =================================================================
    4. PRACTICE FLOW (Mic Check, Recording)
    ================================================================= */
    .mic-check-container {
        max-width: 500px;
        margin: 0 auto;
        padding: 20px;
        text-align: left;
    }

    .mic-test-box button.btn-secondary {
        margin-right: 15px;
        margin-bottom: 15px;
    }

    .continue-btn {
        display: block;
        width: 100%;
        margin-top: 20px;
    }

    .instruction-box {
        border: 1px solid var(--color-border);
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        background-color: #fcfcfc;
    }

    .mic-test-box h3 {
        color: var(--color-secondary);
    }

    .practice-container {
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
    }

    #part1-3-stepper {
        margin-bottom: 20px;
    }

    .progress-stepper {
        display: flex;
        justify-content: center;
        gap: 12px;
    }

    .progress-stepper .step {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid #e2e8f0;
        color: #94a3b8;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        font-size: 0.9em;
        background-color: #fff;
        transition: all 0.3s ease;
    }

    .progress-stepper .step.active {
        background-color: #3b82f6;
        /* Blue 500 */
        border-color: #3b82f6;
        color: #fff;
        box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
        transform: scale(1.1);
    }

    .question-box {
        background-color: #fff;
        border: 1px solid var(--color-border);
        border-radius: 12px;
        padding: 30px 20px;
        margin-bottom: 40px;
        text-align: center;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }

    .question-box .question-number {
        font-size: 1em;
        color: var(--color-text-light);
        margin-bottom: 10px;
    }

    .question-box .question-text {
        font-size: 1.8em;
        color: var(--color-text-dark);
        font-weight: 700;
        line-height: 1.4;
        margin: 0;
    }

    /* Question Box (Cue Card Redesign) */
    .question-box {
        background: #ffffff;
        border: 1px solid #f1f5f9;
        border-radius: 24px;
        padding: 40px;
        margin-bottom: 30px;
        text-align: left;
        /* Left align for Cue Card */
        box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.03);
        transition: all 0.3s ease;
        position: relative;
    }

    .question-box:hover {
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.05);
    }

    .question-box .question-number {
        font-size: 0.85em;
        color: #94a3b8;
        margin-bottom: 20px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        text-align: center;
        /* Keep label centered */
        display: block;
    }

    .question-box .question-text {
        font-size: 1.8em;
        /* Main question big */
        color: #1e293b;
        /* Slate 800 */
        font-weight: 700;
        line-height: 1.3;
        margin: 0 0 25px 0;
        text-align: center;
        /* Main question centered */
    }

    /* Bullet Points (Part 2 Specifics) */
    #cue-card-points ul {
        list-style: none;
        padding: 0;
        margin: 20px 0;
        /* Remove auto margin to align left */
        max-width: 100%;
        /* Allow full width */
        text-align: left;
    }

    #cue-card-points li {
        margin-bottom: 15px;
        position: relative;
        line-height: 1.6;
        font-weight: 500;
        font-size: 1.1em;
        color: #475569;
        padding-left: 35px;
        /* Space for icon */
    }

    #cue-card-points li:before {
        content: '';
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%233b82f6"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        position: absolute;
        left: 0;
        top: 4px;
        width: 22px;
        height: 22px;
    }

    .btn-idea-clue {
        background: #fff7ed;
        color: #f59e0b;
        border: 1px solid #ffedd5;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.85em;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s ease;
        /* Position in top-right corner of question box */
        position: absolute;
        top: 20px;
        right: 20px;
        margin: 0;
    }

    .btn-idea-clue:hover {
        background: #ffedd5;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
    }

    .btn-idea-clue svg {
        width: 16px;
        height: 16px;
    }

    /* Prep Area (Timer) */
    .prep-area {
        text-align: center;
        margin-bottom: 30px;
        animation: fadeIn 0.5s ease;
    }

    .prep-area h4 {
        margin: 0 0 15px 0;
        color: #64748b;
        font-size: 0.9em;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .prep-timer-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap;
        /* Allow wrapping on small screens */
    }

    .prep-timer-box {
        background-color: #fff;
        padding: 0 24px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #e2e8f0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        min-width: 100px;
        height: 48px;
        /* Standardized height */
        line-height: 48px;
        /* Match height for vertical centering */
        box-sizing: border-box;
    }

    #prep-timer-display {
        font-size: 1.4em;
        font-weight: 700;
        color: #3b82f6;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        /* Reset line-height for the text itself */
    }

    #start-prep-btn {
        height: 48px;
        /* Standardized height - matches timer box */
        line-height: 48px;
        /* Match height for vertical centering */
        padding: 0 30px;
        font-size: 1em;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #3b82f6;
        color: white;
        border: 2px solid transparent;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        transition: all 0.2s ease;
        cursor: pointer;
        box-sizing: border-box;
    }

    #start-prep-btn:hover:not(:disabled) {
        background: #2563eb;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
    }

    #start-prep-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .question-box ul {
        list-style: none;
        padding: 0;
        text-align: center;
        margin: 20px auto 0;
        font-size: 1.2em;
        color: #475569;
        /* Slate 600 */
    }

    .question-box li {
        margin-bottom: 10px;
        position: relative;
        line-height: 1.4;
        font-weight: 500;
        text-align: center;
        padding-left: 0;
    }

    .prep-area {
        text-align: center;
        margin-bottom: 40px;
    }

    .prep-area h3 {
        color: #3b82f6;
        /* Blue 500 */
        font-size: 1.5em;
        margin-bottom: 20px;
    }

    /* Legacy timer display (if used elsewhere) */
    .timer-display {
        font-size: 2.5em;
        font-weight: 700;
        color: #3b82f6;
        font-variant-numeric: tabular-nums;
    }

    .prep-status-text {
        font-size: 0.9em;
        color: #64748b;
        margin-top: 10px;
    }

    /* Recording Interface */
    .recording-interface {
        text-align: center;
        margin-top: 50px;
    }

    .mic-button {
        background-color: #4f46e5;
        /* Indigo 600 */
        border: none;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mic-button:hover {
        background-color: #4338ca;
        /* Indigo 700 */
        transform: scale(1.05);
        box-shadow: 0 20px 30px -10px rgba(79, 70, 229, 0.5);
    }

    .mic-button:active {
        transform: scale(0.95);
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
        }

        70% {
            box-shadow: 0 0 0 20px rgba(79, 70, 229, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
        }
    }

    .mic-button.recording {
        background-color: #ef4444;
        /* Red 500 */
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
        animation: pulse-red 1.5s infinite;
    }

    @keyframes pulse-red {
        0% {
            box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
        }

        70% {
            box-shadow: 0 0 0 20px rgba(239, 68, 68, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
        }
    }

    .mic-button.recording svg {
        display: none;
    }

    .mic-button.recording::before {
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        background: #fff;
        border-radius: 6px;
    }

    .mic-icon {
        fill: #fff;
        width: 32px;
        height: 32px;
    }

    .mic-status {
        margin-top: 20px;
        font-size: 1.1em;
        color: #64748b;
        /* Slate 500 */
        font-weight: 500;
    }

    .timer {
        font-size: 2em;
        font-weight: 300;
        /* Thin font */
        color: #94a3b8;
        /* Slate 400 */
        margin-top: 10px;
        font-variant-numeric: tabular-nums;
    }

    /* =================================================================
    5. REPORT STYLING
    ================================================================= */
    .overall-score-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--color-background-light);
        border-radius: 10px;
        padding: 15px 25px;
        margin-bottom: 25px;
        border-left: 5px solid var(--color-primary);
    }

    .overall-score-box div {
        font-size: 2.5em;
        font-weight: 800;
        color: var(--color-primary);
    }

    .overall-score-box span {
        font-size: 1.2em;
    }

    .overall-score-box p {
        font-size: 1.1em;
        color: var(--color-text-dark);
    }

    #feedback-report-container h2 {
        margin-top: 50px;
        margin-bottom: 25px;
        font-size: 1.6em;
        color: var(--color-text-dark);
    }

    /* Summary Chart */
    .summary-chart-container {
        width: 100%;
        margin-bottom: 40px;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        padding: 20px;
    }

    .chart-row {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    .chart-row:last-child {
        margin-bottom: 0;
    }

    .bar-label {
        width: 40%;
        font-size: 0.9em;
        font-weight: 600;
        color: var(--color-text-dark);
        padding-right: 15px;
    }

    .chart-bar {
        width: 50%;
        background-color: var(--color-background-light);
        border-radius: 4px;
        height: 12px;
    }

    .bar-fill {
        height: 100%;
        background-color: var(--color-primary);
        border-radius: 4px;
        transition: width 0.8s ease-out;
    }

    .bar-score {
        width: 10%;
        text-align: right;
        font-size: 0.9em;
        font-weight: 700;
        color: var(--color-primary);
    }

    /* Criteria Cards */
    .criteria-card {
        border: 1px solid var(--color-border);
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
    }

    .criteria-card h3 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 0 15px 0;
        font-size: 1.2em;
        color: var(--color-text-dark);
    }

    .criteria-content-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 700;
    }

    .criteria-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .icon-fluency {
        background-color: #e0e7ff;
    }

    .icon-lexical {
        background-color: #e0e1ff;
    }

    .icon-grammatical {
        background-color: #fffbeb;
    }

    .icon-pronunciation {
        background-color: #e6e5ff;
    }

    .criteria-icon svg {
        width: 24px;
        height: 24px;
    }

    .icon-fluency svg {
        fill: var(--color-primary);
    }

    .icon-lexical svg {
        fill: var(--color-secondary);
    }

    .icon-grammatical svg {
        fill: #f59e0b;
    }

    .icon-pronunciation svg {
        fill: #6366f1;
    }

    .criteria-score {
        font-size: 1.5em;
        font-weight: 800;
        color: var(--color-success);
    }

    .criteria-card p {
        font-size: 0.95em;
        color: var(--color-text-light);
        line-height: 1.6;
        text-align: left;
        margin: 0;
    }

    .criteria-card em {
        color: var(--color-secondary);
        font-style: italic;
        font-weight: 500;
    }

    .btn-expert-contact {
        display: block;
        width: 100%;
        background-color: var(--color-secondary);
        color: #fff;
        margin-top: 30px;
        padding: 15px;
        box-shadow: 0 4px 8px rgba(79, 70, 229, 0.4);
    }

    /* =================================================================
    6. LOADING SPINNER
    ================================================================= */
    .loading-spinner {
        width: 60px;
        height: 60px;
        border: 6px solid var(--color-background-light);
        border-top: 6px solid var(--color-primary);
        border-radius: 50%;
        margin: 20px auto 30px;
        animation: spin 1.2s linear infinite;
    }

    #feedback-report-container .loading-spinner+h2 {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 1.8em;
    }

    #feedback-report-container .loading-spinner+h2+p {
        font-size: 1.1em;
        color: var(--color-text-light);
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* =================================================================
    7. USER DASHBOARD
    ================================================================= */
    .ielts-dashboard-wrapper {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }

    .ielts-dashboard-message {
        text-align: center;
        padding: 40px;
        background: #f9fafb;
        border-radius: 8px;
        font-size: 1.1em;
        color: var(--color-text-light);
    }

    .dashboard-card {
        background: #fff;
        border: 1px solid var(--color-border);
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
        transition: transform 0.2s;
    }

    .dashboard-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .meta-info {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .practice-date {
        font-weight: 600;
        color: var(--color-text-dark);
    }

    .practice-type {
        font-size: 0.85em;
        color: var(--color-text-light);
        background: #f3f4f6;
        padding: 2px 8px;
        border-radius: 4px;
        width: fit-content;
    }

    .score-badge {
        font-size: 1.5em;
        font-weight: 800;
        padding: 10px 15px;
        border-radius: 8px;
        color: #fff;
        min-width: 80px;
        text-align: center;
    }

    .score-badge.high-score {
        background-color: var(--color-success);
    }

    .score-badge.mid-score {
        background-color: var(--color-primary);
    }

    .score-badge.low-score {
        background-color: var(--color-accent-red);
    }

    details.report-details summary {
        list-style: none;
        cursor: pointer;
        width: fit-content;
    }

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

    .full-feedback-content {
        margin-top: 20px;
        animation: fadeIn 0.3s ease-in;
    }

    .transcript-box {
        background: #f9fafb;
        padding: 15px;
        border-left: 4px solid var(--color-secondary);
        margin-bottom: 20px;
        font-style: italic;
        color: var(--color-text-dark);
        font-size: 0.95em;
    }

    .ai-feedback-box {
        padding: 10px;
    }

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

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* =================================================================
    8. MOCK EXAM CTA (NEW)
    ================================================================= */
    /* =================================================================
    MOCK EXAM CTA REDESIGN (VIBRANT)
    ================================================================= */
    .mock-exam-cta {
        position: relative;
        background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
        border-radius: 24px;
        padding: 40px;
        margin-bottom: 50px;
        box-shadow: 0 20px 40px rgba(37, 99, 235, 0.25);
        overflow: hidden;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Sparkling Background Effect */
    .mock-cta-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image:
            radial-gradient(white, rgba(255, 255, 255, .2) 2px, transparent 3px),
            radial-gradient(white, rgba(255, 255, 255, .15) 1px, transparent 2px),
            radial-gradient(white, rgba(255, 255, 255, .1) 2px, transparent 3px);
        background-size: 550px 550px, 350px 350px, 250px 250px;
        background-position: 0 0, 40px 60px, 130px 270px;
        opacity: 0.6;
        pointer-events: none;
    }

    .mock-cta-content {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
    }

    .mock-info-group {
        display: flex;
        align-items: center;
        gap: 25px;
    }

    .mock-icon-large {
        width: 64px;
        height: 64px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .mock-icon-large svg {
        width: 32px;
        height: 32px;
        color: #fff;
    }

    .mock-text h3 {
        margin: 0 0 8px 0;
        color: #fff;
        font-size: 1.8em;
        font-weight: 700;
        letter-spacing: -0.5px;
    }

    .mock-text p {
        margin: 0;
        color: rgba(255, 255, 255, 0.9);
        font-size: 1.1em;
    }

    .btn-cta-orange {
        background: #f58d1e;
        color: #fff;
        padding: 16px 32px;
        font-size: 1.2em;
        font-weight: 600;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 4px 15px rgba(245, 141, 30, 0.4);
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .btn-cta-orange:hover {
        background: #e67e0d;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(245, 141, 30, 0.5);
    }

    /* =================================================================
    COMPREHENSIVE MOBILE RESPONSIVE STYLES
    ================================================================= */

    /* TABLET STYLES (768px and below) */
    @media (max-width: 768px) {

        /* Main Wrapper */
        .ielts-practice-wrapper {
            padding: 30px 20px;
            margin: 10px;
            border-radius: 10px;
        }

        /* Welcome Screen */
        #welcome-screen {
            padding: 30px 15px;
        }

        .hero-title {
            font-size: 2rem !important;
            line-height: 1.2;
        }

        .hero-subtext {
            font-size: 1rem;
            margin-bottom: 25px;
        }

        .soundwave-animation {
            width: 220px;
            height: 140px;
        }

        .microphone-icon {
            width: 60px;
            height: 60px;
        }

        .ai-badge {
            font-size: 0.8rem;
            padding: 5px 12px;
        }

        /* Topic Selection */
        .practice-tabs {
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 5px;
        }

        .tab-link {
            padding: 8px 15px;
            font-size: 1em;
        }

        .topic-grid {
            grid-template-columns: 1fr;
            gap: 15px;
        }

        .topic-card {
            padding: 16px;
        }

        .topic-card h4.topic-title {
            font-size: 1.2em;
        }

        /* Mock Exam CTA */
        .mock-exam-cta {
            padding: 25px 20px;
            margin-bottom: 30px;
            border-radius: 16px;
        }

        .mock-cta-content {
            flex-direction: column;
            text-align: center;
            gap: 20px;
        }

        .mock-info-group {
            flex-direction: column;
            gap: 15px;
        }

        .mock-icon-large {
            width: 50px;
            height: 50px;
        }

        .mock-icon-large svg {
            width: 24px;
            height: 24px;
        }

        .mock-text h3 {
            font-size: 1.4em;
        }

        .mock-text p {
            font-size: 1em;
        }

        .btn-cta-orange {
            width: 100%;
            justify-content: center;
            padding: 14px 24px;
            font-size: 1.1em;
        }

        /* Setup / Mic Check Screen */
        .setup-container {
            padding: 0 10px;
        }

        .setup-card {
            padding: 25px 15px;
        }

        .setup-header h2 {
            font-size: 1.4em;
        }

        .setup-header p {
            font-size: 0.95em;
        }

        .setup-steps {
            flex-direction: column;
            gap: 15px;
        }

        .step-item {
            flex-direction: row;
            gap: 15px;
            text-align: left;
        }

        .mic-test-wrapper {
            padding: 15px;
        }

        /* Practice Screen */
        .practice-container {
            padding: 0 10px;
        }

        #part1-3-stepper {
            margin-bottom: 15px;
        }

        .progress-stepper {
            gap: 8px;
        }

        .progress-stepper .step {
            width: 32px;
            height: 32px;
            font-size: 0.85em;
        }

        /* Question Box */
        .question-box {
            padding: 25px 15px;
            border-radius: 16px;
            margin-bottom: 20px;
        }

        .question-box .question-text {
            font-size: 1.4em !important;
        }

        .question-box .question-number {
            font-size: 0.8em;
            margin-bottom: 15px;
        }

        /* Cue Card Points */
        #cue-card-points ul {
            margin: 15px 0;
        }

        #cue-card-points li {
            font-size: 1em;
            padding-left: 30px;
            margin-bottom: 12px;
        }

        #cue-card-points li:before {
            width: 18px;
            height: 18px;
        }

        /* Idea Button */
        .btn-idea-clue {
            position: relative;
            top: auto;
            right: auto;
            margin: 0 auto 15px;
            display: flex;
        }

        /* Prep Area */
        .prep-area {
            margin-bottom: 20px;
        }

        .prep-timer-row {
            flex-direction: column;
            gap: 12px;
        }

        .prep-timer-box {
            width: 100%;
            max-width: 200px;
        }

        #start-prep-btn {
            width: 100%;
            max-width: 200px;
        }

        /* Recording Interface */
        .recording-interface {
            margin-top: 30px;
        }

        .mic-button {
            width: 70px;
            height: 70px;
        }

        .mic-icon {
            width: 28px;
            height: 28px;
        }

        .mic-status {
            font-size: 1em;
            margin-top: 15px;
        }

        .timer {
            font-size: 1.6em;
        }

        /* AI Avatar */
        .ai-avatar {
            width: 80px !important;
            height: 80px !important;
        }

        #ai-avatar-container {
            margin-bottom: 20px !important;
        }

        /* Report Section */
        .overall-score-box {
            flex-direction: column;
            text-align: center;
            padding: 15px;
        }

        .overall-score-box div {
            font-size: 2em;
        }

        .summary-chart-container {
            padding: 15px;
        }

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

        .bar-label {
            width: 100%;
            margin-bottom: 8px;
            padding-right: 0;
        }

        .chart-bar {
            width: 80%;
        }

        .bar-score {
            width: 20%;
        }

        .criteria-card {
            padding: 15px;
        }

        .criteria-card h3 {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .criteria-score {
            font-size: 1.3em;
        }

        .criteria-content-wrapper {
            gap: 10px;
        }

        .criteria-icon {
            width: 36px;
            height: 36px;
        }

        /* Dashboard */
        .ielts-dashboard-wrapper {
            padding: 15px;
        }

        .dashboard-card {
            padding: 15px;
        }

        /* Modal */
        .ielts-modal-content {
            width: 95%;
            padding: 25px 20px;
        }

        /* Buttons */
        .btn-primary,
        .btn-secondary,
        .btn-expert-contact,
        #start-full-mock-btn {
            width: 100%;
            max-width: 100%;
        }

        .welcome-actions {
            flex-direction: column;
            gap: 12px;
        }

        /* Back Buttons */
        .back-btn,
        .back-to-welcome-btn,
        .back-to-topics-btn,
        .back-to-mic-check-btn {
            font-size: 0.85em;
            padding: 5px 8px;
        }
    }

    /* PHONE STYLES (600px and below) */
    @media (max-width: 600px) {
        .ielts-practice-wrapper {
            padding: 20px 15px;
            margin: 5px;
            border-radius: 8px;
        }

        .hero-title {
            font-size: 1.7rem !important;
        }

        .hero-subtext {
            font-size: 0.95rem;
        }

        .topic-card {
            padding: 14px;
        }

        .topic-card h4.topic-title {
            font-size: 1.1em;
        }

        .card-footer {
            flex-direction: column;
            gap: 10px;
        }

        .topic-start-btn {
            width: 100%;
            text-align: center;
        }

        .mock-exam-cta {
            padding: 20px 15px;
            border-radius: 12px;
        }

        .mock-text h3 {
            font-size: 1.2em;
        }

        .question-box {
            padding: 20px 12px;
        }

        .question-box .question-text {
            font-size: 1.2em !important;
        }

        #cue-card-points li {
            font-size: 0.95em;
            padding-left: 28px;
        }

        .mic-button {
            width: 65px;
            height: 65px;
        }

        .timer {
            font-size: 1.4em;
        }

        /* Question Box List Items */
        .question-box li {
            text-align: left;
            padding-left: 20px;
            text-indent: -10px;
        }

        .question-box li:before {
            left: 0;
        }
    }

    /* SMALL PHONE STYLES (480px and below) */
    @media (max-width: 480px) {
        .ielts-practice-wrapper {
            padding: 15px 10px;
        }

        .hero-title {
            font-size: 1.5rem !important;
        }

        .soundwave-animation {
            width: 180px;
            height: 120px;
        }

        .microphone-icon {
            width: 50px;
            height: 50px;
        }

        .microphone-icon svg {
            width: 36px;
            height: 36px;
        }

        .bar {
            width: 3px;
        }

        .bar-1 {
            height: 16px;
        }

        .bar-2 {
            height: 28px;
        }

        .bar-3 {
            height: 40px;
        }

        .bar-4 {
            height: 28px;
        }

        .tab-link {
            padding: 6px 12px;
            font-size: 0.9em;
        }

        .progress-stepper .step {
            width: 28px;
            height: 28px;
            font-size: 0.8em;
        }

        .question-box .question-text {
            font-size: 1.1em !important;
        }

        .question-box .question-number {
            font-size: 0.75em;
        }

        .mic-button {
            width: 60px;
            height: 60px;
        }

        .mic-icon {
            width: 24px;
            height: 24px;
        }

        .ai-avatar {
            width: 70px !important;
            height: 70px !important;
        }

        .criteria-card h3 {
            font-size: 1em;
        }

        .criteria-card p {
            font-size: 0.9em;
        }

        .criteria-icon {
            width: 32px;
            height: 32px;
        }

        .criteria-icon svg {
            width: 18px;
            height: 18px;
        }

        /* Score Badge on Topic Cards */
        .topic-score-badge {
            font-size: 0.75em;
            padding: 3px 8px;
        }

        /* Part Tag */
        .topic-part-tag {
            font-size: 0.7em;
            padding: 3px 6px;
        }
    }

    /* =================================================================
    12. CUSTOM MODAL SYSTEM (NEW)
    ================================================================= */
    .ielts-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        /* Dimmed background */
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(3px);
        /* Modern blur effect */
        animation: fadeIn 0.2s ease-out;
    }

    .ielts-modal-content {
        background: #fff;
        padding: 30px;
        border-radius: 12px;
        width: 90%;
        max-width: 400px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        text-align: center;
        transform: scale(0.9);
        animation: scaleUp 0.2s ease-out forwards;
    }

    .ielts-modal-content h3 {
        margin-top: 0;
        color: var(--color-text-dark);
        font-size: 1.5em;
    }

    .ielts-modal-content p {
        color: var(--color-text-light);
        font-size: 1.05em;
        margin-bottom: 25px;
        line-height: 1.5;
    }

    .ielts-modal-actions {
        display: flex;
        justify-content: center;
        gap: 15px;
    }

    .ielts-modal-actions button {
        min-width: 100px;
    }

    @keyframes scaleUp {
        to {
            transform: scale(1);
        }
    }

    /* =================================================================
    9. USER DASHBOARD DETAIL VIEW (DESIGN FIXES)
    ================================================================= */

    /* Container for Quick Score display (to separate from Full Report HTML) */
    .dashboard-quick-score-display {
        max-width: 350px;
        margin: 10px auto 30px;
        text-align: center;
    }

    /* Transcript Readability Fix */
    .transcript-box {
        /* Retains old styles */
        background: #f9fafb;
        padding: 15px;
        border-left: 4px solid var(--color-secondary);
        margin-bottom: 20px;
        font-size: 0.95em;

        /* NEW: Better spacing for Q&A pairs */
        white-space: pre-wrap;
        /* Allows wrapping but preserves newlines from PHP */
        line-height: 1.6;
    }

    /* Style for Examiner vs Candidate labels */
    .transcript-box strong {
        display: block;
        margin-top: 10px;
        font-weight: 700;
        color: var(--color-primary);
    }

    .transcript-box em {
        display: block;
        font-style: normal;
        font-weight: 500;
        color: var(--color-text-dark);
        margin-bottom: 5px;
    }

    /* Clean up the AI analysis section */
    .ai-feedback-box h4 {
        margin-top: 0;
        font-size: 1.1em;
        color: var(--color-text-dark);
        font-weight: 600;
    }

    /* =================================================================
    13. DASHBOARD CHAT UI (NEW DESIGN)
    ================================================================= */

    /* The container for the chat history */
    .ielts-chat-container {
        background-color: #f5f7fa;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
        max-height: 400px;
        overflow-y: auto;
        /* Scrollable if too long */
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Common Bubble Styles */
    .chat-msg {
        max-width: 80%;
        padding: 12px 16px;
        border-radius: 12px;
        font-size: 0.95em;
        line-height: 1.5;
        position: relative;
        word-wrap: break-word;
    }

    /* Examiner (Left side, Grey) */
    .chat-msg.examiner {
        align-self: flex-start;
        background-color: #ffffff;
        border: 1px solid #e5e7eb;
        color: #374151;
        border-bottom-left-radius: 2px;
        /* Pointy corner */
    }

    /* Candidate (Right side, Blue) */
    .chat-msg.candidate {
        align-self: flex-end;
        background-color: #2563eb;
        /* Primary Blue */
        color: #ffffff;
        border-bottom-right-radius: 2px;
        /* Pointy corner */
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    }

    /* Small label above text (e.g., "Examiner") */
    .role-label {
        display: block;
        font-size: 0.75em;
        font-weight: 700;
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0.8;
    }

    /* Quick Score Display Box Styling */
    .dashboard-quick-score-display {
        text-align: center;
        padding: 20px;
        background: #f0f9ff;
        border: 2px dashed #bae6fd;
        border-radius: 12px;
        margin-bottom: 20px;
    }

    /* =================================================================
    14. TOPIC CARD SCORE BADGES (NEW)
    ================================================================= */
    .topic-score-badge {
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 0.85em;
        font-weight: 800;
        color: #fff;
        min-width: 45px;
        text-align: center;
    }

    /* Colors for score levels */
    .topic-score-badge.score-new {
        background-color: var(--color-primary);
        /* Blue for new/placeholder */
        color: #fff;
    }

    .topic-score-badge.score-placeholder {
        background-color: var(--color-text-light);
        /* Grey for logged out */
        color: #fff;
    }

    .topic-score-badge.score-high {
        background-color: var(--color-success);
        /* Green for 7.0+ */
    }

    .topic-score-badge.score-mid {
        background-color: #f59e0b;
        /* Amber/Yellow for 5.0 - 6.5 */
    }

    .topic-score-badge.score-low {
        background-color: var(--color-accent-red);
        /* Red for below 5.0 */
    }

    /* Dim the "Part" label now that score is primary */
    .topic-part-dimmed {
        color: var(--color-text-light);
        font-size: 0.8em;
        font-weight: 500;
        background: none;
        padding: 0;
    }

    /* Fix: Ensure alignment when both tags are present */
    .topic-card .card-header {
        justify-content: space-between;
        align-items: center;
    }

    /* =================================================================
    PREMIUM UI UPGRADES
    ================================================================= */

    /* 1. Modern Gradient Bars */
    .bar-fill {
        background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%) !important;
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
    }

    /* 2. Score Color Utilities (Auto-applied by design logic) */
    .score-high {
        color: #10b981 !important;
    }

    /* Green */
    .score-mid {
        color: #f59e0b !important;
    }

    /* Orange */
    .score-low {
        color: #ef4444 !important;
    }

    /* Red */

    /* 3. Two-Column Grid for Desktop (Responsive) */
    @media (min-width: 768px) {

        /* Use Grid layout instead of stacking */
        .ielts-practice-wrapper .criteria-card {
            display: inline-block;
            width: 48%;
            /* Fits two side-by-side with gap */
            vertical-align: top;
            margin-right: 2%;
            margin-bottom: 25px;
            min-height: 220px;
            /* Uniform height look */
        }

        /* Remove margin from the right side of every 2nd card */
        .ielts-practice-wrapper .criteria-card:nth-of-type(even) {
            margin-right: 0;
        }
    }

    /* 4. Accordion Styling (For Feature #3) */
    details summary {
        cursor: pointer;
        font-weight: 600;
        color: var(--color-primary);
        margin-top: 10px;
        padding: 8px 0;
        list-style: none;
        /* Hides default triangle in some browsers */
    }

    details summary::-webkit-details-marker {
        display: none;
    }

    details summary:after {
        content: "+ Read Analysis";
        font-size: 0.9em;
    }

    details[open] summary:after {
        content: "- Hide Analysis";
    }

    details p {
        margin-top: 10px;
        padding: 10px;
        background: #f9fafb;
        border-radius: 8px;
        border-left: 3px solid var(--color-primary);
        animation: fadeIn 0.3s ease-in;
    }

    /* =================================================================
    10. TAB LOGIC FIX (The Architect Solution)
    ================================================================= */

    /* 1. Default State: HIDDEN */
    .topic-grid-container {
        display: none !important;
        /* Force hidden by default */
        opacity: 0;
        transition: opacity 0.3s ease-in;
    }

    /* 2. Active State: VISIBLE */
    .topic-grid-container.active {
        display: block !important;
        /* Force show only when class is present */
        opacity: 1;
        animation: fadeIn 0.3s ease-in;
    }

    /* 3. Chart Container (For Phase 2) */
    .ielts-analytics-container {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 30px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    /* =================================================================
    FINAL LAYOUT FIX (Removes White Space)
    ================================================================= */

    /* Practice Screen Background */
    /* Practice Screen Background */
    #practice-screen {
        background: linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%);
        /* Soft Blue to Indigo */
        min-height: 100%;
        border-radius: 12px;
        padding: 20px;
    }

    /* 1. Force the container to be absolutely hidden (takes 0 space) */
    .ielts-practice-wrapper .topic-grid-container {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0;
    }

    /* 2. Force the ACTIVE container to show (takes space) */
    .ielts-practice-wrapper .topic-grid-container.active {
        display: block !important;
        height: auto !important;
        opacity: 1;
        animation: fadeIn 0.3s ease-in;
    }

    /* 3. Ensure Grid works inside the active container */
    .ielts-practice-wrapper .topic-grid-container.active .topic-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
        gap: 20px !important;
    }

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

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* =================================================================
    MIC CHECK / SETUP SCREEN REDESIGN (VIBRANT)
    ================================================================= */
    .setup-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }

    .back-link,
    .back-to-topics-btn {
        background: transparent !important;
        border: none;
        color: var(--color-text-light);
        cursor: pointer;
        font-size: 0.9em;
        margin-bottom: 20px;
        display: inline-block;
        padding: 5px 10px;
        box-shadow: none !important;
    }

    .back-link:hover,
    .back-to-topics-btn:hover {
        color: var(--color-primary);
        text-decoration: underline;
        background: transparent !important;
    }

    .setup-card {
        position: relative;
        background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
        border-radius: 24px;
        padding: 40px;
        text-align: center;
        box-shadow: 0 20px 40px rgba(37, 99, 235, 0.25);
        overflow: hidden;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.1);
        max-width: 800px;
        margin: 0 auto;
    }

    .setup-header {
        position: relative;
        z-index: 1;
    }

    .setup-header h2 {
        font-size: 2em;
        color: #fff;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .setup-header p {
        color: rgba(255, 255, 255, 0.9);
        font-size: 1.1em;
        margin-bottom: 30px;
    }

    .setup-steps {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-bottom: 40px;
    }

    .step-item {
        background: rgba(255, 255, 255, 0.1);
        padding: 15px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .step-icon {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        margin-bottom: 5px;
    }

    .step-icon svg {
        width: 24px;
        height: 24px;
    }

    .step-item span {
        font-weight: 600;
        color: #fff;
        font-size: 0.9em;
    }

    .mic-test-wrapper {
        position: relative;
        z-index: 1;
        background: rgba(255, 255, 255, 0.1);
        border: 1px dashed rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 30px;
    }

    .mic-test-header h3 {
        margin: 0 0 5px 0;
        color: #fff;
        font-size: 1.2em;
    }

    .mic-test-header p {
        margin: 0 0 20px 0;
        font-size: 0.9em;
        color: rgba(255, 255, 255, 0.8);
    }

    .mic-test-progress {
        height: 6px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
        overflow: hidden;
        margin-bottom: 20px;
        display: none;
        /* Hidden by default */
    }

    .mic-test-progress-bar {
        height: 100%;
        background: #f58d1e;
        /* Orange for visibility */
        width: 0%;
        transition: width 0.1s linear;
    }

    .btn-outline-primary {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.4);
        color: #fff;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .btn-outline-primary:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: #fff;
    }

    .btn-large {
        width: 100%;
        padding: 15px;
        font-size: 1.2em;
        box-shadow: 0 4px 12px rgba(245, 141, 30, 0.3);
    }

    .mic-test-playback {
        margin-top: 20px;
        color: #fff;
    }

    .mic-test-playback audio {
        width: 100%;
        height: 40px;
    }

    /* AI Avatar Styles */
    .ai-avatar {
        width: 80px;
        height: 80px;
        background: #eff6ff;
        border-radius: 50%;
        margin: 0 auto;
        position: relative;
        border: 3px solid #3b82f6;
        box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2);
        transition: all 0.3s ease;
    }

    .avatar-face {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .avatar-eyes {
        display: flex;
        gap: 14px;
        margin-bottom: 8px;
    }

    .eye {
        width: 8px;
        height: 8px;
        background: #1e293b;
        border-radius: 50%;
        animation: blink 4s infinite;
    }

    .avatar-mouth {
        width: 20px;
        height: 4px;
        background: #1e293b;
        border-radius: 4px;
        transition: all 0.1s ease;
    }

    /* Speaking Animation State */
    .ai-avatar.speaking {
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
        border-color: #2563eb;
    }

    .ai-avatar.speaking .avatar-mouth {
        animation: talk 0.3s infinite alternate;
        width: 24px;
        height: 12px;
        border-radius: 50%;
        background: #2563eb;
    }

    @keyframes blink {

        0%,
        96%,
        100% {
            transform: scaleY(1);
        }

        98% {
            transform: scaleY(0.1);
        }
    }

    @keyframes talk {
        0% {
            height: 4px;
            width: 20px;
            border-radius: 4px;
        }

        100% {
            height: 14px;
            width: 24px;
            border-radius: 50%;
        }
    }

    /* =================================================================
    SHORTCODE INLINE STYLES (Moved from PHP for better maintainability)
    ================================================================= */

    /* 1. Container & Reset */
    .ielts-practice-wrapper {
        font-family: 'Inter', sans-serif;
        background-color: #fff;
        padding: 30px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        max-width: 1000px;
        margin: 20px auto;
        box-sizing: border-box;
        display: block;
    }

    .ielts-practice-wrapper * {
        box-sizing: border-box;
    }

    .topic-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
        gap: 20px !important;
        width: 100% !important;
    }

    /* 3. Cards */
    .topic-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        height: 100% !important;
        min-height: 180px !important;
    }

    .topic-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    }

    .card-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 15px !important;
        width: 100% !important;
        min-height: 30px;
    }

    .topic-title {
        font-size: 1.3em !important;
        color: #374151 !important;
        margin: 0 0 15px 0 !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }

    .card-footer {
        margin-top: auto !important;
        padding-top: 15px !important;
        border-top: 1px dashed #e5e7eb !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* 4. Tabs & Buttons */
    .practice-tabs {
        display: flex !important;
        border-bottom: 2px solid #e5e7eb !important;
        margin-bottom: 20px !important;
        gap: 10px;
    }

    .tab-link {
        padding: 10px 20px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        font-weight: 600 !important;
        border-bottom: 3px solid transparent !important;
        color: #6b7280;
        transition: color 0.2s;
    }

    .tab-link:hover {
        color: #2563eb;
    }

    .tab-link.active {
        border-bottom: 3px solid #2563eb !important;
        color: #2563eb !important;
    }

    .btn-primary {
        background-color: #2563eb !important;
        color: #fff !important;
        padding: 12px 24px !important;
        border-radius: 8px !important;
        border: none !important;
        cursor: pointer !important;
        font-weight: 600 !important;
        transition: background 0.2s, transform 0.1s;
        text-decoration: none;
        display: inline-block;
    }

    .btn-primary:hover {
        background-color: #1e40af !important;
        transform: translateY(-1px);
    }

    .btn-secondary {
        background-color: #fff !important;
        color: #2563eb !important;
        border: 2px solid #2563eb !important;
        padding: 10px 20px !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        font-weight: 600;
        transition: background 0.2s;
    }

    .btn-secondary:hover {
        background-color: #f0f9ff !important;
    }

    .btn-small {
        padding: 8px 16px !important;
        font-size: 0.9em !important;
        background-color: #4f46e5 !important;
        color: #fff !important;
        border-radius: 6px !important;
        border: none !important;
        cursor: pointer !important;
        width: 100%;
        display: block;
    }

    .back-btn {
        background: none !important;
        border: none;
        color: #6b7280;
        cursor: pointer;
        margin-bottom: 20px;
        font-size: 0.95em;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    /* 5. UI Elements */
    .ielts-screen {
        display: none;
        animation: fadeIn 0.3s ease-out;
    }

    #welcome-screen {
        display: block;
        text-align: center;
        padding: 50px 20px;
    }

    .mic-button {
        background-color: #4f46e5;
        border: none;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.7);
        animation: pulse 1.5s infinite;
        transition: background 0.2s;
    }

    .mic-button.recording {
        background-color: #f35b5a;
        animation: none;
    }

    .mic-icon {
        width: 40px;
        height: 40px;
        fill: #fff;
        display: block;
    }

    .progress-stepper {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 30px;
    }

    .step {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: 2px solid #e5e7eb;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        color: #9ca3af;
        transition: all 0.3s;
    }

    .step.active {
        background-color: #2563eb !important;
        color: #fff !important;
        border-color: #2563eb !important;
    }

    .loading-spinner {
        width: 50px;
        height: 50px;
        border: 5px solid #f3f4f6;
        border-top: 5px solid #2563eb;
        border-radius: 50%;
        margin: 0 auto 20px;
        animation: spin 1s linear infinite;
    }

    .mock-exam-cta {
        text-align: center;
        margin-bottom: 30px;
        padding: 25px;
        background-color: #f0f9ff;
        border: 1px solid #b9e6fe;
        border-radius: 12px;
    }

    #start-full-mock-btn {
        width: 100%;
        max-width: 320px;
    }

    .ielts-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 99999;
        display: flex;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(3px);
    }

    .ielts-modal-content {
        background: #fff;
        padding: 30px;
        border-radius: 12px;
        width: 90%;
        max-width: 400px;
        text-align: center;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        animation: scaleUp 0.2s ease-out;
    }

    .ielts-modal-actions {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 20px;
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
        }

        70% {
            box-shadow: 0 0 0 15px rgba(79, 70, 229, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
        }
    }

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

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes scaleUp {
        from {
            transform: scale(0.9);
            opacity: 0;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* 6. Score Badge (Robust) */
    .topic-score-badge {
        padding: 4px 8px;
        border-radius: 6px;
        font-size: 0.85em;
        font-weight: 700;
        color: #fff !important;
        display: inline-block;
        min-width: 35px;
        text-align: center;
    }

    .score-new {
        background-color: #2563eb;
    }

    .score-high {
        background-color: #10b981;
    }

    .score-mid {
        background-color: #f59e0b;
    }

    .score-low {
        background-color: #f35b5a;
    }

    .score-placeholder {
        background-color: #9ca3af;
    }

    .topic-part-dimmed {
        color: #6b7280 !important;
        font-size: 0.8em !important;
        font-weight: 500;
        background: #f3f4f6;
        padding: 4px 8px;
        border-radius: 4px;
        white-space: nowrap !important;
    }

    /* =================================================================
    WELCOME MASCOT - Custom CSS Animation
    ================================================================= */

    .welcome-mascot {
        width: 280px;
        height: 280px;
        margin: 0 auto 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mascot-container {
        position: relative;
        width: 180px;
        height: 180px;
        animation: float 3s ease-in-out infinite;
    }

    /* Book Body */
    .book-body {
        position: relative;
        width: 130px;
        height: 150px;
        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
        border-radius: 10px;
        margin: 0 auto;
        box-shadow: 0 10px 30px rgba(37, 99, 235, 0.3);
        transform-style: preserve-3d;
    }

    .book-spine {
        position: absolute;
        left: -8px;
        top: 0;
        width: 8px;
        height: 100%;
        background: linear-gradient(to right, #1e40af, #2563eb);
        border-radius: 4px 0 0 4px;
    }

    .book-pages {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 85%;
        height: 90%;
        background: repeating-linear-gradient(to bottom,
                #fff 0px,
                #fff 3px,
                #e0e7ff 3px,
                #e0e7ff 6px);
        border-radius: 4px;
        opacity: 0.3;
    }

    /* Face */
    .mascot-face {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
    }

    .mascot-eyes {
        display: flex;
        gap: 20px;
        justify-content: center;
        margin-bottom: 8px;
    }

    .eye {
        width: 14px;
        height: 14px;
        background: white;
        border-radius: 50%;
        position: relative;
        animation: blink 4s infinite;
    }

    .pupil {
        width: 6px;
        height: 6px;
        background: #1e293b;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: look-around 5s ease-in-out infinite;
    }

    .mascot-smile {
        width: 30px;
        height: 15px;
        border: 3px solid white;
        border-top: none;
        border-radius: 0 0 30px 30px;
        margin: 0 auto;
        animation: smile 2s ease-in-out infinite;
    }

    /* IELTS Badge */
    .ielts-badge {
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        background: #fbbf24;
        color: #78350f;
        padding: 6px 12px;
        border-radius: 12px;
        font-size: 10px;
        font-weight: 800;
        box-shadow: 0 4px 10px rgba(251, 191, 36, 0.4);
        animation: badge-pulse 2s ease-in-out infinite;
        text-align: center;
        line-height: 1.3;
    }

    .ielts-badge div {
        white-space: nowrap;
    }

    /* Floating Stars */
    .star {
        position: absolute;
        color: #fbbf24;
        font-size: 20px;
        animation: twinkle 2s ease-in-out infinite;
    }

    .star-1 {
        top: 10px;
        left: 10px;
        animation-delay: 0s;
    }

    .star-2 {
        top: 20px;
        right: 5px;
        animation-delay: 0.7s;
    }

    .star-3 {
        bottom: 30px;
        left: 5px;
        animation-delay: 1.4s;
    }

    /* Animations */
    @keyframes float {

        0%,
        100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-15px);
        }
    }

    @keyframes blink {

        0%,
        96%,
        100% {
            transform: scaleY(1);
        }

        98% {
            transform: scaleY(0.1);
        }
    }

    @keyframes look-around {

        0%,
        100% {
            transform: translate(-50%, -50%);
        }

        25% {
            transform: translate(-30%, -50%);
        }

        75% {
            transform: translate(-70%, -50%);
        }
    }

    @keyframes smile {

        0%,
        100% {
            height: 15px;
        }

        50% {
            height: 18px;
        }
    }

    @keyframes badge-pulse {

        0%,
        100% {
            transform: translateX(-50%) scale(1);
        }

        50% {
            transform: translateX(-50%) scale(1.05);
        }
    }

    @keyframes twinkle {

        0%,
        100% {
            opacity: 0.3;
            transform: scale(1);
        }

        50% {
            opacity: 1;
            transform: scale(1.2);
        }
    }

    /* Three Book Friends - Positioning and Colors */
    .book-left {
        position: absolute;
        left: -20px;
        top: 30px;
        background: linear-gradient(135deg, #ff383c 0%, #e02428 100%) !important;
        transform: rotate(-8deg);
        z-index: 1;
        animation: float-left 3s ease-in-out infinite;
    }

    .book-center {
        position: relative;
        z-index: 3;
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    }

    .book-right {
        position: absolute;
        right: -20px;
        top: 30px;
        background: linear-gradient(135deg, #f58d1e 0%, #d97706 100%) !important;
        transform: rotate(8deg);
        z-index: 2;
        animation: float-right 3s ease-in-out infinite;
    }

    /* Individual float animations for each book */
    @keyframes float-left {

        0%,
        100% {
            transform: rotate(-8deg) translateY(0px);
        }

        50% {
            transform: rotate(-8deg) translateY(-12px);
        }
    }

    @keyframes float-right {

        0%,
        100% {
            transform: rotate(8deg) translateY(0px);
        }

        50% {
            transform: rotate(8deg) translateY(-12px);
        }
    }

    /* Adjust container to accommodate three books */
    .mascot-container {
        position: relative;
        width: 280px !important;
        height: 180px !important;
        animation: float 3s ease-in-out infinite;
    }

    /* Update welcome mascot container */
    .welcome-mascot {
        width: 350px !important;
        height: 280px !important;
        margin: 0 auto 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* =================================================================
    GROWTH COMPASS - QUICK SCORE REDESIGN
    ================================================================= */

    .quick-score-card {
        background: transparent;
        padding: 30px 20px;
        border-radius: 12px;
        box-shadow: none;
        max-width: 100%;
        margin: 0;
        text-align: center;
        transition: all 0.3s ease;
    }

    .score-circle-container {
        width: 200px;
        height: 200px;
        margin: 30px auto;
        position: relative;
    }

    .circular-chart {
        display: block;
        max-width: 100%;
        max-height: 100%;
    }

    .circle-bg {
        fill: none;
        stroke: #e5e7eb;
        stroke-width: 3.8;
    }

    .circle {
        fill: none;
        stroke-width: 3.8;
        stroke-linecap: round;
        animation: progress 1.5s ease-out forwards;
    }

    @keyframes progress {
        0% {
            stroke-dasharray: 0 100;
        }
    }

    .percentage {
        fill: currentColor;
        font-size: 0.5em;
        font-weight: 800;
        text-anchor: middle;
        dominant-baseline: central;
    }

    /* Color modifiers - Psychology-based (never red) */
    .text-amber {
        color: #f59e0b;
    }

    .stroke-amber {
        stroke: #f59e0b;
    }

    .bg-amber-light {
        background: transparent;
    }

    .text-blue {
        color: #3b82f6;
    }

    .stroke-blue {
        stroke: #3b82f6;
    }

    .bg-blue-light {
        background: transparent;
    }

    .text-teal {
        color: #10b981;
    }

    .stroke-teal {
        stroke: #10b981;
    }

    .bg-teal-light {
        background: transparent;
    }

    .score-headline {
        font-size: 1.8em;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 8px;
    }

    .score-subtext {
        font-size: 0.95em;
        color: #6b7280;
        margin-bottom: 20px;
    }

    .score-message {
        font-size: 1.1em;
        font-weight: 600;
        margin: 20px 0;
    }

    .score-disclaimer {
        font-size: 0.75em;
        color: #9ca3af;
        margin-top: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .btn-pill {
        border-radius: 999px;
        padding: 14px 32px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
        background: var(--color-primary);
        color: white;
    }

    .btn-pill:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .quick-score-card {
            padding: 32px 24px;
        }

        .score-circle-container {
            width: 160px;
            height: 160px;
        }

        .score-headline {
            font-size: 1.5em;
        }

        .score-message {
            font-size: 1em;
        }
    }

    /* =================================================================
    AI ANALYSIS LOADING SCREEN (Breathing AI Animation)
    ================================================================= */

    .ai-analysis-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        padding: 60px 40px;
        border-radius: 16px;
        text-align: center;
        min-height: 400px;
    }

    .ai-analysis-headline {
        font-size: 1.8em;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 12px;
    }

    .ai-analysis-subtext {
        font-size: 1em;
        color: #6b7280;
        margin-bottom: 40px;
        max-width: 400px;
        line-height: 1.5;
    }

    .ai-pulse-wrapper {
        position: relative;
        width: 140px;
        height: 140px;
        margin-bottom: 30px;
    }

    .ai-core {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        background: var(--color-primary);
        border-radius: 50%;
        animation: breathe 2s ease-in-out infinite;
        box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
    }

    .ai-ripple {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        border: 2px solid var(--color-primary);
        border-radius: 50%;
        opacity: 0;
    }

    .ai-ripple:nth-child(1) {
        animation: ripple 2s ease-out infinite;
    }

    .ai-ripple:nth-child(2) {
        animation: ripple 2s ease-out 1s infinite;
    }

    .ai-status-text {
        font-size: 1.1em;
        font-weight: 600;
        color: var(--color-primary);
        min-height: 30px;
        transition: opacity 0.3s ease;
    }

    /* Breathing animation for core circle */
    @keyframes breathe {

        0%,
        100% {
            transform: translate(-50%, -50%) scale(1);
            box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3);
        }

        50% {
            transform: translate(-50%, -50%) scale(1.15);
            box-shadow: 0 12px 32px rgba(37, 99, 235, 0.5);
        }
    }

    /* Ripple animation for concentric rings */
    @keyframes ripple {
        0% {
            width: 80px;
            height: 80px;
            opacity: 0.6;
        }

        100% {
            width: 140px;
            height: 140px;
            opacity: 0;
        }
    }

    /* Fade in animation */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .ai-analysis-container {
        animation: fadeIn 0.5s ease;
    }

    /* =================================================================
    RESPONSIVE STYLES - Part 2 Preparation Timer
    ================================================================= */

    @media (max-width: 480px) {
        .prep-timer-row {
            flex-direction: column;
            gap: 12px;
            width: 100%;
        }

        .prep-timer-box,
        #start-prep-btn {
            width: 100%;
            max-width: 280px;
        }
    }

    /* =================================================================
    CONNECTION ERROR CONTAINER
    ================================================================= */

    .connection-error-container {
        max-width: 600px;
        margin: 40px auto;
        padding: 40px;
        background: #fff;
        border: 2px solid #fbbf24;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(251, 191, 36, 0.1);
        text-align: center;
        animation: fadeIn 0.5s ease;
    }

    .connection-error-container .error-icon {
        font-size: 4em;
        margin-bottom: 20px;
        animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {

        0%,
        100% {
            transform: scale(1);
            opacity: 1;
        }

        50% {
            transform: scale(1.1);
            opacity: 0.8;
        }
    }

    .connection-error-container h2 {
        font-size: 1.8em;
        color: #d97706;
        margin-bottom: 15px;
        font-weight: 700;
    }

    .connection-error-container>p {
        font-size: 1.1em;
        color: var(--color-text-dark);
        margin-bottom: 30px;
        line-height: 1.6;
    }

    .error-details {
        background: #fffbeb;
        border: 1px solid #fef3c7;
        border-radius: 12px;
        padding: 25px;
        text-align: left;
        margin-top: 20px;
    }

    .error-details p {
        margin: 0 0 10px 0;
        color: var(--color-text-dark);
        font-size: 0.95em;
    }

    .error-details strong {
        color: #92400e;
        font-weight: 600;
    }

    .error-details ul {
        margin: 10px 0 20px 20px;
        padding: 0;
        list-style: disc;
    }

    .error-details ul:last-child {
        margin-bottom: 0;
    }

    .error-details li {
        margin-bottom: 8px;
        color: var(--color-text-light);
        font-size: 0.9em;
        line-height: 1.5;
    }

    /* Button Loading Spinner */
    .btn-spinner {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255, 255, 255, .3);
        border-radius: 50%;
        border-top-color: #fff;
        animation: spin 1s ease-in-out infinite;
        margin-right: 8px;
        vertical-align: middle;
    }

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

    .btn-loading {
        cursor: not-allowed;
        opacity: 0.8;
    }

    /* =================================================================
    LEXIE'S QUEST WORD FEATURE - Purple-themed gamification
    ================================================================= */

    .quest-container {
        background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
        border: 2px solid #c084fc;
        border-radius: 20px;
        padding: 10px 20px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 15px 0;
        box-shadow: 0 4px 12px rgba(192, 132, 252, 0.2);
        animation: quest-pulse 2s ease-in-out infinite;
    }

    @keyframes quest-pulse {

        0%,
        100% {
            transform: scale(1);
            box-shadow: 0 4px 12px rgba(192, 132, 252, 0.2);
        }

        50% {
            transform: scale(1.02);
            box-shadow: 0 6px 16px rgba(192, 132, 252, 0.3);
        }
    }

    .quest-icon {
        font-size: 1.3em;
    }

    .quest-label {
        font-weight: 600;
        color: #6b21a8;
        font-size: 0.9em;
    }

    .quest-word {
        font-weight: 800;
        color: #7c3aed;
        font-size: 1.1em;
        background: white;
        padding: 4px 12px;
        border-radius: 12px;
        border: 1px solid #a78bfa;
    }

    /* =================================================================
    IELTS-TB REPORT VIEWER STYLES
    ================================================================= */

    /* Blur Overlay for Logged-Out Users - Exact ispractice match */
    .ieltb-blur-wrapper {
        position: relative;
        overflow: hidden;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        background: #fff;
        padding: 40px 20px;
        text-align: center;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        isolation: isolate;
    }

    .ieltb-content-blur {
        filter: blur(6px);
        opacity: 0.5;
        pointer-events: none;
        user-select: none;
        margin-top: -20px;
        z-index: 1;
        position: relative;
    }

    .ieltb-login-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        width: 90%;
        max-width: 420px;
        background: rgba(255, 255, 255, 0.95);
        padding: 40px 30px;
        border-radius: 16px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        border: 1px solid #e2e8f0;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .ieltb-lock-icon {
        width: 64px;
        height: 64px;
        background-color: #e0e7ff;
        color: #4f46e5;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
    }

    .ieltb-lock-icon svg {
        width: 32px;
        height: 32px;
    }

    .ieltb-login-title {
        margin: 0 0 10px;
        color: #1e293b;
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.025em;
    }

    .ieltb-login-desc {
        color: #64748b;
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 25px;
    }

    .ieltb-login-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        color: #fff;
        padding: 14px 36px;
        border-radius: 12px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
    }

    .ieltb-login-btn:hover {
        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.45);
        color: #fff;
    }

    .ieltb-login-btn svg {
        margin-right: 8px;
        width: 20px;
        height: 20px;
    }

    /* Empty State - Premium Lexie-inspired design */
    .ieltb-empty-state {
        text-align: center;
        padding: 60px 30px;
        background: linear-gradient(180deg, #fafafa 0%, #f1f5f9 100%);
        border-radius: 16px;
        border: 1px dashed #e2e8f0;
    }

    .ieltb-empty-state svg {
        width: 72px;
        height: 72px;
        color: #8b5cf6;
        margin-bottom: 20px;
        padding: 20px;
        background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%);
        border-radius: 50%;
    }

    .ieltb-empty-state p {
        font-size: 1.1rem;
        color: #64748b;
        margin: 0;
        font-weight: 500;
    }

    /* Dashboard Container - Premium Lexie-inspired design */
    .ieltb-dashboard {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 30px;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    }

    .ieltb-dashboard h2 {
        color: #0f172a;
        border-bottom: none;
        padding-bottom: 16px;
        margin-top: 0;
        margin-bottom: 8px;
        font-size: 1.6rem;
        font-weight: 800;
        letter-spacing: -0.025em;
        position: relative;
    }

    .ieltb-dashboard h2::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 4px;
        background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
        border-radius: 2px;
    }

    .ieltb-dashboard h3 {
        color: #1e293b;
        font-size: 1.2rem;
        font-weight: 700;
        margin-top: 35px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .ieltb-dashboard h3::before {
        content: '';
        width: 4px;
        height: 20px;
        background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
        border-radius: 2px;
    }

    /* Stat Cards - Premium Lexie-inspired design */
    .ieltb-stat-cards {
        display: flex;
        gap: 20px;
        margin: 25px 0;
        flex-wrap: wrap;
    }

    .ieltb-stat-card {
        flex: 1;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 24px 20px;
        text-align: center;
        min-width: 180px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .ieltb-stat-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .ieltb-stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        border-color: #c7d2fe;
    }

    .ieltb-stat-card:hover::before {
        opacity: 1;
    }

    /* Card 1 - Total attempts (Indigo) */
    .ieltb-stat-card:nth-child(1) .stat-value {
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .ieltb-stat-card:nth-child(1)::before {
        background: linear-gradient(90deg, #6366f1 0%, #4f46e5 100%);
    }

    /* Card 2 - Average score (Emerald) */
    .ieltb-stat-card:nth-child(2) .stat-value {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .ieltb-stat-card:nth-child(2)::before {
        background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    }

    .ieltb-stat-card:nth-child(2):hover {
        box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        border-color: #a7f3d0;
    }

    /* Card 3 - Highest score (Amber) */
    .ieltb-stat-card:nth-child(3) .stat-value {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .ieltb-stat-card:nth-child(3)::before {
        background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
    }

    .ieltb-stat-card:nth-child(3):hover {
        box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        border-color: #fde68a;
    }

    .ieltb-stat-card .stat-value {
        display: block;
        font-size: 2.8em;
        font-weight: 800;
        color: #6366f1;
        line-height: 1.1;
        letter-spacing: -0.02em;
    }

    .ieltb-stat-card .stat-label {
        display: block;
        font-size: 0.9em;
        color: #64748b;
        margin-top: 8px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* Table Wrapper - Premium Lexie-inspired design */
    .ieltb-table-wrapper {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        overflow: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .ieltb-activity-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 600px;
    }

    .ieltb-activity-table th {
        text-align: left;
        padding: 16px 24px;
        background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
        color: #475569;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        border-bottom: 1px solid #e2e8f0;
        white-space: nowrap;
    }

    .ieltb-activity-table td {
        padding: 18px 24px;
        border-bottom: 1px solid #f1f5f9;
        color: #334155;
        font-size: 14px;
        vertical-align: middle;
        transition: background-color 0.2s ease;
    }

    .ieltb-activity-table td:first-child {
        white-space: nowrap;
        width: 1%;
        font-weight: 500;
        color: #64748b;
    }

    .ieltb-activity-table td:last-child {
        text-align: right;
        white-space: nowrap;
        width: 1%;
    }

    .ieltb-activity-table tbody tr {
        transition: all 0.2s ease;
    }

    .ieltb-activity-table tbody tr:hover {
        background: linear-gradient(90deg, rgba(99, 102, 241, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);
    }

    .ieltb-activity-table tbody tr:hover td {
        background-color: transparent;
    }

    .ieltb-activity-table tbody tr:last-child td {
        border-bottom: none;
    }

    .ieltb-task-cell {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 500;
        font-size: 0.95rem;
        color: #1e293b;
    }

    .ieltb-task-cell svg {
        flex-shrink: 0;
        color: #8b5cf6;
        transition: transform 0.2s ease;
    }

    .ieltb-activity-table tr:hover .ieltb-task-cell svg {
        transform: scale(1.1);
    }

    /* Score Badge - Premium design with color-coded states */
    .ieltb-score-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        height: 32px;
        background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
        color: #4f46e5;
        padding: 4px 12px;
        border-radius: 20px;
        font-weight: 700;
        font-size: 14px;
        border: 1px solid #c7d2fe;
        transition: all 0.2s ease;
    }

    /* High score (7.0+) - Green */
    .ieltb-score-badge.score-high {
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        color: #059669;
        border-color: #6ee7b7;
    }

    /* Mid score (5.0-6.9) - Orange/Amber */
    .ieltb-score-badge.score-mid {
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        color: #d97706;
        border-color: #fcd34d;
    }

    /* Low score (<5.0) - Red */
    .ieltb-score-badge.score-low {
        background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
        color: #dc2626;
        border-color: #fca5a5;
    }

    .ieltb-activity-table tr:hover .ieltb-score-badge {
        transform: scale(1.05);
    }

    /* View Button - Premium design */
    .ieltb-view-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 1px solid #e2e8f0;
        color: #475569;
        padding: 8px 16px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        background: #fff;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .ieltb-view-btn:hover {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        border-color: transparent;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }

    /* PDF Button - Premium amber/gold design for Full Mock */
    .ieltb-pdf-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 1px solid #fcd34d;
        color: #b45309;
        padding: 8px 16px;
        border-radius: 8px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .ieltb-pdf-btn:hover {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        border-color: transparent;
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    }

    /* Pagination - Premium design */
    .ieltb-pagination {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 24px;
    }

    .ieltb-pagination .page-numbers {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 36px;
        padding: 0 12px;
        border-radius: 10px;
        background: #fff;
        border: 1px solid #e2e8f0;
        color: #64748b;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s ease;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }

    .ieltb-pagination .page-numbers:hover {
        background: #f8fafc;
        border-color: #c7d2fe;
        color: #4f46e5;
        transform: translateY(-1px);
    }

    .ieltb-pagination .page-numbers.current {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        color: white;
        border-color: transparent;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }

    /* Report Detail View - Premium Lexie-inspired design */
    .ieltb-report-detail {
        margin: 0;
        padding: 30px;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        margin-bottom: 20px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    }

    .ieltb-back-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #6366f1;
        font-weight: 600;
        text-decoration: none;
        margin-bottom: 20px;
        padding: 8px 16px;
        background: #f5f3ff;
        border-radius: 8px;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .ieltb-back-link:hover {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        color: #fff;
        transform: translateX(-4px);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }

    .ieltb-report-header {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 28px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
        flex-wrap: wrap;
        gap: 24px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .ieltb-overall-score {
        text-align: center;
        padding: 20px 30px;
        background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
        border: 3px solid;
        border-radius: 20px;
        position: relative;
        overflow: hidden;
    }

    .ieltb-overall-score::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: inherit;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }

    .ieltb-overall-score .score {
        font-size: 3rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.02em;
    }

    .ieltb-overall-score .score span {
        font-size: 1.1rem;
        color: #9ca3af;
        font-weight: 500;
    }

    .ieltb-overall-score .label {
        margin-top: 10px;
        font-size: 0.9rem;
        color: #64748b;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .ieltb-report-meta {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .ieltb-report-meta .meta-item {
        display: flex;
        gap: 12px;
        align-items: center;
    }

    .ieltb-report-meta .meta-label {
        font-weight: 700;
        color: #64748b;
        min-width: 60px;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .ieltb-report-meta .meta-value {
        color: #1e293b;
        font-weight: 500;
    }

    .ieltb-print-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        color: white;
        border: none;
        padding: 14px 24px;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        margin-left: auto;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
    }

    .ieltb-print-btn:hover {
        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.45);
    }

    .ieltb-section {
        margin: 35px 0;
    }

    .ieltb-section h3 {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 1.15rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 18px;
        padding-bottom: 12px;
        border-bottom: 1px solid #e2e8f0;
        position: relative;
    }

    .ieltb-section h3::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
        border-radius: 2px;
    }

    .ieltb-section h3 svg {
        color: #8b5cf6;
    }

    .ieltb-transcript-box {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 28px;
        line-height: 1.9;
        font-size: 1rem;
        color: #374151;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .ieltb-feedback-box {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 28px;
        line-height: 1.8;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    /* Task Type Badge */
    .ieltb-task-type-badge {
        display: inline-block;
        padding: 6px 14px;
        background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
        color: #6d28d9;
        font-size: 0.85rem;
        font-weight: 600;
        border-radius: 20px;
        border: 1px solid #ddd6fe;
    }

    /* Transcript Speaker Colors */
    .speaker-examiner {
        color: #6d28d9;
        font-weight: 700;
    }

    .speaker-candidate {
        color: #059669;
        font-weight: 700;
    }

    /* AI Analizi Score Styling */
    .ieltb-feedback-box h3 {
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .ieltb-feedback-box h3:first-child {
        padding: 12px 18px;
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-radius: 12px;
        border-left: 4px solid #6366f1;
    }

    /* =================================================================
    AI-GENERATED FEEDBACK HTML STYLES - ispractice match
    These styles target the HTML generated by AI in feedback_html
    ================================================================= */

    /* Overall Score Box */
    .ieltb-feedback-box .overall-score-box {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 25px 30px;
        margin-bottom: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .ieltb-feedback-box .overall-score-box>div:first-child {
        font-size: 3rem;
        font-weight: 800;
        color: #2563eb;
        line-height: 1;
    }

    .ieltb-feedback-box .overall-score-box>div:first-child span {
        font-size: 2rem;
        color: #94a3b8;
        font-weight: 300;
    }

    .ieltb-feedback-box .overall-score-box p {
        color: #64748b;
        margin: 0;
        font-weight: 500;
    }

    /* Criteria Breakdown Heading */
    .ieltb-feedback-box h2 {
        font-size: 1.5em;
        font-weight: 700;
        color: #111827;
        margin: 25px 0 20px 0;
        border-bottom: none;
    }

    /* Summary Chart Container */
    .ieltb-feedback-box .summary-chart-container {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 25px;
    }

    .ieltb-feedback-box .chart-row {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 12px;
    }

    .ieltb-feedback-box .chart-row:last-child {
        margin-bottom: 0;
    }

    .ieltb-feedback-box .bar-label {
        min-width: 200px;
        font-weight: 500;
        color: #374151;
        font-size: 0.95rem;
    }

    .ieltb-feedback-box .chart-bar {
        flex: 1;
        height: 10px;
        background: #e5e7eb;
        border-radius: 5px;
        overflow: hidden;
    }

    .ieltb-feedback-box .bar-fill {
        height: 100%;
        background: #3b82f6;
        border-radius: 5px;
        transition: width 0.5s ease-in-out;
    }

    .ieltb-feedback-box .bar-score {
        min-width: 35px;
        text-align: right;
        font-weight: 700;
        font-size: 1.1rem;
        color: #2563eb;
    }

    /* Criteria Cards - ispractice style */
    .ieltb-feedback-box .criteria-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 15px;
    }

    .ieltb-feedback-box .criteria-card h3 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 15px 0;
        padding: 0;
        font-size: 1rem;
        font-weight: 600;
        color: #111827;
        border: none;
    }

    .ieltb-feedback-box .criteria-content-wrapper {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .ieltb-feedback-box .criteria-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .ieltb-feedback-box .criteria-icon svg {
        width: 22px;
        height: 22px;
        color: #fff;
    }

    /* Icon Colors */
    .ieltb-feedback-box .icon-fluency {
        background: #3b82f6;
    }

    .ieltb-feedback-box .icon-lexical {
        background: #f59e0b;
    }

    .ieltb-feedback-box .icon-grammatical {
        background: #ef4444;
    }

    .ieltb-feedback-box .icon-pronunciation {
        background: #8b5cf6;
    }

    .ieltb-feedback-box .criteria-score {
        font-size: 1.5rem;
        font-weight: 800;
        color: #22c55e;
    }

    .ieltb-feedback-box .criteria-card p {
        margin: 0;
        color: #4b5563;
        line-height: 1.7;
        font-size: 0.95rem;
    }

    /* CTA Button */
    .ieltb-feedback-box .btn-expert-contact {
        display: block;
        text-align: center;
        background: #6366f1;
        color: #fff;
        padding: 16px 24px;
        border-radius: 10px;
        font-weight: 600;
        text-decoration: none;
        margin-top: 25px;
        transition: background 0.2s;
    }

    .ieltb-feedback-box .btn-expert-contact:hover {
        background: #4f46e5;
        color: #fff;
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
        .ieltb-feedback-box .bar-label {
            min-width: 120px;
            font-size: 0.85rem;
        }

        .ieltb-feedback-box .overall-score-box {
            flex-direction: column;
            text-align: center;
            gap: 10px;
        }

        .ieltb-feedback-box .overall-score-box>div:first-child {
            font-size: 2.5rem;
        }
    }

    /* Criteria Breakdown - Matching ispractice */
    .ieltb-criteria-breakdown {
        margin: 30px 0;
    }

    .ieltb-criteria-breakdown h4 {
        font-size: 1.3em;
        color: #111827;
        margin-bottom: 20px;
        border-bottom: none;
        font-weight: 600;
    }

    .ieltb-criterion-row {
        background-color: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        padding: 16px;
        margin-bottom: 12px;
    }

    .ieltb-criterion-header {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .ieltb-criterion-icon {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ieltb-criterion-icon svg {
        width: 24px;
        height: 24px;
        color: #fff;
    }

    /* Criterion Icon Colors */
    .ieltb-criterion-icon.fluency {
        background-color: #3b82f6;
    }

    .ieltb-criterion-icon.lexical {
        background-color: #f59e0b;
    }

    .ieltb-criterion-icon.grammar {
        background-color: #ef4444;
    }

    .ieltb-criterion-icon.pronunciation {
        background-color: #8b5cf6;
    }

    .ieltb-criterion-info {
        flex-grow: 1;
    }

    .ieltb-criterion-info .title {
        font-weight: 600;
        color: #111827;
        font-size: 1rem;
    }

    .ieltb-criterion-progress {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 6px;
    }

    .ieltb-criterion-progress .score {
        font-weight: 700;
        font-size: 1.1em;
        color: #1d2327;
        min-width: 28px;
    }

    .ieltb-progress-bar {
        flex-grow: 1;
        height: 8px;
        background-color: #f3f4f6;
        border-radius: 4px;
        overflow: hidden;
    }

    .ieltb-progress-bar-inner {
        height: 100%;
        border-radius: 4px;
        transition: width 0.5s ease-in-out;
    }

    .ieltb-progress-bar-inner.fluency {
        background-color: #3b82f6;
    }

    .ieltb-progress-bar-inner.lexical {
        background-color: #f59e0b;
    }

    .ieltb-progress-bar-inner.grammar {
        background-color: #ef4444;
    }

    .ieltb-progress-bar-inner.pronunciation {
        background-color: #8b5cf6;
    }

    .ieltb-criterion-details {
        display: block;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #f3f4f6;
        color: #4b5563;
        line-height: 1.6;
        font-size: 0.95rem;
    }

    /* Mobile Responsive */
    @media (max-width: 768px) {
        .ieltb-stat-cards {
            flex-direction: column;
        }

        .ieltb-table-wrapper {
            overflow-x: visible;
        }

        .ieltb-activity-table,
        .ieltb-activity-table thead,
        .ieltb-activity-table tbody,
        .ieltb-activity-table th,
        .ieltb-activity-table td,
        .ieltb-activity-table tr {
            display: block;
            width: 100%;
            min-width: 0;
        }

        .ieltb-activity-table thead {
            display: none;
        }

        .ieltb-activity-table tr {
            margin-bottom: 20px;
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .ieltb-activity-table td {
            border: none;
            padding: 10px 0;
            text-align: center;
        }

        .ieltb-activity-table td::before {
            content: attr(data-label);
            display: block;
            font-size: 11px;
            text-transform: uppercase;
            font-weight: 700;
            color: #94a3b8;
            margin-bottom: 5px;
        }

        .ieltb-task-cell {
            justify-content: center;
            flex-direction: column;
        }

        .ieltb-activity-table .ieltb-view-btn,
        .ieltb-activity-table .ieltb-pdf-btn {
            width: 100%;
            justify-content: center;
            padding: 14px;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: white;
            border-radius: 10px;
            font-size: 0.95rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .ieltb-report-header {
            flex-direction: column;
            align-items: stretch;
        }

        .ieltb-print-btn {
            margin-left: 0;
            width: 100%;
            justify-content: center;
        }

        /* Score Badges */
        .ieltb-score-badge {
            padding: 8px 16px;
            font-size: 1.1rem;
            border-radius: 12px;
        }

        /* Usage Banner */
        .ieltb-usage-banner {
            flex-direction: column !important;
            text-align: center;
            gap: 10px !important;
            padding: 15px !important;
        }

        .ieltb-usage-banner>div:first-of-type {
            display: none;
        }

        .ieltb-usage-banner a {
            width: 100%;
            text-align: center;
            padding: 10px 16px !important;
        }

        /* Login Overlay */
        .ieltb-login-overlay {
            padding: 30px 20px;
        }

        .ieltb-login-title {
            font-size: 1.3rem;
        }

        .ieltb-login-desc {
            font-size: 0.95rem;
        }

        .ieltb-login-btn {
            width: 100%;
            padding: 14px 24px;
        }

        /* Empty State */
        .ieltb-empty-state {
            padding: 40px 20px;
        }

        .ieltb-empty-state svg {
            width: 60px;
            height: 60px;
        }

        /* Pagination */
        .ieltb-pagination {
            flex-wrap: wrap;
            gap: 8px;
        }

        .ieltb-pagination .page-numbers {
            min-width: 40px;
            height: 40px;
            font-size: 0.9rem;
        }

        /* Report Detail View */
        .ieltb-report-meta {
            flex-direction: column;
            gap: 10px;
        }

        .ieltb-back-btn {
            width: 100%;
            text-align: center;
            margin-bottom: 15px;
        }

        /* Transcript Box */
        .ieltb-transcript-box,
        .transcript-box {
            padding: 15px;
            font-size: 0.9rem;
        }

        /* Feedback Box */
        .ieltb-feedback-box {
            padding: 20px 15px;
        }

        .ieltb-feedback-box .overall-score-box {
            flex-direction: column;
            gap: 15px;
            text-align: center;
        }

        .ieltb-feedback-box .bar-label {
            min-width: 100%;
            margin-bottom: 8px;
        }

        .ieltb-feedback-box .chart-row {
            flex-wrap: wrap;
        }

        /* Criteria Breakdown */
        .ieltb-criterion-row {
            padding: 14px;
        }

        .ieltb-criterion-header {
            flex-wrap: wrap;
            gap: 10px;
        }

        .ieltb-criterion-icon {
            width: 40px;
            height: 40px;
        }

        .ieltb-criterion-details {
            font-size: 0.9rem;
        }
    }

    /* Sidebar Overlap Fix (Desktop) - Matches ispractice .iaw-dashboard logic */
    @media (min-width: 769px) {
        .ieltb-dashboard {
            margin-left: 320px;
            margin-right: 60px;
            width: auto;
        }
    }

    /* Mobile Responsive Reset */
    @media (max-width: 768px) {
        .ieltb-dashboard {
            width: 100% !important;
            margin: 0 !important;
            padding: 15px !important;
            box-sizing: border-box !important;
            border-radius: 0;
        }

        .ieltb-dashboard h2 {
            font-size: 1.3rem;
        }

        .ieltb-dashboard h3 {
            font-size: 1.1rem;
        }
    }

    /* PHONE STYLES (600px and below) for Dashboard */
    @media (max-width: 600px) {
        .ieltb-dashboard {
            padding: 12px !important;
        }

        .ieltb-stat-card {
            min-width: 100%;
            padding: 18px 15px;
        }

        .ieltb-stat-card .stat-value {
            font-size: 2rem;
        }

        .ieltb-stat-card .stat-label {
            font-size: 0.85rem;
        }

        .ieltb-dashboard h2 {
            font-size: 1.2rem;
            padding-bottom: 12px;
        }

        .ieltb-dashboard h2::after {
            width: 60px;
            height: 3px;
        }

        .ieltb-activity-table tr {
            padding: 12px;
            margin-bottom: 15px;
        }

        .ieltb-activity-table td {
            padding: 8px 0;
        }

        .ieltb-score-badge {
            padding: 6px 14px;
            font-size: 1rem;
        }

        /* Login Overlay */
        .ieltb-login-overlay {
            padding: 25px 15px;
            max-width: 350px;
        }

        .ieltb-lock-icon {
            width: 56px;
            height: 56px;
        }

        .ieltb-lock-icon svg {
            width: 28px;
            height: 28px;
        }

        /* PDF Button */
        .ieltb-pdf-btn {
            font-size: 0.9rem;
            padding: 12px !important;
        }
    }

    /* SMALL PHONE STYLES (480px and below) for Dashboard */
    @media (max-width: 480px) {
        .ieltb-dashboard {
            padding: 10px !important;
        }

        .ieltb-stat-card {
            padding: 15px 12px;
        }

        .ieltb-stat-card .stat-value {
            font-size: 1.8rem;
        }

        .ieltb-stat-card .stat-label {
            font-size: 0.8rem;
        }

        .ieltb-dashboard h2 {
            font-size: 1.1rem;
        }

        .ieltb-dashboard h3 {
            font-size: 1rem;
        }

        .ieltb-usage-banner {
            padding: 12px !important;
        }

        .ieltb-usage-banner strong,
        .ieltb-usage-banner span {
            font-size: 0.9rem !important;
        }

        .ieltb-task-cell {
            font-size: 0.9rem;
        }

        .ieltb-task-cell svg {
            width: 16px !important;
            height: 16px !important;
        }

        .ieltb-empty-state {
            padding: 30px 15px;
        }

        .ieltb-empty-state svg {
            width: 50px;
            height: 50px;
        }

        .ieltb-empty-state p {
            font-size: 0.95rem;
        }

        /* Print Button */
        .ieltb-print-btn {
            padding: 12px;
            font-size: 0.9rem;
        }
    }

    /* =================================================================
    SECTION: INLINE STYLES MOVED FROM PHP (v5.9 Performance Fix)
    ================================================================= */

    /* --- Noise Background Button (Animated Gradient CTA) --- */
    .noise-container {
        display: flex;
        justify-content: center;
    }

    .noise-bg-wrapper {
        position: relative;
        padding: 6px;
        border-radius: 9999px;
        margin: 0 auto;
        overflow: hidden;
        display: inline-block;
        background: linear-gradient(120deg, rgb(255, 100, 150), rgb(100, 150, 255), rgb(255, 200, 100), rgb(255, 100, 150));
        background-size: 300% 300%;
        animation: moveGradient 4s ease infinite;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

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

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    .noise-bg-wrapper::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.5;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        pointer-events: none;
        mix-blend-mode: overlay;
        z-index: 1;
    }

    .noise-btn {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        background: linear-gradient(to right, #000000, #171717);
        padding: 10px 32px;
        color: white !important;
        font-weight: 500;
        border: none;
        cursor: pointer;
        font-family: 'Inter', sans-serif;
        font-size: 15px;
        box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), 0px 1px 0px 0px rgba(255, 255, 255, 0.05);
        transition: transform 0.1s ease;
        text-decoration: none;
    }

    .noise-btn:active {
        transform: scale(0.98);
    }

    .arrow-icon {
        margin-left: 6px;
        transition: transform 0.2s;
    }

    .noise-btn:hover .arrow-icon {
        transform: translateX(3px);
    }

    /* --- Load More Button (Modern Style) --- */
    .btn-load-more-modern {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        color: #374151;
        padding: 10px 24px;
        border-radius: 99px;
        font-weight: 500;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .btn-load-more-modern:hover {
        background: #f9fafb;
        border-color: #d1d5db;
        transform: translateY(-1px);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        color: #111827;
    }

    .btn-load-more-modern:active {
        transform: scale(0.98);
    }

    /* --- AI Avatar (Lexie Face Animation) --- */
    .ai-avatar {
        width: 100px;
        height: 100px;
        background: #f1f5f9;
        border-radius: 50%;
        margin: 0 auto;
        position: relative;
        border: 4px solid #3b82f6;
        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
        transition: all 0.3s ease;
        display: block !important;
        overflow: hidden;
    }

    .avatar-face {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 10px;
    }

    .eyebrows {
        display: flex;
        gap: 24px;
        margin-bottom: 8px;
        width: 100%;
        justify-content: center;
    }

    .eyebrow {
        width: 18px;
        height: 3px;
        background: #334155;
        border-radius: 10px;
        transition: all 0.2s ease;
    }

    .avatar-eyes {
        display: flex;
        gap: 18px;
        margin-bottom: 12px;
    }

    .eye {
        width: 14px;
        height: 14px;
        background: #1e293b;
        border-radius: 50%;
        position: relative;
        animation: blink 4s infinite;
    }

    .eye::after {
        content: '';
        position: absolute;
        top: 3px;
        right: 3px;
        width: 4px;
        height: 4px;
        background: white;
        border-radius: 50%;
    }

    .avatar-mouth {
        width: 20px;
        height: 6px;
        background: #334155;
        border-radius: 0 0 10px 10px;
        transition: all 0.1s ease;
    }

    /* Speaking State */
    .ai-avatar.speaking {
        border-color: #2563eb;
        box-shadow: 0 0 25px rgba(59, 130, 246, 0.3);
    }

    .ai-avatar.speaking .eyebrow {
        transform: translateY(-2px);
    }

    .ai-avatar.speaking .avatar-mouth {
        background: #1e293b;
        transition: all 0.1s ease-out;
    }

    @keyframes blink {

        0%,
        96%,
        100% {
            transform: scaleY(1);
        }

        98% {
            transform: scaleY(0.1);
        }
    }

    /* =================================================================
    TASK BASED DASHBOARD V2 STYLES
    Integrated from design files - Modern Speaking Dashboard
    ================================================================= */

    /* --- Dashboard Container --- */
    .ieltb-dashboard-v2 {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 32px 24px;
        font-family: 'Inter', system-ui, sans-serif;
        -webkit-font-smoothing: antialiased;
    }

    .ieltb-dashboard-v2 * {
        font-family: 'Inter', system-ui, sans-serif;
    }

    /* --- Sticky Header --- */
    .ieltb-header-v2 {
        position: sticky;
        top: 0;
        z-index: 20;
        background: #fff;
        border-bottom: 1px solid rgba(229, 231, 235, 0.6);
        padding: 16px 32px;
        margin: -48px -24px 32px -24px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }

    .ieltb-header-v2 h1 {
        font-size: 1.5rem;
        font-weight: 700;
        color: #111827;
        margin: 0;
        letter-spacing: -0.025em;
    }

    .ieltb-header-v2 p {
        font-size: 0.875rem;
        color: #6b7280;
        margin: 4px 0 0 0;
    }

    .ieltb-header-actions {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    /* Header Start Practising Button - Indigo Style */
    .ieltb-header-v2 .ieltb-btn-cta {
        background: #111827;
        color: white;
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 0.9375rem;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.2s ease;
        box-shadow: 0 4px 12px rgba(17, 24, 39, 0.15);
    }

    .ieltb-header-v2 .ieltb-btn-cta:hover {
        background: #1f2937;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(17, 24, 39, 0.2);
    }

    .ieltb-header-v2 .ieltb-btn-cta svg {
        width: 18px;
        height: 18px;
        transition: transform 0.2s ease;
    }

    .ieltb-header-v2 .ieltb-btn-cta:hover svg {
        transform: translateX(3px);
    }

    .ieltb-link-ghost {
        font-size: 0.875rem;
        color: #6b7280;
        font-weight: 500;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .ieltb-link-ghost:hover {
        color: #111827;
    }

    /* --- Inner Content Wrapper for centered max-width --- */
    .ieltb-content-inner {
        max-width: 1120px;
        margin: 0 auto;
        width: 100%;
    }

    /* --- Hero Card with Purple Glow Border --- */
    .ieltb-hero-card {
        position: relative;
        width: 100%;
        max-width: 640px;
        margin: 24px auto 48px;
        /* Increased top/bottom margin for staging */
        background: linear-gradient(135deg, #ffffff 0%, #fcfaff 100%);
        /* Subtle depth */
        border-radius: 16px;
        overflow: visible;
        text-align: center;
        min-height: 440px;
        /* Slightly taller */
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
        /* Subtle base shadow */
    }

    /* Halo Glow Effect - Focused on edges/waves rather than whole border */
    .ieltb-hero-card::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: 18px;
        background: conic-gradient(from var(--glow-angle, 0deg),
                rgba(59, 130, 246, 0.4) 0deg,
                /* Blue 500 */
                rgba(96, 165, 250, 0.1) 60deg,
                rgba(37, 99, 235, 0.4) 120deg,
                rgba(29, 78, 216, 0.1) 180deg,
                rgba(147, 197, 253, 0.4) 240deg,
                rgba(59, 130, 246, 0.1) 300deg,
                rgba(37, 99, 235, 0.4) 360deg);
        filter: blur(8px);
        /* High blur for halo effect */
        animation: ieltb-purple-glow-rotate 4s linear infinite;
        z-index: -1;
        opacity: 0.6;
        /* Lower opacity */
    }

    /* Inner background */
    .ieltb-hero-card::after {
        content: '';
        position: absolute;
        inset: 1px;
        border-radius: 15px;
        background: linear-gradient(135deg, #ffffff 0%, #fcfaff 100%);
        z-index: -1;
    }

    @property --glow-angle {
        syntax: '<angle>';
        initial-value: 0deg;
        inherits: false;
    }

    @keyframes ieltb-purple-glow-rotate {
        0% {
            --glow-angle: 0deg;
        }

        100% {
            --glow-angle: 360deg;
        }
    }

    .ieltb-hero-card:hover::before {
        opacity: 1;
        filter: brightness(1.1);
    }

    .ieltb-hero-scrim {
        display: none;
    }

    .ieltb-hero-content {
        position: relative;
        z-index: 10;
        padding: 40px 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* --- Mic Visualization --- */
    .ieltb-mic-viz {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        /* Increased gap for waves */
        height: 80px;
        margin-bottom: 24px;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        top: -10px;
        /* Slightly higher than center */
    }

    /* --- Ambient Voice Flow --- */
    .ieltb-ambient-flow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        pointer-events: none;
        overflow: visible;
    }

    .ieltb-blob {
        position: absolute;
        width: 160px;
        height: 160px;
        background: rgba(99, 102, 241, 0.12);
        /* Soft Indigo */
        border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
        filter: blur(40px);
        /* Fog effect */
        mix-blend-mode: multiply;
        animation: ieltb-ambient-morph 8s ease-in-out infinite;
        opacity: 0.6;
        transition: opacity 0.5s ease;
    }

    .ieltb-blob[data-blob="2"] {
        width: 180px;
        height: 140px;
        background: rgba(168, 85, 247, 0.1);
        /* Soft Purple */
        animation-duration: 7s;
        animation-delay: -2s;
        border-radius: 60% 40% 30% 70% / 40% 50% 60% 50%;
    }

    .ieltb-blob[data-blob="3"] {
        width: 140px;
        height: 180px;
        background: rgba(59, 130, 246, 0.08);
        /* Soft Blue */
        animation-duration: 9s;
        animation-delay: -4s;
        border-radius: 50% 50% 20% 80% / 20% 70% 30% 80%;
    }

    @keyframes ieltb-ambient-morph {

        0%,
        100% {
            border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
            transform: translate(0, 0) scale(1);
        }

        33% {
            border-radius: 60% 40% 50% 50% / 30% 60% 40% 70%;
            transform: translate(10px, -5px) scale(1.1);
        }

        66% {
            border-radius: 30% 70% 40% 60% / 50% 30% 60% 40%;
            transform: translate(-8px, 8px) scale(0.95);
        }
    }

    .ieltb-hero-card:has(.ieltb-btn-cta:hover) .ieltb-blob {
        opacity: 1;
        /* Subtle lift on hover */
    }

    /* Mic Circle Scale Sync with Flow */
    .ieltb-hero-card:has(.ieltb-btn-cta:hover) .ieltb-mic-circle {
        transform: scale(1.025);
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }


    @keyframes ieltb-sound-wave {

        0%,
        100% {
            transform: scaleY(0.3);
            /* Low amplitude */
            opacity: 0.4;
        }

        50% {
            transform: scaleY(1);
            /* Moderate amplitude */
            opacity: 0.6;
        }
    }

    .ieltb-mic-circle {
        position: relative;
        width: 56px;
        /* 10-15% smaller */
        height: 56px;
        border-radius: 50%;
        background: linear-gradient(135deg, #3b82f6, #4f46e5);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
        opacity: 0.85;
        /* Reduced opacity */
        z-index: 2;
        animation: ieltb-mic-breathe 5.5s ease-in-out infinite;
        /* Subtle breathing */
    }

    .ieltb-mic-circle::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        /* Removed pulse animation to keep calmness */
    }

    @keyframes ieltb-mic-breathe {

        0%,
        100% {
            transform: scale(1);
            /* Baseline */
        }

        50% {
            transform: scale(1.015);
            /* 1-1.5% breathing scale */
        }
    }

    .ieltb-mic-circle svg {
        width: 28px;
        height: 28px;
        color: white;
        position: relative;
        z-index: 1;
    }

    /* --- Lexie Badge --- */
    .ieltb-lexie-badge {
        display: inline-flex;
        align-items: center;
        padding: 6px 12px;
        border-radius: 9999px;
        background: rgba(239, 246, 255, 0.9);
        border: 1px solid #dbeafe;
        color: #1d4ed8;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        margin-bottom: 24px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    /* --- Hero Text --- */
    .ieltb-hero-title {
        font-size: 1.875rem;
        font-weight: 700;
        color: #111827;
        margin: 16px 0 12px 0;
        /* Breath between mic and title, closer to subtitle */
        letter-spacing: -0.025em;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    }

    .ieltb-hero-subtitle {
        font-size: 1.125rem;
        color: #6b7280;
        line-height: 1.6;
        margin: 0 0 48px 0;
        /* More space before CTA */
        max-width: 440px;
        /* Slightly wider for better line rag */
    }

    /* --- CTA Button with Glow Border --- */
    .ieltb-glow-wrapper {
        position: relative;
        z-index: 0;
        border-radius: 8px;
        overflow: hidden;
        display: inline-flex;
        box-shadow: 0 10px 25px rgba(99, 102, 241, 0.05);
    }

    .ieltb-glow-wrapper::before {
        content: '';
        position: absolute;
        z-index: -1;
        inset: -100%;
        width: 300%;
        height: 300%;
        background: conic-gradient(transparent 0%,
                transparent 30%,
                rgba(59, 130, 246, 0.4) 45%,
                rgba(59, 130, 246, 0.8) 50%,
                rgba(59, 130, 246, 0.4) 55%,
                transparent 70%,
                transparent 100%);
        animation: ieltb-rotate-glow 4s linear infinite;
    }

    @keyframes ieltb-rotate-glow {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .ieltb-btn-cta {
        position: relative;
        z-index: 1;
        margin: 1px;
        border-radius: calc(8px - 1px);
        padding: 14px 40px;
        min-width: 240px;
        background: #4f46e5;
        /* Indigo 600 - Matches Practice Buttons */
        color: white;
        font-size: 1rem;
        font-weight: 600;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: background 0.2s ease;
        overflow: hidden;
        text-decoration: none;
    }

    .ieltb-btn-cta:hover {
        background: #4338ca;
        color: white;
        text-decoration: none;
    }

    .ieltb-btn-cta svg {
        width: 20px;
        height: 20px;
        transition: transform 0.3s ease;
    }

    .ieltb-btn-cta:hover svg {
        transform: translateX(4px);
    }

    .ieltb-btn-cta .ieltb-shimmer {
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        animation: ieltb-shimmer 5s linear infinite;
        background: linear-gradient(90deg,
                transparent,
                rgba(255, 255, 255, 0.1),
                transparent);
        pointer-events: none;
    }

    @keyframes ieltb-shimmer {
        0% {
            transform: translateX(-100%);
            opacity: 0;
        }

        10% {
            opacity: 0.5;
        }

        40%,
        100% {
            transform: translateX(100%);
            opacity: 0;
        }
    }

    /* --- Usage Bar V2 --- */
    .ieltb-usage-bar-v2 {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 16px 20px;
        margin-bottom: 24px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    }

    .ieltb-usage-bar-v2:hover {
        border-color: #c7d2fe;
    }

    .ieltb-usage-icon {
        width: 40px;
        height: 40px;
        background: #eef2ff;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6366f1;
        flex-shrink: 0;
    }

    .ieltb-usage-icon svg {
        width: 20px;
        height: 20px;
    }

    .ieltb-usage-text {
        font-size: 1rem;
        font-weight: 500;
        color: #111827;
    }

    .ieltb-usage-text strong {
        font-weight: 700;
    }

    /* --- KPI Cards V2 --- */
    .ieltb-kpi-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        margin-bottom: 32px;
    }

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

    .ieltb-kpi-card {
        background: #fff;
        padding: 24px;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
        display: flex;
        flex-direction: column;
        gap: 4px;
        transition: border-color 0.2s ease;
    }

    .ieltb-kpi-card:hover {
        border-color: #c7d2fe;
    }

    .ieltb-kpi-label {
        font-size: 0.75rem;
        font-weight: 700;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .ieltb-kpi-value {
        font-size: 1.875rem;
        font-weight: 700;
        color: #111827;
        letter-spacing: -0.025em;
    }

    .ieltb-kpi-suffix {
        font-size: 0.875rem;
        font-weight: 500;
        color: #9ca3af;
        margin-left: 4px;
    }

    /* --- Reports Section --- */
    .ieltb-reports-section {
        margin-top: 32px;
    }

    .ieltb-reports-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .ieltb-reports-header h2 {
        font-size: 1.25rem;
        font-weight: 700;
        color: #111827;
        margin: 0;
    }

    /* --- Tabs V2 --- */
    .ieltb-tabs-v2 {
        display: inline-flex;
        background: rgba(243, 244, 246, 0.8);
        padding: 6px;
        border-radius: 12px;
        margin-bottom: 24px;
    }

    .ieltb-tab-btn {
        padding: 10px 20px;
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 600;
        color: #6b7280;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .ieltb-tab-btn:hover {
        color: #374151;
        background: rgba(229, 231, 235, 0.5);
    }

    .ieltb-tab-btn.active {
        background: #fff;
        color: #111827;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.03);
    }

    /* --- Filter Controls --- */
    .ieltb-filter-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 24px;
    }

    .ieltb-filter-left {
        display: flex;
        align-items: center;
    }

    .ieltb-filter-right {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .ieltb-search-wrapper {
        position: relative;
        width: 288px;
    }

    .ieltb-search-wrapper svg {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        color: #9ca3af;
        transition: color 0.2s ease;
    }

    .ieltb-search-wrapper input {
        width: 100%;
        padding: 10px 12px 10px 40px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 0.875rem;
        color: #111827;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .ieltb-search-wrapper input::placeholder {
        color: #9ca3af;
    }

    .ieltb-search-wrapper input:focus {
        outline: none;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .ieltb-search-wrapper:focus-within svg {
        color: #6366f1;
    }

    .ieltb-select-wrapper {
        position: relative;
    }

    .ieltb-select-wrapper select {
        appearance: none;
        padding: 10px 36px 10px 12px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 500;
        color: #374151;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
        transition: border-color 0.2s ease;
    }

    .ieltb-select-wrapper select:hover {
        border-color: #d1d5db;
    }

    .ieltb-select-wrapper select:focus {
        outline: none;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    }

    .ieltb-select-wrapper svg {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        color: #9ca3af;
        pointer-events: none;
    }

    /* --- Table V2 --- */
    .ieltb-table-v2 {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
        overflow: hidden;
    }

    .ieltb-table-header {
        display: none;
        grid-template-columns: 140px 1fr 80px 140px;
        gap: 16px;
        padding: 12px 24px;
        background: rgba(249, 250, 251, 0.8);
        border-bottom: 1px solid #e5e7eb;
        font-size: 0.75rem;
        font-weight: 700;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    @media (min-width: 768px) {
        .ieltb-table-header {
            display: grid;
        }
    }

    .ieltb-table-row {
        display: flex;
        flex-direction: column;
        padding: 20px 24px;
        border-bottom: 1px solid #f3f4f6;
        transition: background 0.2s ease;
    }

    .ieltb-table-row:last-child {
        border-bottom: none;
    }

    .ieltb-table-row:hover {
        background: rgba(249, 250, 251, 0.6);
    }

    @media (min-width: 768px) {
        .ieltb-table-row {
            display: grid;
            grid-template-columns: 140px 1fr 80px 140px;
            gap: 16px;
            align-items: center;
        }
    }

    .ieltb-table-date {
        font-size: 0.875rem;
        font-weight: 500;
        color: #4b5563;
        white-space: nowrap;
    }

    .ieltb-table-transcript {
        font-size: 0.875rem;
        color: #6b7280;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ieltb-table-transcript strong {
        color: #111827;
        font-weight: 600;
        margin-right: 6px;
    }

    .ieltb-table-band {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    @media (min-width: 768px) {
        .ieltb-table-band {
            justify-content: center;
        }
    }

    .ieltb-table-actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 12px;
    }

    @media (min-width: 768px) {
        .ieltb-table-actions {
            margin-top: 0;
        }
    }

    /* --- Score Badge V2 --- */
    .ieltb-score-badge-v2 {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 32px;
        padding: 0 8px;
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 700;
        border: 1px solid;
    }

    .ieltb-score-badge-v2.score-high {
        background: #fff7ed;
        border-color: #fed7aa;
        color: #ea580c;
    }

    .ieltb-score-badge-v2.score-mid {
        background: #fefce8;
        border-color: #fde68a;
        color: #ca8a04;
    }

    .ieltb-score-badge-v2.score-low {
        background: #fef2f2;
        border-color: #fecaca;
        color: #dc2626;
    }

    /* --- Action Buttons V2 --- */
    .ieltb-btn-details {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.875rem;
        font-weight: 600;
        color: #6366f1;
        background: none;
        border: none;
        cursor: pointer;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .ieltb-btn-details:hover {
        color: #4f46e5;
    }

    .ieltb-btn-details svg {
        width: 16px;
        height: 16px;
    }

    .ieltb-btn-pdf {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.875rem;
        font-weight: 600;
        color: #6366f1;
        background: none;
        border: none;
        cursor: pointer;
        text-decoration: none;
        transition: color 0.2s ease;
    }

    .ieltb-btn-pdf:hover {
        color: #4f46e5;
    }

    .ieltb-btn-pdf svg {
        width: 16px;
        height: 16px;
    }

    /* --- Empty State V2 --- */
    .ieltb-empty-state-v2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px 24px;
        background: #fff;
        border: 1px dashed #d1d5db;
        border-radius: 12px;
        text-align: center;
    }

    .ieltb-empty-icon {
        width: 64px;
        height: 64px;
        background: #f9fafb;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
    }

    .ieltb-empty-icon svg {
        width: 32px;
        height: 32px;
        color: #9ca3af;
    }

    .ieltb-empty-title {
        font-size: 1.125rem;
        font-weight: 600;
        color: #111827;
        margin: 0 0 4px 0;
    }

    .ieltb-empty-desc {
        font-size: 0.875rem;
        color: #6b7280;
        margin: 0 0 24px 0;
        max-width: 320px;
    }

    /* --- Tab Content Sections --- */
    .ieltb-tab-content {
        display: none;
    }

    .ieltb-tab-content.active {
        display: block;
    }

    /* --- Animations Fade In --- */
    @keyframes ieltb-fade-in-up {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .ieltb-animate-fade-in {
        animation: ieltb-fade-in-up 0.5s ease-out forwards;
    }

    .ieltb-animate-delay-1 {
        animation-delay: 0.1s;
    }

    .ieltb-animate-delay-2 {
        animation-delay: 0.2s;
    }

    /* --- Accessibility: Reduced Motion --- */
    @media (prefers-reduced-motion: reduce) {

        .ieltb-sound-bar,
        .ieltb-mic-circle::before,
        .ieltb-glow-wrapper::before,
        .ieltb-btn-cta .ieltb-shimmer {
            animation: none !important;
        }

        .ieltb-mic-viz,
        .ieltb-btn-cta svg,
        .ieltb-hero-card {
            transition: none !important;
        }
    }

    /* --- Mobile Header & Dashboard Visibility --- */
    /* Hidden on desktop by default */
    .ieltb-mobile-header,
    .ieltb-mobile-dashboard {
        display: none;
    }

    /* --- Mobile Responsiveness --- */
    @media (max-width: 640px) {

        /* 1. Mobile Header */
        .ieltb-mobile-header {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 48px;
            background: white;
            border-bottom: 1px solid #f3f4f6;
            margin: -24px -24px 24px;
            /* Negative margin to span full width if needed */
        }

        .header-title {
            font-size: 0.95rem;
            font-weight: 600;
            color: #1f2937;
        }

        /* 2. Hero Card Optimization */
        .ieltb-hero-card {
            min-height: auto;
            /* Allow content to define height */
            margin: 0 0 24px 0;
            padding: 32px 20px;
            /* Slightly increased padding for breathability */
            border-radius: 24px;
        }

        .ieltb-hero-content {
            padding: 0;
            justify-content: center;
            /* Center content if height is fluid */
            gap: 16px;
            /* Explicit spacing */
            height: auto;
        }

        .ieltb-mic-viz {
            margin-bottom: 8px;
            flex: 0 0 auto;
            /* Prevent shrinking/growing excessively */
        }

        /* Slower Ambient Motion */
        .ieltb-blob {
            animation-duration: 10s !important;
        }

        .ieltb-hero-title {
            font-size: 1.5rem;
            /* Reduced from 1.75rem */
            margin: 12px 0 6px;
            line-height: 1.3;
        }

        .ieltb-hero-subtitle {
            font-size: 0.9rem;
            /* Reduced from 1rem */
            margin-bottom: 20px;
            padding: 0 16px;
            /* Prevent text hitting edges */
        }

        .ieltb-btn-cta {
            width: 100%;
            padding: 14px;
            /* Slightly more compact */
            font-size: 1rem;
            margin-top: 8px;
        }

        /* 3. Info Bar */
        .ieltb-mobile-dashboard {
            display: block;
        }

        .ieltb-info-bar {
            background: #f9fafb;
            padding: 12px;
            border-radius: 8px;
            color: #4b5563;
            font-size: 0.9rem;
            text-align: center;
            margin-bottom: 24px;
        }

        .ieltb-info-bar strong {
            color: #111827;
        }

        /* 4. Quick Stats (2+1 Grid) */
        .ieltb-quick-stats {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 32px;
        }

        .stat-card {
            background: white;
            padding: 16px;
            border-radius: 12px;
            border: 1px solid #e5e7eb;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .stat-card.full-width {
            grid-column: span 2;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }

        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: #111827;
        }

        .stat-label {
            font-size: 0.8rem;
            color: #6b7280;
            font-weight: 500;
        }

        /* 5. Reports Section */
        .ieltb-reports-section {
            padding-bottom: 40px;
        }

        .section-header {
            font-size: 1.1rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 16px;
        }

        .ieltb-mobile-tabs {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
            border-bottom: 1px solid #e5e7eb;
            padding-bottom: 12px;
        }

        .tab-btn {
            background: none;
            border: none;
            font-size: 0.95rem;
            font-weight: 500;
            color: #6b7280;
            padding: 0;
            cursor: pointer;
        }

        .tab-btn.active {
            color: #4f46e5;
            font-weight: 600;
        }

        .report-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 0;
            border-bottom: 1px solid #f3f4f6;
        }

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

        .report-date {
            font-size: 0.75rem;
            color: #9ca3af;
        }

        .report-summary {
            font-size: 0.9rem;
            font-weight: 500;
            color: #374151;
        }

        .report-action {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .band-chip {
            background: #eef2ff;
            color: #4f46e5;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 700;
        }
    }

    /* --- Login Overlay V2 (matches existing but enhanced) --- */
    .ieltb-login-overlay-v2 {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        z-index: 10;
        text-align: center;
        padding: 40px;
    }

    .ieltb-lock-icon-v2 {
        width: 80px;
        height: 80px;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 24px;
        box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
    }

    .ieltb-lock-icon-v2 svg {
        width: 36px;
        height: 36px;
        color: white;
    }

    /* =================================================================
   REPORT DETAIL PAGE - Modern V2 Styles
   ================================================================= */

    .ieltb-report-detail {
        max-width: 1040px;
        margin: 0 auto;
        padding: 32px 40px;
        font-family: 'Inter', system-ui, sans-serif;
    }

    /* Back Link */
    .ieltb-back-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #6b7280;
        text-decoration: none;
        font-weight: 500;
        font-size: 0.95em;
        padding: 8px 16px;
        border-radius: 8px;
        transition: all 0.2s ease;
        background: rgba(139, 92, 246, 0.05);
        border: 1px solid transparent;
    }

    .ieltb-back-link:hover {
        color: #8b5cf6;
        background: rgba(139, 92, 246, 0.1);
        border-color: rgba(139, 92, 246, 0.2);
    }

    /* Report Header */
    .ieltb-report-header {
        display: flex;
        flex-wrap: nowrap;
        gap: 32px;
        align-items: center;
        justify-content: flex-start;
        margin: 24px 0 32px;
        padding: 32px 40px;
        background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
        border-radius: 20px;
        border: 2px solid #c084fc;
        position: relative;
        overflow: visible;
    }

    .ieltb-report-header::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: 22px;
        background: conic-gradient(from 0deg,
                #8b5cf6, #c084fc, #a855f7, #7c3aed, #c4b5fd, #a78bfa, #8b5cf6);
        animation: ieltb-purple-glow-rotate 4s linear infinite;
        z-index: -1;
        opacity: 0.6;
    }

    @property --glow-angle-detail {
        syntax: '<angle>';
        initial-value: 0deg;
        inherits: false;
    }

    @keyframes ieltb-purple-glow-rotate {
        0% {
            --glow-angle-detail: 0deg;
        }

        100% {
            --glow-angle-detail: 360deg;
        }
    }

    .ieltb-report-header::after {
        content: '';
        position: absolute;
        inset: 2px;
        border-radius: 18px;
        background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
        z-index: -1;
    }

    /* Overall Score Circle */
    .ieltb-overall-score {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 3px solid;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: white;
        box-shadow: 0 2px 12px rgba(139, 92, 246, 0.12);
        flex-shrink: 0;
        position: relative;
        z-index: 1;
        text-align: center;
        margin: 0;
    }

    .ieltb-overall-score .score {
        font-size: 1.75em;
        font-weight: 800;
        line-height: 1;
        text-align: center;
    }

    .ieltb-overall-score .score span {
        display: block;
        font-size: 0.45em;
        font-weight: 500;
        color: #9ca3af;
        margin-top: 1px;
    }

    .ieltb-overall-score .label {
        font-size: 0.5em;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.2px;
        margin-top: 3px;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
    }

    /* Report Meta */
    .ieltb-report-meta {
        flex: 1;
        display: flex;
        flex-direction: row;
        gap: 48px;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        z-index: 1;
        padding-left: 8px;
    }

    .ieltb-report-meta .meta-item {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .ieltb-report-meta .meta-label {
        font-size: 0.75em;
        color: #7c3aed;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
    }

    .ieltb-report-meta .meta-value {
        font-size: 1em;
        font-weight: 600;
        color: #1f2937;
    }

    .ieltb-task-type-badge {
        display: inline-block;
        padding: 6px 14px;
        background: linear-gradient(135deg, #8b5cf6, #a78bfa);
        color: white;
        border-radius: 20px;
        font-size: 0.8em;
        font-weight: 600;
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
    }

    /* Criteria Breakdown */
    .ieltb-criteria-breakdown {
        background: white;
        border-radius: 16px;
        padding: 24px;
        margin-bottom: 24px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .ieltb-criteria-breakdown h4 {
        font-size: 1.2em;
        color: #1f2937;
        margin: 0 0 20px 0;
        font-weight: 700;
    }

    .ieltb-criterion-row {
        margin-bottom: 16px;
    }

    .ieltb-criterion-row:last-child {
        margin-bottom: 0;
    }

    .ieltb-criterion-header {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

    .ieltb-criterion-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .ieltb-criterion-icon svg {
        width: 24px;
        height: 24px;
    }

    .ieltb-criterion-icon.fluency {
        background: #ede9fe;
        color: #7c3aed;
    }

    .ieltb-criterion-icon.lexical {
        background: #dbeafe;
        color: #2563eb;
    }

    .ieltb-criterion-icon.grammar {
        background: #fef3c7;
        color: #d97706;
    }

    .ieltb-criterion-icon.pronunciation {
        background: #e0e7ff;
        color: #4f46e5;
    }

    .ieltb-criterion-info {
        flex: 1;
    }

    .ieltb-criterion-info .title {
        font-weight: 600;
        color: #374151;
        margin-bottom: 8px;
        font-size: 0.95em;
    }

    .ieltb-criterion-progress {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .ieltb-criterion-progress .score {
        font-weight: 700;
        color: #1f2937;
        min-width: 40px;
        font-size: 1.1em;
    }

    .ieltb-progress-bar {
        flex: 1;
        height: 8px;
        background: #f3f4f6;
        border-radius: 4px;
        overflow: hidden;
    }

    .ieltb-progress-bar-inner {
        height: 100%;
        border-radius: 4px;
        transition: width 0.8s ease-out;
    }

    .ieltb-progress-bar-inner.fluency {
        background: linear-gradient(90deg, #7c3aed, #a78bfa);
    }

    .ieltb-progress-bar-inner.lexical {
        background: linear-gradient(90deg, #2563eb, #60a5fa);
    }

    .ieltb-progress-bar-inner.grammar {
        background: linear-gradient(90deg, #d97706, #fbbf24);
    }

    .ieltb-progress-bar-inner.pronunciation {
        background: linear-gradient(90deg, #4f46e5, #818cf8);
    }

    /* Sections */
    .ieltb-section {
        background: white;
        border-radius: 16px;
        padding: 24px;
        margin-bottom: 24px;
        border: 1px solid #e5e7eb;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .ieltb-section h3 {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 1.2em;
        color: #1f2937;
        margin: 0 0 16px 0;
        font-weight: 700;
    }

    .ieltb-section h3 svg {
        color: #8b5cf6;
    }

    /* Transcript Box */
    .ieltb-transcript-box {
        background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
        border-radius: 12px;
        padding: 20px;
        line-height: 1.7;
        color: #374151;
        font-size: 0.95em;
        border-left: 4px solid #8b5cf6;
    }

    .ieltb-transcript-box .speaker-examiner {
        color: #7c3aed;
        font-weight: 600;
    }

    .ieltb-transcript-box .speaker-candidate {
        color: #2563eb;
        font-weight: 600;
    }

    /* Responsive */
    @media (max-width: 600px) {
        .ieltb-report-detail {
            padding: 16px;
        }

        .ieltb-report-header {
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 24px;
        }

        .ieltb-overall-score {
            width: 120px;
            height: 120px;
        }

        .ieltb-overall-score .score {
            font-size: 2em;
        }

        .ieltb-report-meta {
            align-items: center;
        }

        .ieltb-criterion-header {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .ieltb-criterion-progress {
            flex-direction: column;
            align-items: stretch;
        }
    }

    /* =================================================================
    PLAYBACK PANEL - Refined Control Bar
    ================================================================= */
    .playback-panel {
        margin-top: 20px;
        -webkit-animation: playback-fade-in 0.3s ease-out;
        animation: playback-fade-in 0.3s ease-out;
    }

    @-webkit-keyframes playback-fade-in {
        from {
            opacity: 0;
            -webkit-transform: translateY(8px);
            transform: translateY(8px);
        }

        to {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }

    @keyframes playback-fade-in {
        from {
            opacity: 0;
            -webkit-transform: translateY(8px);
            transform: translateY(8px);
        }

        to {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0);
        }
    }

    .playback-row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 16px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 50px;
        padding: 8px 12px;
        -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        -webkit-tap-highlight-color: transparent;
    }

    /* 1. Playback Button (Left) */
    .playback-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        /* Ensure circle shape */
        min-height: 44px;
        /* Ensure circle shape */
        border-radius: 50%;
        background: transparent;
        border: 2px solid #6366f1;
        color: #6366f1;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow: none;
        transition: all 0.2s ease;
        position: relative;
        padding: 0;
        /* Fix oval shape issue */
    }

    .playback-btn:hover {
        transform: scale(1.05);
        background: #eef2ff;
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
    }

    .playback-btn:active {
        transform: scale(0.95);
    }

    /* Pulse animation only when playing */
    .playback-btn.is-playing::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        border: 2px solid rgba(139, 92, 246, 0.6);
        animation: playback-pulse 1.5s infinite;
        z-index: -1;
    }

    @keyframes playback-pulse {
        0% {
            transform: scale(1);
            opacity: 0.8;
        }

        100% {
            transform: scale(1.4);
            opacity: 0;
        }
    }

    .playback-btn svg {
        width: 20px;
        height: 20px;
        color: #6366f1;
        /* Explicit color for currentColor */
        fill: currentColor;
    }

    .playback-btn svg path,
    .playback-btn svg rect {
        fill: currentColor;
        /* Ensure paths inherit color */
    }

    /* 2. Center Section (Timer + Progress) */
    .playback-center {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
    }

    .playback-time {
        font-size: 0.75rem;
        font-weight: 600;
        color: #64748b;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.5px;
    }

    /* 3. Progress Bar */
    .playback-progress-bar {
        width: 100%;
        height: 4px;
        background: #e2e8f0;
        border-radius: 2px;
        position: relative;
        cursor: pointer;
        /* Potential for drag if JS added */
    }

    .playback-progress-fill {
        height: 100%;
        background: #6366f1;
        border-radius: 2px;
        width: 0%;
        transition: width 0.1s linear;
    }

    .playback-progress-dot {
        width: 10px;
        height: 10px;
        background: #fff;
        border: 2px solid #6366f1;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        left: 0%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: left 0.1s linear;
        pointer-events: none;
        /* Let clicks pass through to bar if needed */
    }

    /* 4. Continue Button (Right) - Secondary Style */
    .playback-continue-btn {
        padding: 8px 16px;
        background: #f1f5f9;
        color: #475569;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        white-space: nowrap;
    }

    .playback-continue-btn:hover {
        background: #e2e8f0;
        color: #1e293b;
        border-color: #cbd5e1;
    }

    .playback-continue-btn:active {
        transform: translateY(1px);
    }

    /* Mobile responsive */
    @media (max-width: 480px) {
        .playback-row {
            gap: 10px;
            padding: 8px 10px;
        }

        .playback-btn {
            width: 40px;
            height: 40px;
        }

        .playback-time {
            font-size: 0.7rem;
        }

        .playback-continue-btn {
            padding: 6px 12px;
            font-size: 0.8rem;
        }
    }

    /* =================================================================
       MOBILE OPTIMIZATIONS (V5.9) - FINAL POLISH
       ================================================================= */
    @media (max-width: 640px) {

        /* Fix Setup Steps - Horizontal Compact Row */
        .setup-steps {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            gap: 8px;
            margin-bottom: 20px;
        }

        .step-item {
            width: auto;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            text-align: center;
        }

        .step-icon {
            margin-bottom: 0 !important;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
        }

        .step-icon svg {
            width: 16px;
            height: 16px;
        }

        .step-item span {
            font-size: 0.7rem;
            font-weight: 500;
            line-height: 1.2;
        }

        /* Full Width Checkbox & Buttons */
        .mode-selection-wrapper {
            width: 100% !important;
            max-width: 100% !important;
            box-sizing: border-box;
            padding: 16px !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* Sticky CTA Button at Bottom */
        .setup-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(59, 130, 246, 1) 0%, rgba(59, 130, 246, 0.95) 80%, transparent 100%);
            padding: 16px 20px 24px 20px;
            z-index: 100;
        }

        .setup-footer .mode-selection-wrapper {
            display: none !important;
            /* Hide checkbox on mobile to save space */
        }

        .setup-footer .continue-btn {
            width: 100%;
            justify-content: center;
            padding: 16px !important;
            font-size: 1.1rem;
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
        }

        /* Add padding to setup-card so content isn't hidden behind fixed button */
        .setup-card {
            padding-bottom: 100px !important;
        }

        /* Mic Test Area */
        .mic-test-wrapper {
            padding: 16px;
        }

        .mic-actions button {
            width: 100%;
            justify-content: center;
        }

        /* Report Header Stack */
        .ieltb-report-header {
            flex-direction: column !important;
            text-align: center;
            padding: 24px 20px !important;
            gap: 24px !important;
        }

        .ieltb-overall-score {
            margin: 0 auto;
        }

        .ieltb-report-meta {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px 12px !important;
            padding-left: 0 !important;
            width: 100%;
        }

        .ieltb-report-meta .meta-item {
            flex: 1 1 40%;
            /* Two per row */
            align-items: center;
        }

        /* Practice Screen Text */
        .question-text {
            font-size: 1.25em !important;
            line-height: 1.4;
        }

        /* Ensure table scroll */
        .ieltb-activity-table-wrapper {
            overflow-x: auto;
        }

        /* AI Avatar - Smaller on mobile */
        .ai-avatar {
            width: 70px !important;
            height: 70px !important;
            border-width: 3px !important;
        }

        .avatar-face {
            padding-top: 6px !important;
        }

        .eyebrows {
            gap: 16px !important;
            margin-bottom: 5px !important;
        }

        .eyebrow {
            width: 12px !important;
            height: 2px !important;
        }

        .avatar-eyes {
            gap: 12px !important;
            margin-bottom: 8px !important;
        }

        .eye {
            width: 10px !important;
            height: 10px !important;
        }

        .eye::after {
            width: 3px !important;
            height: 3px !important;
            top: 2px !important;
            right: 2px !important;
        }

        /* Mouth - NO !important so JavaScript can animate it */
        .avatar-mouth {
            width: 14px;
            height: 4px;
        }

        #ai-avatar-container {
            margin-bottom: 15px !important;
            margin-top: 5px !important;
        }
    }