/* ============================================
   INTERVUAL GLOBAL REDESIGN + THEME SYSTEM
   Glassmorphism · Gradients · Modern Typography
   ============================================ */

/* ============================================
   1. CSS VARIABLES — DESIGN TOKENS
   ============================================ */
:root,
html[data-theme="light"] {
    --bg-primary: #f0f2f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f7f8fa;
    --bg-hover: rgba(59, 130, 246, 0.04);
    --bg-surface: #ffffff;
    --bg-glass: rgba(255, 255, 255, 0.7);
    --bg-glass-strong: rgba(255, 255, 255, 0.85);
    --bg-card: rgba(255, 255, 255, 0.75);
    --bg-card-alt: rgba(248, 250, 252, 0.8);
    --bg-card-solid: #ffffff;
    --bg-input: rgba(255, 255, 255, 0.9);
    --bg-hero: linear-gradient(135deg, #f0f2f5 0%, #e8ecf4 50%, #f0f2f5 100%);

    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text-placeholder: #94a3b8;

    --border-color: rgba(0, 0, 0, 0.06);
    --border-strong: rgba(0, 0, 0, 0.1);
    --border-input: rgba(0, 0, 0, 0.08);
    --border-glass: rgba(255, 255, 255, 0.5);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.05);
    --shadow-glow: 0 0 40px rgba(59, 130, 246, 0.08);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.02), inset 0 1px 0 rgba(255, 255, 255, 0.6);

    --accent-blue: #2563eb;
    --accent-cyan: #2563eb;
    --accent-gradient: #2563eb;
    --accent-gradient-hover: #1d4ed8;
    --accent-gradient-soft: rgba(37, 99, 235, 0.08);
    --accent-gradient-text: #2563eb;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;

    /* Public pages */
    --public-bg: #f0f2f5;
    --public-card-bg: rgba(255, 255, 255, 0.7);
    --public-card-border: rgba(0, 0, 0, 0.06);
    --public-text-heading: #0f172a;
    --public-text-body: #64748b;
    --public-text-muted: #94a3b8;
    --public-hero-bg: linear-gradient(180deg, #f0f2f5 0%, #e8ecf4 100%);
}

html[data-theme="dark"] {
    --bg-primary: #0a0e1a;
    --bg-secondary: rgba(15, 23, 42, 0.8);
    --bg-tertiary: rgba(30, 41, 59, 0.6);
    --bg-hover: rgba(59, 130, 246, 0.08);
    --bg-surface: rgba(15, 23, 42, 0.9);
    --bg-glass: rgba(15, 23, 42, 0.6);
    --bg-glass-strong: rgba(15, 23, 42, 0.85);
    --bg-card: rgba(15, 23, 42, 0.5);
    --bg-card-alt: rgba(30, 41, 59, 0.4);
    --bg-card-solid: #111827;
    --bg-input: rgba(15, 23, 42, 0.8);
    --bg-hero: linear-gradient(135deg, #0a0e1a 0%, #111827 50%, #0a0e1a 100%);

    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-placeholder: #475569;

    --border-color: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.1);
    --border-input: rgba(255, 255, 255, 0.08);
    --border-glass: rgba(255, 255, 255, 0.08);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 60px rgba(59, 130, 246, 0.15);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);

    --accent-blue: #3b82f6;
    --accent-cyan: #3b82f6;
    --accent-gradient: #3b82f6;
    --accent-gradient-hover: #60a5fa;
    --accent-gradient-soft: rgba(59, 130, 246, 0.12);
    --accent-gradient-text: #3b82f6;

    --public-bg: #0a0e1a;
    --public-card-bg: rgba(15, 23, 42, 0.5);
    --public-card-border: rgba(255, 255, 255, 0.06);
    --public-text-heading: #f1f5f9;
    --public-text-body: #94a3b8;
    --public-text-muted: #64748b;
    --public-hero-bg: linear-gradient(180deg, #0a0e1a 0%, #111827 100%);
}

/* ============================================
   2. GLOBAL BASE STYLES (REDESIGN)
   ============================================ */

html, html body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
}

/* Smooth theme transitions — only active during theme switch to avoid navigation flicker */
html.theme-transitioning {
    transition: background-color 0.4s ease;
}

html.theme-transitioning *:not(.shape):not(.brand-shape):not(.particle):not(.floating-shapes *):not(.confetti):not([class*="confetti-"]) {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Global Dark Theme - Autofill & Select/Dropdown */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #0f172a inset !important;
    -webkit-text-fill-color: #f1f5f9 !important;
    box-shadow: 0 0 0 30px #0f172a inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

html[data-theme="dark"] select {
    color-scheme: dark;
}

html[data-theme="dark"] select option {
    background: #1e293b;
    color: #f1f5f9;
}

/* ============================================
   3. GLOBAL ELEMENT REDESIGN
   ============================================ */

/* --- Cards (glassmorphism redesign) --- */
.stat-card,
.profile-card,
.chart-card,
.progress-card,
.tech-card,
.time-card,
.mastery-card,
.interview-card,
.session-card,
.recent-card,
.insights-card,
.form-card,
.readiness-card,
.section-card,
.detail-card,
.research-card,
.prep-card,
.calendar-card,
.export-card,
.job-card,
.resource-card,
.overview-card,
.metrics-card,
.performance-card,
.info-card,
.settings-card,
.recommendation-card,
.current-balance-card,
.package-card,
.device-card,
.skill-gap-card,
.record-item,
.stat-box,
.qa-item {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.stat-card:hover,
.profile-card:hover,
.interview-card:hover,
.session-card:hover,
.recent-card:hover,
.tech-card:hover,
.package-card:hover,
.job-card:hover,
.recommendation-card:hover,
.resource-card:hover,
.device-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lg), var(--shadow-glow) !important;
    border-color: rgba(59, 130, 246, 0.15) !important;
}

/* Card accent decorations */
.stat-card::before,
.profile-card.profile-hero::before,
.insights-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: var(--accent-gradient) !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
    opacity: 0.6 !important;
}

/* --- Page Containers --- */
.dashboard-container,
.analytics-container,
.history-container,
.profile-page,
.tokens-page,
.home-container,
.career-coach-container,
.company-research-container,
.preparation-hub-container,
.calendar-sync-container,
.export-container,
.job-search-container,
.form-page-container,
.screenshare-container,
.interview-details-container,
.mock-interview-container,
.admin-page,
.not-found-container,
.admin-loading {
    background: var(--bg-primary) !important;
    min-height: 100vh;
}

/* Grid background removed by request */
.dashboard-container::before,
.analytics-container::before,
.tokens-page::before {
    content: none !important;
    display: none !important;
    background-image: none !important;
}

html[data-theme="dark"] .dashboard-container::before,
html[data-theme="dark"] .analytics-container::before,
html[data-theme="dark"] .tokens-page::before {
    content: none !important;
    display: none !important;
    background-image: none !important;
}

/* --- Page Headers --- */
.page-header h1,
.admin-header h1,
.welcome-text h1,
.history-header h1,
.career-coach-content h1,
.tokens-container h1,
.header-text h1,
.detail-header h1 {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.page-subtitle,
.admin-header .subtitle,
.welcome-text p,
.header-subtitle {
    color: var(--text-muted) !important;
}

/* Gradient text for hero headings */
.welcome-text h1 {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: unset !important;
    background: none !important;
    font-size: 32px !important;
}

/* --- Section Headers --- */
.section-header h2,
.section-title h2,
.card-header h2,
.form-card h2,
.readiness-info h2,
.progress-section h2,
.history-section h2,
.sessions-section h2,
.dashboard-content h2,
.tokens-container h2,
.career-coach-content h2 {
    color: var(--text-primary) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

.section-header p,
.section-title p {
    color: var(--text-muted) !important;
}

/* --- Stat Values --- */
.stat-value,
.stat-value-lg,
.stat-number,
.stat-card .stat-content .stat-value,
.summary-stat-value {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
}

.stat-label,
.stat-label-sm,
.stat-detail,
.stat-change,
.stat-content h3,
.stat-card .stat-content h3,
.summary-stat-label {
    color: var(--text-muted) !important;
}

/* --- Stats Bar (History, Analytics, etc.) --- */
.summary-stats-bar,
.insights-card {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
    position: relative !important;
    overflow: hidden !important;
}

.summary-stats-bar::after,
.insights-card::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -20% !important;
    width: 200px !important;
    height: 200px !important;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%) !important;
    pointer-events: none !important;
}

.summary-divider,
.insight-divider {
    background: var(--border-color) !important;
}

.insight-label {
    color: var(--text-muted) !important;
}

.insight-value {
    color: var(--text-primary) !important;
}

