/* Web-owned asset.
  ChillHiHi V2 Theme Colors
  ------------------------------------------------------------
  This layer intentionally controls colors only. Layout, spacing,
  tables, charts, and component structure should remain in app.css,
  site.css, or component-specific CSS.

  style1 = current Retro Mocha.
  style2 = bronze case / green dial light control-room theme.
  style3 = midnight blue dial / brass night control-room theme.
*/

html[data-theme="style1"] {
  --bg: #f8f1ea;
  --shell: #fffaf4;
  --shell-2: #f3e8df;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-2: rgba(168, 131, 115, 0.11);
  --line: rgba(111, 75, 64, 0.16);
  --text: #31231e;
  --ink: #31231e;
  --muted: rgba(84, 64, 56, 0.78);
  --faint: rgba(84, 64, 56, 0.62);
  --accent: #a88373;
  --green: #4e947f;
  --amber: #bd8150;
  --danger: #c96455;
  --cloud: #f4f1eb;
  --mocha: #a88373;
  --mocha-dark: #6f4b40;
  --flat-teal: #6490a4;
  --flat-mocha: #a47864;
  --chart-axis: #4d3932;
  --chart-grid: rgba(111, 75, 64, 0.12);
  --chart-border: rgba(111, 75, 64, 0.22);
  --chart-up: #5f8fa2;
  --chart-down: #8f5d70;
  --chart-frr: #9a6b38;
  --on-emphasis: #31231e;
  --on-emphasis-muted: rgba(49, 35, 30, 0.78);
  --chart-surface: rgba(255, 253, 248, 0.72);
  --data-surface: rgba(255, 253, 248, 0.76);
  --data-surface-soft: rgba(238, 228, 217, 0.56);
  --data-row-alt: rgba(245, 236, 228, 0.72);
  --data-border: rgba(111, 75, 64, 0.14);
  --data-text: #31231e;
  --data-muted: rgba(84, 64, 56, 0.78);
  --data-shadow: 0 10px 24px rgba(79, 54, 45, 0.06);
  --scrollbar-track: rgba(234, 223, 214, 0.64);
  --scrollbar-thumb: #a88373;
  --scrollbar-thumb-hover: #6490a4;
}

