/* =================================================== */
/* VeraCita - Main Application Stylesheet              */
/* =================================================== */

/* Global Body Styling - Dark Theme */
body {
    background: radial-gradient(ellipse at top, #1e1e32 0%, #121218 50%, #0a0a0e 100%);
    min-height: 100vh;
    color: var(--text-primary, rgba(255, 255, 255, 0.95));
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    margin: 0;
    padding: 0;
}

/* ADD THIS RULE NEAR THE TOP */
html {
    overflow-y: scroll;
}

/* WCAG: Skip navigation link — hidden until focused */
.vc-skip-nav {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--vc-accent, #6366f1);
    color: #fff;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    z-index: 100000;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    transition: top 0.15s;
}
.vc-skip-nav:focus {
    top: 0;
}

/* 1. GLOBAL FOUNDATION & DEFAULTS
/* =================================================== */
/* =================================================== */
/* THEME SYSTEM - Dark Mode (Default)                  */
/* =================================================== */
:root {
    /* Brand Colors (constant across themes) */
    --brand-gold: var(--vc-status-partial);
    --brand-pink: #ec4899;
    --brand-green: var(--vc-status-supported);
    --brand-red: #ff6464;
    --brand-blue: #4384ff;
    --brand-purple: #7b42ff;
    
    /* Theme-specific colors - DARK MODE */
    --bg-dark: #0a0a0a;
    --bg-card: rgba(255, 255, 255, 0.02);
    --bg-panel: linear-gradient(145deg, #1e293b, #0f172a);
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-panel: rgba(255, 255, 255, 0.1);
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.5);
    --surface-secondary: rgba(255, 255, 255, 0.05);
    --card-bg: rgba(255, 255, 255, 0.03);
    --nav-bg: rgba(10, 10, 10, 0.8);
    --dropdown-bg: linear-gradient(135deg, var(--vc-bg-base) 0%, var(--vc-bg-base) 100%);
}

/* =================================================== */
/* LIGHT THEME - COMPREHENSIVE                         */
/* =================================================== */
[data-theme="light"] {
    --bg-dark: #f0f4f8;
    --bg-card: rgba(255, 255, 255, 0.9);
    --bg-panel: linear-gradient(145deg, #ffffff, #f1f5f9);
    --border-subtle: rgba(15, 23, 42, 0.12);
    --border-panel: rgba(15, 23, 42, 0.15);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --surface-secondary: rgba(15, 23, 42, 0.04);
    --card-bg: rgba(255, 255, 255, 0.95);
    --nav-bg: rgba(255, 255, 255, 0.95);
    --dropdown-bg: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    --glass-bg: rgba(255, 255, 255, 0.8);
}

/* Light theme body background */
[data-theme="light"] body {
    background: linear-gradient(135deg, #e0e7ef 0%, #f0f4f8 50%, #e2e8f0 100%);
    color: var(--text-primary);
}

[data-theme="light"] body::before {
    background: radial-gradient(circle at 20% 80%, rgba(67, 132, 255, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(123, 66, 255, 0.08) 0%, transparent 50%);
}

/* ===== NAVIGATION ===== */
[data-theme="light"] nav {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(15, 23, 42, 0.1);
    backdrop-filter: blur(20px);
}

[data-theme="light"] .logo .gradient-text {
    background: linear-gradient(135deg, #4384ff, #7b42ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="light"] .tagline {
    color: #64748b !important;
}

[data-theme="light"] .user-badge-combined {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.06) 0%, rgba(15, 23, 42, 0.03) 100%);
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .user-badge-combined:hover {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.06) 100%);
    border-color: rgba(67, 132, 255, 0.4);
}

[data-theme="light"] .badge-credits-section {
    background: rgba(67, 132, 255, 0.1);
}

[data-theme="light"] .badge-credit-count {
    color: #0f172a;
}

[data-theme="light"] .badge-divider {
    background: rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .badge-user-name {
    color: #0f172a;
}

[data-theme="light"] .badge-dropdown-icon svg path {
    stroke: rgba(15, 23, 42, 0.6);
}

[data-theme="light"] .user-dropdown {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-color: rgba(15, 23, 42, 0.15);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .dropdown-header {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.08) 0%, rgba(123, 66, 255, 0.08) 100%);
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .user-name-dropdown,
[data-theme="light"] .dropdown-item {
    color: #0f172a;
}

[data-theme="light"] .user-credits-dropdown {
    color: #475569;
}

[data-theme="light"] .dropdown-item:hover {
    background: rgba(67, 132, 255, 0.1);
}

[data-theme="light"] .dropdown-divider {
    background: rgba(15, 23, 42, 0.1);
}

/* ===== SESSION RECOVERY TOGGLE (Header) ===== */
[data-theme="light"] .session-recovery-toggle-container {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .session-recovery-toggle-container:hover {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(67, 132, 255, 0.4);
}

[data-theme="light"] .toggle-label {
    color: #0f172a;
}

[data-theme="light"] .toggle-info-icon {
    color: #64748b;
}

[data-theme="light"] .toggle-info-icon:hover {
    color: #4384ff;
}

[data-theme="light"] .toggle-info-icon::before {
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.15);
    color: #0f172a;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .toggle-info-icon::after {
    border-bottom-color: rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .toggle-slider {
    background: rgba(15, 23, 42, 0.15);
    border-color: rgba(15, 23, 42, 0.2);
}

[data-theme="light"] .toggle-slider::before {
    background: #ffffff;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.2);
}

[data-theme="light"] .theme-toggle-btn {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.12);
    color: #475569;
}

[data-theme="light"] .theme-toggle-btn:hover {
    background: rgba(15, 23, 42, 0.1);
    border-color: rgba(67, 132, 255, 0.5);
    color: #0f172a;
}

/* ===== BUTTONS ===== */
[data-theme="light"] .btn-ghost {
    color: #475569;
    border-color: rgba(15, 23, 42, 0.2);
}

[data-theme="light"] .btn-ghost:hover {
    background: rgba(15, 23, 42, 0.05);
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.3);
}

/* ===== HERO SECTION ===== */
[data-theme="light"] .landing-hero-title {
    color: #0f172a;
}

[data-theme="light"] .landing-hero-subtitle {
    color: #475569;
}

[data-theme="light"] .landing-hero-trust-signal {
    color: #64748b;
}

[data-theme="light"] .landing-hero-trust-signal::before,
[data-theme="light"] .landing-hero-trust-signal::after {
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.15), transparent);
}

/* ===== STEP PROGRESSION ===== */
[data-theme="light"] .landing-step-title,
[data-theme="light"] .cs-step-title {
    color: #0f172a;
}

[data-theme="light"] .landing-step-desc,
[data-theme="light"] .cs-step-desc {
    color: #64748b;
}

[data-theme="light"] .landing-step-number::before,
[data-theme="light"] .cs-step-number::before {
    background: #f0f4f8;
}

[data-theme="light"] .landing-steps-timeline::before,
[data-theme="light"] .cs-progress-timeline::before {
    opacity: 0.5;
}

