/* =============================================
   Dark Theme Landing Page Styles
   Matches the 3D wave animation aesthetic
   Only applies when NOT in dashboard mode
   ============================================= */

/* Dark theme variables */
:root {
    --dark-bg: #040d2a;
    --dark-bg-lighter: #081d59;
    --dark-card-bg: rgba(8, 29, 89, 0.6);
    --dark-card-border: rgba(98, 168, 124, 0.2);
    --text-light: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.7);
    --text-subtle: rgba(255, 255, 255, 0.5);
}

/* Use system-ui font on landing page to match vol-surface-preview */
body.landing-dark:not(.dashboard-active),
body.landing-dark:not(.dashboard-active) *:not(.fas):not(.far):not(.fab):not(.fa):not([class*="fa-"]),
body.landing-dark:not(.dashboard-active) h1,
body.landing-dark:not(.dashboard-active) h2,
body.landing-dark:not(.dashboard-active) h3,
body.landing-dark:not(.dashboard-active) p,
body.landing-dark:not(.dashboard-active) a,
body.landing-dark:not(.dashboard-active) button,
body.landing-dark:not(.dashboard-active) .nav-link,
body.landing-dark:not(.dashboard-active) .btn-try-demo,
body.landing-dark:not(.dashboard-active) .btn-contact-sales,
body.landing-dark:not(.dashboard-active) .btn-get-started,
body.landing-dark:not(.dashboard-active) .hero-text,
body.landing-dark:not(.dashboard-active) .hero-subtext,
body.landing-dark:not(.dashboard-active) .feature-header,
body.landing-dark:not(.dashboard-active) .feature-body,
body.landing-dark:not(.dashboard-active) .section-heading,
body.landing-dark:not(.dashboard-active) .features-heading,
body.landing-dark:not(.dashboard-active) .broker-name,
body.landing-dark:not(.dashboard-active) .broker-group-title,
body.landing-dark:not(.dashboard-active) .faq-question,
body.landing-dark:not(.dashboard-active) .faq-answer-content,
body.landing-dark:not(.dashboard-active) .footer-link {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Anchor scroll offset for fixed navbar - using scroll-padding on html for reliability */
html:has(body.landing-dark:not(.dashboard-active)) {
    scroll-behavior: smooth;
    scroll-padding-top: var(--navbar-offset, 56px);
}

body.landing-dark:not(.dashboard-active) {
    scroll-behavior: smooth;
}

/* Backup scroll-margin for browsers that don't support :has() */
body.landing-dark:not(.dashboard-active) #features,
body.landing-dark:not(.dashboard-active) #supported-brokers,
body.landing-dark:not(.dashboard-active) #faqs {
    scroll-margin-top: var(--navbar-offset, 56px);
}

/* Reset margins and make full-width */
body.landing-dark:not(.dashboard-active) {
    background: var(--dark-bg);
    margin: 0;
    padding: 0;
    padding-top: var(--navbar-offset, 56px); /* Keep navbar offset */
}

body.landing-dark:not(.dashboard-active) #container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--dark-bg);
}

body.landing-dark:not(.dashboard-active) #main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--dark-bg);
}

/* Hide hero canvas in dashboard mode */
body.landing-dark.dashboard-active #heroCanvas {
    display: none;
}

/* =====================
   Navbar - Dark Theme
   ===================== */
body.landing-dark:not(.dashboard-active) .navbar {
    background: rgba(4, 13, 42, 0.95);
    border-bottom: 1px solid rgba(98, 168, 124, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.landing-dark:not(.dashboard-active) .navbar::before {
    background: rgba(4, 13, 42, 0.95);
}

body.landing-dark:not(.dashboard-active) .navbar .logo {
    color: var(--text-light);
}

body.landing-dark:not(.dashboard-active) .nav-link {
    color: var(--text-light);
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

body.landing-dark:not(.dashboard-active) .nav-link:hover {
    border-bottom-color: transparent;
    color: var(--green);
}

body.landing-dark:not(.dashboard-active) .btn-contact-sales {
    border-color: var(--green);
    background-color: transparent;
    color: var(--green);
}

body.landing-dark:not(.dashboard-active) .btn-contact-sales:hover {
    background-color: var(--green);
    color: var(--dark-bg);
}

/* Hamburger menu - white color for dark theme */
body.landing-dark:not(.dashboard-active) .hamburger {
    color: var(--text-light);
}

/* Mobile menu dark theme */
@media (max-width: 768px) {
    body.landing-dark:not(.dashboard-active) .nav-menu {
        background: rgba(4, 13, 42, 0.98);
    }
    body.landing-dark:not(.dashboard-active) .nav-menu.open {
        background: rgba(4, 13, 42, 0.98);
    }
    /* Mobile user dropdown - dark theme */
    body.landing-dark:not(.dashboard-active) .user-dropdown-menu .dropdown-item {
        border-color: #fff !important;
        background: transparent !important;
        color: #fff !important;
    }
    body.landing-dark:not(.dashboard-active) .user-dropdown-menu .dropdown-item:hover {
        background: #fff !important;
        color: var(--blue) !important;
    }
    body.landing-dark:not(.dashboard-active) .user-dropdown-menu .dropdown-item-danger {
        border-color: #ff6b6b !important;
        color: #ff6b6b !important;
    }
    body.landing-dark:not(.dashboard-active) .user-dropdown-menu .dropdown-item-danger:hover {
        background: #ff6b6b !important;
        color: #fff !important;
    }
}

/* =====================
   Hero Section - Dark
   ===================== */
body.landing-dark:not(.dashboard-active) .hero-section {
    background: var(--dark-bg);
}

/* Make canvas span full viewport */
body.landing-dark:not(.dashboard-active) #heroCanvas {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    z-index: 0;
}

body.landing-dark:not(.dashboard-active) .hero-text {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

body.landing-dark:not(.dashboard-active) .hero-text .blue {
    color: var(--text-light);
}

body.landing-dark:not(.dashboard-active) .hero-text .green {
    color: var(--green);
}

body.landing-dark:not(.dashboard-active) .hero-subtext,
body.landing-dark:not(.dashboard-active) #heroTypewriter {
    color: var(--text-light);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.8);
}

body.landing-dark:not(.dashboard-active) .hero-section .btn-try-demo {
    background-color: var(--green);
    border-color: var(--green);
    color: var(--text-light);
}

body.landing-dark:not(.dashboard-active) .hero-section .btn-try-demo:hover {
    background-color: transparent;
    color: var(--green);
}

body.landing-dark:not(.dashboard-active) .hero-section > *:not(#heroCanvas) {
    position: relative;
    z-index: 1;
}

/* Hide video background when using canvas animation */
body.landing-dark:not(.dashboard-active) .hero-video-bg {
    display: none;
}

/* =====================
   Features Section - Dark Theme Colors
   Note: Structural properties are in styles.css. Only color overrides here.
   ===================== */
body.landing-dark:not(.dashboard-active) .features-section {
    background: var(--dark-bg);
}

body.landing-dark:not(.dashboard-active) .features-heading {
    color: var(--text-light);
}

body.landing-dark:not(.dashboard-active) .features-subtitle {
    color: var(--text-muted);
}

/* Feature cards - dark theme colors only */
body.landing-dark:not(.dashboard-active) .feature-card {
    background: linear-gradient(135deg, rgba(8, 29, 89, 0.8) 0%, rgba(4, 13, 42, 0.9) 100%);
    border-color: var(--dark-card-border);
}

/* Subtle glow effect on cards - dark theme only */
body.landing-dark:not(.dashboard-active) .feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(98, 168, 124, 0.3), transparent 50%, rgba(98, 168, 124, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.landing-dark:not(.dashboard-active) .feature-card:hover::before {
    opacity: 1;
}

body.landing-dark:not(.dashboard-active) .feature-card:hover {
    box-shadow: 0 8px 32px rgba(98, 168, 124, 0.15);
    border-color: var(--green);
}

/* Highlighted card (e.g., Auto-sync) - dark theme colors */
body.landing-dark:not(.dashboard-active) .feature-card-highlight {
    background: linear-gradient(135deg, rgba(98, 168, 124, 0.15) 0%, rgba(8, 29, 89, 0.8) 50%, rgba(4, 13, 42, 0.9) 100%);
    border-color: rgba(98, 168, 124, 0.4);
}

body.landing-dark:not(.dashboard-active) .feature-card-highlight::after {
    content: 'Popular';
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--green);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Feature icon - dark theme colors */
body.landing-dark:not(.dashboard-active) .feature-icon {
    background: linear-gradient(135deg, var(--green) 0%, rgba(98, 168, 124, 0.6) 100%);
    color: var(--text-light);
}

/* SVG icon styling - dark theme colors */
body.landing-dark:not(.dashboard-active) .feature-icon svg {
    stroke: var(--text-light);
}

/* Icon shine animation - dark theme only */
body.landing-dark:not(.dashboard-active) .feature-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
    animation: iconShine 3s ease-in-out infinite;
}

@keyframes iconShine {
    0%, 100% { transform: translateX(-100%) rotate(45deg); }
    50% { transform: translateX(100%) rotate(45deg); }
}

body.landing-dark:not(.dashboard-active) .feature-header {
    color: var(--green);
}

body.landing-dark:not(.dashboard-active) .feature-body {
    color: var(--text-muted);
}

/* Hide old feature images in dark mode */
body.landing-dark:not(.dashboard-active) .feature-image {
    display: none;
}

/* Hide old feature-text wrapper, show new cards */
body.landing-dark:not(.dashboard-active) .feature-text {
    display: none;
}

body.landing-dark:not(.dashboard-active) .feature-card {
    display: flex;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    body.landing-dark:not(.dashboard-active) .feature-card {
        animation: none;
    }
    body.landing-dark:not(.dashboard-active) .feature-icon::before {
        animation: none;
    }
}

/* =====================
   Brokers Section - Dark Theme Colors
   Note: Structural properties are in styles.css. Only color overrides here.
   ===================== */
body.landing-dark:not(.dashboard-active) .brokers-section {
    background: linear-gradient(180deg, rgba(8, 29, 89, 0.4) 0%, var(--dark-bg) 100%);
    border-color: var(--dark-card-border);
}

body.landing-dark:not(.dashboard-active) .brokers-section .section-heading {
    color: var(--text-light);
}

body.landing-dark:not(.dashboard-active) .brokers-subtitle {
    color: var(--text-muted);
}

/* Brokers card - dark theme colors */
body.landing-dark:not(.dashboard-active) .brokers-card {
    background: var(--dark-card-bg);
    border-color: var(--dark-card-border);
}

body.landing-dark:not(.dashboard-active) .integration-badge {
    background: linear-gradient(135deg, rgba(98, 168, 124, 0.25) 0%, rgba(98, 168, 124, 0.1) 100%);
    border-color: rgba(98, 168, 124, 0.5);
    color: var(--green);
}

body.landing-dark:not(.dashboard-active) .integration-badge:hover {
    background: linear-gradient(135deg, rgba(98, 168, 124, 0.35) 0%, rgba(98, 168, 124, 0.2) 100%);
    border-color: var(--green);
}

body.landing-dark:not(.dashboard-active) .brokers-card-divider {
    background: linear-gradient(90deg, transparent, var(--dark-card-border), transparent);
}

body.landing-dark:not(.dashboard-active) .prop-firms-label {
    color: var(--text-muted);
}

body.landing-dark:not(.dashboard-active) .prop-tag {
    color: var(--text-muted);
    background: rgba(98, 168, 124, 0.08);
    border-color: rgba(98, 168, 124, 0.15);
}

body.landing-dark:not(.dashboard-active) .prop-tag:hover {
    color: var(--green);
    border-color: rgba(98, 168, 124, 0.3);
    background: rgba(98, 168, 124, 0.15);
}

/* Legacy broker styles - dark theme colors */
body.landing-dark:not(.dashboard-active) .broker-group {
    background: var(--dark-card-bg);
    border-color: var(--dark-card-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

body.landing-dark:not(.dashboard-active) .broker-unified-content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1.5rem;
}

body.landing-dark:not(.dashboard-active) .broker-section {
    flex: 1;
    display: flex;
    flex-direction: column;
}

body.landing-dark:not(.dashboard-active) .broker-section-featured {
    flex: 0 0 auto;
    min-width: 200px;
    justify-content: center;
}

body.landing-dark:not(.dashboard-active) .broker-section-props {
    flex: 1;
    text-align: left;
}

/* Divider between sections - vertical on desktop */
body.landing-dark:not(.dashboard-active) .broker-divider {
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--dark-card-border), transparent);
    margin: 0;
    align-self: stretch;
}

