/* ============================================
   PREPSHARP DARK MODE - Complete Redesign
   Modern, sleek dark theme for all dashboard pages
   ============================================ */

/* CSS Variables for Dark Mode */
.dark-mode {
    --bg-primary: #0d0d0d;
    --bg-secondary: #141414;
    --bg-card: #1a1a1a;
    --bg-card-hover: #222222;
    --bg-input: #252525;
    --bg-sidebar: linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 50%, #16213e 100%);
    
    --text-primary: #f0f0f0;
    --text-secondary: #a0a0a0;
    --text-muted: #666666;
    
    --border-color: #2a2a2a;
    --border-light: #333333;
    --border-focus: #6366f1;
    
    --primary-color: #6366f1;
    --primary-light: rgba(99, 102, 241, 0.15);
    --primary-dark: #4f46e5;
    --secondary-color: #8b5cf6;
    --success-color: #10b981;
    --success-light: rgba(16, 185, 129, 0.15);
    --warning-color: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.15);
    --danger-color: #ef4444;
    --danger-light: rgba(239, 68, 68, 0.15);
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.2);
}

/* ============================================
   BASE STYLES
   ============================================ */
.dark-mode,
.dark-mode body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.dark-mode .dashboard-container {
    background-color: var(--bg-primary) !important;
}


/* ============================================
   TYPOGRAPHY
   ============================================ */
.dark-mode h1, .dark-mode h2, .dark-mode h3, 
.dark-mode h4, .dark-mode h5, .dark-mode h6 {
    color: var(--text-primary) !important;
}

.dark-mode p, .dark-mode span, .dark-mode label {
    color: inherit;
}

.dark-mode .text-light,
.dark-mode .text-muted,
.dark-mode .notification-description,
.dark-mode .detail-label,
.dark-mode .task-meta,
.dark-mode .feature-description {
    color: var(--text-secondary) !important;
}

/* ============================================
   SIDEBAR STYLES
   ============================================ */
.dark-mode .sidebar {
    background: var(--bg-sidebar) !important;
    border-right: 1px solid var(--border-color) !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .sidebar-header h2 {
    color: #ffffff !important;
}

.dark-mode .sidebar-nav a {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.3s ease !important;
}

.dark-mode .sidebar-nav a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .sidebar-nav li.active a {
    color: #ffffff !important;
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.3) 0%, rgba(99, 102, 241, 0.1) 100%) !important;
    border-left: 3px solid var(--primary-color) !important;
}

.dark-mode .sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.dark-mode .plan-badge {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
}

.dark-mode .upgrade-link {
    color: #a5b4fc !important;
}


/* ============================================
   TOP NAVIGATION
   ============================================ */
.dark-mode .top-nav {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .user-name {
    color: var(--text-primary) !important;
}

.dark-mode .notification-bell {
    color: var(--text-secondary) !important;
}

.dark-mode .notification-bell:hover {
    color: var(--primary-color) !important;
}

.dark-mode .user-dropdown {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-lg) !important;
}

.dark-mode .dropdown-item {
    color: var(--text-primary) !important;
}

.dark-mode .dropdown-item:hover {
    background-color: var(--bg-card-hover) !important;
    color: var(--primary-color) !important;
}

.dark-mode .dropdown-divider {
    border-color: var(--border-color) !important;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
.dark-mode .main-content {
    background-color: var(--bg-primary) !important;
}

.dark-mode .dashboard-content {
    background-color: var(--bg-primary) !important;
}

.dark-mode .welcome-section {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

.dark-mode .welcome-section h1 {
    background: linear-gradient(to right, #818cf8, #a78bfa) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.dark-mode .welcome-section p {
    color: var(--text-secondary) !important;
}


/* ============================================
   CARDS & CONTAINERS
   ============================================ */
.dark-mode .card,
.dark-mode .analytics-card,
.dark-mode .stat-card,
.dark-mode .settings-content,
.dark-mode .settings-sidebar,
.dark-mode .subscription-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-md) !important;
}

.dark-mode .card:hover,
.dark-mode .analytics-card:hover,
.dark-mode .stat-card:hover {
    background-color: var(--bg-card-hover) !important;
    border-color: var(--border-light) !important;
    box-shadow: var(--shadow-lg), var(--shadow-glow) !important;
}

.dark-mode .analytics-card::before {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
}

/* Stat Cards with colored icons */
.dark-mode .stat-card::before {
    opacity: 0.1 !important;
}

.dark-mode .stat-icon.blue {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(99, 102, 241, 0.15) 100%) !important;
    color: #818cf8 !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.25) !important;
}

.dark-mode .stat-icon.green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(16, 185, 129, 0.15) 100%) !important;
    color: #34d399 !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25) !important;
}

.dark-mode .stat-icon.orange {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.15) 100%) !important;
    color: #fbbf24 !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.25) !important;
}

.dark-mode .stat-icon.purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25) 0%, rgba(139, 92, 246, 0.15) 100%) !important;
    color: #a78bfa !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.25) !important;
}

.dark-mode .stat-info h3 {
    color: var(--text-primary) !important;
}

.dark-mode .stat-info p {
    color: var(--text-secondary) !important;
}

.dark-mode .stat-trend.up {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

.dark-mode .stat-trend.down {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}


/* ============================================
   FORMS & INPUTS
   ============================================ */
.dark-mode .form-input,
.dark-mode .form-select,
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="tel"],
.dark-mode input[type="number"],
.dark-mode textarea,
.dark-mode select {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    transition: all 0.3s ease !important;
}

.dark-mode .form-input:focus,
.dark-mode .form-select:focus,
.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
    outline: none !important;
}

.dark-mode .form-input::placeholder,
.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--text-muted) !important;
}

.dark-mode .form-label {
    color: var(--text-primary) !important;
}

.dark-mode .form-checkbox label {
    color: var(--text-primary) !important;
}

/* Toggle Switch */
.dark-mode .toggle-slider {
    background-color: #3a3a3a !important;
}

.dark-mode input:checked + .toggle-slider {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.dark-mode .btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important;
}

.dark-mode .btn-primary:hover {
    box-shadow: 0 6px 25px rgba(99, 102, 241, 0.4) !important;
    transform: translateY(-2px) !important;
}

.dark-mode .btn-secondary {
    background-color: transparent !important;
    border: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
}

.dark-mode .btn-secondary:hover {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
    background-color: rgba(99, 102, 241, 0.1) !important;
}

.dark-mode .view-btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, #818cf8 100%) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

.dark-mode .view-btn:hover {
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4) !important;
}


/* ============================================
   TABLES
   ============================================ */
.dark-mode .exam-table,
.dark-mode table {
    background-color: var(--bg-card) !important;
}

.dark-mode .exam-table th,
.dark-mode table th {
    background-color: rgba(99, 102, 241, 0.1) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode .exam-table td,
.dark-mode table td {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode .exam-table tr:hover td,
.dark-mode table tr:hover td {
    background-color: rgba(99, 102, 241, 0.05) !important;
}

/* Score Badges */
.dark-mode .score-badge.high {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%) !important;
    color: #34d399 !important;
}

.dark-mode .score-badge.medium {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%) !important;
    color: #fbbf24 !important;
}

.dark-mode .score-badge.low {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%) !important;
    color: #f87171 !important;
}

/* ============================================
   CHARTS & ANALYTICS
   ============================================ */
.dark-mode .chart-title {
    color: var(--text-primary) !important;
}

.dark-mode .chart-title::before {
    background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color)) !important;
}

.dark-mode .chart-action {
    background-color: rgba(99, 102, 241, 0.1) !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    color: var(--text-secondary) !important;
}

.dark-mode .chart-action:hover {
    background-color: rgba(99, 102, 241, 0.2) !important;
    color: #818cf8 !important;
}

.dark-mode .chart-action.active {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
}