/* --- Buttons Redesign --- */
.btn-primary,
.mode-button.real,
.mode-button.mock,
.btn-checkout,
.register-button,
.login-button,
.forgot-password-button,
.primary-button,
.view-button,
.continue-button,
.apply-btn,
.btn-create,
.btn-confirm,
.btn-start,
.service-modal-btn {
    background: #2563eb !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    color: white !important;
    font-weight: 600 !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-primary:hover:not(:disabled),
.mode-button.real:hover:not(:disabled),
.mode-button.mock:hover:not(:disabled),
.btn-checkout:hover:not(:disabled),
.register-button:hover:not(:disabled),
.login-button:hover:not(:disabled),
.forgot-password-button:hover:not(:disabled),
.primary-button:hover:not(:disabled),
.view-button:hover:not(:disabled),
.apply-btn:hover:not(:disabled),
.btn-create:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.1) !important;
}

.btn-secondary,
.btn-cancel,
.clear-btn,
.secondary-button {
    background: var(--bg-card) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}

.btn-secondary:hover,
.btn-cancel:hover,
.clear-btn:hover,
.secondary-button:hover {
    background: var(--bg-hover) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

.view-details-button,
.view-all-button,
.rec-action {
    background: var(--accent-gradient-soft) !important;
    border: 1px solid rgba(59, 130, 246, 0.15) !important;
    border-radius: var(--radius-md) !important;
    color: var(--accent-blue) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.view-details-button:hover,
.view-all-button:hover,
.rec-action:hover {
    background: rgba(59, 130, 246, 0.15) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    transform: translateX(2px) !important;
}

/* --- Form Elements Redesign --- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="tel"],
textarea,
select,
.form-input,
.form-textarea,
.modern-select {
    background: var(--bg-input) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    transition: all 0.2s ease !important;
}

input:focus,
textarea:focus,
select:focus,
.form-input:focus,
.form-textarea:focus,
.modern-select:focus {
    outline: none !important;
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), var(--shadow-sm) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-placeholder) !important;
}

.form-group label,
.form-field label,
.input-group label,
.label-row label,
.filter-group label {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
}

/* --- Tables Redesign --- */
table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

table th {
    background: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    letter-spacing: 0.05em !important;
    border-color: var(--border-color) !important;
}

table td {
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

table tbody tr {
    transition: all 0.2s ease !important;
}

table tbody tr:hover {
    background: var(--bg-hover) !important;
}

/* --- Modals Redesign --- */
.modal-backdrop,
.modal-overlay,
.cal-modal-overlay,
.ban-modal-overlay,
.service-modal-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(8px) !important;
}

.modal,
.modal-content,
.modal-dialog,
.cal-modal,
.ban-modal,
.service-modal,
.receipt-modal,
.success-modal {
    background: var(--bg-card-solid) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-xl) !important;
}

.modal h3,
.cal-modal h3,
.modal-content h2,
.modal-content h3 {
    color: var(--text-primary) !important;
}

.modal p,
.cal-modal p,
.modal-content p {
    color: var(--text-muted) !important;
}

.modal-footer,
.cal-modal-footer,
.modal-actions,
.card-actions {
    border-top-color: var(--border-color) !important;
}

/* --- Skeleton Loading Redesign --- */
.skeleton-icon,
.skeleton-text,
.skeleton-button,
.skeleton-coin,
.skeleton-button-lg,
.skeleton-chart,
.skeleton-select,
.skeleton-avatar {
    background: linear-gradient(90deg,
        var(--bg-tertiary) 25%,
        rgba(59, 130, 246, 0.06) 50%,
        var(--bg-tertiary) 75%) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.8s ease-in-out infinite !important;
    border-radius: var(--radius-sm) !important;
}

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

html[data-theme="dark"] .skeleton-icon,
html[data-theme="dark"] .skeleton-text,
html[data-theme="dark"] .skeleton-button,
html[data-theme="dark"] .skeleton-coin,
html[data-theme="dark"] .skeleton-button-lg,
html[data-theme="dark"] .skeleton-chart,
html[data-theme="dark"] .skeleton-select,
html[data-theme="dark"] .skeleton-avatar {
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.03) 25%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.03) 75%) !important;
    background-size: 200% 100% !important;
}

/* --- Badges Redesign --- */
.role-badge,
.popular-badge,
.active-badge,
.protected-badge {
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    backdrop-filter: blur(8px) !important;
}

.protected-badge {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
}

html[data-theme="dark"] .protected-badge {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

/* --- Period/Filter Selectors --- */
.period-btn {
    background: var(--bg-card) !important;
    backdrop-filter: blur(8px) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.period-btn.active {
    background: var(--accent-gradient) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25) !important;
}

.period-btn:hover:not(.active) {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: rgba(59, 130, 246, 0.15) !important;
}

/* --- Tabs --- */
.tab-btn {
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.tab-btn.active {
    border-color: var(--accent-blue) !important;
}

.form-container .tab-btn.active {
    color: #ffffff !important;
    background: #3b82f6 !important;
}

.tab-btn:hover:not(.active) {
    color: var(--text-primary) !important;
}

/* --- Filter Panel --- */
.filter-panel {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
}

.filter-toggle-btn {
    background: var(--bg-card) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-sm) !important;
}

.filter-toggle-btn:hover {
    background: var(--bg-hover) !important;
}

.filter-toggle-btn.active {
    background: var(--accent-gradient-soft) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: var(--accent-blue) !important;
}

/* --- Empty States --- */
.empty-state {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
}

.empty-state h2,
.empty-state h3 {
    color: var(--text-primary) !important;
}

.empty-state p {
    color: var(--text-muted) !important;
}

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

/* --- Toast Messages --- */
.toast.success,
.status-toast.success {
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #10b981 !important;
    backdrop-filter: blur(16px) !important;
    border-radius: var(--radius-md) !important;
}

.toast.error,
.status-toast.error {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
    backdrop-filter: blur(16px) !important;
    border-radius: var(--radius-md) !important;
}

/* --- Error / Warning Messages --- */
.error-message {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.15) !important;
    border-radius: var(--radius-md) !important;
    color: #ef4444 !important;
}

.lockout-message {
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}

.email-verify-message {
    background: rgba(59, 130, 246, 0.08) !important;
    border: 1px solid rgba(59, 130, 246, 0.15) !important;
    color: var(--accent-blue) !important;
}

.warning {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.06) !important;
}

/* --- Links --- */
.link-btn,
.link-text,
.forgot-link {
    color: var(--accent-blue) !important;
}

.signup-hint,
.signin-hint,
.login-hint {
    color: var(--text-muted) !important;
}

.signup-hint a,
.signin-hint a,
.login-hint a {
    color: var(--accent-blue) !important;
}

/* ============================================
   4. LANDING PAGE REDESIGN
   ============================================ */
.landing-page {
    background: var(--bg-primary) !important;
}

.hero-section {
    background: var(--bg-hero) !important;
}

html[data-theme="dark"] .hero-bg-gradient {
    background: radial-gradient(ellipse at center, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 40%, transparent 70%) !important;
}

html[data-theme="dark"] .hero-bg-grid {
    background-image:
        linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px) !important;
}

.hero-content h1 {
    color: var(--text-primary) !important;
}

.hero-content > p {
    color: var(--text-muted) !important;
}

.btn-secondary-lg {
    background: var(--bg-card) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
}

.btn-secondary-lg:hover {
    background: var(--bg-hover) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

/* Landing sections */
.trusted-section,
.use-cases-section,
.stats-section,
.how-it-works-section {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}

.testimonials-section,
.features-section {
    background: var(--bg-primary) !important;
}

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

.section-header p {
    color: var(--text-muted) !important;
}

/* Cards on landing */
.use-case-card,
.feature-card,
.testimonial-card,
.step-card {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.use-case-card:hover,
.feature-card:hover,
.testimonial-card:hover,
.step-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: rgba(59, 130, 246, 0.12) !important;
}

    .use-case-card.featured {
        background: var(--accent-gradient-soft) !important;
        border-color: rgba(14, 165, 233, 0.2) !important;
    }

.use-case-card h3,
.feature-card h3,
.step-card h3 {
    color: var(--text-primary) !important;
}

.use-case-card > p,
.feature-card p,
.step-card p {
    color: var(--text-muted) !important;
}

.use-case-features li {
    color: var(--text-secondary) !important;
    border-top-color: var(--border-color) !important;
}

.use-case-icon-inner,
.feature-icon-inner {
    background: var(--bg-card) !important;
}

.testimonial-card blockquote {
    color: var(--text-secondary) !important;
}

.author-info strong {
    color: var(--text-primary) !important;
}

.author-info span {
    color: var(--text-muted) !important;
}

    .testimonial-card.featured {
        border-color: rgba(14, 165, 233, 0.3) !important;
    }

.company-logo {
    color: var(--text-muted) !important;
}

.company-logo:hover {
    color: var(--text-primary) !important;
}

.trusted-label,
.stat-label {
    color: var(--text-muted) !important;
}

.stat-divider {
    background: linear-gradient(180deg, transparent, var(--border-color), transparent) !important;
}

.proof-text {
    color: var(--text-muted) !important;
}

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

html[data-theme="dark"] .avatar {
    border-color: var(--bg-primary) !important;
}

.step-connector {
    color: var(--text-placeholder) !important;
}

/* CTA section */
.cta-section .cta-bg {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-2xl) !important;
}