/* Prop firms as compact tags */
body.landing-dark:not(.dashboard-active) .broker-list-props {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-start;
}

body.landing-dark:not(.dashboard-active) .broker-tag {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    background: rgba(98, 168, 124, 0.08);
    border: 1px solid rgba(98, 168, 124, 0.15);
    border-radius: 1rem;
    white-space: nowrap;
    transition: all 0.2s ease;
}

body.landing-dark:not(.dashboard-active) .broker-tag:hover {
    color: var(--green);
    border-color: rgba(98, 168, 124, 0.3);
    background: rgba(98, 168, 124, 0.15);
}

/* Direct integrations in featured section */
body.landing-dark:not(.dashboard-active) .broker-list.broker-list-direct {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* Secondary title (Prop Firms) */
body.landing-dark:not(.dashboard-active) .broker-group-title-secondary {
    font-size: 0.75rem;
    color: var(--text-muted);
    border-bottom: none;
    margin-bottom: 0.5rem;
    padding-bottom: 0;
}

body.landing-dark:not(.dashboard-active) .broker-group-title {
    color: var(--green);
    border-bottom-color: var(--dark-card-border);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
}

body.landing-dark:not(.dashboard-active) .broker-list {
    gap: 0.5rem;
}

body.landing-dark:not(.dashboard-active) .broker-list-rithmic {
    gap: 0.25rem 0.5rem;
}

body.landing-dark:not(.dashboard-active) .broker-name {
    color: var(--text-light);
    font-size: 0.75rem;
}

body.landing-dark:not(.dashboard-active) .broker-list-rithmic .broker-name {
    color: var(--text-muted);
}

/* Featured broker items (Direct Integrations) - text-based styling */
body.landing-dark:not(.dashboard-active) .broker-item-featured {
    background: linear-gradient(135deg, rgba(98, 168, 124, 0.2) 0%, rgba(98, 168, 124, 0.1) 100%);
    border: 1px solid rgba(98, 168, 124, 0.4);
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

body.landing-dark:not(.dashboard-active) .broker-item-featured:hover {
    background: linear-gradient(135deg, rgba(98, 168, 124, 0.3) 0%, rgba(98, 168, 124, 0.15) 100%);
    border-color: var(--green);
    transform: translateY(-2px);
}

body.landing-dark:not(.dashboard-active) .broker-name-featured {
    color: var(--green);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Hide old logo styles */
body.landing-dark:not(.dashboard-active) .broker-logo {
    display: none;
}

body.landing-dark:not(.dashboard-active) .brokers-upload-note {
    background: rgba(98, 168, 124, 0.1);
    border-color: var(--dark-card-border);
    color: var(--text-muted);
}

body.landing-dark:not(.dashboard-active) .brokers-upload-note i {
    color: var(--green);
}

body.landing-dark:not(.dashboard-active) .brokers-upload-note a {
    color: var(--green);
}

body.landing-dark:not(.dashboard-active) .btn-get-started {
    background-color: var(--green);
    border: 2px solid var(--green);
    color: var(--text-light);
}

body.landing-dark:not(.dashboard-active) .btn-get-started:hover {
    background-color: transparent;
    color: var(--green);
}

body.landing-dark:not(.dashboard-active) .brokers-cta-note {
    color: var(--text-subtle);
}

/* =====================
   Auth Modal - Dark Theme (Improved)
   ===================== */
body.landing-dark .auth-modal-overlay {
    background: rgba(4, 13, 42, 0.9);
    backdrop-filter: blur(8px);
}

body.landing-dark .auth-modal-box {
    background: linear-gradient(145deg, rgba(8, 29, 89, 0.98) 0%, rgba(4, 13, 42, 0.98) 100%);
    border: 1px solid var(--dark-card-border, rgba(98, 168, 124, 0.25));
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 80px rgba(98, 168, 124, 0.08);
    padding: 2rem;
    gap: 1rem;
}

/* Tab Navigation */
body.landing-dark .auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0.5rem;
    border-radius: 10px;
    background: rgba(4, 13, 42, 0.5);
    padding: 4px;
}

body.landing-dark .auth-tab {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

body.landing-dark .auth-tab:hover {
    color: var(--text-light);
}

body.landing-dark .auth-tab.active {
    background: var(--green);
    color: var(--text-light);
}

/* Field Container */
body.landing-dark .auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

body.landing-dark .auth-field-error {
    font-size: 0.8rem;
    color: #ff6b6b;
    min-height: 1.1rem;
}

/* Input Styling */
body.landing-dark .auth-modal-box input[type="email"],
body.landing-dark .auth-modal-box input[type="password"],
body.landing-dark .auth-modal-box input[type="text"] {
    background: rgba(4, 13, 42, 0.6);
    border: 1px solid var(--dark-card-border, rgba(98, 168, 124, 0.2));
    border-radius: 10px;
    color: var(--text-light, #ffffff);
    padding: 0.9rem 1rem;
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

body.landing-dark .auth-modal-box input::placeholder {
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
}

body.landing-dark .auth-modal-box input:focus {
    outline: none;
    border-color: var(--green, #62a87c);
    box-shadow: 0 0 0 3px rgba(98, 168, 124, 0.15);
}

/* Password Wrapper */
body.landing-dark .auth-password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

body.landing-dark .auth-password-wrapper input {
    padding-right: 3rem;
}

body.landing-dark .auth-password-toggle {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

body.landing-dark .auth-password-toggle:hover {
    color: var(--green);
}

/* Password Strength */
body.landing-dark .auth-password-strength {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: -0.25rem;
}

body.landing-dark .strength-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

body.landing-dark .strength-fill {
    height: 100%;
    width: 0;
    transition: width 0.3s ease, background 0.3s ease;
    border-radius: 2px;
}

body.landing-dark .strength-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    min-width: 60px;
    text-align: right;
}

/* Options Row */
body.landing-dark .auth-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    margin: 0.25rem 0;
}

body.landing-dark .auth-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    cursor: pointer;
}

body.landing-dark .auth-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--green);
    cursor: pointer;
}

body.landing-dark .auth-forgot {
    color: var(--green);
    text-decoration: none;
    transition: color 0.2s ease;
}

body.landing-dark .auth-forgot:hover {
    color: var(--text-light);
    text-decoration: underline;
}

/* Error Message */
body.landing-dark .auth-error {
    display: none;
    font-size: 0.9rem;
    color: #ff6b6b;
    text-align: center;
    padding: 0.75rem;
    background: rgba(255, 107, 107, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 107, 107, 0.2);
}

/* Submit Button */
body.landing-dark .auth-submit {
    width: 100%;
    padding: 0.9rem 1.5rem;
    background: var(--green);
    border: 2px solid var(--green);
    border-radius: 10px;
    color: var(--text-light);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

body.landing-dark .auth-submit:hover:not(:disabled) {
    background: transparent;
    color: var(--green);
}

body.landing-dark .auth-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

body.landing-dark .auth-submit-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

body.landing-dark .auth-submit-loading .spinner {
    animation: none; /* SVG has its own animation */
}

/* Cancel Button */
body.landing-dark .auth-cancel {
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: 1px solid var(--dark-card-border);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.landing-dark .auth-cancel:hover {
    border-color: var(--text-muted);
    color: var(--text-light);
}

/* Success State */
body.landing-dark .auth-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 1rem 0;
}

body.landing-dark .auth-success h3 {
    color: var(--text-light);
    font-size: 1.25rem;
    margin: 0;
}

body.landing-dark .auth-success p {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.95rem;
}

body.landing-dark .auth-success-note {
    font-size: 0.85rem !important;
    opacity: 0.8;
}

/* =====================
   FAQ Section - Dark
   ===================== */
body.landing-dark:not(.dashboard-active) .faq-section {
    background: var(--dark-bg);
}

body.landing-dark:not(.dashboard-active) .faq-section .section-heading {
    color: var(--text-light);
}

body.landing-dark:not(.dashboard-active) .faq-item {
    border-color: var(--dark-card-border);
    background: var(--dark-card-bg);
}

body.landing-dark:not(.dashboard-active) .faq-question {
    color: var(--text-light);
}

body.landing-dark:not(.dashboard-active) .faq-question:hover {
    background-color: rgba(98, 168, 124, 0.1);
}

body.landing-dark:not(.dashboard-active) .faq-toggle::before,
body.landing-dark:not(.dashboard-active) .faq-toggle::after {
    background-color: var(--green);
}

body.landing-dark:not(.dashboard-active) .faq-answer-content {
    color: var(--text-muted);
}

body.landing-dark:not(.dashboard-active) .faq-item.active .faq-question {
    background-color: rgba(98, 168, 124, 0.1);
}

body.landing-dark:not(.dashboard-active) .faq-link {
    color: var(--green);
    border-bottom-color: var(--green);
}

/* =====================
   Footer - Dark
   ===================== */
body.landing-dark:not(.dashboard-active) .footer-section {
    background: var(--dark-bg);
    border-top: 1px solid var(--dark-card-border);
    padding: 2rem;
}

body.landing-dark:not(.dashboard-active) .footer-link {
    color: var(--text-muted);
}

body.landing-dark:not(.dashboard-active) .footer-link:hover {
    color: var(--green);
}

/* =====================
   Brokers grid centering
   ===================== */
body.landing-dark:not(.dashboard-active) .brokers-grid {
    max-width: 900px;
    margin: 0 auto;
}

/* =====================
   Smooth transition support
   ===================== */
body.landing-dark:not(.dashboard-active) * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* =====================
   Accessibility: prefers-reduced-motion
   ===================== */
@media (prefers-reduced-motion: reduce) {
    #heroCanvas {
        display: none;
    }
    
    body.landing-dark:not(.dashboard-active) .hero-section {
        background: var(--dark-bg);
    }
    
    body.landing-dark:not(.dashboard-active) .feature-icon::before {
        animation: none;
    }
}

/* =====================
   Mobile Responsive - Dark mode color overrides only
   ===================== */

@media (max-width: 768px) {
    /* Dark mode specific color for broker divider on mobile */
    body.landing-dark:not(.dashboard-active) .broker-divider {
        background: linear-gradient(90deg, transparent, var(--dark-card-border), transparent);
    }
}

/* =====================================================
   DASHBOARD DARK THEME
   Applied when both landing-dark and dashboard-active
   ===================================================== */

/* ----------------------------------
   1. Accent Color Updates (Green)
   ---------------------------------- */
body.landing-dark.dashboard-active {
    --accent: #62a87c;
    --accent-hover: #7dc49a;
    --accent-muted: rgba(98, 168, 124, 0.2);
}

/* Primary buttons - green accent */
body.landing-dark.dashboard-active .btn-primary,
body.landing-dark.dashboard-active .btn-try-demo,
body.landing-dark.dashboard-active .btn-get-started,
body.landing-dark.dashboard-active button[type="submit"]:not(.auth-cancel),
body.landing-dark.dashboard-active .import-btn,
body.landing-dark.dashboard-active .tv-login-btn {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

body.landing-dark.dashboard-active .btn-primary:hover,
body.landing-dark.dashboard-active .btn-try-demo:hover,
body.landing-dark.dashboard-active .btn-get-started:hover,
body.landing-dark.dashboard-active button[type="submit"]:not(.auth-cancel):hover,
body.landing-dark.dashboard-active .import-btn:hover,
body.landing-dark.dashboard-active .tv-login-btn:hover {
    background: transparent !important;
    color: var(--accent) !important;
}

/* Links - green accent */
body.landing-dark.dashboard-active a:not(.logo):not(.nav-link),
body.landing-dark.dashboard-active .stat-value.pos {
    color: var(--accent);
}

/* Active/selected states */
body.landing-dark.dashboard-active .filter-tag.active,
body.landing-dark.dashboard-active .nav-tab.active,
body.landing-dark.dashboard-active input:checked {
    accent-color: var(--accent);
}

/* ----------------------------------
   2. Header/Navbar Consistency
   ---------------------------------- */
body.landing-dark.dashboard-active .navbar {
    background: var(--dark-bg, #040d2a) !important;
    border-bottom: 1px solid var(--dark-card-border, rgba(98, 168, 124, 0.15)) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
}

body.landing-dark.dashboard-active .navbar::before {
    background: var(--dark-bg, #040d2a) !important;
}

body.landing-dark.dashboard-active .logo {
    color: var(--text-light, #fff) !important;
}

body.landing-dark.dashboard-active .nav-link {
    color: var(--text-muted, rgba(255,255,255,0.7)) !important;
    border-bottom-color: transparent !important;
}

body.landing-dark.dashboard-active .nav-link:hover {
    color: var(--accent) !important;
}

body.landing-dark.dashboard-active .btn-contact-sales,
body.landing-dark.dashboard-active .header-contact-sales {
    background: transparent !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

body.landing-dark.dashboard-active .btn-contact-sales:hover,
body.landing-dark.dashboard-active .header-contact-sales:hover {
    background: var(--accent) !important;
    color: #fff !important;
}

body.landing-dark.dashboard-active .hamburger {
    color: var(--text-light, #fff) !important;
}

/* Mobile nav menu */
body.landing-dark.dashboard-active .mobile-nav,
body.landing-dark.dashboard-active .nav-menu {
    background: var(--dark-bg) !important;
    border-left: 1px solid var(--dark-card-border) !important;
}

body.landing-dark.dashboard-active .mobile-nav .nav-link,
body.landing-dark.dashboard-active .nav-menu .nav-link {
    color: var(--text-light) !important;
    border-bottom-color: var(--dark-card-border) !important;
}

/* Mobile user dropdown - dashboard active dark theme */
@media (max-width: 768px) {
    body.landing-dark.dashboard-active .user-dropdown-menu .dropdown-item {
        border-color: #fff !important;
        background: transparent !important;
        color: #fff !important;
    }
    body.landing-dark.dashboard-active .user-dropdown-menu .dropdown-item:hover {
        background: #fff !important;
        color: var(--blue) !important;
    }
    body.landing-dark.dashboard-active .user-dropdown-menu .dropdown-item-danger {
        border-color: #ff6b6b !important;
        color: #ff6b6b !important;
    }
    body.landing-dark.dashboard-active .user-dropdown-menu .dropdown-item-danger:hover {
        background: #ff6b6b !important;
        color: #fff !important;
    }
}

/* ----------------------------------
   3. Full Dark Dashboard Background
   ---------------------------------- */
body.landing-dark.dashboard-active {
    background: var(--dark-bg, #040d2a) !important;
}

body.landing-dark.dashboard-active #dashboard {
    background: var(--dark-bg, #040d2a);
    color: var(--text-light, #fff);
}

/* P&L Calendar container */
body.landing-dark.dashboard-active #pnl_cal_container {
    background: transparent !important;
}

/* ----------------------------------
   4. Card Styling Updates
   ---------------------------------- */
body.landing-dark.dashboard-active .spider-container,
body.landing-dark.dashboard-active .stats-widget,
body.landing-dark.dashboard-active .widget-card,
body.landing-dark.dashboard-active #filter_container,
body.landing-dark.dashboard-active .import-card,
body.landing-dark.dashboard-active .brokers-section {
    background: var(--dark-card-bg, rgba(8, 29, 89, 0.6)) !important;
    border: 1px solid var(--dark-card-border, rgba(98, 168, 124, 0.15)) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Ensure widget-card doesn't override spider-container */
body.landing-dark.dashboard-active .widget-card[data-id="calendar"],
body.landing-dark.dashboard-active .widget-card[data-id="trades"],
body.landing-dark.dashboard-active .widget-card[data-id="trade-entry"] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Widget heading overlay background for dark theme */
body.landing-dark.dashboard-active .widget-heading {
    background: rgba(8, 29, 89, 0.95) !important;
    color: var(--text-light, #fff) !important;
}

/* Empty state styling */
body.landing-dark.dashboard-active .empty-state,
body.landing-dark.dashboard-active .empty-dashboard-notice {
    color: var(--text-muted, rgba(255,255,255,0.6)) !important;
    background: rgba(98, 168, 124, 0.05) !important;
    border-color: var(--dark-card-border) !important;
}

/* ----------------------------------
   5. Typography Alignment
   ---------------------------------- */
body.landing-dark.dashboard-active {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

body.landing-dark.dashboard-active #filters_title,
body.landing-dark.dashboard-active #trade_details_title,
body.landing-dark.dashboard-active #data_title,
body.landing-dark.dashboard-active .section-heading,
body.landing-dark.dashboard-active .widget-heading,
body.landing-dark.dashboard-active .section-subheading,
body.landing-dark.dashboard-active .import-card-title,
body.landing-dark.dashboard-active h1, 
body.landing-dark.dashboard-active h2, 
body.landing-dark.dashboard-active h3,
body.landing-dark.dashboard-active h4,
body.landing-dark.dashboard-active h5,
body.landing-dark.dashboard-active h6 {
    color: var(--text-light, #fff) !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Dashboard body text, labels, and form elements */
body.landing-dark.dashboard-active p,
body.landing-dark.dashboard-active span,
body.landing-dark.dashboard-active label,
body.landing-dark.dashboard-active button,
body.landing-dark.dashboard-active input,
body.landing-dark.dashboard-active select,
body.landing-dark.dashboard-active textarea,
body.landing-dark.dashboard-active th,
body.landing-dark.dashboard-active td,
body.landing-dark.dashboard-active .btn,
body.landing-dark.dashboard-active .filter-toggle,
body.landing-dark.dashboard-active .pager-btn,
body.landing-dark.dashboard-active .page-number {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

body.landing-dark.dashboard-active .stat-label,
body.landing-dark.dashboard-active .stat-value,
body.landing-dark.dashboard-active .metrics-col span,
body.landing-dark.dashboard-active #total_gross_pnl,
body.landing-dark.dashboard-active #total_net_pnl,
body.landing-dark.dashboard-active #total_trades,
body.landing-dark.dashboard-active #expec,
body.landing-dark.dashboard-active #profit_factor {
    color: var(--text-light, #fff) !important;
}

/* Positive/negative value colors */
body.landing-dark.dashboard-active .stat-value.pos,
body.landing-dark.dashboard-active .pos {
    color: var(--accent) !important;
}

body.landing-dark.dashboard-active .stat-value.neg,
body.landing-dark.dashboard-active .neg {
    color: #ff6b6b !important;
}

/* ----------------------------------
   6. Tables
   ---------------------------------- */
body.landing-dark.dashboard-active table {
    background: transparent;
}

body.landing-dark.dashboard-active th {
    background: rgba(8, 29, 89, 0.8) !important;
    color: var(--text-light, #fff) !important;
    border-bottom: 1px solid var(--dark-card-border) !important;
}

body.landing-dark.dashboard-active td {
    color: var(--text-light, #fff) !important;
    border-bottom: 1px solid rgba(98, 168, 124, 0.1) !important;
}

body.landing-dark.dashboard-active tr {
    border-bottom-color: rgba(98, 168, 124, 0.1) !important;
}

body.landing-dark.dashboard-active tr:hover td {
    background: rgba(98, 168, 124, 0.05);
}

/* ----------------------------------
   7. Form Inputs
   ---------------------------------- */
body.landing-dark.dashboard-active input:not([type="checkbox"]):not([type="radio"]),
body.landing-dark.dashboard-active select,
body.landing-dark.dashboard-active textarea {
    background: rgba(4, 13, 42, 0.6) !important;
    border: 1px solid var(--dark-card-border) !important;
    color: var(--text-light, #fff) !important;
    border-radius: 8px !important;
}

body.landing-dark.dashboard-active input::placeholder,
body.landing-dark.dashboard-active textarea::placeholder {
    color: var(--text-muted, rgba(255,255,255,0.4)) !important;
}

body.landing-dark.dashboard-active input:focus,
body.landing-dark.dashboard-active select:focus,
body.landing-dark.dashboard-active textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(98, 168, 124, 0.15) !important;
    outline: none !important;
}

body.landing-dark.dashboard-active label {
    color: var(--text-muted, rgba(255,255,255,0.7)) !important;
}

/* Select dropdown arrow */
body.landing-dark.dashboard-active select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2362a87c' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    padding-right: 2rem !important;
}

/* ----------------------------------
   8. Filter Section
   ---------------------------------- */
body.landing-dark.dashboard-active #filter_container {
    background: var(--dark-card-bg) !important;
    padding: 0.75rem 1rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1rem !important;
    max-width: 1112px !important;
    width: calc(100% - 2rem) !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 12px !important;
    border: 1px solid var(--dark-card-border) !important;
    box-sizing: border-box !important;
}

@media (min-width: 769px) {
    body.landing-dark.dashboard-active #filter_container {
        width: 1112px !important;
        max-width: calc(100% - 4rem) !important;
    }
}

@media (max-width: 768px) {
    body.landing-dark.dashboard-active #filter_container {
        width: calc(100% - 2rem) !important;
        max-width: none !important;
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }
}

body.landing-dark.dashboard-active #filters_title {
    color: var(--text-light) !important;
    font-size: 1.1rem !important;
    margin: 0 0 0.5rem 0 !important;
}

body.landing-dark.dashboard-active #filters_wrapper {
    padding: 0 !important;
    border: none !important;
}

body.landing-dark.dashboard-active .filters-section {
    margin: 0 !important;
    padding: 0 !important;
}

body.landing-dark.dashboard-active .filters-row {
    gap: 0.5rem !important;
}

body.landing-dark.dashboard-active .filter-control {
    margin-bottom: 0 !important;
}

body.landing-dark.dashboard-active .reset-row {
    margin-top: 0.5rem !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

body.landing-dark.dashboard-active .filter-group label,
body.landing-dark.dashboard-active .filter-label {
    color: var(--text-muted) !important;
}

/* Filter buttons/tags */
body.landing-dark.dashboard-active .filter-btn,
body.landing-dark.dashboard-active .filter-tag {
    background: rgba(4, 13, 42, 0.6) !important;
    border: 1px solid var(--dark-card-border) !important;
    color: var(--text-muted) !important;
}

body.landing-dark.dashboard-active .filter-btn:hover,
body.landing-dark.dashboard-active .filter-tag:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

body.landing-dark.dashboard-active .filter-btn.active,
body.landing-dark.dashboard-active .filter-tag.active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

/* Filter toggles and dropdowns */
body.landing-dark.dashboard-active .filter-toggle {
    background: rgba(4, 13, 42, 0.6) !important;
    border-color: var(--dark-card-border) !important;
    color: var(--text-light) !important;
}

body.landing-dark.dashboard-active .filter-toggle:hover {
    border-color: var(--accent) !important;
}

body.landing-dark.dashboard-active .caret {
    border-top-color: var(--accent) !important;
}

body.landing-dark.dashboard-active .dropdown-panel,
body.landing-dark.dashboard-active .date-panel {
    background: var(--dark-card-bg) !important;
    border-color: var(--dark-card-border) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

body.landing-dark.dashboard-active .option-item {
    color: var(--text-light) !important;
}

body.landing-dark.dashboard-active .option-item:hover {
    background: rgba(98, 168, 124, 0.1) !important;
}

body.landing-dark.dashboard-active .option-item input[type="checkbox"] {
    border-color: var(--dark-card-border) !important;
    background: rgba(4, 13, 42, 0.6) !important;
}

body.landing-dark.dashboard-active .option-item input[type="checkbox"]:checked::before {
    color: var(--accent) !important;
}

body.landing-dark.dashboard-active .btn-reset {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

body.landing-dark.dashboard-active .btn-reset:hover {
    background: transparent !important;
    color: var(--accent) !important;
}

/* Date picker calendar */
body.landing-dark.dashboard-active .calendar-header {
    color: var(--text-light) !important;
}

body.landing-dark.dashboard-active .cal-nav-btn {
    color: var(--text-muted) !important;
}

body.landing-dark.dashboard-active .cal-nav-btn:hover {
    background: rgba(98, 168, 124, 0.1) !important;
    color: var(--accent) !important;
}

body.landing-dark.dashboard-active .dow {
    color: var(--text-muted) !important;
}

body.landing-dark.dashboard-active .day {
    color: var(--text-light) !important;
}

body.landing-dark.dashboard-active .day:hover {
    background: rgba(98, 168, 124, 0.15) !important;
}

body.landing-dark.dashboard-active .day.selected {
    background: rgba(98, 168, 124, 0.25) !important;
    border-color: var(--accent) !important;
}

body.landing-dark.dashboard-active .day.in-range {
    background: rgba(98, 168, 124, 0.12) !important;
}

body.landing-dark.dashboard-active .day.disabled {
    color: var(--text-muted) !important;
    opacity: 0.4;
}

/* ----------------------------------
   9. Charts (careful overrides)
   ---------------------------------- */
/* Chart containers need transparent background */
body.landing-dark.dashboard-active #chart_container,
body.landing-dark.dashboard-active .chart-container,
body.landing-dark.dashboard-active #perc_chart_container {
    background: transparent !important;
}

/* Chart.js tooltip styling (set via JS, but base can be hinted) */
body.landing-dark.dashboard-active canvas {
    /* Canvas itself stays as-is; chart colors set in JS */
}

/* Chart axis labels - can be styled via CSS if rendered as HTML */
body.landing-dark.dashboard-active .chart-x-label,
body.landing-dark.dashboard-active .chart-y-label {
    color: var(--text-muted) !important;
}

/* ----------------------------------
   10. Calendar Widget
   ---------------------------------- */
body.landing-dark.dashboard-active #calendarWidget {
    background: var(--dark-card-bg) !important;
}

body.landing-dark.dashboard-active #calendarWidget .calendar-grid {
    background: var(--dark-bg, #040d2a) !important;
    border-color: var(--dark-card-border) !important;
}

body.landing-dark.dashboard-active #calendarWidget .cal-dow {
    background: rgba(8, 29, 89, 0.8) !important;
    color: var(--text-light) !important;
}

body.landing-dark.dashboard-active #calendarWidget .cal-cell {
    background: rgba(4, 13, 42, 0.6) !important;
    color: var(--text-light) !important;
}

body.landing-dark.dashboard-active #calendarWidget .cal-cell.empty {
    background: rgba(4, 13, 42, 0.3) !important;
}

body.landing-dark.dashboard-active #calendarWidget .cal-cell.day-positive {
    background: rgba(98, 168, 124, 0.2) !important;
}

body.landing-dark.dashboard-active #calendarWidget .cal-cell.day-negative {
    background: rgba(211, 62, 67, 0.2) !important;
}

body.landing-dark.dashboard-active #calendarWidget .cal-cell.week-total {
    background: rgba(8, 29, 89, 0.6) !important;
}

body.landing-dark.dashboard-active #calendarWidget .cal-cell.week-total.positive {
    background: rgba(98, 168, 124, 0.25) !important;
}

body.landing-dark.dashboard-active #calendarWidget .cal-cell.week-total.negative {
    background: rgba(211, 62, 67, 0.25) !important;
}

body.landing-dark.dashboard-active #calendarWidget .cal-cell.week-total.neutral {
    background: rgba(8, 29, 89, 0.4) !important;
}

body.landing-dark.dashboard-active #calendarWidget .day-number {
    color: var(--text-muted) !important;
}

body.landing-dark.dashboard-active #calendarWidget .pnl-value.pnl-pos {
    color: var(--accent, #62a87c) !important;
}

body.landing-dark.dashboard-active #calendarWidget .pnl-value.pnl-neg {
    color: #ff6b6b !important;
}

body.landing-dark.dashboard-active #calendarWidget .pnl-value.pnl-zero {
    color: var(--text-muted) !important;
}

