/* TiFlow / Cool workspace. Presentation only; shared semantic tokens in both themes. */
:root[data-theme] {
  --bg: #101218;
  --panel: #181c25;
  --panel-strong: #181c25;
  --panel-soft: #202631;
  --sidebar: #13161e;
  --field: #131720;
  --border: #2a303d;
  --border-strong: #3b4558;
  --text: #edf0f7;
  --muted: #969fb2;
  --subtle: #7e899e;
  --aqua: #84a7ff;
  --aqua-dark: #253452;
  --blue: #84a7ff;
  --accent-solid: #426dec;
  --accent-soft: #222f4d;
  --accent-border: #364c79;
  --green: #66d2b0;
  --amber: #e9bd6e;
  --red: #f5999b;
  --success-soft: #203832;
  --warning-soft: #383126;
  --danger-soft: #3c292f;
  --hover: #202633;
  --radius: 14px;
  --shadow: 0 2px 8px #0000000a;
  --focus: 0 0 0 3px #668cff28;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}
:root[data-theme="light"] {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --panel-soft: #f1f4f9;
  --sidebar: #ffffff;
  --field: #ffffff;
  --border: #e4e8f0;
  --border-strong: #cbd3e1;
  --text: #202738;
  --muted: #606d82;
  --subtle: #606d82;
  --aqua: #3562d9;
  --aqua-dark: #eaf0ff;
  --blue: #3562d9;
  --accent-solid: #3562d9;
  --accent-soft: #edf2ff;
  --accent-border: #ccdaff;
  --green: #237f67;
  --amber: #906319;
  --red: #bc454d;
  --success-soft: #eaf6f1;
  --warning-soft: #fbf4e7;
  --danger-soft: #fbeef0;
  --hover: #f6f8fc;
  --shadow: 0 2px 10px #28385404;
}
html[data-theme] body { font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
html[data-theme] ::selection { background: var(--accent-border); color: var(--text); }
html[data-theme] .ambient { display: none; }
html[data-theme] .shell { grid-template-columns: 224px minmax(0, 1fr); }
html[data-theme] .sidebar { padding: 30px 16px 24px; background: var(--sidebar); backdrop-filter: none; box-shadow: none; }
html[data-theme] .brand { padding: 0 12px 32px; gap: 11px; }
html[data-theme] .brand-mark { background: var(--accent-solid); color: #fff; border-radius: 13px; box-shadow: none; font-weight: 750; }
html[data-theme] .brand-mark.small { width: 36px; height: 36px; border-radius: 11px; font-size: 19px; }
html[data-theme] .brand strong { font-size: 19px; letter-spacing: -.5px; font-weight: 650; }
html[data-theme] .brand span { color: var(--muted); font-size: 11px; margin-top: 0; }
html[data-theme] nav { gap: 5px; }
html[data-theme] nav p { color: var(--subtle); font-size: 11px; letter-spacing: .06em; margin: 27px 14px 10px; }
html[data-theme] .nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 9px; color: var(--muted); font-size: 13px; transition: background .16s, color .16s; }
html[data-theme] .nav-item:hover { background: var(--hover); color: var(--text); }
html[data-theme] .nav-item.active { color: var(--aqua); background: var(--accent-soft); box-shadow: none; font-weight: 600; }
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme] .sidebar-footer { padding: 22px 0 0; margin-top: auto; }
html[data-theme] .logout-pill { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; min-width: 156px; background: var(--panel-soft); border-color: var(--border-strong); color: var(--text); box-shadow: 0 2px 5px #00000008; font-size: 12px; font-weight: 550; }
html[data-theme] .logout-pill:hover { background: var(--accent-soft); border-color: var(--accent-border); color: var(--aqua); box-shadow: none; }
.logout-pill svg, .icon-button > svg:not(.theme-icon), .mobile-menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme] .workspace { max-width: 1840px; padding: 36px 40px 56px; margin: 0 auto; }
html[data-theme] .topbar { margin-bottom: 30px; min-height: 62px; }
html[data-theme] .topbar h1 { font-size: 28px; font-weight: 650; line-height: 1.4; letter-spacing: -.6px; margin-top: 4px; }
html[data-theme] .eyebrow { color: var(--subtle); font-size: 10px; letter-spacing: .12em; font-weight: 600; line-height: 1.5; }
html[data-theme] .top-actions { gap: 8px; }
html[data-theme] .icon-button, html[data-theme] .mobile-menu { align-items: center; justify-content: center; background: var(--panel); color: var(--muted); border: 1px solid var(--border); border-radius: 10px; width: 40px; height: 40px; flex-shrink: 0; }
html[data-theme] .icon-button { display: inline-flex; }
html[data-theme] .icon-button:hover, html[data-theme] .mobile-menu:hover { background: var(--hover); color: var(--text); }
html[data-theme] .overview-window-tabs { gap: 4px; width: fit-content; padding: 4px; background: var(--panel-soft); border: 1px solid var(--border); border-radius: 10px; margin: 0 0 24px; }
html[data-theme] .window-tab { min-height: 34px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 0 16px; font-weight: 500; }
html[data-theme] .window-tab.active { color: var(--text); background: var(--panel); border-color: var(--border); box-shadow: 0 1px 4px #0000000a; }
html[data-theme] .metric-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
html[data-theme] .metric-card, html[data-theme] .panel { background: var(--panel); border-color: var(--border); box-shadow: var(--shadow); }
html[data-theme] .metric-card { min-width: 0; min-height: 166px; padding: 23px 22px; gap: 15px; border-radius: var(--radius); }
html[data-theme] .metric-card.featured { border-color: var(--accent-border); background: var(--accent-soft); }
html[data-theme] .metric-top { color: var(--muted); font-size: 12px; gap: 8px; }
html[data-theme] .metric-top b { font-size: 9px; letter-spacing: .05em; font-weight: 550; }
html[data-theme] .metric-card > strong { color: var(--text); font-size: clamp(26px, 2.5vw, 36px); letter-spacing: -.9px; font-weight: 620; line-height: 1.15; overflow-wrap: anywhere; }
html[data-theme] .metric-card.featured > strong { color: var(--aqua); }
html[data-theme] .metric-card small { font-size: 11px; line-height: 1.5; color: var(--subtle); }
html[data-theme] .panel { padding: 26px; margin-bottom: 24px; }
html[data-theme] .panel-heading { align-items: center; gap: 20px; margin-bottom: 24px; }
html[data-theme] .panel-heading h2, html[data-theme] .note-panel h2 { font-size: 16px; font-weight: 600; letter-spacing: -.2px; margin-top: 5px; }
html[data-theme] .panel-heading .eyebrow { font-size: 9px; }
html[data-theme] .overview-latency-row { margin-bottom: 24px; }
html[data-theme] .latency-panel { min-height: 184px; margin-bottom: 0; }
html[data-theme] .latency-panel .panel-heading { margin-bottom: 16px; }
html[data-theme] .latency-content { padding: 4px 0; grid-template-columns: minmax(230px, .55fr) 1fr; column-gap: 36px; row-gap: 4px; }
html[data-theme] .latency-content > div { gap: 10px; }
html[data-theme] .latency-content strong { color: var(--text); font-size: 50px; font-weight: 600; letter-spacing: -1.5px; }
html[data-theme] .latency-content span { font-size: 12px; color: var(--muted); }
html[data-theme] .latency-content p { font-size: 13px; color: var(--muted); }
html[data-theme] .latency-content small { color: var(--subtle); font-size: 11px; }
html[data-theme] .live-chip, html[data-theme] .config-chip, html[data-theme] .current-project-chip { background: var(--accent-soft); border-color: var(--accent-border); color: var(--aqua); padding: 5px 9px; font-size: 10px; }
html[data-theme] .live-chip::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin: 0 5px 1px 0; }
html[data-theme] .config-chip.off { background: var(--panel-soft); color: var(--muted); border-color: var(--border); }
html[data-theme] .ledger-filters { gap: 12px; }
html[data-theme] .ledger-filters label > span, html[data-theme] .analytics-filters label > span { color: var(--muted); font-size: 11px; letter-spacing: 0; font-weight: 500; }
html[data-theme] .table-wrap { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
html[data-theme] table { font-variant-numeric: tabular-nums; }
html[data-theme] :is(#recentOrders, #recentDeductions, #ordersTable, #deductsTable, #clearsTable) .records-table { min-width: 1360px; }
html[data-theme] .records-table td[data-label="账户 / 平台"] { min-width: 170px; }
html[data-theme] .records-table td[data-label="创建时间"] { min-width: 128px; }
html[data-theme] th { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0; padding: 13px 14px; background: var(--panel-soft); border-bottom-color: var(--border); white-space: nowrap; }
html[data-theme] th:first-child { border-radius: 7px 0 0 7px; }
html[data-theme] th:last-child { border-radius: 0 7px 7px 0; }
html[data-theme] td { color: var(--muted); font-size: 12px; padding: 18px 14px; border-bottom-color: var(--border); line-height: 1.65; }
html[data-theme] td strong { font-weight: 550; }
html[data-theme] tbody tr:hover { background: var(--hover); }
html[data-theme] .records-table tr.needs-review { background: var(--warning-soft); }
html[data-theme] .status-tag { border-radius: 6px; padding: 4px 8px; font-size: 11px; line-height: 1.6; color: var(--muted); background: var(--panel-soft); }
html[data-theme] .status-tag.success { color: var(--green); background: var(--success-soft); }
html[data-theme] .status-tag.pending, html[data-theme] .status-tag.processing, html[data-theme] .status-tag.no-data, html[data-theme] .status-tag.manual_review, html[data-theme] .status-tag.partial { color: var(--amber); background: var(--warning-soft); }
html[data-theme] .status-tag.failed, html[data-theme] .status-tag.rejected { color: var(--red); background: var(--danger-soft); }
html[data-theme] .status-tag.has-reason { max-width: 280px; }
html[data-theme] .no-action { color: var(--subtle); }
html[data-theme] .review-approve { color: var(--green); border-color: var(--green); background: var(--success-soft); }
html[data-theme] .review-reject { color: var(--red); border-color: var(--red); background: var(--danger-soft); }
html[data-theme] .helper, html[data-theme] .muted { font-size: 12px; line-height: 1.8; color: var(--muted); }
html[data-theme] label, html[data-theme] .account-permission-fields legend { color: var(--muted); font-size: 12px; gap: 8px; }
html[data-theme] input, html[data-theme] textarea, html[data-theme] select { min-height: 42px; background: var(--field); border-color: var(--border-strong); color: var(--text); border-radius: 8px; padding: 10px 12px; font-size: 13px; }
html[data-theme] input::placeholder, html[data-theme] textarea::placeholder { color: var(--subtle); opacity: 1; }
html[data-theme] input:focus, html[data-theme] textarea:focus, html[data-theme] select:focus { border-color: var(--aqua); box-shadow: var(--focus); }
html[data-theme] input:disabled, html[data-theme] input[readonly] { background: var(--panel-soft); color: var(--muted); }
html[data-theme] button.primary, html[data-theme] button.secondary { min-height: 40px; border-radius: 8px; font-size: 12px; font-weight: 550; padding: 0 17px; transition: background .16s, border-color .16s; }
html[data-theme] button.primary { color: #fff; background: var(--accent-solid); border-color: var(--accent-solid); box-shadow: none; }
html[data-theme] button.primary:hover { filter: brightness(1.08); box-shadow: none; }
html[data-theme] button.secondary { background: var(--panel); color: var(--text); border-color: var(--border-strong); }
html[data-theme] button.secondary:hover { background: var(--hover); border-color: var(--subtle); }
html[data-theme] button:focus-visible, html[data-theme] [tabindex]:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }
html[data-theme] .text-button { color: var(--aqua); font-size: 12px; }
html[data-theme] .settings-grid { gap: 24px; }
html[data-theme] .narrow-panel { max-width: 960px; }
html[data-theme] .stack-form { gap: 22px; }
html[data-theme] .form-row { gap: 18px; }
html[data-theme] .note-panel { background: var(--panel); }
html[data-theme] .note-panel > p:not(.eyebrow) { color: var(--muted); font-size: 12px; }
html[data-theme] .code-note span { color: var(--muted); }
html[data-theme] .code-note code { color: var(--aqua); background: var(--panel-soft); }
html[data-theme] .shared-settings-note { color: var(--amber); background: var(--warning-soft); border-color: var(--border); }
html[data-theme] .permission-option, html[data-theme] .switch-row { background: var(--panel-soft); }
html[data-theme] .permission-option span { color: var(--text); }
html[data-theme] .permission-option input { min-height: 18px; }
html[data-theme] .switch-row input { background: var(--border-strong); min-height: 24px; }
html[data-theme] .switch-row input::after { background: var(--muted); }
html[data-theme] .switch-row input:checked { background: var(--accent-solid); border-color: var(--accent-solid); }
html[data-theme] .switch-row input:checked::after { background: #fff; }
html[data-theme] .danger-zone input:checked { background: var(--red); border-color: var(--red); }
html[data-theme] .analytics-section-tabs { background: transparent; padding: 0; gap: 24px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 24px; display: flex; width: 100%; }
html[data-theme] .analytics-section-tab { background: none; color: var(--muted); border: 0; border-radius: 0; padding: 0 2px 14px; min-height: 42px; font-size: 14px; font-weight: 500; }
html[data-theme] .analytics-section-tab.active { background: none; color: var(--aqua); border: 0; box-shadow: inset 0 -2px var(--aqua); }
html[data-theme] .analytics-filter-panel { margin-bottom: 24px; }
html[data-theme] .analytics-filter-note { color: var(--subtle); }
html[data-theme] .analytics-summary-grid, html[data-theme] .spend-summary-grid { gap: 16px; margin-bottom: 24px; }
html[data-theme] .analytics-summary-card, html[data-theme] .spend-summary-card { min-height: 130px; padding: 21px; }
html[data-theme] .analytics-summary-card > strong, html[data-theme] .spend-summary-card > strong { font-size: 29px; }
html[data-theme] .spend-summary-card.featured > strong { font-size: 26px; }
html[data-theme] .analytics-tables-grid { gap: 24px; }
html[data-theme] .spend-query-grid { gap: 24px; margin-bottom: 24px; }
html[data-theme] .spend-query-grid > .panel { margin-bottom: 0; }
html[data-theme] .spend-query-form, html[data-theme] .spend-batch-form, html[data-theme] .spend-batch-dates { gap: 16px; }
html[data-theme] .spend-drop-zone { background: var(--bg); border-color: var(--border-strong); border-radius: 10px; min-height: 144px; }
html[data-theme] .spend-drop-zone:hover, html[data-theme] .spend-drop-zone:focus, html[data-theme] .spend-drop-zone.dragging { border-color: var(--aqua); background: var(--accent-soft); box-shadow: var(--focus); }
html[data-theme] .spend-upload-icon { color: var(--aqua); background: var(--accent-soft); border-radius: 9px; }
html[data-theme] .spend-drop-zone input { min-height: 1px; }
html[data-theme] .spend-daily-total { background: var(--accent-soft); border-color: var(--accent-border); border-radius: 10px; }
html[data-theme] .spend-daily-description > strong { color: var(--text); }
html[data-theme] .toast { background: var(--panel); color: var(--text); border-color: var(--border-strong); box-shadow: 0 8px 32px #00000022; font-size: 13px; }
html[data-theme] .toast.error { color: var(--red); border-color: var(--red); }
html[data-theme] .login-gate { background: var(--bg); padding: 32px; }
html[data-theme] .login-card { width: min(440px, 100%); padding: 42px; gap: 20px; background: var(--panel); border-color: var(--border); border-radius: 20px; box-shadow: 0 16px 60px #0000000d; backdrop-filter: none; }
html[data-theme] .login-card .brand-mark { width: 46px; height: 46px; margin-bottom: 8px; }
html[data-theme] .login-brand { display: grid; justify-items: center; gap: 14px; text-align: center; margin-bottom: 4px; }
html[data-theme] .login-brand .eyebrow { margin: 0; }
html[data-theme] .login-card h1 { font-size: 24px; font-weight: 650; margin: 0; }
html[data-theme] .login-card .muted { margin: 0; line-height: 1.7; }
html[data-theme] .login-card button.primary { min-height: 44px; margin-top: 5px; }

/* Data graphics use the same report aggregates and semantic colors as their tables. */
.trend-chart-header, .outcome-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.trend-chart-header h3, .outcome-header h3 { margin: 0; color: var(--text); font-size: 16px; font-weight: 600; }
.trend-chart-header p, .outcome-header p { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.chart-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
.chart-legend-dot { display: inline-block; width: 16px; height: 3px; border-radius: 3px; background: var(--blue); }
.chart-legend-item.deduct .chart-legend-dot { background: var(--green); }
.trend-chart-svg { display: block; width: 100%; height: auto; max-height: 310px; overflow: visible; }
.trend-chart-plot { min-width: 0; }
.chart-mobile-hint { display: none; }
.chart-grid-line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; }
.chart-axis { stroke: var(--border); stroke-width: 1; }
text.chart-axis { fill: var(--muted); stroke: none; font-size: 11px; font-family: inherit; }
.chart-axis-label { fill: var(--muted); font-size: 11px; font-family: inherit; }
.trend-area-recharge { fill: var(--blue); opacity: .07; }
.trend-line-recharge, .trend-line-deduct { fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.trend-line-recharge { stroke: var(--blue); }
.trend-line-deduct { stroke: var(--green); }
.trend-point { stroke: var(--panel); stroke-width: 2; }
.trend-point.recharge { fill: var(--blue); }
.trend-point.deduct { fill: var(--green); }
.chart-note { color: var(--subtle); font-size: 11px; margin: 14px 0 0; }
.chart-empty { min-height: 180px; display: grid; place-content: center; text-align: center; gap: 8px; color: var(--muted); background: var(--bg); border: 1px dashed var(--border); border-radius: 10px; font-size: 13px; }
.chart-empty strong { color: var(--text); font-weight: 500; }
.chart-empty p { margin: 0; }
.outcome-total { color: var(--muted); font-size: 12px; }
.outcome-total strong { color: var(--text); font-size: 24px; font-weight: 600; margin-right: 5px; font-variant-numeric: tabular-nums; }
.outcome-bar { display: flex; gap: 3px; width: 100%; height: 9px; border-radius: 4px; overflow: hidden; background: var(--panel-soft); }
.outcome-segment { min-width: 3px; height: 100%; }
.outcome-success { background: var(--blue); fill: var(--blue); }
.outcome-manual { background: var(--amber); fill: var(--amber); }
.outcome-pending { background: #8d86ca; fill: #8d86ca; }
.outcome-failed { background: var(--red); fill: var(--red); }
.outcome-simulated { background: var(--green); fill: var(--green); }
.outcome-other { background: var(--subtle); fill: var(--subtle); }
.outcome-header > span:first-child { font-size: 15px; font-weight: 550; }
.trend-chart-header .chart-note { margin-top: 5px; }
.outcome-legend { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 17px; }
.outcome-item { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.outcome-item strong { color: var(--text); font-size: 12px; font-weight: 550; font-variant-numeric: tabular-nums; }
.outcome-dot { width: 6px; height: 6px; display: inline-block; border-radius: 2px; }
.distribution-panel .chart-empty { min-height: 90px; }

@media (max-width: 1360px) {
  html[data-theme] .workspace { padding: 30px 28px 48px; }
  html[data-theme] .metric-grid { gap: 12px; }
  html[data-theme] .metric-card { padding: 19px 17px; }
  html[data-theme] .metric-card > strong { font-size: 28px; }
  html[data-theme] .metric-top { font-size: 11px; }
}
@media (max-width: 1100px) {
  html[data-theme] .shell { grid-template-columns: 208px minmax(0, 1fr); }
  html[data-theme] .workspace { padding: 26px 24px 40px; }
  html[data-theme] .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-theme] .metric-card.featured { grid-column: span 2; }
  html[data-theme] .latency-content { grid-template-columns: 210px 1fr; column-gap: 24px; }
  html[data-theme] .panel { padding: 22px; }
}
@media (max-width: 768px) {
  html[data-theme] .shell { display: block; }
  html[data-theme] .sidebar { width: 224px; left: -242px; box-shadow: 8px 0 35px #00000022; padding-top: 24px; }
  html[data-theme] .sidebar.open { left: 0; }
  html[data-theme] .workspace { padding: 24px 20px 40px; }
  html[data-theme] .topbar { min-height: 48px; margin-bottom: 24px; align-items: center; }
  html[data-theme] .topbar h1 { font-size: 23px; }
  html[data-theme] .topbar .eyebrow { font-size: 8px; }
  html[data-theme] .top-actions { gap: 6px; }
  html[data-theme] .icon-button, html[data-theme] .mobile-menu { width: 40px; height: 44px; }
  html[data-theme] .mobile-menu { margin-right: 10px; }
  html[data-theme] .metric-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  html[data-theme] .metric-card { min-height: 142px; padding: 20px; gap: 12px; }
  html[data-theme] .metric-card.featured { grid-column: 1 / -1; }
  html[data-theme] .metric-card.featured > strong { font-size: 34px; }
  html[data-theme] .metric-card small { font-size: 10px; }
  html[data-theme] .panel { padding: 20px; margin-bottom: 20px; }
  html[data-theme] .panel-heading { gap: 14px; margin-bottom: 20px; }
  html[data-theme] .panel-heading h2 { font-size: 15px; }
  html[data-theme] .overview-window-tabs { width: 100%; display: flex; margin-bottom: 20px; }
  html[data-theme] .window-tab { font-size: 12px; }
  html[data-theme] .latency-panel { margin-bottom: 0; }
  html[data-theme] .latency-content { grid-template-columns: 1fr; gap: 8px; }
  html[data-theme] .latency-content > div { margin-bottom: 8px; }
  html[data-theme] .latency-content strong { font-size: 42px; }
  html[data-theme] .latency-content p { font-size: 12px; }
  html[data-theme] .records-table tr { background: var(--bg); border-color: var(--border); border-radius: 10px; padding: 4px 15px; }
  html[data-theme] :is(#recentOrders, #recentDeductions, #ordersTable, #deductsTable, #clearsTable) .records-table { min-width: 0; }
  html[data-theme] .records-table td[data-label] { min-width: 0; }
  html[data-theme] .records-table tr.needs-review { background: var(--warning-soft); border-color: var(--amber); }
  html[data-theme] .records-table td { grid-template-columns: 80px minmax(0,1fr); gap: 12px; padding: 12px 0; border-bottom-color: var(--border); font-size: 12px; }
  html[data-theme] .records-table td::before { color: var(--subtle); font-size: 10px; font-weight: 500; letter-spacing: 0; }
  html[data-theme] .status-tag.has-reason { max-width: 100%; }
  html[data-theme] .ledger-filters { grid-template-columns: 1fr 1fr; }
  html[data-theme] .analytics-summary-grid, html[data-theme] .spend-summary-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  html[data-theme] .analytics-summary-card.featured, html[data-theme] .spend-summary-card.featured { grid-column: 1 / -1; }
  html[data-theme] .analytics-summary-card, html[data-theme] .spend-summary-card { min-height: 118px; padding: 18px; }
  html[data-theme] .analytics-summary-card > strong, html[data-theme] .spend-summary-card > strong { font-size: 26px; }
  html[data-theme] .analytics-filter-actions { grid-template-columns: 1fr 1fr; }
  html[data-theme] .analytics-section-tabs { gap: 24px; }
  html[data-theme] .analytics-section-tab { font-size: 13px; }
  html[data-theme] .settings-grid, html[data-theme] .spend-query-grid { gap: 20px; }
  html[data-theme] .form-actions button, html[data-theme] button.primary, html[data-theme] button.secondary, html[data-theme] .review-actions button { min-height: 44px; }
  html[data-theme] input, html[data-theme] select, html[data-theme] textarea { min-height: 44px; font-size: 16px; }
  html[data-theme] .permission-option input { min-height: 18px; }
  html[data-theme] .switch-row input { min-height: 24px; }
  html[data-theme] .spend-drop-zone input { min-height: 1px; }
  .trend-chart-header { align-items: flex-start; flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .trend-chart-header h3, .outcome-header h3 { font-size: 15px; }
  .trend-chart-plot { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
  .trend-chart-svg { min-width: 720px; min-height: 225px; }
  text.chart-axis, .chart-axis-label { font-size: 14px; }
  .chart-mobile-hint { display: block; color: var(--subtle); font-size: 10px; margin: 8px 0 0; }
  .outcome-legend { gap: 12px 20px; }
  .outcome-header { margin-bottom: 18px; }
  html[data-theme] .login-gate { padding: 20px; }
  html[data-theme] .login-card { padding: 30px 24px; border-radius: 16px; }
}
@media (max-width: 390px) {
  html[data-theme] .workspace { padding: 20px 14px 36px; }
  html[data-theme] .topbar h1 { font-size: 21px; }
  html[data-theme] .topbar .eyebrow { letter-spacing: .04em; }
  html[data-theme] .panel { padding: 18px 16px; }
  html[data-theme] .metric-card { padding: 18px 16px; }
  html[data-theme] .icon-button, html[data-theme] .mobile-menu { width: 36px; }
  html[data-theme] .mobile-menu { margin-right: 8px; }
  html[data-theme] .records-table td { grid-template-columns: 66px minmax(0,1fr); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}