/* =============================================================================
   V4 THEME - Light, Modern, Warm
   Loaded AFTER base.css to override the old styles.
   Outfit (headings) + Source Sans 3 (body) + JetBrains Mono (code).
   Warm off-white + terminal green accent.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    /* Core palette */
    --primary-color: #00d972;
    --secondary-color: #00d972;
    --background-color: #fafaf8;
    --text-color: #0c0c0d;
    --border-color: #e8e6e1;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #00d972;
    --highlight-color: #00d972;

    /* V4 tokens */
    --bg-primary: #fafaf8;
    --bg-secondary: #f5f4f0;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --border-subtle: #e8e6e1;
    --border-strong: #d5d3ce;
    --text-primary: #0c0c0d;
    --text-secondary: #5c5a55;
    --text-muted: #6b6966;
    --accent: #00d972;
    --accent-text: #008a47;  /* WCAG AA compliant green for text on light bg (4.5:1+) */
    --accent-bright: #00ff88;
    --accent-dim: rgba(0, 217, 114, 0.08);
    --accent-medium: rgba(0, 217, 114, 0.15);
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'Source Sans 3', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-sans: 'Source Sans 3', system-ui, sans-serif;
    --surface: #ffffff;
    --surface-light: #ffffff;
    --surface-elevated: #ffffff;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Skeleton loaders */
    --skeleton-strong: rgba(0, 0, 0, 0.06);
    --skeleton-light: rgba(0, 0, 0, 0.04);

    /* Override animations.css dark variables */
    --background: #fafaf8;
    --danger: #ef4444;
    --success: #10b981;
    --warning: #f59e0b;

    /* Override old variables */
    --primary-dark: #00b85e;
    --primary-light: #00ff88;
    --accent-cyan: #00d972;
    --accent-purple: #00d972;
    --gradient-primary: linear-gradient(135deg, #00d972 0%, #00ff88 100%);
    --gradient-secondary: linear-gradient(135deg, #00d972 0%, #00ff88 100%);
    --gradient-success: linear-gradient(135deg, #00d972 0%, #00ff88 100%);
    --gradient-tertiary: linear-gradient(135deg, #00d972 0%, #00ff88 100%);
    --gradient-dark: linear-gradient(135deg, #fafaf8, #f5f4f0);
    --wizard-primary: #00d972;
}

/* =============================================================================
   GLOBAL OVERRIDES
   ============================================================================= */
body {
    font-family: var(--font-body) !important;
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

/* Rounded corners - V4 = soft edges */
.btn { border-radius: var(--radius-sm) !important; }
.card, .alert, .modal-content { border-radius: var(--radius-md) !important; }
.badge, .nav-badge { border-radius: 6px !important; }
input, select, textarea { border-radius: var(--radius-sm) !important; }

/* =============================================================================
   NAVBAR
   ============================================================================= */
.navbar {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.logo {
    font-family: var(--font-display) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary) !important;
}

.navbar-end .lang-switcher .lang-btn {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.navbar-end .lang-switcher .lang-btn:hover,
.navbar-end .lang-switcher .lang-btn.active {
    color: var(--accent-text);
}

/* User menu */
.user-avatar-modern,
.user-avatar-large {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600;
}

.user-plan-badge,
.plan-badge-large {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--accent-dim) !important;
    color: var(--accent-text) !important;
    border: 1px solid rgba(0, 217, 114, 0.25) !important;
    border-radius: 6px !important;
    font-size: 0.65rem;
}

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

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

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

.user-dropdown-menu {
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
}

.user-dropdown-header {
    border-bottom: 1px solid var(--border-subtle);
}

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

.user-dropdown-header p {
    color: var(--text-secondary) !important;
}

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

.user-dropdown-item:hover {
    background: var(--accent-dim) !important;
    color: var(--accent-text) !important;
}

.user-dropdown-item i {
    color: var(--text-muted);
}

.user-dropdown-item:hover i {
    color: var(--accent-text) !important;
}

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

.user-dropdown-item.logout-item:hover {
    background: rgba(239, 68, 68, 0.06) !important;
    color: var(--error-color) !important;
}

.notification-dropdown {
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
}

.notification-badge {
    background: var(--error-color) !important;
    border-radius: 6px !important;
}

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

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

/* =============================================================================
   SIDEBAR
   ============================================================================= */
.sidebar {
    background: #ffffff !important;
    border-right: 1px solid var(--border-subtle) !important;
    overflow: hidden;
    bottom: 42px !important;
    z-index: 101;
}

.sidebar-nav {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem !important;
}

.sidebar-footer {
    flex-shrink: 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--border-subtle) !important;
}

.sidebar-nav .nav-item {
    font-family: var(--font-body);
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    color: var(--text-secondary);
    border-radius: 0 !important;
}

.sidebar-nav .nav-item:hover {
    background: var(--accent-dim) !important;
    color: var(--accent-text) !important;
    border-left-color: var(--accent);
}

.sidebar-nav .nav-item.active {
    background: var(--accent-dim) !important;
    color: var(--accent-text) !important;
    border-left-color: var(--accent) !important;
    font-weight: 600;
}

.sidebar-nav .nav-item.active i,
.sidebar-nav .nav-item.active .nav-icon-wrapper i {
    color: var(--accent-text) !important;
}

.sidebar-nav .nav-item:hover i {
    color: var(--accent-text) !important;
}

.sidebar-nav .nav-item i {
    color: var(--text-muted);
}

.nav-item-glow {
    display: none !important;
}

.nav-section-title {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
}

.nav-section-line {
    background: var(--border-subtle) !important;
}

/* Sidebar badges */
.nav-badge {
    font-family: var(--font-mono) !important;
    font-size: 0.55rem !important;
    letter-spacing: 0.03em;
    border-radius: 4px !important;
    font-weight: 600;
}

.nav-badge-new,
.nav-badge-beta {
    background: var(--accent-dim) !important;
    color: var(--accent-text) !important;
    border: 1px solid rgba(0, 217, 114, 0.25) !important;
}

.nav-badge-pro,
.nav-badge-team {
    background: rgba(245, 158, 11, 0.08) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

.nav-badge-soon {
    background: rgba(0, 0, 0, 0.03) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-subtle) !important;
}

/* Plan indicator in sidebar footer */
.plan-indicator {
    background: var(--accent-dim) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-sm) !important;
}

.plan-icon i {
    color: var(--accent-text) !important;
}

/* =============================================================================
   MAIN CONTENT
   ============================================================================= */
.main-content {
    background: var(--bg-primary);
}

/* =============================================================================
   CARDS
   ============================================================================= */
.card,
.stat-card,
.glass-card,
.analysis-card,
.info-card,
.settings-card,
.feature-card,
.pricing-card,
.balance-card,
.plan-card,
.project-card,
.integration-card,
.vuln-card,
.notification-card,
.session-card,
[class*="-card"]:not(.vulnerability-card) {
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.2s ease;
}

[class*="-card"]:not(.vulnerability-card):hover {
    border-color: var(--border-strong) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-1px) !important;
}

/* Glass card overrides */
.glass-card,
.glass-card::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #ffffff !important;
}

/* =============================================================================
   BUTTONS
   ============================================================================= */
.btn,
button.btn,
a.btn {
    font-family: var(--font-body) !important;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--radius-sm) !important;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.btn-primary,
.btn-success {
    background: var(--accent) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 217, 114, 0.25);
}