body.landing-dark.dashboard-active #calendarWidget .month-label {
    color: var(--text-light) !important;
}

body.landing-dark.dashboard-active #calendarWidget .trade-value {
    color: var(--text-light, #ffffff) !important;
    opacity: 0.85 !important;
}

body.landing-dark.dashboard-active #calendarWidget .month-summary {
    color: var(--text-muted) !important;
}

body.landing-dark.dashboard-active #calendarWidget .calendar-nav-btn {
    background: transparent !important;
    border: 2px solid var(--dark-card-border) !important;
    color: var(--text-muted) !important;
}

body.landing-dark.dashboard-active #calendarWidget .calendar-nav-btn:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: rgba(98, 168, 124, 0.1) !important;
}

/* ----------------------------------
   11. Trade Details Section
   ---------------------------------- */
body.landing-dark.dashboard-active #tradeWidget,
body.landing-dark.dashboard-active #tradeDetails,
body.landing-dark.dashboard-active .trade-details-container {
    background: var(--dark-card-bg) !important;
}

body.landing-dark.dashboard-active #tradeWidget .widget-heading,
body.landing-dark.dashboard-active #tradeEntryWidget .widget-heading {
    background: rgba(8, 29, 89, 0.95) !important;
    color: var(--text-light) !important;
    border-bottom: 1px solid var(--dark-card-border) !important;
}