.cta-content h2 {
    color: var(--text-primary) !important;
}

.cta-content p {
    color: var(--text-muted) !important;
}

.cta-subtitle {
    color: var(--text-placeholder) !important;
}

/* Demo window must ALWAYS stay dark regardless of theme */
.demo-window {
    background: #1e1e1e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
}

.demo-header {
    background: #2d2d2d !important;
    border-bottom: 1px solid #3d3d3d !important;
}

.demo-content {
    background: #1e1e1e !important;
}

.message-avatar {
    background: #374151 !important;
    color: #9ca3af !important;
}

.message-bubble {
    background: #374151 !important;
    color: #e5e7eb !important;
}

.ai-text {
    color: #e5e7eb !important;
}

.demo-title {
    color: #9ca3af !important;
}

/* ============================================
   5. AUTH PAGES REDESIGN (Login, Register, ForgotPassword)
   ============================================ */
.login-page,
.register-page,
.forgot-password-page {
    background: var(--bg-primary) !important;
}

.login-form-panel,
.register-form-panel,
.forgot-password-form-panel {
    background: var(--bg-surface) !important;
}

.login-card h1,
.register-card h1,
.forgot-password-card h1 {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.login-card > p,
.register-card > p,
.forgot-password-card > p {
    color: var(--text-muted) !important;
}

.mobile-back-link {
    color: var(--text-muted) !important;
}

.mobile-back-link:hover {
    color: var(--text-primary) !important;
}

.divider span {
    color: var(--text-placeholder) !important;
    background: transparent !important;
}

.divider::before,
.divider::after {
    background: var(--border-color) !important;
}

.google-signin-btn,
.google-button {
    background: var(--bg-card) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.2s ease !important;
}

.google-signin-btn:hover,
.google-button:hover {
    background: var(--bg-hover) !important;
    box-shadow: var(--shadow-md) !important;
}

.password-toggle {
    color: var(--text-placeholder) !important;
}

.password-toggle:hover {
    color: var(--text-muted) !important;
}

/* Registration benefit */
.registration-benefit {
    background: var(--accent-gradient-soft) !important;
    border: 1px solid rgba(59, 130, 246, 0.12) !important;
    border-radius: var(--radius-lg) !important;
}

.code-notice {
    background: var(--accent-gradient-soft) !important;
    border: 1px solid rgba(59, 130, 246, 0.15) !important;
    border-radius: var(--radius-md) !important;
}

/* Ban modals */
.ban-modal {
    background: var(--bg-card-solid) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-2xl) !important;
}

.ban-modal h2 {
    color: var(--text-primary) !important;
}

.ban-description {
    color: var(--text-muted) !important;
}

.ban-reason {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
}

/* ForgotPassword brand */
.forgot-password-brand-panel,
.forgot-password-form-panel {
    background: var(--bg-surface) !important;
}

.back-to-home {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 0 !important;
}

.back-to-home:hover {
    background: transparent !important;
    border: none !important;
    color: white !important;
}

.form-icon,
.success-icon {
    background: var(--accent-gradient-soft) !important;
    border: 1px solid rgba(59, 130, 246, 0.12) !important;
    border-radius: var(--radius-lg) !important;
}

/* ============================================
   6. DASHBOARD REDESIGN
   ============================================ */

/* Interview mode cards */
.interview-mode-card {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-card) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.interview-mode-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0 !important;
    opacity: 0.8 !important;
}

    .interview-mode-card.real-interview::before {
        background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
    }

    .interview-mode-card.mock-interview::before {
        background: linear-gradient(90deg, #0ea5e9, #22d3ee) !important;
    }

.interview-mode-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--shadow-lg), var(--shadow-glow) !important;
}

.interview-mode-card h2 {
    color: var(--text-primary) !important;
}

.mode-description {
    color: var(--text-muted) !important;
}

.mode-features li {
    color: var(--text-secondary) !important;
}

.mode-badge {
    background: var(--accent-gradient-soft) !important;
    border: 1px solid rgba(59, 130, 246, 0.12) !important;
    color: var(--accent-blue) !important;
    border-radius: var(--radius-sm) !important;
}

.mode-badge.mock {
    background: rgba(147, 197, 253, 0.15) !important;
    border-color: rgba(147, 197, 253, 0.3) !important;
    color: #93c5fd !important;
}

