:root {
    --accent: #C99642;
    --accent-h: #A97832;
    --ink: #161616;
    --cloud: #D9D8D2;
    --milk: #F7F7F3;
    --lime: #F2FF54;
    --blue: #5865F2;
    --muted: #6B7280;
    --success: #16A34A;
    --danger: #DC2626;
    --sidebar-w: 304px;
    --radius: 18px;
    --dash-bg: #D9D8D2;
    --dash-surface: #FFFFFF;
    --dash-surface-soft: #F7F7F3;
    --dash-text: #161616;
    --dash-muted: rgba(22, 22, 22, .55);
    --dash-border: rgba(22, 22, 22, .08);
}

.dark {
    --dash-bg: #383838;
    --dash-surface: #242622;
    --dash-surface-soft: #2F312D;
    --dash-text: #F7F7F3;
    --dash-muted: rgba(247, 247, 243, .58);
    --dash-border: rgba(247, 247, 243, .10);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    background: var(--dash-bg);
    transition: background-color .28s ease, color .28s ease;
}

body.bg-cloud {
    background: var(--dash-bg) !important;
}

.dark body {
    color: var(--dash-text);
}

.dark body.bg-cloud {
    background: #383838 !important;
}

.dashboard-sidebar {
    background:
        radial-gradient(circle at 18% 0%, rgba(88, 101, 242, .22), transparent 26%),
        radial-gradient(circle at 92% 12%, rgba(242, 255, 84, .10), transparent 24%),
        var(--ink);
}

.dark .dashboard-sidebar {
    background:
        radial-gradient(circle at 18% 0%, rgba(88, 101, 242, .28), transparent 26%),
        radial-gradient(circle at 88% 10%, rgba(242, 255, 84, .08), transparent 24%),
        #10110F;
}

.dashboard-sidebar.is-mobile-open {
    transform: translateX(0) !important;
}

.dashboard-sidebar-backdrop.is-visible {
    display: block;
}

a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D7DAE0; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #B8BDC7; }

.app {
    display: flex;
    min-height: 100vh;
}

.main {
    margin-left: var(--sidebar-w);
    flex: 1;
    display: flex;
    min-height: 100vh;
    min-width: 0;
    flex-direction: column;
}

.content {
    flex: 1;
    width: 95%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 0 2rem;
}

@media (max-width: 1023px) {
    .app { display: block; }
    .main { margin-left: 0; }
    .content {
        width: calc(100% - 2rem);
        padding: 0 0 1rem;
    }
}

.rounded-xl,
.rounded-2xl {
    border-radius: var(--radius) !important;
}

.content .rounded-lg {
    border-radius: 14px !important;
}

.content > section,
.preline-surface,
.toast,
.hs-overlay {
    border-radius: var(--radius);
}

.shadow-sm {
    box-shadow: 0 18px 50px rgba(22, 22, 22, .09) !important;
}

.content .bg-white,
.preline-surface {
    border-color: rgba(22, 22, 22, .08) !important;
}

.dashboard-topbar {
    border: 1px solid var(--dash-border);
    transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

header:has(.dashboard-topbar) {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.theme-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    position: relative;
    width: 5rem;
    height: 2.25rem;
    padding: .2rem;
    border: 1px solid rgba(22, 22, 22, .10);
    border-radius: 999px;
    background: #F2F3F0;
    color: rgba(22, 22, 22, .48);
    box-shadow: inset 0 1px 2px rgba(22, 22, 22, .08), 0 10px 22px rgba(22, 22, 22, .06);
    transition: background-color .34s ease, border-color .34s ease, color .28s ease, transform .2s ease, box-shadow .34s ease;
    will-change: transform;
}

.theme-toggle:hover {
    transform: translateY(-1px);
    color: var(--ink);
    border-color: rgba(22, 22, 22, .16);
    box-shadow: inset 0 1px 2px rgba(22, 22, 22, .08), 0 14px 28px rgba(22, 22, 22, .10);
}

.theme-toggle:active {
    transform: translateY(0) scale(.985);
}

.theme-toggle__icon {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    position: relative;
    z-index: 2;
    opacity: .52;
    transition: color .34s ease, opacity .34s ease, transform .42s cubic-bezier(.22, 1, .36, 1);
}

.theme-toggle__icon svg {
    width: .95rem;
    height: .95rem;
}

.theme-toggle__track {
    position: absolute;
    inset: .2rem;
    overflow: visible;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    transition: background .44s ease, box-shadow .44s ease;
}

.theme-toggle__track::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: transparent;
    opacity: 0;
    transition: opacity .34s ease, background-color .34s ease;
}

.theme-toggle__thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(50% - .02rem);
    height: 100%;
    border-radius: 999px;
    background: #FFFFFF;
    box-shadow: 0 5px 14px rgba(22, 22, 22, .16), inset 0 0 0 1px rgba(22, 22, 22, .06);
    transition: transform .48s cubic-bezier(.22, 1, .36, 1), background-color .34s ease, box-shadow .34s ease;
    will-change: transform;
}

.theme-toggle.is-dark,
.dark .theme-toggle {
    border-color: rgba(247, 247, 243, .12);
    background: #1D1F1C;
    color: rgba(247, 247, 243, .64);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .38), 0 12px 30px rgba(0, 0, 0, .18);
}

.theme-toggle.is-dark:hover,
.dark .theme-toggle:hover {
    color: #fff;
    border-color: rgba(247, 247, 243, .18);
}

.theme-toggle.is-dark .theme-toggle__track,
.dark .theme-toggle .theme-toggle__track {
    background: transparent;
    box-shadow: none;
}

.theme-toggle.is-dark .theme-toggle__track::before,
.dark .theme-toggle .theme-toggle__track::before {
    background: rgba(247, 247, 243, .08);
    opacity: .9;
}

.theme-toggle.is-dark .theme-toggle__thumb,
.dark .theme-toggle .theme-toggle__thumb {
    transform: translateX(calc(100% + .04rem));
    background: #F7F7F3;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .34), inset 0 0 0 1px rgba(22, 22, 22, .08);
}

.theme-toggle__sun {
    color: #161616;
    opacity: .95;
}

.theme-toggle__moon {
    color: rgba(22, 22, 22, .38);
}

.theme-toggle.is-dark .theme-toggle__sun,
.dark .theme-toggle .theme-toggle__sun {
    opacity: .38;
    color: rgba(247, 247, 243, .42);
    transform: rotate(-16deg) scale(.9);
}