/* Table wrapper with dark background */
body.landing-dark.dashboard-active #tradeDetails .table-wrap {
    background: var(--dark-bg, #040d2a) !important;
    border: 1px solid var(--dark-card-border) !important;
}

body.landing-dark.dashboard-active .trade-table {
    background: transparent !important;
}

body.landing-dark.dashboard-active .trade-table thead th {
    background: rgba(8, 29, 89, 0.8) !important;
    color: var(--text-light) !important;
    border-bottom: 1px solid var(--dark-card-border) !important;
}

body.landing-dark.dashboard-active .trade-table tbody tr {
    background: transparent !important;
    border-bottom: 1px solid rgba(98, 168, 124, 0.1) !important;
}

body.landing-dark.dashboard-active .trade-table tbody tr:hover {
    background: rgba(98, 168, 124, 0.08) !important;
}

body.landing-dark.dashboard-active .trade-table tbody td {
    color: var(--text-light) !important;
    border-color: rgba(98, 168, 124, 0.1) !important;
    background: transparent !important;
}

/* Trade table header cells */
body.landing-dark.dashboard-active #tradeDetails .trade-table th,
body.landing-dark.dashboard-active #tradeDetails .trade-table td {
    background: transparent !important;
}

/* Expandable trade rows */
body.landing-dark.dashboard-active .trade-row,
body.landing-dark.dashboard-active .expandable-row {
    border-bottom: 1px solid rgba(98, 168, 124, 0.1) !important;
}

