/*
 * Global theme bridge.
 * The console and the two production workspaces share these semantic roles;
 * page-specific styles consume the roles instead of introducing a second
 * palette. The bridge is loaded after the legacy component stylesheet so it
 * also covers Tailwind and inline-compatible surfaces.
 */
:root,
html[data-theme="obsidian"] {
  --th-bg: #070809;
  --th-bg-2: #0d1012;
  --th-card: #121619;
  --th-card-hover: #182024;
  --th-text: #f4f7f5;
  --th-text-2: #b5c0bb;
  --th-accent: #67d8ff;
  --th-accent-2: #34d399;
  --th-border: rgba(226, 244, 236, .14);
  --th-border-top: rgba(226, 244, 236, .28);
  --th-input-bg: #101518;
  --th-logo-grad: linear-gradient(135deg, #102126 0%, #1997c5 68%, #8ae7ff 100%);
  --th-success: #34d399;
  --th-warning: #fbbf24;
  --th-danger: #fb7185;
  --th-info: #38bdf8;
  --th-text-secondary: #d4d4d8;
  --th-text-muted: #a1a1aa;
  --th-surface-subtle: rgba(255, 255, 255, .035);
  --th-surface-muted: rgba(255, 255, 255, .07);
  --th-overlay: rgba(0, 0, 0, .68);
  --th-grid: rgba(255, 255, 255, .05);
}

html[data-theme="graphite-amber"] {
  --th-bg: #111111;
  --th-bg-2: #181818;
  --th-card: #202020;
  --th-card-hover: #292929;
  --th-text: #fff8eb;
  --th-text-2: #c9c0b2;
  --th-accent: #f59e0b;
  --th-accent-2: #fb923c;
  --th-border: rgba(255, 243, 224, .15);
  --th-border-top: rgba(255, 214, 153, .32);
  --th-input-bg: #1d1d1d;
  --th-logo-grad: linear-gradient(135deg, #2a2115 0%, #d97706 68%, #fcd34d 100%);
  --th-success: #34d399;
  --th-warning: #fbbf24;
  --th-danger: #fb7185;
  --th-info: #38bdf8;
  --th-text-secondary: #d7d7dc;
  --th-text-muted: #b0b0b8;
  --th-surface-subtle: rgba(255, 255, 255, .04);
  --th-surface-muted: rgba(255, 255, 255, .08);
  --th-overlay: rgba(0, 0, 0, .72);
  --th-grid: rgba(255, 255, 255, .06);
}

html[data-theme="pine-green"] {
  --th-bg: #f2f7f4;
  --th-bg-2: #ffffff;
  --th-card: #ffffff;
  --th-card-hover: #eaf5ee;
  --th-text: #10251b;
  --th-text-2: #426052;
  --th-accent: #087f5b;
  --th-accent-2: #0f766e;
  --th-border: rgba(16, 37, 27, .14);
  --th-border-top: rgba(255, 255, 255, .95);
  --th-input-bg: #f8fbf9;
  --th-logo-grad: linear-gradient(135deg, #0b3b2b 0%, #087f5b 68%, #34d399 100%);
  --th-success: #087f5b;
  --th-warning: #a16207;
  --th-danger: #be123c;
  --th-info: #0369a1;
  --th-text-secondary: #294d3b;
  --th-text-muted: #527060;
  --th-surface-subtle: rgba(16, 37, 27, .045);
  --th-surface-muted: rgba(16, 37, 27, .085);
  --th-overlay: rgba(16, 37, 27, .32);
  --th-grid: rgba(16, 37, 27, .06);
}

html[data-theme="obsidian"],
html[data-theme="graphite-amber"] {
  color-scheme: dark;
}

html[data-theme="pine-green"] {
  color-scheme: light;
}

body {
  background-color: var(--th-bg) !important;
  color: var(--th-text) !important;
  background-image:
    linear-gradient(to right, var(--th-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--th-grid) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}

#app-header-bar,
.nav-subbar,
.console-sider {
  background: var(--th-bg-2) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}

#app-header-bar .btn-glass,
#app-header-bar .theme-trigger {
  color: var(--th-text-secondary) !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

.glass-panel,
.modal-apple,
.bento-metric {
  background: var(--th-console-surface, var(--th-card)) !important;
  border-color: var(--th-border) !important;
  border-top-color: var(--th-border-top) !important;
  color: var(--th-text) !important;
}

.glass-panel:hover,
.bento-metric:hover {
  background: var(--th-console-surface, var(--th-card-hover)) !important;
  border-color: var(--th-border-top) !important;
}

.input-apple,
.auth-field,
select.input-apple,
textarea.input-apple {
  background: var(--th-input-bg) !important;
  border-color: var(--th-border) !important;
  border-top-color: var(--th-border-top) !important;
  color: var(--th-text) !important;
}

.input-apple::placeholder,
.auth-field input::placeholder,
textarea::placeholder {
  color: var(--th-text-2) !important;
  opacity: .9;
}

.input-apple:focus,
.auth-field:focus-within {
  border-color: color-mix(in srgb, var(--th-accent) 65%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--th-accent) 14%, transparent) !important;
}

select.input-apple option,
select option {
  background: var(--th-bg-2);
  color: var(--th-text);
}

.btn-glass {
  background: var(--th-surface-subtle) !important;
  border-color: var(--th-border) !important;
  border-top-color: var(--th-border-top) !important;
  color: var(--th-text) !important;
}

.btn-glass:hover {
  background: var(--th-surface-muted) !important;
  border-color: var(--th-border-top) !important;
  color: var(--th-text) !important;
}

.btn-solid {
  background: var(--th-accent) !important;
  border-color: var(--th-accent) !important;
  color: color-mix(in srgb, var(--th-bg) 92%, #000) !important;
}

.btn-solid:hover {
  background: color-mix(in srgb, var(--th-accent) 86%, var(--th-text)) !important;
}

.sider-nav-item,
.dropdown-item,
.theme-option {
  color: var(--th-text-2) !important;
}

.sider-nav-item:hover,
.dropdown-item:hover,
.theme-option:hover {
  background: var(--th-surface-muted) !important;
  color: var(--th-text) !important;
}

.sider-nav-item.active,
.nav-tab-active,
.workflow-pill-active {
  background: color-mix(in srgb, var(--th-accent) 14%, transparent) !important;
  border-color: color-mix(in srgb, var(--th-accent) 34%, transparent) !important;
  color: var(--th-text) !important;
}

.table-apple thead th,
.table-apple tbody td {
  color: var(--th-text-2);
  border-color: var(--th-border);
}

/* The shared console wrapper is the owner of the opaque data surface. */
#console-layout-wrapper { --th-console-surface: var(--th-bg-2); }

.docs-section { padding: 24px 0; border-bottom: 1px solid var(--th-border); }
.docs-section p { max-width: 75ch; line-height: 1.7; color: var(--th-text-secondary); }
#page-docs pre { max-width: 100%; overflow-x: auto; font-size: 13px; line-height: 1.7; }

.table-apple tbody td strong,
.table-apple tbody td .text-white,
.table-apple tbody td.text-white {
  color: var(--th-text) !important;
}

.table-apple tbody tr:hover {
  background: var(--th-surface-subtle) !important;
}

.modal-overlay {
  background: var(--th-overlay) !important;
}

.nexus-prompt-card,
.user-dropdown,
.theme-menu {
  background: var(--th-card-hover) !important;
  border-color: var(--th-border-top) !important;
  color: var(--th-text) !important;
}

.nexus-prompt-card {
  background: var(--nexus-prompt-bg, var(--th-card-hover)) !important;
  border-color: var(--nexus-prompt-border, var(--th-border)) !important;
  border-top-color: var(--nexus-prompt-border-top, var(--th-border-top)) !important;
  color: var(--nexus-prompt-text, var(--th-text)) !important;
}

.nexus-prompt-message,
.nexus-toast-message,
.modal-apple p,
.modal-apple label {
  color: var(--th-text-2);
}

.nexus-prompt-message {
  color: var(--nexus-prompt-muted, var(--th-text-2));
}

/* Dynamic inline colors from legacy renderers are constrained to semantic roles. */
[style*="color:#fff"],
[style*="color: #fff"],
[style*="color:#ffffff"],
[style*="color: #ffffff"] {
  color: var(--th-text) !important;
}

html[data-theme="pine-green"] [style*="color:rgba(255,255,255"],
html[data-theme="pine-green"] [style*="color: rgba(255,255,255"] {
  color: var(--th-text-secondary) !important;
}

/* Creative workspaces share the same surface ladder and status colors. */
.creative-workspace-v4,
.novel-v4,
#page-studio.canvas-studio-page {
  --creative-surface: var(--th-bg-2);
  --creative-surface-2: var(--th-card);
  --creative-surface-3: var(--th-card-hover);
  --creative-line: var(--th-border);
  --creative-line-strong: var(--th-border-top);
  --creative-muted: var(--th-text-2);
  --creative-soft: var(--th-text-secondary);
  --creative-blue: var(--th-accent);
  --canvas-bg: var(--th-bg);
  --canvas-surface: var(--th-bg-2);
  --canvas-surface-strong: var(--th-card-hover);
  --canvas-node: var(--th-card);
  --canvas-line: var(--th-border);
  --canvas-line-strong: var(--th-border-top);
  --canvas-text: var(--th-text);
  --canvas-muted: var(--th-text-2);
  --canvas-accent: var(--th-accent);
  --canvas-success: var(--th-success);
  --canvas-warning: var(--th-warning);
  --canvas-danger: var(--th-danger);
}

.creative-workspace-v4,
.creative-workspace-v4 .studio-v4-shell,
.creative-workspace-v4 .studio-v4-canvas-column,
.creative-workspace-v4 .studio-v4-viewport,
.creative-workspace-v4 .studio-v4-compare,
.novel-v4,
.novel-v4 .novel-workspace-shell,
.novel-v4 .novel-editor-stage {
  background-color: var(--th-bg) !important;
  color: var(--th-text) !important;
}

.creative-workspace-v4 .studio-v4-topbar,
.creative-workspace-v4 .studio-v4-rail,
.creative-workspace-v4 .studio-v4-inspector,
.creative-workspace-v4 .studio-v4-composer,
.creative-workspace-v4 .studio-v4-asset-picker,
.creative-workspace-v4 .studio-v4-capability-list > button,
.novel-v4 .novel-workspace-topbar,
.novel-v4 .novel-activity-rail,
.novel-v4 .novel-side-panel,
.novel-v4 .novel-editor-panel,
.novel-v4 .novel-inspector-panel {
  background: var(--th-bg-2) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}

.creative-workspace-v4 .studio-v4-stage-tabs,
.creative-workspace-v4 .studio-v4-ratios,
.creative-workspace-v4 .studio-v4-choice-row,
.creative-workspace-v4 .studio-v4-prompt-row textarea,
.novel-v4 .novel-mode-switch {
  background: var(--th-card-hover) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}

.creative-workspace-v4 .studio-v4-stage-tabs .studio-stage-btn,
.creative-workspace-v4 .studio-v4-field,
.creative-workspace-v4 .studio-v4-ghost,
.creative-workspace-v4 .studio-v4-icon-button,
.novel-v4 .novel-activity-button,
.novel-v4 .novel-topbar-action,
.novel-v4 .novel-inspector-tab,
.novel-v4 .novel-breadcrumb,
.novel-v4 .novel-tool-button {
  color: var(--th-text-2) !important;
}

.creative-workspace-v4 .studio-v4-stage-tabs .studio-stage-btn:hover,
.creative-workspace-v4 .studio-v4-stage-tabs .studio-stage-btn.is-active,
.creative-workspace-v4 .studio-v4-stage-tabs .studio-stage-btn.workflow-pill-active,
.creative-workspace-v4 .studio-v4-icon-button:hover,
.novel-v4 .novel-activity-button:hover,
.novel-v4 .novel-activity-button.active,
.novel-v4 .novel-inspector-tab:hover,
.novel-v4 .novel-inspector-tab.active {
  background: color-mix(in srgb, var(--th-accent) 13%, transparent) !important;
  color: var(--th-text) !important;
}

.creative-workspace-v4 .studio-v4-prompt-row textarea,
.creative-workspace-v4 .studio-v4-field select {
  color: var(--th-text) !important;
}

.creative-workspace-v4 .studio-v4-prompt-row textarea::placeholder,
.novel-v4 .novel-editor-copy textarea#novel-editor-text::placeholder {
  color: var(--th-text-2) !important;
  opacity: .9;
}

.creative-workspace-v4 .studio-v4-run-button,
.creative-workspace-v4 .studio-v4-compare #compare-handle svg {
  background: var(--th-accent) !important;
  border-color: var(--th-accent) !important;
  color: color-mix(in srgb, var(--th-bg) 92%, #000) !important;
}

.novel-v4 .novel-editor-copy p,
.novel-v4 .novel-editor-copy textarea#novel-editor-text,
.novel-v4 .novel-script-action,
.novel-v4 .novel-script-dialogue,
.novel-v4 .novel-inspector-section p,
.novel-v4 .novel-lock-note {
  color: color-mix(in srgb, var(--th-text) 82%, transparent) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Final palette contract: retained themes share one semantic ladder while
   preserving a readable light option for Pine Green. */
html[data-theme="obsidian"],
html[data-theme="graphite-amber"] {
  color-scheme: dark;
}

html[data-theme="obsidian"] body,
html[data-theme="graphite-amber"] body,
html[data-theme="pine-green"] body,
html[data-theme="obsidian"] #console-layout-wrapper,
html[data-theme="graphite-amber"] #console-layout-wrapper,
html[data-theme="pine-green"] #console-layout-wrapper,
html[data-theme="obsidian"] .console-content,
html[data-theme="graphite-amber"] .console-content,
html[data-theme="pine-green"] .console-content,
html[data-theme="obsidian"] .console-sider,
html[data-theme="graphite-amber"] .console-sider,
html[data-theme="pine-green"] .console-sider,
html[data-theme="obsidian"] .nav-subbar,
html[data-theme="graphite-amber"] .nav-subbar,
html[data-theme="pine-green"] .nav-subbar,
html[data-theme="obsidian"] #app-header-bar,
html[data-theme="graphite-amber"] #app-header-bar,
html[data-theme="pine-green"] #app-header-bar {
  background-color: var(--th-bg) !important;
  color: var(--th-text) !important;
}

html[data-theme="obsidian"] .console-sider,
html[data-theme="graphite-amber"] .console-sider,
html[data-theme="pine-green"] .console-sider {
  background: var(--th-bg-2) !important;
  border-color: var(--th-border) !important;
}
html[data-theme="obsidian"] .sider-nav-item,
html[data-theme="graphite-amber"] .sider-nav-item,
html[data-theme="pine-green"] .sider-nav-item { color: var(--th-text-secondary) !important; }
html[data-theme="obsidian"] .sider-nav-item.active,
html[data-theme="graphite-amber"] .sider-nav-item.active,
html[data-theme="pine-green"] .sider-nav-item.active {
  background: color-mix(in srgb, var(--th-accent) 18%, transparent) !important;
  border-color: color-mix(in srgb, var(--th-accent) 42%, transparent) !important;
  color: var(--th-text) !important;
  box-shadow: none !important;
}

html[data-theme="obsidian"] .nav-subbar,
html[data-theme="graphite-amber"] .nav-subbar,
html[data-theme="pine-green"] .nav-subbar,
html[data-theme="obsidian"] #app-header-bar {
  background: var(--th-bg-2) !important;
  border-color: var(--th-border) !important;
}

html[data-theme="graphite-amber"] .nav-subbar,
html[data-theme="pine-green"] .nav-subbar {
  background: var(--th-bg-2) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text-secondary) !important;
}