.theme-toggle.is-dark .theme-toggle__moon,
.dark .theme-toggle .theme-toggle__moon {
    opacity: .95;
    color: #161616;
    transform: rotate(-4deg) scale(1.04);
}

.theme-toggle--compact {
    width: 4.75rem;
    height: 2.15rem;
}

.dashboard-telegram-link {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(34, 158, 217, .22);
    background: linear-gradient(135deg, rgba(34, 158, 217, .14), rgba(34, 158, 217, .06)) !important;
    color: #1674A4 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 12px 28px rgba(34, 158, 217, .10);
    transition: transform .22s ease, background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.dashboard-telegram-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .42) 42%, transparent 70%);
    transform: translateX(-130%);
    transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}

.dashboard-telegram-link svg,
.dashboard-telegram-link span {
    position: relative;
    z-index: 1;
}

.dashboard-telegram-link svg {
    filter: drop-shadow(0 2px 5px rgba(34, 158, 217, .16));
}

.dashboard-telegram-link:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #229ED9, #1B87C2) !important;
    border-color: rgba(34, 158, 217, .72);
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 18px 36px rgba(34, 158, 217, .22);
}

.dashboard-telegram-link:hover::before {
    transform: translateX(130%);
}

.dark .dashboard-telegram-link:hover {
    background: linear-gradient(135deg, #229ED9, #1B87C2) !important;
    color: #fff !important;
}

.dark .dashboard-telegram-link {
    border-color: rgba(34, 158, 217, .34);
    background: linear-gradient(135deg, rgba(34, 158, 217, .20), rgba(247, 247, 243, .06)) !important;
    color: #BDEBFF !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 38px rgba(0, 0, 0, .16);
}

.dark .bg-cloud,
.dark .bg-cloud\/55,
.dark .bg-cloud\/88,
.dark .bg-cloud\/90 {
    background-color: rgba(24, 25, 22, .88) !important;
}

.dark .main .bg-white,
.dark .dashboard-topbar,
.dark .preline-surface,
.dark .toast {
    background-color: var(--dash-surface) !important;
    border-color: var(--dash-border) !important;
    color: var(--dash-text) !important;
}

.dark .main .bg-gray-50,
.dark .main .bg-\[\#F7F7F3\],
.dark .main .bg-milk {
    background-color: var(--dash-surface-soft) !important;
}

.dark .main .text-ink,
.dark .dashboard-topbar .text-ink,
.dark .main .text-gray-900,
.dark .main .text-gray-950,
.dark .main .text-gray-800,
.dark .main .text-gray-700 {
    color: var(--dash-text) !important;
}

.dark .main .text-ink\/65,
.dark .main .text-ink\/62,
.dark .main .text-ink\/55,
.dark .main .text-ink\/52,
.dark .main .text-ink\/50,
.dark .main .text-ink\/48,
.dark .main .text-ink\/45,
.dark .main .text-ink\/42,
.dark .main .text-ink\/35,
.dark .main .text-ink\/30,
.dark .main .text-gray-600,
.dark .main .text-gray-500,
.dark .main .text-gray-400,
.dark .dashboard-topbar .text-ink\/65,
.dark .dashboard-topbar .text-ink\/62,
.dark .dashboard-topbar .text-ink\/55,
.dark .dashboard-topbar .text-ink\/50 {
    color: var(--dash-muted) !important;
}

.dark .main .border-gray-200,
.dark .main .border-gray-100,
.dark .main .border-gray-50,
.dark .main .divide-gray-50 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--dash-border) !important;
}

.dark .main input:not([type="checkbox"]):not([type="radio"]),
.dark .main select,
.dark .main textarea {
    background-color: #1C1D1A !important;
    border-color: rgba(247, 247, 243, .12) !important;
    color: var(--dash-text) !important;
}

.dark .main input::placeholder,
.dark .main textarea::placeholder {
    color: rgba(247, 247, 243, .34) !important;
}

.dark .main .shadow-sm,
.dark .dashboard-topbar {
    box-shadow: 0 18px 55px rgba(0, 0, 0, .26) !important;
}

.content .bg-gray-50 {
    background-color: rgba(247, 247, 243, .72) !important;
}

.content .border-gray-200,
.content .border-gray-100 {
    border-color: rgba(22, 22, 22, .08) !important;
}

.content input:not([type="checkbox"]):not([type="radio"]),
.content select,
.content textarea {
    border-radius: 14px !important;
}

.content button,
.content a {
    text-underline-offset: 3px;
}

.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .65s linear infinite;
}

.spinner.dark {
    border-color: rgba(0,0,0,.15);
    border-top-color: var(--ink);
}

@keyframes spin { to { transform: rotate(360deg); } }

.toast {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-width: 220px;
    max-width: min(420px, calc(100vw - 2rem));
    padding: .75rem .875rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(22, 22, 22, .16);
    color: #111827;
    font-size: .875rem;
    font-weight: 500;
    animation: toastIn .18s ease;
}

.toast.removing { animation: toastOut .16s ease forwards; }
.toast svg { width: 16px; height: 16px; flex-shrink: 0; }
.toast-success { border-left: 3px solid var(--success); }
.toast-success svg { color: var(--success); }
.toast-error { border-left: 3px solid var(--danger); }
.toast-error svg { color: var(--danger); }
.toast-info { border-left: 3px solid var(--accent); }
.toast-info svg { color: var(--accent); }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    to { opacity: 0; transform: translateY(8px) scale(.98); }
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
    flex-shrink: 0;
}

.status-dot.online {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(22, 163, 74, .14);
    animation: pulse-dot 2s infinite;
}

.status-dot.offline { background: #9CA3AF; }

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 4px rgba(22, 163, 74, .14); }
    50% { box-shadow: 0 0 0 7px rgba(22, 163, 74, .07); }
}

.cmd-card.disabled { opacity: .48; }

.preline-surface {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(22, 22, 22, .08);
    box-shadow: 0 18px 50px rgba(22, 22, 22, .09);
    backdrop-filter: blur(18px);
}

.ui-switch {
    appearance: none;
    width: 2.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    border: 1px solid #D1D5DB;
    border-radius: 999px;
    background-color: #E5E7EB;
    background-image: radial-gradient(circle, #fff 46%, transparent 48%);
    background-position: .125rem center;
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08);
    cursor: pointer;
    transition: background-color .16s ease, background-position .16s ease, border-color .16s ease;
}

.ui-switch:checked {
    border-color: var(--accent);
    background-color: var(--accent);
    background-position: calc(100% - .125rem) center;
}