body.landing-dark.dashboard-active .trade-row:hover,
body.landing-dark.dashboard-active .expandable-row:hover {
    background: rgba(98, 168, 124, 0.05) !important;
}

body.landing-dark.dashboard-active .trade-expand-btn,
body.landing-dark.dashboard-active .trade-table .details-btn {
    color: var(--accent) !important;
}

body.landing-dark.dashboard-active .trade-pager button {
    background: transparent !important;
    border: 1px solid var(--dark-card-border) !important;
    color: var(--text-muted) !important;
}

body.landing-dark.dashboard-active .trade-pager button:hover,
body.landing-dark.dashboard-active .trade-pager button.active {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

body.landing-dark.dashboard-active .trade-clear-all .btn-danger {
    background: transparent !important;
    border: 1px solid #ff6b6b !important;
    color: #ff6b6b !important;
}

body.landing-dark.dashboard-active .trade-clear-all .btn-danger:hover {
    background: #ff6b6b !important;
    color: #fff !important;
}

/* Expandable trade detail rows */
body.landing-dark.dashboard-active #tradeDetails tr.detail-row td {
    background: rgba(8, 29, 89, 0.5) !important;
}

body.landing-dark.dashboard-active #tradeDetails .detail-content {
    color: var(--text-light) !important;
}

