/* --- Root Variables --- */
    :root {
        --r-main-font: 'Inter', sans-serif;
        --r-heading-font: 'Montserrat', sans-serif;
        --r-heading-color: #1e293b;
        /* Matches brand.dark */
        --r-link-color: #4f46e5;
        /* Matches brand.accent */
        --r-selection-background-color: #4f46e5;
    }

    /* --- Base Styles --- */
    body {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    }

    /* --- UI Components: Footer --- */
    .course-footer {
        position: fixed; 
        bottom: 10px;        /* Moved closer to bottom edge */
        left: 20px; 
        z-index: 20;
        
        font-family: 'Montserrat', sans-serif; 
        font-size: 10px;     /* Much smaller (was 13px) */
        font-weight: 600;
        text-transform: uppercase; /* Adds a clean, professional "label" look */
        letter-spacing: 1px;       /* Increases readability at small sizes */
        
        color: #64748b; 
        opacity: 0.5;        /* More transparent so it blends into background */
        pointer-events: auto; /* Ensures the link is still clickable */
    }

    /* Optional: Make it slightly more visible when hovered */
    .course-footer:hover {
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    /* --- UI Components: Lobby Card --- */
    .lobby-card {
        display: block;
        background: white;
        padding: 25px;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        transition: all 0.2s;
        border-left: 5px solid #1e293b;
        text-decoration: none;
        cursor: pointer;
    }

    .lobby-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        border-left-color: #4f46e5;
    }

    /* --- UI Components: Buttons --- */
    .print-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: #1e293b;
        color: white;
        padding: 12px 24px;
        border-radius: 8px;
        text-decoration: none !important;
        font-weight: bold;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.2s;
    }

    .print-btn:hover {
        background: #4f46e5;
        transform: translateY(-2px);
        color: white;
    }

    /* =========================================
    LIVE POLL STYLES
    ========================================= */

    /* 1. Force Visibility 
    The plugin tries to hide this until connected. 
    We force it visible so the slide never looks "broken". */
    .poll {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100%;
    }

    /* 2. Button Styling 
    We apply base styles that look good immediately. */
    .poll button {
        display: block;
        width: 100%;
        text-align: left;
        padding: 16px 24px !important; /* Larger touch target */
        margin-bottom: 12px !important;
        border-radius: 8px !important;
        border: 1px solid #e2e8f0 !important;
        
        /* Default Colors (Unselected) */
        background-color: #f1f5f9 !important; /* Slate 100 */
        color: #334155 !important;           /* Slate 700 */
        
        font-family: 'Inter', sans-serif !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    }

    /* 3. Hover State */
    .poll button:hover {
        background-color: #4f46e5 !important; /* Brand Accent */
        color: white !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(79, 70, 229, 0.2) !important;
        border-color: #4f46e5 !important;
    }

    /* 4. Active/Selected State (If the plugin applies a class) */
    .poll button:active, 
    .poll button:focus {
        transform: scale(0.98);
    }

    /* --- UI Components: QR Code --- */
    #qrcode {
        margin: 20px auto;
        border: 12px solid white;
        border-radius: 16px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        width: fit-content;
    }

    /* --- Media Queries --- */
    @media print {

        .course-footer,
        .customcontrols {
            display: none !important;
        }
    }

    /* =========================================
        MODERN SIDEBAR (REVEAL MENU) OVERRIDES
        ========================================= */

    /* 1. The Container - Deep Slate Background */
    .slide-menu-wrapper .slide-menu-background {
        background-color: #0f172a !important;
        /* Slate 900 */
        box-shadow: 5px 0 30px rgba(0, 0, 0, 0.5);
    }

    /* 2. The Header/Toolbar - Slightly Lighter */
    .slide-menu-wrapper .slide-menu-panel .slide-menu-toolbar {
        background-color: #1e293b !important;
        /* Slate 800 */
        border-bottom: 1px solid #334155 !important;
        /* Slate 700 */
        padding-top: 10px;
    }

    /* 3. The Items - Clean Typography & Spacing */
    .slide-menu-wrapper .slide-menu-panel .slide-menu-items li.slide-menu-item {
        font-family: 'Inter', sans-serif !important;
        font-size: 15px !important;
        padding: 12px 20px !important;
        border-bottom: 1px solid #1e293b !important;
        /* Slate 800 separator */
        color: #cbd5e1 !important;
        /* Slate 300 text */
        transition: all 0.2s ease;
    }

    .slide-menu-wrapper .slide-menu-panel .slide-menu-items li.module-header {
        background-color: #334155 !important;
        /* Slate 700 (Lighter than background) */
        color: #fff !important;
        /* White Text */
        font-weight: 800 !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-size: 12px !important;
        border-left: 4px solid #818cf8 !important;
        /* Indigo Accent */
        cursor: default !important;
    }

    /* 4. Hover Effects - Slide & Glow */
    .slide-menu-wrapper .slide-menu-panel .slide-menu-items li.slide-menu-item:hover {
        background-color: #1e293b !important;
        color: #fff !important;
        padding-left: 28px !important;
        /* Subtle movement */
        border-left: 4px solid #4f46e5 !important;
        /* Indigo accent */
    }

    /* 5. Active/Selected Item */
    .slide-menu-wrapper .slide-menu-panel .slide-menu-items li.slide-menu-item.selected {
        background-color: #1e293b !important;
        color: #818cf8 !important;
        /* Indigo 400 */
        font-weight: 700 !important;
        border-left: 4px solid #4f46e5 !important;
    }

    /* 6. Form Elements (For your Broadcast Login) */
    /* This makes the password box look professional inside the dark menu */
    #seminar-form input {
        background-color: #1e293b !important;
        border: 1px solid #475569 !important;
        color: white !important;
        padding: 8px !important;
        border-radius: 6px !important;
        margin-bottom: 10px !important;
        width: 95% !important;
    }

    #seminar-form label {
        color: #94a3b8 !important;
        /* Slate 400 */
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    #seminar-form button {
        margin-top: 10px !important;
        font-family: 'Montserrat', sans-serif !important;
    }

    .slide-menu-module-header {
        background-color: #334155 !important;
        /* Slate 700 */
        color: #f8fafc !important;
        /* White text */
        font-weight: 800 !important;
        padding: 15px 20px !important;
        border-left: 4px solid #818cf8 !important;
        /* Indigo accent */
        text-transform: uppercase;
        font-size: 12px !important;
        letter-spacing: 1px;
    }

    /* 7. The Log Box */
    #logger {
        background-color: #020617 !important;
        /* Almost black */
        color: #22c55e !important;
        /* Matrix Green */
        border: 1px solid #1e293b !important;
        border-radius: 6px !important;
        font-family: 'Fira Code', monospace !important;
        font-size: 11px !important;
        line-height: 1.5 !important;
    }


/* =========================================
   ACCESSIBILITY: Skip Link
 ========================================= */
.skip-link {
    position: absolute;
    top: -1000px;
    left: -1000px;
    height: 1px;
    width: 1px;
    text-align: left;
    overflow: hidden;
    z-index: 9999;
    background: #4f46e5; /* Brand Accent */
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    transition: top 0.2s ease;
}

/* When focused via keyboard, it slides down */
.skip-link:focus, 
.skip-link:active {
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    overflow: visible;
    outline: 2px solid white;
}