.ui-switch:focus-visible {
    outline: 2px solid rgba(184, 138, 68, .32);
    outline-offset: 2px;
}

/* Dark dashboard polish: keep accent cards readable and avoid pale overlays. */
.dark .main {
    background: #383838;
}

.dark .content {
    color: var(--dash-text);
}

.dark .main .bg-lime,
.dark .main .bg-lime *,
.dark .main .hover\:bg-\[\#E5F044\]:hover,
.dark .main .hover\:bg-\[\#E5F044\]:hover * {
    color: #161616 !important;
}

.dark .main .bg-\[\#E7E5FF\],
.dark .main .bg-\[\#E7E5FF\] * {
    color: #161616 !important;
}

.dark .main .bg-\[\#161616\],
.dark .main .bg-\[\#161616\] * {
    color: #fff !important;
}

.dark #analyticsFade {
    background: linear-gradient(to top, var(--dash-surface) 0%, rgba(36, 38, 34, .88) 38%, transparent 100%) !important;
}

.dark #analyticsText,
.dark #analyticsText * {
    color: rgba(247, 247, 243, .86) !important;
}

.dark #analyticsText h1,
.dark #analyticsText h2,
.dark #analyticsText h3,
.dark #analyticsText strong {
    color: #fff !important;
}

.dark .dashboard-period-btn.bg-ink,
.dark .dashboard-list-tab.bg-ink {
    background-color: #10110F !important;
    color: #fff !important;
}

.dashboard-period-btn.is-active,
.dashboard-period-btn.is-active:hover,
.dashboard-period-btn.bg-ink,
.dashboard-period-btn.bg-ink:hover,
.dashboard-list-tab.bg-ink,
.dashboard-list-tab.bg-ink:hover {
    background-color: #161616 !important;
    color: #fff !important;
}

.dashboard-period-btn:not(.is-active):hover,
.dashboard-list-tab:not(.bg-ink):hover {
    background-color: rgba(22, 22, 22, .06);
    color: #161616 !important;
}

.dark .dashboard-period-btn:not(.bg-ink),
.dark .dashboard-list-tab:not(.bg-ink) {
    color: rgba(247, 247, 243, .62) !important;
}

.dark .dashboard-period-btn:not(.bg-ink):hover,
.dark .dashboard-list-tab:not(.bg-ink):hover {
    color: #fff !important;
}

.dark .apexcharts-tooltip,
.dark .apexcharts-tooltip.apexcharts-theme-light,
.dark .apexcharts-tooltip.apexcharts-theme-dark {
    background: #F7F7F3 !important;
    border: 1px solid rgba(22, 22, 22, .10) !important;
    color: #161616 !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28) !important;
}

.dark .apexcharts-tooltip-title {
    background: #ECEDE7 !important;
    border-bottom-color: rgba(22, 22, 22, .08) !important;
    color: #161616 !important;
}

.dark .apexcharts-tooltip-text,
.dark .apexcharts-tooltip-y-group,
.dark .apexcharts-tooltip-series-group,
.dark .apexcharts-tooltip-text-y-label,
.dark .apexcharts-tooltip-text-y-value {
    color: #161616 !important;
}

.dark .apexcharts-xaxistooltip,
.dark .apexcharts-yaxistooltip {
    background: #F7F7F3 !important;
    border-color: rgba(22, 22, 22, .10) !important;
    color: #161616 !important;
}

.dark #topVideosList a,
.dark #topHistoricalClipsList a {
    color: var(--dash-text) !important;
}

.dark #topVideosList a:hover,
.dark #topHistoricalClipsList a:hover {
    background-color: rgba(247, 247, 243, .06) !important;
}

.dark #topVideosList .text-\[\#161616\],
.dark #topHistoricalClipsList .text-\[\#161616\] {
    color: var(--dash-text) !important;
}

.dark #topVideosList .text-\[\#161616\]\/45,
.dark #topHistoricalClipsList .text-\[\#161616\]\/45,
.dark #topVideosList .text-\[\#161616\]\/35,
.dark #topHistoricalClipsList .text-\[\#161616\]\/35 {
    color: rgba(247, 247, 243, .48) !important;
}

.dark #topVideosList .bg-\[\#F7F7F3\],
.dark #topHistoricalClipsList .bg-\[\#F7F7F3\] {
    background-color: rgba(247, 247, 243, .08) !important;
}

/* Final dark-mode corrections for nested accent elements. */
.dark .main {
    background: #383838 !important;
}

.dark .dashboard-sidebar {
    background: #10110F !important;
    box-shadow: none !important;
}