body.landing-dark.dashboard-active #tradeDetails .detail-title {
    color: var(--accent) !important;
}

body.landing-dark.dashboard-active #tradeDetails .detail-item {
    color: var(--text-muted) !important;
}

body.landing-dark.dashboard-active #tradeDetails .detail-item strong {
    color: var(--text-light) !important;
}

body.landing-dark.dashboard-active #tradeDetails .detail-box {
    border-color: rgba(98, 168, 124, 0.3) !important;
    background: rgba(8, 29, 89, 0.4) !important;
}

body.landing-dark.dashboard-active #tradeDetails .details-cell {
    color: var(--accent) !important;
}

body.landing-dark.dashboard-active #tradeDetails .faq-toggle::before,
body.landing-dark.dashboard-active #tradeDetails .faq-toggle::after {
    background-color: var(--accent) !important;
}

/* Trade comment input in detail rows */
body.landing-dark.dashboard-active #tradeDetails .trade-comment {
    background: rgba(8, 29, 89, 0.6) !important;
    border-color: rgba(98, 168, 124, 0.3) !important;
    color: var(--text-light) !important;
}

body.landing-dark.dashboard-active #tradeDetails .trade-comment::placeholder {
    color: var(--text-muted) !important;
}

body.landing-dark.dashboard-active #tradeDetails .comment-counter {
    color: var(--text-muted) !important;
}

/* TradingView chart in detail rows */
body.landing-dark.dashboard-active #tradeDetails .tv-chart {
    background: var(--dark-bg) !important;
    border-color: rgba(98, 168, 124, 0.2) !important;
}

/* ----------------------------------
   12. Upload/Import Section & Trade Entry
   ---------------------------------- */
body.landing-dark.dashboard-active #tradeEntryWidget {
    background: var(--dark-card-bg) !important;
}

body.landing-dark.dashboard-active #tradeEntry {
    background: transparent !important;
}

body.landing-dark.dashboard-active .section-subheading {
    color: var(--text-light) !important;
    background: var(--dark-bg, #040d2a) !important;
}

body.landing-dark.dashboard-active #tradeEntry .section-subheading {
    background: var(--dark-card-bg, rgba(8, 29, 89, 0.6)) !important;
}

/* Section wrap (trade entry inner container) */
body.landing-dark.dashboard-active #tradeEntry .section-wrap {
    background: rgba(8, 29, 89, 0.4) !important;
    border: 1px solid var(--dark-card-border) !important;
}

body.landing-dark.dashboard-active #tradeEntry .sections {
    background: transparent !important;
}

/* Import cards grid */
body.landing-dark.dashboard-active .import-card {
    background: rgba(8, 29, 89, 0.6) !important;
    border: 1px solid var(--dark-card-border) !important;
    border-radius: 12px !important;
}

body.landing-dark.dashboard-active .import-card:hover {
    border-color: var(--accent) !important;
    box-shadow: 0 4px 20px rgba(98, 168, 124, 0.15) !important;
}

body.landing-dark.dashboard-active .import-card-header {
    border-bottom: 1px solid var(--dark-card-border) !important;
}

body.landing-dark.dashboard-active .import-card-title {
    color: var(--text-light) !important;
}

body.landing-dark.dashboard-active .import-card-note {
    color: var(--text-muted) !important;
}

/* Fix spacing for Upload card note - remove auto margin since it only has one button */
#importCardUpload .import-card-note {
    margin-top: 0 !important;
}

body.landing-dark.dashboard-active .import-card-note i {
    color: var(--accent) !important;
}

body.landing-dark.dashboard-active .upload-widget,
body.landing-dark.dashboard-active #uploadWidget,
body.landing-dark.dashboard-active .import-section {
    background: rgba(4, 13, 42, 0.4) !important;
    border: 1px solid var(--dark-card-border) !important;
    border-radius: 16px !important;
}

body.landing-dark.dashboard-active #tradeEntry .upload-widget {
    background: transparent !important;
    border: none !important;
}

body.landing-dark.dashboard-active .file-drop-zone {
    background: rgba(4, 13, 42, 0.4) !important;
    border: 2px dashed var(--dark-card-border) !important;
    color: var(--text-muted) !important;
}

body.landing-dark.dashboard-active .file-drop-zone:hover,
body.landing-dark.dashboard-active .file-drop-zone.dragover {
    border-color: var(--accent) !important;
    background: rgba(98, 168, 124, 0.05) !important;
}

/* Dropzone styling */
body.landing-dark.dashboard-active .dropzone {
    background: rgba(4, 13, 42, 0.4) !important;
    border: 2px dashed var(--dark-card-border) !important;
}

body.landing-dark.dashboard-active .dropzone:hover,
body.landing-dark.dashboard-active .dropzone.drag-over {
    background: rgba(98, 168, 124, 0.1) !important;
    border-color: var(--accent) !important;
}