/* ===== UPLOAD CONTAINER ===== */
[data-theme="light"] .landing-upload-container {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .landing-upload-container:hover {
    border-color: rgba(67, 132, 255, 0.4);
    box-shadow: 0 8px 32px rgba(67, 132, 255, 0.12);
}

[data-theme="light"] .landing-tabs {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .landing-tab {
    color: #475569;
}

[data-theme="light"] .landing-tab:hover {
    color: #0f172a;
}

[data-theme="light"] .landing-tab.active {
    color: #ffffff;
}

[data-theme="light"] .landing-tab-icon {
    stroke: #475569;
}

[data-theme="light"] .landing-tab:hover .landing-tab-icon {
    stroke: #0f172a;
}

[data-theme="light"] .landing-content-area {
    border-color: rgba(15, 23, 42, 0.15);
    background: rgba(15, 23, 42, 0.02);
}

[data-theme="light"] .landing-content-area:hover {
    border-color: rgba(67, 132, 255, 0.5);
    background: rgba(67, 132, 255, 0.05);
}

[data-theme="light"] .landing-upload-icon {
    stroke: #475569;
}

[data-theme="light"] .landing-upload-text {
    color: #0f172a;
}

[data-theme="light"] .landing-upload-subtext {
    color: #475569;
}

[data-theme="light"] .landing-upload-formats {
    color: #64748b;
}

/* ===== FILE UPLOAD ITEMS (Screen 1) ===== */
[data-theme="light"] .landing-files-section {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .landing-files-header {
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .landing-files-title {
    color: #0f172a;
}

[data-theme="light"] .landing-files-count {
    color: var(--vc-status-supported);
}

[data-theme="light"] .landing-files-size {
    color: #475569;
}

[data-theme="light"] .landing-file-item {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .landing-file-item:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(67, 132, 255, 0.3);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .landing-file-name {
    color: #0f172a;
}

[data-theme="light"] .landing-file-size {
    color: #475569;
}

[data-theme="light"] .landing-file-detail-name {
    color: #0f172a;
}

[data-theme="light"] .landing-file-detail-size {
    color: var(--vc-status-supported);
}

[data-theme="light"] .landing-file-remove:hover {
    background: rgba(239, 68, 68, 0.1);
}

[data-theme="light"] .landing-upload-zone-compact {
    border-color: rgba(15, 23, 42, 0.15);
    background: rgba(15, 23, 42, 0.02);
}

[data-theme="light"] .landing-upload-zone-compact:hover {
    border-color: rgba(67, 132, 255, 0.5);
    background: rgba(67, 132, 255, 0.05);
}

/* ===== CONFIG SECTION (Screen 2) ===== */
[data-theme="light"] .cs-config-section {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .cs-page-title {
    color: #0f172a;
}

[data-theme="light"] .cs-page-subtitle {
    color: #475569;
}

/* ===== STATS BAR ===== */
[data-theme="light"] .cs-stats-bar,
[data-theme="light"] #screen2aContainer .cs-stats-bar {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .cs-stat-item {
    border-right-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .cs-stat-number {
    color: #0f172a;
}

[data-theme="light"] .cs-stat-label {
    color: #64748b;
}

/* ===== DOCUMENT READER (Screen 2a) ===== */
[data-theme="light"] .s2a-document-reader {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .s2a-reader-header {
    background: rgba(15, 23, 42, 0.03);
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .s2a-reader-title {
    color: #475569;
}

[data-theme="light"] .s2a-legend-item {
    color: #64748b;
}

[data-theme="light"] .s2a-reader-content {
    color: #1e293b;
}

/* ===== CARDS & PANELS ===== */
[data-theme="light"] .source-card,
[data-theme="light"] .claim-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .source-card:hover,
[data-theme="light"] .claim-card:hover {
    border-color: rgba(67, 132, 255, 0.3);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
}

/* ===== CATEGORY TABS ===== */
[data-theme="light"] .cs-category-tab {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.1);
    color: #475569;
}

[data-theme="light"] .cs-category-tab:hover {
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
}

[data-theme="light"] .cs-category-tab.active {
    background: linear-gradient(135deg, #4384ff, #7b42ff);
    color: #ffffff;
    border-color: transparent;
}

/* ===== INFO BANNERS ===== */
[data-theme="light"] .cs-info-banner {
    background: rgba(67, 132, 255, 0.08);
    border-color: rgba(67, 132, 255, 0.2);
    color: #1e40af;
}

/* ===== SCROLLBARS ===== */
[data-theme="light"] * {
    scrollbar-color: rgba(67, 132, 255, 0.3) rgba(15, 23, 42, 0.05);
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.05);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(67, 132, 255, 0.3);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(67, 132, 255, 0.5);
}

/* =================================================== */
/* SCREEN 2 CONFIGURE SOURCES - LIGHT THEME            */
/* Add this entire block to main.css after the         */
/* scrollbar light theme rules (around line 436)       */
/* =================================================== */

/* --- Stats Progress Container --- */
[data-theme="light"] .cs-stats-progress-container {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .cs-stat-item:not(:last-child)::after {
    background: linear-gradient(to bottom, 
        transparent, 
        rgba(15, 23, 42, 0.1) 20%, 
        rgba(15, 23, 42, 0.1) 80%, 
        transparent
    );
}

[data-theme="light"] .cs-stat-text {
    color: #64748b;
}

[data-theme="light"] .cs-stat-text::after {
    background: linear-gradient(90deg, transparent, rgba(67, 132, 255, 0.3), transparent);
}

/* --- Progress Bar --- */
[data-theme="light"] .cs-progress-bar-track {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.08);
}

/* --- Working Space --- */
[data-theme="light"] .cs-working-space {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .cs-working-space::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .cs-working-space::-webkit-scrollbar-thumb {
    background: rgba(67, 132, 255, 0.2);
}

[data-theme="light"] .cs-working-space::-webkit-scrollbar-thumb:hover {
    background: rgba(67, 132, 255, 0.35);
}

/* --- Category Grid/Tabs --- */
[data-theme="light"] .cs-category-grid {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .cs-category-card {
    color: #475569;
}

[data-theme="light"] .cs-category-card:hover {
    background: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .cs-category-title {
    color: #1e293b;
}

[data-theme="light"] .cs-category-count {
    color: #1e293b;
    background-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .cs-category-card.cs-category-active .cs-category-title,
[data-theme="light"] .cs-category-card.cs-category-active .cs-category-count {
    color: white;
}

[data-theme="light"] .cs-category-card.cs-category-active .cs-category-count {
    background-color: rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .cs-icon-badge svg * {
    stroke: #475569;
}

/* --- Source Tabs --- */
[data-theme="light"] .cs-source-tabs {
    background: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .cs-source-tab {
    color: #475569;
}

[data-theme="light"] .cs-source-tab:hover:not(.cs-source-tab-disabled):not([disabled]) {
    color: #1e293b;
    background: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .cs-source-tab.cs-source-tab-disabled,
[data-theme="light"] .cs-source-tab[disabled] {
    color: rgba(15, 23, 42, 0.35);
}

/* --- Source Cards --- */
[data-theme="light"] .cs-source-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .cs-source-card:hover {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
    border-color: rgba(67, 132, 255, 0.3);
}

[data-theme="light"] .cs-doc-title {
    color: #1e293b;
}

[data-theme="light"] .cs-source-url,
[data-theme="light"] .cs-source-link {
    color: #64748b !important;
}

[data-theme="light"] .cs-source-url:hover,
[data-theme="light"] .cs-source-link:hover {
    color: #4384ff !important;
}

/* --- Reference Badges --- */
[data-theme="light"] .cs-ref-badge {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.1), rgba(123, 66, 255, 0.1));
    border: 1px solid rgba(67, 132, 255, 0.25);
    color: #4384ff;
}

[data-theme="light"] .cs-ref-badge-dead,
[data-theme="light"] .cs-ref-badge-error {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: var(--vc-status-unsupported) !important;
}

[data-theme="light"] .cs-ref-badge-info {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.25);
    color: #6366f1;
}

[data-theme="light"] .cs-ref-badge-uncited {
    background: rgba(168, 85, 247, 0.1);
    border-color: rgba(168, 85, 247, 0.25);
    color: #9333ea;
}

[data-theme="light"] .cs-ref-badge-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
    color: #d97706 !important;
}

/* --- Action Buttons --- */
[data-theme="light"] .cs-action-icon {
    background: rgba(15, 23, 42, 0.06);
    color: #64748b;
}

[data-theme="light"] .cs-action-icon:hover {
    background: rgba(15, 23, 42, 0.1);
    color: #1e293b;
}

[data-theme="light"] .cs-icon-upload {
    background: rgba(67, 132, 255, 0.15);
    color: #4384ff;
}

[data-theme="light"] .cs-icon-upload:hover {
    background: rgba(67, 132, 255, 0.25);
}

[data-theme="light"] .cs-icon-upload.file-uploaded {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

[data-theme="light"] .cs-icon-skip {
    background: rgba(15, 23, 42, 0.08);
    color: #64748b;
}

[data-theme="light"] .cs-icon-skip:hover {
    background: rgba(15, 23, 42, 0.12);
    color: #1e293b;
}

[data-theme="light"] .cs-icon-premium {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.15));
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

[data-theme="light"] .cs-icon-fix-url {
    background: rgba(6, 182, 212, 0.12);
    color: #0891b2;
    border: 1px solid rgba(6, 182, 212, 0.25);
}

[data-theme="light"] .cs-action-btn {
    background: rgba(67, 132, 255, 0.12);
    color: #1e293b;
}

[data-theme="light"] .cs-action-btn:hover {
    background: rgba(67, 132, 255, 0.2);
}

[data-theme="light"] .cs-btn-fix-url {
    background: rgba(245, 158, 11, 0.12);
    color: #1e293b;
}

[data-theme="light"] .cs-btn-fix-url:hover {
    background: rgba(245, 158, 11, 0.2);
}

/* --- Privacy Lock Icons --- */
[data-theme="light"] .cs-icon-lock-private {
    background: rgba(59, 130, 246, 0.15) !important;
    border: 2px solid #3b82f6 !important;
    color: #3b82f6 !important;
}

[data-theme="light"] .cs-icon-lock-public {
    background: transparent !important;
    border: 2px solid var(--vc-status-supported) !important;
    color: var(--vc-status-supported) !important;
}

[data-theme="light"] .cs-icon-lock-all-private {
    background: rgba(59, 130, 246, 0.15) !important;
    border: 2px solid #3b82f6 !important;
    color: #3b82f6 !important;
}

[data-theme="light"] .cs-icon-lock-all-public {
    background: transparent !important;
    border: 2px solid var(--vc-status-supported) !important;
    color: var(--vc-status-supported) !important;
}

/* --- Status Indicators --- */
[data-theme="light"] .cs-status-indicator {
    font-weight: 700;
}

[data-theme="light"] .cs-status-warning {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

[data-theme="light"] .cs-status-error {
    background: rgba(239, 68, 68, 0.12);
    color: var(--vc-status-unsupported);
}

[data-theme="light"] .cs-status-info {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

[data-theme="light"] .cs-status-success {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

[data-theme="light"] .cs-status-badge.cs-status-success {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* --- Sections --- */
[data-theme="light"] .cs-section {
    border: 1px solid rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .cs-section-header h3 {
    color: #1e293b;
}

[data-theme="light"] .cs-section-desc {
    color: #64748b;
}

/* --- Success Section --- */
[data-theme="light"] .cs-success-section {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.15);
}

[data-theme="light"] .cs-success-section:not(.expanded) {
    background: rgba(16, 185, 129, 0.03);
}

[data-theme="light"] .cs-success-section .cs-source-item {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

[data-theme="light"] .cs-success-section .cs-source-item:hover {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="light"] .cs-success-section .cs-doc-title {
    color: #1e293b;
}

[data-theme="light"] .cs-success-section .cs-source-url,
[data-theme="light"] .cs-success-section .cs-source-link {
    color: #64748b;
}

[data-theme="light"] .cs-success-section .cs-source-url:hover,
[data-theme="light"] .cs-success-section .cs-source-link:hover {
    color: #059669;
}

[data-theme="light"] .cs-success-section .cs-ref-badge {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #059669;
}

/* --- Source Item (Ready Cards) --- */
[data-theme="light"] .cs-source-item {
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

[data-theme="light"] .cs-source-item:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="light"] .cs-source-item .cs-doc-title {
    color: #1e293b;
}

[data-theme="light"] .cs-source-item .cs-source-url {
    color: #64748b;
}

[data-theme="light"] .cs-source-item .cs-ref-badge {
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #059669;
}

/* --- Dead Links Section --- */
[data-theme="light"] .cs-dead-links-section {
    background: rgba(239, 68, 68, 0.03);
    border-color: rgba(239, 68, 68, 0.15);
}

[data-theme="light"] .cs-dead-link-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(239, 68, 68, 0.12);
}

[data-theme="light"] .cs-dead-link-card:hover {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.2);
}

[data-theme="light"] .cs-dead-url {
    color: rgba(15, 23, 42, 0.4);
}

/* --- Failed/PDF Cards --- */
[data-theme="light"] .cs-failed-card {
    border-color: rgba(67, 132, 255, 0.15);
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .cs-failed-card:hover {
    background: rgba(67, 132, 255, 0.05);
    border-color: rgba(67, 132, 255, 0.25);
}

[data-theme="light"] .cs-pdf-card {
    border-color: rgba(67, 132, 255, 0.15);
    background: rgba(67, 132, 255, 0.03);
}

[data-theme="light"] .cs-pdf-card:hover {
    background: rgba(67, 132, 255, 0.06);
    border-color: rgba(67, 132, 255, 0.25);
}

[data-theme="light"] .cs-pdf-card .cs-ref-badge {
    background: rgba(67, 132, 255, 0.1);
    border-color: rgba(67, 132, 255, 0.25);
    color: #4384ff;
}

/* --- Processing Card --- */
[data-theme="light"] .cs-processing-card {
    border-color: rgba(245, 158, 11, 0.2) !important;
    background: rgba(245, 158, 11, 0.03) !important;
}

[data-theme="light"] .cs-processing-card .cs-ref-badge {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
    color: #d97706 !important;
}

[data-theme="light"] .cs-processing-card .cs-dead-indicator {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.2);
}

/* --- Missing URL Cards --- */
[data-theme="light"] .cs-missing-url-card {
    border-color: rgba(245, 158, 11, 0.15);
    background: rgba(245, 158, 11, 0.03);
}

[data-theme="light"] .cs-missing-url-card:hover {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.25);
}

[data-theme="light"] .cs-source-hint {
    color: #64748b;
}

/* --- Uncited Section --- */
[data-theme="light"] .cs-uncited-section {
    background: rgba(245, 158, 11, 0.03);
    border-color: rgba(245, 158, 11, 0.12);
}

[data-theme="light"] .cs-uncited-card {
    border-color: rgba(168, 85, 247, 0.15);
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .cs-uncited-card:hover {
    background: rgba(168, 85, 247, 0.05);
    border-color: rgba(168, 85, 247, 0.25);
}

[data-theme="light"] .cs-uncited-item {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .cs-uncited-item:hover {
    background: rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.15);
}

[data-theme="light"] .cs-uncited-number {
    color: rgba(15, 23, 42, 0.4);
}

[data-theme="light"] .cs-uncited-title {
    color: #1e293b;
}

[data-theme="light"] .cs-uncited-link {
    color: #64748b;
}

[data-theme="light"] .cs-uncited-link:hover {
    color: #d97706;
}

[data-theme="light"] .cs-uncited-actions {
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.12);
}

[data-theme="light"] .cs-download-format-hint {
    color: #64748b;
}

[data-theme="light"] .cs-uncited-list::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .cs-uncited-list::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.25);
}

[data-theme="light"] .cs-uncited-list::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 158, 11, 0.4);
}

/* --- Action Section --- */
[data-theme="light"] .cs-action-section {
    border-color: rgba(245, 158, 11, 0.15);
}

[data-theme="light"] .cs-action-section.all-configured {
    background: rgba(16, 185, 129, 0.04);
    border-color: rgba(16, 185, 129, 0.15);
}

/* --- Hints & Info Messages --- */
[data-theme="light"] .cs-action-hint {
    background: rgba(67, 132, 255, 0.05);
    border: 1px solid rgba(67, 132, 255, 0.12);
    color: #475569;
}

[data-theme="light"] .cs-action-hint strong {
    color: #1e293b;
}

[data-theme="light"] .cs-subsection-hint {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 3px solid rgba(67, 132, 255, 0.3);
    color: #64748b;
}

[data-theme="light"] .cs-subsection-hint strong {
    color: #1e293b;
}

/* --- Subsections --- */
[data-theme="light"] .cs-subsection {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .cs-html-failures-subsection {
    border-left: 3px solid rgba(67, 132, 255, 0.35);
}

[data-theme="light"] .cs-pdf-sources-subsection {
    border-left: 3px solid rgba(245, 158, 11, 0.35);
}

[data-theme="light"] .cs-subsection-header h4 {
    color: #1e293b;
}

/* --- Info Badge --- */
[data-theme="light"] .cs-info-badge {
    background: rgba(67, 132, 255, 0.06);
    border: 1px solid rgba(67, 132, 255, 0.15);
    color: #475569;
}

/* --- Toggle Info Message --- */
[data-theme="light"] .cs-toggle-info-message {
    background: rgba(67, 132, 255, 0.06);
    border: 1px solid rgba(67, 132, 255, 0.15);
    color: #1e293b;
}

/* --- Reference Inputs --- */
[data-theme="light"] .cs-reference-input {
    color: #4384ff;
}

[data-theme="light"] .cs-reference-input:hover,
[data-theme="light"] .cs-reference-input:focus {
    border-color: rgba(15, 23, 42, 0.15);
    background: rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .cs-success-reference-input {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #059669;
}

[data-theme="light"] .cs-success-reference-input:hover,
[data-theme="light"] .cs-success-reference-input:focus {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
}

/* --- Bulk Actions --- */
[data-theme="light"] .cs-bulk-btn {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(239, 68, 68, 0.08));
    border: 1px solid rgba(239, 68, 68, 0.15);
    color: #1e293b;
}

[data-theme="light"] .cs-bulk-btn:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.15));
    border-color: rgba(239, 68, 68, 0.25);
    color: var(--vc-status-unsupported);
}

/* --- Empty States --- */
[data-theme="light"] .cs-empty-state h4 {
    color: #1e293b;
}

[data-theme="light"] .cs-empty-state p {
    color: #64748b;
}

/* --- Loading State --- */
[data-theme="light"] .cs-loading-spinner {
    border: 3px solid rgba(15, 23, 42, 0.1);
    border-top-color: #4384ff;
}

/* --- Error State --- */
[data-theme="light"] .cs-error-state h3 {
    color: #1e293b;
}

[data-theme="light"] .cs-error-state p {
    color: #64748b;
}

/* --- Scrollable Lists --- */
[data-theme="light"] .cs-scrollable-list::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .cs-scrollable-list::-webkit-scrollbar-thumb {
    background: rgba(67, 132, 255, 0.2);
}

[data-theme="light"] .cs-scrollable-list::-webkit-scrollbar-thumb:hover {
    background: rgba(67, 132, 255, 0.35);
}

/* --- Privacy Modal (for Screen 2) --- */
[data-theme="light"] .privacy-info-item {
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .privacy-info-item:hover {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .privacy-info-icon {
    background: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
}

[data-theme="light"] .privacy-info-title {
    color: #1e293b;
}

[data-theme="light"] .privacy-info-desc {
    color: #64748b;
}

[data-theme="light"] .privacy-modal-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .privacy-modal-header h2 {
    color: #1e293b;
}

[data-theme="light"] .privacy-subtitle {
    color: #64748b;
}

[data-theme="light"] .privacy-checkbox-group {
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .privacy-checkbox span {
    color: #1e293b;
}

[data-theme="light"] .privacy-modal-footer {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .cs-btn-secondary-action {
    background: rgba(15, 23, 42, 0.08);
    color: #475569;
}

[data-theme="light"] .cs-btn-secondary-action:hover {
    background: rgba(15, 23, 42, 0.12);
    color: #1e293b;
}

[data-theme="light"] .privacy-modal-body::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .privacy-modal-body::-webkit-scrollbar-thumb {
    background: rgba(67, 132, 255, 0.2);
}

[data-theme="light"] .privacy-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(67, 132, 255, 0.35);
}

/* --- Consent Modal (File Upload) --- */
[data-theme="light"] #fileUploadConsentModal .cs-modal-card {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid rgba(15, 23, 42, 0.12);
}

[data-theme="light"] #fileUploadConsentModal .cs-modal-header {
    border-bottom-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] #fileUploadConsentModal h2 {
    color: #1e293b;
}

[data-theme="light"] #fileUploadConsentModal .cs-modal-body {
    color: #475569;
}

[data-theme="light"] #fileUploadConsentModal .cs-modal-footer {
    border-top-color: rgba(15, 23, 42, 0.1);
    background: rgba(15, 23, 42, 0.02);
}

/* --- Expand/Collapse Icons --- */
[data-theme="light"] .cs-expand-icon svg {
    color: #64748b;
}

/* --- Continue Button (inherits from main) --- */
[data-theme="light"] .cs-continue-btn:disabled {
    opacity: 0.5;
}

/* --- Content Headers --- */
[data-theme="light"] .cs-content-header h4 {
    color: #1e293b;
}

[data-theme="light"] .cs-content-subtitle {
    color: #64748b;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(67, 132, 255, 0.3) rgba(255, 255, 255, 0.02);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle at 20% 80%, rgba(67, 132, 255, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(123, 66, 255, 0.1) 0%, transparent 50%);
    animation: rotate 30s linear infinite;
    z-index: -1;
}

/* 2. LAYOUT & SCREEN MANAGEMENT
/* =================================================== */
.app-screen {
    display: none;
    max-width: 900px;
    margin: 0 auto;
    padding: 120px 40px 60px;
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

.app-screen.active {
    display: block;
}

#screen1Container.app-screen {
    max-width: none;
    padding: 0;
    min-height: auto;
}

#screen2Container, #screen3Container {
    max-width: 1200px;
}

/* 3. NAVIGATION & HEADER
/* =================================================== */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    z-index: 1000;
    padding: 16px 0;
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo Container */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Logo Icon */
.logo-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.logo:hover .logo-icon {
    transform: scale(1.05);
}

/* Logo Text */
.logo .gradient-text {
    font-size: 22px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

/* Tagline */
.logo .tagline {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    margin-left: 8px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}

/* Mobile adjustments for logo */
@media (max-width: 768px) {
    .logo-icon {
        width: 32px;
        height: 32px;
    }

    .logo .gradient-text {
        font-size: 20px;
    }

    .logo {
        gap: 10px;
    }

    .logo .tagline {
        display: none;
    }
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.guest-nav, .auth-nav {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ===================================================================
   COMBINED USER BADGE - Premium Design with Icons
   =================================================================== */

.user-badge-combined {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px 6px 6px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-badge-combined::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 100px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.3), rgba(123, 66, 255, 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* FIX: Don't intercept clicks */
}

.user-badge-combined:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
    border-color: rgba(67, 132, 255, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(67, 132, 255, 0.25),
                0 0 0 3px rgba(67, 132, 255, 0.08);
}

.user-badge-combined:hover::before {
    opacity: 1;
}

.user-badge-combined:active {
    transform: translateY(0);
}

/* Credits Section with Icon */
/* Credits Section with Icon */
.badge-credits-section {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(67, 132, 255, 0.12);
    border-radius: 100px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.badge-credits-section:hover {
    background: rgba(67, 132, 255, 0.22);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(67, 132, 255, 0.3);
}

.badge-credits-section:active {
    transform: translateY(0);
}

.badge-credit-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.badge-credit-icon svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(67, 132, 255, 0.4));
}

.badge-credit-count {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* Divider */
.badge-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
}

/* User Section */
.badge-user-section {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Make all children of badge-user-section pass clicks through to parent */
.badge-user-section > * {
    pointer-events: none;
}

/* But ensure the parent itself can receive clicks */
.badge-user-section {
    pointer-events: auto;
    cursor: pointer;
}

.user-badge-combined .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4384ff 0%, #7b42ff 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(67, 132, 255, 0.4),
                inset 0 1px 1px rgba(255, 255, 255, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
}

.user-avatar::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.6), rgba(123, 66, 255, 0.6));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.user-badge-combined:hover .user-avatar::after {
    opacity: 1;
    filter: blur(4px);
}

.badge-user-name {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: -0.01em;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dropdown Arrow Icon */
.badge-dropdown-icon {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.user-badge-combined:hover .badge-dropdown-icon {
    opacity: 1;
    transform: translateY(1px);
}

.badge-dropdown-icon svg {
    width: 100%;
    height: 100%;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .user-badge-combined {
        padding: 4px 8px 4px 4px;
        gap: 6px;
    }
    
    .badge-user-name {
        display: none;
    }
    
    .badge-credit-count {
        font-size: 12px;
    }
    
    .badge-credits-section {
        padding: 5px 8px;
    }
}

/* ===================================================================
   DROPDOWN - Ultra Premium Design (Dark + Light Theme)
   =================================================================== */

.user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    min-width: 280px;
    background: linear-gradient(165deg, 
        rgba(30, 32, 48, 0.98) 0%, 
        rgba(20, 22, 35, 0.99) 50%,
        rgba(15, 17, 28, 1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 
        0 25px 60px -12px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0 80px -20px rgba(67, 132, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    z-index: 10000;
    overflow: visible;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* Animated gradient border glow */
.dropdown-glow {
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    background: linear-gradient(135deg, 
        rgba(67, 132, 255, 0.4) 0%, 
        rgba(123, 66, 255, 0.4) 50%,
        rgba(67, 132, 255, 0.4) 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    filter: blur(8px);
    pointer-events: none;
}

.user-dropdown:hover .dropdown-glow {
    opacity: 1;
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; filter: blur(8px); }
    50% { opacity: 0.8; filter: blur(12px); }
}

.user-dropdown.active {
    display: block;
    animation: dropdownSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header Section */
.user-dropdown .dropdown-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 20px;
    background: linear-gradient(135deg, 
        rgba(67, 132, 255, 0.08) 0%, 
        rgba(123, 66, 255, 0.06) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    border-radius: 20px 20px 0 0;
}

.user-dropdown .dropdown-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(67, 132, 255, 0.3) 50%, 
        transparent 100%);
}

/* Avatar */
.user-dropdown .user-avatar-large {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #4384ff 0%, #7b42ff 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    box-shadow: 
        0 8px 24px rgba(67, 132, 255, 0.35),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        inset 0 -2px 4px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.user-dropdown .dropdown-header:hover .user-avatar-large {
    transform: scale(1.05);
    box-shadow: 
        0 12px 32px rgba(67, 132, 255, 0.45),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

/* User Details */
.user-dropdown .user-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.user-dropdown .user-name-dropdown {
    font-size: 17px;
    font-weight: 600;
    color: white;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-dropdown .user-credits-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--vc-status-supported);
    font-weight: 500;
}

.user-dropdown .credit-icon-mini {
    width: 14px;
    height: 14px;
    color: var(--vc-status-supported);
}

/* Menu Section */
.dropdown-menu-section {
    padding: 8px 0;
}

.user-dropdown .dropdown-divider {
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.08) 20%,
        rgba(255, 255, 255, 0.08) 80%,
        transparent 100%);
    margin: 8px 16px;
}

/* Menu Items */
.user-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    font-weight: 500;
    position: relative;
    margin: 2px 8px;
    border-radius: 12px;
}

.user-dropdown .dropdown-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, 
        rgba(67, 132, 255, 0.12) 0%, 
        rgba(123, 66, 255, 0.08) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.user-dropdown .dropdown-item:hover {
    color: white;
}

.user-dropdown .dropdown-item::before {
    display: none;
}

.user-dropdown .dropdown-item:active {
    transform: scale(0.98);
}

/* Item Icons */
.dropdown-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.dropdown-item-icon svg {
    width: 18px;
    height: 18px;
    stroke: rgba(255, 255, 255, 0.7);
    transition: all 0.25s ease;
}

.user-dropdown .dropdown-item:hover .dropdown-item-icon {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.2) 0%, rgba(123, 66, 255, 0.15) 100%);
    box-shadow: 0 4px 12px rgba(67, 132, 255, 0.2);
}

.user-dropdown .dropdown-item:hover .dropdown-item-icon svg {
    stroke: #4384ff;
}

/* Credits icon special color */
.user-dropdown .dropdown-item:hover .icon-credits svg {
    stroke: var(--vc-status-supported);
}

.user-dropdown .dropdown-item:hover .icon-credits {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(34, 197, 94, 0.15) 100%);
    box-shadow: 0 4px 12px rgba(74, 222, 128, 0.2);
}

/* Logout special styling */
.user-dropdown .item-logout:hover .icon-logout svg {
    stroke: var(--vc-status-unsupported);
}

.user-dropdown .item-logout:hover .icon-logout {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.2) 0%, rgba(239, 68, 68, 0.15) 100%);
    box-shadow: 0 4px 12px rgba(248, 113, 113, 0.2);
}

/* Item Text */
.dropdown-item-text {
    flex: 1;
    position: relative;
    z-index: 1;
}

/* Arrow Icon */
.dropdown-item-arrow {
    width: 16px;
    height: 16px;
    stroke: rgba(255, 255, 255, 0.3);
    transition: all 0.25s ease;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.user-dropdown .dropdown-item:hover .dropdown-item-arrow {
    stroke: rgba(255, 255, 255, 0.6);
    transform: translateX(3px);
}

/* ===================================================================
   DROPDOWN - Light Theme
   =================================================================== */

[data-theme="light"] .user-dropdown {
    background: linear-gradient(165deg, 
        rgba(255, 255, 255, 0.99) 0%, 
        rgba(248, 250, 252, 1) 50%,
        rgba(241, 245, 249, 1) 100%);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 
        0 25px 60px -12px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(15, 23, 42, 0.08),
        0 0 60px -20px rgba(67, 132, 255, 0.1);
}

[data-theme="light"] .dropdown-glow {
    background: linear-gradient(135deg, 
        rgba(67, 132, 255, 0.3) 0%, 
        rgba(123, 66, 255, 0.3) 50%,
        rgba(67, 132, 255, 0.3) 100%);
}

[data-theme="light"] .user-dropdown .dropdown-header {
    background: linear-gradient(135deg, 
        rgba(67, 132, 255, 0.06) 0%, 
        rgba(123, 66, 255, 0.04) 100%);
    border-bottom-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .user-dropdown .dropdown-header::after {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(67, 132, 255, 0.2) 50%, 
        transparent 100%);
}

[data-theme="light"] .user-dropdown .user-name-dropdown {
    color: #0f172a;
}

[data-theme="light"] .user-dropdown .user-credits-dropdown {
    color: #16a34a;
}

[data-theme="light"] .user-dropdown .credit-icon-mini {
    color: #16a34a;
}

[data-theme="light"] .user-dropdown .dropdown-divider {
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(15, 23, 42, 0.1) 20%,
        rgba(15, 23, 42, 0.1) 80%,
        transparent 100%);
}

[data-theme="light"] .user-dropdown .dropdown-item {
    color: rgba(15, 23, 42, 0.8);
}

[data-theme="light"] .user-dropdown .dropdown-item:hover {
    color: #0f172a;
}

[data-theme="light"] .dropdown-item-icon {
    background: rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .dropdown-item-icon svg {
    stroke: rgba(15, 23, 42, 0.6);
}

[data-theme="light"] .user-dropdown .dropdown-item:hover .dropdown-item-icon {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.15) 0%, rgba(123, 66, 255, 0.1) 100%);
    box-shadow: 0 4px 12px rgba(67, 132, 255, 0.15);
}

