/* App theme layer. Loaded after feature styles so legacy components inherit safely. */
:root {
    --chrome-bg: rgba(6, 8, 14, .97);
    --chrome-bg-solid: #080a0f;
    --input-bg: rgba(0, 0, 0, .35);
    --input-focus-bg: rgba(0, 0, 0, .5);
    --subtle-bg: rgba(0, 0, 0, .22);
    --raised-bg: rgba(255, 255, 255, .04);
    --hover-bg: rgba(255, 255, 255, .06);
    --overlay-bg: rgba(0, 0, 0, .68);
    --chart-grid: rgba(255, 255, 255, .06);
    --chart-tick: #6b7a8d;
}

html[data-theme="light"] {
    --bg: #f6f1e7;
    --bg2: #fffaf2;
    --bg3: #eee5d7;
    --surface: rgba(255, 252, 246, .88);
    --surface2: rgba(246, 239, 226, .84);
    --border: rgba(61, 49, 31, .10);
    --border2: rgba(61, 49, 31, .19);
    --border-gold: rgba(151, 112, 15, .30);
    --text: #20242b;
    --text2: #646971;
    --text3: #888b90;
    --gold: #9b7411;
    --gold2: #b98d19;
    --gold3: #765507;
    --gold-soft: rgba(155, 116, 17, .11);
    --gold-glow: rgba(155, 116, 17, .17);
    --gold-dim: rgba(155, 116, 17, .075);
    --green: #087d55;
    --green2: rgba(8, 125, 85, .10);
    --red: #c83249;
    --red2: rgba(200, 50, 73, .10);
    --orange: #a86600;
    --orange2: rgba(168, 102, 0, .11);
    --blue: #2563b8;
    --blue2: rgba(37, 99, 184, .10);
    --accent: #9b7411;
    --accent2: #b98d19;
    --glow: rgba(155, 116, 17, .15);
    --shadow-card: 0 8px 26px rgba(75, 57, 28, .09);
    --shadow-hover: 0 12px 34px rgba(75, 57, 28, .14);
    --chrome-bg: rgba(255, 252, 246, .97);
    --chrome-bg-solid: #fffaf2;
    --input-bg: rgba(255, 255, 255, .78);
    --input-focus-bg: #fffefb;
    --subtle-bg: rgba(78, 61, 36, .055);
    --raised-bg: rgba(255, 255, 255, .72);
    --hover-bg: rgba(155, 116, 17, .075);
    --overlay-bg: rgba(45, 36, 24, .42);
    --chart-grid: rgba(61, 49, 31, .10);
    --chart-tick: #6f706f;
}

body,
.bg-mesh,
.sidebar,
.topbar,
.bottom-navigation,
.glass,
input,
textarea,
select,
button {
    transition: background-color .22s ease, border-color .22s ease, color .16s ease, box-shadow .22s ease;
}