.dark .main .bg-\[\#161616\] .bg-lime,
.dark .main .bg-\[\#161616\] .bg-lime *,
.dark .main .bg-\[\#161616\] .hover\:bg-\[\#E5F044\]:hover,
.dark .main .bg-\[\#161616\] .hover\:bg-\[\#E5F044\]:hover *,
.dark .main .bg-lime,
.dark .main .bg-lime * {
    color: #161616 !important;
}

.dark .main .bg-lime .text-ink\/62,
.dark .main .bg-lime .text-ink\/55,
.dark .main .bg-lime .text-ink\/52,
.dark .main .bg-lime .text-ink\/50,
.dark .main .bg-lime .text-ink\/45,
.dark .main .bg-lime .text-ink\/42 {
    color: rgba(22, 22, 22, .62) !important;
}

.dark .main .h-4.overflow-hidden {
    background-color: rgba(247, 247, 243, .12) !important;
    box-shadow: inset 0 0 0 1px rgba(247, 247, 243, .06) !important;
}

.dark .main .h-4.overflow-hidden > .bg-ink {
    background-color: var(--lime) !important;
    box-shadow: 0 0 18px rgba(242, 255, 84, .22) !important;
}

.dark #topVideosList .text-\[\#161616\],
.dark #topHistoricalClipsList .text-\[\#161616\] {
    color: rgba(247, 247, 243, .88) !important;
}

.dark #topVideosList .text-\[\#161616\]\/50,
.dark #topHistoricalClipsList .text-\[\#161616\]\/50,
.dark #topVideosList .text-\[\#161616\]\/45,
.dark #topHistoricalClipsList .text-\[\#161616\]\/45,
.dark #topVideosList .text-\[\#161616\]\/35,
.dark #topHistoricalClipsList .text-\[\#161616\]\/35 {
    color: rgba(247, 247, 243, .56) !important;
}

/* Launch/settings page */
.launch-page {
    --launch-ink: #161616;
    --launch-surface: #FFFFFF;
    --launch-soft: #F7F7F3;
    --launch-muted: rgba(22, 22, 22, .58);
    --launch-border: rgba(22, 22, 22, .08);
    --launch-line: rgba(22, 22, 22, .06);
}

.launch-page :is(h1, h2, h3, p) { margin: 0; }
.launch-page button, .launch-page a { transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.launch-page button:disabled { cursor: not-allowed; opacity: .48; transform: none !important; }
.launch-page .launch-btn--primary:disabled,
.launch-page .launch-btn--dark:disabled {
    opacity: .72;
}

.launch-hero,
.launch-panel,
.launch-status-grid {
    border: 1px solid var(--launch-border);
    border-radius: 18px;
    background: var(--launch-surface);
    box-shadow: 0 18px 55px rgba(22, 22, 22, .08);
}

.launch-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 450px;
    overflow: hidden;
}

.launch-hero__main {
    position: relative;
    display: flex;
    min-height: 260px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.05rem;
    padding: clamp(1.25rem, 2.4vw, 1.85rem);
    color: #fff;
    background:
        radial-gradient(circle at 18% 10%, rgba(242, 255, 84, .12), transparent 25%),
        radial-gradient(circle at 88% 4%, rgba(88, 101, 242, .24), transparent 31%),
        linear-gradient(135deg, #151513 0%, #10110F 100%);
}

.launch-kicker {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .45rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    padding: .45rem .7rem;
    color: rgba(255, 255, 255, .72);
    font-size: .75rem;
    font-weight: 900;
}

.launch-kicker span,
.launch-status span,
.launch-checklist span,
.launch-connected i {
    width: .45rem;
    height: .45rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #A3A3A3;
}

.launch-kicker span { background: #27C783; }
.launch-hero h1 {
    max-width: 690px;
    font-size: clamp(2rem, 3.1vw, 3.35rem);
    font-weight: 950;
    line-height: .95;
    letter-spacing: 0;
}

.launch-hero p {
    max-width: 640px;
    color: rgba(255, 255, 255, .66);
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.5;
}

.launch-progress { margin-top: 1rem; }
.launch-progress__top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: rgba(255, 255, 255, .54);
    font-size: .78rem;
    font-weight: 900;
}
.launch-progress__top strong { color: #fff; }
.launch-progress__bar {
    height: .55rem;
    margin-top: .7rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
}
.launch-progress__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent), var(--lime));
}

.launch-plan {
    padding: clamp(1.1rem, 1.8vw, 1.55rem);
    background: var(--launch-surface);
}
.launch-plan__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.launch-label {
    color: rgba(22, 22, 22, .42);
    font-size: .76rem;
    font-weight: 950;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.launch-plan h2,
.launch-panel h2 {
    margin-top: .35rem;
    color: var(--launch-ink);
    font-size: clamp(1.35rem, 2vw, 1.8rem);
    font-weight: 950;
}
.launch-plan p,
.launch-panel p {
    color: var(--launch-muted);
    font-size: .92rem;
    font-weight: 650;
    line-height: 1.58;
}
.launch-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--launch-soft);
    padding: .45rem .75rem;
    color: rgba(22, 22, 22, .58);
    font-size: .76rem;
    font-weight: 950;
    white-space: nowrap;
}
.launch-pill.is-ok {
    background: #E8FFF2;
    color: #07823F;
}
.launch-plan-card,
.launch-service {
    margin-top: .85rem;
    border: 1px solid var(--launch-border);
    border-radius: 18px;
    background: var(--launch-soft);
    padding: .9rem;
}
.launch-plan-card__price {
    color: var(--launch-ink);
    font-size: 1.75rem;
    font-weight: 950;
}
.launch-plan-card__price span {
    color: var(--launch-muted);
    font-size: .8rem;
    font-weight: 850;
}
.launch-plan-card__title,
.launch-service strong {
    display: block;
    margin-top: .35rem;
    color: var(--launch-ink);
    font-size: .92rem;
    font-weight: 950;
}
.launch-service {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .85rem;
    min-height: 7.35rem;
    background: #151513;
    border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 22px 48px rgba(22, 22, 22, .16);
    color: #fff;
    isolation: isolate;
    position: relative;
    overflow: hidden;
}
.launch-service::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 8% 20%, rgba(242, 255, 58, .28), transparent 32%),
        linear-gradient(135deg, rgba(242, 255, 58, .14), transparent 58%);
}
.launch-service__icon {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    border-radius: 16px;
    background: var(--lime);
    color: #161616;
}
.launch-service__icon svg {
    width: 1.35rem;
    height: 1.35rem;
}
.launch-service p {
    max-width: 260px;
    color: rgba(255, 255, 255, .72);
    font-size: .86rem;
    line-height: 1.42;
}
.launch-service strong {
    margin-top: 0;
    color: #fff;
    font-size: 1rem;
    white-space: nowrap;
}
.launch-service .launch-btn--dark {
    grid-column: 1 / -1;
    min-width: 100%;
    background: var(--lime);
    color: #161616;
    box-shadow: 0 14px 30px rgba(242, 255, 58, .18);
}
.launch-service .launch-btn--dark:hover {
    background: #F7FF75;
}

.launch-actions,
.launch-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1rem;
}
.launch-card-actions {
    grid-column: 2;
    align-content: flex-start;
    justify-content: flex-start;
    margin-top: -.2rem;
}
.launch-btn {
    display: inline-flex;
    min-height: 2.45rem;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: .65rem .95rem;
    font-size: .84rem;
    font-weight: 950;
    line-height: 1;
}
.launch-btn:hover { transform: translateY(-1px); }
.launch-btn__icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}
.launch-btn--primary,
.launch-btn--dark {
    background: var(--launch-ink);
    color: #fff;
    box-shadow: 0 12px 28px rgba(22, 22, 22, .14);
}
.launch-btn--primary:hover,
.launch-btn--dark:hover { background: #000; }
.launch-btn--ghost {
    border-color: var(--launch-border);
    background: var(--launch-surface);
    color: var(--launch-ink);
}
.launch-btn--ghost:hover { border-color: rgba(22, 22, 22, .18); background: #fff; }
.launch-btn--danger {
    border-color: rgba(220, 38, 38, .22);
    background: #fff;
    color: #B91C1C;
}

.launch-status-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .75rem;
    padding: .85rem;
}
.launch-status-grid--hero {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}
.launch-status {
    display: grid;
    gap: .35rem;
    border-radius: 16px;
    background: var(--launch-soft);
    padding: .9rem;
}
.launch-status-grid--hero .launch-status {
    min-height: 5.05rem;
    background: rgba(255, 255, 255, .09);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
    backdrop-filter: blur(10px);
}
.launch-status.is-ready span,
.launch-checklist .is-ready span,
.launch-connected i { background: #27C783; }
.launch-status div {
    color: var(--launch-ink);
    font-size: .78rem;
    font-weight: 950;
}
.launch-status-grid--hero .launch-status div {
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .22);
}
.launch-status strong {
    color: var(--launch-muted);
    font-size: .72rem;
    font-weight: 850;
}
.launch-status-grid--hero .launch-status strong {
    color: rgba(255, 255, 255, .62);
}

.launch-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 1.1rem;
    align-items: start;
}
.launch-stack {
    display: grid;
    gap: 1.1rem;
}
.launch-panel {
    overflow: hidden;
    padding: 1rem;
}
.launch-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--launch-line);
    padding: .3rem .25rem 1rem;
}
.launch-section-head > p {
    max-width: 360px;
    text-align: right;
}