[data-theme="light"] .user-dropdown .dropdown-item:hover .dropdown-item-icon svg {
    stroke: #2563eb;
}

[data-theme="light"] .user-dropdown .dropdown-item:hover .icon-credits svg {
    stroke: #16a34a;
}

[data-theme="light"] .user-dropdown .dropdown-item:hover .icon-credits {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.15) 0%, rgba(34, 197, 94, 0.1) 100%);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.15);
}

[data-theme="light"] .user-dropdown .item-logout:hover .icon-logout svg {
    stroke: var(--vc-status-unsupported);
}

[data-theme="light"] .user-dropdown .item-logout:hover .icon-logout {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(239, 68, 68, 0.1) 100%);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

[data-theme="light"] .dropdown-item-arrow {
    stroke: rgba(15, 23, 42, 0.25);
}

[data-theme="light"] .user-dropdown .dropdown-item:hover .dropdown-item-arrow {
    stroke: rgba(15, 23, 42, 0.5);
}

/* 4. GENERAL COMPONENTS (Buttons, Modals, etc.)
/* =================================================== */
.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
}

.btn-primary {
    background: linear-gradient(135deg, #5B6EFF 0%, #7B8CFF 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(91, 110, 255, 0.3);
    background: linear-gradient(135deg, #6B7EFF 0%, #8B9CFF 100%);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-ghost {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Modal Styles */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: none; align-items: center; justify-content: center;
    z-index: 2000; opacity: 0; visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #121212;
    border: 1px solid var(--border-subtle);
    border-radius: 24px; padding: 48px;
    max-width: 480px; width: 90%;
    position: relative;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute; top: 24px; right: 24px;
    background: none; border: none; color: var(--text-muted);
    font-size: 32px; cursor: pointer;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: all 0.3s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Form Styles */
.auth-form h2 { font-size: 32px; font-weight: 300; margin-bottom: 32px; text-align: center; }
.form-group { margin-bottom: 24px; }
.form-group label { display: block; margin-bottom: 8px; color: var(--text-secondary); font-size: 14px; }
.form-group input, .form-group select {
    width: 100%; 
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: 8px; 
    color: white; 
    font-size: 16px;
    min-width: 350px;
}
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--brand-blue); }
.form-submit { width: 100%; padding: 16px; margin-top: 32px; }
.form-switch { text-align: center; margin-top: 24px; font-size: 14px; color: var(--text-muted); }
.form-switch a { color: var(--brand-blue); text-decoration: none; cursor: pointer; }

/* 5. LOADING OVERLAY & PROGRESS BAR
/* =================================================== */
#loadingOverlay {
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#loadingOverlay.active {
    display: flex !important;
}