/* Progress Bars */
.dark-mode .progress-bar {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .subject-name {
    color: var(--text-primary) !important;
}

.dark-mode .subject-score-value {
    color: var(--text-primary) !important;
}


/* ============================================
   SETTINGS PAGE SPECIFIC
   ============================================ */
.dark-mode .settings-nav-link {
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode .settings-nav-link:hover {
    background-color: rgba(99, 102, 241, 0.1) !important;
    color: var(--text-primary) !important;
}

.dark-mode .settings-nav-link.active {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
    border-left: 3px solid var(--primary-color) !important;
}

.dark-mode .settings-title,
.dark-mode .settings-subtitle {
    color: var(--text-primary) !important;
}

.dark-mode .subscription-card {
    background-color: rgba(99, 102, 241, 0.08) !important;
    border-left: 3px solid var(--primary-color) !important;
}

.dark-mode .subscription-title {
    color: var(--text-primary) !important;
}

.dark-mode .subscription-badge {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
}

.dark-mode .detail-value {
    color: var(--text-primary) !important;
}

.dark-mode .subscription-price {
    color: #818cf8 !important;
}

/* Avatar Section */
.dark-mode .avatar-preview {
    border-color: var(--primary-color) !important;
    background-color: var(--bg-input) !important;
}

.dark-mode .avatar-initials {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: #ffffff !important;
}

/* Notification Options */
.dark-mode .notification-option {
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode .notification-title {
    color: var(--text-primary) !important;
}

/* ============================================
   MODALS & OVERLAYS
   ============================================ */
.dark-mode .modal,
.dark-mode .topic-filter-modal,
.dark-mode [class*="modal"] {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-lg) !important;
}

.dark-mode .modal-overlay,
.dark-mode .locked-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

.dark-mode .locked-icon {
    color: var(--text-muted) !important;
}

.dark-mode .locked-overlay:hover .locked-icon {
    color: var(--primary-color) !important;
}

/* Crop Modal */
.dark-mode #cropModal > div {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.dark-mode #cropContainer {
    border-color: var(--border-color) !important;
}

.dark-mode #cropCircle {
    border-color: var(--primary-color) !important;
}


/* ============================================
   SUBSCRIPTION PLANS (Settings Page)
   ============================================ */
.dark-mode [style*="background: white"],
.dark-mode div[style*="background-color: white"] {
    background-color: var(--bg-card) !important;
}

.dark-mode .settings-section div[style*="display: grid"] > div {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .settings-section div[style*="display: grid"] > div:hover {
    box-shadow: 0 15px 35px rgba(99, 102, 241, 0.2) !important;
}

/* ============================================
   PRACTICE PAPERS PAGE
   ============================================ */
.dark-mode .paper-card,
.dark-mode .exam-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .paper-card:hover,
.dark-mode .exam-card:hover {
    border-color: var(--primary-color) !important;
    box-shadow: var(--shadow-lg), 0 0 20px rgba(99, 102, 241, 0.15) !important;
}

.dark-mode .paper-title,
.dark-mode .exam-title {
    color: var(--text-primary) !important;
}

.dark-mode .paper-meta,
.dark-mode .exam-meta {
    color: var(--text-secondary) !important;
}

/* ============================================
   QUESTION BANK PAGE
   ============================================ */
.dark-mode .question-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .question-card:hover {
    border-color: var(--primary-color) !important;
}

.dark-mode .question-text {
    color: var(--text-primary) !important;
}

.dark-mode .question-meta {
    color: var(--text-secondary) !important;
}

.dark-mode .difficulty-badge {
    background-color: rgba(99, 102, 241, 0.15) !important;
}

.dark-mode .difficulty-badge.easy {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

.dark-mode .difficulty-badge.medium {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
}

.dark-mode .difficulty-badge.hard {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

/* ============================================
   STUDY PLAN PAGE
   ============================================ */
.dark-mode .task-card,
.dark-mode .plan-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .task-title,
.dark-mode .plan-title {
    color: var(--text-primary) !important;
}

.dark-mode .task-description,
.dark-mode .plan-description {
    color: var(--text-secondary) !important;
}

.dark-mode .calendar-day {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .calendar-day:hover {
    background-color: rgba(99, 102, 241, 0.15) !important;
}

.dark-mode .calendar-day.active {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}


/* ============================================
   AI COACH PAGE
   ============================================ */
.dark-mode .chat-container {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .chat-message {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
}

.dark-mode .chat-message.user {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: #ffffff !important;
}

.dark-mode .chat-input {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .chat-input:focus {
    border-color: var(--primary-color) !important;
}

/* ============================================
   PEER COMPARISON PAGE
   ============================================ */
.dark-mode .leaderboard-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .leaderboard-item {
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode .leaderboard-item:hover {
    background-color: rgba(99, 102, 241, 0.08) !important;
}

.dark-mode .rank-badge {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
}

.dark-mode .user-rank-name {
    color: var(--text-primary) !important;
}

.dark-mode .user-rank-score {
    color: var(--text-secondary) !important;
}

/* ============================================
   DASHBOARD HOME PAGE
   ============================================ */
.dark-mode .quick-action-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .quick-action-card:hover {
    border-color: var(--primary-color) !important;
    box-shadow: var(--shadow-lg), var(--shadow-glow) !important;
}

.dark-mode .quick-action-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2)) !important;
    color: #818cf8 !important;
}

.dark-mode .quick-action-title {
    color: var(--text-primary) !important;
}

.dark-mode .quick-action-description {
    color: var(--text-secondary) !important;
}

/* Recent Activity */
.dark-mode .activity-item {
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode .activity-icon {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
}

.dark-mode .activity-title {
    color: var(--text-primary) !important;
}

.dark-mode .activity-time {
    color: var(--text-muted) !important;
}


/* ============================================
   ANALYTICS PAGE SPECIFIC
   ============================================ */
.dark-mode .analytics-grid {
    gap: 20px;
}

.dark-mode .analytics-card {
    background-color: var(--bg-card) !important;
    border-top: 4px solid var(--primary-color) !important;
}

.dark-mode .analytics-card:hover {
    border-top-color: var(--secondary-color) !important;
}

/* Subject Icons */
.dark-mode .subject-icon.physics {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
}

.dark-mode .subject-icon.chemistry {
    background: linear-gradient(135deg, #10b981, #34d399) !important;
}

.dark-mode .subject-icon.mathematics {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
}

/* Recent Exams Section */
.dark-mode .recent-exams {
    background-color: var(--bg-card) !important;
    border-radius: 16px;
    padding: 25px;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .recent-exams h2 {
    color: var(--text-primary) !important;
}

/* AI Insights */
.dark-mode #aiInsightsList > div {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
}

/* Weekly Targets */
.dark-mode #weeklyTargets > div {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
}

/* Subject Practice Plan */
.dark-mode #subjectPracticePlan > div {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
}

/* Goal Mode Indicator */
.dark-mode #goalModeIndicator {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
}

/* Legend */
.dark-mode #breakdownLegend,
.dark-mode #accuracyLegend {
    background-color: var(--bg-input) !important;
}

.dark-mode #breakdownLegend span,
.dark-mode #accuracyLegend span {
    color: var(--text-secondary) !important;
}

/* Filter Tabs */
.dark-mode .filter-tabs {
    background-color: var(--bg-input) !important;
}

.dark-mode .topic-filter-tab {
    background-color: transparent !important;
    color: var(--text-secondary) !important;
}

.dark-mode .topic-filter-tab:hover {
    background-color: rgba(99, 102, 241, 0.1) !important;
    color: var(--text-primary) !important;
}

.dark-mode .topic-filter-tab.active {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}


/* ============================================
   SCROLLBARS
   ============================================ */
.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 4px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============================================
   TOOLTIPS & POPOVERS
   ============================================ */
.dark-mode [data-tooltip]::after,
.dark-mode .tooltip {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-md) !important;
}

/* ============================================
   ALERTS & NOTIFICATIONS
   ============================================ */
.dark-mode .alert {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .alert-success {
    background-color: rgba(16, 185, 129, 0.15) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
}

.dark-mode .alert-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fbbf24 !important;
}

