/* Enhanced Navbar Styles */
.navbar {
    background:
        radial-gradient(circle at 15% 0%, rgba(138, 99, 242, 0.45), transparent 28%),
        linear-gradient(135deg, #111827 0%, #24345f 58%, #4a6ef5 100%) !important;
    box-shadow: 0 14px 40px rgba(17, 24, 39, 0.18) !important;
    border-bottom: 1px solid rgba(255,255,255,0.14);
    padding: 0.85rem 0;
    transition: all 0.3s ease;
}

.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10000;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    background: #ffffff;
    color: #2a3b6e;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.16);
    transform: translateY(-150%);
    transition: transform 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
}

.navbar-brand {
    font-weight: 800 !important;
    font-size: 1.4em !important;
    letter-spacing: -0.02em;
    transition: all 0.3s ease;
}

.navbar-brand:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

.navbar-brand img {
    transition: all 0.3s ease;
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

/* Enhanced Navigation Links */
.nav-link {
    font-weight: 650 !important;
    font-size: 0.95rem !important;
    padding: 0.6rem 1rem !important;
    border-radius: 999px !important;
    margin: 0 0.2rem !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    color: rgba(255,255,255,0.9) !important;
}

.nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.14) !important;
    transform: translateY(-1px) !important;
}

.nav-link:active {
    transform: translateY(0) !important;
}

/* Enhanced Auth Buttons */
.navbar-auth-btn {
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 25px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    border: 2px solid !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.navbar-auth-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.navbar-auth-btn:hover::before {
    left: 100%;
}

.btn-login {
    background: transparent !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.6) !important;
}

.btn-login:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: #fff !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(255,255,255,0.2) !important;
}

.btn-signup {
    background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%) !important;
    color: #26396b !important;
    border-color: transparent !important;
    box-shadow: 0 8px 22px rgba(255, 255, 255, 0.16) !important;
}

.btn-signup:hover {
    background: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(255, 255, 255, 0.2) !important;
    color: #172033 !important;
}

/* Enhanced Toggle Button */
.navbar-toggler {
    border: none !important;
    padding: 0.5rem !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.25) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Friend Request Badge */
.nav-link .badge {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    border: 2px solid #fff !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 0.25em 0.5em !important;
    border-radius: 12px !important;
    animation: pulse 2s infinite;
    position: absolute !important;
    top: -8px !important;
    right: -8px !important;
    transform: none !important;
    color: #fff !important;
}

