.theme-toggle {
    display: inline-grid;
    flex: 0 0 34px;
    place-items: center;
    width: 34px;
    min-width: 34px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--panel2);
    color: var(--text);
    font: 16px/1 "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
    cursor: pointer;
    box-shadow: none;
}

.theme-toggle:hover {
    border-color: var(--blue, var(--mint));
    filter: brightness(1.08)
}

.auth-theme-toggle {
    position: fixed;
    z-index: 5;
    top: 18px;
    right: 22px
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #f3f6fa;
    --panel: #ffffff;
    --panel2: #edf2f7;
    --line: #cbd5e1;
    --text: #172235;
    --muted: #5f6f83;
    --green: #07825f;
    --red: #c53d49;
    --amber: #a76508;
    --blue: #2468c9;
    --mint: #07825f;
    --orange: #a85f00
}

html[data-theme="light"] body,
html[data-theme="light"] body.account-page {
    background: radial-gradient(circle at 8% 0, #dcecff 0, transparent 34%), var(--bg);
    color: var(--text)
}

html[data-theme="light"] .topbar,
html[data-theme="light"] .site-header {
    border-color: var(--line);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 8px 24px rgba(50, 70, 95, .12)
}

html[data-theme="light"] .card,
html[data-theme="light"] .cycle-card,
html[data-theme="light"] .login-card,
html[data-theme="light"] .account-panel,
html[data-theme="light"] .hero-panel,
html[data-theme="light"] .feature-grid article,
html[data-theme="light"] .step-list > div,
html[data-theme="light"] .about-card,
html[data-theme="light"] .contact-card,
html[data-theme="light"] dialog,
html[data-theme="light"] .modal-card {
    border-color: var(--line);
    background: #fff;
    color: var(--text);
    box-shadow: 0 18px 44px rgba(45, 65, 90, .12)
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .secondary-button,
html[data-theme="light"] .ghost,
html[data-theme="light"] .header-market,
html[data-theme="light"] .header-account-balance,
html[data-theme="light"] .bot-list-tabs,
html[data-theme="light"] .bot-view-tabs,
html[data-theme="light"] .strategy-tabs,
html[data-theme="light"] details,
html[data-theme="light"] summary,
html[data-theme="light"] table,
html[data-theme="light"] .theme-toggle {
    border-color: var(--line);
    background: #f7f9fc;
    color: var(--text)
}

html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(36, 104, 201, .14)
}

html[data-theme="light"] .essential-settings,
html[data-theme="light"] .grid-sizing-summary,
html[data-theme="light"] .side-rule,
html[data-theme="light"] .runtime-metric,
html[data-theme="light"] .compact-runtime-panel,
html[data-theme="light"] .seed-preview,
html[data-theme="light"] .account-identity-row,
html[data-theme="light"] .permission-line,
html[data-theme="light"] .balance-summary > div,
html[data-theme="light"] .info-grid > div,
html[data-theme="light"] .bybit-connection-item,
html[data-theme="light"] .access-box,
html[data-theme="light"] .panel-note,
html[data-theme="light"] .metric,
html[data-theme="light"] .panel-note,
html[data-theme="light"] .trust-strip {
    border-color: var(--line);
    background: var(--panel2);
    color: var(--text)
}

html[data-theme="light"] .bybit-connection-item.active,
html[data-theme="light"] .bot-list-item.active,
html[data-theme="light"] [role="tab"] .active,
html[data-theme="light"] .bot-view-tabs button.active,
html[data-theme="light"] .strategy-tabs button.active,
html[data-theme="light"] .bot-list-tabs button.active {
    border-color: #78a9e6;
    background: #ddebff;
    color: #154f9e
}

html[data-theme="light"] .site-header nav a,
html[data-theme="light"] .text-link,
html[data-theme="light"] .site-footer a,
html[data-theme="light"] .account-link,
html[data-theme="light"] .cabinet-brand,
html[data-theme="light"] .brand {
    color: #34465c
}

html[data-theme="light"] .header-market-value strong,
html[data-theme="light"] .header-market-value b {
    color: var(--text)
}

html[data-theme="light"] .button.secondary {
    border-color: var(--line);
    background: #eef3f8;
    color: #25364a
}

html[data-theme="light"] .menu-toggle {
    border-color: var(--line);
    background: #eef3f8
}

html[data-theme="light"] .menu-toggle i {
    background: #33465d
}

html[data-theme="light"] .site-footer {
    border-color: var(--line);
    background: #e8eef5;
    color: var(--muted)
}

html[data-theme="light"] dialog::backdrop {
    background: rgba(38, 51, 69, .42)
}

/* Cabinet: nested surfaces and states use explicit light colors because the dark UI
   intentionally has several fixed navy backgrounds in addition to the shared variables. */
html[data-theme="light"] .status,
html[data-theme="light"] .badge,
html[data-theme="light"] .topbar #status,
html[data-theme="light"] .topbar #authPlan,
html[data-theme="light"] .start-orders-card .badge,
html[data-theme="light"] .run-mode,
html[data-theme="light"] .required-badge,
html[data-theme="light"] .recommended-badge {
    border-color: #b8c6d8;
    background: #eef3f8;
    color: #40536b
}

html[data-theme="light"] .status.ok,
html[data-theme="light"] .badge.ok,
html[data-theme="light"] .topbar #tradeBadge.ok {
    border-color: #82c7ae;
    background: #e4f7ef;
    color: #076448
}