.dark-mode .alert-danger,
.dark-mode .alert-error {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

.dark-mode .alert-info {
    background-color: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    color: #818cf8 !important;
}

/* ============================================
   LINKS
   ============================================ */
.dark-mode a {
    color: #818cf8;
}

.dark-mode a:hover {
    color: #a5b4fc;
}

/* ============================================
   SELECTION
   ============================================ */
.dark-mode ::selection {
    background-color: rgba(99, 102, 241, 0.4);
    color: #ffffff;
}

/* ============================================
   MOBILE MENU
   ============================================ */
.dark-mode .mobile-menu-toggle {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .mobile-menu-toggle:hover {
    background-color: var(--bg-card-hover) !important;
}


/* ============================================
   INLINE STYLES OVERRIDE (for dynamic content)
   ============================================ */
.dark-mode [style*="background-color: white"],
.dark-mode [style*="background: white"],
.dark-mode [style*="background-color: #fff"],
.dark-mode [style*="background: #fff"],
.dark-mode [style*="background-color: #ffffff"],
.dark-mode [style*="background: #ffffff"] {
    background-color: var(--bg-card) !important;
}

.dark-mode [style*="color: #111827"],
.dark-mode [style*="color: #1f2937"],
.dark-mode [style*="color: #374151"],
.dark-mode [style*="color: black"] {
    color: var(--text-primary) !important;
}

.dark-mode [style*="color: #4b5563"],
.dark-mode [style*="color: #6b7280"],
.dark-mode [style*="color: #9ca3af"] {
    color: var(--text-secondary) !important;
}

.dark-mode [style*="border: 1px solid rgba(0,0,0"],
.dark-mode [style*="border: 1px solid #e5e7eb"],
.dark-mode [style*="border-bottom: 1px solid rgba(0,0,0"] {
    border-color: var(--border-color) !important;
}

/* ============================================
   CHART.JS DARK MODE SUPPORT
   ============================================ */
.dark-mode canvas {
    filter: none !important;
}

/* ============================================
   SPECIAL ELEMENTS
   ============================================ */
.dark-mode hr {
    border-color: var(--border-color) !important;
}

.dark-mode blockquote {
    border-left-color: var(--primary-color) !important;
    background-color: var(--bg-input) !important;
    color: var(--text-secondary) !important;
}

.dark-mode code {
    background-color: var(--bg-input) !important;
    color: #f472b6 !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode pre {
    background-color: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

/* ============================================
   LOADING STATES
   ============================================ */
.dark-mode .skeleton,
.dark-mode .loading-placeholder {
    background: linear-gradient(90deg, var(--bg-input) 25%, var(--bg-card-hover) 50%, var(--bg-input) 75%) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s infinite !important;
}

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

/* ============================================
   EMPTY STATES
   ============================================ */
.dark-mode .empty-state {
    color: var(--text-muted) !important;
}

.dark-mode .empty-state-icon {
    color: var(--text-muted) !important;
    opacity: 0.5;
}

/* ============================================
   TRANSITIONS
   ============================================ */
.dark-mode * {
    transition-property: background-color, border-color, box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

/* Disable color transition on text to prevent rendering artifacts */
.dark-mode .chapter-title,
.dark-mode .chapter-title *,
.dark-mode h1, .dark-mode h2, .dark-mode h3,
.dark-mode p, .dark-mode span {
    transition: none !important;
}


/* ============================================
   SUBSCRIPTION PLAN CARDS (Inline Style Override)
   ============================================ */
.dark-mode #subscription div[style*="display: grid"] > div {
    background-color: var(--bg-card) !important;
    background: var(--bg-card) !important;
}

.dark-mode #subscription div[style*="display: grid"] > div[style*="border: 3px solid #f59e0b"] {
    background: linear-gradient(to bottom, var(--bg-card), rgba(245, 158, 11, 0.08)) !important;
}

.dark-mode #subscription span,
.dark-mode #subscription li span {
    color: var(--text-primary) !important;
}

.dark-mode #subscription div[style*="color: #6b7280"] {
    color: var(--text-secondary) !important;
}

/* Why Upgrade Section */
.dark-mode #subscription div[style*="background: linear-gradient(145deg, rgba(59, 130, 246"] {
    background: linear-gradient(145deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1)) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
}

.dark-mode #subscription div[style*="background: linear-gradient(145deg"] h3 {
    color: #818cf8 !important;
}

.dark-mode #subscription div[style*="background: linear-gradient(145deg"] p,
.dark-mode #subscription div[style*="background: linear-gradient(145deg"] span {
    color: var(--text-secondary) !important;
}

/* ============================================
   WELCOME SECTION BANNER
   ============================================ */
.dark-mode .welcome-section div[style*="background-color: rgba(79, 70, 229, 0.08)"],
.dark-mode .welcome-section div[style*="border-left: 4px solid"] {
    background-color: rgba(99, 102, 241, 0.12) !important;
    border-left-color: var(--primary-color) !important;
}

.dark-mode .welcome-section div[style*="border-left"] p {
    color: var(--text-secondary) !important;
}

.dark-mode .welcome-section div[style*="border-left"] strong {
    color: #818cf8 !important;
}

.dark-mode .welcome-section div[style*="border-left"] a {
    color: #a5b4fc !important;
}

/* ============================================
   RADIAL GRADIENT DECORATIONS
   ============================================ */
.dark-mode div[style*="background: radial-gradient"] {
    opacity: 0.5 !important;
}

/* ============================================
   RESULT/REVIEW PAGE STYLES
   ============================================ */