html[data-theme="pine-green"] .nav-subbar .text-white\/30,
html[data-theme="pine-green"] .nav-subbar .text-white\/40,
html[data-theme="pine-green"] .nav-subbar .text-white\/60,
html[data-theme="pine-green"] .nav-subbar .text-white\/70 {
  color: var(--th-text-2) !important;
}

html[data-theme="obsidian"] .nexus-prompt-card,
html[data-theme="graphite-amber"] .nexus-prompt-card,
html[data-theme="pine-green"] .nexus-prompt-card {
  --nexus-prompt-overlay: var(--th-overlay);
  --nexus-prompt-bg: var(--th-card-hover);
  --nexus-prompt-text: var(--th-text);
  --nexus-prompt-muted: var(--th-text-2);
  --nexus-prompt-border: var(--th-border);
  --nexus-prompt-border-top: var(--th-border-top);
  --nexus-prompt-input-bg: var(--th-input-bg);
  --nexus-prompt-input-border: var(--th-border);
  --nexus-prompt-accent: var(--th-accent);
  --nexus-prompt-accent-soft: color-mix(in srgb, var(--th-accent) 12%, transparent);
  --nexus-prompt-confirm-bg: var(--th-accent);
  --nexus-prompt-confirm-text: var(--th-bg);
  --nexus-prompt-cancel-bg: transparent;
  --nexus-prompt-cancel-hover: var(--th-surface-muted);
}