body.landing-dark.dashboard-active .dropzone p,
body.landing-dark.dashboard-active .dropzone span,
body.landing-dark.dashboard-active .dropzone .file-status {
    color: var(--text-light, #ffffff) !important;
}

body.landing-dark.dashboard-active .file-input-button {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

body.landing-dark.dashboard-active .file-input-button:hover {
    background: transparent !important;
    color: var(--accent) !important;
}

/* ----------------------------------
   13. Rithmic Connection Form
   ---------------------------------- */
body.landing-dark.dashboard-active .rithmic-login-form {
    background: transparent !important;
}

body.landing-dark.dashboard-active .rithmic-field label {
    color: var(--text-muted) !important;
}

body.landing-dark.dashboard-active .rithmic-field input,
body.landing-dark.dashboard-active .rithmic-field select {
    background: rgba(4, 13, 42, 0.6) !important;
    border-color: var(--dark-card-border) !important;
    color: var(--text-light) !important;
}

body.landing-dark.dashboard-active .rithmic-field input:focus,
body.landing-dark.dashboard-active .rithmic-field select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(98, 168, 124, 0.2) !important;
}

body.landing-dark.dashboard-active .rithmic-field input::placeholder {
    color: var(--text-muted) !important;
}

body.landing-dark.dashboard-active .rithmic-status {
    background: rgba(98, 168, 124, 0.1) !important;
    border: 1px solid rgba(98, 168, 124, 0.2) !important;
}

body.landing-dark.dashboard-active .rithmic-connected {
    color: var(--accent) !important;
}

/* Rithmic account info display - white text for visibility */
body.landing-dark.dashboard-active #rithmicAccountDisplay,
body.landing-dark.dashboard-active .rithmic-account-info,
body.landing-dark.dashboard-active .rithmic-account-info span {
    color: var(--text-light) !important;
    font-weight: 500;
}

/* Rithmic import progress bar */
body.landing-dark.dashboard-active .rithmic-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

body.landing-dark.dashboard-active .rithmic-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

body.landing-dark.dashboard-active .rithmic-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.3s ease;
}

body.landing-dark.dashboard-active .rithmic-progress-text {
    font-size: 12px;
    color: var(--text-light) !important;
    opacity: 0.9;
}

body.landing-dark.dashboard-active .rithmic-error {
    color: #ff6b6b !important;
}

/* Expanded form panels (Rithmic & Upload) */
body.landing-dark.dashboard-active .rithmic-form-expanded,
body.landing-dark.dashboard-active .upload-form-expanded {
    background: rgba(8, 29, 89, 0.6) !important;
    border: 1px solid var(--dark-card-border) !important;
}

body.landing-dark.dashboard-active .rithmic-form-header,
body.landing-dark.dashboard-active .upload-form-header {
    border-bottom-color: var(--dark-card-border) !important;
}

body.landing-dark.dashboard-active .rithmic-form-header span,
body.landing-dark.dashboard-active .upload-form-header span {
    color: var(--text-light) !important;
}

body.landing-dark.dashboard-active .rithmic-form-close,
body.landing-dark.dashboard-active .upload-form-close {
    color: var(--text-muted) !important;
}

body.landing-dark.dashboard-active .rithmic-form-close:hover,
body.landing-dark.dashboard-active .upload-form-close:hover {
    color: #ff6b6b !important;
}

body.landing-dark.dashboard-active .rithmic-cancel {
    background: rgba(4, 13, 42, 0.6) !important;
    border-color: var(--dark-card-border) !important;
    color: var(--text-muted) !important;
}

body.landing-dark.dashboard-active .rithmic-cancel:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

/* Timezone dropdown in expanded upload form */
body.landing-dark.dashboard-active .upload-form-expanded .filter-toggle,
body.landing-dark.dashboard-active .upload-form-expanded .dropdown-panel {
    background: rgba(4, 13, 42, 0.6) !important;
    border-color: var(--dark-card-border) !important;
    color: var(--text-light) !important;
}

body.landing-dark.dashboard-active .upload-form-expanded .option-item {
    color: var(--text-light) !important;
}

body.landing-dark.dashboard-active .upload-form-expanded .option-item:hover {
    background: rgba(98, 168, 124, 0.1) !important;
}

body.landing-dark.dashboard-active .upload-form-expanded .dropzone {
    background: rgba(4, 13, 42, 0.4) !important;
    border: 2px dashed var(--dark-card-border) !important;
}

body.landing-dark.dashboard-active .upload-form-expanded .dropzone:hover {
    background: rgba(98, 168, 124, 0.1) !important;
    border-color: var(--accent) !important;
}

body.landing-dark.dashboard-active .upload-form-expanded .checkbox-group label {
    color: var(--text-muted) !important;
}

body.landing-dark.dashboard-active .tz-debug {
    color: var(--text-muted) !important;
}

/* ----------------------------------
   14. Scrollbars (for dark theme)
   ---------------------------------- */
body.landing-dark.dashboard-active ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.landing-dark.dashboard-active ::-webkit-scrollbar-track {
    background: rgba(4, 13, 42, 0.5);
    border-radius: 4px;
}

body.landing-dark.dashboard-active ::-webkit-scrollbar-thumb {
    background: rgba(98, 168, 124, 0.3);
    border-radius: 4px;
}

body.landing-dark.dashboard-active ::-webkit-scrollbar-thumb:hover {
    background: rgba(98, 168, 124, 0.5);
}

/* ----------------------------------
   15. Tooltips & Popovers
   ---------------------------------- */
body.landing-dark.dashboard-active .tooltip,
body.landing-dark.dashboard-active [data-tooltip]::after {
    background: rgba(8, 29, 89, 0.95) !important;
    color: var(--text-light) !important;
    border: 1px solid var(--dark-card-border) !important;
}

/* ----------------------------------
   16. Loading States
   ---------------------------------- */
body.landing-dark.dashboard-active .loading-spinner,
body.landing-dark.dashboard-active .spinner {
    border-color: rgba(98, 168, 124, 0.2) !important;
    border-top-color: var(--accent) !important;
}

/* ----------------------------------
   17. Modals (non-auth)
   ---------------------------------- */
body.landing-dark.dashboard-active .modal-overlay {
    background: rgba(4, 13, 42, 0.85) !important;
}

body.landing-dark.dashboard-active .modal-content,
body.landing-dark.dashboard-active .modal-box {
    background: var(--dark-card-bg) !important;
    border: 1px solid var(--dark-card-border) !important;
    color: var(--text-light) !important;
}

/* ----------------------------------
   18. Misc UI Elements
   ---------------------------------- */
body.landing-dark.dashboard-active hr {
    border-color: var(--dark-card-border) !important;
}

body.landing-dark.dashboard-active .divider {
    background: var(--dark-card-border) !important;
}

body.landing-dark.dashboard-active .badge {
    background: rgba(98, 168, 124, 0.15) !important;
    color: var(--accent) !important;
    border: 1px solid rgba(98, 168, 124, 0.3) !important;
}

body.landing-dark.dashboard-active code,
body.landing-dark.dashboard-active pre {
    background: rgba(4, 13, 42, 0.6) !important;
    color: var(--accent) !important;
    border: 1px solid var(--dark-card-border) !important;
}

/* Ensure text readability */
body.landing-dark.dashboard-active p,
body.landing-dark.dashboard-active span:not(.stat-value):not(.pos):not(.neg),
body.landing-dark.dashboard-active div:not([class]) {
    color: inherit;
}

/* ----------------------------------
   19. FAQ Section (Dashboard)
   ---------------------------------- */
body.landing-dark.dashboard-active .faq-section {
    background: var(--dark-bg) !important;
    padding: 3rem 1.5rem 4rem !important;
}

body.landing-dark.dashboard-active .faq-section .section-heading {
    color: var(--text-light) !important;
    text-align: center;
    margin-bottom: 2rem;
}

body.landing-dark.dashboard-active .faq-list {
    max-width: 800px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}

body.landing-dark.dashboard-active .faq-item {
    border: 1px solid var(--dark-card-border) !important;
    border-radius: 12px !important;
    background: var(--dark-card-bg) !important;
    margin-bottom: 1rem !important;
    overflow: hidden;
}