/* =================================================== */
/* LOADING OVERLAY & PROGRESS BAR */
/* =================================================== */
#loadingOverlay {
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#loadingOverlay.active {
    display: flex !important;
}

/* ========== PREMIUM MULTI-STEP LOADING SYSTEM ========== */
.premium-loading-content {
    width: 90%;
    max-width: 650px;
    padding: 40px;
    text-align: center;
}

.loading-header {
    margin-bottom: 40px;
}

.loading-main-title {
    font-size: 32px;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.loading-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

/* Step Progress Indicator */
.steps-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 50px;
    padding: 0 20px;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    flex: 1;
}

.step-icon-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
}

.step-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s ease;
}

.step-item.active .step-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    animation: pulse 2s infinite;
}

.step-item.completed .step-icon {
    background: linear-gradient(135deg, var(--vc-status-supported) 0%, #059669 100%);
    border-color: transparent;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(102, 126, 234, 0); }
    100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); }
}

.step-spinner {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top: 3px solid #fff;
    animation: spin 1s linear infinite;
    display: none;
}

.step-item.active .step-spinner {
    display: block;
}

.step-checkmark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 28px;
    font-weight: bold;
    display: none;
}

.step-item.completed .step-checkmark {
    display: block;
}

.step-item.completed .step-icon {
    font-size: 0;
}

.step-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    transition: color 0.3s ease;
}

.step-item.active .step-label,
.step-item.completed .step-label {
    color: rgba(255, 255, 255, 0.95);
}

/* Steps Progress Line */
.steps-progress-line {
    position: absolute;
    top: 30px;
    left: 80px;
    right: 80px;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.steps-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--vc-status-supported) 0%, #667eea 50%, #764ba2 100%);
    transition: width 0.5s ease;
    width: 0%;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