.launch-connect-grid {
    display: grid;
    gap: .8rem;
    padding-top: 1rem;
}
.launch-connect-card {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    border: 1px solid var(--launch-border);
    border-radius: 18px;
    background: var(--launch-surface);
    padding: 1rem;
}
.launch-connect-card.is-ready { border-color: rgba(39, 199, 131, .22); }
.launch-connect-card__icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border-radius: 14px;
    background: #111;
    color: #fff;
    font-size: .78rem;
    font-weight: 950;
}
.launch-connect-card__icon svg {
    width: 1.45rem;
    height: 1.45rem;
}
.launch-connect-card__icon.is-twitch { background: #9146FF; }
.launch-connect-card__icon.is-telegram { background: #229ED9; }
.launch-connect-card__icon.is-discord { background: #5865F2; }
.launch-connect-card__icon.is-ai { background: #161616; color: #fff; }
.launch-connect-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
}
.launch-connect-card h3,
.launch-eventsub h3 {
    color: var(--launch-ink);
    font-size: 1rem;
    font-weight: 950;
}
.launch-connect-card p {
    margin-top: .45rem;
}

.launch-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    margin-top: .85rem;
    width: 100%;
}
.launch-form-grid span {
    color: rgba(22, 22, 22, .42);
    font-size: .72rem;
    font-weight: 950;
    text-transform: uppercase;
}
.launch-form-grid input {
    width: 100%;
    min-height: 2.8rem;
    margin-top: .35rem;
    border: 1px solid var(--launch-border);
    border-radius: 14px;
    background: var(--launch-soft);
    padding: .75rem .85rem;
    color: var(--launch-ink);
    font-size: .9rem;
    font-weight: 700;
    outline: none;
}
.launch-input-row,
.launch-copy-row {
    display: flex;
    min-width: 0;
    align-items: stretch;
    gap: .45rem;
}
.launch-input-row input {
    min-width: 0;
}
.launch-icon-btn {
    display: inline-grid;
    flex: 0 0 2.8rem;
    min-height: 2.8rem;
    margin-top: .35rem;
    place-items: center;
    border: 1px solid var(--launch-border);
    border-radius: 14px;
    background: var(--launch-surface);
    color: var(--launch-ink);
}
.launch-icon-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(22, 22, 22, .18);
    background: #fff;
}
.launch-icon-btn svg {
    width: 1.05rem;
    height: 1.05rem;
}
.launch-form-grid input:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(88, 101, 242, .12);
}

.launch-note,
.launch-connected,
.launch-moderator,
.launch-command {
    margin-top: .85rem;
    border: 1px solid var(--launch-border);
    border-radius: 16px;
    background: var(--launch-soft);
    padding: .85rem;
    color: var(--launch-muted);
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.55;
}
.launch-note strong { display: block; color: var(--launch-ink); }
.launch-note code,
.launch-command code {
    display: inline-flex;
    border-radius: 12px;
    background: #fff;
    padding: .55rem .7rem;
    color: var(--launch-ink);
    font-weight: 950;
}
.launch-copy-row {
    margin-top: .55rem;
}
.launch-copy-row code {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.launch-copy-row .launch-icon-btn {
    margin-top: 0;
}
.launch-note.is-warn { background: #FFF9DF; border-color: rgba(201, 150, 66, .35); color: #7A520F; }
.launch-note.is-info { background: rgba(88, 101, 242, .08); border-color: rgba(88, 101, 242, .18); color: #3941A5; }
.launch-connected {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: .5rem;
    color: #07823F;
    white-space: nowrap;
}
.launch-connected strong {
    min-width: 0;
    overflow: hidden;
    color: #07823F;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.launch-connected span {
    color: #07823F;
    font-size: .82rem;
    font-weight: 850;
}

.launch-eventsub {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    padding-top: 1rem;
}
.launch-eventsub > div {
    border: 1px solid var(--launch-border);
    border-radius: 18px;
    background: var(--launch-soft);
    padding: 1rem;
}
.launch-eventsub .launch-eventsub-lead {
    display: block;
    margin-top: .8rem !important;
}
.launch-eventsub-step {
    display: flex;
    min-height: 13.1rem;
    flex-direction: column;
}
.launch-eventsub-step > .launch-btn {
    margin-top: auto;
}
.launch-eventsub-status {
    display: flex;
    min-height: 4.9rem;
    gap: .75rem;
    margin-top: auto;
    border: 1px solid rgba(39, 199, 131, .18);
    border-radius: 16px;
    background: rgba(39, 199, 131, .08);
    padding: .9rem;
    align-items: center;
}
.launch-eventsub-status span {
    width: .5rem;
    height: .5rem;
    flex: 0 0 auto;
    margin-top: .3rem;
    border-radius: 999px;
    background: #27C783;
}
.launch-eventsub-status strong {
    color: #07823F;
    font-size: .9rem;
    font-weight: 950;
}
.launch-eventsub-status p {
    margin-top: .15rem;
    font-size: .82rem;
    line-height: 1.45;
}
.launch-command {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
}
.launch-moderator.is-ready { color: #07823F; border-color: rgba(39, 199, 131, .24); background: #E8FFF2; }

.launch-diagnostics {
    margin-top: .9rem;
    border: 1px solid var(--launch-border);
    border-radius: 18px;
    background: var(--launch-soft);
    padding: 1rem;
}
.launch-diagnostics summary {
    cursor: pointer;
    color: var(--launch-ink);
    font-size: .95rem;
    font-weight: 950;
}
.launch-diagnostics p { margin-top: .55rem; }
.launch-admin-note {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    margin-top: .8rem;
    border: 1px solid rgba(88, 101, 242, .18);
    border-radius: 16px;
    background: rgba(88, 101, 242, .08);
    padding: .8rem;
}
.launch-admin-note span {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: #161616;
    padding: .32rem .55rem;
    color: #fff;
    font-size: .68rem;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}
.launch-admin-note p {
    margin: 0;
    color: #3941A5;
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.45;
}
.launch-diagnostics pre,
#testStreamResult {
    margin-top: .85rem;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 16px;
    background: #151513;
    padding: 1rem;
    color: rgba(255, 255, 255, .82);
    white-space: pre-wrap;
}

.launch-test-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
    padding-top: 1rem;
}
.launch-test-grid > * {
    min-height: 9rem;
    border: 1px solid var(--launch-border);
    border-radius: 18px;
    background: var(--launch-soft);
    padding: 1rem;
    text-align: left;
}
.launch-test-grid > *:hover {
    transform: translateY(-1px);
    border-color: rgba(22, 22, 22, .16);
    background: #fff;
}
.launch-test-grid span {
    color: rgba(22, 22, 22, .42);
    font-size: .72rem;
    font-weight: 950;
}
.launch-test-grid strong {
    display: block;
    margin-top: .55rem;
    color: var(--launch-ink);
    font-size: .95rem;
    font-weight: 950;
}
.launch-test-grid p {
    margin-top: .45rem;
    font-size: .82rem;
}

.launch-side {
    position: sticky;
    top: 6.5rem;
    display: grid;
    gap: 1.1rem;
}
.launch-checklist {
    display: grid;
    gap: .55rem;
    margin-top: 1rem;
}
.launch-checklist > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    border-radius: 14px;
    background: var(--launch-soft);
    padding: .75rem;
}
.launch-checklist p {
    color: var(--launch-ink);
    font-size: .86rem;
    font-weight: 850;
}
.launch-checklist strong {
    color: var(--launch-muted);
    font-size: .74rem;
    font-weight: 950;
}
.launch-help {
    position: relative;
    background: #151513 !important;
    color: #fff;
    isolation: isolate;
}
.launch-help::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 18% 18%, rgba(242, 255, 58, .32), transparent 34%),
        linear-gradient(135deg, rgba(242, 255, 58, .16), transparent 58%);
}
.launch-help__mark {
    width: 3.2rem;
    height: .35rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: var(--lime);
}
.launch-help p,
.launch-help h2,
.launch-help .launch-label { color: #fff !important; }
.launch-help p { color: rgba(255, 255, 255, .76) !important; }
.launch-help .launch-btn--ghost {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .10);
    color: #fff;
}
.launch-help .launch-btn--ghost:hover {
    background: rgba(255, 255, 255, .16);
}