html[data-theme="obsidian"],
html[data-theme="graphite-amber"],
html[data-theme="pine-green"] {
  --hol-bg: var(--th-bg);
  --hol-panel: var(--th-card);
  --hol-panel-border: var(--th-border);
  --hol-panel-border-hover: var(--th-border-top);
  --hol-line: var(--th-border);
  --hol-accent: var(--th-accent);
  --hol-accent-soft: color-mix(in srgb, var(--th-accent) 12%, transparent);
  --hol-text: var(--th-text);
  --hol-text-2: var(--th-text-secondary);
  --hol-text-3: var(--th-text-muted);
}

html[data-theme="pine-green"] .nexus-prompt-card {
  --nexus-prompt-bg: var(--th-card);
  --nexus-prompt-text: var(--th-text);
  --nexus-prompt-muted: var(--th-text-2);
  --nexus-prompt-input-bg: var(--th-input-bg);
  --nexus-prompt-confirm-bg: var(--th-accent);
  --nexus-prompt-confirm-text: #ffffff;
  --nexus-prompt-cancel-bg: var(--th-surface-subtle);
  --nexus-prompt-cancel-hover: var(--th-surface-muted);
}

html[data-theme="obsidian"] .usage-records-page,
html[data-theme="graphite-amber"] .usage-records-page,
html[data-theme="pine-green"] .usage-records-page,
html[data-theme="obsidian"] .usage-stat-card,
html[data-theme="graphite-amber"] .usage-stat-card,
html[data-theme="pine-green"] .usage-stat-card,
html[data-theme="obsidian"] .usage-chart-panel,
html[data-theme="graphite-amber"] .usage-chart-panel,
html[data-theme="pine-green"] .usage-chart-panel {
  color: var(--th-text) !important;
  border-color: var(--th-border) !important;
  background: transparent !important;
}