/* Progress Details */
.progress-details-container {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 30px;
    backdrop-filter: blur(10px);
}

.main-progress-wrapper {
    margin-bottom: 30px;
}

.progress-percentage {
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 16px;
}

.premium-progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}

.premium-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    width: 0%;
    transition: width 0.5s ease;
    position: relative;
    overflow: hidden;
}

.progress-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shine 2s infinite;
}

@keyframes shine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Extraction Statistics */
.extraction-stats {
    display: flex;
    justify-content: space-around;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.stat-icon {
    font-size: 20px;
}

.stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
}

/* Processing Speed */
.processing-speed {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.speed-indicator,
.eta-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.speed-label,
.eta-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.speed-value,
.eta-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--vc-status-supported);
}

.speed-unit {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

/* 6. UTILITIES & HELPERS
/* =================================================== */
.gradient-text {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.error-message, .success-message {
    padding: 16px 24px;
    border-radius: 12px;
    margin-top: 24px;
    display: none;
    font-size: 14px;
}

.error-message {
    background: rgba(255, 100, 100, 0.1);
    border: 1px solid rgba(255, 100, 100, 0.3);
    color: rgba(255, 100, 100, 0.9);
}

.success-message {
    background: rgba(100, 255, 100, 0.1);
    border: 1px solid rgba(100, 255, 100, 0.3);
    color: rgba(100, 255, 100, 0.9);
}

/* 7. ANIMATIONS
/* =================================================== */
@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    to { opacity: 1; }
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes shimmer-slow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
@keyframes contentFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
@keyframes dropdownSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes pulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

/* 8. SCROLLBARS
/* =================================================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); border-radius: 10px; margin: 5px; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.3) 0%, rgba(123, 66, 255, 0.3) 100%);
    border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.5) 0%, rgba(123, 66, 255, 0.5) 100%);
    border-color: rgba(67, 132, 255, 0.3); box-shadow: 0 0 10px rgba(67, 132, 255, 0.2);
}
.premium-scroll::-webkit-scrollbar,
.text-area::-webkit-scrollbar { width: 8px; }
.premium-scroll::-webkit-scrollbar-track,
.text-area::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); border-radius: 4px; }
.premium-scroll::-webkit-scrollbar-thumb,
.text-area::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(67, 132, 255, 0.4) 0%, rgba(123, 66, 255, 0.4) 100%);
    border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.05);
}
.premium-scroll::-webkit-scrollbar-thumb:hover,
.text-area::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(67, 132, 255, 0.6) 0%, rgba(123, 66, 255, 0.6) 100%);
}

/* 9. RESPONSIVE DESIGN
/* =================================================== */
@media (max-width: 768px) {
    .app-screen { padding: 100px 20px 40px; }
    h1 { font-size: 36px; }
    .info-grid { grid-template-columns: 1fr; }
    .value-props { gap: 24px; }
    .tab { font-size: 13px; padding: 14px 16px; }
    .credit-count-inline { display: none; }
    .user-badge-combined { padding: 6px; }
    #screen2Container, #screen3Container { padding: 80px 20px 40px; }
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
    .plan-options { grid-template-columns: 1fr; }
    .file-header { flex-direction: column; gap: 20px; }
}

.user-dropdown.active {
    display: block;
}

.dropdown-item {
    padding: 12px 16px;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
}

.dropdown-item:hover {
    background: rgba(67, 132, 255, 0.1);
}

.dropdown-item:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.dropdown-item:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.user-menu {
    position: relative;
    cursor: pointer;
}

/* ========================================= */
/* Session Recovery Toggle in Header        */
/* ========================================= */

.session-recovery-toggle-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.session-recovery-toggle-container:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(67, 132, 255, 0.3);
}

.toggle-label-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.toggle-info-icon {
    position: relative;
    display: flex;
    align-items: center;
    cursor: help;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s ease;
}

.toggle-info-icon:hover {
    color: rgba(67, 132, 255, 0.8);
}

/* Tooltip - positioned BELOW the icon */
.toggle-info-icon::before {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 12px);
    right: 50%;
    transform: translateX(50%);
    padding: 12px 16px;
    background: rgba(26, 26, 46, 0.98);
    border: 1px solid rgba(67, 132, 255, 0.3);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    white-space: normal;
    width: 280px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Arrow pointing UP (since tooltip is below) */
.toggle-info-icon::after {
    content: '';
    position: absolute;
    top: calc(100% + 6px);
    right: 50%;
    transform: translateX(50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(67, 132, 255, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 10000;
}

.toggle-info-icon:hover::before,
.toggle-info-icon:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    transition: all 0.3s ease;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: linear-gradient(135deg, #4384ff 0%, #7b42ff 100%);
    border-color: transparent;
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
    background: white;
}

.toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(67, 132, 255, 0.2);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .session-recovery-toggle-container {
        padding: 6px 12px;
        gap: 8px;
    }
    
    .toggle-label {
        font-size: 12px;
    }
    
    .toggle-switch {
        width: 38px;
        height: 22px;
    }
    
    .toggle-slider::before {
        height: 16px;
        width: 16px;
    }
    
    .toggle-switch input:checked + .toggle-slider::before {
        transform: translateX(16px);
    }
}

@media (max-width: 768px) {
    .session-recovery-toggle-container {
        display: none; /* Hide on mobile, can be accessed via settings */
    }
}

/* ========================================= */
/* Toast Notifications                      */
/* ========================================= */

.session-recovery-toast {
    position: fixed;
    top: 80px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(26, 26, 46, 0.98);
    border: 1px solid rgba(67, 132, 255, 0.3);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 10001;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 400px;
    backdrop-filter: blur(10px);
}

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

.session-recovery-toast.toast-success {
    border-color: rgba(16, 185, 129, 0.5);
}

.session-recovery-toast.toast-info {
    border-color: rgba(59, 130, 246, 0.5);
}

.toast-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.toast-success .toast-icon {
    color: var(--vc-status-supported);
}

.toast-info .toast-icon {
    color: #3b82f6;
}

.session-recovery-toast span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

@media (max-width: 768px) {
    .session-recovery-toast {
        right: 16px;
        left: 16px;
        max-width: calc(100% - 32px);
    }
}

.session-recovery-toast.toast-error {
    border-color: rgba(239, 68, 68, 0.5);
}

.toast-error .toast-icon {
    color: var(--vc-status-unsupported);
}

/* =================================================== */
/* SESSION RECOVERY MODAL                              */
/* =================================================== */
.recovery-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.recovery-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.recovery-modal-content {
    background: linear-gradient(145deg, #1a1f2e 0%, #0f1420 100%);
    border: 1px solid rgba(67, 132, 255, 0.2);
    border-radius: 20px;
    width: 90%;
    max-width: 520px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    transform: translateY(30px) scale(0.95);
    transition: all 0.3s ease;
    overflow: hidden;
}

.recovery-modal-overlay.active .recovery-modal-content {
    transform: translateY(0) scale(1);
}

.recovery-modal-header {
    padding: 32px 32px 24px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.recovery-modal-header .recovery-icon {
    margin-bottom: 16px;
}

.recovery-modal-header h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
}

.recovery-subtitle {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.recovery-modal-body {
    padding: 24px 32px;
}

.recovery-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.recovery-session-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.recovery-session-item:hover {
    background: rgba(67, 132, 255, 0.05);
    border-color: rgba(67, 132, 255, 0.2);
}

.recovery-session-info {
    flex: 1;
    min-width: 0;
}

.recovery-session-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.recovery-session-title strong {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.recovery-session-time {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.recovery-session-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.recovery-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.recovery-stat svg {
    color: rgba(67, 132, 255, 0.8);
}

.recovery-progress-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.recovery-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4384ff, #7b42ff);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Session action buttons container */
.recovery-session-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.btn-resume {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #4384ff 0%, #7b42ff 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-resume:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(67, 132, 255, 0.4);
}

.btn-resume:active {
    transform: translateY(0);
}

.btn-ignore {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-ignore:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

.recovery-privacy-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 10px;
}

.recovery-privacy-notice svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.recovery-privacy-notice span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.recovery-modal-footer {
    padding: 20px 32px 28px;
    display: flex;
    justify-content: center;
}

.btn-start-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-start-new:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

/* Light theme adjustments */
[data-theme="light"] .recovery-modal-content {
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .recovery-modal-header h2 {
    color: #0f172a;
}

[data-theme="light"] .recovery-subtitle {
    color: #64748b;
}

[data-theme="light"] .recovery-session-item {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .recovery-session-item:hover {
    background: rgba(67, 132, 255, 0.05);
    border-color: rgba(67, 132, 255, 0.2);
}

[data-theme="light"] .recovery-session-title strong {
    color: #0f172a;
}

[data-theme="light"] .recovery-session-time {
    color: #64748b;
}

[data-theme="light"] .recovery-stat {
    color: #475569;
}

[data-theme="light"] .recovery-privacy-notice span {
    color: #475569;
}

[data-theme="light"] .btn-start-new {
    background: rgba(15, 23, 42, 0.05);
    color: #334155;
    border-color: rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .btn-start-new:hover {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.2);
}

[data-theme="light"] .btn-ignore {
    color: #64748b;
    border-color: rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .btn-ignore:hover {
    background: rgba(15, 23, 42, 0.05);
    color: #475569;
}

/* Responsive adjustments */
@media (max-width: 560px) {
    .recovery-modal-content {
        margin: 16px;
        width: calc(100% - 32px);
    }
    
    .recovery-modal-header {
        padding: 24px 20px 20px;
    }
    
    .recovery-modal-body {
        padding: 20px;
    }
    
    .recovery-modal-footer {
        padding: 16px 20px 24px;
    }
    
    .recovery-session-item {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .recovery-session-actions {
        flex-direction: row;
    }
    
    .btn-resume {
        flex: 1;
        justify-content: center;
    }
}

/* =================================================== */
/* THEME TOGGLE BUTTON                                 */
/* =================================================== */
.theme-toggle-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.15) 0%, rgba(123, 66, 255, 0.15) 100%);
    border: 1px solid rgba(67, 132, 255, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-right: 12px;
}

.theme-toggle-btn:hover {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.25) 0%, rgba(123, 66, 255, 0.25) 100%);
    border-color: rgba(123, 66, 255, 0.5);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(67, 132, 255, 0.2);
}

/* Show/hide icons based on theme */
/* Dark mode (default): show sun icon, hide moon */
.theme-icon-light {
    display: none;
}

.theme-icon-dark {
    display: block;
}

/* Light mode: show moon icon, hide sun */
[data-theme="light"] .theme-icon-light {
    display: block;
}

[data-theme="light"] .theme-icon-dark {
    display: none;
}

/* Light mode button styling */
[data-theme="light"] .theme-toggle-btn {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.12) 0%, rgba(123, 66, 255, 0.12) 100%);
    border: 1px solid rgba(67, 132, 255, 0.25);
}

[data-theme="light"] .theme-toggle-btn:hover {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.18) 0%, rgba(123, 66, 255, 0.18) 100%);
    border-color: rgba(123, 66, 255, 0.4);
    box-shadow: 0 4px 12px rgba(67, 132, 255, 0.15);
}

/* =================================================== */
/* AUTH INLINE ERROR MESSAGE                           */
/* =================================================== */
.auth-error-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    margin-bottom: 16px;
    animation: authErrorSlideIn 0.3s ease;
}

.auth-error-message svg {
    width: 18px;
    height: 18px;
    min-width: 18px;
    stroke: var(--vc-status-unsupported);
    margin-top: 1px;
}

.auth-error-message span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    line-height: 1.4;
}

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