body.landing-dark.dashboard-active .faq-question {
    background-color: transparent !important;
    color: var(--text-light) !important;
    padding: 1rem 1.25rem !important;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

body.landing-dark.dashboard-active .faq-question:hover {
    background-color: rgba(98, 168, 124, 0.1) !important;
}

body.landing-dark.dashboard-active .faq-item.active .faq-question {
    background-color: rgba(98, 168, 124, 0.1) !important;
}

body.landing-dark.dashboard-active .faq-toggle::before,
body.landing-dark.dashboard-active .faq-toggle::after {
    background-color: var(--accent) !important;
}

body.landing-dark.dashboard-active .faq-answer {
    background-color: transparent !important;
}

body.landing-dark.dashboard-active .faq-answer-content {
    color: var(--text-muted) !important;
    padding: 0 1.25rem 1rem !important;
    line-height: 1.6;
}

body.landing-dark.dashboard-active .faq-link {
    color: var(--accent) !important;
    border-bottom-color: var(--accent) !important;
}

/* =====================
   Theme Toggle - Dark Theme
   ===================== */
body.landing-dark .theme-toggle-btn {
    border-color: var(--green);
    color: var(--green);
}

body.landing-dark .theme-toggle-btn:hover {
    background: var(--green);
    color: var(--dark-bg);
}

body.landing-dark:not(.dashboard-active) .theme-toggle-btn {
    border-color: var(--green);
    color: var(--green);
}

body.landing-dark:not(.dashboard-active) .theme-toggle-btn:hover {
    background: var(--green);
    color: var(--dark-bg);
}

/* =============================================
   Pricing Section - Dark Theme Overrides
   ============================================= */
body.landing-dark:not(.dashboard-active) .pricing-section {
    background: linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-bg-lighter) 100%);
    border-color: var(--dark-card-border);
}

body.landing-dark:not(.dashboard-active) .pricing-section .section-heading {
    color: var(--blue);
}

body.landing-dark:not(.dashboard-active) .pricing-subtitle {
    color: var(--text-muted);
}

body.landing-dark:not(.dashboard-active) .pricing-card {
    background: var(--dark-card-bg);
    border-color: var(--dark-card-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

body.landing-dark:not(.dashboard-active) .pricing-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

body.landing-dark:not(.dashboard-active) .pricing-card-trial {
    border-color: var(--green);
    box-shadow: 0 0 30px rgba(98, 168, 124, 0.15);
}

body.landing-dark:not(.dashboard-active) .pricing-card-trial:hover {
    box-shadow: 0 8px 40px rgba(98, 168, 124, 0.25);
}

body.landing-dark:not(.dashboard-active) .pricing-badge {
    background: var(--green);
    color: var(--dark-bg);
}

body.landing-dark:not(.dashboard-active) .pricing-badge.pro {
    background: var(--blue);
    color: white;
}

body.landing-dark:not(.dashboard-active) .pricing-title {
    color: var(--text-light);
}

body.landing-dark:not(.dashboard-active) .pricing-currency {
    color: var(--text-muted);
}

body.landing-dark:not(.dashboard-active) .pricing-value {
    color: var(--text-light);
}

body.landing-dark:not(.dashboard-active) .pricing-vat {
    color: var(--text-subtle);
}

body.landing-dark:not(.dashboard-active) .pricing-period {
    color: var(--text-muted);
}

body.landing-dark:not(.dashboard-active) .pricing-features li {
    color: var(--text-muted);
    border-bottom-color: var(--dark-card-border);
}

body.landing-dark:not(.dashboard-active) .pricing-features li i {
    color: var(--green);
}

body.landing-dark:not(.dashboard-active) .btn-pricing-trial {
    background: var(--green);
    color: var(--dark-bg);
    border-color: var(--green);
}

body.landing-dark:not(.dashboard-active) .btn-pricing-trial:hover {
    background: #7ed4a0;
    border-color: #7ed4a0;
}

body.landing-dark:not(.dashboard-active) .btn-pricing-pro {
    background: transparent;
    color: var(--blue);
    border-color: var(--blue);
}

body.landing-dark:not(.dashboard-active) .btn-pricing-pro:hover {
    background: var(--blue);
    color: white;
}

body.landing-dark:not(.dashboard-active) .pricing-note {
    color: var(--text-subtle);
}

body.landing-dark:not(.dashboard-active) .pricing-guarantee {
    color: var(--text-subtle);
}

body.landing-dark:not(.dashboard-active) .pricing-guarantee i {
    color: var(--green);
}

/* =============================================
   Trial Prompt Modal
   ============================================= */
.trial-prompt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.trial-prompt-modal {
    background: #ffffff;
    border: 1px solid rgba(8, 29, 89, 0.15);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    max-width: 420px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: modalSlideIn 0.3s ease;
}

/* Dark theme for trial prompt */
html.dark-theme .trial-prompt-overlay,
.landing-dark .trial-prompt-overlay {
    background: rgba(4, 13, 42, 0.9);
}

html.dark-theme .trial-prompt-modal,
.landing-dark .trial-prompt-modal {
    background: linear-gradient(145deg, #081d59 0%, #040d2a 100%);
    border: 1px solid rgba(98, 168, 124, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

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

.trial-prompt-modal h2 {
    color: #081d59;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

html.dark-theme .trial-prompt-modal h2,
.landing-dark .trial-prompt-modal h2 {
    color: #ffffff;
}

.trial-prompt-modal .welcome-name {
    color: #62a87c;
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.trial-prompt-modal .trial-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: #081d59;
    margin: 0.5rem 0 0.25rem;
}

html.dark-theme .trial-prompt-modal .trial-price,
.landing-dark .trial-prompt-modal .trial-price {
    color: #ffffff;
}

.trial-prompt-modal .trial-price .currency {
    font-size: 1.5rem;
    vertical-align: top;
    margin-right: 0.25rem;
}

.trial-prompt-modal .trial-price .vat {
    font-size: 1rem;
    color: rgba(8, 29, 89, 0.6);
    margin-left: 0.25rem;
}

html.dark-theme .trial-prompt-modal .trial-price .vat,
.landing-dark .trial-prompt-modal .trial-price .vat {
    color: rgba(255, 255, 255, 0.6);
}

.trial-prompt-modal .trial-duration {
    color: rgba(8, 29, 89, 0.7);
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

html.dark-theme .trial-prompt-modal .trial-duration,
.landing-dark .trial-prompt-modal .trial-duration {
    color: rgba(255, 255, 255, 0.7);
}

.trial-prompt-modal .trial-features {
    text-align: left;
    margin: 0.75rem 0;
    padding: 0.5rem 1rem;
    background: rgba(98, 168, 124, 0.1);
    border-radius: 10px;
}

.trial-prompt-modal .trial-features li {
    color: rgba(8, 29, 89, 0.85);
    padding: 0.35rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

html.dark-theme .trial-prompt-modal .trial-features li,
.landing-dark .trial-prompt-modal .trial-features li {
    color: rgba(255, 255, 255, 0.85);
}

.trial-prompt-modal .trial-features li i {
    color: #62a87c;
}

.trial-prompt-modal .btn-start-trial {
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: #62a87c;
    color: #040d2a;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.25rem;
}

.trial-prompt-modal .btn-start-trial:hover {
    background: #7ed4a0;
    transform: scale(1.02);
}

.trial-prompt-modal .after-trial {
    color: rgba(8, 29, 89, 0.5);
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}

html.dark-theme .trial-prompt-modal .after-trial,
.landing-dark .trial-prompt-modal .after-trial {
    color: rgba(255, 255, 255, 0.5);
}

.trial-prompt-modal .trial-signout {
    background: transparent;
    border: 1px solid rgba(8, 29, 89, 0.2);
    color: rgba(8, 29, 89, 0.5);
    font-size: 0.75rem;
    cursor: pointer;
    margin-top: 0.75rem;
    padding: 0.375rem 1rem;
    border-radius: 4px;
    transition: all 0.2s;
}

.trial-prompt-modal .trial-signout:hover {
    color: rgba(8, 29, 89, 0.8);
    border-color: rgba(8, 29, 89, 0.4);
}

html.dark-theme .trial-prompt-modal .trial-signout,
.landing-dark .trial-prompt-modal .trial-signout {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.5);
}

html.dark-theme .trial-prompt-modal .trial-signout:hover,
.landing-dark .trial-prompt-modal .trial-signout:hover {
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Responsive adjustments for very small screens */
@media (max-height: 600px) {
    .trial-prompt-modal {
        padding: 1rem 1.5rem;
        max-height: 95vh;
    }
    .trial-prompt-modal h2 {
        font-size: 1.25rem;
    }
    .trial-prompt-modal .trial-price {
        font-size: 2rem;
        margin: 0.25rem 0;
    }
    .trial-prompt-modal .trial-features {
        margin: 0.5rem 0;
        padding: 0.375rem 0.75rem;
    }
    .trial-prompt-modal .trial-features li {
        padding: 0.25rem 0;
        font-size: 0.8125rem;
    }
}