:root {
    color-scheme: light;
    --ssx-blue: #1957d7;
    --ssx-blue-strong: #0f3f9e;
    --ssx-green: #10a37f;
    --ssx-bg: #f8fafc;
    --ssx-panel: #ffffff;
    --ssx-ink: #07111f;
    --ssx-muted: #5b6676;
    --ssx-line: #d9e0ea;
    --ssx-elevated: 0 18px 42px rgba(15, 23, 42, 0.08);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --ssx-bg: #0b1020;
    --ssx-panel: #121a2a;
    --ssx-ink: #f8fafc;
    --ssx-muted: #a8b3c7;
    --ssx-line: rgba(148, 163, 184, 0.24);
    --ssx-elevated: 0 22px 54px rgba(0, 0, 0, 0.32);
    --primary: #6ea8ff;
    --primary-dark: #4b8bf2;
    --ink: #f8fafc;
    --muted: #a8b3c7;
    --line: rgba(148, 163, 184, 0.24);
    --soft: #0f172a;
    --panel: #121a2a;
    --call-bg: #060b16;
    --gray-50: #0b1020;
    --gray-100: #111827;
    --gray-200: rgba(148, 163, 184, 0.24);
    --gray-300: rgba(148, 163, 184, 0.36);
    --gray-400: #94a3b8;
    --gray-500: #a8b3c7;
    --gray-600: #cbd5e1;
    --gray-700: #e2e8f0;
    --gray-800: #020617;
    --gray-900: #f8fafc;
}

:root[data-theme="dark"] body {
    background: var(--ssx-bg) !important;
    color: var(--ssx-ink) !important;
}

:root[data-theme="dark"] header,
:root[data-theme="dark"] .site-header {
    background: rgba(15, 23, 42, 0.9) !important;
    border-color: var(--ssx-line) !important;
    box-shadow: none !important;
}

:root[data-theme="dark"] .brand,
:root[data-theme="dark"] .logo,
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,
:root[data-theme="dark"] .recording-title,
:root[data-theme="dark"] .screen-selection-title,
:root[data-theme="dark"] .domain-name,
:root[data-theme="dark"] .stat-value,
:root[data-theme="dark"] .summary-tile strong {
    color: var(--ssx-ink) !important;
}

:root[data-theme="dark"] p,
:root[data-theme="dark"] label,
:root[data-theme="dark"] .helper,
:root[data-theme="dark"] .subtext,
:root[data-theme="dark"] .workspace-label,
:root[data-theme="dark"] .recording-meta,
:root[data-theme="dark"] .domain-status,
:root[data-theme="dark"] .stat-label,
:root[data-theme="dark"] .section-lede,
:root[data-theme="dark"] .matrix-cell,
:root[data-theme="dark"] .plan li,
:root[data-theme="dark"] .price-preview-row {
    color: var(--ssx-muted) !important;
}

:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .recording-controls,
:root[data-theme="dark"] .screen-selection,
:root[data-theme="dark"] .recording-stats,
:root[data-theme="dark"] .video-player,
:root[data-theme="dark"] .plan-banner,
:root[data-theme="dark"] .recording-card,
:root[data-theme="dark"] .custom-domain-section,
:root[data-theme="dark"] .account-section,
:root[data-theme="dark"] .library-toolbar,
:root[data-theme="dark"] .summary-tile,
:root[data-theme="dark"] .domain-item,
:root[data-theme="dark"] .dns-row,
:root[data-theme="dark"] .team-row,
:root[data-theme="dark"] .source-recording-card,
:root[data-theme="dark"] .option-group,
:root[data-theme="dark"] .recording-options,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .modal,
:root[data-theme="dark"] .step,
:root[data-theme="dark"] .feature-row,
:root[data-theme="dark"] .plan-card,
:root[data-theme="dark"] .auth-container,
:root[data-theme="dark"] .share-panel,
:root[data-theme="dark"] .comments-panel {
    background: var(--ssx-panel) !important;
    border-color: var(--ssx-line) !important;
    color: var(--ssx-ink) !important;
    box-shadow: var(--ssx-elevated) !important;
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background: #0f172a !important;
    border-color: var(--ssx-line) !important;
    color: var(--ssx-ink) !important;
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: #7f8ca3 !important;
}