.btn-primary:hover,
.btn-success:hover {
    background: #00b85e !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(0, 217, 114, 0.35);
    transform: translateY(-1px);
}

.btn-secondary,
.btn-outline {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1.5px solid var(--border-strong) !important;
}

.btn-secondary:hover,
.btn-outline:hover {
    background: var(--bg-secondary) !important;
    border-color: var(--text-primary) !important;
    color: var(--text-primary) !important;
}

.btn-danger {
    background: var(--error-color) !important;
    color: #fff !important;
}

.btn-danger:hover {
    background: #dc2626 !important;
}

/* =============================================================================
   FORMS & INPUTS
   ============================================================================= */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select,
.form-control,
.form-input {
    font-family: var(--font-body) !important;
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1.5px solid var(--border-subtle) !important;
    border-radius: var(--radius-sm) !important;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(0, 217, 114, 0.12) !important;
}

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

label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* =============================================================================
   ALERTS & FLASH MESSAGES
   ============================================================================= */
.alert {
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-body);
    color: var(--text-primary) !important;
}

.alert-success {
    border-left: 3px solid var(--success-color) !important;
    background: rgba(16, 185, 129, 0.04) !important;
}

.alert-error,
.alert-danger {
    border-left: 3px solid var(--error-color) !important;
    background: rgba(239, 68, 68, 0.04) !important;
}

.alert-warning {
    border-left: 3px solid var(--warning-color) !important;
    background: rgba(245, 158, 11, 0.04) !important;
}

.alert-info {
    border-left: 3px solid var(--accent) !important;
    background: var(--accent-dim) !important;
}

.alert-content span,
.alert-content {
    color: var(--text-primary) !important;
}

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

/* =============================================================================
   TABLES
   ============================================================================= */
table {
    border-collapse: collapse;
}

table th {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
}