.dark-mode .nav-link .badge {
    border-color: rgba(255, 255, 255, 0.9) !important;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Tab Styles */
.tab-active {
    padding: 8px 18px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    background: linear-gradient(135deg, #4a6ef5 0%, #8a63f2 100%);
    color: #fff;
    box-shadow: 0 2px 10px rgba(74, 110, 245, 0.3);
}

.tab-inactive {
    padding: 8px 18px;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
    transition: all 0.3s ease;
}

.tab-inactive:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* Container Styles */
.main-content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Mobile Responsive Improvements */
@media (max-width: 991px) {
    .navbar-nav {
        background: rgba(255,255,255,0.05);
        border-radius: 12px;
        padding: 1rem;
        margin-top: 1rem;
        backdrop-filter: blur(10px);
    }

    .nav-link {
        margin: 0.3rem 0 !important;
        padding: 0.8rem 1rem !important;
        border-radius: 8px !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
    }

    .nav-item {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .navbar-auth-btn {
        width: 100% !important;
        justify-content: center !important;
        margin: 0.3rem 0 !important;
        padding: 0.8rem 1.5rem !important;
    }

    .d-lg-flex.align-items-center.gap-2 {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }

    /* Ensure Friends link is centered on mobile */
    .nav-link.position-relative {
        position: relative !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

@media (max-width: 576px) {
    .navbar-brand {
        font-size: 1.2em !important;
    }
    
    .navbar-brand img {
        height: 40px !important;
    }
    
    .navbar-auth-btn {
        padding: 0.9rem 1.5rem !important;
        font-size: 1rem !important;
    }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Dark Mode Styles */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #2a3b6e;
    --text-secondary: #6c757d;
    --border-color: #e9ecef;
}

.dark-mode {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --border-color: #2a2a3e;
}

.dark-mode body {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.dark-mode .main-content-container {
    background-color: transparent;
}

.dark-mode .settings-card,
.dark-mode .profile-card,
.dark-mode .welcome-section,
.dark-mode .theme-preview,
.dark-mode .question-card,
.dark-mode .theme-card-modern {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .settings-section h2,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3 {
    color: var(--text-primary) !important;
}

.dark-mode .settings-section h2 {
    border-bottom-color: var(--border-color) !important;
}

.dark-mode .setting-item {
    border-bottom-color: var(--border-color) !important;
}

.dark-mode .settings-content p,
.dark-mode .settings-content div {
    color: var(--text-secondary) !important;
}

.dark-mode footer {
    background: var(--bg-primary) !important;
    border-top-color: var(--border-color) !important;
}

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

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

.dark-mode .score-streak-row {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .score-streak-row div {
    color: var(--text-primary) !important;
}

.dark-mode .btn-primary,
.dark-mode .btn-secondary {
    background-color: #4a6ef5 !important;
    border-color: #4a6ef5 !important;
}

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

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

.dark-mode .modal-header,
.dark-mode .modal-body,
.dark-mode .modal-footer {
    border-color: var(--border-color) !important;
}

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

.dark-mode .modal-body .text-muted {
    color: var(--text-secondary) !important;
}

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

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

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

.dark-mode .modal-body textarea::placeholder {
    color: var(--text-secondary) !important;
}

.dark-mode .form-control,
.dark-mode .form-select {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Comprehensive text color fixes for dark mode */
.dark-mode p,
.dark-mode span,
.dark-mode div,
.dark-mode label,
.dark-mode li,
.dark-mode td,
.dark-mode th,
.dark-mode .text-muted,
.dark-mode small {
    color: var(--text-primary) !important;
}

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

.dark-mode .question-category,
.dark-mode .question-number,
.dark-mode .question-status,
.dark-mode .theme-label,
.dark-mode .example-label {
    color: var(--text-primary) !important;
}

.dark-mode .example-question,
.dark-mode .example-question p {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
}

.dark-mode .theme-card-content,
.dark-mode .theme-card-title {
    color: var(--text-primary) !important;
}

.dark-mode .stat-label,
.dark-mode .stat-value,
.dark-mode .stat-extra {
    color: var(--text-primary) !important;
}

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

.dark-mode .list-unstyled li,
.dark-mode ul li,
.dark-mode ol li {
    color: var(--text-primary) !important;
}

.dark-mode .badge {
    color: #fff !important;
}

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

.dark-mode .flash-message.success {
    background: rgba(40, 167, 69, 0.2) !important;
    border-left-color: #28a745 !important;
}

.dark-mode .flash-message.error {
    background: rgba(220, 53, 69, 0.2) !important;
    border-left-color: #dc3545 !important;
}

.dark-mode table,
.dark-mode thead,
.dark-mode tbody {
    color: var(--text-primary) !important;
}

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

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

.dark-mode tbody tr:nth-child(odd) {
    background-color: var(--bg-secondary) !important;
}

.dark-mode tbody tr:hover {
    background-color: rgba(74, 110, 245, 0.1) !important;
}

.dark-mode td,
.dark-mode th {
    border-color: var(--border-color) !important;
}

.dark-mode a:not(.nav-link):not(.navbar-auth-btn):not(.btn-primary):not(.btn-secondary) {
    color: #6ab0ff !important;
}

.dark-mode a:not(.nav-link):not(.navbar-auth-btn):not(.btn-primary):not(.btn-secondary):hover {
    color: #8bc5ff !important;
}

.dark-mode .subscribe-link {
    color: #6ab0ff !important;
}

.dark-mode .subscribe-link:hover {
    color: #8bc5ff !important;
}

.dark-mode .welcome-content h1,
.dark-mode .welcome-content .highlight {
    -webkit-text-fill-color: var(--text-primary) !important;
    background: none !important;
    color: var(--text-primary) !important;
}

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

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

.dark-mode .view-leaderboard-link {
    background: linear-gradient(135deg, #4a6ef5 0%, #8a63f2 100%) !important;
}

.dark-mode .calendar-cell {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .calendar-cell.muted {
    opacity: 0.5;
}

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

.dark-mode .progress-bar {
    background-color: #4a6ef5 !important;
}

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

.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Override inline styles for dark mode */
.dark-mode [style*="color: #2a3b6e"],
.dark-mode [style*="color:#2a3b6e"] {
    color: var(--text-primary) !important;
}

.dark-mode [style*="color: #5a6c90"],
.dark-mode [style*="color:#5a6c90"],
.dark-mode [style*="color: #6c757d"],
.dark-mode [style*="color:#6c757d"],
.dark-mode [style*="color: #495057"],
.dark-mode [style*="color:#495057"],
.dark-mode [style*="color: #4a5568"],
.dark-mode [style*="color:#4a5568"],
.dark-mode [style*="color: #adb5bd"],
.dark-mode [style*="color:#adb5bd"] {
    color: var(--text-secondary) !important;
}

.dark-mode [style*="color: #4a6ef5"],
.dark-mode [style*="color:#4a6ef5"] {
    color: #6ab0ff !important;
}

.dark-mode [style*="color: #ff6a00"],
.dark-mode [style*="color:#ff6a00"] {
    color: #ff8a4d !important;
}

.dark-mode [style*="background: #f8f9fa"],
.dark-mode [style*="background:#f8f9fa"],
.dark-mode [style*="background-color: #f8f9fa"],
.dark-mode [style*="background-color:#f8f9fa"] {
    background: var(--bg-secondary) !important;
}

.dark-mode .score-streak-row [style*="color:#2a3b6e"] {
    color: var(--text-primary) !important;
}

.dark-mode .welcome-section [style*="color: #2a3b6e"],
.dark-mode .welcome-section [style*="color:#2a3b6e"] {
    color: var(--text-primary) !important;
}

.dark-mode .welcome-section [style*="color: #5a6c90"],
.dark-mode .welcome-section [style*="color:#5a6c90"] {
    color: var(--text-secondary) !important;
}

.dark-mode .theme-card-modern [style*="color: #2a3b6e"],
.dark-mode .theme-card-modern [style*="color:#2a3b6e"] {
    color: var(--text-primary) !important;
}

.dark-mode .example-question [style*="color: #2a3b6e"],
.dark-mode .example-question [style*="color:#2a3b6e"],
.dark-mode .example-question [style*="color: #495057"],
.dark-mode .example-question [style*="color:#495057"] {
    color: var(--text-primary) !important;
}

.dark-mode .example-question [style*="color: #6c757d"],
.dark-mode .example-question [style*="color:#6c757d"] {
    color: var(--text-secondary) !important;
}

.dark-mode .calendar-cell [style*="color: #2a3b6e"],
.dark-mode .calendar-cell [style*="color:#2a3b6e"] {
    color: var(--text-primary) !important;
}

.dark-mode .calendar-cell [style*="color: #6c757d"],
.dark-mode .calendar-cell [style*="color:#6c757d"],
.dark-mode .calendar-cell [style*="color: #adb5bd"],
.dark-mode .calendar-cell [style*="color:#adb5bd"] {
    color: var(--text-secondary) !important;
}

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

/* Additional specific overrides */
.dark-mode .question-grid,
.dark-mode .trivia-section {
    color: var(--text-primary) !important;
}

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

.dark-mode .login-prompt,
.dark-mode .login-link {
    color: #6ab0ff !important;
}

.dark-mode .login-link:hover {
    color: #8bc5ff !important;
}

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

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

/* Ensure all text in cards is visible */
.dark-mode .card,
.dark-mode .card-body,
.dark-mode .card-title,
.dark-mode .card-text {
    color: var(--text-primary) !important;
}

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

/* Play/Question Page Dark Mode Fixes */
.dark-mode #question-card {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

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

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

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

.dark-mode [style*="color: #666"],
.dark-mode [style*="color:#666"] {
    color: var(--text-secondary) !important;
}

.dark-mode [style*="background: #f8f9fa"],
.dark-mode [style*="background:#f8f9fa"],
.dark-mode [style*="background-color: #f8f9fa"],
.dark-mode [style*="background-color:#f8f9fa"] {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.dark-mode [style*="background: #d1ecf1"],
.dark-mode [style*="background:#d1ecf1"] {
    background: rgba(74, 110, 245, 0.15) !important;
}

.dark-mode [style*="color: #0c5460"],
.dark-mode [style*="color:#0c5460"] {
    color: var(--text-primary) !important;
}

.dark-mode [style*="background: #fff3cd"],
.dark-mode [style*="background:#fff3cd"] {
    background: rgba(255, 193, 7, 0.15) !important;
}

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

.dark-mode [style*="color: #5a6c90"],
.dark-mode [style*="color:#5a6c90"] {
    color: var(--text-secondary) !important;
}

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

/* Leaderboard Dark Mode Fixes */
.dark-mode .leaderboard-card,
.dark-mode .user-rank-summary,
.dark-mode .leaderboard-table-container,
.dark-mode .leaderboard-content {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

.dark-mode .rank-label,
.dark-mode .rank-value,
.dark-mode .rank-value .points-text,
.dark-mode .rank-value .out-of-total {
    color: var(--text-primary) !important;
}

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

.dark-mode .leaderboard-table thead {
    background: var(--bg-secondary) !important;
}

.dark-mode .leaderboard-table th {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .leaderboard-table td {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .leaderboard-row {
    background: var(--bg-primary) !important;
}

.dark-mode .leaderboard-row:hover {
    background: rgba(74, 110, 245, 0.1) !important;
}

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

.dark-mode .mobile-leaderboard-item {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .mobile-rank,
.dark-mode .mobile-username,
.dark-mode .mobile-score {
    color: var(--text-primary) !important;
}

.dark-mode .user-rank-summary {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

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

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

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

.dark-mode .leaderboard-card {
    background: var(--bg-primary) !important;
}

.dark-mode .table-wrapper {
    background: var(--bg-secondary) !important;
}

.dark-mode .leaderboard-table th {
    color: var(--text-secondary) !important;
}

.dark-mode .leaderboard-row {
    background: var(--bg-primary) !important;
}

.dark-mode .leaderboard-row:hover {
    background: rgba(74, 110, 245, 0.1) !important;
}

.dark-mode .rank-number {
    color: #6ab0ff !important;
}

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

.dark-mode .user-link:hover .username {
    color: #6ab0ff !important;
}

.dark-mode .score-badge {
    background: rgba(74, 110, 245, 0.15) !important;
    border-color: rgba(74, 110, 245, 0.3) !important;
}

.dark-mode .score-value {
    color: #6ab0ff !important;
}

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

.dark-mode .mobile-rank {
    background: rgba(74, 110, 245, 0.15) !important;
    color: #6ab0ff !important;
}

.dark-mode .mobile-rank-number {
    color: #6ab0ff !important;
}

.dark-mode .mobile-score-badge {
    background: rgba(74, 110, 245, 0.15) !important;
    border-color: rgba(74, 110, 245, 0.3) !important;
}

.dark-mode .mobile-score-value {
    color: #6ab0ff !important;
}

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

.dark-mode .pagination-container,
.dark-mode .pagination-nav,
.dark-mode .pagination-list {
    color: var(--text-primary) !important;
}

.dark-mode .pagination-link {
    color: var(--text-primary) !important;
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .pagination-link:hover {
    background: rgba(74, 110, 245, 0.1) !important;
    color: #6ab0ff !important;
}

.dark-mode .pagination-item.active .pagination-link {
    background: linear-gradient(135deg, #4a6ef5 0%, #8a63f2 100%) !important;
    color: white !important;
}

.dark-mode .pagination-item.disabled .pagination-link {
    color: var(--text-secondary) !important;
    opacity: 0.5 !important;
}

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

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

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

.dark-mode .user-rank-below-100 {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

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

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

/* Additional leaderboard element fixes */
.dark-mode .user-avatar {
    background: linear-gradient(135deg, #4a6ef5, #8a63f2) !important;
}

.dark-mode .mobile-avatar {
    background: linear-gradient(135deg, #4a6ef5, #8a63f2) !important;
}

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

/* Settings page dark mode */
.dark-mode .settings-card {
    background: var(--bg-primary) !important;
}

.dark-mode .settings-section h2 {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

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

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

/* Correct/Incorrect answer colors in dark mode */
.dark-mode [style*="color: #2ecc40"],
.dark-mode [style*="color:#2ecc40"],
.dark-mode [style*="color: #28a745"],
.dark-mode [style*="color:#28a745"] {
    color: #4ade80 !important; /* Bright green for dark mode */
}

.dark-mode [style*="color: #e74c3c"],
.dark-mode [style*="color:#e74c3c"],
.dark-mode [style*="color: #dc3545"],
.dark-mode [style*="color:#dc3545"] {
    color: #f87171 !important; /* Bright red for dark mode */
}

.dark-mode [style*="background: #28a745"],
.dark-mode [style*="background:#28a745"],
.dark-mode [style*="background-color: #28a745"],
.dark-mode [style*="background-color:#28a745"] {
    background-color: #22c55e !important; /* Bright green background for dark mode */
}

.dark-mode [style*="background: #dc3545"],
.dark-mode [style*="background:#dc3545"],
.dark-mode [style*="background-color: #dc3545"],
.dark-mode [style*="background-color:#dc3545"] {
    background-color: #ef4444 !important; /* Bright red background for dark mode */
}

.dark-mode .correct,
.dark-mode .question-card.correct .question-status,
.dark-mode .correct .question-status .correct {
    color: #4ade80 !important; /* Bright green for dark mode */
}

.dark-mode .incorrect,
.dark-mode .question-card.incorrect .question-status,
.dark-mode .incorrect .question-status .incorrect {
    color: #f87171 !important; /* Bright red for dark mode */
}

/* Question card correct/incorrect gradients in dark mode */
.dark-mode .question-card.correct::before {
    background: linear-gradient(90deg, #22c55e, #16a34a) !important;
}

.dark-mode .question-card.incorrect::before {
    background: linear-gradient(90deg, #ef4444, #dc2626) !important;
}

.dark-mode .question-card.correct .question-number {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
}

.dark-mode .question-card.incorrect .question-number {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

.dark-mode .below-100-label,
.dark-mode .below-100-rank,
.dark-mode .below-100-value,
.dark-mode .below-100-unit {
    color: var(--text-primary) !important;
}

/* Friends Page Dark Mode Fixes */
.dark-mode .friends-page {
    --friends-ink: var(--text-primary);
    --friends-muted: var(--text-secondary);
    --friends-line: var(--border-color);
    --friends-surface: rgba(30, 41, 59, 0.94);
    --friends-surface-soft: rgba(15, 23, 42, 0.7);
    --friends-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.dark-mode .friends-card,
.dark-mode .friend-card,
.dark-mode .request-item,
.dark-mode .friends-empty,
.dark-mode .referral-nudge {
    background-color: var(--friends-surface) !important;
    border-color: var(--friends-line) !important;
    color: var(--friends-ink) !important;
}

.dark-mode .referral-nudge {
    background:
        radial-gradient(circle at 100% 0%, rgba(16, 185, 129, 0.12), transparent 36%),
        linear-gradient(135deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.86)) !important;
}

.dark-mode .friend-card {
    background:
        linear-gradient(135deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.86)),
        radial-gradient(circle at 100% 0%, rgba(74, 110, 245, 0.18), transparent 38%) !important;
}

.dark-mode .friend-mini-stat,
.dark-mode .friends-copy-btn {
    background: rgba(74, 110, 245, 0.16) !important;
    border-color: rgba(129, 140, 248, 0.24) !important;
}

.dark-mode .friend-mini-value,
.dark-mode .friend-card-link,
.dark-mode .referral-nudge-link,
.dark-mode .friends-count-pill,
.dark-mode .friends-copy-btn {
    color: #c7d2fe !important;
}

.dark-mode .request-btn.decline,
.dark-mode .request-btn.cancel {
    background: rgba(127, 29, 29, 0.18) !important;
    border-color: rgba(248, 113, 113, 0.28) !important;
    color: #fecaca !important;
}

/* Additional leaderboard inline style overrides */
.dark-mode [style*="color: #333"],
.dark-mode [style*="color:#333"] {
    color: var(--text-primary) !important;
}

.dark-mode [style*="color: #888"],
.dark-mode [style*="color:#888"] {
    color: var(--text-secondary) !important;
}

.dark-mode [style*="background: #fff"],
.dark-mode [style*="background:#fff"],
.dark-mode [style*="background: white"],
.dark-mode [style*="background:white"] {
    background: var(--bg-primary) !important;
}

.dark-mode [style*="background: #f8faff"],
.dark-mode [style*="background:#f8faff"] {
    background: var(--bg-secondary) !important;
}

.dark-mode [style*="background: #f0f4ff"],
.dark-mode [style*="background:#f0f4ff"] {
    background: rgba(74, 110, 245, 0.1) !important;
}

.dark-mode [style*="background: #e9ecef"],
.dark-mode [style*="background:#e9ecef"] {
    background: var(--bg-secondary) !important;
}

.dark-mode [style*="background: transparent"] {
    background: transparent !important;
}

/* Leaderboard specific elements */
.dark-mode .leaderboard-header,
.dark-mode .leaderboard-title {
    color: var(--text-primary) !important;
}

.dark-mode .filter-tab,
.dark-mode .time-tab {
    color: var(--text-primary) !important;
}

.dark-mode .filter-tab.active,
.dark-mode .time-tab.active {
    background: linear-gradient(135deg, #4a6ef5 0%, #8a63f2 100%) !important;
    color: white !important;
}

.dark-mode .time-tab-select {
    background: linear-gradient(135deg, #4a6ef5 0%, #8a63f2 100%) !important;
    color: white !important;
}
.dark-mode .time-tab-select:hover {
    filter: brightness(1.1);
}

/* ===== App mode (Android / Google Play app) =====
   base.html tags <html class="app-mode"> when the site runs inside the Play Store
   app (TWA). Play policy forbids offering non-Play payment flows in the app, so
   anything that starts a Stripe purchase is marked .premium-cta and hidden here.
   .app-mode-only is the inverse: shown only inside the app. */
html.app-mode .premium-cta {
    display: none !important;
}
.app-mode-only {
    display: none;
}
html.app-mode .app-mode-only {
    display: block;
}