.mode-button.mock {
    background: linear-gradient(135deg, #93c5fd, #a5d8ff) !important;
    color: #1e3a5f !important;
}

.mode-button.mock:hover:not(:disabled) {
    background: linear-gradient(135deg, #7dd3fc, #93c5fd) !important;
    box-shadow: 0 8px 24px rgba(147, 197, 253, 0.4) !important;
}

.mode-icon {
    background: var(--bg-tertiary) !important;
    border-radius: var(--radius-lg) !important;
}

/* Recommendations */
.recommendations-section {
    position: relative !important;
}

.recommendation-card {
    position: relative !important;
    overflow: hidden !important;
}

.recommendation-card::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    border-radius: 0 !important;
}

.recommendation-card.priority-high::before {
    background: #ef4444 !important;
}

.recommendation-card.priority-medium::before {
    background: #f59e0b !important;
}

.recommendation-card.priority-low::before {
    background: #10b981 !important;
}

.rec-content h3 {
    color: var(--text-primary) !important;
}

.rec-content p {
    color: var(--text-muted) !important;
}

/* Recent cards */
.recent-card {
    position: relative !important;
    overflow: hidden !important;
}

.recent-card.active-session-card {
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.recent-header h3 {
    color: var(--text-primary) !important;
}

.recent-date {
    color: var(--text-muted) !important;
}

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

.recent-details strong {
    color: var(--text-primary) !important;
}

/* Dashboard-specific */
.dashboard-header {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}

.user-menu-button {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.user-menu-button:hover {
    background: var(--bg-hover) !important;
}

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

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

.user-email {
    color: var(--text-muted) !important;
}

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

.dropdown-item {
    color: var(--text-secondary) !important;
}

.dropdown-item:hover {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #ef4444 !important;
}

.quick-start-tip {
    background: var(--accent-gradient-soft) !important;
    border: 1px solid rgba(59, 130, 246, 0.12) !important;
    border-radius: var(--radius-lg) !important;
    backdrop-filter: blur(8px) !important;
}

.tip-content strong {
    color: var(--text-primary) !important;
}

.tip-content span {
    color: var(--text-muted) !important;
}

/* ============================================
   7. PROFILE PAGE REDESIGN
   ============================================ */

.profile-info h1 {
    color: var(--text-primary) !important;
}

.profile-email {
    color: var(--text-muted) !important;
}

.info-item {
    border-bottom-color: var(--border-color) !important;
}

.info-label {
    color: var(--text-muted) !important;
}

.info-value {
    color: var(--text-primary) !important;
}

.skill-badge {
    background: var(--accent-gradient-soft) !important;
    border: 1px solid rgba(59, 130, 246, 0.12) !important;
    color: var(--accent-blue) !important;
    border-radius: var(--radius-sm) !important;
}

.skill-tag {
    background: var(--accent-gradient-soft) !important;
    border: 1px solid rgba(59, 130, 246, 0.12) !important;
    color: var(--accent-blue) !important;
    border-radius: var(--radius-sm) !important;
}

.edit-btn {
    color: var(--accent-blue) !important;
}

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

.danger-info p {
    color: var(--text-muted) !important;
}

.char-count {
    color: var(--text-muted) !important;
}

.checkbox-label span {
    color: var(--text-muted) !important;
}

.device-name {
    color: var(--text-primary) !important;
}

.device-info span {
    color: var(--text-muted) !important;
}

.avatar-edit-btn {
    border-color: var(--bg-surface) !important;
}

.mode-card {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
}

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

.mode-card p {
    color: var(--text-muted) !important;
}

/* ============================================
   8. ANALYTICS PAGE REDESIGN
   ============================================ */

.stat-box.primary {
    border-color: rgba(59, 130, 246, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
}

.stat-box.primary::after {
    content: '' !important;
    position: absolute !important;
    top: -50% !important;
    right: -50% !important;
    width: 120px !important;
    height: 120px !important;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%) !important;
    pointer-events: none !important;
}

.stat-box h3 {
    color: var(--text-muted) !important;
}

.stat-number {
    color: var(--text-primary) !important;
}

.metric-label,
.record-label,
.week-label,
.day-name,
.hour-time {
    color: var(--text-muted) !important;
}

.record-value {
    color: var(--text-primary) !important;
}

.tech-header h4 {
    color: var(--text-primary) !important;
}

.tech-count,
.tech-stats {
    color: var(--text-muted) !important;
}

.tech-bar,
.complexity-bar,
.bar-container {
    background: var(--bg-tertiary) !important;
    border-radius: 999px !important;
}

.time-insight {
    background: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
    border-radius: var(--radius-sm) !important;
}

.heatmap-legend {
    color: var(--text-muted) !important;
}

.bar-label,
.quality-label,
.level-name,
.list-item .item-label {
    color: var(--text-muted) !important;
}

.bar-value,
.quality-value,
.complexity-score,
.list-item .item-value {
    color: var(--text-primary) !important;
}

.stat-footer {
    border-top-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}

.subsection-title {
    color: var(--text-primary) !important;
}

/* ============================================
   9. INTERVIEW HISTORY REDESIGN
   ============================================ */

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

.date {
    color: var(--text-muted) !important;
}

.info-row .label {
    color: var(--text-muted) !important;
}

.info-row .value {
    color: var(--text-primary) !important;
}

.results-info {
    color: var(--text-muted) !important;
}

/* ============================================
   10. TOKENS PAGE REDESIGN
   ============================================ */

.balance-label {
    color: var(--text-muted) !important;
}

.balance-amount {
    font-weight: 800 !important;
    color: #3b82f6 !important;
    -webkit-text-fill-color: #3b82f6 !important;
}

.balance-amount.balance-low {
    color: #f87171 !important;
}

.balance-amount.balance-warning {
    color: #fbbf24 !important;
}

.balance-amount.balance-ok {
    color: #34d399 !important;
}

.token-count {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
}

.token-label,
.package-rate,
.package-description {
    color: var(--text-muted) !important;
}

    .package-card.selected {
        border-color: rgba(14, 165, 233, 0.4) !important;
        background: var(--accent-gradient-soft) !important;
    }

.package-card.popular {
    border-color: rgba(59, 130, 246, 0.3) !important;
}

.checkout-note {
    color: var(--text-muted) !important;
}

/* Transaction history */
.transaction-item {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
}

.tx-description {
    color: var(--text-secondary) !important;
}

.tx-date {
    color: var(--text-muted) !important;
}

/* Receipt modal */
.receipt-label {
    color: var(--text-muted) !important;
}

.receipt-value {
    color: var(--text-primary) !important;
}

.receipt-divider {
    background: var(--border-color) !important;
}

/* ============================================
   11. CAREER COACH REDESIGN
   ============================================ */

.back-link {
    background: var(--bg-card) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-sm) !important;
}

.back-link:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.page-header .header-icon {
    color: var(--accent-blue) !important;
}

.option-btn {
    background: var(--bg-card) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.2s ease !important;
}

.option-btn.active {
    background: var(--accent-gradient-soft) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: var(--accent-blue) !important;
}

.readiness-info h2 {
    color: var(--text-primary) !important;
}

.readiness-info p {
    color: var(--text-muted) !important;
}

.gap-skill {
    color: var(--text-primary) !important;
}

.gap-recommendation,
.gap-timeline {
    color: var(--text-muted) !important;
}

.path-step .step-content h4 {
    color: var(--text-primary) !important;
}

.path-step .step-content p {
    color: var(--text-muted) !important;
}

.resource-card h4 {
    color: var(--text-primary) !important;
}

.resource-card p {
    color: var(--text-muted) !important;
}

.resource-meta span {
    color: var(--text-muted) !important;
}

/* ============================================
   12. INTERVIEW SETUP REDESIGN
   ============================================ */

.header-section h1,
.header-section h2 {
    color: var(--text-primary) !important;
}

.subtitle {
    color: var(--text-muted) !important;
}

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

.role-card {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.role-card:hover {
    border-color: rgba(59, 130, 246, 0.3) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.role-card.selected {
    border-color: var(--accent-blue) !important;
    background: var(--accent-gradient-soft) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

.role-card h4 {
    color: var(--text-primary) !important;
}

.role-card p {
    color: var(--text-muted) !important;
}

.selection-card {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
}

.selection-card .card-header h3 {
    color: var(--text-primary) !important;
}

/* ============================================
   13. MOCK HISTORY REDESIGN
   ============================================ */

.session-info h4 {
    color: var(--text-primary) !important;
}

.session-meta span {
    color: var(--text-muted) !important;
}

.session-stat .stat-num {
    color: var(--text-primary) !important;
}

.session-stat .stat-desc {
    color: var(--text-muted) !important;
}

.action-btn.repeat,
.action-btn.view {
    background: var(--accent-gradient-soft) !important;
    color: var(--accent-blue) !important;
    border-radius: var(--radius-sm) !important;
}

.action-btn.delete {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #ef4444 !important;
    border-radius: var(--radius-sm) !important;
}

/* Chart */
.chart-container {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
}

.chart-container h3 {
    color: var(--text-primary) !important;
}

.chart-y-axis span,
.chart-x-axis span {
    color: var(--text-muted) !important;
}

/* ============================================
   14. INTERVIEW DETAILS REDESIGN
   ============================================ */

.detail-header h1 {
    color: var(--text-primary) !important;
}

.detail-meta span {
    color: var(--text-muted) !important;
}

.qa-q {
    color: var(--text-primary) !important;
}

.qa-a {
    color: var(--text-secondary) !important;
}

.qa-feedback {
    color: var(--text-muted) !important;
    background: var(--accent-gradient-soft) !important;
    border-radius: var(--radius-sm) !important;
}

/* ============================================
   15. MISC INTERNAL PAGES REDESIGN
   ============================================ */

/* Company Research */
.research-card h3 {
    color: var(--text-primary) !important;
}

.research-card p {
    color: var(--text-muted) !important;
}

/* Preparation Hub */
.prep-card h3 {
    color: var(--text-primary) !important;
}

.prep-card p {
    color: var(--text-muted) !important;
}

/* Job Search */
.job-card h3 {
    color: var(--text-primary) !important;
}

.job-card p {
    color: var(--text-muted) !important;
}

/* Account blocked, verify email, etc. */
.blocked-container,
.verify-container,
.confirm-container,
.forgot-container,
.reset-container,
.get-code-container {
    background: var(--bg-primary) !important;
}

.blocked-card,
.verify-card,
.confirm-card,
.forgot-card,
.reset-card,
.code-card {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
}

/* Active session banner */
.active-session-banner-container {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
}

/* Free service notice */
.free-service-notice {
    background: rgba(16, 185, 129, 0.06) !important;
    border: 1px solid rgba(16, 185, 129, 0.15) !important;
    border-radius: var(--radius-md) !important;
}

/* Onboarding */
.onboarding-card {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
}

/* Back button */
.back-btn {
    background: var(--bg-card) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-sm) !important;
}

.back-btn:hover {
    background: var(--bg-hover) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

/* ============================================
   16. PRICING PAGE REDESIGN
   ============================================ */

.pricing-page,
.about-page,
.legal-page {
    background: var(--public-bg) !important;
}

.pricing-hero h1,
.about-hero h1,
.legal-hero h1 {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.pricing-hero p,
.about-hero p,
.legal-hero .last-updated {
    color: var(--text-muted) !important;
}

/* Pricing cards */
.pricing-card {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-card) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pricing-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.pricing-card.popular {
    border-color: rgba(59, 130, 246, 0.3) !important;
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.1) !important;
}

.card-header h3,
.price-amount {
    color: var(--text-primary) !important;
}

.card-rate,
.card-description,
.card-features li {
    color: var(--text-muted) !important;
}

.btn-purchase {
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
}

.btn-purchase:hover {
    background: var(--bg-hover) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

/* Services on pricing */
.service-card {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
}

.service-name,
.service-cost {
    color: var(--text-primary) !important;
}

.service-description {
    color: var(--text-muted) !important;
}

/* About page glass cards */
.glass-card {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
}

.mission-card h2,
.value-card h3,
.contact-card h2 {
    color: var(--text-primary) !important;
}

.mission-card p,
.value-card p,
.contact-card p {
    color: var(--text-muted) !important;
}

/* Legal pages */
.legal-container {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
}

.legal-container h2,
.legal-container h3 {
    color: var(--text-primary) !important;
}

.legal-container p,
.legal-container li {
    color: var(--text-muted) !important;
}

/* FAQ accordion */
.faq-item {
    background: var(--bg-card) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
}

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

.faq-answer {
    color: var(--text-muted) !important;
}

/* ============================================
   17. ADMIN PAGES REDESIGN
   ============================================ */

.admin-header h1 {
    color: var(--text-primary) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.admin-header .subtitle {
    color: var(--text-muted) !important;
}

/* Admin cards */
.create-role-section,
.roles-section {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
}

.create-role-section h2,
.roles-section h2 {
    color: var(--text-primary) !important;
}

.role-card {
    background: var(--bg-tertiary) !important;
    border-radius: var(--radius-lg) !important;
}

.role-card:hover {
    background: var(--bg-hover) !important;
}

.role-name {
    color: var(--text-primary) !important;
}

.role-count {
    color: var(--text-muted) !important;
}

/* Admin search/filter */
.search-box {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
}

.search-box input {
    background: transparent !important;
    color: var(--text-primary) !important;
}

.search-box svg {
    color: var(--text-muted) !important;
}

/* Admin tables */
.users-table-container {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
    overflow: hidden !important;
}

.users-table th {
    background: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-color) !important;
}

.users-table td {
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.users-table tbody tr:hover {
    background: var(--bg-hover) !important;
}

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

.email {
    color: var(--text-muted) !important;
}

/* Pagination */
.pagination .page-info {
    color: var(--text-muted) !important;
}

.btn-page {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
}

/* Admin-specific cards */
.admin-content .panel,
.admin-content .toggle-card,
.admin-content .promo-card,
.admin-content .code-card,
.admin-content .settings-card,
.admin-content .detail-section {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
}

.admin-content .detail-section h3,
.toggle-card h3,
.promo-card h3,
.settings-card h3 {
    color: var(--text-primary) !important;
}

.toggle-card p,
.promo-card p,
.settings-card p {
    color: var(--text-muted) !important;
}

.admin-content .detail-row .label {
    color: var(--text-muted) !important;
}

.admin-content .detail-row .value {
    color: var(--text-primary) !important;
}

/* Admin tabs */
.admin-content .tabs-container {
    border-color: var(--border-color) !important;
}

.admin-content .tab {
    color: var(--text-muted) !important;
}

.admin-content .tab.active {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
}

/* Admin ban modal */
.ban-type-toggle .type-btn {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-sm) !important;
}

.ban-type-toggle .type-btn.active {
    background: var(--accent-gradient-soft) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: var(--accent-blue) !important;
}

.duration-hint {
    color: var(--text-muted) !important;
}

/* Admin filter rows */
.filter-row select {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
}

/* 404 page */
.not-found-content h1 {
    color: var(--text-primary) !important;
    font-weight: 900 !important;
}

.not-found-content p {
    color: var(--text-muted) !important;
}

.back-link-nav {
    background: var(--accent-gradient) !important;
    border-radius: var(--radius-md) !important;
    color: white !important;
}

/* ============================================
   18. MAINLAYOUT REDESIGN
   ============================================ */

.page {
    background: var(--bg-primary) !important;
}

/* ============================================
   19. HEADER/FOOTER REDESIGN (PUBLIC)
   ============================================ */

/* Public header in dark mode */
html[data-theme="dark"] .public-header {
    background: rgba(10, 14, 26, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .nav-link {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .nav-link:hover {
    color: #f1f5f9 !important;
}

/* Public footer in dark mode */
html[data-theme="dark"] .public-footer {
    background: #0a0e1a !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .footer-link {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .footer-link:hover {
    color: #f1f5f9 !important;
}

/* ============================================
   20. GLOBAL LOADING STATES
   ============================================ */

.loading-spinner {
    border-color: var(--border-color) !important;
    border-top-color: var(--accent-blue) !important;
}

.spinner-sm {
    border-color: rgba(255, 255, 255, 0.3) !important;
    border-top-color: white !important;
}

/* ============================================
   21. SCROLLBAR REDESIGN
   ============================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ============================================
   22. SELECTION / HIGHLIGHT
   ============================================ */

::selection {
    background: rgba(59, 130, 246, 0.2);
    color: inherit;
}

html[data-theme="dark"] ::selection {
    background: rgba(96, 165, 250, 0.3);
}

/* ============================================
   23. SERVICE MODAL
   ============================================ */

.service-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-gradient-soft) !important;
    border-radius: 50% !important;
    padding: 12px;
}

.service-modal h3 {
    color: var(--text-primary) !important;
}

.service-modal p {
    color: var(--text-muted) !important;
}

/* ============================================
   24. BACKGROUND TASK BANNER
   ============================================ */

.background-task-banner {
    backdrop-filter: blur(8px) !important;
}

/* ============================================
   25. GLOBAL SESSION BANNER
   ============================================ */

html[data-theme="dark"] .global-session-banner {
    background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
    border-color: transparent !important;
}

/* ============================================
   26. APP HEADER DARK MODE
   ============================================ */

html[data-theme="dark"] .app-header {
    background: var(--bg-primary) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .header-logo-text {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .header-nav-link {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .header-nav-link:hover {
    color: #f1f5f9 !important;
}

/* ============================================
   27. ADDITIONAL DARK-SPECIFIC OVERRIDES
   ============================================ */

/* Score colors should remain vivid in dark mode */
html[data-theme="dark"] .score.high,
html[data-theme="dark"] .score-value.high {
    color: #34d399 !important;
}

html[data-theme="dark"] .score.medium,
html[data-theme="dark"] .score-value.medium {
    color: #fbbf24 !important;
}

html[data-theme="dark"] .score.low,
html[data-theme="dark"] .score-value.low {
    color: #f87171 !important;
}

/* Gradient text — solid blue, no gradient */
html[data-theme="dark"] .gradient-text,
.gradient-text,
.text-gradient {
    color: var(--accent-blue) !important;
    -webkit-text-fill-color: var(--accent-blue) !important;
    background: none !important;
}

/* Warning modal dark */
html[data-theme="dark"] .warning-text {
    color: #f87171 !important;
}

html[data-theme="dark"] .modal-subtext {
    color: var(--text-muted) !important;
}

/* Admin dashboard quick action links */
.quick-action-card {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.quick-action-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: rgba(59, 130, 246, 0.15) !important;
}

.quick-action-card h3 {
    color: var(--text-primary) !important;
}

.quick-action-card p {
    color: var(--text-muted) !important;
}

/* Admin balance cards */
.balance-card {
    background: var(--bg-card) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
}

/* Admin session urgency classes */
html[data-theme="dark"] .session-card.urgency-low {
    border-color: rgba(16, 185, 129, 0.3) !important;
}

html[data-theme="dark"] .session-card.urgency-medium {
    border-color: rgba(245, 158, 11, 0.3) !important;
}

html[data-theme="dark"] .session-card.urgency-high {
    border-color: rgba(239, 68, 68, 0.3) !important;
}

/* ============================================
   28. COMPREHENSIVE DARK MODE FIX
   Fixes all remaining hardcoded light colors
   ============================================ */

/* --- Auth pages: form panels, inputs, dividers --- */
html[data-theme="dark"] .login-form-panel,
html[data-theme="dark"] .register-form-panel,
html[data-theme="dark"] .forgot-password-form-panel {
    background: transparent !important;
}

html[data-theme="dark"] .login-card h1,
html[data-theme="dark"] .register-card h1 {
    color: var(--text-primary) !important;
    background: none !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

html[data-theme="dark"] .login-card > p,
html[data-theme="dark"] .register-card > p {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .input-group label,
html[data-theme="dark"] .form-group label {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .form-input {
    background: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .form-input:focus {
    background: var(--bg-secondary) !important;
    border-color: var(--accent-blue) !important;
}

html[data-theme="dark"] .form-input::placeholder {
    color: var(--text-placeholder) !important;
}

html[data-theme="dark"] .divider {
    color: var(--text-placeholder) !important;
}

html[data-theme="dark"] .divider span {
    color: var(--text-placeholder) !important;
    background: transparent !important;
}

html[data-theme="dark"] .divider::before,
html[data-theme="dark"] .divider::after {
    background: var(--border-color) !important;
}

html[data-theme="dark"] .google-signin-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .google-signin-btn:hover:not(:disabled) {
    background: var(--bg-hover) !important;
    border-color: var(--border-strong) !important;
}

html[data-theme="dark"] .mobile-back-link {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .mobile-back-link:hover {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .password-toggle {
    color: var(--text-placeholder) !important;
}

html[data-theme="dark"] .password-toggle:hover {
    color: var(--text-primary) !important;
}

/* Registration benefit & code notice */
html[data-theme="dark"] .registration-benefit {
    background: rgba(59, 130, 246, 0.08) !important;
    border-color: rgba(59, 130, 246, 0.15) !important;
}

html[data-theme="dark"] .benefit-title,
html[data-theme="dark"] .benefit-subtitle {
    color: var(--text-secondary) !important;
}

/* --- Dashboard: welcome text, containers, bg --- */
html[data-theme="dark"] .dashboard-container {
    background: var(--bg-primary) !important;
}

html[data-theme="dark"] .welcome-text h1 {
    color: var(--text-primary) !important;
    background: none !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

html[data-theme="dark"] .welcome-text p {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .dashboard-header {
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .dashboard-logo-text {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    background: none !important;
}

html[data-theme="dark"] .user-menu-button {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .user-dropdown {
    background: var(--bg-card-solid) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .user-name {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .user-email {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .dropdown-divider {
    background: var(--border-color) !important;
}

html[data-theme="dark"] .dropdown-item {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .stat-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .stat-content h3 {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .stat-value {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .stat-change {
    color: var(--text-muted) !important;
}

/* --- Analytics: all inline white backgrounds --- */
html[data-theme="dark"] .analytics-container {
    background: var(--bg-primary) !important;
}

html[data-theme="dark"] .page-header-text h1,
html[data-theme="dark"] .header h1 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .stat-box {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .stat-box.primary {
    background: rgba(59, 130, 246, 0.06) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

html[data-theme="dark"] .stat-box h3 {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .stat-number {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .stat-detail {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .progress-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .progress-card h3 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .trend-metric {
    background: var(--bg-tertiary) !important;
}

html[data-theme="dark"] .metric-label {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .record-item {
    background: var(--bg-tertiary) !important;
}

html[data-theme="dark"] .record-label {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .record-value {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .tech-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .tech-header h4 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .tech-count,
html[data-theme="dark"] .tech-stats {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .tech-bar {
    background: var(--bg-tertiary) !important;
}

html[data-theme="dark"] .time-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .time-card h3 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .time-insight {
    background: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .hour-time,
html[data-theme="dark"] .week-label,
html[data-theme="dark"] .day-name {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .heatmap-legend {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .chart-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .chart-card h3 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .bar-label,
html[data-theme="dark"] .quality-label,
html[data-theme="dark"] .level-name {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .bar-value,
html[data-theme="dark"] .quality-value,
html[data-theme="dark"] .complexity-score {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .subsection-title {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .stat-footer {
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .insights-card {
    background: rgba(59, 130, 246, 0.06) !important;
    border-color: rgba(59, 130, 246, 0.12) !important;
}

html[data-theme="dark"] .insight-icon {
    background: var(--bg-secondary) !important;
}

html[data-theme="dark"] .insight-label {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .insight-value {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .insight-divider {
    background: rgba(59, 130, 246, 0.15) !important;
}

html[data-theme="dark"] .period-selector {
    background: var(--bg-secondary) !important;
}

html[data-theme="dark"] .section-header h2 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .section-subtitle {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .weekday-chart {
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.02) 100%) !important;
}

html[data-theme="dark"] .legend-gradient {
    background: linear-gradient(90deg, rgba(255,255,255,0.05), #3b82f6) !important;
}

html[data-theme="dark"] .complexity-bar,
html[data-theme="dark"] .bar-container {
    background: var(--bg-tertiary) !important;
}

/* --- Job Search: full page white fix --- */
html[data-theme="dark"] .job-search-page {
    background: var(--bg-primary) !important;
}

html[data-theme="dark"] .job-search-page .page-content {
    background: var(--bg-primary) !important;
}

html[data-theme="dark"] .job-search-page .header-icon {
    background: rgba(59, 130, 246, 0.15) !important;
}

html[data-theme="dark"] .job-search-page .page-header h1 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .job-search-page .subtitle {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .job-search-page .tabs {
    background: var(--bg-secondary) !important;
    box-shadow: var(--shadow-sm) !important;
}

html[data-theme="dark"] .job-search-page .tab {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .job-search-page .tab:hover {
    background: var(--bg-hover) !important;
}

html[data-theme="dark"] .job-search-page .tab.active {
    background: #2563eb !important;
    color: white !important;
}

html[data-theme="dark"] .job-search-page .tab-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .job-search-page .search-form h2 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .job-search-page .form-group label {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .job-search-page .form-group input,
html[data-theme="dark"] .job-search-page .form-group select,
html[data-theme="dark"] .job-search-page .form-group textarea {
    background: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .job-search-page .job-card {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .job-search-page .job-main h3 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .job-search-page .job-main .company {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .job-search-page .job-description {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .job-search-page .meta-item {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .job-search-page .results-section {
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .job-search-page .results-section h2 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .job-search-page .price-info {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .job-search-page .profile-form {
    background: var(--bg-tertiary) !important;
}

html[data-theme="dark"] .job-search-page .profile-form h3 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .job-search-page .profile-card {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .job-search-page .profile-card h3 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .job-search-page .profile-card .job-title,
html[data-theme="dark"] .job-search-page .profile-card .experience {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .job-search-page .history-item {
    background: var(--bg-tertiary) !important;
}

html[data-theme="dark"] .job-search-page .history-item:hover {
    background: var(--bg-hover) !important;
}

html[data-theme="dark"] .job-search-page .history-query {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .job-search-page .history-meta {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .job-search-page .coverletter-card {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .job-search-page .letter-header h3 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .job-search-page .letter-header .company {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .job-search-page .letter-preview {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .job-search-page .letter-meta {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .job-search-page .empty-state {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .job-search-page .modal-content {
    background: var(--bg-card-solid) !important;
}

html[data-theme="dark"] .job-search-page .letter-content {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .job-search-page .btn-cancel {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .job-search-page .section-header h2 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .job-search-page .skill-tag {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #60a5fa !important;
}

html[data-theme="dark"] .job-search-page .meta-item.type {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #60a5fa !important;
}

html[data-theme="dark"] .job-search-page .meta-item.platform {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #93c5fd !important;
}

/* --- Profile page dark mode --- */
html[data-theme="dark"] .profile-page {
    background: var(--bg-primary) !important;
}

html[data-theme="dark"] .profile-page .page-header h1 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .profile-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .profile-card.default {
    border-color: rgba(59, 130, 246, 0.3) !important;
}

html[data-theme="dark"] .card-header h2 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .avatar-placeholder {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

/* --- Practice Interview: inputs and text visibility --- */
html[data-theme="dark"] .form-page-container {
    background: var(--bg-primary) !important;
}

html[data-theme="dark"] .form-page-container .form-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .form-page-container h1,
html[data-theme="dark"] .form-page-container h2,
html[data-theme="dark"] .form-page-container h3 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .form-page-container p,
html[data-theme="dark"] .form-page-container .subtitle {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .form-page-container label {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .form-page-container input,
html[data-theme="dark"] .form-page-container select,
html[data-theme="dark"] .form-page-container textarea {
    background: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .selection-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .role-card h4 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .role-card p {
    color: var(--text-muted) !important;
}

/* --- Mock Interview containers --- */
html[data-theme="dark"] .mock-interview-container {
    background: var(--bg-primary) !important;
}

html[data-theme="dark"] .mock-interview-container h1,
html[data-theme="dark"] .mock-interview-container h2,
html[data-theme="dark"] .mock-interview-container h3 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .mock-interview-container p {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .mock-interview-container label {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .mock-interview-container input,
html[data-theme="dark"] .mock-interview-container select,
html[data-theme="dark"] .mock-interview-container textarea {
    background: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

/* --- Screenshare / Interview containers --- */
html[data-theme="dark"] .screenshare-container {
    background: var(--bg-primary) !important;
}

html[data-theme="dark"] .interview-details-container {
    background: var(--bg-primary) !important;
}

/* --- Tokens page --- */
html[data-theme="dark"] .tokens-page {
    background: var(--bg-primary) !important;
}

html[data-theme="dark"] .tokens-page h1,
html[data-theme="dark"] .tokens-page h2 {
    color: var(--text-primary) !important;
}

/* --- All remaining white background containers --- */
html[data-theme="dark"] .history-container {
    background: var(--bg-primary) !important;
}

html[data-theme="dark"] .career-coach-container {
    background: var(--bg-primary) !important;
}

html[data-theme="dark"] .company-research-container {
    background: var(--bg-primary) !important;
}

html[data-theme="dark"] .preparation-hub-container {
    background: var(--bg-primary) !important;
}

html[data-theme="dark"] .calendar-sync-container {
    background: var(--bg-primary) !important;
}

html[data-theme="dark"] .export-container {
    background: var(--bg-primary) !important;
}

/* --- Error toast dark --- */
html[data-theme="dark"] .error-toast {
    background: #991b1b !important;
}

/* ============================================
   29. FINAL DARK MODE CONSISTENCY FIXES
   ============================================ */

html[data-theme="dark"] .welcome-text h1,
html[data-theme="dark"] .header-text h1,
html[data-theme="dark"] .summary-stat-value,
html[data-theme="dark"] .profile-stats .stat-value {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    text-shadow: none !important;
}

html[data-theme="dark"] .menu-item.logout {
    color: #f87171 !important;
}

html[data-theme="dark"] .menu-item.logout:hover {
    background: rgba(239, 68, 68, 0.14) !important;
    color: #fca5a5 !important;
}

.menu-item.admin-link {
    color: #7c3aed !important;
}

.menu-item.admin-link:hover {
    background: rgba(124, 58, 237, 0.1) !important;
    color: #6d28d9 !important;
}

html[data-theme="dark"] .menu-item.admin-link {
    color: #a78bfa !important;
}

html[data-theme="dark"] .menu-item.admin-link:hover {
    background: rgba(167, 139, 250, 0.18) !important;
    color: #c4b5fd !important;
}

html[data-theme="dark"] .mock-interview-container .scoring-mode-option,
html[data-theme="dark"] .mock-interview-container .voice-option,
html[data-theme="dark"] .mock-interview-container .timer-option,
html[data-theme="dark"] .mock-interview-container .score-breakdown,
html[data-theme="dark"] .mock-interview-container .results-card,
html[data-theme="dark"] .mock-interview-container .recommendations-card,
html[data-theme="dark"] .mock-interview-container .recommendation-item,
html[data-theme="dark"] .mock-interview-container .comparison-card,
html[data-theme="dark"] .mock-interview-container .benchmark-section {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .mock-interview-container .option-name,
html[data-theme="dark"] .mock-interview-container .option-description,
html[data-theme="dark"] .mock-interview-container .results-card li,
html[data-theme="dark"] .mock-interview-container .recommendation-item,
html[data-theme="dark"] .mock-interview-container .breakdown-score,
html[data-theme="dark"] .mock-interview-container .breakdown-label {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .mock-interview-container .input-container {
    background: var(--bg-secondary) !important;
    border-top-color: var(--border-color) !important;
}

html[data-theme="dark"] .mock-interview-container .answer-input {
    background: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .form-container,
html[data-theme="dark"] .form-container .form-content,
html[data-theme="dark"] .form-container .form-section,
html[data-theme="dark"] .form-container .tabs-nav,
html[data-theme="dark"] .form-container .form-header {
    background: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .form-container .tab-btn:not(.active),
html[data-theme="dark"] .form-container .tab-btn.locked,
html[data-theme="dark"] .form-container .back-nav {
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
    background: var(--bg-secondary) !important;
}

html[data-theme="dark"] .form-container .form-input,
html[data-theme="dark"] .form-container input,
html[data-theme="dark"] .form-container select,
html[data-theme="dark"] .form-container textarea {
    background: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .form-container .modal-dialog,
html[data-theme="dark"] .form-container .review-modal-body,
html[data-theme="dark"] .form-container .review-grid-enhanced .review-item,
html[data-theme="dark"] .form-container .modal-dialog.insufficient-tokens,
html[data-theme="dark"] .form-container .itm-balance-info {
    background: var(--bg-card-solid) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .form-container .review-label,
html[data-theme="dark"] .form-container .itm-balance-row,
html[data-theme="dark"] .form-container .modal-dialog p {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .form-container .review-value,
html[data-theme="dark"] .form-container .itm-value,
html[data-theme="dark"] .form-container .modal-dialog h3 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .form-container .itm-btn-cancel {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .profile-page .profile-stats .stat-item {
    background: transparent !important;
    border: none !important;
}
html[data-theme="dark"] .profile-page .stat-box {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
}

html[data-theme="dark"] .profile-page .topup-btn {
    color: var(--accent-blue) !important;
    background: rgba(59, 130, 246, 0.14) !important;
}

html[data-theme="dark"] .profile-page .form-input,
html[data-theme="dark"] .profile-page .form-textarea {
    background: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .tokens-page .history-section,
html[data-theme="dark"] .tokens-page .transaction-item,
html[data-theme="dark"] .tokens-page .modal-content {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

html[data-theme="dark"] .tokens-page .tx-description,
html[data-theme="dark"] .tokens-page .tx-date {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .tokens-page .view-all-link {
    color: #93c5fd !important;
}

/* ============================================
   30. EXHAUSTIVE DARK MODE PATCH — ALL PAGES
   ============================================ */

/* --- MockInterview: scoring, voice, timer, results, recommendations --- */
html[data-theme="dark"] .scoring-mode-option {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .scoring-mode-option:hover {
    background: var(--bg-hover) !important;
}
html[data-theme="dark"] .scoring-mode-option.selected {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: #3b82f6 !important;
}
html[data-theme="dark"] .option-name {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .option-description {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .option-badge.recommended {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}
html[data-theme="dark"] .option-badge.default {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
}

html[data-theme="dark"] .timer-option {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .timer-option:hover {
    border-color: #f59e0b !important;
}
html[data-theme="dark"] .timer-option-name {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .timer-option-hint {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .timer-setting {
    background: rgba(245, 158, 11, 0.08) !important;
    border-color: rgba(245, 158, 11, 0.2) !important;
}
html[data-theme="dark"] .timer-setting label {
    color: #fbbf24 !important;
}
html[data-theme="dark"] .timer-setting .form-input.compact {
    background: var(--bg-input) !important;
}

html[data-theme="dark"] .voice-section {
    background: rgba(59, 130, 246, 0.06) !important;
    border-color: rgba(59, 130, 246, 0.15) !important;
}
html[data-theme="dark"] .voice-option {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .voice-option:hover {
    border-color: #3b82f6 !important;
}
html[data-theme="dark"] .voice-option-name {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .voice-option-hint {
    color: var(--text-muted) !important;
}

/* Results complete cards */
html[data-theme="dark"] .results-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .results-card h3 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .results-card li {
    color: var(--text-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}
html[data-theme="dark"] .recommendations-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .recommendations-card h3 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .recommendation-item {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .comparison-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .comparison-label {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .benchmark-section {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .benchmark-section h3 {
    color: var(--text-primary) !important;
}

/* Score breakdown */
html[data-theme="dark"] .score-breakdown {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .breakdown-label {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .breakdown-score {
    color: var(--text-primary) !important;
}

/* --- InterviewHistory: summary-stat-value gradient text fix --- */
html[data-theme="dark"] .summary-stat-value {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

/* --- Dashboard: welcome box border/background artifact --- */
html[data-theme="dark"] .welcome-section,
html[data-theme="dark"] .welcome-text,
html[data-theme="dark"] .greeting-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove grid/mesh backgrounds on all containers in dark mode */
html[data-theme="dark"] .dashboard-container::before,
html[data-theme="dark"] .analytics-container::before,
html[data-theme="dark"] .tokens-page::before,
html[data-theme="dark"] .history-container::before,
html[data-theme="dark"] .profile-page::before,
html[data-theme="dark"] .job-search-page::before,
html[data-theme="dark"] .mock-interview-container::before,
html[data-theme="dark"] .form-page-container::before,
html[data-theme="dark"] .form-container::before {
    content: none !important;
    display: none !important;
}

/* --- Profile: stats boxes artifact --- */
html[data-theme="dark"] .profile-stats .stat-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .profile-stats .stat-value {
    color: var(--text-primary) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}
html[data-theme="dark"] .profile-stats .stat-label {
    color: var(--text-muted) !important;
}

/* Profile Security inputs */
html[data-theme="dark"] .security-section input,
html[data-theme="dark"] .security-section .form-input {
    background: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}

/* Profile Top Up button fix */
html[data-theme="dark"] .topup-btn,
html[data-theme="dark"] .top-up-btn {
    color: #60a5fa !important;
    background: rgba(59, 130, 246, 0.12) !important;
}

/* --- Tokens: transaction history --- */
html[data-theme="dark"] .history-section {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .transaction-item {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .transaction-item:hover {
    background: var(--bg-hover) !important;
}
html[data-theme="dark"] .tx-description,
html[data-theme="dark"] .tx-date,
html[data-theme="dark"] .tx-meta {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .tx-amount {
    color: var(--text-primary);
}
html[data-theme="dark"] .tx-amount.positive {
    color: #34d399 !important;
}
html[data-theme="dark"] .tx-amount.negative {
    color: #f87171 !important;
}
html[data-theme="dark"] .package-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .package-card.selected {
    border-color: #60a5fa !important;
    background: rgba(59, 130, 246, 0.08) !important;
}
html[data-theme="dark"] .package-card h3,
html[data-theme="dark"] .package-name {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .package-price,
html[data-theme="dark"] .package-amount {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .package-description {
    color: var(--text-muted) !important;
}

/* --- Admin: all card backgrounds --- */
html[data-theme="dark"] .admin-page,
html[data-theme="dark"] .admin-container {
    background: var(--bg-primary) !important;
}
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .admin-stat-card,
html[data-theme="dark"] .detail-card,
html[data-theme="dark"] .info-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .admin-card h2,
html[data-theme="dark"] .admin-card h3,
html[data-theme="dark"] .detail-card h2,
html[data-theme="dark"] .detail-card h3 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .admin-table th {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .admin-table td {
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .admin-table tr:hover td {
    background: var(--bg-hover) !important;
}
html[data-theme="dark"] .selected-transaction-info {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .detail-label {
    color: var(--text-muted) !important;
}

/* --- Form page (interview config/review) --- */
html[data-theme="dark"] .form-container .category-card,
html[data-theme="dark"] .form-container .config-card,
html[data-theme="dark"] .form-container .category-item {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .form-container .category-name,
html[data-theme="dark"] .form-container .config-label {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .form-container .category-description,
html[data-theme="dark"] .form-container .config-description {
    color: var(--text-muted) !important;
}

/* --- Universal: any remaining white backgrounds and dark text --- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .section-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Universal modal fix */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-dialog,
html[data-theme="dark"] .cal-modal,
html[data-theme="dark"] .cal-modal-body {
    background: var(--bg-card-solid) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .cal-modal-header,
html[data-theme="dark"] .cal-modal-footer {
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .cal-modal-header h2 {
    color: var(--text-primary) !important;
}

/* Universal input fix — catch ALL remaining inputs */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-placeholder) !important;
}

/* Accent checkbox/radio colors */
html[data-theme="dark"] input[type="checkbox"],
html[data-theme="dark"] input[type="radio"] {
    accent-color: #60a5fa !important;
}

/* Universal label fix */
html[data-theme="dark"] label {
    color: var(--text-secondary) !important;
}

/* Button cancel/secondary variants */
html[data-theme="dark"] .btn-cancel,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-outline {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Methodology tips */
html[data-theme="dark"] .methodology-tips-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .methodology-tips-card h3 {
    color: var(--text-primary) !important;
}

/* Pricing: service card description alignment */
html[data-theme="dark"] .service-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .service-card h3 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .service-description {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .service-price {
    color: var(--text-primary) !important;
}

/* ============================================
   31. TARGETED DARK MODE FIXES
   Auth inputs, page-header boxes, dividers
   ============================================ */

/* --- Remove "dark square" background from page-header everywhere --- */
html[data-theme="dark"] .page-header,
html[data-theme="dark"] .content-header {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* --- Auth pages: full page background --- */
html[data-theme="dark"] .login-page,
html[data-theme="dark"] .register-page,
html[data-theme="dark"] .forgot-password-page,
html[data-theme="dark"] .reset-password-page {
    background: var(--bg-primary) !important;
}

/* --- Auth form panels --- */
html[data-theme="dark"] .login-form-panel,
html[data-theme="dark"] .register-form-panel,
html[data-theme="dark"] .forgot-password-form-panel,
html[data-theme="dark"] .reset-form-panel {
    background: transparent !important;
}

/* --- Auth inputs: force dark background always (not just on focus) --- */
html[data-theme="dark"] .login-card .form-input,
html[data-theme="dark"] .register-card .form-input,
html[data-theme="dark"] .forgot-password-card .form-input,
html[data-theme="dark"] .reset-card .form-input,
html[data-theme="dark"] .login-card input,
html[data-theme="dark"] .register-card input,
html[data-theme="dark"] .forgot-password-card input,
html[data-theme="dark"] .reset-card input {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .login-card .form-input::placeholder,
html[data-theme="dark"] .register-card .form-input::placeholder,
html[data-theme="dark"] .login-card input::placeholder,
html[data-theme="dark"] .register-card input::placeholder {
    color: var(--text-placeholder) !important;
}

html[data-theme="dark"] .login-card .form-input:focus,
html[data-theme="dark"] .register-card .form-input:focus,
html[data-theme="dark"] .login-card input:focus,
html[data-theme="dark"] .register-card input:focus {
    background: var(--bg-tertiary) !important;
    border-color: var(--accent-blue) !important;
}

/* --- "or sign in with email" divider: make visible --- */
html[data-theme="dark"] .divider {
    color: rgba(255, 255, 255, 0.6) !important;
}
html[data-theme="dark"] .divider span {
    color: rgba(255, 255, 255, 0.6) !important;
    background: transparent !important;
}
html[data-theme="dark"] .divider::before,
html[data-theme="dark"] .divider::after {
    background: var(--border-color) !important;
}

/* --- Auth card text --- */
html[data-theme="dark"] .login-card h1,
html[data-theme="dark"] .register-card h1 {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    background: none !important;
}
html[data-theme="dark"] .login-card > p,
html[data-theme="dark"] .register-card > p {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .input-group label {
    color: var(--text-secondary) !important;
}
html[data-theme="dark"] .mobile-back-link {
    color: var(--text-muted) !important;
}

/* --- Google button in dark mode --- */
html[data-theme="dark"] .google-signin-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .google-signin-btn:hover:not(:disabled) {
    background: var(--bg-tertiary) !important;
}

/* --- Password toggle button --- */
html[data-theme="dark"] .password-toggle {
    color: var(--text-muted) !important;
}

/* --- Summary stats bar (Interview History) --- */
html[data-theme="dark"] .summary-stats-bar {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .summary-stat-value {
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    background: none !important;
}
html[data-theme="dark"] .summary-stat-label {
    color: var(--text-muted) !important;
}
html[data-theme="dark"] .summary-divider {
    background: var(--border-color) !important;
}

/* --- Insights card (Analytics) --- */
html[data-theme="dark"] .insights-card {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}
html[data-theme="dark"] .insight-icon {
    background: var(--bg-tertiary) !important;
}

/* --- Header text in dark mode --- */
html[data-theme="dark"] .header-text h1,
html[data-theme="dark"] .page-header-text h1 {
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .header-subtitle,
html[data-theme="dark"] .page-subtitle {
    color: var(--text-muted) !important;
}

/* --- Filter button (Interview History) --- */
html[data-theme="dark"] .filter-toggle-btn {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}
html[data-theme="dark"] .filter-toggle-btn.active {
    background: rgba(37, 99, 235, 0.15) !important;
    border-color: var(--accent-blue) !important;
    color: var(--accent-blue) !important;
}
html[data-theme="dark"] .filter-panel {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* --- History/Analytics container backgrounds --- */
html[data-theme="dark"] .history-container,
html[data-theme="dark"] .analytics-container {
    background: var(--bg-primary) !important;
}

/* --- Auth: forgot-link, register-link, sign-in-link --- */
html[data-theme="dark"] .forgot-link {
    color: var(--accent-blue) !important;
}
html[data-theme="dark"] .register-link a,
html[data-theme="dark"] .signin-link a {
    color: var(--accent-blue) !important;
}
html[data-theme="dark"] .register-link,
html[data-theme="dark"] .signin-link {
    color: var(--text-muted) !important;
}

/* ============================================
   FORM VALIDATION VISUAL FEEDBACK
   ============================================ */

/* Invalid state - red border + icon */
.form-input.invalid,
.form-textarea.invalid,
input.invalid,
textarea.invalid,
select.invalid,
.form-input:invalid:not(:placeholder-shown),
.form-textarea:invalid:not(:placeholder-shown) {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Valid state - green border after user interaction */
.form-input.valid,
.form-textarea.valid,
input.valid,
textarea.valid {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

/* Validation error message styling */
.validation-message,
.field-validation-error {
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.validation-message::before,
.field-validation-error::before {
    content: '';
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ef4444'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Validation summary */
.validation-errors {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #ef4444;
    font-size: 13px;
}

.validation-errors ul {
    margin: 0;
    padding-left: 16px;
}

/* Focus styles for accessibility */
*:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Dark mode validation */
html[data-theme="dark"] .validation-message,
html[data-theme="dark"] .field-validation-error {
    color: #fca5a5;
}

html[data-theme="dark"] .validation-message::before,
html[data-theme="dark"] .field-validation-error::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23fca5a5'%3E%3Cpath fill-rule='evenodd' d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

html[data-theme="dark"] .validation-errors {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}