:root { 
        --primary: #0176d3; 
        --secondary: #032d60; 
        --success: #04844b; 
        --warning: #ffb75d; 
        --error: #c23934; 
        --trailhead: #663399; 
        --bg: #f4f6f9; 
        --card-bg: #ffffff;
        --border-color: #e5e5e5;
        --input-bg: #ffffff;
    }
    
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--secondary); margin: 0; padding: 20px; line-height: 1.6; transition: background 0.3s, color 0.3s; }
    
    /* --- LAYOUT & AUTH --- */
    #auth-screen { max-width: 400px; margin: 50px auto; background: var(--card-bg); padding: 30px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); text-align: center; }
    .container { max-width: 950px; margin: 0 auto; background: var(--card-bg); padding: 40px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: none; }
    .app-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; margin-bottom: 20px; }
    .screen { display: none; }
    .active-screen { display: block; }

    /* --- UI ELEMENTS --- */
    .btn {
    /* Layout & Sizing (Kept from your original) */
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    margin: 5px;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    
    /* Default Color (Primary Blue) */
    background: var(--primary); 
    color: white;

    /* NEW: Animation & Feel */
    transition: all 0.2s ease-in-out;
    position: relative;
    z-index: 1;
}
    .btn:hover {
    transform: translateY(-2px);       /* Moves button up slightly */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Adds a soft shadow */
    filter: brightness(110%);          /* Makes the color pop */
}
    .btn-secondary {
    background-color: #e0e0e0; /* Lighter gray */
    color: #333;
}
    .btn-secondary:hover {
    background-color: #d0d0d0; /* Slightly darker on hover */
    color: #000;
    /* Lift effect is inherited from .btn:hover */
}
.btn-purple {
    background: linear-gradient(135deg, #ab47bc 0%, #7b1fa2 100%) !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(123, 31, 162, 0.3);
}
.btn-purple:hover {
    box-shadow: 0 6px 15px rgba(123, 31, 162, 0.5);
}

/* 5. Finish Button (Green) */
.btn-success {
    background: linear-gradient(135deg, #66bb6a 0%, #43a047 100%) !important;
    color: white !important;
}

/* Dark Mode Overrides for Secondary Buttons */
body.dark-mode .btn-secondary {
    background-color: #333;
    color: #ccc;
}
body.dark-mode .btn-secondary:hover {
    background-color: #444;
    color: white;
}
    .btn-trailhead { background: var(--trailhead); color: white; }
    .btn-trailhead:hover { background: #52277c; }
    
    .btn-theme { background: transparent; border: none; font-size: 1.3rem; cursor: pointer; padding: 0 10px; line-height: 1; vertical-align: middle; transition: transform 0.2s; }
    .btn-theme:hover { transform: scale(1.1); }
    
    input, select, textarea { padding: 10px; border: 1px solid #ccc; border-radius: 6px; margin: 5px 0; width: 100%; box-sizing: border-box; font-family: inherit; background: var(--input-bg); color: inherit; }
    textarea { resize: vertical; }
    .auth-input { margin: 10px 0; }

    /* --- HUB & ROLES --- */
    .role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; max-width: 1000px; margin: 40px auto; }
    .role-card { background: var(--card-bg); padding: 25px; border-radius: 12px; text-align: center; cursor: pointer; border: 2px solid transparent; box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: all 0.2s; color: var(--secondary); }
    .role-card:hover { transform: translateY(-5px); border-color: var(--primary); }
    /* --- MODERN ROLE ICONS --- */
.role-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    width: 80px;
    background: rgba(1, 118, 211, 0.05); /* Very subtle blue bg */
    border-radius: 50%;
    margin: 0 auto 15px auto;
    transition: all 0.3s ease;
    color: var(--primary); /* Icon inherits this color */
}

/* Icon Animation on Hover */
.role-card:hover .role-icon {
    background: var(--primary);
    color: white;
    transform: scale(1.1) rotate(-5deg); /* Subtle playful pop */
    box-shadow: 0 10px 20px rgba(1, 118, 211, 0.3);
}

/* Dark Mode Adjustment */
body.dark-mode .role-icon {
    background: rgba(255, 255, 255, 0.05);
    color: var(--primary);
}
body.dark-mode .role-card:hover .role-icon {
    background: var(--primary);
    color: #fff;
}
    
    .cert-list { max-width: 600px; margin: 20px auto; display: none; }
    .cert-item { background: var(--card-bg); padding: 15px; margin-bottom: 10px; border-radius: 8px; cursor: pointer; border-left: 5px solid #ccc; display: flex; justify-content: space-between; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
    .cert-item:hover { border-left-color: var(--primary); background: #f0f8ff; }

    /* --- QUIZ & OPTIONS --- */
    .option-item { display: flex; align-items: center; gap: 15px; background: var(--card-bg); border: 2px solid var(--border-color); padding: 15px 20px; margin-bottom: 12px; border-radius: 10px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; }
    .option-item:hover { border-color: #b3d7ff; background: #f0f8ff; transform: translateY(-2px); }
    .option-item:has(input:checked) { border-color: var(--primary); background: #f0f8ff; box-shadow: 0 4px 12px rgba(1, 118, 211, 0.15); }
    .option-item input { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer; }

    .timer-badge { font-family: monospace; font-size: 1.2rem; background: #fff0f0; color: var(--error); padding: 5px 12px; border-radius: 4px; border: 1px solid #ffcdd2; display: none; margin-right: 15px; }
    
    /* --- RESULTS & STATS --- */
    .stats-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: var(--card-bg); border-radius: 8px; overflow: hidden; }
    .stats-table th, .stats-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border-color); }
    .score-pill { padding: 4px 8px; border-radius: 12px; font-weight: bold; font-size: 0.85rem; }
    .score-high { background: #d4edda; color: #155724; }
    .score-med { background: #fff3cd; color: #856404; }
    .score-low { background: #f8d7da; color: #721c24; }

    /* --- REVIEW CARDS (QUIZ REVIEW) --- */
    .review-card { background: var(--card-bg); border: 1px solid var(--border-color); padding: 20px; margin-bottom: 15px; border-radius: 8px; position: relative; }
    .review-card.correct { border-left: 5px solid var(--success); background: #f0fff4; }
    .review-card.incorrect { border-left: 5px solid var(--error); background: #fff5f5; }
    .explanation-box { margin-top: 15px; padding: 15px; background: #fff; border: 1px solid #eee; border-radius: 6px; font-size: 0.95rem; color: #444; border-left: 3px solid var(--primary); }
    .source-link { display: inline-block; margin-top: 8px; font-size: 0.9rem; color: var(--primary); text-decoration: none; background: #f0f8ff; padding: 4px 10px; border-radius: 20px; font-weight: 500; }
    .category-tag { font-size: 0.75rem; text-transform: uppercase; color: #555; background: #eee; padding: 2px 6px; border-radius: 4px; font-weight: bold; display: inline-block; margin-bottom: 5px; }

    /* --- NEW TRAILHEAD LEARNING PATH (Fixed) --- */
    /* This overrides the inline styles of the container if possible, or styles the cards within */
    #trailhead-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 20px; }
    
    .trail-card { 
        display: flex; 
        flex-direction: column; /* Stack vertically for card look */
        justify-content: space-between;
        background: var(--card-bg); 
        border: 1px solid var(--border-color); 
        padding: 20px; 
        border-radius: 10px; 
        border-top: 4px solid var(--trailhead); /* Top accent instead of left */
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        transition: transform 0.2s, box-shadow 0.2s;
        height: 100%; /* Uniform height */
        box-sizing: border-box;
    }
    
    .trail-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        border-color: var(--trailhead);
    }

    .trail-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .trail-icon { font-size: 1.5rem; background: rgba(102, 51, 153, 0.1); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
    
    .trail-info h4 { margin: 0; color: var(--trailhead); font-size: 1.05rem; line-height: 1.3; }
    .trail-info p { font-size: 0.9rem; color: var(--secondary); opacity: 0.8; margin: 10px 0 15px 0; flex-grow: 1; }
    
    .trail-link { 
        display: inline-block; 
        width: 100%;
        text-align: center;
        padding: 8px 0; 
        border: 1px solid var(--trailhead);
        color: var(--trailhead); 
        text-decoration: none; 
        font-weight: 600; 
        border-radius: 6px;
        transition: all 0.2s;
        font-size: 0.9rem;
    }
    .trail-link:hover { background: var(--trailhead); color: white; }

    /* --- ADMIN CONSOLE --- */
    .admin-grid { display: grid; gap: 20px; margin-top: 20px; }
    .admin-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 25px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
    
    .ai-header { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; color: var(--primary); }
    .ai-controls { display: grid; grid-template-columns: 1fr 1fr 100px auto; gap: 15px; align-items: center; }
    #ai-loading { display: none; margin-top: 15px; font-weight: 500; color: var(--primary); }
    .pulse { animation: pulse 1.5s infinite; }
    @keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }

    .tab-group { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid var(--border-color); padding-bottom: 10px; }
    .tab-btn { background: transparent; border: none; font-size: 1rem; padding: 8px 15px; cursor: pointer; color: #888; font-weight: 600; border-radius: 6px; transition: 0.2s; }
    .tab-btn:hover { color: var(--primary); background: rgba(0,0,0,0.03); }
    .tab-btn.active { color: var(--primary); background: rgba(1, 118, 211, 0.1); }
    
    .danger-zone { border: 1px solid #fab1b1; background: #fff5f5; }
    .danger-zone h4 { color: #c23934; margin: 0 0 5px 0; }

    /* Admin Options Inputs */
    .adm-option-row { display: flex; align-items: center; gap: 12px; background: #f9f9f9; padding: 12px 15px; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 10px; transition: all 0.2s; }
    .adm-option-row:focus-within { background: #fff; border-color: var(--primary); box-shadow: 0 2px 8px rgba(1, 118, 211, 0.15); transform: translateX(5px); }
    .adm-correct-chk { width: 20px; height: 20px; accent-color: var(--success); cursor: pointer; margin: 0; }
    .adm-opt-text { background: transparent !important; border: none !important; font-size: 1rem; width: 100%; outline: none; padding: 0; margin: 0; color: inherit; }

    /* --- AI REVIEW CARD (MODERN) --- */
    .ai-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 15px; overflow: hidden; transition: all 0.2s; position: relative; }
    .ai-card.rejected { opacity: 0.6; border-color: transparent; background: rgba(0,0,0,0.03); }
    .ai-card-header { padding: 12px 20px; background: rgba(0,0,0,0.02); border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
    .ai-card-body { padding: 20px; }
    .ai-answer-box { margin-top: 15px; padding: 12px; background: rgba(1, 118, 211, 0.05); border-radius: 6px; border-left: 3px solid var(--primary); font-size: 0.9rem; }
    .ai-card-footer { padding: 10px 20px; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; background: var(--card-bg); }
    .ai-actions { display: flex; gap: 10px; }
    .btn-status { padding: 6px 15px; border-radius: 20px; border: 1px solid var(--border-color); background: transparent; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: #888; transition: all 0.2s; }
    .btn-status:hover { background: rgba(0,0,0,0.05); }
    .btn-status.keep { color: var(--success); border-color: var(--success); }
    .btn-status.keep.active { background: var(--success); color: white; }
    .btn-status.skip { color: var(--error); border-color: var(--error); }
    .btn-status.skip.active { background: var(--error); color: white; }

    /* --- MODALS --- */
    .modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); }
    .modal-content { background: var(--card-bg); margin: 5% auto; padding: 25px; width: 85%; max-width: 800px; border-radius: 12px; max-height: 80vh; overflow-y: auto; color: var(--secondary); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
    .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
    .q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)); gap: 10px; margin-top: 20px; }
    .q-cell { width: 45px; height: 45px; border-radius: 50%; background: #eee; display: flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 500; color: #333; }
    .q-cell.answered { background: var(--primary); color: white; }
    .q-cell.current { border-color: var(--secondary); transform: scale(1.1); border: 2px solid var(--secondary); }

    /* =========================================
       DARK MODE (PROFESSIONAL UI/UX)
       ========================================= */
    body.dark-mode {
        --bg: #121212;
        --card-bg: #1e1e1e;
        --secondary: #e4e6eb; 
        --primary: #64b5f6;      
        --success: #66bb6a;      
        --error: #ef5350;        
        --warning: #ffa726;      
        --trailhead: #b39ddb;    
        --border-color: rgba(255, 255, 255, 0.12);
        --input-bg: #2d2d2d;
    }
    
    body.dark-mode .container, body.dark-mode #auth-screen { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); }
    body.dark-mode input:focus, body.dark-mode textarea:focus { border-color: var(--primary); background-color: #383838; outline: none; }
    
    body.dark-mode .option-item { background: #262626; border-color: var(--border-color); color: #ccc; }
    body.dark-mode .option-item:hover { background: #333; border-color: var(--primary); color: #fff; }
    body.dark-mode .option-item:has(input:checked) { background: rgba(100, 181, 246, 0.15); border-color: var(--primary); color: #fff; }
    
    body.dark-mode .adm-option-row { background: #262626; border-color: var(--border-color); }
    body.dark-mode .adm-option-row:focus-within { background: #2d2d2d; border-color: var(--primary); }
    
    body.dark-mode .review-card.correct { background: rgba(102, 187, 106, 0.1); border-left-color: var(--success); }
    body.dark-mode .review-card.incorrect { background: rgba(239, 83, 80, 0.1); border-left-color: var(--error); }
    body.dark-mode .review-card.rejected { background: #252525; opacity: 0.7; }
    body.dark-mode .explanation-box { background: #252525; border-color: var(--border-color); color: #ccc; }
    body.dark-mode .source-link { background: rgba(100, 181, 246, 0.15); color: var(--primary); }
    body.dark-mode .category-tag { background: #333; color: #aaa; }
    
    body.dark-mode .ai-card-header { background: rgba(255,255,255,0.02); }
    body.dark-mode .ai-card.rejected { background: rgba(255,255,255,0.03); }
    body.dark-mode .ai-answer-box { background: rgba(100, 181, 246, 0.1); }
    
    body.dark-mode .trail-card { border-top-color: var(--trailhead); box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
    body.dark-mode .trail-icon { background: rgba(179, 157, 219, 0.15); color: var(--trailhead); }
    body.dark-mode .trail-link { color: var(--trailhead); border-color: var(--trailhead); }
    body.dark-mode .trail-link:hover { background: var(--trailhead); color: #fff; }

    body.dark-mode .btn-secondary { background: #444; color: #e0e0e0; }
    body.dark-mode .btn-secondary:hover { background: #555; }
    body.dark-mode .btn-theme { color: #ffd700; }
    body.dark-mode .cert-item:hover { background: #2a2a2a; border-left-color: var(--primary); }
    body.dark-mode .danger-zone { background: rgba(194, 57, 52, 0.15); border-color: #c23934; }
    body.dark-mode .q-cell { background: #333; color: #ccc; }
    body.dark-mode .q-cell.answered { background: var(--primary); color: #121212; }
    
    @media (max-width: 700px) { .ai-controls { grid-template-columns: 1fr; } }
	/* --- DASHBOARD STYLES --- */
        .dash-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-bottom: 25px; }
        .dash-card { background: var(--card-bg); padding: 20px; border-radius: 12px; border: 1px solid var(--border-color); text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        .dash-val { font-size: 2.5rem; font-weight: 800; color: var(--primary); line-height: 1.2; }
        .dash-lbl { font-size: 0.85rem; color: var(--secondary); opacity: 0.7; text-transform: uppercase; font-weight: 600; }
        
        .dashboard-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
        
        .todo-container, .history-container { max-height: 300px; overflow-y: auto; }
        
        .todo-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; }
        .todo-item:last-child { border-bottom: none; }
        .todo-del { color: var(--error); cursor: pointer; font-weight: bold; padding: 0 5px; }
        
        .hist-item { padding: 10px; border-bottom: 1px solid var(--border-color); }
        .hist-header { display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: bold; margin-bottom: 4px; }
        .hist-detail { font-size: 0.8rem; color: #888; display: flex; justify-content: space-between; }
        
        /* Dark Mode Adjustments */
        body.dark-mode .dash-lbl { color: #ccc; }
        body.dark-mode .todo-del:hover { background: rgba(194, 57, 52, 0.2); border-radius: 4px; }
        
        @media (max-width: 800px) {
            .dashboard-layout { grid-template-columns: 1fr; }
        }
		/* --- MODERN DASHBOARD FILTERS --- */
        .dash-filter-bar {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
            background: var(--card-bg);
            padding: 10px 20px;
            border-radius: 50px; /* Pill shape */
            border: 1px solid var(--border-color);
            box-shadow: 0 2px 10px rgba(0,0,0,0.03);
        }

        .filter-group {
            position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .filter-select {
            padding: 8px 15px;
            border-radius: 20px;
            border: 1px solid var(--border-color);
            background: var(--bg);
            color: var(--secondary);
            font-size: 0.9rem;
            cursor: pointer;
            outline: none;
        }

        .filter-btn {
            background: var(--bg);
            border: 1px solid var(--border-color);
            color: var(--secondary);
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center; /* Centers the text */
            gap: 8px; /* Better spacing between text and arrow */
            min-width: 140px; /* Ensures it doesn't look squished */
            transition: all 0.2s;
        }
        .filter-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(0,0,0,0.02); }
        .filter-btn.active { background: var(--primary); color: white; border-color: var(--primary); }

        /* New Danger Button (Replaces the link) */
        .btn-danger {
            background: rgba(194, 57, 52, 0.1); /* Subtle red tint */
            border: 1px solid var(--error);
            color: var(--error);
            width: 100%;
            padding: 10px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .btn-danger:hover {
            background: var(--error);
            color: white;
            box-shadow: 0 4px 12px rgba(194, 57, 52, 0.3);
        }

        /* Popover Menu for Exams */
        .filter-popover {
            display: none;
            position: absolute;
            top: 110%; /* Below the button */
            left: 0;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            width: 280px;
            z-index: 1000;
            padding: 15px;
        }
        .filter-popover.show { display: block; animation: fadeIn 0.2s; }
       .popover-item {
            display: flex;
            align-items: center;
            justify-content: flex-start !important; /* Double force left align */
            gap: 12px;
            padding: 8px 10px;
            cursor: pointer;
            border-radius: 6px;
            width: 100%;
            box-sizing: border-box;
            font-size: 0.9rem;
            color: var(--secondary);
            transition: background 0.1s;
        }
        .popover-item:hover {
            background: rgba(0,0,0,0.04);
        }
        
        /* Ensure input doesn't have weird margins */
        .popover-item input {
            margin: 0; 
            cursor: pointer;
        }
        .chk-grid {
            display: flex;             /* Changed from grid to flex */
            flex-direction: column;    /* Stack vertically */
            gap: 5px;                  /* Tighter gap */
            max-height: 250px;
            overflow-y: auto;
            text-align: left !important; /* FORCE Left Alignment override */
        }

        .filter-tag {
            font-size: 0.75rem;
            background: var(--primary);
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            margin-left: 5px;
        }

        /* --- DARK MODE FIXES --- */
        body.dark-mode .dash-filter-bar { background: var(--card-bg); border-color: var(--border-color); }
        body.dark-mode .filter-popover { background: #252525; border-color: #444; }
        
        /* Danger Zone - Subtle Footer Style */
        .danger-footer {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid var(--border-color);
            text-align: center;
        }
        .btn-danger-text {
            background: none;
            border: none;
            color: var(--error);
            font-size: 0.85rem;
            cursor: pointer;
            opacity: 0.7;
            text-decoration: underline;
        }
        .btn-danger-text:hover { opacity: 1; }
		/* --- FILTER MODAL STYLES --- */
        .filter-modal-body {
            max-height: 60vh;
            overflow-y: auto;
            padding: 10px;
        }

        .filter-role-group {
            margin-bottom: 20px;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
        }

        .filter-role-header {
            background: rgba(0,0,0,0.03);
            padding: 10px 15px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-color);
            cursor: pointer;
        }
        .filter-role-header:hover { background: rgba(0,0,0,0.05); }

        .filter-role-content {
            padding: 10px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive Grid */
            gap: 10px;
            background: var(--card-bg);
        }

        /* The Checkbox Item (Reusing your popover style but tweaking for grid) */
        .filter-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            border-radius: 6px;
            cursor: pointer;
            border: 1px solid transparent;
            transition: all 0.2s;
        }
        .filter-item:hover {
            background: rgba(1, 118, 211, 0.05);
            border-color: rgba(1, 118, 211, 0.2);
        }
        .filter-item input { margin: 0; accent-color: var(--primary); width: 16px; height: 16px; }
        
        /* Dark Mode Adjustments */
        body.dark-mode .filter-role-header { background: rgba(255,255,255,0.05); }
        body.dark-mode .filter-item:hover { background: rgba(255,255,255,0.05); border-color: var(--primary); }
		/* --- CAREER PATHFINDER UI --- */
        .cert-select-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.1s;
            margin-bottom: 2px;
        }
        .cert-select-item:hover { background: rgba(0,0,0,0.05); }
        .cert-select-item.active { background: #e0f2f1; }
        
        .career-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 20px;
            transition: transform 0.2s;
            display: flex;
            flex-direction: column;
        }
        .career-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
        
        .career-card.recommended {
            border: 1px solid #b39ddb;
            background: #fdfbff;
        }

        .role-badge { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: bold; color: #666; background: #eee; padding: 2px 6px; border-radius: 4px; }
        .rec-badge { font-size: 0.7rem; font-weight: bold; color: var(--trailhead); background: rgba(102, 51, 153, 0.1); padding: 2px 8px; border-radius: 10px; }

        .progress-bar-bg { width: 100%; height: 6px; background: #eee; border-radius: 3px; overflow: hidden; }
        .progress-bar-fill { height: 100%; background: var(--success); transition: width 0.5s; }

        .missing-certs-list { background: rgba(0,0,0,0.02); border-radius: 6px; padding: 10px; flex-grow: 1; }
        .missing-certs-list strong { display: block; font-size: 0.8rem; margin-bottom: 5px; color: var(--secondary); }
        
        .missing-cert-item {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            padding: 6px;
            border-bottom: 1px solid #e5e5e5;
            cursor: pointer;
            color: var(--primary);
        }
        .missing-cert-item:last-child { border-bottom: none; }
        .missing-cert-item:hover { background: white; border-radius: 4px; padding-left: 10px; }

        /* Dark Mode */
        body.dark-mode .cert-select-item.active { background: #1b5e20; }
        body.dark-mode .career-card.recommended { background: #2a2a2a; border-color: var(--trailhead); }
        body.dark-mode .missing-cert-item:hover { background: #333; }
		/* Career Alignment Message */
        .radar-msg {
            margin-bottom: 20px; 
            padding: 12px; 
            background: rgba(1, 118, 211, 0.05); /* Soft primary tint */
            border-left: 4px solid var(--primary); 
            border-radius: 6px; 
            font-size: 0.95rem;
            color: var(--secondary);
        }

        /* Unavailable Cert Tooltip Item */
        .missing-cert-item.unavailable {
            cursor: not-allowed;
            border-bottom: 1px dashed #e5e5e5;
        }
        .missing-cert-item.unavailable:hover {
            background: transparent; /* Disable hover effect */
            padding-left: 6px;
        }

        /* Dark Mode Overrides */
        body.dark-mode .radar-msg { background: rgba(100, 181, 246, 0.1); color: #e4e6eb; }
        body.dark-mode .missing-cert-item.unavailable { border-bottom: 1px dashed #444; }
		/* --- AI LEARNING ASSISTANT BOX --- */
    .ai-help-box {
        background: rgba(1, 118, 211, 0.04); /* Very soft tint of primary blue */
        border: 1px solid rgba(1, 118, 211, 0.2);
        padding: 25px;
        border-radius: 12px;
        margin-bottom: 30px;
        text-align: center;
        box-shadow: inset 0 0 20px rgba(1, 118, 211, 0.02);
    }
    .ai-help-box h4 {
        color: var(--primary);
        margin: 0 0 5px 0;
        font-size: 1.15rem;
    }
    .ai-subtitle {
        font-size: 0.9rem;
        color: var(--secondary);
        opacity: 0.7;
        margin-bottom: 15px;
    }

    /* Modern Gradient AI Button */
    .btn-ai {
        background: linear-gradient(135deg, var(--primary) 0%, #4a90e2 100%);
        color: white;
        border: none;
        padding: 10px 24px;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.2s ease;
        box-shadow: 0 4px 12px rgba(1, 118, 211, 0.2);
    }
    .btn-ai:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(1, 118, 211, 0.3);
    }
    .btn-ai:disabled {
        background: #ccc;
        box-shadow: none;
        transform: none;
        cursor: not-allowed;
    }

    /* Success Message Badge */
    .ai-success-msg {
        background: rgba(4, 132, 75, 0.1);
        color: var(--success);
        padding: 15px;
        border-radius: 8px;
        border: 1px solid rgba(4, 132, 75, 0.2);
        display: inline-block;
        font-size: 0.95rem;
    }

    /* --- DARK MODE OVERRIDES FOR AI BOX --- */
    body.dark-mode .ai-help-box {
        background: rgba(100, 181, 246, 0.05);
        border-color: rgba(100, 181, 246, 0.15);
    }
    body.dark-mode .ai-help-box h4 { color: #64b5f6; }
    body.dark-mode .ai-success-msg {
        background: rgba(102, 187, 106, 0.1);
        border-color: rgba(102, 187, 106, 0.2);
        color: #81c784;
    }
	/* --- SETUP GRID (Strict 2x2 Layout) --- */
.setup-grid {
    display: grid;
    /* FORCE exactly 2 columns. Do not use auto-fit. */
    grid-template-columns: repeat(2, 1fr); 
    gap: 25px;
    width: 100%;
    margin-top: 20px;
}

/* Mobile Breakpoint: Stack them 1 column */
@media (max-width: 768px) {
    .setup-grid {
        grid-template-columns: 1fr;
    }
}

/* --- CARD BASE STYLES --- */
.setup-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

.setup-card h3 { margin-top: 10px; margin-bottom: 5px; font-size: 1.2rem; }
.setup-icon { font-size: 2.5rem; margin-bottom: 10px; }

/* General Hover Movement */
.setup-card:hover { transform: translateY(-5px); }

/* --- 1. STANDARD SIMULATION (Blue Glow) --- */
.setup-card:first-child:hover {
    border-color: #42a5f5;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1), 0 0 12px rgba(66, 165, 245, 0.6);
}
.btn-simulation {
    background: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%);
    color: white; border: none; font-weight: bold;
    padding: 12px; border-radius: 8px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
    transition: all 0.3s ease;
    font-family: inherit; /* Fixes font issue */
}
.btn-simulation:hover {
    background: linear-gradient(135deg, #64b5f6 0%, #1565c0 100%);
    transform: scale(1.02);
}

/* --- 2. REMEDIATION MODE (Amber Glow) --- */
.remedy-card:hover {
    border-color: #ffab1a;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1), 0 0 12px rgba(255, 171, 26, 0.6);
}
.btn-mistakes {
    background: linear-gradient(135deg, #ffca28 0%, #ff6f00 100%);
    color: white; border: none; font-weight: bold;
    padding: 12px; border-radius: 8px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 111, 0, 0.3);
    transition: all 0.3s ease;
    font-family: inherit;
}
.btn-mistakes:hover {
    background: linear-gradient(135deg, #ffc107 0%, #e65100 100%);
    transform: scale(1.02);
}
.btn-mistakes:disabled {
    background: #e0e0e0; cursor: not-allowed; box-shadow: none; transform: none; color: #999;
}

/* --- 3. ARCADE MODE (Red/Orange Glow) --- */
.arcade-card:hover {
    border-color: #f9691d;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1), 0 0 12px rgba(249, 105, 29, 0.6);
}
.btn-arcade {
    background: linear-gradient(135deg, #ff9800 0%, #f44336 100%);
    color: white; border: none; font-weight: bold;
    padding: 12px; border-radius: 8px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
    transition: all 0.3s ease;
    font-family: inherit;
}
.btn-arcade:hover {
    background: linear-gradient(135deg, #f57c00 0%, #d32f2f 100%);
    transform: scale(1.02);
}

/* --- 4. FOCUS MODE (Purple Glow - NEW) --- */
.focus-card:hover {
    border-color: #ab47bc;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1), 0 0 12px rgba(171, 71, 188, 0.6);
}
.btn-focus {
    background: linear-gradient(135deg, #ab47bc 0%, #7b1fa2 100%);
    color: white; border: none; font-weight: bold;
    padding: 12px; border-radius: 8px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(123, 31, 162, 0.3);
    transition: all 0.3s ease;
    font-family: inherit;
}
.btn-focus:hover {
    background: linear-gradient(135deg, #ba68c8 0%, #6a1b9a 100%);
    transform: scale(1.02);
}

/* Dark Mode Fixes */
body.dark-mode .setup-card { background: #1e1e1e; border-color: #333; }
body.dark-mode .btn-mistakes:disabled { background: #333; color: #555; }

    /* --- DASHBOARD TABS --- */
    .dash-tabs { display: flex; gap: 15px; margin-bottom: 25px; border-bottom: 2px solid var(--border-color); padding-bottom: 10px; }
    
    /* --- ARCADE STATS CARDS --- */
    .arcade-stat-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 20px; text-align: center; border-top: 4px solid var(--warning); transition: transform 0.2s; }
    .arcade-stat-card:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
    
    /* Dark Mode Overrides */
    body.dark-mode .setup-card { background: #1e1e1e; border-color: #333; }
    body.dark-mode .arcade-stat-card { background: #1e1e1e; border-color: #333; border-top-color: var(--warning); }
    body.dark-mode #arcade-hud { background: #111; border: 1px solid #333; }
    
    @media (max-width: 700px) { .setup-grid { grid-template-columns: 1fr; } }
	/* --- DASHBOARD CAREER LAYOUT --- */
        .dash-career-layout {
            display: flex;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            min-height: 600px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.02);
        }
        .career-sidebar {
            width: 320px;
            border-right: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
            background: var(--bg);
            flex-shrink: 0;
        }
        .career-main {
            flex-grow: 1;
            padding: 25px;
            overflow-y: auto;
            background: var(--card-bg);
            max-height: 800px;
        }

        /* Mobile Adjustments for Career Builder */
        @media (max-width: 850px) {
            .dash-career-layout { flex-direction: column; }
            .career-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border-color); height: 300px; }
            .career-main { max-height: none; }
        }
		/* --- ARCADE DASHBOARD LAYOUT --- */
        .arcade-dash-layout {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 25px;
            align-items: start;
        }

        /* Toggle Switch UI */
        .switch { position: relative; display: inline-block; width: 50px; height: 26px; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
        .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
        input:checked + .slider { background-color: var(--primary); }
        input:checked + .slider:before { transform: translateX(24px); }

        /* Leaderboard UI */
        .arcade-leaderboard-col {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 20px;
            min-height: 500px;
        }
        
        .leaderboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        .lb-mode-tabs { display: flex; gap: 10px; margin-bottom: 15px; background: var(--bg); padding: 5px; border-radius: 8px; width: fit-content; }
        .lb-tab { background: transparent; border: none; padding: 8px 15px; cursor: pointer; border-radius: 6px; font-weight: 600; color: #888; transition: 0.2s; }
        .lb-tab.active { background: var(--card-bg); color: var(--secondary); box-shadow: 0 2px 5px rgba(0,0,0,0.05); }

        .lb-row {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            border-bottom: 1px solid var(--border-color);
            transition: 0.2s;
        }
        .lb-row:last-child { border-bottom: none; }
        .lb-row:hover { background: rgba(0,0,0,0.02); }
        .lb-row.is-me { background: rgba(1, 118, 211, 0.05); border-left: 3px solid var(--primary); }

        .lb-rank { width: 40px; font-weight: bold; font-size: 1.1rem; color: #888; text-align: center; }
        .lb-user { flex-grow: 1; padding-left: 15px; display: flex; flex-direction: column; }
        .lb-score { font-weight: 800; font-size: 1.2rem; color: var(--secondary); width: 80px; text-align: right; }

        /* Medals */
        .rank-1 { color: #FFD700 !important; font-size: 1.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .rank-2 { color: #C0C0C0 !important; font-size: 1.4rem; }
        .rank-3 { color: #CD7F32 !important; font-size: 1.3rem; }

        /* Responsive */
        @media (max-width: 900px) {
            .arcade-dash-layout { grid-template-columns: 1fr; }
            .leaderboard-header { flex-direction: column; align-items: flex-start; gap: 15px; }
        }

        /* Dark Mode */
        body.dark-mode .lb-row:hover { background: rgba(255,255,255,0.05); }
        body.dark-mode .lb-row.is-me { background: rgba(100, 181, 246, 0.1); }
		/* --- MODERN BACK BUTTON --- */
.btn-back-arrow {
    background: transparent;
    border: none;
    color: var(--secondary);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.btn-back-arrow:hover {
    background: rgba(0, 0, 0, 0.05);
    opacity: 1;
    transform: translateX(-3px); /* Subtle nudge animation */
}

/* Dark mode adjustment */
body.dark-mode .btn-back-arrow:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary);
}
/* =========================================
   LANDING PAGE STYLES (New)
   ========================================= */
/* Remove the old #auth-screen constraint if you replace the ID */
#landing-screen {
    width: 100%;
    max-width: 100%; /* Override old 400px limit */
    margin: 0;
    padding: 0;
    background: var(--bg);
    text-align: left; /* Reset center alignment */
    box-shadow: none;
}

/* Navbar */
.landing-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Hero Section */
.hero-section {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 60px;
    max-width: 1200px;
    margin: 40px auto 80px auto;
    padding: 0 40px;
    align-items: center;
}

.hero-text h1 {
    font-size: 3.5rem;
    /* 1. Increase line-height slightly (was 1.1) to give vertical breathing room */
    line-height: 1.15; 
    
    /* 2. Add padding to the bottom to expand the gradient's clipping box */
    padding-bottom: 0.2em; 
    
    /* 3. Adjust margin to account for the new padding */
    margin-bottom: 10px; 
    
    background: -webkit-linear-gradient(45deg, #0176d3, #0b5cab);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-text p {
    font-size: 1.1rem;
    color: var(--secondary);
    opacity: 0.8;
    margin-bottom: 30px;
    max-width: 500px;
}

.hero-stats {
    display: flex;
    gap: 30px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}
.stat-item strong { font-size: 1.5rem; display: block; color: var(--primary); }
.stat-item span { font-size: 0.85rem; color: #888; text-transform: uppercase; letter-spacing: 1px; }

/* The Auth Box (Floating on the right) */
.auth-card {
    background: var(--card-bg);
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border: 1px solid var(--border-color);
    text-align: center;
}

/* Feature Grid */
.features-section {
    background: var(--card-bg);
    padding: 80px 40px;
    border-top: 1px solid var(--border-color);
}
.features-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}
.feature-box {
    padding: 30px;
    border-radius: 12px;
    background: var(--bg);
    transition: transform 0.2s;
    border: 1px solid var(--border-color);
}
.feature-box:hover { transform: translateY(-5px); border-color: var(--primary); }
.feature-icon { font-size: 2.5rem; margin-bottom: 15px; display: block; }
.feature-box h3 { margin: 0 0 10px 0; color: var(--primary); }
.feature-box p { font-size: 0.95rem; color: var(--secondary); opacity: 0.8; line-height: 1.6; }

/* Dark Mode Adjustments */
body.dark-mode .features-section { background: #181818; }
body.dark-mode .feature-box { background: #222; }
body.dark-mode .hero-text h1 {
    background: -webkit-linear-gradient(45deg, #64b5f6, #42a5f5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .hero-section { grid-template-columns: 1fr; text-align: center; }
    .hero-text h1 { font-size: 2.5rem; }
    .hero-text p, .hero-stats { margin-left: auto; margin-right: auto; justify-content: center; }
    .auth-card { max-width: 400px; margin: 0 auto; }
}
/* --- JOB SEARCH BUTTONS --- */
.btn-job {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 0;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-job:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn-job.linkedin {
    background: #0077b5;
    color: white;
}
.btn-job.linkedin span {
    font-weight: 800;
    background: white;
    color: #0077b5;
    padding: 0 3px;
    border-radius: 2px;
    font-size: 0.8rem;
    line-height: 1.2;
}

.btn-job.indeed {
    background: #ffffff;
    border: 1px solid #d4d2d0;
    color: #2d2d2d;
}
.btn-job.indeed:hover {
    background: #f4f4f4;
}
/* =========================================
   TOPIC MASTERY & FLASHCARDS
   ========================================= */

/* The Modal Layout */
.mastery-layout { display: flex; flex-direction: column; height: 70vh; }
.mastery-header { display: flex; justify-content: center; margin-bottom: 20px; }

/* The Toggle Switch (Sheet vs Cards) */
.mastery-toggle {
    display: flex;
    background: var(--bg);
    padding: 4px;
    border-radius: 25px;
    border: 1px solid var(--border-color);
}
.toggle-btn {
    padding: 8px 24px;
    border-radius: 20px;
    border: none;
    background: transparent;
    font-weight: 600;
    color: var(--secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.toggle-btn.active {
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 8px rgba(1, 118, 211, 0.3);
}

/* CONTENT CONTAINER */
.mastery-content { flex-grow: 1; overflow-y: auto; padding: 10px; position: relative; }

/* VIEW 1: STUDY SHEET */
.study-sheet-section { margin-bottom: 25px; }
.study-sheet-section h4 { 
    color: var(--primary); 
    border-bottom: 2px solid rgba(1, 118, 211, 0.1); 
    padding-bottom: 8px; 
    margin-bottom: 15px; 
}
.study-point { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 12px; 
    font-size: 0.95rem; 
    line-height: 1.6; 
}
.bullet { color: var(--success); font-weight: bold; }

/* VIEW 2: FLASHCARDS (3D FLIP) */
.flashcard-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding-bottom: 20px;
}

.flashcard {
    background-color: transparent;
    width: 100%;
    height: 220px;
    perspective: 1000px; /* Essential for 3D effect */
    cursor: pointer;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-radius: 12px;
}

/* The Flip Trigger */
.flashcard.flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front, .flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
}

.flashcard-front {
    color: var(--secondary);
    font-weight: 600;
    font-size: 1.1rem;
    border-bottom: 4px solid var(--primary);
}

.flashcard-back {
    background: #f8fcfd; /* Slightly different bg for back */
    color: #444;
    transform: rotateY(180deg);
    font-size: 0.95rem;
    overflow-y: auto;
    border-bottom: 4px solid var(--success);
}

/* Dark Mode Overrides */
body.dark-mode .flashcard-back { background: #2a2a2a; color: #ccc; }
body.dark-mode .toggle-btn { color: #aaa; }
body.dark-mode .toggle-btn.active { color: white; }
/* --- VERIFICATION BADGES --- */

/* Small badge for Study Sheet headers */
.verify-badge {
    font-size: 0.75rem;
    text-decoration: none;
    background: rgba(4, 132, 75, 0.1);
    color: var(--success);
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid rgba(4, 132, 75, 0.2);
    font-weight: 600;
    transition: all 0.2s;
}
.verify-badge:hover {
    background: var(--success);
    color: white;
}

/* Link at the bottom of Flashcards */
.verify-link {
    font-size: 0.8rem;
    color: var(--primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.verify-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Dark Mode Adjustments */
body.dark-mode .verify-badge {
    background: rgba(102, 187, 106, 0.15);
    color: #81c784;
    border-color: rgba(102, 187, 106, 0.3);
}
body.dark-mode .verify-link {
    color: #64b5f6;
}
/* --- LANDING PAGE CHALLENGE --- */
.challenge-section {
    background: linear-gradient(180deg, var(--bg) 0%, #fff 100%);
    padding: 40px 20px;
    text-align: center;
}

.challenge-container {
    max-width: 700px;
    margin: 0 auto;
}

.challenge-badge {
    background: #ffecd1;
    color: #d35400;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: inline-block;
}

.landing-q-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
}

.landing-q-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

.lq-options-grid {
    display: grid;
    gap: 10px;
}

.lq-option {
    padding: 12px 15px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.95rem;
}

.lq-option:hover {
    border-color: var(--primary);
    background: rgba(1, 118, 211, 0.05);
}

/* Result Overlay */
.lq-result {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    animation: fadeIn 0.3s ease-in-out;
}

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

/* Dark Mode Support */
body.dark-mode .challenge-section { background: linear-gradient(180deg, var(--bg) 0%, #1a1a1a 100%); }
body.dark-mode .challenge-badge { background: #3e2723; color: #ffab91; }
/* --- HUB SEARCH BAR --- */
.hub-search-container {
    margin-bottom: 40px;
    padding: 0 20px;
    position: relative;
    z-index: 50; /* Ensure dropdown floats above role cards */
}

.hub-search-input {
    width: 100%;
    padding: 15px 15px 15px 50px; /* Space for the icon */
    font-size: 1.1rem;
    border: 2px solid var(--border-color);
    border-radius: 50px; /* Modern "Pill" shape */
    background: var(--card-bg);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.hub-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(1, 118, 211, 0.15); /* Glow effect */
    outline: none;
    transform: translateY(-1px);
}

.search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    opacity: 0.4;
    pointer-events: none;
}

/* SEARCH RESULTS DROPDOWN */
.hub-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    margin-top: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    max-height: 320px;
    overflow-y: auto;
    display: none; /* Hidden by default */
    animation: fadeIn 0.1s ease-out;
}

.hub-result-item {
    padding: 15px 20px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.1s;
}

.hub-result-item:last-child { border-bottom: none; }
.hub-result-item:hover { background: rgba(1, 118, 211, 0.05); }

/* Highlight the matching text */
.hub-result-match { 
    color: var(--primary); 
    font-weight: 800; 
    background: rgba(1, 118, 211, 0.1);
    border-radius: 2px;
}

/* Role Tag in Result */
.hub-result-tag {
    font-size: 0.7rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid var(--border-color);
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--bg);
}

/* Dark Mode Overrides */
body.dark-mode .hub-search-input { background: #1e1e1e; border-color: #333; color: white; }
body.dark-mode .hub-search-input:focus { border-color: var(--primary); }
body.dark-mode .hub-search-results { background: #1e1e1e; border-color: #333; }
body.dark-mode .hub-result-tag { background: #333; border-color: #444; color: #aaa; }
/* --- APP HEADER BRANDING --- */
.logo-container:hover {
    opacity: 1 !important;
}

/* Hide brand name on mobile to save space for the exam title */
@media (max-width: 600px) {
    .app-brand-text {
        display: none;
    }
}
CSS
/* --- APP HEADER NAVIGATION --- */

/* The clickable container */
.nav-back-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: opacity 0.2s;
    
    /* NEW: Prevents the "I-beam" text cursor from appearing */
    user-select: none; 
    -webkit-user-select: none; /* Safari/Chrome */
    -moz-user-select: none;    /* Firefox */
}
.nav-back-btn:hover {
    opacity: 0.8;
}
.nav-back-btn:hover .nav-back-text {
    color: var(--primary); /* Highlight text on hover */
    transform: translateX(-3px); /* Subtle slide left */
}

/* The "Back to Hub" Text */
.nav-back-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--secondary);
    opacity: 0.7;
    transition: all 0.2s ease;
}

/* The Exam Title (Context) */
.context-title {
    font-size: 1.2rem; /* Larger than before */
    font-weight: 700;
    /* Use the brand gradient for the active exam name to make it look "premium" */
    background: -webkit-linear-gradient(45deg, #0176d3, #0b5cab);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Fallback for simple color */
    color: var(--primary);
}

/* Dark Mode Adjustments */
body.dark-mode .nav-back-text {
    color: #e4e6eb;
    opacity: 0.6;
}
body.dark-mode .nav-back-btn:hover .nav-back-text {
    color: var(--primary);
    opacity: 1;
}

/* Mobile: Hide "Back to Hub" text on very small screens to save space */
@media (max-width: 500px) {
    .nav-back-text {
        display: none;
    }
}
/* Force pointer on the text specifically */
.nav-back-text {
    cursor: pointer; 
}
/* --- SKELETON LOADER ANIMATION --- */
.skeleton {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
    display: inline-block;
    color: transparent !important; /* Hide any text inside while loading */
    user-select: none;
    vertical-align: middle;
    cursor: default;
}

/* Specific size for text replacement */
.skeleton-text {
    height: 1em;
    width: 60px; /* Approximate width of "133" */
    margin: 0 5px;
}

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

/* Dark Mode Support for Skeleton */
body.dark-mode .skeleton {
    background: linear-gradient(90deg, #2d2d2d 25%, #3d3d3d 50%, #2d2d2d 75%);
}
/* --- MODERN INPUT STEPPER --- */
.stepper-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--bg);
    padding: 8px;
    border-radius: 12px;
    margin-top: 10px;
    border: 1px solid var(--border-color);
}

.stepper-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.stepper-btn:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(1, 118, 211, 0.2);
}
.stepper-btn:active { transform: scale(0.95); }

/* The actual input in the middle */
.stepper-input {
    width: 60px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    border: none;
    background: transparent;
    color: var(--secondary);
    margin: 0;
    padding: 0;
}
/* Hide the browser's default spin buttons */
.stepper-input::-webkit-inner-spin-button, 
.stepper-input::-webkit-outer-spin-button { 
    -webkit-appearance: none; margin: 0; 
}

/* --- QUICK SELECT CHIPS --- */
.chip-grid {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}
.chip-btn {
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
}
.chip-btn:hover { background: rgba(0,0,0,0.05); color: var(--secondary); }
.chip-btn.active {
    background: rgba(1, 118, 211, 0.1);
    color: var(--primary);
    border-color: var(--primary);
    font-weight: 600;
}

/* Dark Mode Adjustments */
body.dark-mode .stepper-control { background: rgba(255,255,255,0.03); }
body.dark-mode .stepper-btn { background: #2d2d2d; border-color: #444; }
body.dark-mode .stepper-btn:hover { background: var(--primary); }
/* --- HEADER NAVIGATION ITEMS --- */
.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--secondary);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s;
    opacity: 0.8;
}
.nav-item:hover {
    background: rgba(0,0,0,0.05);
    opacity: 1;
    color: var(--primary);
}
.nav-item svg { transition: stroke 0.2s; }

/* The Logout Button (Text only) */
.btn-logout {
    background: transparent;
    border: none;
    color: var(--error);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 5px 10px;
    opacity: 0.8;
    transition: all 0.2s;
}
.btn-logout:hover {
    opacity: 1;
    background: rgba(194, 57, 52, 0.1);
    border-radius: 6px;
}

/* Dark Mode Adjustments */
body.dark-mode .nav-item:hover { background: rgba(255,255,255,0.1); }
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

.shake {
    animation: shake 0.4s ease-in-out;
    border-color: var(--error) !important;
    background-color: rgba(194, 57, 52, 0.05); /* Subtle red tint */
}
/* --- INLINE VALIDATION STYLES --- */
.inline-error {
    color: var(--error);
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    animation: fadeIn 0.3s ease;
}

/* Optional: Add a tiny warning icon before the text automatically */
.inline-error::before {
    content: "⚠️"; 
    font-size: 0.8rem;
}

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

/* When input has an error, give it a red border */
.input-error {
    border-color: var(--error) !important;
    background-color: rgba(194, 57, 52, 0.05);
}
/* NEW CSS FOR THE LOGO
           1. Sets a standard size.
           2. Adds a smooth transition for the glow effect.
           3. Applies a blue drop-shadow on hover.
        */
        .logo-img {
            height: 42px;
            width: auto;
            transition: filter 0.3s ease;
        }

        .logo-img:hover {
            /* A nice blue glow using drop-shadow filter */
            filter: drop-shadow(0 0 8px rgba(1, 118, 211, 0.8));
        }
		/* --- DANGER ZONE STYLES --- */
.btn-danger-ghost {
    background: transparent;
    color: var(--error);
    border: 1px solid transparent;
    padding: 8px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.btn-danger-ghost:hover {
    background: rgba(194, 57, 52, 0.1); 
    border-color: var(--error);
}

.settings-footer {
    margin-top: 30px; 
    padding-top: 15px; 
    border-top: 1px solid var(--border-color); 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

@media (max-width: 600px) {
    .settings-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}
/* --- INTERACTIVE TEXT LINKS (Legal & Navigation) --- */
.nav-link {
    color: var(--secondary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    display: inline-block; /* Required for 'transform' to work on links */
}

/* The Hover State: Glow and Movement */
.nav-link:hover {
    color: var(--primary);
    transform: translateY(-2px);
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Adjust opacity if you want more glow */
}

/* Specific styling for the 'Back to Hub' arrow alignment */
.nav-link-back {
    font-weight: 600; 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
    margin-bottom: 25px; 
    font-size: 0.95rem;
}
/* --- Auth Interactive Links (Forgot Password, Create Account) --- */
.auth-toggle-link {
    color: var(--primary); /* Use primary color so they pop */
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-block; /* Required for transform to work */
    cursor: pointer;
}

/* The same "glow and move" effect as privacy policy links */
.auth-toggle-link:hover {
    transform: translateY(-2px);
    /* Assuming your primary color is blue-ish, adjust rgba if needed */
    filter: drop-shadow(0 0 6px rgba(1, 118, 211, 0.6)); 
}
/* ==========================================
   CUSTOM TOAST NOTIFICATIONS
   ========================================== */
.toast-msg {
    min-width: 250px;
    max-width: 350px;
    background: var(--card-bg); /* Now respects your theme */
    color: var(--secondary);    /* Uses your standard text color */
    padding: 16px 20px;
    border-radius: 12px;        /* Matches your container radius */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Matches your auth-screen shadow */
    font-size: 0.95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: auto;
    border-left: 5px solid var(--primary);
}

.toast-msg.show {
    transform: translateX(0);
    opacity: 1;
}

/* Toast Variants using your exact variables */
.toast-msg.success { border-left-color: var(--success); }
.toast-msg.error { border-left-color: var(--error); }
.toast-msg.info { border-left-color: var(--primary); }

.toast-icon {
    font-size: 1.2rem;
}
/* =========================================
   MOBILE RESPONSIVENESS FIXES (< 768px)
   ========================================= */
@media (max-width: 768px) {
    /* 1. Reclaim Screen Real Estate (Shrink Paddings) */
    body { padding: 10px; }
    .container { padding: 15px; border-radius: 8px; }
    .admin-card, .dash-card { padding: 15px; }

    /* 2. Fix Top App Headers */
    .app-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    .app-header > div:last-child {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    /* 3. Wrap Dashboard Tabs into a 2x2 Grid */
    .dash-tabs {
        flex-wrap: wrap;
        gap: 8px;
        border-bottom: none; /* Looks cleaner on mobile when stacked */
    }
    .dash-tabs .tab-btn {
        flex: 1 1 calc(50% - 8px); 
        margin: 0;
        font-size: 0.8rem;
        padding: 8px 4px;
        border: 1px solid var(--border-color);
    }
    .dash-tabs .tab-btn.active { border-color: var(--primary); }

    /* 4. Un-pill the Filter Bar and Stack it */
    .dash-filter-bar {
        flex-direction: column;
        align-items: stretch;
        border-radius: 12px;
        gap: 12px;
    }
    .filter-group {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .filter-select, .filter-btn { width: 100%; }

    /* 5. Fix Stats Grid Squishing (Force 2 Columns) */
    .dash-stats-grid {
        grid-template-columns: 1fr 1fr; 
        gap: 10px;
    }
    .dash-val { font-size: 1.8rem; } /* Scale down massive numbers */
    
    /* 6. Modals & Popovers */
    .modal-content {
        width: 95%;
        margin: 10% auto;
        padding: 15px;
    }
    .filter-popover {
        width: 100%; 
        left: 0;
        right: 0;
    }

    /* 7. Knowledge Base Layout Fix */
    #dash-knowledge-view .admin-card > div:nth-child(2) {
        flex-direction: column;
        align-items: stretch !important;
    }
    .mastery-toggle { width: 100%; display: flex; }
    .mastery-toggle .toggle-btn { flex: 1; }
}
/* Add this to the bottom of style.css */
.admin-container {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.admin-card {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

/* Ensure flex containers wrap properly on mobile */
@media (max-width: 600px) {
    .ai-card-footer {
        flex-direction: column;
    }
    .ai-card-footer button {
        width: 100%;
    }
}

/* --- REPORT BUTTON STYLING --- */

.btn-report {
    background: transparent;
    color: #888; /* Subtle gray by default */
    border: 1px solid transparent; /* invisible border to prevent jumping */
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

/* The Reaction */
.btn-report:hover {
    background-color: #fff0f0; /* Light red background */
    color: var(--error);       /* Red text */
    border-color: #ffcccc;     /* Light red border */
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 2. Admin: Dismiss & Delete Buttons Hover */
/* We target the buttons inside the flag card specifically */
#flagged-list .btn:hover, 
#flagged-list .btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    filter: brightness(1.1); /* Slightly brighter on hover */
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 3. Specific override for the Delete button to turn redder */
#flagged-list .btn-secondary:hover {
    background-color: var(--error) !important;
    color: white !important;
}
/* --- FOCUS DRILL MODAL OVERRIDES --- */

/* 1. Modal Layout & Animation */
#drill-modal {
    display: none;
    align-items: center; /* Centers vertically */
    justify-content: center; /* Centers horizontally */
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    z-index: 2000; /* Ensure it sits on top of everything */
}

#drill-modal .modal-content {
    margin: 0; 
    max-width: 400px;
    width: 90%;
    border-radius: 16px;
    animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: var(--card-bg);
    color: var(--secondary);
    padding: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

/* 2. The Dropdown */
#drill-category-select {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg);
    color: var(--secondary);
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    cursor: pointer;
    margin-bottom: 5px;
}

#drill-category-select:focus {
    border-color: #9c27b0;
    box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.1);
}

/* 3. Button Layout */
#drill-modal .modal-actions {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

/* Shared Button Styles */
#drill-modal button {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

/* 4. Cancel Button (Gray) */
#drill-modal .btn-secondary {
    background: #e0e0e0;
    color: #333;
}
#drill-modal .btn-secondary:hover {
    background: #d0d0d0;
    transform: translateY(-2px);
}

/* 5. Start Button (Purple Gradient) */
#drill-modal .btn-focus {
    background: linear-gradient(135deg, #ab47bc 0%, #7b1fa2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(123, 31, 162, 0.3);
}
#drill-modal .btn-focus:hover {
    background: linear-gradient(135deg, #ba68c8 0%, #6a1b9a 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(123, 31, 162, 0.4);
}

/* Animations */
@keyframes slideUp {
    from { transform: translateY(30px) scale(0.95); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Dark Mode Overrides */
body.dark-mode #drill-category-select {
    background: #2d2d2d;
    border-color: #444;
}
body.dark-mode #drill-modal .btn-secondary {
    background: #333;
    color: #ccc;
}
body.dark-mode #drill-modal .btn-secondary:hover {
    background: #444;
    color: white;
}
/* --- DRILL TOGGLE STYLES (Fixed) --- */

/* 1. The Container */
#drill-modal .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

/* 2. Hide the default checkbox (but keep it clickable) */
#drill-modal .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* 3. The Track (Default Grey) */
#drill-modal .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

/* 4. The Knob (White Circle) */
#drill-modal .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

/* 5. ACTIVE STATE: Background turns Purple */
#drill-modal input:checked + .slider {
    background-color: #9c27b0 !important; /* !important ensures it overrides grey */
}

/* 6. ACTIVE STATE: Knob moves right */
#drill-modal input:checked + .slider:before {
    transform: translateX(16px);
}
/* --- SUPPORT BETA BUTTON --- */
.btn-support-beta {
    font-size: 0.85rem;
    padding: 6px 14px;
    background: rgba(1, 118, 211, 0.1);
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-support-beta:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(1, 118, 211, 0.25);
}

/* Dark Mode Adjustment */
body.dark-mode .btn-support-beta {
    background: rgba(100, 181, 246, 0.1);
    color: var(--primary);
    border-color: var(--primary);
}

body.dark-mode .btn-support-beta:hover {
    background: var(--primary);
    color: #121212;
    box-shadow: 0 4px 12px rgba(100, 181, 246, 0.3);
}
/* --- PAUSE & BOOKMARK BUTTONS --- */
.btn-pause {
    background: rgba(1, 118, 211, 0.1);
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-pause:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(1, 118, 211, 0.3);
}

.btn-bookmark {
    background: transparent;
    border: 1px solid #f59e0b;
    color: #f59e0b;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-bookmark:hover {
    background: rgba(245, 158, 11, 0.1);
    transform: scale(1.05);
}

.btn-bookmark.active {
    background: rgba(245, 158, 11, 0.15);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.2);
}
/* --- SHARE CARD COMPONENT --- */
.share-card-container {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.share-card-preview {
    display: flex;
    gap: 15px;
    background: rgba(1, 118, 211, 0.05);
    padding: 15px;
    border-radius: 8px;
    border: 1px dashed rgba(1, 118, 211, 0.3);
    margin-bottom: 15px;
}

.share-card-preview img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: var(--bg);
    padding: 4px;
    border: 1px solid var(--border-color);
}

.share-card-text {
    font-size: 0.9rem;
    color: var(--secondary);
    line-height: 1.5;
    font-style: italic;
}

.share-actions {
    display: flex;
    gap: 10px;
}

.btn-linkedin {
    background: #0a66c2;
    color: white;
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: none;
    font-weight: bold;
}

.btn-linkedin:hover {
    background: #004182;
    transform: scale(1.02);
}

.btn-copy {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--primary);
    flex-grow: 1;
}

.btn-copy:hover {
    background: rgba(1, 118, 211, 0.1);
}