html[data-theme="style2"] {
  --bg: #eee7d7;
  --shell: #fff8ea;
  --shell-2: #e6dac3;
  --paper: #fffaf0;
  --paper-2: #eadfc9;
  --panel: rgba(255, 250, 240, 0.92);
  --panel-2: rgba(9, 70, 53, 0.10);
  --line: rgba(42, 57, 47, 0.17);
  --soft: #f2eadb;
  --text: #1e2d25;
  --ink: #1e2d25;
  --muted: rgba(49, 60, 51, 0.78);
  --faint: rgba(49, 60, 51, 0.60);
  --accent: #b77f38;
  --accent-strong: #704411;
  --green: #07533f;
  --amber: #c6944a;
  --danger: #b85c4d;
  --cloud: #fff9ed;
  --mocha: #b77f38;
  --mocha-dark: #123e32;
  --mocha-deep: #0a241c;
  --flat-teal: #1f7565;
  --flat-mocha: #c18f49;
  --card-bg: rgba(255, 250, 240, 0.92);
  --card-bg-strong: #fffaf0;
  --card-grad: linear-gradient(135deg, #fffaf0 0%, #f2ead9 64%, #e9ddc6 100%);
  --table-head-bg: #123e32;
  --table-head-text: #fff3da;
  --table-cell-text: #1e2d25;
  --input-bg: rgba(255, 250, 240, 0.94);
  --readonly-bg: rgba(226, 216, 195, 0.65);
  --link-bg: rgba(7, 83, 63, 0.095);
  --active-bg: linear-gradient(135deg, #123e32, #b77f38);
  --active-text: #fff9ed;
  --hero-grad: linear-gradient(135deg, #103e32 0%, #1f7565 52%, #b77f38 100%);
  --metric-grad: linear-gradient(135deg, rgba(7, 83, 63, 0.16), rgba(183, 127, 56, 0.13));
  --chart-axis: #1e2d25;
  --chart-grid: rgba(42, 57, 47, 0.13);
  --chart-border: rgba(42, 57, 47, 0.24);
  --chart-up: #0b8766;
  --chart-down: #c45b50;
  --chart-frr: #9a6b38;
  --on-emphasis: #fffaf0;
  --on-emphasis-muted: rgba(255, 250, 240, 0.78);
  --chart-surface: #fffaf0;
  --data-surface: rgba(255, 250, 240, 0.96);
  --data-surface-soft: rgba(234, 223, 201, 0.72);
  --data-row-alt: rgba(244, 235, 218, 0.86);
  --data-border: rgba(42, 57, 47, 0.16);
  --data-text: #1e2d25;
  --data-muted: rgba(49, 60, 51, 0.78);
  --data-shadow: 0 12px 28px rgba(71, 66, 46, 0.10);
  --scrollbar-track: rgba(230, 218, 195, 0.72);
  --scrollbar-thumb: #1f7565;
  --scrollbar-thumb-hover: #b77f38;
  --shadow: 0 18px 46px rgba(71, 66, 46, 0.12);
}

html[data-theme="style3"] {
  --bg: #07111d;
  --shell: #0d1b2b;
  --shell-2: #14263a;
  --paper: #0d1b2b;
  --paper-2: #14263a;
  --panel: #102238;
  --panel-2: #172d45;
  --line: rgba(141, 181, 197, 0.20);
  --soft: #14263a;
  --text: #eef6f6;
  --ink: #eef6f6;
  --muted: rgba(220, 232, 235, 0.78);
  --faint: rgba(220, 232, 235, 0.62);
  --accent: #d5a552;
  --accent-strong: #ffd37a;
  --green: #54d0a6;
  --amber: #d5a552;
  --danger: #ed7a7a;
  --cloud: #eef6f6;
  --mocha: #d5a552;
  --mocha-dark: #dcebf0;
  --mocha-deep: #f7fbfb;
  --flat-teal: #38bfc7;
  --flat-mocha: #d5a552;
  --card-bg: #102238;
  --card-bg-strong: #14293e;
  --card-grad: linear-gradient(135deg, #162b42 0%, #10243a 58%, #142b3e 100%);
  --table-head-bg: #102a44;
  --table-head-text: #ffd37a;
  --table-cell-text: #eef6f6;
  --input-bg: rgba(232, 242, 244, 0.095);
  --readonly-bg: rgba(232, 242, 244, 0.055);
  --link-bg: rgba(56, 191, 199, 0.12);
  --active-bg: linear-gradient(135deg, #d5a552, #38bfc7);
  --active-text: #06101a;
  --hero-grad: linear-gradient(135deg, #0f2a44 0%, #14506a 48%, #d5a552 100%);
  --metric-grad: linear-gradient(135deg, rgba(56, 191, 199, 0.15), rgba(213, 165, 82, 0.10));
  --chart-axis: #dce9ee;
  --chart-grid: rgba(214, 228, 233, 0.12);
  --chart-border: rgba(214, 228, 233, 0.22);
  --chart-up: #54d0a6;
  --chart-down: #ed7a7a;
  --chart-frr: #e0ae62;
  --on-emphasis: #f7fbfb;
  --on-emphasis-muted: rgba(238, 246, 246, 0.78);
  --chart-surface: #0b1928;
  --data-surface: #102238;
  --data-surface-soft: #172d45;
  --data-row-alt: #132941;
  --data-border: rgba(214, 228, 233, 0.16);
  --data-text: #f7fbfb;
  --data-muted: rgba(220, 232, 235, 0.78);
  --data-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
  --scrollbar-track: rgba(7, 17, 29, 0.82);
  --scrollbar-thumb: #2b6174;
  --scrollbar-thumb-hover: #d5a552;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
}

html[data-theme="style4"] {
  --bg: #070b10;
  --shell: #0a1017;
  --shell-2: #101923;
  --paper: #0d141d;
  --paper-2: #121d28;
  --panel: #0e1721;
  --panel-2: #142331;
  --line: rgba(132, 160, 181, 0.18);
  --soft: #111b25;
  --text: #e8f0f6;
  --ink: #e8f0f6;
  --muted: #8fa3b4;
  --faint: #65798a;
  --accent: #38bdf8;
  --accent-strong: #7dd3fc;
  --green: #34d399;
  --amber: #fbbf24;
  --danger: #fb7185;
  --cloud: #e8f0f6;
  --mocha: #38bdf8;
  --mocha-dark: #d8e7f0;
  --mocha-deep: #f8fbfd;
  --flat-teal: #22d3ee;
  --flat-mocha: #fbbf24;
  --card-bg: #0e1721;
  --card-bg-strong: #111c27;
  --card-grad: linear-gradient(145deg, #121e2a 0%, #0d151e 100%);
  --table-head-bg: #101c27;
  --table-head-text: #7dd3fc;
  --table-cell-text: #dce8ef;
  --input-bg: #0b131b;
  --readonly-bg: #101923;
  --link-bg: rgba(56, 189, 248, 0.10);
  --active-bg: #38bdf8;
  --active-text: #041018;
  --hero-grad: linear-gradient(135deg, #102a3a 0%, #0e1b25 58%, #17202a 100%);
  --metric-grad: linear-gradient(145deg, rgba(56, 189, 248, 0.11), rgba(16, 25, 35, 0.98));
  --chart-axis: #a8bac7;
  --chart-grid: rgba(139, 164, 181, 0.11);
  --chart-border: rgba(139, 164, 181, 0.23);
  --chart-up: #34d399;
  --chart-down: #fb7185;
  --chart-frr: #fbbf24;
  --on-emphasis: #f4f9fc;
  --on-emphasis-muted: #9fb3c1;
  --chart-surface: #091119;
  --data-surface: #0d161f;
  --data-surface-soft: #121e29;
  --data-row-alt: #101b25;
  --data-border: rgba(139, 164, 181, 0.17);
  --data-text: #e8f0f6;
  --data-muted: #8fa3b4;
  --data-shadow: none;
  --scrollbar-track: #070c11;
  --scrollbar-thumb: #294354;
  --scrollbar-thumb-hover: #38bdf8;
  --shadow: none;
}

html[data-theme="style2"] body {
  color: var(--text);
  background:
    radial-gradient(circle at 7% 0%, rgba(7, 83, 63, 0.11), transparent 29%),
    radial-gradient(circle at 93% 2%, rgba(183, 127, 56, 0.13), transparent 27%),
    linear-gradient(135deg, #fff9ed 0%, #f2eadb 58%, #e8dcc5 100%);
}

html[data-theme="style3"] body {
  color: var(--text);
  background:
    radial-gradient(circle at 10% 0%, rgba(56, 191, 199, 0.11), transparent 28%),
    radial-gradient(circle at 91% 1%, rgba(213, 165, 82, 0.09), transparent 25%),
    linear-gradient(135deg, #07121f 0%, #0a1928 58%, #0d2133 100%);
}

html[data-theme] {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

html[data-theme] * {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}

html[data-theme] *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-theme] *::-webkit-scrollbar-track {
  border-radius: 999px;
  background: var(--scrollbar-track);
}

html[data-theme] *::-webkit-scrollbar-thumb {
  min-width: 36px;
  min-height: 36px;
  border: 2px solid var(--scrollbar-track);
  border-radius: 999px;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

html[data-theme] *::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

html[data-theme] *::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

html[data-theme="style2"] .phone-shell,
html[data-theme="style2"] .preview-card,
html[data-theme="style2"] .feature-grid article,
html[data-theme="style2"] .safety {
  border-color: var(--line);
  background: var(--card-bg-strong);
  box-shadow: var(--shadow);
}

html[data-theme="style3"] .phone-shell,
html[data-theme="style3"] .preview-card,
html[data-theme="style3"] .feature-grid article,
html[data-theme="style3"] .safety {
  border-color: var(--line);
  background: var(--card-bg-strong);
  box-shadow: var(--shadow);
}

html[data-theme="style2"] .app-top,
html[data-theme="style2"] .site-header,
html[data-theme="style2"] .bottom-nav {
  border-color: var(--line);
  background: rgba(255, 248, 234, 0.92);
}

html[data-theme="style3"] .app-top,
html[data-theme="style3"] .site-header,
html[data-theme="style3"] .bottom-nav {
  border-color: var(--line);
  background: rgba(9, 20, 33, 0.92);
}

html[data-theme="style2"] .brand span {
  background: var(--active-bg);
  color: var(--cloud);
}

html[data-theme="style3"] .brand span {
  background: var(--active-bg);
  color: var(--active-text);
}

html[data-theme="style2"] .hero-balance,
html[data-theme="style2"] .product-card,
html[data-theme="style2"] .profile-card,
html[data-theme="style2"] .section-block,
html[data-theme="style2"] .coin-grid article,
html[data-theme="style2"] .market-card,
html[data-theme="style2"] .yield-summary-card,
html[data-theme="style2"] .form-card,
html[data-theme="style2"] .system-health-block {
  border-color: var(--line);
  background:
    radial-gradient(circle at 86% 12%, rgba(176, 138, 75, 0.13), transparent 36%),
    var(--card-bg);
}

html[data-theme="style3"] .hero-balance,
html[data-theme="style3"] .product-card,
html[data-theme="style3"] .profile-card,
html[data-theme="style3"] .section-block,
html[data-theme="style3"] .coin-grid article,
html[data-theme="style3"] .market-card,
html[data-theme="style3"] .yield-summary-card,
html[data-theme="style3"] .form-card,
html[data-theme="style3"] .system-health-block {
  border-color: var(--line);
  background:
    radial-gradient(circle at 86% 12%, rgba(199, 155, 85, 0.13), transparent 36%),
    var(--card-bg);
}

html[data-theme="style2"] .segmented button.is-active,
html[data-theme="style2"] .top-nav .nav-item.is-active,
html[data-theme="style2"] .submit-button {
  background: var(--active-bg);
  color: var(--active-text);
  box-shadow: 0 8px 18px rgba(18, 62, 50, 0.15);
}

html[data-theme="style3"] .segmented button.is-active,
html[data-theme="style3"] .top-nav .nav-item.is-active,
html[data-theme="style3"] .submit-button {
  background: var(--active-bg);
  color: var(--active-text);
  box-shadow: 0 10px 22px rgba(56, 191, 199, 0.12);
}

html[data-theme="style2"] .button.primary {
  border-color: transparent;
  background: var(--active-bg);
  color: var(--active-text);
}

html[data-theme="style3"] .button.primary {
  border-color: transparent;
  background: var(--active-bg);
  color: var(--active-text);
}

html[data-theme="style2"] .phone-shell {
  background:
    linear-gradient(180deg, rgba(255, 248, 234, 0.95), rgba(246, 237, 219, 0.98)),
    var(--shell);
}

html[data-theme="style3"] .phone-shell {
  background:
    linear-gradient(180deg, rgba(13, 27, 43, 0.97), rgba(7, 17, 29, 0.99)),
    var(--shell);
}

html[data-theme]:not([data-theme="style1"]) h1,
html[data-theme]:not([data-theme="style1"]) h2,
html[data-theme]:not([data-theme="style1"]) h3,
html[data-theme]:not([data-theme="style1"]) .block-title,
html[data-theme]:not([data-theme="style1"]) .strategy-card-topline h2,
html[data-theme]:not([data-theme="style1"]) .strategy-builder-mode-card strong,
html[data-theme]:not([data-theme="style1"]) .strategy-module-toggle,
html[data-theme]:not([data-theme="style1"]) .condition-overview-grid b,
html[data-theme]:not([data-theme="style1"]) .condition-template-head h2 {
  color: var(--text);
}

html[data-theme]:not([data-theme="style1"]) .eyebrow,
html[data-theme]:not([data-theme="style1"]) .inline-row-link,
html[data-theme]:not([data-theme="style1"]) .market-card strong,
html[data-theme]:not([data-theme="style1"]) .bottom-nav .nav-item.is-active span,
html[data-theme]:not([data-theme="style1"]) .preview-head b {
  color: var(--accent);
}

html[data-theme]:not([data-theme="style1"]) .account-chip,
html[data-theme]:not([data-theme="style1"]) .top-nav,
html[data-theme]:not([data-theme="style1"]) .segmented,
html[data-theme]:not([data-theme="style1"]) .notice,
html[data-theme]:not([data-theme="style1"]) .empty-state,
html[data-theme]:not([data-theme="style1"]) .timeline article,
html[data-theme]:not([data-theme="style1"]) .chart-card,
html[data-theme]:not([data-theme="style1"]) .mini-news article,
html[data-theme]:not([data-theme="style1"]) .ws-control-card,
html[data-theme]:not([data-theme="style1"]) .ws-card,
html[data-theme]:not([data-theme="style1"]) .ws-monitor-panel,
html[data-theme]:not([data-theme="style1"]) .ws-monitor-box,
html[data-theme]:not([data-theme="style1"]) .strategy-preview-card,
html[data-theme]:not([data-theme="style1"]) .strategy-editor-card,
html[data-theme]:not([data-theme="style1"]) .strategy-plan-card,
html[data-theme]:not([data-theme="style1"]) .strategy-action-card,
html[data-theme]:not([data-theme="style1"]) .strategy-product-card,
html[data-theme]:not([data-theme="style1"]) .strategy-budget-grid div,
html[data-theme]:not([data-theme="style1"]) .strategy-currency-editor,
html[data-theme]:not([data-theme="style1"]) .strategy-edit-panel,
html[data-theme]:not([data-theme="style1"]) .strategy-config-section,
html[data-theme]:not([data-theme="style1"]) .strategy-choice-card,
html[data-theme]:not([data-theme="style1"]) .strategy2-edit-slot,
html[data-theme]:not([data-theme="style1"]) .strategy1-hint,
html[data-theme]:not([data-theme="style1"]) .strategy-simulation-grid article,
html[data-theme]:not([data-theme="style1"]) .custom-template-name,
html[data-theme]:not([data-theme="style1"]) .custom-template-group,
html[data-theme]:not([data-theme="style1"]) .custom-strategy-preview-card,
html[data-theme]:not([data-theme="style1"]) .strategy-builder-mode-card,
html[data-theme]:not([data-theme="style1"]) .strategy-sop-grid article,
html[data-theme]:not([data-theme="style1"]) .strategy-module-card,
html[data-theme]:not([data-theme="style1"]) .strategy-legacy-map,
html[data-theme]:not([data-theme="style1"]) .strategy-ra-reference,
html[data-theme]:not([data-theme="style1"]) .strategy-ra-grid article,
html[data-theme]:not([data-theme="style1"]) .condition-overview-grid article,
html[data-theme]:not([data-theme="style1"]) .condition-template-card,
html[data-theme]:not([data-theme="style1"]) .condition-param-row,
html[data-theme]:not([data-theme="style1"]) .strategy-task-block,
html[data-theme]:not([data-theme="style1"]) .strategy-condition-block,
html[data-theme]:not([data-theme="style1"]) .strategy-condition-step,
html[data-theme]:not([data-theme="style1"]) .strategy-condition-result,
html[data-theme]:not([data-theme="style1"]) .strategy-task-row,
html[data-theme]:not([data-theme="style1"]) .strategy-task-add,
html[data-theme]:not([data-theme="style1"]) .system-status-kv,
html[data-theme]:not([data-theme="style1"]) .system-log-panel,
html[data-theme]:not([data-theme="style1"]) .theme-choice {
  border-color: var(--line);
  background: var(--card-bg);
  color: var(--text);
}

html[data-theme]:not([data-theme="style1"]) .hero-balance,
html[data-theme]:not([data-theme="style1"]) .product-card,
html[data-theme]:not([data-theme="style1"]) .profile-card,
html[data-theme]:not([data-theme="style1"]) .section-block,
html[data-theme]:not([data-theme="style1"]) .coin-grid article,
html[data-theme]:not([data-theme="style1"]) .market-card,
html[data-theme]:not([data-theme="style1"]) .yield-summary-card,
html[data-theme]:not([data-theme="style1"]) .form-card,
html[data-theme]:not([data-theme="style1"]) .strategy-product-card,
html[data-theme]:not([data-theme="style1"]) .strategy-builder-mode-card,
html[data-theme]:not([data-theme="style1"]) .condition-overview-grid article,
html[data-theme]:not([data-theme="style1"]) .condition-template-card,
html[data-theme]:not([data-theme="style1"]) .system-health-block {
  border-color: var(--line);
  background: var(--card-grad);
}

html[data-theme]:not([data-theme="style1"]) .hero-balance,
html[data-theme]:not([data-theme="style1"]) .yield-hero-card {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background: var(--hero-grad);
  color: var(--on-emphasis);
}

html[data-theme] .hero-balance strong,
html[data-theme] .yield-hero-card strong,
html[data-theme] .yield-hero-head b {
  color: var(--on-emphasis);
}

html[data-theme]:not([data-theme="style1"]) .hero-balance small,
html[data-theme]:not([data-theme="style1"]) .hero-balance span,
html[data-theme]:not([data-theme="style1"]) .yield-hero-card small,
html[data-theme]:not([data-theme="style1"]) .yield-hero-card span,
html[data-theme]:not([data-theme="style1"]) .yield-hero-card em {
  color: var(--on-emphasis-muted);
}

html[data-theme] .market-tv-chart {
  background: var(--chart-surface);
}

html[data-theme] .market-structure-card {
  border-color: var(--data-border);
  background: var(--data-surface);
  color: var(--data-text);
}

html[data-theme] .market-structure-card-head,
html[data-theme] .market-structure-table th,
html[data-theme] .market-structure-table td {
  border-color: var(--data-border);
}

html[data-theme] .market-structure-card-head small,
html[data-theme] .market-structure-kpis small,
html[data-theme] .market-structure-kpis em,
html[data-theme] .market-structure-table th,
html[data-theme] .market-structure-table th:first-child,
html[data-theme] .market-structure-table td:first-child {
  color: var(--data-muted);
}

html[data-theme] .market-structure-kpis div,
html[data-theme] .market-share-bar,
html[data-theme] .market-structure-table th {
  background: var(--data-surface-soft);
}

html[data-theme] .market-structure-kpis b,
html[data-theme] .market-structure-table td {
  color: var(--data-text);
}

html[data-theme] .market-structure-table td {
  background: var(--data-surface);
}

html[data-theme] .market-structure-table tbody tr:nth-child(even) td {
  background: var(--data-row-alt);
}

html[data-theme] .preview-grid {
  background: var(--data-border);
}

html[data-theme] .preview-grid div {
  background: var(--data-surface);
  color: var(--data-text);
}

html[data-theme] .preview-grid small {
  color: var(--data-muted);
}

html[data-theme] .preview-grid b {
  color: var(--data-text);
}

html[data-theme] .preview-grid div:nth-child(odd) b {
  color: var(--accent-strong, var(--accent));
}

html[data-theme] .preview-grid div:nth-child(even) b {
  color: var(--flat-teal);
}

html[data-theme] .dashboard-live-card,
html[data-theme] .dashboard-analysis-block,
html[data-theme] .view-panel[data-panel="dashboard"] .ws-monitor-panel,
html[data-theme] .dashboard-live-source .ws-monitor-panel,
html[data-theme] .view-panel[data-panel="ws"] .ws-monitor-panel {
  border-color: var(--data-border);
  background: var(--data-surface);
  color: var(--data-text);
  box-shadow: var(--data-shadow);
}

html[data-theme] .dashboard-live-card.wallet-card {
  background: linear-gradient(135deg, var(--data-surface), var(--data-surface-soft));
}

html[data-theme] .dashboard-live-card.wallet-card::before,
html[data-theme] .dashboard-live-card::after {
  background: var(--active-bg);
}

html[data-theme] .dashboard-live-card small,
html[data-theme] .dashboard-live-card span,
html[data-theme] .view-panel[data-panel="dashboard"] .summary-label,
html[data-theme] .view-panel[data-panel="ws"] .summary-label {
  color: var(--data-muted);
}

html[data-theme] .dashboard-live-card strong,
html[data-theme] .view-panel[data-panel="dashboard"] .summary-value,
html[data-theme] .view-panel[data-panel="ws"] .summary-value,
html[data-theme] .view-panel[data-panel="dashboard"] .ws-monitor-panel h2,
html[data-theme] .view-panel[data-panel="ws"] .ws-monitor-panel h2 {
  color: var(--data-text);
}

html[data-theme] .dashboard-frr-pill,
html[data-theme] .dashboard-mini-progress,
html[data-theme] .view-panel[data-panel="dashboard"] .analysis-summary-item,
html[data-theme] .view-panel[data-panel="ws"] .analysis-summary-item {
  border-color: var(--data-border);
  background: var(--data-surface-soft);
  color: var(--data-text);
}

html[data-theme] .dashboard-frr-pill span,
html[data-theme] .dashboard-frr-pill em {
  color: var(--data-muted);
}

html[data-theme] .dashboard-frr-pill b {
  color: var(--green);
}

html[data-theme] .dashboard-mini-progress b {
  color: var(--data-text);
}

html[data-theme] .dashboard-mini-progress i {
  background: var(--flat-teal);
}

html[data-theme] .view-panel[data-panel="dashboard"] .ws-table-wrap,
html[data-theme] .dashboard-live-source .ws-table-wrap,
html[data-theme] .view-panel[data-panel="ws"] .ws-table-wrap {
  border-color: var(--data-border);
  background: var(--data-surface);
}

html[data-theme] .view-panel[data-panel="dashboard"] .ws-data-table th,
html[data-theme] .dashboard-live-source .ws-data-table th,
html[data-theme] .view-panel[data-panel="ws"] .ws-data-table th {
  border-color: var(--data-border) !important;
  background: var(--data-surface-soft) !important;
  color: var(--data-muted) !important;
}

html[data-theme] .view-panel[data-panel="dashboard"] .ws-data-table td,
html[data-theme] .dashboard-live-source .ws-data-table td,
html[data-theme] .view-panel[data-panel="ws"] .ws-data-table td {
  border-color: var(--data-border) !important;
  background: var(--data-surface) !important;
  color: var(--data-text) !important;
}

html[data-theme] .view-panel[data-panel="dashboard"] .ws-data-table tbody tr:nth-child(even) td,
html[data-theme] .dashboard-live-source .ws-data-table tbody tr:nth-child(even) td,
html[data-theme] .view-panel[data-panel="ws"] .ws-data-table tbody tr:nth-child(even) td {
  background: var(--data-row-alt) !important;
}

html[data-theme]:not([data-theme="style1"]) .coin-grid article,
html[data-theme]:not([data-theme="style1"]) .dashboard-stat-card,
html[data-theme]:not([data-theme="style1"]) .ws-stat-card,
html[data-theme]:not([data-theme="style1"]) .yield-summary-card {
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 34%),
    var(--card-grad);
}

html[data-theme]:not([data-theme="style1"]) .coin-grid article::after,
html[data-theme]:not([data-theme="style1"]) .dashboard-stat-card::after,
html[data-theme]:not([data-theme="style1"]) .ws-stat-card::after,
html[data-theme]:not([data-theme="style1"]) .yield-summary-card::after {
  background: var(--active-bg);
}

html[data-theme]:not([data-theme="style1"]) .status-row,
html[data-theme]:not([data-theme="style1"]) .snapshot-card-row,
html[data-theme]:not([data-theme="style1"]) .depth-row,
html[data-theme]:not([data-theme="style1"]) .table-mini th,
html[data-theme]:not([data-theme="style1"]) .table-mini td,
html[data-theme]:not([data-theme="style1"]) .ws-data-table th,
html[data-theme]:not([data-theme="style1"]) .ws-data-table td,
html[data-theme]:not([data-theme="style1"]) .strategy-control-head,
html[data-theme]:not([data-theme="style1"]) .strategy-selected-row,
html[data-theme]:not([data-theme="style1"]) .strategy-action-summary {
  border-color: var(--line);
}

html[data-theme]:not([data-theme="style1"]) .table-mini,
html[data-theme]:not([data-theme="style1"]) .ws-table-wrap,
html[data-theme]:not([data-theme="style1"]) .strategy-order-table,
html[data-theme]:not([data-theme="style1"]) .yield-table-wrap,
html[data-theme]:not([data-theme="style1"]) .yield-bar-chart,
html[data-theme]:not([data-theme="style1"]) .form-card input,
html[data-theme]:not([data-theme="style1"]) .form-card select,
html[data-theme]:not([data-theme="style1"]) .form-card textarea,
html[data-theme]:not([data-theme="style1"]) .strategy-config-mini-grid input,
html[data-theme]:not([data-theme="style1"]) .strategy-config-section input,
html[data-theme]:not([data-theme="style1"]) .custom-template-grid input,
html[data-theme]:not([data-theme="style1"]) .custom-template-grid select,
html[data-theme]:not([data-theme="style1"]) .condition-draft-grid input,
html[data-theme]:not([data-theme="style1"]) .condition-draft-grid select,
html[data-theme]:not([data-theme="style1"]) .strategy-module-grid input,
html[data-theme]:not([data-theme="style1"]) .strategy-module-grid select {
  border-color: var(--line);
  background: var(--input-bg);
  color: var(--text);
}

html[data-theme]:not([data-theme="style1"]) .table-mini th,
html[data-theme]:not([data-theme="style1"]) .ws-data-table th,
html[data-theme]:not([data-theme="style1"]) .strategy-task-head,
html[data-theme]:not([data-theme="style1"]) .condition-param-head {
  background: var(--table-head-bg);
  color: var(--table-head-text);
}

html[data-theme]:not([data-theme="style1"]) .market-share-bar i,
html[data-theme]:not([data-theme="style1"]) .market-share-bar.above-frr-share i {
  background: var(--active-bg);
}

html[data-theme]:not([data-theme="style1"]) .table-mini td,
html[data-theme]:not([data-theme="style1"]) .ws-data-table td,
html[data-theme]:not([data-theme="style1"]) .yield-summary-card strong,
html[data-theme]:not([data-theme="style1"]) .ws-monitor-box p,
html[data-theme]:not([data-theme="style1"]) .ws-log,
html[data-theme]:not([data-theme="style1"]) .system-log-panel pre {
  color: var(--table-cell-text);
}

html[data-theme]:not([data-theme="style1"]) .custom-template-grid input.is-readonly,
html[data-theme]:not([data-theme="style1"]) .custom-template-grid input[readonly],
html[data-theme]:not([data-theme="style1"]) .custom-template-grid select.is-readonly,
html[data-theme]:not([data-theme="style1"]) .custom-template-grid select:disabled {
  background: var(--readonly-bg);
  color: var(--muted);
}

html[data-theme]:not([data-theme="style1"]) .row-icon,
html[data-theme]:not([data-theme="style1"]) .avatar,
html[data-theme]:not([data-theme="style1"]) .market-mini-metrics div,
html[data-theme]:not([data-theme="style1"]) .ra-grid article,
html[data-theme]:not([data-theme="style1"]) .snapshot-card-row dl div,
html[data-theme]:not([data-theme="style1"]) .param-code,
html[data-theme]:not([data-theme="style1"]) .strategy-sop-grid span,
html[data-theme]:not([data-theme="style1"]) .strategy-sop-extra b,
html[data-theme]:not([data-theme="style1"]) .strategy-ra-grid code,
html[data-theme]:not([data-theme="style1"]) .condition-template-head > span {
  border-color: var(--line);
  background: var(--link-bg);
  color: var(--accent-strong, var(--accent));
}

html[data-theme]:not([data-theme="style1"]) .row-icon.ok,
html[data-theme]:not([data-theme="style1"]) .strategy-power-button.is-on,
html[data-theme]:not([data-theme="style1"]) .strategy-power-button.is-on span {
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--green);
}

html[data-theme]:not([data-theme="style1"]) .ws-small-link,
html[data-theme]:not([data-theme="style1"]) .ghost-button,
html[data-theme]:not([data-theme="style1"]) .button.secondary,
html[data-theme]:not([data-theme="style1"]) .nav-account {
  border-color: var(--line);
  background: var(--link-bg);
  color: var(--mocha-dark);
}

html[data-theme]:not([data-theme="style1"]) .ws-frr-strip article,
html[data-theme]:not([data-theme="style1"]) .market-card.featured,
html[data-theme]:not([data-theme="style1"]) .strategy-explain-box,
html[data-theme]:not([data-theme="style1"]) .strategy-module-interpretation,
html[data-theme]:not([data-theme="style1"]) .strategy-sim-note {
  border-color: color-mix(in srgb, var(--flat-teal) 30%, transparent);
  background: color-mix(in srgb, var(--flat-teal) 10%, transparent);
}

html[data-theme]:not([data-theme="style1"]) .progress-container {
  border-color: var(--line);
  background: color-mix(in srgb, var(--shell-2) 65%, transparent);
}

html[data-theme]:not([data-theme="style1"]) .progress-bar,
html[data-theme]:not([data-theme="style1"]) .chart-card .bar,
html[data-theme]:not([data-theme="style1"]) .depth-row i {
  background: var(--flat-teal);
  color: var(--shell);
}

html[data-theme]:not([data-theme="style1"]) .chart-card .bar.hot {
  background: var(--flat-mocha);
}

html[data-theme]:not([data-theme="style1"]) .frr-rate-badge {
  border-color: color-mix(in srgb, var(--accent) 36%, transparent);
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--cloud) 20%, transparent), transparent 26%),
    var(--active-bg);
  color: var(--active-text);
}

html[data-theme]:not([data-theme="style1"]) .strategy-product-card.is-enabled {
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--green) 42%, transparent);
}

html[data-theme]:not([data-theme="style1"]) .strategy-choice-card.is-selected,
html[data-theme]:not([data-theme="style1"]) .theme-choice.is-active {
  border-color: var(--accent);
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
    var(--card-bg-strong);
  box-shadow: inset 0 -3px 0 var(--accent);
}

html[data-theme]:not([data-theme="style1"]) .bottom-nav .nav-item.is-active {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--cloud) 18%, transparent), transparent 34%),
    color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: inset 0 3px 0 var(--accent);
}

html[data-theme]:not([data-theme="style1"]) .bottom-nav .nav-item.is-active,
html[data-theme]:not([data-theme="style1"]) .bottom-nav .nav-item.is-active b,
html[data-theme]:not([data-theme="style1"]) .bottom-nav .nav-item.is-active span {
  color: var(--accent-strong);
}

html[data-theme]:not([data-theme="style1"]) .danger-inline-button,
html[data-theme]:not([data-theme="style1"]) .danger-ghost,
html[data-theme]:not([data-theme="style1"]) .inline-delete button {
  border-color: color-mix(in srgb, var(--danger) 36%, transparent) !important;
  background: color-mix(in srgb, var(--danger) 10%, transparent) !important;
  color: var(--danger) !important;
}

html[data-theme]:not([data-theme="style1"]) .execution-log {
  border-color: var(--line);
  background: color-mix(in srgb, var(--bg) 78%, #000);
  color: var(--text);
}

/* 2026-08 theme audit: shared contrast and missed component surfaces. */
html[data-theme="style1"] .top-nav .nav-item.is-active,
html[data-theme="style1"] .second-level-switch button.is-active {
  background: #4f7f93;
  color: #fffdf8;
}

html[data-theme="style1"] .flow-number,
html[data-theme="style1"] .model-label > span {
  color: #765044;
}

html[data-theme="style1"] .row-icon.ok {
  color: #356f5e;
}

html[data-theme="style2"] .eyebrow,
html[data-theme="style2"] .flow-number,
html[data-theme="style2"] .model-label > span {
  color: var(--accent-strong);
}

html[data-theme="style2"] .beta-section h2 {
  color: #fffdf8;
}

html[data-theme="style2"] .beta-section .eyebrow {
  color: #d7e4e7;
}

html[data-theme="style2"] .beta-section .button.primary {
  border-color: rgba(255, 255, 255, 0.42);
  background: #fffdf8;
  color: #24414a;
}

html[data-theme="style3"] .education-hero {
  background:
    radial-gradient(circle at 82% 22%, rgba(56, 191, 199, 0.13), transparent 34%),
    linear-gradient(115deg, #0d1b2b, #10263a);
}

html[data-theme="style3"] .model-section,
html[data-theme="style3"] .permission-section,
html[data-theme="style3"] .faq-section {
  background: rgba(232, 242, 244, 0.035);
}

html[data-theme="style3"] .role-section {
  background: linear-gradient(180deg, rgba(56, 191, 199, 0.055), rgba(7, 17, 29, 0.18));
}

html[data-theme="style3"] .position-tags span,
html[data-theme="style3"] .hero-guide,
html[data-theme="style3"] .funding-flow article,
html[data-theme="style3"] .plain-note,
html[data-theme="style3"] .inline-explainer,
html[data-theme="style3"] .model-card,
html[data-theme="style3"] .role-node,
html[data-theme="style3"] .permission-path div,
html[data-theme="style3"] .boundary-card,
html[data-theme="style3"] .routine-grid div,
html[data-theme="style3"] .language-switcher summary,
html[data-theme="style3"] .language-menu {
  border-color: var(--line);
  background: var(--card-grad);
  color: var(--text);
}

html[data-theme="style3"] .funding-flow .flow-market,
html[data-theme="style3"] .role-bitfinex,
html[data-theme="style3"] .routine-grid .routine-result {
  border-color: color-mix(in srgb, var(--flat-teal) 30%, transparent);
  background: color-mix(in srgb, var(--flat-teal) 10%, transparent);
}

html[data-theme="style3"] .model-card.featured {
  border-color: color-mix(in srgb, var(--flat-teal) 48%, transparent);
  background: linear-gradient(145deg, rgba(56, 191, 199, 0.15), rgba(232, 242, 244, 0.075));
  box-shadow: inset 0 5px 0 var(--flat-teal), var(--data-shadow);
}

html[data-theme="style3"] .model-card.featured .model-label small {
  background: #16364a;
  color: var(--text);
}

html[data-theme="style3"] .hero-guide > small,
html[data-theme="style3"] .flow-connector,
html[data-theme="style3"] .model-label small,
html[data-theme="style3"] .role-api,
html[data-theme="style3"] .permission-path div b,
html[data-theme="style3"] .routine-grid span,
html[data-theme="style3"] .official-source-note a {
  color: var(--flat-teal);
}

html[data-theme="style3"] .hero-guide li span,
html[data-theme="style3"] .funding-flow h3,
html[data-theme="style3"] .model-card h3,
html[data-theme="style3"] .model-card.featured h3,
html[data-theme="style3"] .model-card dd,
html[data-theme="style3"] .role-node strong,
html[data-theme="style3"] .permission-path div span,
html[data-theme="style3"] .routine-grid p,
html[data-theme="style3"] .faq-item summary,
html[data-theme="style3"] .inline-explainer summary,
html[data-theme="style3"] .language-menu a {
  color: var(--text);
}

html[data-theme="style3"] .plain-note,
html[data-theme="style3"] .funding-flow small,
html[data-theme="style3"] .funding-flow p,
html[data-theme="style3"] .model-card > p,
html[data-theme="style3"] .model-card dt,
html[data-theme="style3"] .role-node small,
html[data-theme="style3"] .role-node span,
html[data-theme="style3"] .boundary-card li,
html[data-theme="style3"] .faq-answer p,
html[data-theme="style3"] .official-source-note {
  color: var(--muted);
}

html[data-theme="style3"] .role-api span,
html[data-theme="style3"] .language-menu a:hover,
html[data-theme="style3"] .language-menu a[aria-current="true"] {
  background: var(--link-bg);
}

html[data-theme="style3"] .language-menu a b {
  color: var(--accent-strong);
}

html[data-theme="style3"] .money-statement {
  border-color: color-mix(in srgb, var(--green) 34%, transparent);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

html[data-theme="style3"] .money-statement strong {
  color: #c9f4e5;
}

html[data-theme="style3"] .inline-explainer summary i::before,
html[data-theme="style3"] .inline-explainer summary i::after,
html[data-theme="style3"] .faq-item summary i::before,
html[data-theme="style3"] .faq-item summary i::after {
  background: var(--flat-teal);
}

html[data-theme] .yield-table-wrap,
html[data-theme] .period-rule-preview span,
html[data-theme] .market-metric-summary article,
html[data-theme] .market-metric-value-box {
  border-color: var(--data-border);
  background: var(--data-surface);
  color: var(--data-text);
}

html[data-theme] .yield-table th {
  border-color: var(--data-border);
  background: var(--table-head-bg, var(--data-surface-soft));
  color: var(--table-head-text, var(--data-text));
}

html[data-theme] .yield-table td {
  border-color: var(--data-border);
  background: var(--data-surface);
  color: var(--data-text);
}

html[data-theme] .yield-table tbody tr:nth-child(even) td {
  background: var(--data-row-alt);
}

html[data-theme] .period-rule-preview b,
html[data-theme] .market-metric-summary b,
html[data-theme] .market-metric-value-box b {
  color: var(--data-text);
}

html[data-theme] .period-rule-preview small,
html[data-theme] .market-metric-summary small,
html[data-theme] .market-metric-summary span,
html[data-theme] .market-metric-value-box small,
html[data-theme] .market-metric-value-box span,
html[data-theme] .market-metric-value-box em {
  color: var(--data-muted);
}

html[data-theme]:not([data-theme="style1"]) .strategy-setting-currency-option {
  border-color: var(--line);
  background: var(--card-bg);
  color: var(--text);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--flat-teal) 32%, transparent);
}

html[data-theme]:not([data-theme="style1"]) .strategy-setting-currency-option small {
  color: var(--muted);
}

html[data-theme]:not([data-theme="style1"]) .strategy-setting-currency-option.is-active {
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  background: var(--card-grad);
  box-shadow: inset 0 -4px 0 var(--accent), var(--data-shadow);
}

html[data-theme]:not([data-theme="style1"]) .strategy-power-button {
  border-color: var(--line);
  background: var(--card-bg-strong);
  color: var(--text);
}

html[data-theme]:not([data-theme="style1"]) .strategy-power-button span {
  background: var(--link-bg);
  color: var(--accent-strong);
}

html[data-theme="style3"] .api-guide-step {
  border-color: var(--line);
  background: var(--card-grad);
  color: var(--text);
}

html[data-theme="style3"] .api-guide-step h3,
html[data-theme="style3"] .api-help-link {
  color: var(--text);
}

html[data-theme="style3"] .api-security-note {
  border-color: color-mix(in srgb, var(--danger) 38%, transparent);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: #ffb0aa;
}

html[data-theme="style3"] .api-once-note {
  border-color: color-mix(in srgb, var(--amber) 38%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  color: #f4cf91;
}

html[data-theme="style3"] .condition-template-head > span,
html[data-theme="style3"] .market-metric-head > span {
  border-color: var(--line);
  background: var(--link-bg);
  color: var(--accent-strong);
}

html[data-theme="style3"] .info-tip,
html[data-theme="style3"] .info-tip:hover,
html[data-theme="style3"] .info-tip:focus {
  border-color: var(--line);
  background: var(--link-bg);
  color: var(--accent-strong);
}

html[data-theme="style3"] .danger-inline-button,
html[data-theme="style3"] .danger-ghost,
html[data-theme="style3"] .inline-delete button {
  color: #ff9b9b !important;
}

html[data-theme="style2"] .brand span,
html[data-theme="style2"] .button.primary {
  background: var(--active-bg);
  color: var(--active-text);
}

html[data-theme="style2"] .hero::before,
html[data-theme="style2"] .preview-card::before {
  background: var(--active-bg);
}

html[data-theme="style2"] .hero-copy::after {
  background: var(--active-bg);
}

html[data-theme="style2"] .preview-metric {
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--cloud) 34%, transparent), transparent 28%),
    var(--active-bg);
  color: var(--active-text);
}