.dark-mode .review-container,
.dark-mode .question-review-card {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .question-palette-item {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .question-palette-item.correct {
    background-color: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
}

.dark-mode .question-palette-item.incorrect {
    background-color: rgba(239, 68, 68, 0.2) !important;
    border-color: #ef4444 !important;
}

.dark-mode .question-palette-item.unattempted {
    background-color: rgba(107, 114, 128, 0.2) !important;
    border-color: #6b7280 !important;
}

.dark-mode .ai-recommendation {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .do-card {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.dark-mode .dont-card {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.dark-mode .similar-question-card {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .similar-question-card:hover {
    border-color: var(--primary-color) !important;
    background-color: var(--bg-card-hover) !important;
}


/* ============================================
   ATTEMPT QUESTION PAGE
   ============================================ */
.dark-mode .question-panel {
    background: rgba(26, 26, 26, 0.95) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

.dark-mode .question-meta {
    background: rgba(26, 26, 26, 0.95) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .question-meta .paper-info {
    color: var(--text-secondary) !important;
}

.dark-mode .question-content {
    color: var(--text-primary) !important;
}

.dark-mode .option {
    background: linear-gradient(135deg, rgba(37, 37, 37, 0.9), rgba(42, 42, 42, 0.9)) !important;
    border: 2px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .option:hover {
    border-color: var(--primary-color) !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.1)) !important;
}

.dark-mode .option.selected {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.dark-mode .answer-input {
    background: var(--bg-input) !important;
    border: 2px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .answer-input:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2) !important;
}

.dark-mode .interaction-buttons {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.8), rgba(20, 20, 20, 0.8)) !important;
    border-top: 1px solid var(--border-color) !important;
}

.dark-mode .solution-section {
    background: rgba(26, 26, 26, 0.95) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .tab {
    background: var(--bg-input) !important;
    border: 2px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.dark-mode .tab:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}

.dark-mode .tab.active {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
}

.dark-mode .hint-popup,
.dark-mode .notebook-popup {
    background: rgba(26, 26, 26, 0.98) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .tag {
    background: var(--bg-input) !important;
    border: 2px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.dark-mode .tag:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}

.dark-mode .tag.selected {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
}

/* ============================================
   PROFILE PAGE
   ============================================ */
.dark-mode #profileInitials {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)) !important;
}

/* ============================================
   HELP PAGE
   ============================================ */
.dark-mode details {
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode details summary {
    color: var(--text-primary) !important;
}

.dark-mode details p {
    color: var(--text-secondary) !important;
}

/* ============================================
   SOLVE QUESTIONS PAGE
   ============================================ */
.dark-mode .question-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .question-header {
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode .question-timer {
    color: #f87171 !important;
}

.dark-mode .progress-bar {
    background: var(--bg-input) !important;
}

.dark-mode .result-content {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}


/* ============================================
   JEE MAINS PHYSICS/CHEMISTRY/MATH PAGES
   Chapter Cards Fix
   ============================================ */
.dark-mode .chapter-card,
.dark-mode [class*="chapter"],
.dark-mode div[style*="background: white"],
.dark-mode div[style*="background-color: white"],
.dark-mode div[style*="background:#fff"],
.dark-mode div[style*="background: #fff"],
.dark-mode div[style*="background-color: #fff"] {
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Chapter cards with inline styles */
.dark-mode .dashboard-content div[style*="display: grid"] > div[style*="background"],
.dark-mode .dashboard-content div[style*="grid-template"] > div {
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .dashboard-content div[style*="display: grid"] > div:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--primary-color) !important;
}

/* Stats box */
.dark-mode div[style*="Stats"],
.dark-mode .stats-box,
.dark-mode div[style*="border-radius: 16px"][style*="padding: 25px"] {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* Filter buttons/tabs */
.dark-mode .filter-btn,
.dark-mode div[style*="border-radius: 25px"][style*="padding"][style*="cursor: pointer"],
.dark-mode button[style*="background: white"],
.dark-mode button[style*="background-color: white"] {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.dark-mode .filter-btn.active,
.dark-mode .filter-btn:hover {
    background: var(--primary-color) !important;
    color: #ffffff !important;
}

/* Search input */
.dark-mode input[style*="border-radius"][style*="padding"],
.dark-mode .search-input,
.dark-mode div[style*="display: flex"] input[type="text"] {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode input::placeholder {
    color: var(--text-muted) !important;
}

/* Subject cards (Physics, Chemistry, Mathematics) */
.dark-mode .subject-card,
.dark-mode div[style*="border-radius: 20px"][style*="padding: 30px"],
.dark-mode div[style*="linear-gradient"][style*="border-radius: 20px"] {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* Question Bank exam cards */
.dark-mode .exam-card,
.dark-mode div[style*="border-radius: 16px"][style*="overflow: hidden"][style*="box-shadow"] {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* Year Range and Stats labels */
.dark-mode span[style*="color: #666"],
.dark-mode span[style*="color: #6b7280"],
.dark-mode div[style*="color: #666"],
.dark-mode div[style*="color: #6b7280"] {
    color: var(--text-secondary) !important;
}

/* Loading text */
.dark-mode span[style*="Loading"],
.dark-mode div[style*="Loading"] {
    color: var(--text-secondary) !important;
}

/* Badge styles */
.dark-mode span[style*="background"][style*="border-radius"][style*="padding"] {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
}

/* Green badges */
.dark-mode span[style*="background: #10b981"],
.dark-mode span[style*="background-color: #10b981"],
.dark-mode span[style*="background: rgb(16, 185, 129)"] {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}

/* Orange/Yellow badges */
.dark-mode span[style*="background: #f59e0b"],
.dark-mode span[style*="background-color: #f59e0b"],
.dark-mode span[style*="background: rgb(245, 158, 11)"] {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}


/* ============================================
   CSS VARIABLE OVERRIDES FOR DARK MODE
   These override the :root variables used in pages
   ============================================ */
.dark-mode {
    /* Core colors */
    --background-color: #0d0d0d !important;
    --card-bg: #1a1a1a !important;
    --text-color: #f0f0f0 !important;
    --text-light: #a0a0a0 !important;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
    --shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
    
    /* Border */
    --border-color: #2a2a2a !important;
}

/* Force chapter cards dark */
.dark-mode .chapter-card {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    color: #f0f0f0 !important;
}

.dark-mode .chapter-card:hover {
    background: #222222 !important;
    border-color: #6366f1 !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(99, 102, 241, 0.15) !important;
}

.dark-mode .chapter-title {
    color: #f0f0f0 !important;
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    outline: none !important;
}

.dark-mode .chapter-questions {
    color: #a0a0a0 !important;
    background-color: rgba(255, 165, 0, 0.15) !important;
}

/* Filter tabs */
.dark-mode .filter-tabs {
    background: transparent !important;
}

.dark-mode .filter-tab,
.dark-mode .filter-btn {
    background: #252525 !important;
    border: 1px solid #333333 !important;
    color: #a0a0a0 !important;
}

.dark-mode .filter-tab:hover,
.dark-mode .filter-btn:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: #6366f1 !important;
    color: #f0f0f0 !important;
}

.dark-mode .filter-tab.active,
.dark-mode .filter-btn.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

/* Search container */
.dark-mode .search-container,
.dark-mode .search-box {
    background: #252525 !important;
    border: 1px solid #333333 !important;
}

.dark-mode .search-container input,
.dark-mode .search-box input {
    background: transparent !important;
    color: #f0f0f0 !important;
}

.dark-mode .search-container i,
.dark-mode .search-box i {
    color: #666666 !important;
}

/* Stats section */
.dark-mode .stats-section,
.dark-mode .stats-container,
.dark-mode .stats-card {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
}

.dark-mode .stats-label,
.dark-mode .stat-label {
    color: #a0a0a0 !important;
}

.dark-mode .stats-value,
.dark-mode .stat-value {
    color: #f0f0f0 !important;
}

/* Subject cards */
.dark-mode .subject-card {
    background: #1a1a1a !important;
    border: none !important;
}

.dark-mode .subject-card:hover {
    background: #222222 !important;
    border: none !important;
}

.dark-mode .subject-name {
    color: #f0f0f0 !important;
}

.dark-mode .subject-chapters,
.dark-mode .subject-questions {
    color: #a0a0a0 !important;
}

/* Exam cards in Question Bank */
.dark-mode .exam-card {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
}

.dark-mode .exam-card:hover {
    border-color: #6366f1 !important;
}

.dark-mode .exam-title {
    color: #f0f0f0 !important;
}

.dark-mode .exam-badge {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

/* Header section with subject icon */
.dark-mode .subject-header,
.dark-mode .page-header {
    background: transparent !important;
}

.dark-mode .subject-icon-large {
    background: rgba(255, 165, 0, 0.15) !important;
}

/* Back button */
.dark-mode .back-btn,
.dark-mode button[style*="Back"] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #ffffff !important;
}

/* View all link */
.dark-mode .view-all-link,
.dark-mode a[style*="VIEW ALL"] {
    color: #818cf8 !important;
}

/* Updated badge */
.dark-mode .updated-badge {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}


/* ============================================
   QUESTION BANK PAGE - Exam Cards
   ============================================ */
.dark-mode .exam-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #222222 100%) !important;
    border: 1px solid #2a2a2a !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .exam-card::before {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)) !important;
}

.dark-mode .exam-card:hover {
    border-color: #6366f1 !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(99, 102, 241, 0.15) !important;
}

.dark-mode .exam-card h3 {
    color: #f0f0f0 !important;
}

.dark-mode .exam-card h3 .arrow {
    color: #818cf8 !important;
}

.dark-mode .exam-card:hover h3 .arrow {
    color: #a5b4fc !important;
}

.dark-mode .status-badge {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.15)) !important;
    color: #34d399 !important;
}

.dark-mode .exam-logo {
    background: linear-gradient(135deg, #252525, #1a1a1a) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Action buttons */
.dark-mode .action-btn {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    color: #f0f0f0 !important;
}

.dark-mode .action-btn:hover {
    background: #222222 !important;
    border-color: #6366f1 !important;
}

.dark-mode .new-badge {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}

.dark-mode .updated-badge {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
}

/* ============================================
   JEE MAINS SUBJECTS PAGE
   ============================================ */
.dark-mode .subject-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #222222 100%) !important;
    border: none !important;
}

.dark-mode .subject-card:hover {
    border: none !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(99, 102, 241, 0.15) !important;
}

.dark-mode .subject-card h3,
.dark-mode .subject-card .subject-name {
    color: #f0f0f0 !important;
}

.dark-mode .subject-card p,
.dark-mode .subject-card .subject-chapters,
.dark-mode .subject-card .subject-questions {
    color: #a0a0a0 !important;
}

/* Stats box in JEE Mains Subjects */
.dark-mode .stats-box,
.dark-mode div[style*="background: white"][style*="border-radius: 16px"],
.dark-mode div[style*="background-color: white"][style*="border-radius: 16px"] {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
}

/* Stats labels and values */
.dark-mode .stats-box span[style*="color: #666"],
.dark-mode .stats-box div[style*="color: #666"] {
    color: #a0a0a0 !important;
}

.dark-mode .stats-box span[style*="font-weight: 700"],
.dark-mode .stats-box div[style*="font-weight: 700"] {
    color: #f0f0f0 !important;
}

/* Subject icon backgrounds */
.dark-mode .subject-icon {
    opacity: 0.8 !important;
}

/* Section headers */
.dark-mode .section-header h1,
.dark-mode .section-header h2 {
    color: #f0f0f0 !important;
}

.dark-mode .view-all-link {
    color: #818cf8 !important;
}

.dark-mode .view-all-link:hover {
    color: #a5b4fc !important;
}


/* ============================================
   JEE MAINS SUBJECTS - Stats Container
   ============================================ */
.dark-mode .stats-container {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
}

.dark-mode .stats-title {
    color: #f0f0f0 !important;
}

.dark-mode .stat-item {
    background: transparent !important;
}

/* Subject cards specific */
.dark-mode .subject-total {
    color: #a0a0a0 !important;
}

.dark-mode .subject-chapters {
    color: #a0a0a0 !important;
}

.dark-mode .subject-card .arrow {
    color: #818cf8 !important;
}

.dark-mode .subject-card:hover .arrow {
    color: #a5b4fc !important;
}

/* Subject icon */
.dark-mode .subject-icon {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Header tag */
.dark-mode .tag {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

/* Tabs */
.dark-mode .tab {
    background: #252525 !important;
    color: #a0a0a0 !important;
}

.dark-mode .tab:hover:not(.active) {
    background: #333333 !important;
    color: #f0f0f0 !important;
}

.dark-mode .tab.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #ffffff !important;
}

/* ============================================
   PHYSICS/CHEMISTRY/MATH PAGES - Filter Tabs
   ============================================ */
.dark-mode .filter-tabs .filter-tab {
    background: #252525 !important;
    border: 1px solid #333333 !important;
    color: #a0a0a0 !important;
}

.dark-mode .filter-tabs .filter-tab:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: #6366f1 !important;
    color: #f0f0f0 !important;
}

.dark-mode .filter-tabs .filter-tab.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

/* Search box */
.dark-mode .search-box {
    background: #252525 !important;
    border: 1px solid #333333 !important;
}

.dark-mode .search-box input {
    background: transparent !important;
    color: #f0f0f0 !important;
    border: none !important;
}

.dark-mode .search-box input::placeholder {
    color: #666666 !important;
}

.dark-mode .search-box i {
    color: #666666 !important;
}

/* Chapter grid */
.dark-mode .chapter-grid {
    background: transparent !important;
}

/* Header container */
.dark-mode .header-container {
    background: transparent !important;
}

.dark-mode .header-container h1 {
    color: #f0f0f0 !important;
}

/* Subject header with icon */
.dark-mode .subject-header-icon {
    background: rgba(255, 165, 0, 0.15) !important;
}

/* Chapter count badge */
.dark-mode .chapter-count {
    color: #a0a0a0 !important;
}

/* Questions count badge */
.dark-mode .questions-count {
    color: #a0a0a0 !important;
}

/* Action buttons in header */
.dark-mode .action-buttons button {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #ffffff !important;
}

.dark-mode .action-buttons button:hover {
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3) !important;
}


/* ============================================
   COMPREHENSIVE INLINE STYLE OVERRIDES
   For elements with inline background colors
   ============================================ */

/* White backgrounds */
.dark-mode [style*="background: white"],
.dark-mode [style*="background-color: white"],
.dark-mode [style*="background: #fff"],
.dark-mode [style*="background-color: #fff"],
.dark-mode [style*="background: #ffffff"],
.dark-mode [style*="background-color: #ffffff"],
.dark-mode [style*="background: rgb(255, 255, 255)"],
.dark-mode [style*="background-color: rgb(255, 255, 255)"] {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
}

/* Light gray backgrounds */
.dark-mode [style*="background: #f8f9fa"],
.dark-mode [style*="background-color: #f8f9fa"],
.dark-mode [style*="background: #f3f4f6"],
.dark-mode [style*="background-color: #f3f4f6"],
.dark-mode [style*="background: #f0f0f0"],
.dark-mode [style*="background-color: #f0f0f0"] {
    background: #252525 !important;
    background-color: #252525 !important;
}

/* Dark text colors to light */
.dark-mode [style*="color: #333"],
.dark-mode [style*="color: #1e293b"],
.dark-mode [style*="color: #111827"],
.dark-mode [style*="color: #1f2937"],
.dark-mode [style*="color: black"],
.dark-mode [style*="color: #000"] {
    color: #f0f0f0 !important;
}

/* Gray text colors */
.dark-mode [style*="color: #666"],
.dark-mode [style*="color: #6b7280"],
.dark-mode [style*="color: #64748b"],
.dark-mode [style*="color: #4b5563"],
.dark-mode [style*="color: #374151"] {
    color: #a0a0a0 !important;
}

/* Light gray text */
.dark-mode [style*="color: #888"],
.dark-mode [style*="color: #9ca3af"],
.dark-mode [style*="color: #999"] {
    color: #808080 !important;
}

/* Border colors */
.dark-mode [style*="border: 1px solid #e5e7eb"],
.dark-mode [style*="border: 1px solid #d1d5db"],
.dark-mode [style*="border: 1px solid rgba(0,0,0,0.1)"],
.dark-mode [style*="border-color: #e5e7eb"],
.dark-mode [style*="border-color: #d1d5db"] {
    border-color: #2a2a2a !important;
}

/* Box shadows */
.dark-mode [style*="box-shadow: 0"][style*="rgba(0,0,0,0.1)"],
.dark-mode [style*="box-shadow: 0"][style*="rgba(0,0,0,0.08)"],
.dark-mode [style*="box-shadow: 0"][style*="rgba(0,0,0,0.05)"] {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
}

/* Gradient backgrounds with white */
.dark-mode [style*="linear-gradient"][style*="white"],
.dark-mode [style*="linear-gradient"][style*="#fff"],
.dark-mode [style*="linear-gradient"][style*="255, 255, 255"] {
    background: linear-gradient(135deg, #1a1a1a 0%, #222222 100%) !important;
}

/* Input fields */
.dark-mode input[style*="background"],
.dark-mode textarea[style*="background"],
.dark-mode select[style*="background"] {
    background: #252525 !important;
    background-color: #252525 !important;
    color: #f0f0f0 !important;
    border-color: #333333 !important;
}

/* Buttons with white background */
.dark-mode button[style*="background: white"],
.dark-mode button[style*="background-color: white"] {
    background: #252525 !important;
    background-color: #252525 !important;
    color: #f0f0f0 !important;
    border-color: #333333 !important;
}

/* Divs with padding and border-radius (cards) */
.dark-mode div[style*="border-radius"][style*="padding"][style*="box-shadow"] {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
}

/* Labels and spans */
.dark-mode label[style*="color"],
.dark-mode span[style*="color: #"] {
    color: inherit !important;
}

/* Force all card-like elements */
.dark-mode .card,
.dark-mode [class*="-card"],
.dark-mode [class*="_card"] {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    border-color: #2a2a2a !important;
}


/* ============================================
   QUESTION BANK - Invert JEE Advanced Logo Only
   ============================================ */
.dark-mode .exam-logo img[src*="jee advanced"],
.dark-mode .exam-logo img[alt*="JEE Advanced"] {
    filter: invert(1) brightness(1.2) contrast(1.1) !important;
}

.dark-mode .exam-logo {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}


/* ============================================
   MATHEMATICS - Blue Color Theme #688AFF
   ============================================ */
/* Mathematics chapter cards - use bright blue */
.dark-mode .chapter-card {
    border-left-color: #688AFF !important;
}

.dark-mode .chapter-card::after {
    background-color: #688AFF !important;
}

.dark-mode .chapter-title i.fa-chevron-right {
    color: #688AFF !important;
}

.dark-mode .chapter-questions {
    background-color: rgba(104, 138, 255, 0.2) !important;
    color: #99AAFF !important;
}

/* Mathematics subject card in jee-mains-subjects.html */
.dark-mode .subject-card:nth-child(3) {
    border: none !important;
}

.dark-mode .subject-card:nth-child(3)::after {
    background-color: #688AFF !important;
}

.dark-mode .subject-card:nth-child(3) .subject-icon {
    background-color: #688AFF !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(104, 138, 255, 0.4) !important;
}

/* Physics - Yellow/Gold #FFF2B3 */
.dark-mode .subject-card:nth-child(1) {
    border: none !important;
}

.dark-mode .subject-card:nth-child(1)::after {
    background-color: #FFF2B3 !important;
}

.dark-mode .subject-card:nth-child(1) .subject-icon {
    background-color: #FFF2B3 !important;
    color: #333333 !important;
    box-shadow: 0 4px 15px rgba(255, 242, 179, 0.4) !important;
}

/* Chemistry - Pink #FF67D5 */
.dark-mode .subject-card:nth-child(2) {
    border: none !important;
}

.dark-mode .subject-card:nth-child(2)::after {
    background-color: #FF67D5 !important;
}

.dark-mode .subject-card:nth-child(2) .subject-icon {
    background-color: #FF67D5 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(255, 103, 213, 0.4) !important;
}


/* ============================================
   SUBJECT PAGES - CSS Variable Overrides for Dark Mode
   Physics: #FFF2B3 (Yellow/Gold)
   Chemistry: #FF67D5 (Pink)
   Mathematics: #688AFF (Blue)
   ============================================ */

/* ============================================
   PHYSICS PAGE (data-subject="physics")
   Dark Mode Colors: #FFF2B3 (Yellow/Gold)
   ============================================ */
body.dark-mode[data-subject="physics"] .chapter-card {
    border-left-color: #FFF2B3 !important;
}

body.dark-mode[data-subject="physics"] .chapter-card::after {
    background-color: #FFF2B3 !important;
}

body.dark-mode[data-subject="physics"] .chapter-title i.fa-chevron-right {
    color: #FFF2B3 !important;
}

body.dark-mode[data-subject="physics"] .chapter-questions {
    background-color: rgba(255, 242, 179, 0.2) !important;
    color: #FFF2B3 !important;
}

body.dark-mode[data-subject="physics"] .chapter-icon {
    background: linear-gradient(135deg, #FFF2B3, #FFE066) !important;
    color: #333333 !important;
    box-shadow: 0 4px 12px rgba(255, 242, 179, 0.3) !important;
}

body.dark-mode[data-subject="physics"] .subject-icon {
    background: linear-gradient(135deg, #FFF2B3, #FFE066) !important;
    color: #333333 !important;
    box-shadow: 0 8px 20px rgba(255, 242, 179, 0.3) !important;
}

body.dark-mode[data-subject="physics"] #filterIndicator {
    border-left-color: #FFF2B3 !important;
}

body.dark-mode[data-subject="physics"] .bookmark-btn i {
    color: #FFF2B3 !important;
}

body.dark-mode[data-subject="physics"] #filterBtn i {
    color: #FFF2B3 !important;
}

/* ============================================
   CHEMISTRY PAGE (data-subject="chemistry")
   Dark Mode Colors: #FF67D5 (Pink)
   ============================================ */
body.dark-mode[data-subject="chemistry"] .chapter-card {
    border-left-color: #FF67D5 !important;
}

body.dark-mode[data-subject="chemistry"] .chapter-card::after {
    background-color: #FF67D5 !important;
}

body.dark-mode[data-subject="chemistry"] .chapter-title i.fa-chevron-right {
    color: #FF67D5 !important;
}

body.dark-mode[data-subject="chemistry"] .chapter-questions {
    background-color: rgba(255, 103, 213, 0.2) !important;
    color: #FF99E6 !important;
}

body.dark-mode[data-subject="chemistry"] .chapter-icon {
    background: linear-gradient(135deg, #FF67D5, #FF99E6) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 103, 213, 0.3) !important;
}

body.dark-mode[data-subject="chemistry"] .subject-icon {
    background: linear-gradient(135deg, #FF67D5, #FF99E6) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(255, 103, 213, 0.3) !important;
}

body.dark-mode[data-subject="chemistry"] #filterIndicator {
    border-left-color: #FF67D5 !important;
}

body.dark-mode[data-subject="chemistry"] .bookmark-btn i {
    color: #FF67D5 !important;
}

body.dark-mode[data-subject="chemistry"] #filterBtn i {
    color: #FF67D5 !important;
}

/* ============================================
   MATHEMATICS PAGE (data-subject="mathematics")
   Dark Mode Colors: #688AFF (Blue)
   ============================================ */
body.dark-mode[data-subject="mathematics"] .chapter-card {
    border-left-color: #688AFF !important;
}

body.dark-mode[data-subject="mathematics"] .chapter-card::after {
    background-color: #688AFF !important;
}

body.dark-mode[data-subject="mathematics"] .chapter-title i.fa-chevron-right {
    color: #688AFF !important;
}

body.dark-mode[data-subject="mathematics"] .chapter-questions {
    background-color: rgba(104, 138, 255, 0.2) !important;
    color: #99AAFF !important;
}

body.dark-mode[data-subject="mathematics"] .chapter-icon {
    background: linear-gradient(135deg, #688AFF, #99AAFF) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(104, 138, 255, 0.3) !important;
}

body.dark-mode[data-subject="mathematics"] .subject-icon {
    background: linear-gradient(135deg, #688AFF, #99AAFF) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(104, 138, 255, 0.3) !important;
}

body.dark-mode[data-subject="mathematics"] #filterIndicator {
    border-left-color: #688AFF !important;
}

body.dark-mode[data-subject="mathematics"] .bookmark-btn i {
    color: #688AFF !important;
}

body.dark-mode[data-subject="mathematics"] #filterBtn i {
    color: #688AFF !important;
}



/* ============================================
   FIX: Remove text outline/box effect
   ============================================ */
.dark-mode .chapter-title,
.dark-mode .chapter-title * {
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    -webkit-text-stroke-width: 0 !important;
    -webkit-text-stroke-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    filter: none !important;
    -webkit-filter: none !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
}

.dark-mode .subject-header h1 {
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #f0f0f0 !important;
    background: none !important;
    text-shadow: none !important;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3 {
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
}

/* Remove any text decoration or effects */
.dark-mode .chapter-card .chapter-title {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    text-shadow: none !important;
    -webkit-text-stroke: unset !important;
    paint-order: normal !important;
    background: none !important;
    background-color: transparent !important;
}

/* Force clean text rendering */
.dark-mode .chapter-title::before,
.dark-mode .chapter-title::after {
    display: none !important;
    content: none !important;
}


/* ============================================
   CHAPTER STATUS TAGS - Dark Mode Colors
   ============================================ */
/* Removed tag - Red #F87171 */
.dark-mode .tag-removed,
.dark-mode .tag.tag-removed {
    background: rgba(248, 113, 113, 0.25) !important;
    background-color: rgba(248, 113, 113, 0.25) !important;
    color: #F87171 !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(248, 113, 113, 0.3) !important;
}

/* Reduced tag - Yellow/Amber */
.dark-mode .tag-reduced,
.dark-mode .tag:not(.tag-removed) {
    background: rgba(251, 191, 36, 0.2) !important;
    background-color: rgba(251, 191, 36, 0.2) !important;
    color: #FBBF24 !important;
    border: none !important;
}


/* ============================================
   JEE MAINS SUBJECTS - Remove all borders
   ============================================ */
.dark-mode .subject-card,
.dark-mode .subject-card:nth-child(1),
.dark-mode .subject-card:nth-child(2),
.dark-mode .subject-card:nth-child(3) {
    border: none !important;
    border-color: transparent !important;
    border-width: 0 !important;
    outline: none !important;
}

/* Remove text outline/box from chapter text */
.dark-mode .subject-chapters,
.dark-mode .subject-total,
.dark-mode .subject-card p,
.dark-mode .subject-card div:not(.subject-icon) {
    text-shadow: none !important;
    -webkit-text-stroke: 0 !important;
    -webkit-text-stroke-width: 0 !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}


/* ============================================
   CHAPTER QUESTIONS PAGE - Dark Mode
   ============================================ */
/* Question card - dark background */
.dark-mode .question-card,
.dark-mode .question-item,
.dark-mode [class*="question-card"],
.dark-mode [class*="question-item"] {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
    color: #f0f0f0 !important;
}

/* Invert images inside question cards (for math formulas, diagrams) */
.dark-mode .question-card img,
.dark-mode .question-item img,
.dark-mode .question-text img,
.dark-mode .question-content img,
.dark-mode [class*="question"] img:not(.logo):not([src*="logo"]) {
    filter: invert(1) hue-rotate(180deg) !important;
    background-color: transparent !important;
}

/* Question text color */
.dark-mode .question-text,
.dark-mode .question-content,
.dark-mode .question-card p,
.dark-mode .question-item p {
    color: #f0f0f0 !important;
}

/* Question number */
.dark-mode .question-number,
.dark-mode .q-number,
.dark-mode [class*="question-num"] {
    color: #818cf8 !important;
}

/* Question tag/badge */
.dark-mode .question-tag,
.dark-mode .question-badge,
.dark-mode .exam-tag {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #818cf8 !important;
}

/* Filter buttons */
.dark-mode .filter-btn,
.dark-mode .difficulty-btn {
    background: #252525 !important;
    border: 1px solid #333333 !important;
    color: #a0a0a0 !important;
}

.dark-mode .filter-btn:hover,
.dark-mode .difficulty-btn:hover {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: #6366f1 !important;
    color: #f0f0f0 !important;
}

.dark-mode .filter-btn.active,
.dark-mode .difficulty-btn.active {
    background: #6366f1 !important;
    color: #ffffff !important;
}

/* Sort button */
.dark-mode .sort-btn,
.dark-mode [class*="sort"] button {
    background: #252525 !important;
    border: 1px solid #333333 !important;
    color: #f0f0f0 !important;
}

/* Pagination */
.dark-mode .pagination,
.dark-mode .pagination a,
.dark-mode .pagination span {
    background: #252525 !important;
    border: 1px solid #333333 !important;
    color: #a0a0a0 !important;
}

.dark-mode .pagination .active,
.dark-mode .pagination a:hover {
    background: #6366f1 !important;
    color: #ffffff !important;
}


/* ============================================
   CHAPTER QUESTIONS PAGE - Subject Icon Colors
   ============================================ */
/* Physics icon - Yellow/Gold background, dark icon */
body.dark-mode[data-subject="physics"] .header-title-section .subject-icon {
    background: linear-gradient(135deg, #FFF2B3, #FFE066) !important;
    color: #333333 !important;
}

body.dark-mode[data-subject="physics"] .header-title-section .subject-icon i {
    color: #333333 !important;
}

/* Chemistry icon - Pink background, white icon */
body.dark-mode[data-subject="chemistry"] .header-title-section .subject-icon {
    background: linear-gradient(135deg, #FF67D5, #FF99E6) !important;
    color: #ffffff !important;
}

body.dark-mode[data-subject="chemistry"] .header-title-section .subject-icon i {
    color: #ffffff !important;
}

/* Mathematics icon - Blue background, white icon */
body.dark-mode[data-subject="mathematics"] .header-title-section .subject-icon {
    background: linear-gradient(135deg, #688AFF, #99AAFF) !important;
    color: #ffffff !important;
}

body.dark-mode[data-subject="mathematics"] .header-title-section .subject-icon i {
    color: #ffffff !important;
}

/* General override for chapter-questions page subject icon */
.dark-mode .header-title-section .subject-icon {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Decorative circles inside icon */
.dark-mode .header-title-section .subject-icon div[style*="background: rgba(255,255,255"] {
    background: rgba(255, 255, 255, 0.3) !important;
}


/* ============================================
   CHAPTER QUESTIONS - Force Icon Background Fill
   (Only for chapter-questions page header)
   ============================================ */
/* Physics - Yellow/Gold */
body.dark-mode[data-subject="physics"] .header-title-section .subject-icon[style*="linear-gradient"] {
    background: linear-gradient(135deg, #FFF2B3, #FFE066) !important;
    box-shadow: 0 8px 20px rgba(255, 242, 179, 0.4) !important;
}

body.dark-mode[data-subject="physics"] .header-title-section .subject-icon i,
body.dark-mode[data-subject="physics"] .header-title-section .subject-icon .fas,
body.dark-mode[data-subject="physics"] .header-title-section .subject-icon .fa {
    color: #333333 !important;
}

/* Chemistry - Pink */
body.dark-mode[data-subject="chemistry"] .header-title-section .subject-icon[style*="linear-gradient"] {
    background: linear-gradient(135deg, #FF67D5, #FF99E6) !important;
    box-shadow: 0 8px 20px rgba(255, 103, 213, 0.4) !important;
}

body.dark-mode[data-subject="chemistry"] .header-title-section .subject-icon i,
body.dark-mode[data-subject="chemistry"] .header-title-section .subject-icon .fas,
body.dark-mode[data-subject="chemistry"] .header-title-section .subject-icon .fa {
    color: #ffffff !important;
}

/* Mathematics - Blue */
body.dark-mode[data-subject="mathematics"] .header-title-section .subject-icon[style*="linear-gradient"] {
    background: linear-gradient(135deg, #688AFF, #99AAFF) !important;
    box-shadow: 0 8px 20px rgba(104, 138, 255, 0.4) !important;
}

body.dark-mode[data-subject="mathematics"] .header-title-section .subject-icon i,
body.dark-mode[data-subject="mathematics"] .header-title-section .subject-icon .fas,
body.dark-mode[data-subject="mathematics"] .header-title-section .subject-icon .fa {
    color: #ffffff !important;
}


/* ============================================
   ATTEMPT QUESTION PAGE - Dark Mode
   ============================================ */
/* Question panel - dark background */
.dark-mode .question-panel {
    background: rgba(26, 26, 26, 0.95) !important;
    border: 1px solid #2a2a2a !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Question content area */
.dark-mode .question-content {
    color: #f0f0f0 !important;
}

/* Question text */
.dark-mode #questionText,
.dark-mode .question-text {
    color: #f0f0f0 !important;
}

/* Invert question images (math formulas, diagrams) */
.dark-mode .question-image,
.dark-mode #questionImage,
.dark-mode .question-content img {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* Options container */
.dark-mode .options-container,
.dark-mode .options-grid {
    background: transparent !important;
}

/* Individual options */
.dark-mode .option {
    background: linear-gradient(135deg, rgba(37, 37, 37, 0.9), rgba(42, 42, 42, 0.9)) !important;
    border: 2px solid #333333 !important;
    color: #f0f0f0 !important;
}

.dark-mode .option:hover {
    border-color: #6366f1 !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.1)) !important;
}

.dark-mode .option.selected {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

/* Option images */
.dark-mode .option img,
.dark-mode .option-image {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* Question meta info */
.dark-mode .question-meta {
    background: rgba(26, 26, 26, 0.95) !important;
    border-bottom: 1px solid #2a2a2a !important;
    color: #f0f0f0 !important;
}

.dark-mode .question-number {
    color: #818cf8 !important;
}

.dark-mode .paper-info {
    color: #a0a0a0 !important;
}

/* Interaction buttons area */
.dark-mode .interaction-buttons {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.8), rgba(20, 20, 20, 0.8)) !important;
    border-top: 1px solid #2a2a2a !important;
}

/* Navigation buttons */
.dark-mode .btn-secondary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #ffffff !important;
    border: none !important;
}

.dark-mode .btn-secondary:hover {
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4) !important;
}

/* Check answer button */
.dark-mode .btn-primary,
.dark-mode #checkBtn {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #ffffff !important;
}

.dark-mode .btn-primary:disabled,
.dark-mode #checkBtn:disabled {
    background: #4a4a4a !important;
    color: #888888 !important;
    cursor: not-allowed !important;
}

/* Timer */
.dark-mode .timer {
    background-color: rgba(37, 37, 37, 0.9) !important;
    color: #f0f0f0 !important;
}

/* Header */
.dark-mode .attempt-header,
.dark-mode header {
    background-color: #1a1a1a !important;
    border-bottom: 1px solid #2a2a2a !important;
}

/* Main body background */
.dark-mode .attempt-page,
.dark-mode .attempt-container {
    background-color: #0d0d0d !important;
}


/* ============================================
   ATTEMPT QUESTION PAGE - Body Background Fix
   ============================================ */
/* Override body background */
.dark-mode body,
body.dark-mode {
    background: #0d0d0d !important;
    background-color: #0d0d0d !important;
}

/* Override any light gradient backgrounds */
.dark-mode [style*="background: linear-gradient(135deg, #F0FBFF"],
.dark-mode [style*="background: linear-gradient(135deg, #f0f8ff"] {
    background: #0d0d0d !important;
}

/* Options with light backgrounds */
.dark-mode .option[style*="background"] {
    background: linear-gradient(135deg, rgba(37, 37, 37, 0.9), rgba(42, 42, 42, 0.9)) !important;
}

/* Interaction buttons area */
.dark-mode .interaction-buttons[style*="background"] {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.9), rgba(20, 20, 20, 0.9)) !important;
}


/* ============================================
   ATTEMPT QUESTION - Button Fixes
   ============================================ */
/* Check Answer button - enabled state */
.dark-mode .btn-primary:not(:disabled),
.dark-mode #checkBtn:not(:disabled) {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
}

/* Check Answer button - disabled state */
.dark-mode .btn-primary:disabled,
.dark-mode #checkBtn:disabled,
.dark-mode .btn-primary[disabled],
.dark-mode #checkBtn[disabled] {
    background: #3a3a3a !important;
    color: #666666 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

/* All buttons text should be white */
.dark-mode .btn,
.dark-mode button.btn {
    color: #ffffff !important;
}

/* Previous/Next buttons */
.dark-mode .btn-secondary:not(:disabled) {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #ffffff !important;
}


/* ============================================
   DASHBOARD PAGE - Enhanced Dark Mode
   ============================================ */

/* Stats Grid Container - proper sizing */
.dark-mode .stats-grid {
    background: transparent !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}

/* Stat cards - fixed sizing and layout */
.dark-mode .stat-card,
.dark-mode .stats-card,
.dark-mode .stats-grid > div {
    background: linear-gradient(145deg, rgba(30, 30, 40, 0.95) 0%, rgba(20, 20, 30, 0.98) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.15) !important;
    border-top: 3px solid #6366f1 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    min-height: 100px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

/* Hide the decorative circle div */
.dark-mode .stat-card > div[style*="position: absolute"][style*="border-radius: 50%"],
.dark-mode .stats-grid > div > div[style*="position: absolute"] {
    display: none !important;
}

/* Different accent colors for each card */
.dark-mode .stats-grid > div:nth-child(1) { border-top-color: #6366f1 !important; }
.dark-mode .stats-grid > div:nth-child(2) { border-top-color: #10b981 !important; }
.dark-mode .stats-grid > div:nth-child(3) { border-top-color: #f59e0b !important; }
.dark-mode .stats-grid > div:nth-child(4) { border-top-color: #ec4899 !important; }

.dark-mode .stat-card:hover,
.dark-mode .stats-grid > div:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Stat values - proper sizing */
.dark-mode .stat-value,
.dark-mode .stat-card .stat-value,
.dark-mode .stats-grid .stat-value {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
    position: relative !important;
    z-index: 1 !important;
    white-space: nowrap !important;
}

/* Different colors for each stat value */
.dark-mode .stats-grid > div:nth-child(1) .stat-value {
    color: #818cf8 !important;
}
.dark-mode .stats-grid > div:nth-child(2) .stat-value {
    color: #34d399 !important;
}
.dark-mode .stats-grid > div:nth-child(3) .stat-value {
    color: #fbbf24 !important;
}
.dark-mode .stats-grid > div:nth-child(4) .stat-value {
    color: #f472b6 !important;
}

/* Stat labels - compact */
.dark-mode .stat-label,
.dark-mode .stat-card .stat-label,
.dark-mode .stats-grid .stat-label {
    color: #9ca3af !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    z-index: 1 !important;
    white-space: nowrap !important;
}

/* Mobile responsive */
@media (max-width: 992px) {
    .dark-mode .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .dark-mode .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .dark-mode .stat-card,
    .dark-mode .stats-grid > div {
        padding: 16px !important;
        min-height: 80px !important;
    }
    .dark-mode .stat-value,
    .dark-mode .stats-grid .stat-value {
        font-size: 24px !important;
    }
}

/* Free Plan banner - subtle gradient */
.dark-mode .plan-banner,
.dark-mode .free-plan-banner,
.dark-mode [class*="plan-banner"],
.dark-mode div[style*="Free Plan"] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    border-left: 4px solid #6366f1 !important;
}

/* AI Insights section */
.dark-mode .ai-insights,
.dark-mode [class*="ai-insight"],
.dark-mode [class*="insight"] {
    background: linear-gradient(135deg, #1a1a1a 0%, #1f1f1f 100%) !important;
    border: 1px solid #2a2a2a !important;
}

.dark-mode .ai-insights-header,
.dark-mode [class*="insight-header"] {
    color: #f0f0f0 !important;
}

/* Badge styling */
.dark-mode .badge,
.dark-mode .plan-badge {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #818cf8 !important;
}

/* Welcome section enhancement */
.dark-mode .welcome-section {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.15) !important;
    border-radius: 16px !important;
}

.dark-mode .welcome-section h1,
.dark-mode .welcome-title {
    background: linear-gradient(135deg, #818cf8, #a78bfa) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Quick action cards */
.dark-mode .quick-action,
.dark-mode .action-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #222222 100%) !important;
    border: 1px solid #2a2a2a !important;
}

.dark-mode .quick-action:hover,
.dark-mode .action-card:hover {
    border-color: #6366f1 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(99, 102, 241, 0.15) !important;
}

/* Progress bars */
.dark-mode .progress-bar-bg,
.dark-mode .progress-track {
    background: #2a2a2a !important;
}

.dark-mode .progress-bar-fill,
.dark-mode .progress-fill {
    background: linear-gradient(90deg, #6366f1, #8b5cf6) !important;
}

/* Recent activity items */
.dark-mode .activity-item {
    background: transparent !important;
    border-bottom: 1px solid #2a2a2a !important;
}

.dark-mode .activity-item:hover {
    background: rgba(99, 102, 241, 0.05) !important;
}

/* Charts container */
.dark-mode .chart-container,
.dark-mode .chart-card {
    background: #1a1a1a !important;
    border: 1px solid #2a2a2a !important;
}

/* Decorative elements - subtle glow effects */
.dark-mode .card::before {
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.1), transparent 70%) !important;
}

/* Icon backgrounds in stat cards */
.dark-mode .stat-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15)) !important;
    color: #818cf8 !important;
}

/* Upgrade link */
.dark-mode .upgrade-link,
.dark-mode a[href*="upgrade"],
.dark-mode a[href*="premium"] {
    color: #a78bfa !important;
}

.dark-mode .upgrade-link:hover {
    color: #c4b5fd !important;
}