/* =================================================== */
/* AUTH MODAL STYLES                                   */
/* =================================================== */

.auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.auth-container {
    width: 90%;
    max-width: 420px;
    background: linear-gradient(145deg, var(--vc-bg-surface), var(--vc-bg-body));
    padding: 40px;
    border-radius: 22px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    overflow: hidden;
}

.auth-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.auth-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
}

.auth-title {
    margin: 0 0 28px 0;
    color: #ffffff;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
}

.auth-form-group {
    margin-bottom: 16px;
}

.auth-name-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-input {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #ffffff;
    font-size: 15px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.auth-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.auth-input:focus {
    outline: none;
    border-color: rgba(67, 132, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(67, 132, 255, 0.15);
}

.auth-submit-btn {
    width: 100%;
    padding: 16px;
    margin-top: 8px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(135deg, #5B6EFF 0%, #7B8CFF 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.auth-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(91, 110, 255, 0.4);
}

.auth-submit-btn:active {
    transform: translateY(0);
}

.auth-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.auth-switch {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.auth-switch a {
    color: #4384ff;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
}

.auth-switch a:hover {
    color: #7B8CFF;
    text-decoration: underline;
}

/* =================================================== */
/* TERMS & CONDITIONS CHECKBOX                         */
/* =================================================== */
.auth-terms-group {
    margin-top: 8px;
    margin-bottom: 16px;
    display: none; /* Hidden by default, shown only for signup */
}

.auth-terms-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.auth-terms-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.auth-terms-checkmark {
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-top: 2px;
}

.auth-terms-checkmark svg {
    width: 12px;
    height: 12px;
    stroke: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.auth-terms-label:hover .auth-terms-checkmark {
    border-color: rgba(67, 132, 255, 0.6);
    background: rgba(67, 132, 255, 0.1);
}

.auth-terms-checkbox:checked + .auth-terms-checkmark {
    background: linear-gradient(135deg, #4384ff 0%, #7b42ff 100%);
    border-color: transparent;
}

.auth-terms-checkbox:checked + .auth-terms-checkmark svg {
    opacity: 1;
    transform: scale(1);
}

.auth-terms-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.auth-terms-link {
    color: #4384ff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.auth-terms-link:hover {
    color: #7b42ff;
    text-decoration: underline;
}

/* Terms validation error state */
.auth-terms-group.error .auth-terms-checkmark {
    border-color: var(--vc-status-unsupported);
    background: rgba(239, 68, 68, 0.1);
    animation: shake 0.4s ease;
}

.auth-terms-group.error .auth-terms-text {
    color: var(--vc-status-unsupported);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* =================================================== */
/* AUTH INLINE ERROR MESSAGE                           */
/* =================================================== */
.auth-inline-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    margin-bottom: 16px;
    animation: errorSlideIn 0.3s ease;
}

.auth-inline-error svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: var(--vc-status-unsupported);
}

.auth-inline-error span {
    font-size: 13px;
    font-weight: 500;
    color: #fca5a5;
    line-height: 1.4;
}

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

/* Light theme */
[data-theme="light"] .auth-inline-error {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
}

[data-theme="light"] .auth-inline-error span {
    color: var(--vc-status-unsupported);
}

/* =================================================== */
/* TERMS & CONDITIONS MODAL                            */
/* =================================================== */
.terms-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.terms-modal {
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    background: linear-gradient(145deg, var(--vc-bg-surface), var(--vc-bg-body));
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 32px 100px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.terms-modal-header {
    padding: 24px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.terms-modal-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(135deg, #4384ff 0%, #7b42ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.terms-modal-close {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.terms-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
}

.terms-modal-content {
    padding: 28px;
    overflow-y: auto;
    flex: 1;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.7;
}

.terms-modal-content h3 {
    margin: 24px 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

.terms-modal-content h3:first-of-type {
    margin-top: 0;
}

.terms-modal-content p {
    margin: 0 0 12px 0;
    color: rgba(255, 255, 255, 0.75);
}

.terms-modal-content ul {
    margin: 8px 0 16px 0;
    padding-left: 20px;
}

.terms-modal-content li {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.7);
}

.terms-last-updated {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 20px !important;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.terms-modal-footer {
    padding: 20px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.terms-accept-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #4384ff 0%, #7b42ff 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.terms-accept-btn svg {
    width: 18px;
    height: 18px;
}

.terms-accept-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(67, 132, 255, 0.4);
}

/* Light Theme Support */
[data-theme="light"] .terms-modal {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .terms-modal-header {
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .terms-modal-header h2 {
    color: #0f172a;
}

[data-theme="light"] .terms-modal-close {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.1);
    color: #64748b;
}

[data-theme="light"] .terms-modal-content {
    color: #334155;
}

[data-theme="light"] .terms-modal-content h3 {
    color: #0f172a;
}

[data-theme="light"] .terms-modal-content p,
[data-theme="light"] .terms-modal-content li {
    color: #475569;
}

[data-theme="light"] .terms-last-updated {
    color: #94a3b8;
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .terms-modal-footer {
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .auth-terms-checkmark {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.25);
}

[data-theme="light"] .auth-terms-text {
    color: #475569;
}

/* =================================================== */
/* AUTH MODAL - LIGHT THEME                            */
/* =================================================== */

[data-theme="light"] .auth-modal {
    background: rgba(15, 23, 42, 0.6);
}

[data-theme="light"] .auth-container {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.25);
}

[data-theme="light"] .auth-close {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.1);
    color: rgba(15, 23, 42, 0.5);
}

[data-theme="light"] .auth-close:hover {
    background: rgba(15, 23, 42, 0.1);
    color: rgba(15, 23, 42, 0.8);
    border-color: rgba(15, 23, 42, 0.2);
}

[data-theme="light"] .auth-title {
    color: #0f172a;
}

[data-theme="light"] .auth-input {
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.15);
    color: #0f172a;
}

[data-theme="light"] .auth-input::placeholder {
    color: rgba(15, 23, 42, 0.4);
}

[data-theme="light"] .auth-input:focus {
    border-color: rgba(67, 132, 255, 0.6);
    background: rgba(67, 132, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(67, 132, 255, 0.1);
}

[data-theme="light"] .auth-switch {
    color: #64748b;
}

[data-theme="light"] .auth-switch a {
    color: #4384ff;
}

[data-theme="light"] .auth-switch a:hover {
    color: #5B6EFF;
}

/* Responsive adjustments for auth modal */
@media (max-width: 480px) {
    .auth-container {
        padding: 32px 24px;
        margin: 16px;
        width: calc(100% - 32px);
    }
    
    .auth-name-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .auth-title {
        font-size: 22px;
    }
}

/* ============================================================================
   UNIFIED COLLAPSIBLE INFO BANNER
   Used across all screens for consistent instruction display
   ============================================================================ */

/* Banner Container - External positioning */
.vc-info-banner-container {
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

/* When collapsed, hide the container (icon moves to nav) */
.vc-info-banner-container.collapsed {
    display: none;
}

/* Full Banner State */
.vc-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 24px;
    background: rgba(67, 132, 255, 0.08);
    border: 1px solid rgba(67, 132, 255, 0.2);
    border-radius: 12px;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.3s ease;
    position: relative;
}

/* Info Icon in expanded banner */
.vc-info-banner > svg:first-child {
    flex-shrink: 0;
    margin-top: 2px;
    color: #4384ff;
    width: 20px;
    height: 20px;
}

.vc-info-banner-text {
    flex: 1;
    padding-right: 24px;
}

.vc-info-banner-text strong {
    color: rgba(255, 255, 255, 0.95);
}

.vc-info-banner-text kbd {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 11px;
    margin: 0 2px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Dismiss Button */
.vc-info-dismiss-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vc-info-dismiss-btn:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================================================
   NAV BAR INFO BUTTON
   Always visible, matches theme toggle button size
   ============================================================================ */

/* Nav Info Button - Match banner icon style */
.vc-nav-info-btn {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

/* Gradient border */
.vc-nav-info-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.vc-nav-info-btn .vc-info-letter {
    color: var(--brand-blue);
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    position: relative;
    z-index: 1;
}

.vc-nav-info-btn:hover {
    transform: scale(1.05);
}

.vc-nav-info-btn:hover::before {
    box-shadow: 0 0 12px rgba(67, 132, 255, 0.4);
}

/* Active state: banner is HIDDEN (button is prominent) */
.vc-nav-info-btn.banner-hidden {
    opacity: 1;
    border-color: rgba(67, 132, 255, 0.5);
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.15) 0%, rgba(123, 66, 255, 0.15) 100%);
}

.vc-nav-info-btn.banner-hidden:hover {
    border-color: rgba(67, 132, 255, 0.7);
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.25) 0%, rgba(123, 66, 255, 0.25) 100%);
}

/* Light theme */
[data-theme="light"] .vc-nav-info-btn {
    border-color: rgba(67, 132, 255, 0.2);
}

[data-theme="light"] .vc-nav-info-btn:hover {
    border-color: rgba(67, 132, 255, 0.4);
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.1) 0%, rgba(123, 66, 255, 0.1) 100%);
}

[data-theme="light"] .vc-nav-info-btn.banner-hidden {
    border-color: rgba(67, 132, 255, 0.4);
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.1) 0%, rgba(123, 66, 255, 0.1) 100%);
}

/* Info icon circle for banners */
.vc-info-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: 1.5px solid rgba(67, 132, 255, 0.8);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    background: rgba(67, 132, 255, 0.1);
}

.vc-info-icon-circle .vc-info-letter {
    font-size: 14px;
}

/* Light theme */
[data-theme="light"] .vc-info-icon-circle {
    border-color: rgba(67, 132, 255, 0.7);
    background: rgba(67, 132, 255, 0.08);
}