@media (max-width: 1279px) {
    .launch-hero,
    .launch-layout {
        grid-template-columns: 1fr;
    }
    .launch-status-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .launch-status-grid--hero {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .launch-side {
        position: static;
    }
}

@media (max-width: 900px) {
    .launch-card-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
    .launch-eventsub,
    .launch-form-grid {
        grid-template-columns: 1fr;
    }
    .launch-service {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .launch-test-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .launch-hero__main {
        min-height: 300px;
    }
    .launch-hero h1 {
        font-size: 2.55rem;
    }
    .launch-status-grid,
    .launch-test-grid {
        grid-template-columns: 1fr;
    }
    .launch-section-head {
        display: grid;
    }
    .launch-section-head > p {
        text-align: left;
    }
}

.dark .launch-page {
    --launch-ink: #F7F7F3;
    --launch-surface: #242622;
    --launch-soft: #2F312D;
    --launch-muted: rgba(247, 247, 243, .58);
    --launch-border: rgba(247, 247, 243, .10);
    --launch-line: rgba(247, 247, 243, .08);
}
.dark .launch-hero,
.dark .launch-panel,
.dark .launch-status-grid {
    box-shadow: none;
}
.dark .launch-plan-card,
.dark .launch-eventsub > div,
.dark .launch-test-grid > *,
.dark .launch-checklist > div,
.dark .launch-status,
.dark .launch-note,
.dark .launch-diagnostics {
    background-color: var(--launch-soft);
    border-color: var(--launch-border);
}
.dark .launch-btn--ghost,
.dark .launch-form-grid input,
.dark .launch-note code,
.dark .launch-command code {
    background: #1C1D1A;
    border-color: var(--launch-border);
    color: var(--launch-ink);
}
.dark .launch-test-grid > *:hover,
.dark .launch-btn--ghost:hover {
    background: #1C1D1A;
}
.dark .launch-btn--primary,
.dark .launch-btn--dark {
    background: #F2FF3A;
    color: #161616;
    box-shadow: none;
}
.dark .launch-btn--primary:hover,
.dark .launch-btn--dark:hover {
    background: #F7FF75;
}
.dark .launch-btn--primary:disabled,
.dark .launch-btn--dark:disabled {
    background: #DDE85A;
    color: #161616;
    opacity: .78;
}
.dark .launch-btn--primary .spinner,
.dark .launch-btn--dark .spinner {
    border-color: rgba(22, 22, 22, .22);
    border-top-color: #161616;
}
.dark .launch-label,
.dark .launch-form-grid span,
.dark .launch-test-grid span {
    color: rgba(247, 247, 243, .42);
}
.dark .launch-service,
.dark .launch-note.is-warn {
    background: rgba(201, 150, 66, .13);
    border-color: rgba(201, 150, 66, .34);
}
.dark .launch-service {
    background: #151513;
    border-color: rgba(247, 247, 243, .10);
}
.dark .launch-service strong,
.dark .launch-service p {
    color: #fff;
}
.dark .launch-service p {
    color: rgba(255, 255, 255, .72);
}
.dark .launch-icon-btn {
    background: #1C1D1A;
    border-color: var(--launch-border);
    color: var(--launch-ink);
}
.dark .launch-icon-btn:hover {
    background: #1C1D1A;
}
.dark .launch-eventsub-status {
    background: rgba(39, 199, 131, .10);
    border-color: rgba(39, 199, 131, .22);
}
.dark .launch-admin-note {
    background: rgba(88, 101, 242, .12);
    border-color: rgba(88, 101, 242, .24);
}
.dark .launch-admin-note p {
    color: rgba(247, 247, 243, .72);
}

/* AI bot page dark-mode contrast fixes */
.dark .ai-bot-page {
    --ai-bot-surface: #242622;
    --ai-bot-soft: #1C1D1A;
    --ai-bot-hover: #2F312D;
    --ai-bot-text: #F7F7F3;
    --ai-bot-muted: rgba(247, 247, 243, .62);
    --ai-bot-faint: rgba(247, 247, 243, .42);
    --ai-bot-border: rgba(247, 247, 243, .10);
    --ai-bot-accent: #F2FF3A;
}

.dark .ai-bot-page #streamCategoryBadge,
.dark .ai-bot-page #clipsCount,
.dark .ai-bot-page [data-ai-panel="history"] .rounded-full.bg-gray-100 {
    background: var(--ai-bot-soft) !important;
    border: 1px solid var(--ai-bot-border);
    color: var(--ai-bot-text) !important;
}

.dark .ai-bot-page .ai-tab-button {
    background: var(--ai-bot-soft) !important;
    border-color: var(--ai-bot-border) !important;
    color: var(--ai-bot-muted) !important;
}

.dark .ai-bot-page .ai-tab-button:hover {
    background: var(--ai-bot-hover) !important;
    color: var(--ai-bot-text) !important;
}

.dark .ai-bot-page .ai-tab-button[aria-selected="true"] {
    background: var(--ai-bot-accent) !important;
    border-color: var(--ai-bot-accent) !important;
    color: #161616 !important;
}

.dark .ai-bot-page a[href$="page=integrations"] {
    background: var(--ai-bot-soft) !important;
    border-color: var(--ai-bot-border) !important;
    color: var(--ai-bot-text) !important;
}

.dark .ai-bot-page a[href$="page=integrations"]:hover {
    background: var(--ai-bot-hover) !important;
}

.dark .ai-bot-page a[href$="page=integrations"] span {
    color: var(--ai-bot-muted) !important;
}

.dark .ai-bot-page label:has(.persona-radio),
.dark .ai-bot-page .persona-prompt-button {
    background: var(--ai-bot-soft) !important;
    border-color: var(--ai-bot-border) !important;
    color: var(--ai-bot-text) !important;
}

.dark .ai-bot-page label:has(.persona-radio):hover,
.dark .ai-bot-page .persona-prompt-button:hover {
    background: var(--ai-bot-hover) !important;
}

.dark .ai-bot-page label:has(.persona-radio:checked) {
    background: var(--ai-bot-soft) !important;
    border-color: var(--ai-bot-accent) !important;
}

.dark .ai-bot-page label:has(.persona-radio).ring-gray-950 {
    --tw-ring-color: var(--ai-bot-accent) !important;
}

.dark .ai-bot-page label:has(.persona-radio) .text-gray-950 {
    color: var(--ai-bot-text) !important;
}

.dark .ai-bot-page label:has(.persona-radio) .text-gray-500,
.dark .ai-bot-page #personaSelectionActions .text-gray-500 {
    color: var(--ai-bot-muted) !important;
}

.dark .ai-bot-page [data-ai-panel="persona"] .bg-gray-50,
.dark .ai-bot-page [data-ai-panel="history"] .bg-gray-50 {
    background: var(--ai-bot-soft) !important;
}

.dark .ai-bot-page [data-ai-panel="history"] .bg-white {
    background: var(--ai-bot-soft) !important;
}

.dark .ai-bot-page [data-ai-panel="history"] .bg-white:hover {
    background: var(--ai-bot-hover) !important;
}

.dark .ai-bot-page [data-ai-panel="history"] .text-gray-950 {
    color: var(--ai-bot-text) !important;
}

.dark .ai-bot-page [data-ai-panel="history"] .text-gray-700,
.dark .ai-bot-page [data-ai-panel="history"] .text-gray-600,
.dark .ai-bot-page [data-ai-panel="history"] .text-gray-500 {
    color: var(--ai-bot-muted) !important;
}

.dark .ai-bot-page [data-ai-panel="history"] .text-gray-400 {
    color: var(--ai-bot-faint) !important;
}

.dark #personaPromptModal .bg-white {
    background: #242622 !important;
}