html[data-theme="style3"] .brand span,
html[data-theme="style3"] .button.primary {
  background: var(--active-bg);
  color: var(--active-text);
}

html[data-theme="style3"] .hero::before,
html[data-theme="style3"] .preview-card::before {
  background: var(--active-bg);
}

html[data-theme="style3"] .hero-copy::after {
  background: var(--active-bg);
}

html[data-theme="style3"] .preview-metric {
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--cloud) 18%, transparent), transparent 28%),
    var(--hero-grad);
  color: var(--text);
}

html[data-theme="style3"] .bottom-nav .nav-item.is-active,
html[data-theme="style3"] .bottom-nav .nav-item.is-active span {
  color: var(--accent-strong);
}

.theme-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.theme-choice {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.66);
  color: var(--text);
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.theme-choice.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.theme-choice b,
.theme-choice small {
  display: block;
}

.theme-choice small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.theme-swatch-row {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}

.theme-swatch-row i {
  width: 20px;
  height: 8px;
  border-radius: 999px;
}

.theme-choice[data-theme-choice="style1"] .theme-swatch-row i:nth-child(1) { background: #a88373; }
.theme-choice[data-theme-choice="style1"] .theme-swatch-row i:nth-child(2) { background: #6490a4; }
.theme-choice[data-theme-choice="style1"] .theme-swatch-row i:nth-child(3) { background: #f8f1ea; }
.theme-choice[data-theme-choice="style2"] .theme-swatch-row i:nth-child(1) { background: #b08a4b; }
.theme-choice[data-theme-choice="style2"] .theme-swatch-row i:nth-child(2) { background: #0d6b53; }
.theme-choice[data-theme-choice="style2"] .theme-swatch-row i:nth-child(3) { background: #fffdf4; }
.theme-choice[data-theme-choice="style3"] .theme-swatch-row i:nth-child(1) { background: #c79b55; }
.theme-choice[data-theme-choice="style3"] .theme-swatch-row i:nth-child(2) { background: #62aabd; }
.theme-choice[data-theme-choice="style3"] .theme-swatch-row i:nth-child(3) { background: #101923; }
.theme-choice[data-theme-choice="style4"] .theme-swatch-row i:nth-child(1) { background: #38bdf8; }
.theme-choice[data-theme-choice="style4"] .theme-swatch-row i:nth-child(2) { background: #34d399; }
.theme-choice[data-theme-choice="style4"] .theme-swatch-row i:nth-child(3) { background: #070b10; }

@media (max-width: 640px) {
  .theme-choice-grid {
    grid-template-columns: 1fr;
  }
}

/* Final theme audit: components that still carried fixed light-theme colours. */
html[data-theme="style3"] .education-hero .hero-kicker {
  color: var(--flat-teal);
}

html[data-theme="style3"] .education-hero .lead {
  color: var(--muted);
}

html[data-theme]:not([data-theme="style1"]) .custom-template-title > span,
html[data-theme]:not([data-theme="style1"]) .custom-template-new-head > span,
html[data-theme]:not([data-theme="style1"]) .period-template-head > span,
html[data-theme]:not([data-theme="style1"]) .custom-strategy-preview-head span {
  border-color: var(--line);
  background: var(--link-bg);
  color: var(--accent-strong);
}

html[data-theme]:not([data-theme="style1"]) .custom-template-list-head {
  border-color: var(--data-border);
  background: var(--data-surface-soft);
  color: var(--data-muted);
}

html[data-theme]:not([data-theme="style1"]) .custom-template-card,
html[data-theme]:not([data-theme="style1"]) .custom-template-card-new,
html[data-theme]:not([data-theme="style1"]) .custom-liquidity-card,
html[data-theme]:not([data-theme="style1"]) .custom-liquidity-row,
html[data-theme]:not([data-theme="style1"]) .custom-liquidity-note,
html[data-theme]:not([data-theme="style1"]) .custom-template-empty,
html[data-theme]:not([data-theme="style1"]) .period-template-card,
html[data-theme]:not([data-theme="style1"]) .period-rule-row {
  border-color: var(--line);
  background: var(--card-bg);
  color: var(--text);
  box-shadow: var(--data-shadow);
}

html[data-theme]:not([data-theme="style1"]) .custom-template-card-new,
html[data-theme]:not([data-theme="style1"]) .custom-template-empty {
  background: var(--card-bg-strong);
}

html[data-theme]:not([data-theme="style1"]) .custom-template-drag {
  background: var(--link-bg);
  color: var(--accent-strong);
}

html[data-theme]:not([data-theme="style1"]) .custom-template-drag:hover,
html[data-theme]:not([data-theme="style1"]) .custom-template-drag:focus-visible {
  background: color-mix(in srgb, var(--accent) 18%, var(--card-bg));
  color: var(--text);
}

html[data-theme]:not([data-theme="style1"]) .custom-template-metrics span,
html[data-theme]:not([data-theme="style1"]) .custom-liquidity-editor,
html[data-theme]:not([data-theme="style1"]) .custom-template-edit,
html[data-theme]:not([data-theme="style1"]) .period-template-edit {
  border-color: var(--line);
}

html[data-theme]:not([data-theme="style1"]) .custom-liquidity-summary span {
  border-color: var(--data-border);
  background: var(--data-surface-soft);
}

html[data-theme]:not([data-theme="style1"]) .custom-liquidity-summary small {
  color: var(--data-muted);
}

html[data-theme]:not([data-theme="style1"]) .custom-liquidity-summary b {
  color: var(--data-text);
}

html[data-theme]:not([data-theme="style1"]) .custom-liquidity-row input,
html[data-theme]:not([data-theme="style1"]) .custom-liquidity-row select,
html[data-theme]:not([data-theme="style1"]) .period-template-form-grid input,
html[data-theme]:not([data-theme="style1"]) .period-rule-row input,
html[data-theme]:not([data-theme="style1"]) .period-rule-row select {
  border-color: var(--input-border);
  background: var(--input-bg);
  color: var(--text);
}

html[data-theme]:not([data-theme="style1"]) .custom-liquidity-row input:disabled,
html[data-theme]:not([data-theme="style1"]) .custom-liquidity-row select:disabled,
html[data-theme]:not([data-theme="style1"]) .period-rule-row input.is-readonly,
html[data-theme]:not([data-theme="style1"]) .period-rule-row input[readonly] {
  background: var(--readonly-bg);
  color: var(--muted);
  opacity: 1;
}

html[data-theme]:not([data-theme="style1"]) .theme-choice {
  border-color: var(--line);
  background: var(--card-bg);
  color: var(--text);
}

html[data-theme]:not([data-theme="style1"]) .theme-choice.is-active {
  border-color: var(--accent);
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 34%),
    var(--card-bg-strong);
  box-shadow: inset 0 -3px 0 var(--accent);
}

html[data-theme]:not([data-theme="style1"]) .theme-choice small {
  color: var(--muted);
}

/* Theme identity refinement: visible depth for FRR summaries without muddy overlays. */
html[data-theme="style2"] .period-frr-summary > div {
  border-color: rgba(7, 83, 63, 0.20);
  background:
    radial-gradient(circle at 88% 12%, rgba(183, 127, 56, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(7, 83, 63, 0.13), rgba(255, 250, 240, 0.96) 58%, rgba(242, 234, 217, 0.94));
  box-shadow: 0 10px 24px rgba(71, 66, 46, 0.08);
}

html[data-theme="style2"] .period-frr-summary > div:nth-child(2) {
  border-color: rgba(183, 127, 56, 0.24);
  background:
    radial-gradient(circle at 12% 10%, rgba(7, 83, 63, 0.10), transparent 35%),
    linear-gradient(135deg, rgba(183, 127, 56, 0.16), rgba(255, 250, 240, 0.96) 58%, rgba(238, 228, 207, 0.94));
}

html[data-theme="style3"] .period-frr-summary > div {
  border-color: rgba(56, 191, 199, 0.28);
  background:
    radial-gradient(circle at 88% 12%, rgba(213, 165, 82, 0.13), transparent 34%),
    linear-gradient(135deg, #14354a 0%, #10283d 58%, #13293d 100%);
  box-shadow: inset 3px 0 0 rgba(56, 191, 199, 0.72), 0 12px 28px rgba(0, 0, 0, 0.20);
}

html[data-theme="style3"] .period-frr-summary > div:nth-child(2) {
  border-color: rgba(213, 165, 82, 0.30);
  background:
    radial-gradient(circle at 12% 10%, rgba(56, 191, 199, 0.11), transparent 35%),
    linear-gradient(135deg, #2b2e35 0%, #192a3a 46%, #13283b 100%);
  box-shadow: inset 3px 0 0 rgba(213, 165, 82, 0.78), 0 12px 28px rgba(0, 0, 0, 0.20);
}

html[data-theme="style3"] .period-frr-summary span,
html[data-theme="style3"] .period-frr-summary small {
  color: rgba(220, 232, 235, 0.76);
}

html[data-theme="style3"] .period-frr-summary b {
  color: #f7fbfb;
}

/* Market > FRR: the two primary USD / USDT panels. */
html[data-theme="style2"] .market-frr-currency-card .market-card.featured {
  border-color: rgba(7, 83, 63, 0.24);
  background:
    radial-gradient(circle at 88% 12%, rgba(183, 127, 56, 0.24), transparent 36%),
    linear-gradient(135deg, rgba(7, 83, 63, 0.17) 0%, rgba(255, 250, 240, 0.97) 54%, rgba(236, 223, 197, 0.94) 100%);
  box-shadow: inset 4px 0 0 rgba(7, 83, 63, 0.62), 0 14px 30px rgba(71, 66, 46, 0.10);
}

html[data-theme="style2"] .market-frr-currency-card:nth-child(2) .market-card.featured {
  border-color: rgba(183, 127, 56, 0.28);
  background:
    radial-gradient(circle at 12% 12%, rgba(7, 83, 63, 0.14), transparent 35%),
    linear-gradient(135deg, rgba(183, 127, 56, 0.20) 0%, rgba(255, 250, 240, 0.97) 54%, rgba(232, 218, 190, 0.94) 100%);
  box-shadow: inset 4px 0 0 rgba(183, 127, 56, 0.72), 0 14px 30px rgba(71, 66, 46, 0.10);
}

html[data-theme="style2"] .market-frr-currency-card .market-mini-metrics > div {
  border-color: rgba(42, 57, 47, 0.14);
  background: rgba(255, 250, 240, 0.68);
}

html[data-theme="style3"] .market-frr-currency-card .market-card.featured {
  border-color: rgba(56, 191, 199, 0.32);
  background:
    radial-gradient(circle at 88% 12%, rgba(213, 165, 82, 0.18), transparent 36%),
    linear-gradient(135deg, #123d50 0%, #142b41 55%, #182f42 100%);
  box-shadow: inset 4px 0 0 rgba(56, 191, 199, 0.78), 0 16px 34px rgba(0, 0, 0, 0.24);
}

html[data-theme="style3"] .market-frr-currency-card:nth-child(2) .market-card.featured {
  border-color: rgba(213, 165, 82, 0.34);
  background:
    radial-gradient(circle at 12% 12%, rgba(56, 191, 199, 0.16), transparent 35%),
    linear-gradient(135deg, #32313a 0%, #1c2d3e 48%, #142a3d 100%);
  box-shadow: inset 4px 0 0 rgba(213, 165, 82, 0.82), 0 16px 34px rgba(0, 0, 0, 0.24);
}

html[data-theme="style3"] .market-frr-currency-card .market-mini-metrics > div {
  border-color: rgba(141, 181, 197, 0.20);
  background: rgba(7, 18, 31, 0.38);
}

html[data-theme="style3"] .market-frr-currency-card .market-card.featured strong {
  color: #f7fbfb;
}