table td {
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

table tr:hover td {
    background: var(--accent-dim);
}

/* =============================================================================
   BADGES & TAGS
   ============================================================================= */
.badge,
.tag,
.status-badge,
.severity-badge,
[class*="badge"]:not(.notification-badge) {
    font-family: var(--font-mono) !important;
    font-size: 0.65rem !important;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: 6px !important;
}

/* Severity colors */
.badge-critical,
.severity-critical {
    background: rgba(239, 68, 68, 0.08) !important;
    color: #dc2626 !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

.badge-high,
.severity-high {
    background: rgba(249, 115, 22, 0.08) !important;
    color: #ea580c !important;
    border: 1px solid rgba(249, 115, 22, 0.2) !important;
}

.badge-medium,
.severity-medium {
    background: rgba(245, 158, 11, 0.08) !important;
    color: #d97706 !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

.badge-low,
.severity-low {
    background: rgba(59, 130, 246, 0.08) !important;
    color: #2563eb !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

/* =============================================================================
   TABS & NAVIGATION
   ============================================================================= */
.tab,
.tab-btn,
[class*="tab-"] {
    font-family: var(--font-body);
    font-weight: 600;
    border-radius: var(--radius-sm) !important;
}

.tab-btn.active,
.tab.active,
[class*="tab-"].active {
    color: var(--accent-text) !important;
    border-color: var(--accent) !important;
    background: var(--accent-dim) !important;
}

/* =============================================================================
   PROGRESS BARS
   ============================================================================= */
.progress-bar,
progress,
[class*="progress"] {
    border-radius: var(--radius-sm) !important;
    background: var(--bg-secondary);
}

.progress-bar-fill,
progress::-webkit-progress-value {
    background: var(--accent) !important;
    border-radius: var(--radius-sm) !important;
}

/* =============================================================================
   MODALS
   ============================================================================= */
.modal-content,
.modal-dialog {
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}

.modal-overlay,
.modal-backdrop {
    background: rgba(12, 12, 13, 0.4) !important;
    backdrop-filter: blur(4px);
}

/* =============================================================================
   SCROLLBARS - Thin, subtle
   ============================================================================= */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* =============================================================================
   FOOTER
   ============================================================================= */
.site-footer {
    background: #ffffff !important;
    border-top: 1px solid var(--border-subtle) !important;
}

.site-footer a {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-muted) !important;
}

.site-footer a:hover {
    color: var(--accent-text) !important;
}

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

.footer-separator {
    color: var(--border-subtle) !important;
}

/* Cookie notice */
.cookie-notice {
    background: #ffffff !important;
    border-top: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

.cookie-notice p {
    color: var(--text-secondary) !important;
}

.cookie-btn {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-body) !important;
    font-weight: 600;
}

/* =============================================================================
   AUTH PAGES (login, register, forgot-password)
   ============================================================================= */
.auth-container,
.auth-card,
.login-card,
.register-card {
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
}

.auth-form h2,
.auth-card h2,
.register-card h2 {
    color: var(--text-primary) !important;
}

.auth-form p,
.auth-card p,
.register-card p {
    color: var(--text-secondary) !important;
}

/* Register page - override dark-theme hardcoded colors in register.css */
.register-card label,
.register-card .form-group label {
    color: var(--text-primary) !important;
}

.register-card input[type="text"],
.register-card input[type="email"],
.register-card input[type="password"],
.register-card select {
    background: var(--bg-input, #ffffff) !important;
    border-color: var(--border-strong, #d5d3ce) !important;
    color: var(--text-primary) !important;
}

.register-card .password-strength,
.register-card .requirement,
.register-card .login-link,
.register-card .terms-text {
    color: var(--text-secondary) !important;
}

.register-card .subtitle,
.register-card .form-hint {
    color: var(--text-muted) !important;
}

/* Google OAuth button */
.google-btn,
.oauth-btn {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-body) !important;
    border: 1.5px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-sm) !important;
}

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

/* =============================================================================
   LEGAL PAGES
   ============================================================================= */
.legal-page,
.legal-content {
    font-family: var(--font-body);
    color: var(--text-primary);
}

.legal-content h1,
.legal-content h2,
.legal-content h3 {
    font-family: var(--font-display);
    color: var(--text-primary);
}

/* =============================================================================
   ANALYSIS STATUS / RESULTS
   ============================================================================= */
.status-running,
.status-processing {
    color: var(--accent-text) !important;
}

.status-completed,
.status-success {
    color: var(--success-color) !important;
}

.status-failed,
.status-error {
    color: var(--error-color) !important;
}

[class*="score"] {
    font-family: var(--font-mono);
}

/* =============================================================================
   EMPTY STATES
   ============================================================================= */
.empty-state,
.no-data,
[class*="empty"] {
    color: var(--text-muted);
}

.empty-state i,
.no-data i {
    color: var(--border-strong);
}

/* =============================================================================
   INTEGRATIONS PAGE
   ============================================================================= */
.integration-card .integration-icon {
    border-radius: var(--radius-sm) !important;
}

/* =============================================================================
   SELECTION & HIGHLIGHT
   ============================================================================= */
::selection {
    background: rgba(0, 150, 80, 0.3);
    color: #000;
}

/* =============================================================================
   LINKS
   ============================================================================= */
a {
    color: var(--accent-text);
}

a:hover {
    color: #00b85e;
}

/* =============================================================================
   CODE BLOCKS
   ============================================================================= */
code,
pre,
.code-block {
    font-family: var(--font-mono) !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-primary) !important;
}

/* =============================================================================
   COLOR OVERRIDE - Kill all old hardcoded blue/purple/dark values
   ============================================================================= */

:root {
    --primary-color: #00d972 !important;
    --primary-dark: #00b85e !important;
    --primary-light: #00ff88 !important;
    --accent-cyan: #00d972 !important;
    --accent-purple: #00d972 !important;
    --gradient-primary: linear-gradient(135deg, #00d972 0%, #00ff88 100%) !important;
    --gradient-secondary: linear-gradient(135deg, #00d972 0%, #00ff88 100%) !important;
    --gradient-success: linear-gradient(135deg, #00d972 0%, #00ff88 100%) !important;
    --gradient-tertiary: linear-gradient(135deg, #00d972 0%, #00ff88 100%) !important;
    --gradient-dark: linear-gradient(135deg, #fafaf8, #f5f4f0) !important;
    --wizard-primary: #00d972 !important;
}

/* Sidebar active */
.sidebar-nav .nav-item.active,
.sidebar-nav .nav-item:hover,
.nav-item.active {
    background: var(--accent-dim) !important;
    color: var(--accent-text) !important;
}

.sidebar-nav .nav-item.active i,
.sidebar-nav .nav-item:hover i {
    color: var(--accent-text) !important;
}

/* Toggle switch */
.toggle-switch input:checked + .toggle-slider,
.toggle-input:checked + .toggle-slider {
    background: var(--accent) !important;
}

/* Breadcrumb */
.breadcrumb-item.active,
.breadcrumb-item a:hover {
    color: var(--accent-text) !important;
}

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

/* Section headers / page titles */
.section-title-modern,
.page-title,
.page-title-text,
.section-header h2,
.dashboard-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    background-clip: unset !important;
    color: var(--text-primary) !important;
}

/* Stat cards */
.stat-card .stat-icon,
.summary-card .stat-icon,
.stat-icon-wrapper {
    background: var(--accent-dim) !important;
    color: var(--accent-text) !important;
    border-radius: var(--radius-sm) !important;
}

.stat-card .stat-icon i,
.summary-card .stat-icon i,
.stat-icon-wrapper i {
    color: var(--accent-text) !important;
}

/* Step indicators / wizard */
.step-number,
.step-indicator.active .step-number,
.wizard-step.active .step-number,
.step.active .step-number {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 50% !important;
}

.step-indicator.completed .step-number,
.wizard-step.completed .step-number,
.step.completed .step-number {
    background: var(--accent) !important;
    color: #fff !important;
}

.step-connector.active,
.step-line.active {
    background: var(--accent) !important;
}

/* Gradient text → accent color */
.gradient-text,
.text-gradient,
[class*="gradient-text"] {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--accent-text) !important;
    background-clip: unset !important;
    color: var(--accent-text) !important;
}

/* Feature icons */
.feature-icon,
.info-icon,
.accent-icon,
[class*="feature-icon"] {
    background: var(--accent-dim) !important;
    color: var(--accent-text) !important;
    border-radius: var(--radius-sm) !important;
}

.feature-icon i,
.info-icon i {
    color: var(--accent-text) !important;
}

/* Scan type badges */
.scan-type-badge,
.analysis-type-badge,
[class*="type-badge"] {
    background: var(--accent-dim) !important;
    color: var(--accent-text) !important;
    border: 1px solid rgba(0, 217, 114, 0.2) !important;
    border-radius: 6px !important;
}

/* Progress shimmer */
.progress-bar-shimmer,
.progress-shimmer,
.shimmer-bar {
    background: linear-gradient(90deg, var(--accent) 0%, #00ff88 50%, var(--accent) 100%) !important;
}

/* Alert modal */
.alert-modal.info .alert-icon,
.alert-icon.info {
    color: var(--accent-text) !important;
}

/* File input focus */
.file-input:focus,
.upload-card:focus-within {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(0, 217, 114, 0.12) !important;
}

/* Card hover - soft shadow, NOT glow */
.card:hover,
.glass-card:hover,
[class*="-card"]:hover {
    box-shadow: var(--shadow-md) !important;
}

/* Icon gradient */
.icon-gradient,
[class*="icon-gradient"] {
    background: linear-gradient(135deg, #00d972, #00ff88) !important;
}

/* Auth form inputs */
.auth-form input:focus,
.register-form input:focus,
.login-form input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(0, 217, 114, 0.12) !important;
}

.auth-form .form-link,
.register-form .form-link,
.login-form .form-link,
.auth-link {
    color: var(--accent-text) !important;
}

.auth-form .btn-primary,
.register-form .btn-primary,
.login-form .btn-primary,
.auth-submit-btn {
    background: var(--accent) !important;
    color: #fff !important;
}

.auth-form .btn-primary:hover,
.register-form .btn-primary:hover,
.login-form .btn-primary:hover,
.auth-submit-btn:hover {
    background: #00b85e !important;
    color: #fff !important;
}

/* Password strength */
.password-strength-bar,
.strength-meter-fill {
    background: var(--accent) !important;
    border-radius: 4px !important;
}

.password-strength-text,
.strength-label {
    color: var(--accent-text) !important;
}

/* Checkbox */
.custom-checkbox:checked,
.form-check-input:checked {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Notifications */
.notification-icon.info,
.notif-icon-info {
    color: var(--accent-text) !important;
}

.notification-icon.update,
.notif-icon-update {
    color: var(--accent-text) !important;
}

.notification-badge-header,
.mark-all-read {
    background: var(--accent) !important;
    color: #fff !important;
}

.notification-header,
.notification-modal-header {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

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

.notification-dropdown-footer {
    border-top: 1px solid var(--border-subtle);
}

.view-all-link {
    color: var(--accent-text) !important;
}

/* Wizard */
.wizard-btn-primary,
.wizard-next-btn,
.wizard-submit-btn {
    background: var(--accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 217, 114, 0.25) !important;
}

.wizard-btn-primary:hover,
.wizard-next-btn:hover,
.wizard-submit-btn:hover {
    background: #00b85e !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(0, 217, 114, 0.35) !important;
}

.wizard-step-indicator.active,
.wizard-progress-fill {
    background: var(--accent) !important;
}

.wizard-badge,
.scan-badge {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: 6px !important;
}

/* Survey */
.survey-submit-btn,
.survey-btn-primary {
    background: var(--accent) !important;
    color: #fff !important;
}

.survey-option:hover,
.survey-option.selected {
    border-color: var(--accent) !important;
}

.survey-option.selected {
    background: var(--accent-dim) !important;
}

.survey-star.active,
.rating-star.active {
    color: var(--warning-color) !important;
}

.survey-header,
.survey-modal-header {
    background: var(--accent) !important;
    color: #fff !important;
}

/* Upgrade prompts */
.upgrade-card,
.upgrade-prompt,
[class*="upgrade-"]:not(.upgrade-banner) {
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: var(--shadow-sm) !important;
}

.upgrade-card:hover,
.upgrade-prompt:hover {
    border-color: var(--accent) !important;
    box-shadow: var(--shadow-md) !important;
}

.upgrade-btn,
.upgrade-cta-btn,
.upgrade-primary-btn {
    background: var(--accent) !important;
    color: #fff !important;
}

.upgrade-btn:hover,
.upgrade-cta-btn:hover,
.upgrade-primary-btn:hover {
    background: #00b85e !important;
    color: #fff !important;
}

.upgrade-icon,
.upgrade-badge {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
}

.upgrade-feature-icon {
    color: var(--accent-text) !important;
}

.upgrade-progress-fill,
.usage-progress-fill {
    background: var(--accent) !important;
}

.upgrade-banner {
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
}

.upgrade-banner h3 {
    color: var(--text-primary) !important;
}

.upgrade-banner p {
    color: var(--text-secondary) !important;
}

/* Waitlist */
.waitlist-btn,
.waitlist-submit-btn {
    background: var(--accent) !important;
    color: #fff !important;
}

.waitlist-feature-icon,
.waitlist-feature-icon.shield,
.waitlist-feature-icon.cloud,
.waitlist-feature-icon.teams,
.waitlist-feature-icon.enterprise {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
}

.waitlist-input:focus {
    border-color: var(--accent) !important;
}

.waitlist-check-icon {
    background: var(--accent) !important;
    color: #fff !important;
}

/* Dashboard stat cards */
.dashboard-stat-card,
.stat-card-gradient {
    background: var(--accent-dim) !important;
}

/* Quota bar */
.quota-bar-fill,
.quota-progress-fill,
.usage-bar-fill {
    background: var(--accent) !important;
}

.quota-header,
.quota-icon {
    color: var(--accent-text) !important;
}

/* Pulse animation - V4 version */
.pulse-dot,
.status-dot.active,
.live-indicator {
    background: var(--accent) !important;
    box-shadow: 0 0 0 0 rgba(0, 217, 114, 0.4) !important;
    animation: v4-pulse 2s infinite !important;
}

@keyframes v4-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 217, 114, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(0, 217, 114, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 217, 114, 0); }
}

/* Settings */
.settings-section-title,
.settings-tab.active,
.settings-nav-item.active {
    color: var(--accent-text) !important;
    border-color: var(--accent) !important;
}

.settings-tab.active,
.settings-nav-item.active {
    background: var(--accent-dim) !important;
}

/* Page header */
.page-header,
.content-header {
    background: var(--bg-primary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* Catch-all gradient overrides */
.accent-gradient,
.bg-gradient,
[style*="linear-gradient"][style*="667eea"],
[style*="linear-gradient"][style*="4f46e5"],
[style*="linear-gradient"][style*="764ba2"] {
    background: linear-gradient(135deg, #00d972 0%, #00ff88 100%) !important;
}

/* =============================================================================
   SEVERITY BADGE COLORS - Visible on light backgrounds
   ============================================================================= */
.severity-critical { background: rgba(239, 68, 68, 0.08) !important; color: #dc2626 !important; border-left: 3px solid #ef4444 !important; }
.severity-high { background: rgba(249, 115, 22, 0.08) !important; color: #ea580c !important; border-left: 3px solid #f97316 !important; }
.severity-medium { background: rgba(234, 179, 8, 0.08) !important; color: #b45309 !important; border-left: 3px solid #eab308 !important; }
.severity-low { background: rgba(59, 130, 246, 0.08) !important; color: #2563eb !important; border-left: 3px solid #3b82f6 !important; }
.severity-info { background: rgba(107, 114, 128, 0.08) !important; color: #6b7280 !important; border-left: 3px solid #9ca3af !important; }

.severity-indicator.critical { background: #ef4444 !important; color: white !important; border-radius: 6px !important; }
.severity-indicator.high { background: #f97316 !important; color: white !important; border-radius: 6px !important; }
.severity-indicator.medium { background: #eab308 !important; color: #000 !important; border-radius: 6px !important; }
.severity-indicator.low { background: #3b82f6 !important; color: white !important; border-radius: 6px !important; }

/* =============================================================================
   Z-INDEX FIX
   ============================================================================= */
.status-dropdown-menu { z-index: 200 !important; }
#rescanModal { z-index: 1050 !important; }

/* =============================================================================
   DASHBOARD-SPECIFIC - Fix inline styles that hardcode dark colors
   ============================================================================= */
.dashboard-container {
    background: var(--bg-primary) !important;
}

.security-overview-grid {
    min-height: 220px;
}

/* Metric cards text */
.metric-value {
    color: var(--text-primary) !important;
}

.metric-card h3 {
    color: var(--text-secondary) !important;
}

/* Recent scans cards */
.scan-card,
.recent-scan-item {
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
}

.scan-card:hover,
.recent-scan-item:hover {
    border-color: var(--accent) !important;
}

/* History page cards */
.analysis-list-item,
.history-card {
    background: #ffffff !important;
    border: 1px solid var(--border-subtle) !important;
}

/* Skeleton loading states - light theme */
.skeleton-loading {
    background: var(--bg-secondary) !important;
}

/* =============================================================================
   INLINE STYLE OVERRIDES - For templates with hardcoded dark colors
   ============================================================================= */
.btn-new-analysis {
    background: var(--accent) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 2px 8px rgba(0, 217, 114, 0.25) !important;
}

.btn-new-analysis:hover {
    background: #00b85e !important;
    transform: translateY(-1px);
}

/* Fix hardcoded rgba(255,255,255,0.05) borders on light bg */
[style*="rgba(255, 255, 255, 0.05)"] {
    border-color: var(--border-subtle) !important;
}

/* Plan card override */
.plan-card .plan-header {
    color: var(--text-primary);
}

/* Fix chart backgrounds */
#mainSecurityGauge,
#vulnerabilityTrendChart,
#projectsSparkline,
#issuesSparkline,
#scansSparkline {
    background: transparent !important;
}

/* =============================================================================
   RETRY OPTIONS (analysis_status.html)
   ============================================================================= */
.retry-options {
    padding: 12px;
    border-radius: 8px;
}
.retry-options__title {
    margin: 0 0 8px;
    font-weight: 600;
}
.retry-options__desc {
    margin: 0 0 12px;
}
.retry-options--warning {
    border: 1px solid #f59e0b;
    background: rgba(245, 158, 11, 0.08);
}
.retry-options--warning .retry-options__title { color: var(--warning-color, #f59e0b); }
.retry-options--warning .retry-options__desc { color: var(--text-secondary); }

.retry-options--info {
    border: 1px solid #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}
.retry-options--info .retry-options__title { color: #3b82f6; }
.retry-options--info .retry-options__desc { color: var(--text-secondary); }

.retry-options--purple {
    border: 1px solid #8b5cf6;
    background: rgba(139, 92, 246, 0.08);
}
.retry-options--purple .retry-options__title { color: #8b5cf6; }
.retry-options--purple .retry-options__desc { color: var(--text-secondary); }

/* =============================================================================
   DARK MODE - [data-theme="dark"]
   Warm charcoal, not pure black. Same accent green but brighter.
   Proper WCAG AA contrast on all text.
   ============================================================================= */
[data-theme="dark"] {
    --primary-color: #00ff88;
    --secondary-color: #00ff88;
    --background-color: #0e0e11;
    --text-color: #eeedf2;
    --border-color: #2a2a32;
    --success-color: #34d399;
    --warning-color: #fbbf24;
    --error-color: #f87171;
    --info-color: #00ff88;
    --highlight-color: #00ff88;

    --bg-primary: #0e0e11;
    --bg-secondary: #16161a;
    --bg-card: #1a1a1f;
    --bg-input: #1a1a1f;
    --border-subtle: #2a2a32;
    --border-strong: #3a3a44;
    --text-primary: #eeedf2;
    --text-secondary: #a09fa8;
    --text-muted: #9a99a8;
    --accent: #00ff88;
    --accent-text: #00ff88;  /* Bright green fine on dark bg */
    --accent-bright: #33ffaa;
    --accent-dim: rgba(0, 255, 136, 0.08);
    --accent-medium: rgba(0, 255, 136, 0.15);
    --surface: #1a1a1f;
    --surface-light: #1a1a1f;
    --surface-elevated: #222228;
    --background: #0e0e11;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);

    /* Skeleton loaders */
    --skeleton-strong: rgba(255, 255, 255, 0.06);
    --skeleton-light: rgba(255, 255, 255, 0.04);

    /* Override old variable names */
    --primary-dark: #00d972;
    --primary-light: #33ffaa;
    --accent-cyan: #00ff88;
    --accent-purple: #00ff88;
    --gradient-primary: linear-gradient(135deg, #00ff88 0%, #00d972 100%);
    --gradient-secondary: linear-gradient(135deg, #00ff88 0%, #00d972 100%);
    --gradient-success: linear-gradient(135deg, #00ff88 0%, #00d972 100%);
    --gradient-tertiary: linear-gradient(135deg, #00ff88 0%, #00d972 100%);
    --gradient-dark: linear-gradient(135deg, #0e0e11, #16161a);
    --wizard-primary: #00ff88;

    color-scheme: dark;
}

/* --- Dark mode body --- */
[data-theme="dark"] body {
    background-color: #0e0e11 !important;
    color: #eeedf2;
}

/* --- Dark mode navbar --- */
[data-theme="dark"] .navbar {
    background: rgba(14, 14, 17, 0.92) !important;
    border-bottom-color: #2a2a32 !important;
}

[data-theme="dark"] .logo {
    color: #eeedf2 !important;
}

[data-theme="dark"] .user-menu-button,
[data-theme="dark"] .user-name {
    color: #eeedf2 !important;
}

[data-theme="dark"] .user-menu-arrow,
[data-theme="dark"] .notification-bell {
    color: #9a99a8 !important;
}

[data-theme="dark"] .notification-bell:hover {
    color: #eeedf2 !important;
}

[data-theme="dark"] .user-dropdown-menu {
    background: #1a1a1f !important;
    border-color: #2a2a32 !important;
}

[data-theme="dark"] .user-dropdown-item {
    color: #eeedf2 !important;
}

[data-theme="dark"] .user-dropdown-item:hover {
    background: rgba(0, 255, 136, 0.08) !important;
    color: #00ff88 !important;
}

[data-theme="dark"] .user-dropdown-divider {
    background: #2a2a32 !important;
}

[data-theme="dark"] .notification-dropdown {
    background: #1a1a1f !important;
    border-color: #2a2a32 !important;
}

[data-theme="dark"] .notification-dropdown-header h3 {
    color: #eeedf2 !important;
}

/* --- Dark mode sidebar --- */
[data-theme="dark"] .sidebar {
    background: #16161a !important;
    border-right-color: #2a2a32 !important;
}

[data-theme="dark"] .sidebar-nav .nav-item {
    color: #a09fa8;
}

[data-theme="dark"] .sidebar-nav .nav-item i {
    color: #9a99a8;
}

[data-theme="dark"] .sidebar-nav .nav-item:hover,
[data-theme="dark"] .sidebar-nav .nav-item.active {
    color: #00ff88 !important;
    background: rgba(0, 255, 136, 0.08) !important;
}

[data-theme="dark"] .sidebar-nav .nav-item:hover i,
[data-theme="dark"] .sidebar-nav .nav-item.active i {
    color: #00ff88 !important;
}

[data-theme="dark"] .sidebar-footer {
    border-top-color: #2a2a32 !important;
}

/* --- Dark mode main content --- */
[data-theme="dark"] .main-content {
    background: #0e0e11;
}

/* --- Dark mode cards --- */
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .glass-card,
[data-theme="dark"] .analysis-card,
[data-theme="dark"] .info-card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .project-card,
[data-theme="dark"] .integration-card,
[data-theme="dark"] .vuln-card,
[data-theme="dark"] .notification-card,
[data-theme="dark"] .session-card,
[data-theme="dark"] [class*="-card"]:not(.vulnerability-card) {
    background: #1a1a1f !important;
    border-color: #2a2a32 !important;
}

[data-theme="dark"] [class*="-card"]:not(.vulnerability-card):hover {
    border-color: #3a3a44 !important;
}

[data-theme="dark"] .glass-card,
[data-theme="dark"] .glass-card::before {
    background: #1a1a1f !important;
}

/* --- Dark mode buttons --- */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-success {
    background: #00ff88 !important;
    color: #0e0e11 !important;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-success:hover {
    background: #33ffaa !important;
    color: #0e0e11 !important;
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-outline {
    color: #eeedf2 !important;
    border-color: #3a3a44 !important;
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-outline:hover {
    background: #222228 !important;
    border-color: #eeedf2 !important;
}

/* --- Dark mode forms --- */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-input {
    background: #1a1a1f !important;
    color: #eeedf2 !important;
    border-color: #2a2a32 !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: #00ff88 !important;
    box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.15) !important;
}

[data-theme="dark"] ::placeholder {
    color: #9a99a8 !important;
}

[data-theme="dark"] label {
    color: #a09fa8;
}

/* --- Dark mode alerts --- */
[data-theme="dark"] .alert {
    background: #1a1a1f !important;
    border-color: #2a2a32 !important;
    color: #eeedf2 !important;
}

[data-theme="dark"] .alert-content span,
[data-theme="dark"] .alert-content {
    color: #eeedf2 !important;
}

[data-theme="dark"] .alert-success { background: rgba(52, 211, 153, 0.08) !important; }
[data-theme="dark"] .alert-error,
[data-theme="dark"] .alert-danger { background: rgba(248, 113, 113, 0.08) !important; }
[data-theme="dark"] .alert-warning { background: rgba(251, 191, 36, 0.08) !important; }
[data-theme="dark"] .alert-info { background: rgba(0, 255, 136, 0.08) !important; }

/* --- Dark mode tables --- */
[data-theme="dark"] table th {
    color: #9a99a8;
    border-bottom-color: #2a2a32;
}

[data-theme="dark"] table td {
    border-bottom-color: #2a2a32;
    color: #eeedf2;
}

[data-theme="dark"] table tr:hover td {
    background: rgba(0, 255, 136, 0.05);
}

/* --- Dark mode severity badges --- */
[data-theme="dark"] .severity-critical { background: rgba(248, 113, 113, 0.15) !important; color: #f87171 !important; }
[data-theme="dark"] .severity-high { background: rgba(251, 146, 60, 0.15) !important; color: #fb923c !important; }
[data-theme="dark"] .severity-medium { background: rgba(251, 191, 36, 0.15) !important; color: #fbbf24 !important; }
[data-theme="dark"] .severity-low { background: rgba(96, 165, 250, 0.15) !important; color: #60a5fa !important; }
[data-theme="dark"] .severity-info { background: rgba(148, 163, 184, 0.15) !important; color: #94a3b8 !important; }

/* --- Dark mode modals --- */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-dialog {
    background: #1a1a1f !important;
    border-color: #2a2a32 !important;
}

[data-theme="dark"] .modal-overlay,
[data-theme="dark"] .modal-backdrop {
    background: rgba(0, 0, 0, 0.6) !important;
}

/* --- Dark mode scrollbars --- */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0e0e11;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3a3a44;
}

/* --- Dark mode footer --- */
[data-theme="dark"] .site-footer {
    background: #0e0e11 !important;
    border-top-color: #2a2a32 !important;
}

[data-theme="dark"] .site-footer a {
    color: #9a99a8 !important;
}

[data-theme="dark"] .footer-copyright {
    color: #9a99a8 !important;
}

/* --- Dark mode cookie notice --- */
[data-theme="dark"] .cookie-notice {
    background: #1a1a1f !important;
    border-top-color: #2a2a32 !important;
}

[data-theme="dark"] .cookie-notice p {
    color: #a09fa8 !important;
}

/* --- Dark mode auth pages --- */
[data-theme="dark"] .auth-container,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .login-card,
[data-theme="dark"] .register-card {
    background: #1a1a1f !important;
    border-color: #2a2a32 !important;
}

[data-theme="dark"] .auth-form h2,
[data-theme="dark"] .auth-card h2 {
    color: #eeedf2 !important;
}

[data-theme="dark"] .auth-form p,
[data-theme="dark"] .auth-card p {
    color: #a09fa8 !important;
}

[data-theme="dark"] .google-btn,
[data-theme="dark"] .oauth-btn {
    background: #222228 !important;
    color: #eeedf2 !important;
    border-color: #3a3a44 !important;
}

/* --- Dark mode code blocks --- */
[data-theme="dark"] code,
[data-theme="dark"] pre,
[data-theme="dark"] .code-block {
    background: #16161a !important;
    border-color: #2a2a32 !important;
    color: #eeedf2 !important;
}

/* --- Dark mode links --- */
[data-theme="dark"] a {
    color: #00ff88;
}

[data-theme="dark"] a:hover {
    color: #33ffaa;
}

/* --- Dark mode section headers --- */
[data-theme="dark"] .section-title-modern,
[data-theme="dark"] .page-title,
[data-theme="dark"] .page-title-text,
[data-theme="dark"] .section-header h2,
[data-theme="dark"] .dashboard-title {
    -webkit-text-fill-color: #eeedf2 !important;
    color: #eeedf2 !important;
}

/* --- Dark mode gradient text --- */
[data-theme="dark"] .gradient-text,
[data-theme="dark"] .text-gradient,
[data-theme="dark"] [class*="gradient-text"] {
    -webkit-text-fill-color: #00ff88 !important;
    color: #00ff88 !important;
}

/* --- Dark mode page header --- */
[data-theme="dark"] .page-header,
[data-theme="dark"] .content-header {
    background: #0e0e11 !important;
    border-bottom-color: #2a2a32 !important;
}

/* --- Dark mode upgrade prompts --- */
[data-theme="dark"] .upgrade-card,
[data-theme="dark"] .upgrade-prompt,
[data-theme="dark"] .upgrade-banner,
[data-theme="dark"] [class*="upgrade-"]:not(.upgrade-btn):not(.upgrade-cta-btn):not(.upgrade-primary-btn):not(.upgrade-icon):not(.upgrade-badge):not(.upgrade-feature-icon):not(.upgrade-progress-fill) {
    background: #1a1a1f !important;
    border-color: #2a2a32 !important;
}

[data-theme="dark"] .upgrade-banner h3 {
    color: #eeedf2 !important;
}

[data-theme="dark"] .upgrade-banner p {
    color: #a09fa8 !important;
}

/* --- Dark mode skeleton loaders --- */
[data-theme="dark"] .skeleton-loading {
    background: #16161a !important;
}

/* --- Dark mode ::selection --- */
[data-theme="dark"] ::selection {
    background: rgba(0, 255, 136, 0.25);
    color: #eeedf2;
}

/* --- Dark mode survey modal --- */
[data-theme="dark"] .survey-header,
[data-theme="dark"] .survey-modal-header {
    background: #00ff88 !important;
    color: #0e0e11 !important;
}

/* --- Dark mode notification header --- */
[data-theme="dark"] .notification-header,
[data-theme="dark"] .notification-modal-header {
    background: #00ff88 !important;
    color: #0e0e11 !important;
}

/* --- Dark mode settings --- */
[data-theme="dark"] .settings-section-title,
[data-theme="dark"] .settings-tab.active,
[data-theme="dark"] .settings-nav-item.active {
    color: #00ff88 !important;
}

/* =============================================================================
   THEME TOGGLE BUTTON
   ============================================================================= */
.theme-toggle {
    background: none;
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1;
}

.theme-toggle:hover {
    border-color: var(--accent);
    color: var(--accent-text);
}

/* Show correct icon per theme */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }

[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* =============================================================================
   UNIFIED BUTTON SYSTEM (v4)
   Replaces scattered inline styles and conflicting .btn definitions.
   Hierarchy: ts-btn-primary > ts-btn-secondary > ts-btn-ghost > ts-btn-danger
   ============================================================================= */

/* Base button reset */
.ts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    -webkit-font-smoothing: antialiased;
}

.ts-btn:disabled,
.ts-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- PRIMARY: Main CTA on each page ---- */
/* Dark text on bright green -- high contrast, not the old white-on-green */
.ts-btn-primary {
    background: var(--accent, #00d972);
    color: #0c0c0d;
    box-shadow: 0 2px 8px rgba(0, 217, 114, 0.18);
}

.ts-btn-primary:hover {
    background: #00c566;
    box-shadow: 0 4px 14px rgba(0, 217, 114, 0.28);
    transform: translateY(-1px);
}

.ts-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 217, 114, 0.15);
}

/* Large variant for main wizard CTAs */
.ts-btn-primary.ts-btn-lg {
    padding: 0.875rem 2rem;
    font-size: 1rem;
    border-radius: 10px;
}

/* ---- SECONDARY: Back, Cancel, Filter ---- */
.ts-btn-secondary {
    background: var(--bg-secondary, #f5f4f0);
    color: var(--text-primary, #0c0c0d);
    border: 1px solid var(--border-subtle, #e8e6e1);
}

.ts-btn-secondary:hover {
    background: var(--border-subtle, #e8e6e1);
    border-color: var(--border-strong, #d5d3ce);
}

/* ---- GHOST: Tertiary links-as-buttons ---- */
.ts-btn-ghost {
    background: transparent;
    color: var(--accent-text, #008a47);
    border: none;
    padding: 0.5rem 0.75rem;
}

.ts-btn-ghost:hover {
    background: var(--accent-dim, rgba(0, 217, 114, 0.08));
}

/* ---- DANGER: Delete, Remove ---- */
.ts-btn-danger {
    background: #ef4444;
    color: #ffffff;
}

.ts-btn-danger:hover {
    background: #dc2626;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
    transform: translateY(-1px);
}

/* ---- ACCENT (indigo): For secondary brand actions like Projects ---- */
.ts-btn-accent {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #ffffff;
}

.ts-btn-accent:hover {
    opacity: 0.9;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
    transform: translateY(-1px);
}

/* ---- Dark theme overrides ---- */
[data-theme="dark"] .ts-btn-primary {
    background: var(--accent, #00d972);
    color: #0a0a0f;
}

[data-theme="dark"] .ts-btn-primary:hover {
    background: #00e67d;
}

[data-theme="dark"] .ts-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #ffffff);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .ts-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

/* ---- Wizard step circle (active) override ---- */
/* Replace white-on-#10b981 circles with dark-on-accent */
.step-circle.active,
.wizard-step-circle-active {
    background: var(--accent, #00d972) !important;
    color: #0c0c0d !important;
    border-color: var(--accent, #00d972) !important;
}

/* ---- Inline #10b981 button override ----
   Catches buttons that still use inline background: #10b981; color: white
   by targeting common patterns. These should be migrated to .ts-btn-primary. */
button[style*="background: #10b981"][style*="color: white"],
button[style*="background:#10b981"][style*="color: white"],
button[style*="background:#10b981"][style*="color:white"] {
    background: var(--accent, #00d972) !important;
    color: #0c0c0d !important;
}