/* Dashboard hierarchy: metric labels and billing metadata stay readable in
   both color schemes without changing the existing top/side navigation. */
.dashboard-v3 .bento-label { font-size: 12px !important; color: var(--th-text-secondary) !important; }
/* 原 `.bento-metric > div:last-child` 瞄准的是旧结构里"累计 xxx"那一行;
   新结构最后一个是整个文字块 (.bento-copy), 该选择器已语义错误 —— 副注文字的颜色/字号
   统一由 ui-readability.css 的 .bento-sub 负责。 */
.dashboard-v3 .bento-sub { color: var(--th-text-2) !important; font-size: 12px !important; }
.dashboard-v3 #dash-billing-scope,
.dashboard-v3 #dash-billing-summary dt,
.dashboard-v3 #dash-billing-summary p { color: var(--th-text-secondary) !important; font-size: 12px !important; }
.dashboard-v3 .glass-panel { border-color: var(--th-border) !important; background: var(--th-card) !important; }
.dashboard-v3 .glass-panel h2,
.dashboard-v3 .glass-panel > span { color: var(--th-text) !important; }

.dashboard-v3 .dashboard-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 24px;
}
.dashboard-v3 .dashboard-section {
  min-width: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--th-border);
}
.dashboard-v3 .dashboard-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
  margin-bottom: 14px;
}
.dashboard-v3 .dashboard-section > header h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--th-text);
  font-size: 14px;
  font-weight: 650;
}
.dashboard-v3 .dashboard-section > header h2 svg { width: 16px; height: 16px; color: var(--th-accent); }
.dashboard-v3 .dashboard-section > header button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--th-text-secondary);
  font-size: 12px;
}
.dashboard-v3 .dashboard-section > header button:hover { color: var(--th-accent); }
.dashboard-v3 .dashboard-section > header button svg { width: 14px; height: 14px; }
.dashboard-v3 #dash-trend-chart { min-height: 210px; align-items: end; }
.dashboard-v3 .dashboard-health { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 18px; min-height: 210px; }
.dashboard-v3 .ds-health-rows > div { display: flex; justify-content: space-between; gap: 12px; color: var(--th-text-secondary); font-size: 12px; }
.dashboard-v3 .ds-health-rows > div > span:first-child { color: var(--th-text-secondary); }
.dashboard-v3 .ds-health-rows > div > span:last-child { color: var(--th-text); font-variant-numeric: tabular-nums; text-align: right; }
.dashboard-v3 .dashboard-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dashboard-v3 .dashboard-quick-actions button { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 11px; border: 1px solid var(--th-border); border-radius: 7px; color: var(--th-text-secondary); font-size: 12px; text-align: left; }
.dashboard-v3 .dashboard-quick-actions button.hidden { display: none; }
.dashboard-v3 .dashboard-quick-actions button:hover { background: var(--th-surface-muted); color: var(--th-text); border-color: var(--th-border-top); }
.dashboard-v3 .dashboard-quick-actions svg { width: 16px; height: 16px; color: var(--th-accent); }
.dashboard-v3 .dashboard-analytics-section { padding: 22px 0 0; border-top: 1px solid var(--th-border); }
#page-dashboard { font: 14px/1.5 'Inter', system-ui, sans-serif; }
#page-dashboard :is(.text-xs, [class*="text-[9"], [class*="text-[10"], [class*="text-[11"], small) { font-size: 12px !important; }
#page-dashboard .holo-empty span { font-size: 12px !important; color: var(--th-text-2); }
#page-dashboard [class*="text-white/"] { color: var(--th-text-secondary) !important; }
#page-dashboard :is(.text-amber-300, .text-amber-400) { color: var(--th-warning) !important; }
#page-dashboard :is(.text-emerald-300, .text-emerald-400) { color: var(--th-success) !important; }
#page-dashboard :is(.text-rose-300, .text-rose-400) { color: var(--th-danger) !important; }
#page-dashboard #dash-recent-logs > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; }
#page-dashboard #dash-recent-logs > div > div:first-child { flex-direction: column; align-items: flex-start; gap: 4px; }
#page-dashboard #dash-recent-logs > div > div:first-child > span { max-width: 100%; }
#page-dashboard #dash-trend-chart [class*="bg-gradient-to-t"] { background: var(--th-accent); box-shadow: none; }
#page-dashboard :is(button, select):focus-visible,
.theme-trigger:focus-visible, .theme-option:focus-visible {
  outline: 2px solid var(--th-accent); outline-offset: 3px;
}