html[data-theme="light"] .status.warn,
html[data-theme="light"] .badge.warn {
    border-color: #dfbd77;
    background: #fff5dc;
    color: #80500b
}

html[data-theme="light"] .status.bad,
html[data-theme="light"] .badge.bad {
    border-color: #e2a1a7;
    background: #fff0f1;
    color: #a52d39
}

html[data-theme="light"] button:not(.primary):not(.danger-action):not(.button),
html[data-theme="light"] .ghost,
html[data-theme="light"] .tabs button {
    border-color: var(--line);
    background: #eef3f8;
    color: #1f3045
}

html[data-theme="light"] button:disabled {
    border-color: #d3dbe5;
    background: #dfe5ec;
    color: #667488;
    opacity: .78
}

html[data-theme="light"] .danger-action,
html[data-theme="light"] #gridStartLive,
html[data-theme="light"] #gridSeedApply {
    background: #a5404b;
    color: #fff
}

html[data-theme="light"] .danger-action:disabled,
html[data-theme="light"] #gridStartLive:disabled,
html[data-theme="light"] #gridSeedApply:disabled {
    background: #e4cdd0;
    color: #7d5960
}

html[data-theme="light"] .grid-sizing-summary {
    border-color: #9cb9dc;
    background: #e7f0fb;
}

html[data-theme="light"] .grid-sizing-summary div {
    background: #fff;
    color: var(--text)
}

html[data-theme="light"] .grid-sizing-summary strong {
    color: #154f88
}

html[data-theme="light"] .grid-sizing-summary p,
html[data-theme="light"] .grid-profit-estimate small {
    color: var(--muted)
}

html[data-theme="light"] .grid-profit-estimate strong.negative {
    color: #b82f3c
}

html[data-theme="light"] .grid-profit-estimate strong.positive {
    color: #087454
}

html[data-theme="light"] .field-help {
    border-color: #8ba9cb;
    background: #e3edf9;
    color: #194e86
}

html[data-theme="light"] .field-help.open {
    border-color: var(--blue);
    background: var(--blue);
    color: #fff
}

html[data-theme="light"] .field-help::after {
    border-color: #a7b8cb;
    background: #fff;
    color: #24364b;
    box-shadow: 0 12px 32px rgba(39, 58, 82, .2)
}

html[data-theme="light"] .section-number {
    background: #2868ad;
    color: #fff
}

html[data-theme="light"] .flow-note,
html[data-theme="light"] .simple-flow span,
html[data-theme="light"] .save-settings {
    border-color: var(--line);
    background: #edf3f9;
    color: #334a64
}

html[data-theme="light"] .confirmation-eyebrow,
html[data-theme="light"] .inline-copy-phrase small,
html[data-theme="light"] .remember-note,
html[data-theme="light"] .confirmation-saved-status {
    color: #315f91
}

html[data-theme="light"] .settings-section,
html[data-theme="light"] .reliability-panel,
html[data-theme="light"] .runtime-details,
html[data-theme="light"] .seed-panel,
html[data-theme="light"] .run-card,
html[data-theme="light"] .start-sell-toggle,
html[data-theme="light"] .advanced-options,
html[data-theme="light"] .confirm,
html[data-theme="light"] .cold-start-flow,
html[data-theme="light"] .connection-health > div,
html[data-theme="light"] .reliability-summary > div,
html[data-theme="light"] .run-details dl > div,
html[data-theme="light"] .run-subsection li,
html[data-theme="light"] .bot-state-summary > div {
    border-color: var(--line);
    background: #f4f7fa;
    color: var(--text)
}