html[data-theme="light"] .bg-mesh {
    background:
        radial-gradient(ellipse 70% 48% at 12% 5%, rgba(185, 141, 25, .11), transparent 61%),
        radial-gradient(ellipse 48% 40% at 88% 88%, rgba(8, 125, 85, .06), transparent 64%),
        linear-gradient(145deg, #f8f3e9 0%, #f3ecdf 100%);
}

html[data-theme="light"] .sidebar,
html[data-theme="light"] .topbar,
html[data-theme="light"] .bottom-navigation {
    background: var(--chrome-bg);
    box-shadow: 0 10px 34px rgba(75, 57, 28, .08);
}

html[data-theme="light"] .session-clock,
html[data-theme="light"] .balance-input,
html[data-theme="light"] .filter-tabs,
html[data-theme="light"] .rsb-kpi,
html[data-theme="light"] .insight,
html[data-theme="light"] .ep,
html[data-theme="light"] .journal-summary-bar,
html[data-theme="light"] .detail-kpi,
html[data-theme="light"] .streak-box,
html[data-theme="light"] .ds-card,
html[data-theme="light"] .mr,
html[data-theme="light"] .emo-card,
html[data-theme="light"] .pf-status,
html[data-theme="light"] .cr,
html[data-theme="light"] .calc-scenario-row,
html[data-theme="light"] .calc-breakdown,
html[data-theme="light"] .je-feature,
html[data-theme="light"] .news-filter-tabs,
html[data-theme="light"] .news-item,
html[data-theme="light"] .dg-setting-item,
html[data-theme="light"] .signal-level,
html[data-theme="light"] .bk-option,
html[data-theme="light"] .bk-radio,
html[data-theme="light"] .aff-input,
html[data-theme="light"] .sig-code-input,
html[data-theme="light"] .brief-metric,
html[data-theme="light"] .jtf-pair-btn,
html[data-theme="light"] .jtf-sess-pill,
html[data-theme="light"] .jtf-dir,
html[data-theme="light"] .jtf-price-box,
html[data-theme="light"] .jtf-rr-bar,
html[data-theme="light"] .jtf-money-input,
html[data-theme="light"] .jtf-prev-stat,
html[data-theme="light"] .jtf-res,
html[data-theme="light"] .jtf-mind-btn,
html[data-theme="light"] .jtf-notes,
html[data-theme="light"] .dg-history-row,
html[data-theme="light"] .aff-tab,
html[data-theme="light"] .aff-link-box,
html[data-theme="light"] .aff-stats-mini,
html[data-theme="light"] .aff-code-box,
html[data-theme="light"] .aff-code-howto,
html[data-theme="light"] .aff-cs-feat,
html[data-theme="light"] .free-progress-wrap,
html[data-theme="light"] .paywall-plan,
html[data-theme="light"] .sig-telegram-points span,
html[data-theme="light"] .sig-analyst-card,
html[data-theme="light"] .sig-ex-tab,
html[data-theme="light"] .sig-price-row,
html[data-theme="light"] .sig-photo-wrap,
html[data-theme="light"] .sig-gate-feat,
html[data-theme="light"] .sig-donate-opt {
    background: var(--subtle-bg);
}

html[data-theme="light"] .fg input,
html[data-theme="light"] .fg select,
html[data-theme="light"] .fg textarea,
html[data-theme="light"] .jtf-input,
html[data-theme="light"] .jtf-pair-input,
html[data-theme="light"] .jtf-money-input,
html[data-theme="light"] .aff-input,
html[data-theme="light"] .sig-code-input,
html[data-theme="light"] .sr-field input,
html[data-theme="light"] .sr-quote select,
html[data-theme="light"] .source-controls select {
    background: var(--input-bg);
    color: var(--text);
}

html[data-theme="light"] .fg input:focus,
html[data-theme="light"] .fg select:focus,
html[data-theme="light"] .fg textarea:focus {
    background: var(--input-focus-bg);
}

html[data-theme="light"] .nav-item:hover,
html[data-theme="light"] .menu-btn:hover,
html[data-theme="light"] .filter-tab:hover,
html[data-theme="light"] .btn-outline:hover,
html[data-theme="light"] .ep:hover,
html[data-theme="light"] .news-filter-btn:hover,
html[data-theme="light"] .news-item:hover,
html[data-theme="light"] .workflow-link,
html[data-theme="light"] .signal-actions button {
    background: var(--raised-bg);
}

html[data-theme="light"] .modal-overlay,
html[data-theme="light"] .share-modal-overlay,
html[data-theme="light"] .sig-modal-overlay,
html[data-theme="light"] .paywall-overlay,
html[data-theme="light"] .onboard-overlay {
    background: var(--overlay-bg);
}

html[data-theme="light"] .modal,
html[data-theme="light"] .share-modal,
html[data-theme="light"] .sig-modal,
html[data-theme="light"] dialog {
    background: var(--bg2);
    color: var(--text);
    border-color: var(--border2);
}

html[data-theme="light"] .onboard-card {
    background:
        radial-gradient(circle at 88% 8%, rgba(155, 116, 17, .11), transparent 32%),
        linear-gradient(155deg, #fffdf8 0%, #f2eadf 100%);
    color: var(--text);
    border-color: var(--border-gold);
    box-shadow: 0 34px 76px rgba(54, 42, 24, .24), 0 0 0 1px rgba(255, 255, 255, .58) inset;
}

html[data-theme="light"] .onboard-step {
    background: rgba(255, 255, 255, .60);
    border-color: var(--border2);
}

html[data-theme="light"] .sample-notice {
    color: #805100;
}

html[data-theme="light"] .personal-command,
html[data-theme="light"] .personal-analytics {
    background:
        radial-gradient(circle at 92% 10%, rgba(155, 116, 17, .10), transparent 30%),
        linear-gradient(145deg, rgba(255, 252, 246, .96), rgba(238, 229, 215, .76));
}

html[data-theme="light"] .pa-kpi,
html[data-theme="light"] .pa-action,
html[data-theme="light"] .pa-source {
    background: rgba(255, 255, 255, .62);
    border-color: var(--border2);
}

html[data-theme="light"] tr:hover td {
    background: rgba(155, 116, 17, .035);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(61, 49, 31, .18);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(61, 49, 31, .30);
}

.theme-quick-toggle {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--raised-bg);
    color: var(--text2);
    cursor: pointer;
}

.theme-quick-toggle:hover {
    color: var(--gold);
    border-color: var(--border-gold);
    background: var(--gold-dim);
}

.theme-quick-toggle:focus-visible,
.theme-choice:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.theme-icon { width: 19px; height: 19px; }
.theme-icon-sun { display: none; }
[data-resolved-theme="light"] .theme-icon-sun { display: block; }
[data-resolved-theme="light"] .theme-icon-moon { display: none; }

.sidebar-theme-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    margin-bottom: 8px;
    padding: 0 0 0 11px;
    color: var(--text2);
    font-size: .74rem;
    font-weight: 600;
}

.theme-selector {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 15px;
}

.theme-choice {
    min-height: 76px;
    padding: 10px 8px;
    border: 1px solid var(--border2);
    border-radius: 12px;
    background: var(--subtle-bg);
    color: var(--text2);
    cursor: pointer;
    font: 600 .78rem var(--font);
}

.theme-choice svg {
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 auto 8px;
}

.theme-choice:hover {
    border-color: var(--border-gold);
    color: var(--text);
}

.theme-choice.active {
    border-color: var(--gold);
    background: var(--gold-dim);
    color: var(--gold);
    box-shadow: inset 0 0 0 1px var(--border-gold);
}

.theme-status {
    min-height: 20px;
    margin-top: 10px;
    color: var(--text3);
    font-size: .72rem;
}

@media (max-width: 860px) {
    .topbar .theme-quick-toggle {
        width: 40px;
        height: 40px;
        border: 0;
        background: transparent;
    }
    .sidebar-theme-row { display: none; }
}

@media (max-width: 390px) {
    .theme-selector { gap: 6px; }
    .theme-choice { min-height: 70px; padding-inline: 5px; }
}

@media (prefers-reduced-motion: reduce) {
    body,
    .bg-mesh,
    .sidebar,
    .topbar,
    .bottom-navigation,
    .glass,
    input,
    textarea,
    select,
    button { transition: none; }
}