:root[data-theme="dark"] .nav-links a,
:root[data-theme="dark"] .footer-links a {
    color: #cbd5e1 !important;
}

:root[data-theme="dark"] .nav-links a:hover {
    background: rgba(96, 165, 250, 0.12) !important;
    color: #93c5fd !important;
}

:root[data-theme="dark"] .secondary-btn,
:root[data-theme="dark"] .btn-secondary,
:root[data-theme="dark"] button.ghost,
:root[data-theme="dark"] .action-btn.secondary-btn,
:root[data-theme="dark"] .action-btn.secondary {
    background: #172033 !important;
    border-color: var(--ssx-line) !important;
    color: #e2e8f0 !important;
}

:root[data-theme="dark"] .feature-band,
:root[data-theme="dark"] footer {
    background: #0f172a !important;
    border-color: var(--ssx-line) !important;
}

:root[data-theme="dark"] .hero {
    background:
        linear-gradient(90deg, rgba(11, 16, 32, 0.99) 0%, rgba(11, 16, 32, 0.94) 38%, rgba(11, 16, 32, 0.58) 72%, rgba(11, 16, 32, 0.24) 100%),
        url('/assets/images/hero-video-workspace.png') right center / cover no-repeat !important;
    border-color: var(--ssx-line) !important;
}

:root[data-theme="dark"] .hero::after {
    background: linear-gradient(180deg, transparent, rgba(11, 16, 32, 0.96)) !important;
}

:root[data-theme="dark"] .hero h1,
:root[data-theme="dark"] .hero p {
    color: var(--ssx-ink) !important;
}

:root[data-theme="dark"] .mini-card,
:root[data-theme="dark"] .price-preview,
:root[data-theme="dark"] .matrix-wrap,
:root[data-theme="dark"] .matrix-row:first-child,
:root[data-theme="dark"] .faq {
    background: rgba(18, 26, 42, 0.88) !important;
    border-color: var(--ssx-line) !important;
}

:root[data-theme="dark"] .chat-preview,
:root[data-theme="dark"] .recorder-preview,
:root[data-theme="dark"] .use-case-card {
    background: var(--ssx-panel) !important;
    border-color: var(--ssx-line) !important;
    color: var(--ssx-ink) !important;
}

:root[data-theme="dark"] .keyword-list,
:root[data-theme="dark"] .record-dot,
:root[data-theme="dark"] .use-case-card span {
    color: var(--ssx-muted) !important;
}

:root[data-theme="dark"] .recorder-screen {
    background:
        linear-gradient(160deg, rgba(25, 87, 215, 0.18), rgba(16, 163, 127, 0.12)),
        #0f172a !important;
    border-color: var(--ssx-line) !important;
}

:root[data-theme="dark"] .plan-note,
:root[data-theme="dark"] .notice,
:root[data-theme="dark"] .upgrade-teaser,
:root[data-theme="dark"] .domain-upgrade-note {
    background: rgba(37, 99, 235, 0.12) !important;
    border-color: rgba(147, 197, 253, 0.28) !important;
    color: #bfdbfe !important;
}

.brand-x {
    color: var(--ssx-blue);
}

.ssx-theme-toggle {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    border: 1px solid var(--ssx-line);
    border-radius: 999px;
    background: var(--ssx-panel);
    color: var(--ssx-ink);
    display: inline-grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.ssx-theme-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(25, 87, 215, 0.42);
}

.ssx-theme-toggle.ssx-theme-floating {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 1000;
}

.ssx-theme-toggle::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 7.7A9 9 0 1 1 12 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 7.7A9 9 0 1 1 12 3Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

:root[data-theme="dark"] .ssx-theme-toggle::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='m4.93 4.93 1.41 1.41'/%3E%3Cpath d='m17.66 17.66 1.41 1.41'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3Cpath d='m6.34 17.66-1.41 1.41'/%3E%3Cpath d='m19.07 4.93-1.41 1.41'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 640px) {
    .ssx-theme-toggle {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
    }

    .site-header .header-actions .btn-primary:has(.icon) {
        width: 44px;
        min-width: 44px;
        padding: 0;
        font-size: 0 !important;
    }

    .site-header .header-actions .btn-primary:has(.icon) .icon {
        width: 18px;
        height: 18px;
    }
}