.dark #personaPromptModal .border-gray-100,
.dark #personaPromptModal .border-gray-200 {
    border-color: rgba(247, 247, 243, .10) !important;
}

.dark #personaPromptModal .text-gray-950,
.dark #personaPromptModal .text-gray-800,
.dark #personaPromptModal .text-gray-700 {
    color: #F7F7F3 !important;
}

.dark #personaPromptModal .text-gray-600,
.dark #personaPromptModal .text-gray-500 {
    color: rgba(247, 247, 243, .62) !important;
}

.dark #personaPromptModal input,
.dark #personaPromptModal textarea,
.dark #personaPromptModal [data-persona-modal-close] {
    background: #1C1D1A !important;
    border-color: rgba(247, 247, 243, .10) !important;
    color: #F7F7F3 !important;
}

.dark #personaPromptModal [data-persona-modal-close]:hover {
    background: #2F312D !important;
}

/* Integrations: Telegram template editor dark-mode controls */
.dark #telegramTemplateModal > div {
    background: #242622 !important;
    color: #F7F7F3 !important;
}

.dark #telegramTemplateModal .bg-white,
.dark #telegramTemplateModal .bg-gray-100 {
    background: #1C1D1A !important;
    color: #F7F7F3 !important;
}

.dark #telegramTemplateModal .border-gray-200,
.dark #telegramTemplateModal .border-gray-100 {
    border-color: rgba(247, 247, 243, .10) !important;
}

.dark #telegramTemplateModal .text-gray-950,
.dark #telegramTemplateModal .text-gray-900,
.dark #telegramTemplateModal .text-gray-800,
.dark #telegramTemplateModal .text-gray-700 {
    color: #F7F7F3 !important;
}

.dark #telegramTemplateModal .text-gray-500,
.dark #telegramTemplateModal .text-gray-400 {
    color: rgba(247, 247, 243, .58) !important;
}

.dark #telegramTemplateModal textarea {
    background: #1C1D1A !important;
    border-color: rgba(247, 247, 243, .12) !important;
    color: #F7F7F3 !important;
}

.dark #telegramTemplateModal button.hover\:bg-gray-50:hover,
.dark #telegramTemplateModal button.hover\:bg-gray-100:hover,
.dark #telegramTemplateModal button.hover\:bg-gray-200:hover {
    background: #2F312D !important;
    color: #F7F7F3 !important;
}

.dark #telegramTemplateModal #btnSaveTelegramTemplate {
    background: #F2FF3A !important;
    color: #161616 !important;
}

.dark #telegramTemplateModal #btnSaveTelegramTemplate:hover {
    background: #F7FF75 !important;
}