@media (max-width: 900px) {
  .dashboard-v3 .dashboard-main-grid { grid-template-columns: 1fr; }
  #page-dashboard .dashboard-metrics-v3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-dashboard .bento-metric { min-width: 0; padding: 14px 10px; }
  #page-dashboard .bento-value { font-size: 23px; overflow-wrap: anywhere; }
  #page-dashboard .bento-label { white-space: normal; line-height: 1.5; }
  #page-dashboard .dashboard-section { padding: 12px 0; }
  #page-dashboard #dash-recent-logs > div { grid-template-columns: minmax(0, 1fr); }
  #page-dashboard #dash-recent-logs > div > div:last-child { justify-content: space-between; }
  #page-dashboard .dashboard-health { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
  #page-dashboard .ds-health-rows > div { flex-wrap: wrap; gap: 4px; }
}

html[data-theme="pine-green"] .glass-panel,
html[data-theme="pine-green"] .bento-metric,
html[data-theme="pine-green"] .modal-apple,
html[data-theme="pine-green"] .user-dropdown {
  background: var(--th-card) !important;
  border-color: var(--th-border) !important;
  border-top-color: var(--th-border-top) !important;
  color: var(--th-text) !important;
}
html[data-theme="pine-green"] .btn-solid,
html[data-theme="pine-green"] .btn-connect {
  background: var(--th-accent) !important;
  border-color: var(--th-accent) !important;
  color: #ffffff !important;
}
html[data-theme="pine-green"] .btn-solid:hover,
html[data-theme="pine-green"] .btn-connect:hover { background: #066b4d !important; }
html[data-theme="pine-green"] .btn-glass,
html[data-theme="pine-green"] .input-apple,
html[data-theme="pine-green"] .auth-field {
  background: var(--th-input-bg) !important;
  border-color: var(--th-border) !important;
  color: var(--th-text) !important;
}
html[data-theme="pine-green"] .btn-glass:hover { background: var(--th-surface-muted) !important; }

#page-logs .usage-records-table th { font-size: 12px; color: var(--th-text-2); letter-spacing: 0; }
html[data-theme="pine-green"] #page-logs .usage-status-badge.success { color: #05603f; }

.billing-section-focus {
  outline: 1px solid color-mix(in srgb, var(--th-accent) 55%, transparent);
  outline-offset: 3px;
  transition: outline-color 180ms ease;
}