html[data-theme="light"] .side-rule {
    background: linear-gradient(100deg, #f7f9fc, #edf3f8)
}

html[data-theme="light"] .side-rule.sell-rule {
    border-color: #d9a5ab
}

html[data-theme="light"] .normalize-mode-tabs .buy-mode.active,
html[data-theme="light"] .normalize-table .will-change {
    border-color: #7fbfa8;
    background: #e6f6ef;
    box-shadow: inset 0 0 0 1px #7fbfa8
}

html[data-theme="light"] .normalize-mode-tabs .sell-mode.active {
    border-color: #dda0a6;
    background: #fff0f1;
    box-shadow: inset 0 0 0 1px #dda0a6
}

html[data-theme="light"] .side-rule.buy-rule {
    border-color: #88c6af
}

html[data-theme="light"] .sell-rule .side-rule-title b {
    color: #b42f3c
}

html[data-theme="light"] .bot-list-tabs {
    background: #f2f5f9
}

html[data-theme="light"] .bot-list-tabs span {
    background: #dceaff;
    color: #215b9f
}

html[data-theme="light"] .bot-list-item,
html[data-theme="light"] .bot-view-tabs,
html[data-theme="light"] .strategy-tabs {
    border-color: var(--line);
    background: #f5f8fb;
    color: var(--text)
}

html[data-theme="light"] .bot-list-item:hover,
html[data-theme="light"] .bot-list-item.active {
    border-color: #6da5e6;
    background: #e3efff
}

html[data-theme="light"] .bot-list-item small,
html[data-theme="light"] .bot-list-item em,
html[data-theme="light"] .bot-order-ratio,
html[data-theme="light"] .run-mode,
html[data-theme="light"] .run-subsection > summary,
html[data-theme="light"] .cold-start-flow {
    color: #526b88
}

html[data-theme="light"] .bot-list-icon {
    color: #40658f
}

html[data-theme="light"] .bot-list-actions {
    border: 1px solid #cad6e4;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 5px 14px rgba(45, 65, 90, .14)
}

html[data-theme="light"] .bot-list-icon:hover,
html[data-theme="light"] .bot-list-icon:focus-visible {
    border-color: #6da5e6;
    background: #dceaff;
    color: #174f91
}

html[data-theme="light"] .bot-list-icon.archive:hover,
html[data-theme="light"] .bot-list-icon.archive:focus-visible {
    border-color: #d5aa6d;
    background: #fff1d9;
    color: #80500b
}

html[data-theme="light"] .bot-list-icon.restore:hover,
html[data-theme="light"] .bot-list-icon.restore:focus-visible {
    border-color: #82c7ae;
    background: #e4f7ef;
    color: #076448
}

html[data-theme="light"] .bot-view-tabs button.active,
html[data-theme="light"] .strategy-tabs button.active,
html[data-theme="light"] .tabs button.active,
html[data-theme="light"] .bot-list-tabs button.active {
    border-color: #93b9e8;
    background: #d7e8ff;
    color: #174f91
}

html[data-theme="light"] .notice {
    border-color: #87c8b1;
    background: #e8f7f1;
    color: #086247
}

html[data-theme="light"] .notice.error,
html[data-theme="light"] .grid-event-error {
    border-color: #dda0a6;
    background: #fff0f1;
    color: #a52d39
}

html[data-theme="light"] .grid-event-warning,
html[data-theme="light"] .restart-notice,
html[data-theme="light"] .archived-bot-notice,
html[data-theme="light"] .subscription-gate {
    border-color: #dfbd77;
    background: #fff6e2;
    color: #674713
}

html[data-theme="light"] .restart-notice strong,
html[data-theme="light"] .subscription-gate h2,
html[data-theme="light"] .subscription-gate p:last-child,
html[data-theme="light"] .subscription-account-link {
    color: #70480a
}

html[data-theme="light"] .subscription-gate-icon,
html[data-theme="light"] .subscription-account-link:hover {
    background: #f7e4bd
}

html[data-theme="light"] .confirmation-dialog,
html[data-theme="light"] .remembered-command,
html[data-theme="light"] .inline-copy-phrase {
    border-color: var(--line);
    background: #fff;
    color: var(--text)
}

html[data-theme="light"] .confirmation-close {
    background: #e5ebf2;
    color: #26394f
}

html[data-theme="light"] .confirm.remembered,
html[data-theme="light"] .confirm.remembered input {
    border-color: #d5dde7;
    background: #e9eef4;
    color: #607086
}

html[data-theme="light"] .live-start-acknowledge {
    border-color: #dfbd77;
    background: #fff6e2;
    color: #604719
}

html[data-theme="light"] .live-risk-phrase {
    border-color: #dda0a6;
    background: #fff0f1
}

html[data-theme="light"] .live-risk-phrase span {
    color: #9c3540
}

/* Account and authorization pages. */
html[data-theme="light"] .access-box,
html[data-theme="light"] .available-box,
html[data-theme="light"] .account-health,
html[data-theme="light"] .security-strip {
    border-color: #91c9b5;
    background: #eaf7f2;
    color: #174c3d
}

html[data-theme="light"] .funds,
html[data-theme="light"] .account-balances-table,
html[data-theme="light"] .bybit-connection-list {
    border-color: var(--line);
    background: var(--line)
}

html[data-theme="light"] .funds > div,
html[data-theme="light"] .account-balances-table th,
html[data-theme="light"] .account-balances-table td {
    background: #fff;
    color: var(--text)
}

/* Landing page surfaces which have intentional fixed dark fills in the default theme. */
html[data-theme="light"] .panel-top,
html[data-theme="light"] .flow,
html[data-theme="light"] .feature-grid article,
html[data-theme="light"] .step-list > div,
html[data-theme="light"] .about-card,
html[data-theme="light"] .contact-card {
    border-color: var(--line);
    background: #fff;
    color: var(--text)
}

html[data-theme="light"] .hero-panel::before {
    opacity: .2
}

@media (max-width: 850px) {
    html[data-theme="light"] .header-menu {
        border-color: var(--line);
        background: rgba(255, 255, 255, .98)
    }
}

@media (max-width: 620px) {
    .auth-theme-toggle {
        top: 14px;
        right: 14px
    }
}