/* When collapsed, completely hide the container */
.vc-info-banner-container:empty,
.vc-info-banner-container[style*="display: none"] {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

/* Highlight Colors */
.vc-highlight-orange {
    color: var(--vc-status-partial);
    font-weight: 600;
}

.vc-highlight-green {
    color: var(--vc-status-supported);
    font-weight: 600;
}

.vc-highlight-blue {
    color: #4384ff;
    font-weight: 600;
}

/* Light theme for banner */
[data-theme="light"] .vc-info-banner {
    background: rgba(67, 132, 255, 0.06);
    border-color: rgba(67, 132, 255, 0.15);
    color: #475569;
}

[data-theme="light"] .vc-info-banner-text strong {
    color: #1e293b;
}

[data-theme="light"] .vc-info-dismiss-btn {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .vc-info-dismiss-btn:hover {
    color: rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.05);
}

/* ============================================================================
   EXTRACTION PRICING MODAL - PREMIUM DESIGN
   ============================================================================ */

.extraction-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}

.extraction-modal[style*="display: flex"],
.extraction-modal[style*="display: block"],
.extraction-modal.active {
    display: flex !important;
}

.extraction-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
}

.extraction-modal-container {
    position: relative;
    z-index: 1;
    background: linear-gradient(145deg, #1a1f2e, #0f1318);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 
        0 24px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Hide the X close button - we're using cancel button instead */
.extraction-modal-close {
    display: none;
}

.extraction-modal-content {
    padding: 40px 36px 32px;
}

/* Hero Section */
.extraction-hero {
    text-align: center;
    margin-bottom: 32px;
}

.extraction-count-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    position: relative;
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.12) 0%, rgba(123, 66, 255, 0.12) 100%);
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 0 0 2px #4384ff, 0 0 0 2px #7b42ff;
    background-image: linear-gradient(135deg, rgba(67, 132, 255, 0.12) 0%, rgba(123, 66, 255, 0.12) 100%);
}

.extraction-count-circle::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, #4384ff, #7b42ff);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.extraction-count-number {
    font-size: 44px;
    font-weight: 700;
    background: linear-gradient(135deg, #4384ff, #7b42ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.extraction-title {
    font-size: 22px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    letter-spacing: -0.02em;
}

/* Features List */
.extraction-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

.extraction-feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.extraction-feature-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(67, 132, 255, 0.2);
}

.extraction-feature-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.extraction-icon-green {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.15) 0%, rgba(123, 66, 255, 0.12) 100%);
    color: #7b42ff;
}

.extraction-icon-green svg {
    stroke: url(#icon-gradient-blue-purple);
}

/* SVG stroke gradient support for icons */
.extraction-icon-green svg {
    stroke: url(#icon-gradient-blue-purple);
}

.extraction-feature-text h4 {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 3px 0;
}

.extraction-feature-text p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    line-height: 1.4;
}

/* Balance Breakdown */
.extraction-balance-breakdown {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 28px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

.balance-row.balance-cost {
    padding-bottom: 14px;
}

.balance-row.balance-after {
    padding-top: 14px;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.balance-row.balance-after .balance-label {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.balance-row.balance-after .balance-value {
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

.balance-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    /* Changed min-width to auto to prevent it from forcing the value to wrap */
    min-width: auto; 
    margin-right: 16px; /* Adds safe spacing between label and value */
}

.balance-value {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    
    /* ADDED RULES FOR ALIGNMENT */
    text-align: right;       /* Forces the text to align to the right */
    white-space: nowrap;     /* Prevents the number and "credits" from splitting onto two lines */
    flex-grow: 1;            /* Ensures the container fills the available space to push content right */
}

.balance-negative {
    color: var(--vc-status-partial);
}

.balance-highlight {
    font-size: 18px;
    background: linear-gradient(135deg, var(--vc-status-supported), #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.balance-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin: 0;
    padding: 0;
}

/* Trial Message */
.extraction-trial-message {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 24px;
    font-size: 14px;
    color: var(--vc-status-supported);
    text-align: center;
}

/* Action Buttons Container */
.extraction-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Confirm Button - Blue-Purple Gradient */
.extraction-confirm-btn {
    width: 100%;
    padding: 18px 24px;
    background: linear-gradient(135deg, #4384ff 0%, #7b42ff 100%);
    border: none;
    border-radius: 14px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.extraction-confirm-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.extraction-confirm-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(67, 132, 255, 0.4);
}

.extraction-confirm-btn:hover:not(:disabled)::before {
    opacity: 1;
}

.extraction-confirm-btn:active:not(:disabled) {
    transform: translateY(0);
}

.extraction-confirm-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Cancel/Back Button */
.extraction-cancel-btn {
    width: 100%;
    padding: 14px 24px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.extraction-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.9);
}

.extraction-cancel-btn svg {
    width: 18px;
    height: 18px;
}

/* ============================================================================
   EXTRACTION MODAL - LIGHT THEME
   ============================================================================ */

[data-theme="light"] .extraction-modal-overlay {
    background: rgba(15, 23, 42, 0.6);
}

[data-theme="light"] .extraction-modal-container {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 
        0 24px 80px rgba(15, 23, 42, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

[data-theme="light"] .extraction-count-circle {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.08) 0%, rgba(123, 66, 255, 0.08) 100%);
}

[data-theme="light"] .extraction-count-circle::before {
    background: linear-gradient(135deg, #4384ff, #7b42ff);
}

[data-theme="light"] .extraction-title {
    color: #0f172a;
}

[data-theme="light"] .extraction-feature-item {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .extraction-feature-item:hover {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(67, 132, 255, 0.3);
}

[data-theme="light"] .extraction-icon-green {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.12) 0%, rgba(123, 66, 255, 0.08) 100%);
}

[data-theme="light"] .extraction-feature-text h4 {
    color: #0f172a;
}

[data-theme="light"] .extraction-feature-text p {
    color: #64748b;
}

[data-theme="light"] .extraction-balance-breakdown {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .balance-label {
    color: #475569;
}

[data-theme="light"] .balance-value {
    color: #0f172a;
}

[data-theme="light"] .balance-divider {
    background: linear-gradient(90deg, transparent, rgba(15, 23, 42, 0.12), transparent);
}

[data-theme="light"] .balance-row.balance-after .balance-label {
    color: #334155;
}

[data-theme="light"] .extraction-trial-message {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
    border-color: rgba(16, 185, 129, 0.2);
}

[data-theme="light"] .extraction-cancel-btn {
    border-color: rgba(15, 23, 42, 0.15);
    color: #475569;
}

[data-theme="light"] .extraction-cancel-btn:hover {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.25);
    color: #0f172a;
}

/* ============================================================================
   REFERRAL CODE INPUT STYLES
   ============================================================================ */

.referral-input-section {
    margin: 20px 0;
    padding: 16px 20px;
    background: rgba(139, 92, 246, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 12px;
}

.referral-input-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.referral-icon {
    width: 18px;
    height: 18px;
    color: #a78bfa;
}

.referral-input-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #f1f5f9);
}

.referral-optional {
    font-size: 12px;
    color: var(--text-muted, #64748b);
}

.referral-input-wrapper {
    display: flex;
    gap: 8px;
}

.referral-code-input {
    flex: 1;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 16px;
    font-family: 'SF Mono', 'Monaco', monospace;
    letter-spacing: 2px;
    color: var(--text-primary, #f1f5f9);
    text-transform: uppercase;
    transition: all 0.2s ease;
}

.referral-code-input:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.referral-code-input.validated {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.08);
}

.referral-code-input::placeholder {
    color: var(--text-muted, #64748b);
    letter-spacing: 0;
    text-transform: none;
}

.referral-validate-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 8px;
    color: #a78bfa;
    cursor: pointer;
    transition: all 0.2s ease;
}

.referral-validate-btn:hover:not(:disabled) {
    background: rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.5);
}

.referral-validate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.referral-validate-btn svg {
    width: 20px;
    height: 20px;
}

.referral-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(167, 139, 250, 0.3);
    border-top-color: #a78bfa;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.referral-feedback {
    margin-top: 8px;
    font-size: 13px;
    min-height: 20px;
    transition: all 0.2s ease;
}

.referral-feedback.valid {
    color: #34d399;
}

.referral-feedback.invalid {
    color: var(--vc-status-unsupported);
}

/* Light theme support */
[data-theme="light"] .referral-input-section {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.2);
}

[data-theme="light"] .referral-input-label {
    color: #0f172a;
}

[data-theme="light"] .referral-code-input {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.15);
    color: #0f172a;
}

[data-theme="light"] .referral-code-input:focus {
    background: rgba(15, 23, 42, 0.08);
}

/* ============================================================================
   PRIVACY SETTINGS MODAL - PREMIUM DESIGN
   ============================================================================ */

.privacy-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.privacy-modal-overlay.privacy-modal-active {
    opacity: 1;
    visibility: visible;
}

.privacy-modal-container {
    position: relative;
    z-index: 1;
    background: linear-gradient(145deg, #1a1f2e, #0f1318);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 
        0 24px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s ease;
}

.privacy-modal-active .privacy-modal-container {
    transform: translateY(0) scale(1);
}

.privacy-modal-content {
    padding: 40px 36px 32px;
}

/* Hero Section */
.privacy-hero {
    text-align: center;
    margin-bottom: 32px;
}

.privacy-icon-circle {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: white;
}

.privacy-title {
    font-size: 24px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.privacy-subtitle {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

/* Options List */
.privacy-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.privacy-option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.privacy-option-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.privacy-option-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.privacy-option-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.privacy-icon-blue {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.15) 0%, rgba(67, 132, 255, 0.08) 100%);
    color: #4384ff;
}

.privacy-icon-teal {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
    color: var(--vc-status-supported);
}

.privacy-icon-amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
    color: var(--vc-status-partial);
}

.privacy-option-text h4 {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 2px 0;
}

.privacy-option-text p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* Toggle Button Group */
.privacy-toggle-group {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
}

.privacy-toggle-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
}

.privacy-toggle-btn:hover:not(.active) {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
}

.privacy-toggle-btn.active {
    background: linear-gradient(135deg, var(--vc-status-supported) 0%, #059669 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

/* Info Note */
.privacy-info-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 12px;
    margin-bottom: 20px;
}

.privacy-info-note svg {
    flex-shrink: 0;
    color: #a78bfa;
    margin-top: 1px;
}

.privacy-info-note span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.privacy-info-note strong {
    color: #a78bfa;
}

/* Consent Checkbox */
.privacy-consent-section {
    margin-bottom: 24px;
}

.privacy-consent-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.privacy-consent-label:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.privacy-consent-label input[type="checkbox"] {
    display: none;
}

.privacy-checkbox-custom {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: transparent;
}

.privacy-checkbox-custom svg {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
    color: white;
}

.privacy-consent-label input:checked + .privacy-checkbox-custom {
    background: linear-gradient(135deg, var(--vc-status-supported) 0%, #059669 100%);
    border-color: transparent;
}

.privacy-consent-label input:checked + .privacy-checkbox-custom svg {
    opacity: 1;
    transform: scale(1);
}

.privacy-consent-label span {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

/* Action Buttons */
.privacy-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.privacy-continue-btn {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #4384ff 0%, #7b42ff 100%);
    border: none;
    border-radius: 14px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.privacy-continue-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(67, 132, 255, 0.4);
}

.privacy-continue-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.privacy-cancel-btn {
    width: 100%;
    padding: 14px 24px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.privacy-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================================================
   PRIVACY MODAL - LIGHT THEME
   ============================================================================ */

[data-theme="light"] .privacy-modal-overlay {
    background: rgba(15, 23, 42, 0.6);
}

[data-theme="light"] .privacy-modal-container {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 
        0 24px 80px rgba(15, 23, 42, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

[data-theme="light"] .privacy-title {
    color: #0f172a;
}

[data-theme="light"] .privacy-subtitle {
    color: #64748b;
}

[data-theme="light"] .privacy-option-item {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .privacy-option-item:hover {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .privacy-option-text h4 {
    color: #0f172a;
}

[data-theme="light"] .privacy-option-text p {
    color: #64748b;
}

[data-theme="light"] .privacy-toggle-group {
    background: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .privacy-toggle-btn {
    color: #64748b;
}

[data-theme="light"] .privacy-toggle-btn:hover:not(.active) {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .privacy-info-note {
    background: rgba(139, 92, 246, 0.06);
    border-color: rgba(139, 92, 246, 0.15);
}

[data-theme="light"] .privacy-info-note span {
    color: #475569;
}

[data-theme="light"] .privacy-consent-label {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .privacy-consent-label:hover {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .privacy-checkbox-custom {
    border-color: rgba(15, 23, 42, 0.25);
}

[data-theme="light"] .privacy-consent-label span {
    color: #334155;
}

[data-theme="light"] .privacy-cancel-btn {
    border-color: rgba(15, 23, 42, 0.15);
    color: #475569;
}

[data-theme="light"] .privacy-cancel-btn:hover {
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.25);
    color: #0f172a;
}

/* ============================================
   AUTH MODAL - ACCOUNT TYPE SELECTION
   Colors matched to existing modal style
   ============================================ */

/* Subtitle */
.account-type-subtitle {
    text-align: center;
    color: var(--vc-text-secondary);
    font-size: 14px;
    margin: -4px 0 24px 0;
}

/* Options container */
.account-type-options {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ============================================
   BASE CARD STYLES
   ============================================ */
.account-type-card {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.account-type-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.account-type-card.selected {
    border-color: #4384ff;
    background: rgba(67, 132, 255, 0.08);
}

/* ============================================
   PROFESSIONAL CARD
   ============================================ */
.account-type-card.card-professional {
    padding-top: 28px;
    border-color: rgba(67, 132, 255, 0.25);
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.05) 0%, rgba(123, 66, 255, 0.05) 100%);
}

.account-type-card.card-professional:hover {
    border-color: rgba(99, 102, 241, 0.5);
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.08) 0%, rgba(123, 66, 255, 0.08) 100%);
}

.account-type-card.card-professional.selected {
    border-color: var(--vc-accent-primary-hover);
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.12) 0%, rgba(123, 66, 255, 0.12) 100%);
}

/* ============================================
   MAIN ROW
   ============================================ */
.card-main-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}

.card-icon svg {
    width: 22px;
    height: 22px;
    color: var(--vc-text-secondary);
}

.card-icon.icon-pro {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.15), rgba(123, 66, 255, 0.15));
}

.card-icon.icon-pro svg {
    color: #a78bfa;
}

.card-text {
    flex: 1;
    min-width: 0;
}

.card-text strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2px;
}

.card-text span {
    display: block;
    font-size: 13px;
    color: var(--vc-text-secondary);
}

/* Radio button */
.card-radio {
    flex-shrink: 0;
}

.radio-inner {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.radio-inner svg {
    width: 12px;
    height: 12px;
    color: white;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
}

.account-type-card.selected .radio-inner {
    background: #4384ff;
    border-color: #4384ff;
}

.account-type-card.card-professional.selected .radio-inner {
    background: #8b5cf6;
    border-color: #8b5cf6;
}

.account-type-card.selected .radio-inner svg {
    opacity: 1;
    transform: scale(1);
}

/* ============================================
   FEATURES LIST
   ============================================ */
.card-features {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--vc-text-tertiary);
    line-height: 1.4;
}

.feature-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--vc-text-tertiary);
}

.card-professional .feature-item svg {
    color: var(--vc-accent-primary-hover);
}

.feature-item.highlight {
    color: #c4b5fd;
}

.feature-item.highlight strong {
    color: #e9d5ff;
}

/* ============================================
   FREE CREDITS BADGE
   ============================================ */
.card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #4384ff, #7b42ff);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.card-badge svg {
    width: 14px;
    height: 14px;
}

/* ============================================
   RECOMMENDED TAG
   ============================================ */
.card-recommended {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.12), rgba(123, 66, 255, 0.12));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