/* Widgets page dark-mode hover and OBS controls */
.dark [data-widget-card] a.hover\:bg-gray-50:hover,
.dark [data-widget-card] button.hover\:bg-gray-50:hover,
.dark [data-widget-panel] button.hover\:bg-gray-50:hover,
.dark [data-widget-panel] button.hover\:bg-gray-100:hover,
.dark [data-widget-panel] a.hover\:bg-gray-50:hover {
    background: #2F312D !important;
    border-color: rgba(247, 247, 243, .14) !important;
    color: #F7F7F3 !important;
}

.dark [data-widget-card] a[href*="/widget"],
.dark [data-widget-card] a[href*="widget"],
.dark #copyObsUrl,
.dark [data-studio-tab] {
    background: #1C1D1A !important;
    border-color: rgba(247, 247, 243, .10) !important;
    color: #F7F7F3 !important;
}

.dark [data-widget-card] a[href*="/widget"]:hover,
.dark [data-widget-card] a[href*="widget"]:hover,
.dark #copyObsUrl:hover,
.dark [data-studio-tab]:hover {
    background: #2F312D !important;
    color: #F7F7F3 !important;
}

.dark [data-studio-tab].bg-gray-950,
.dark [data-studio-tab][class*="bg-gray-950"] {
    background: #F2FF3A !important;
    color: #161616 !important;
}

/* Billing plans: card layout and dark-mode polish */
.billing-page .billing-plans-grid {
    align-items: stretch;
}

.billing-page .billing-plan-card {
    box-shadow: 0 18px 44px rgba(22, 22, 22, .06);
}

.billing-page .billing-plan-card h4 {
    line-height: 1.15;
}

.billing-page .billing-plan-card li {
    align-items: flex-start;
}

.billing-page .billing-plan-card li > span:last-child {
    max-width: 42%;
    text-align: right;
    overflow-wrap: anywhere;
}

.dark .billing-page .preline-surface {
    background: #242622 !important;
    border-color: rgba(247, 247, 243, .10) !important;
}

.dark .billing-page .billing-plan-card {
    background: #1F211E !important;
    border-color: rgba(247, 247, 243, .10) !important;
    box-shadow: none;
}

.dark .billing-page .billing-plan-card:hover {
    border-color: rgba(242, 255, 58, .32) !important;
}

.dark .billing-page .bg-gray-50,
.dark .billing-page .bg-gray-100 {
    background: #2B2D29 !important;
}

.dark .billing-page .text-gray-950,
.dark .billing-page .text-gray-900,
.dark .billing-page .text-gray-800,
.dark .billing-page .text-gray-700 {
    color: #F7F7F3 !important;
}

.dark .billing-page .text-gray-600,
.dark .billing-page .text-gray-500,
.dark .billing-page .text-gray-400 {
    color: rgba(247, 247, 243, .62) !important;
}

.dark .billing-page .border-gray-200,
.dark .billing-page .border-gray-100,
.dark .billing-page .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(247, 247, 243, .10) !important;
}

.dark .billing-page .bg-emerald-50 {
    background: rgba(16, 185, 129, .14) !important;
}

.dark .billing-page .text-emerald-700,
.dark .billing-page .text-emerald-800 {
    color: #A8F3D1 !important;
}

.dark .billing-page button.bg-gray-950,
.dark .billing-page [data-request-plan].bg-gray-950 {
    background: #F2FF3A !important;
    color: #161616 !important;
}

.dark .billing-page button.bg-gray-950:hover,
.dark .billing-page [data-request-plan].bg-gray-950:hover {
    background: #F7FF75 !important;
}

.dark .billing-page button.bg-white,
.dark .billing-page button.hover\:bg-gray-50:hover {
    background: #1C1D1A !important;
    border-color: rgba(247, 247, 243, .12) !important;
    color: #F7F7F3 !important;
}

.dark .billing-page button.bg-white:hover {
    background: #2F312D !important;
}

.dark .billing-page button:disabled,
.dark .billing-page button.bg-gray-100:disabled {
    background: #2B2D29 !important;
    border-color: rgba(247, 247, 243, .08) !important;
    color: rgba(247, 247, 243, .46) !important;
    opacity: 1;
}

@media (max-width: 640px) {
    .billing-page .billing-plan-card li {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .35rem;
    }

    .billing-page .billing-plan-card li > span:last-child {
        max-width: none;
        text-align: left;
        padding-left: 1.5rem;
    }
}

/* Support page dark-mode ticket list */
.dark .support-page .preline-surface {
    background: #242622 !important;
    border-color: rgba(247, 247, 243, .10) !important;
}

.dark .support-page .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.dark .support-page .border-gray-100,
.dark .support-page .border-gray-200 {
    border-color: rgba(247, 247, 243, .10) !important;
}

.dark .support-page a.hover\:bg-gray-50:hover {
    background: #2F312D !important;
    color: #F7F7F3 !important;
}

.dark .support-page a.hover\:bg-gray-50:hover .text-gray-950,
.dark .support-page a.hover\:bg-gray-50:hover .text-blue-700 {
    color: #F7F7F3 !important;
}

.dark .support-page a.hover\:bg-gray-50:hover .text-gray-500,
.dark .support-page a.hover\:bg-gray-50:hover .text-gray-400 {
    color: rgba(247, 247, 243, .62) !important;
}

.dark .support-page .text-gray-950,
.dark .support-page .text-gray-900,
.dark .support-page .text-gray-800,
.dark .support-page .text-gray-700 {
    color: #F7F7F3 !important;
}

.dark .support-page .text-gray-500,
.dark .support-page .text-gray-400 {
    color: rgba(247, 247, 243, .62) !important;
}

.dark .support-page .bg-white,
.dark .support-page .bg-gray-50 {
    background: #1C1D1A !important;
}

.dark .support-page .bg-blue-50\/60 {
    background: rgba(88, 101, 242, .12) !important;
}

.dark .support-page .rounded-full.bg-gray-100,
.dark .support-page span[class*="bg-gray-100"],
.dark .support-page span[class*="bg-emerald-50"],
.dark .support-page span[class*="bg-amber-50"],
.dark .support-page span[class*="bg-blue-50"] {
    background: #1C1D1A !important;
    border-color: rgba(247, 247, 243, .12) !important;
    color: #F7F7F3 !important;
}

.dark .support-page label.hover\:bg-gray-50:hover,
.dark .support-page a.rounded-lg.hover\:bg-gray-50:hover {
    background: #2F312D !important;
    color: #F7F7F3 !important;
}