.card-recommended svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.card-recommended span {
    background: linear-gradient(135deg, #4384ff, #7b42ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================
   AUTH TYPE SELECTOR (Combined Back + Badge)
   ============================================ */
.auth-type-selector {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    overflow: hidden;
}

.auth-type-selector:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Left arrow section */
.auth-type-selector-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.auth-type-selector-arrow svg {
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.2s ease;
}

.auth-type-selector:hover .auth-type-selector-arrow {
    background: rgba(255, 255, 255, 0.08);
}

.auth-type-selector:hover .auth-type-selector-arrow svg {
    transform: translateX(-2px);
    color: rgba(255, 255, 255, 0.8);
}

/* Center content - icon and text */
.auth-type-selector-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    padding: 10px 14px;
}

.auth-type-selector-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.auth-type-selector-icon svg {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.7);
}

.auth-type-selector-text {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

/* Right "Change" label */
.auth-type-selector-change {
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.25s ease;
}

.auth-type-selector:hover .auth-type-selector-change {
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   PROFESSIONAL/TEAM VARIANT
   ============================================ */
.auth-type-selector.team-badge {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.08), rgba(123, 66, 255, 0.08));
    border-color: rgba(99, 102, 241, 0.25);
}

.auth-type-selector.team-badge:hover {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.12), rgba(123, 66, 255, 0.12));
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
}

.auth-type-selector.team-badge .auth-type-selector-arrow {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.1), rgba(123, 66, 255, 0.1));
    border-right-color: rgba(99, 102, 241, 0.2);
}

.auth-type-selector.team-badge .auth-type-selector-arrow svg {
    color: var(--vc-accent-primary-hover);
}

.auth-type-selector.team-badge:hover .auth-type-selector-arrow {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.15), rgba(123, 66, 255, 0.15));
}

.auth-type-selector.team-badge .auth-type-selector-icon svg {
    color: #a78bfa;
}

.auth-type-selector.team-badge .auth-type-selector-text {
    color: rgba(255, 255, 255, 0.9);
}

.auth-type-selector.team-badge .auth-type-selector-change {
    color: rgba(99, 102, 241, 0.6);
    border-left-color: rgba(99, 102, 241, 0.2);
}

.auth-type-selector.team-badge:hover .auth-type-selector-change {
    color: var(--vc-accent-primary-hover);
}

/* ============================================
   LIGHT THEME - AUTH TYPE SELECTOR
   ============================================ */
[data-theme="light"] .auth-type-selector {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
}

[data-theme="light"] .auth-type-selector:hover {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.2);
}

[data-theme="light"] .auth-type-selector-arrow {
    background: rgba(15, 23, 42, 0.04);
    border-right-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .auth-type-selector-arrow svg {
    color: #64748b;
}

[data-theme="light"] .auth-type-selector-icon svg {
    color: #475569;
}

[data-theme="light"] .auth-type-selector-text {
    color: #0f172a;
}

[data-theme="light"] .auth-type-selector-change {
    color: #94a3b8;
    border-left-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .auth-type-selector.team-badge {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.06), rgba(123, 66, 255, 0.06));
    border-color: rgba(99, 102, 241, 0.2);
}

[data-theme="light"] .auth-type-selector.team-badge:hover {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.1), rgba(123, 66, 255, 0.1));
    border-color: rgba(99, 102, 241, 0.35);
}

[data-theme="light"] .auth-type-selector.team-badge .auth-type-selector-text {
    background: linear-gradient(135deg, #4384ff, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================
   EMAIL HINT
   ============================================ */
.auth-email-hint {
    font-size: 12px;
    margin-top: 8px;
    min-height: 18px;
    line-height: 1.4;
}

.auth-email-hint:empty {
    display: none;
}

.auth-email-hint.success {
    color: var(--vc-status-supported);
}

.auth-email-hint.error {
    color: var(--vc-status-unsupported);
}

/* ============================================
   LIGHT THEME - ACCOUNT TYPE CARDS
   ============================================ */
[data-theme="light"] .account-type-subtitle {
    color: #64748b;
}

[data-theme="light"] .account-type-card {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .account-type-card:hover {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .account-type-card.selected {
    background: rgba(67, 132, 255, 0.06);
    border-color: #4384ff;
}

[data-theme="light"] .account-type-card.card-professional {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.04), rgba(123, 66, 255, 0.04));
    border-color: rgba(99, 102, 241, 0.15);
}

[data-theme="light"] .account-type-card.card-professional:hover {
    border-color: rgba(99, 102, 241, 0.3);
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.06), rgba(123, 66, 255, 0.06));
}

[data-theme="light"] .account-type-card.card-professional.selected {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.08), rgba(123, 66, 255, 0.08));
    border-color: #6366f1;
}

[data-theme="light"] .card-icon {
    background: rgba(100, 116, 139, 0.08);
}

[data-theme="light"] .card-icon svg {
    color: #64748b;
}

[data-theme="light"] .card-icon.icon-pro {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.1), rgba(123, 66, 255, 0.1));
}

[data-theme="light"] .card-text strong {
    color: #0f172a;
}

[data-theme="light"] .card-text span {
    color: #64748b;
}

[data-theme="light"] .radio-inner {
    border-color: rgba(15, 23, 42, 0.2);
}

[data-theme="light"] .card-features {
    border-top-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .feature-item {
    color: #64748b;
}

[data-theme="light"] .feature-item svg {
    color: #94a3b8;
}

[data-theme="light"] .card-professional .feature-item svg {
    color: #6366f1;
}

[data-theme="light"] .feature-item.highlight {
    color: #4f46e5;
}

[data-theme="light"] .feature-item.highlight strong {
    color: #4338ca;
}

[data-theme="light"] .card-recommended {
    background: linear-gradient(135deg, rgba(67, 132, 255, 0.08), rgba(123, 66, 255, 0.08));
}

[data-theme="light"] .card-recommended span {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
    .account-type-card {
        padding: 16px;
    }
    
    .account-type-card.card-professional {
        padding-top: 24px;
    }
    
    .card-icon {
        width: 40px;
        height: 40px;
    }
    
    .card-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .card-text strong {
        font-size: 14px;
    }
    
    .card-text span {
        font-size: 12px;
    }
    
    .card-badge {
        font-size: 10px;
        padding: 5px 12px;
    }
    
    .feature-item {
        font-size: 12px;
    }
}