/* Mezrd visual preview. Loaded only for ?mezrd-ui=1 on localhost. */
html[data-mezrd-preview] {
  --mezrd-dark: #0B1F1E;
  --mezrd-dark-hover: #0F3D36;
  --mezrd-green: #10D1A3;
  --mezrd-mint: #6FF1C5;
  --mezrd-aqua: #C8F7E8;
  --background: #F8FAFB;
  --surface: #FFFFFF;
  --grey-50: #FAFBFA;
  --grey-100: #F3F5F4;
  --grey-200: #E7EBE9;
  --grey-400: #9AA5A1;
  --grey-600: #5D6965;
  --text-primary: #0B1F1E;
  --text-secondary: #5D6965;
  --success: #22C55E;
  --info: #3B82F6;
  --warning: #F59E0B;
  --error: #EF4444;
  --reference: #CBD5E1;
  --radius: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --shadow-card: 0 1px 2px rgba(11, 31, 30, .04);
  --focus-ring: 0 0 0 3px rgba(16, 209, 163, .20);
  /* Aliases keep the existing components on one visual system. */
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--grey-200);
  --bg: var(--background);
  --card: var(--surface);
  --nav: var(--mezrd-dark);
  --blue: var(--mezrd-dark);
  --purple: var(--info);
  --yellow: var(--warning);
  --amber: var(--warning);
  --red: var(--error);
}

html[data-mezrd-preview] body,
html[data-mezrd-preview] .cloud-auth-root,
html[data-mezrd-preview] .cloud-delete-modal {
  color: var(--text-primary);
  background: var(--background);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
html[data-mezrd-preview] :where(.card, .panel, .dashboard-panel, .dashboard-card, .category-detail-card, .modal-card, .cloud-auth-card, .cloud-delete-card, .cloud-auth-layout, .cloud-auth-visual, .budget-directory, .asset-directory, .asset-detail-event, .asset-history-item, .transaction-category-choice, .group, .budget-overview div, .budget-year-review, .user-data-footer, .settings-preferences-block, .settings-security-row, .sidebar-status, .sidebar-user, dialog, button, input, select, textarea, .notice, .tag) {
  border-radius: var(--radius);
}
html[data-mezrd-preview] :where(.tag, .asset-type, .asset-history-kind, .asset-detail-kind, .forecast-summary .variance, .sidebar-status-indicator, .status) {
  border-radius: 9999px;
}
html[data-mezrd-preview] :where(.user-avatar, .sidebar-user-avatar, .close, .cloud-delete-close, .category-chart-hit) {
  border-radius: 50%;
}
html[data-mezrd-preview] :where(input, select, textarea, button, a, [role="button"], summary):focus-visible {
  outline: 2px solid var(--mezrd-green);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}
html[data-mezrd-preview] :where(input, select, textarea):focus {
  border-color: var(--mezrd-green);
  outline: 0;
  box-shadow: var(--focus-ring);
}
html[data-mezrd-preview] :where(button, input, select, textarea):disabled {
  opacity: .5;
  cursor: not-allowed;
}
html[data-mezrd-preview] :where(.card, .panel, .dashboard-panel, .dashboard-card, .category-detail-card, .modal-card, .cloud-auth-card, .cloud-delete-card) {
  background: var(--surface);
  border: 1px solid var(--grey-200);
  box-shadow: var(--shadow-card);
}
html[data-mezrd-preview] :where(.panel, .modal-card, .cloud-delete-card) { padding: var(--space-6); }
html[data-mezrd-preview] :where(.card, .dashboard-card, .category-detail-card) { padding: var(--space-4); }
html[data-mezrd-preview] :where(.card .value, .dashboard-card .value, .dashboard-current-value .value, .asset-chart-value, .asset-financial-value, .asset-history-metric, .asset-history-change, .category-detail-card b, td.amount, .income-grid td) {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}
html[data-mezrd-preview] :where(h1, h2, h3, h4) { color: var(--text-primary); letter-spacing: -.025em; }
html[data-mezrd-preview] h1 { font-size: clamp(28px, 3vw, 32px); line-height: 1.25; font-weight: 700; }
html[data-mezrd-preview] h2 { font-size: 20px; line-height: 28px; font-weight: 600; }
html[data-mezrd-preview] h3 { font-size: 16px; line-height: 24px; font-weight: 600; }
html[data-mezrd-preview] :where(.subtitle, .recent-period, .as-of, small) { color: var(--text-secondary); }

/* Navigation and persistent account status. */
html[data-mezrd-preview] .shell { grid-template-columns: 252px minmax(0, 1fr); }
html[data-mezrd-preview] aside { padding: var(--space-6) var(--space-4); background: var(--mezrd-dark); color: var(--grey-100); }
html[data-mezrd-preview] .mezrd-brand { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-8); padding: 0 var(--space-2); color: white; }
html[data-mezrd-preview] .mezrd-brand img { width: 38px; height: 38px; flex: none; }
html[data-mezrd-preview] .mezrd-brand span { font-size: 29px; line-height: 1; font-weight: 750; letter-spacing: -.065em; }
html[data-mezrd-preview] .mezrd-demo-note { margin: 0 0 var(--space-4); padding: var(--space-3); border: 1px solid rgba(111, 241, 197, .35); border-radius: var(--radius); color: var(--mezrd-aqua); font-size: 12px; line-height: 16px; }
html[data-mezrd-preview] aside nav button { min-height: 44px; margin: var(--space-1) 0; padding: 10px 14px; color: var(--grey-100); font-size: 14px; font-weight: 500; }
html[data-mezrd-preview] aside nav button:hover { color: white; background: rgba(200, 247, 232, .12); }
html[data-mezrd-preview] aside nav button.active { color: var(--mezrd-dark); background: var(--mezrd-aqua); box-shadow: inset 3px 0 0 var(--mezrd-green); font-weight: 650; }
html[data-mezrd-preview] .sidebar-user,
html[data-mezrd-preview] .sidebar-status { border: 1px solid rgba(200, 247, 232, .18); background: transparent; }
html[data-mezrd-preview] .sidebar-user { min-height: 64px; padding: var(--space-3); }
html[data-mezrd-preview] .sidebar-user:hover,
html[data-mezrd-preview] .sidebar-user.active { border-color: var(--mezrd-mint); background: rgba(200, 247, 232, .11); }
html[data-mezrd-preview] .sidebar-user-avatar,
html[data-mezrd-preview] .user-avatar { color: var(--mezrd-dark); background: var(--mezrd-mint); }
html[data-mezrd-preview] .sidebar-user-copy small,
html[data-mezrd-preview] .sidebar-status-copy span { color: var(--grey-200); }
html[data-mezrd-preview] .sidebar-user-arrow { color: var(--mezrd-mint); }
html[data-mezrd-preview] .sidebar-status { padding: var(--space-3) var(--space-3) var(--space-1); }
html[data-mezrd-preview] .sidebar-status h2 { color: white; font-size: 14px; }
html[data-mezrd-preview] .sidebar-status-row { border-color: rgba(200, 247, 232, .16); }
html[data-mezrd-preview] .sidebar-status-indicator[data-level="good"] { color: var(--mezrd-green); }
html[data-mezrd-preview] .sidebar-status-indicator[data-level="warning"] { color: var(--warning); }
html[data-mezrd-preview] .sidebar-status-indicator[data-level="critical"] { color: var(--error); }
html[data-mezrd-preview] .sidebar-status-indicator[data-level="neutral"] { color: var(--grey-400); }

/* Shared controls, tables and status. */
html[data-mezrd-preview] main { max-width: 1480px; padding: var(--space-8) var(--space-8) var(--space-16); }
html[data-mezrd-preview] header { margin-bottom: var(--space-8); }
html[data-mezrd-preview] :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--grey-200);
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
}
html[data-mezrd-preview] :where(.btn, .cloud-auth-primary, .cloud-delete-confirm, .cloud-password-confirm) {
  min-height: 42px;
  border: 1px solid var(--mezrd-dark);
  background: var(--mezrd-dark);
  color: white;
  font-weight: 600;
  box-shadow: none;
}
html[data-mezrd-preview] :where(.btn, .cloud-auth-primary, .cloud-delete-confirm, .cloud-password-confirm):hover:not(:disabled) {
  border-color: var(--mezrd-dark-hover);
  background: var(--mezrd-dark-hover);
}
html[data-mezrd-preview] :where(.btn.ghost, .cloud-auth-secondary, .cloud-delete-cancel) {
  min-height: 42px;
  border: 1px solid var(--grey-200);
  background: white;
  color: var(--mezrd-dark);
  box-shadow: none;
}
html[data-mezrd-preview] :where(.btn.ghost, .cloud-auth-secondary, .cloud-delete-cancel):hover { background: var(--grey-100); }
html[data-mezrd-preview] :where(.btn.danger, .bank-danger, .cloud-delete-confirm) {
  border-color: var(--error);
  background: var(--error);
  color: white;
}
html[data-mezrd-preview] :where(.btn.danger, .bank-danger, .cloud-delete-confirm):hover:not(:disabled) { border-color: var(--error); background: var(--error); opacity: .88; }
html[data-mezrd-preview] :where(.user-signout-button, .user-delete-account, .bank-account-danger, .bank-delete-ack) { color: var(--error); }
html[data-mezrd-preview] :where(.user-signout-button, .user-delete-account) { border-color: var(--grey-200); background: white; }
html[data-mezrd-preview] :where(th, .income-grid th, .asset-table th, .forecast-table thead tr) { background: var(--grey-100); color: var(--grey-600); }
html[data-mezrd-preview] :where(th, td) { border-color: var(--grey-200); }
html[data-mezrd-preview] :where(.transaction-row:hover td, .budget-annual tr:hover td, .asset-main-row.has-history:hover td) { background: var(--grey-50); }
html[data-mezrd-preview] :where(.status.good, .asset-growth-cell, .asset-growth-value, .asset-history-change, .settings-saved) { color: #137A3D; }
html[data-mezrd-preview] :where(.status.bad, .asset-growth-cell.bad, .asset-growth-value.bad, .asset-history-change.bad, .expense) { color: var(--error); }
html[data-mezrd-preview] :where(.status.neutral, .asset-growth-cell.neutral) { color: var(--grey-600); }
html[data-mezrd-preview] .status.good { color: var(--mezrd-green); }
html[data-mezrd-preview] .income { color: var(--info); }
html[data-mezrd-preview] .tag.fixed { background: #FEECEC; color: #A92727; }
html[data-mezrd-preview] .tag.dynamic { background: #FFF4DE; color: #8A5600; }
html[data-mezrd-preview] .tag.income { background: #E9F2FF; color: #205CB1; }
html[data-mezrd-preview] .notice { border: 1px solid var(--grey-200); background: var(--grey-50); color: var(--text-secondary); }
html[data-mezrd-preview] .bar { background: var(--grey-200); }
html[data-mezrd-preview] .bar i { background: var(--mezrd-green); }
html[data-mezrd-preview] .bar i.warn { background: var(--warning); }
html[data-mezrd-preview] .bar i.over { background: var(--error); }
html[data-mezrd-preview] .category-progress .bar i:not(.over) { background: var(--mezrd-green); }
html[data-mezrd-preview] .category-result.good { background: var(--mezrd-aqua); color: var(--mezrd-green); }
html[data-mezrd-preview] .modal-backdrop,
html[data-mezrd-preview] .cloud-delete-backdrop { background: rgba(11, 31, 30, .50); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-mezrd-preview] .modal-card { max-height: calc(100dvh - 40px); overflow-y: auto; box-shadow: 0 12px 24px rgba(11, 31, 30, .08); }
html[data-mezrd-preview] .close { background: var(--grey-100); color: var(--mezrd-dark); }
html[data-mezrd-preview] .close:hover { background: var(--grey-200); }

/* Dashboard: position first, then trends, budgets and details. */
html[data-mezrd-preview] body[data-view="dashboard"] main,
html[data-mezrd-preview] body[data-view="transactions"] main { padding-top: var(--space-8); }
html[data-mezrd-preview] .dashboard-topbar,
html[data-mezrd-preview] .assets-topbar,
html[data-mezrd-preview] .transactions-topbar { margin-bottom: var(--space-6); }
html[data-mezrd-preview] .dashboard-period-title h1 { font-size: 32px; line-height: 40px; }
html[data-mezrd-preview] :where(.dashboard-period-tabs, .asset-filters) { gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--grey-200); background: var(--grey-100); }
html[data-mezrd-preview] :where(.dashboard-period-tabs > button, .period-range-trigger, .asset-filters button) { min-height: 36px; color: var(--grey-600); border-radius: var(--radius); font-weight: 600; }
html[data-mezrd-preview] :where(.dashboard-period-tabs > button, .period-range-trigger, .asset-filters button).active { background: var(--mezrd-aqua); color: var(--mezrd-dark); box-shadow: none; }
html[data-mezrd-preview] :where(.dashboard-period-tabs > button, .period-range-trigger, .asset-filters button):hover:not(.active) { background: white; color: var(--mezrd-dark); }
html[data-mezrd-preview] .dashboard-cards { gap: var(--space-4); margin-bottom: var(--space-4); }
html[data-mezrd-preview] .dashboard-card { min-height: 136px; gap: var(--space-3); padding: var(--space-4); }
html[data-mezrd-preview] .dashboard-card .label { color: var(--grey-600); font-size: 12px; font-weight: 500; }
html[data-mezrd-preview] .dashboard-card .value { color: var(--text-primary); font-size: 28px; line-height: 36px; font-weight: 700; }
html[data-mezrd-preview] .dashboard-card-icon { border-radius: var(--radius); }
html[data-mezrd-preview] .dashboard-card-icon.income-icon,
html[data-mezrd-preview] .dashboard-card-icon.good-icon { background: var(--mezrd-aqua); color: var(--mezrd-dark); }
html[data-mezrd-preview] .dashboard-card-icon.spending-icon,
html[data-mezrd-preview] .dashboard-card-icon.bad-icon { background: #FEECEC; color: var(--error); }
html[data-mezrd-preview] .dashboard-card-icon.remaining-icon { background: var(--grey-100); color: var(--mezrd-dark); }
html[data-mezrd-preview] .dashboard-card-icon.budget-icon { background: #E9F2FF; color: var(--info); }
html[data-mezrd-preview] .dashboard-card.drilldown:hover,
html[data-mezrd-preview] .dashboard-card.drilldown:focus-visible { border-color: var(--mezrd-green); box-shadow: var(--shadow-card); transform: none; }
html[data-mezrd-preview] .dashboard-main-grid,
html[data-mezrd-preview] .dashboard-bottom-grid { gap: var(--space-4); }
html[data-mezrd-preview] .dashboard-bottom-grid { margin-top: var(--space-6); }
html[data-mezrd-preview] .dashboard-current-value { background: var(--mezrd-dark); border-color: var(--mezrd-dark); color: white; }
html[data-mezrd-preview] .dashboard-current-value :where(.label, .value, .breakdown-row b) { color: white; }
html[data-mezrd-preview] .dashboard-current-value :where(.breakdown-row span, .as-of) { color: var(--grey-200); }
html[data-mezrd-preview] .dashboard-current-value .breakdown-row b.good { color: var(--mezrd-mint); }
html[data-mezrd-preview] .dashboard-current-value .breakdown-row b.bad { color: #FFADAD; }
html[data-mezrd-preview] .dashboard-panel-head { padding: var(--space-4) var(--space-6) var(--space-3); }
html[data-mezrd-preview] .dashboard-panel-head h2 { font-size: 20px; line-height: 28px; }
html[data-mezrd-preview] .dashboard-asset-growth { padding: var(--space-4) var(--space-6); }
html[data-mezrd-preview] .dashboard-asset-growth h2 { font-size: 20px; }
html[data-mezrd-preview] .dashboard-legend { color: var(--grey-600); }
html[data-mezrd-preview] .dashboard-legend i[style*="#20b979"] { background: var(--mezrd-green) !important; }
html[data-mezrd-preview] .dashboard-legend i[style*="#f14a50"] { background: var(--error) !important; }
html[data-mezrd-preview] .dashboard-legend i[style*="#9fb0c9"] { background: var(--reference) !important; }
html[data-mezrd-preview] .chart-plot { border-color: var(--grey-200); background: repeating-linear-gradient(to bottom, white 0, white 37px, var(--grey-200) 38px); }
html[data-mezrd-preview] .chart-month.current { background: rgba(16, 209, 163, .05); }
html[data-mezrd-preview] .chart-month.selectable:hover,
html[data-mezrd-preview] .chart-month.selectable:focus-visible { background: rgba(16, 209, 163, .09); }
html[data-mezrd-preview] .chart-bar.income-bar { background: var(--mezrd-green); }
html[data-mezrd-preview] .chart-bar.spending-bar { background: var(--error); }
html[data-mezrd-preview] .chart-budget-mark { background: var(--reference); }
html[data-mezrd-preview] .forecast-summary .variance.good { background: var(--mezrd-aqua); color: var(--mezrd-dark); }
html[data-mezrd-preview] .forecast-summary .variance.bad { background: #FEECEC; color: #A92727; }
html[data-mezrd-preview] .forecast-table tr.category-drilldown:hover,
html[data-mezrd-preview] .forecast-table tr.category-drilldown:focus-visible { background: var(--grey-50); box-shadow: inset 3px 0 0 var(--mezrd-green); }
html[data-mezrd-preview] .forecast-table tr.category-drilldown:hover .category-name { color: var(--mezrd-dark); }

/* Budgets, transaction lists and the category guides. */
html[data-mezrd-preview] body[data-view="budgets"] .shell { grid-template-columns: 252px 280px minmax(0, 1fr); }
html[data-mezrd-preview] body[data-view="assets"] .shell { grid-template-columns: 252px 280px minmax(0, 1fr); }
html[data-mezrd-preview] .budget-directory,
html[data-mezrd-preview] .asset-directory { border-color: var(--grey-200); background: var(--surface); }
html[data-mezrd-preview] .budget-directory { padding: var(--space-6) var(--space-3); }
html[data-mezrd-preview] .budget-directory-title,
html[data-mezrd-preview] .asset-directory-title { color: var(--mezrd-dark); font-size: 16px; }
html[data-mezrd-preview] .budget-directory .budget-link,
html[data-mezrd-preview] .asset-directory-item { border-radius: var(--radius); color: var(--mezrd-dark); }
html[data-mezrd-preview] .budget-directory .budget-link:hover,
html[data-mezrd-preview] .asset-directory-item:hover { background: var(--grey-100); }
html[data-mezrd-preview] .budget-directory .budget-link.active,
html[data-mezrd-preview] .asset-directory-item.active { background: var(--mezrd-aqua); color: var(--mezrd-dark); box-shadow: inset 3px 0 0 var(--mezrd-green); }
html[data-mezrd-preview] .budget-directory .budget-year-actions button { color: var(--mezrd-dark); text-decoration: underline; text-decoration-color: var(--mezrd-green); text-underline-offset: 3px; }
html[data-mezrd-preview] :where(.budget-map-tree, .budget-directory .expense-subnav, .asset-directory-tree, .asset-directory-children) { border-color: var(--grey-200); }
html[data-mezrd-preview] .budget-breakdown-table tr.section-start td,
html[data-mezrd-preview] .income-grid .income-total td,
html[data-mezrd-preview] .income-grid .income-source-row td { border-color: var(--grey-100); }
html[data-mezrd-preview] .budget-breakdown-table .budget-breakdown-total td,
html[data-mezrd-preview] .income-grid .income-total td { background: var(--grey-100); color: var(--mezrd-dark); }
html[data-mezrd-preview] .budget-breakdown-table .budget-breakdown-net.good td:last-child { color: #137A3D; }
html[data-mezrd-preview] .budget-breakdown-table .budget-breakdown-net.bad td:last-child { color: var(--error); }
html[data-mezrd-preview] .budget-breakdown-table td,
html[data-mezrd-preview] .income-grid td { font-variant-numeric: tabular-nums; }
html[data-mezrd-preview] .income-grid-wrap,
html[data-mezrd-preview] .asset-table-panel { border-color: var(--grey-200); border-radius: var(--radius); }
html[data-mezrd-preview] .income-grid-wrap { overflow-x: auto; }
html[data-mezrd-preview] .income-grid { min-width: 1120px; }
html[data-mezrd-preview] .income-grid input:hover { background: var(--grey-50); border-color: var(--grey-200); }
html[data-mezrd-preview] .income-grid input:focus { border-color: var(--mezrd-green); box-shadow: var(--focus-ring); }
html[data-mezrd-preview] .transaction-category-guide-link,
html[data-mezrd-preview] .transaction-category-choice summary,
html[data-mezrd-preview] .transaction-category-chooser-actions button { color: var(--mezrd-dark); text-decoration-color: var(--mezrd-green); }
html[data-mezrd-preview] .transaction-category-choice { border-color: var(--grey-200); }
html[data-mezrd-preview] .transaction-category-choice button { border-color: var(--grey-200); border-radius: var(--radius); background: white; color: var(--mezrd-dark); }
html[data-mezrd-preview] .transaction-category-choice button:hover { border-color: var(--mezrd-dark); background: var(--mezrd-dark); color: white; }
html[data-mezrd-preview] .transaction-category-choice ul,
html[data-mezrd-preview] .transaction-category-choice details { color: var(--grey-600); }

/* Assets and activity retain their meaning while sharing the Mezrd palette. */
html[data-mezrd-preview] .asset-category-title,
html[data-mezrd-preview] .asset-category-heading td,
html[data-mezrd-preview] .asset-history-summary { background: var(--grey-100); }
html[data-mezrd-preview] .asset-row-icon,
html[data-mezrd-preview] .asset-growth-icon { border-radius: var(--radius); background: var(--mezrd-aqua); color: var(--mezrd-dark); }
html[data-mezrd-preview] .asset-type,
html[data-mezrd-preview] .asset-history-kind.growth { background: var(--mezrd-aqua); color: var(--mezrd-dark); }
html[data-mezrd-preview] .asset-type.liability,
html[data-mezrd-preview] .asset-history-kind.withdrawal { background: #FEECEC; color: #A92727; }
html[data-mezrd-preview] .asset-history-item:hover,
html[data-mezrd-preview] button.asset-detail-event:hover { background: var(--grey-50); border-color: var(--mezrd-green); box-shadow: none; }
html[data-mezrd-preview] .asset-history-item.growth,
html[data-mezrd-preview] .asset-detail-event.growth { border-left-color: var(--success); }
html[data-mezrd-preview] .asset-history-item.withdrawal,
html[data-mezrd-preview] .asset-detail-event.withdrawal { border-left-color: var(--error); }
html[data-mezrd-preview] .asset-history-item.contribution,
html[data-mezrd-preview] .asset-detail-event.contribution { border-left-color: var(--warning); }
html[data-mezrd-preview] .asset-history-item.initial,
html[data-mezrd-preview] .asset-detail-event.initial { border-left-color: var(--info); }
html[data-mezrd-preview] .asset-growth-cell:not(.bad),
html[data-mezrd-preview] .asset-chart-note:not(.bad) { color: #137A3D; }
html[data-mezrd-preview] .asset-history-row td { background: var(--grey-50); }
html[data-mezrd-preview] .asset-value-chart-body svg [stroke="#13ae6f"],
html[data-mezrd-preview] .asset-value-chart-body svg [stroke="#07945a"],
html[data-mezrd-preview] .dashboard-growth-chart svg [stroke="#13ae6f"] { stroke: var(--mezrd-green); }
html[data-mezrd-preview] svg [fill="#13ae6f"],
html[data-mezrd-preview] svg [fill="#07945a"] { fill: var(--mezrd-green); }
html[data-mezrd-preview] svg [fill="#ee4048"],
html[data-mezrd-preview] svg [fill="#f14a50"] { fill: var(--error); }

/* User setup, authentication and supporting states. */
html[data-mezrd-preview] #user .user-profile-strip { border-color: var(--grey-200); }
html[data-mezrd-preview] #user .user-settings-tabs button[aria-selected="true"] { color: var(--mezrd-dark); border-bottom-color: var(--mezrd-green); }
html[data-mezrd-preview] #user .user-details-panel,
html[data-mezrd-preview] #user .user-security-panel,
html[data-mezrd-preview] #user .connected-banks { padding: var(--space-6); }
html[data-mezrd-preview] #user .user-data-footer { border-color: var(--grey-200); border-radius: var(--radius); }
html[data-mezrd-preview] #user .user-admin-link { border-color: var(--grey-200); border-radius: var(--radius); color: var(--mezrd-dark); }
html[data-mezrd-preview] #user .user-admin-link:hover { background: var(--grey-100); }
html[data-mezrd-preview] #user .user-cloud-status,
html[data-mezrd-preview] #user .bank-row-details { background: var(--grey-100); }
html[data-mezrd-preview] .user-cloud-state { color: #137A3D; }
html[data-mezrd-preview] .user-cloud-status[data-state="saving"] .user-cloud-state { color: #8A5600; }
html[data-mezrd-preview] .user-cloud-status[data-state="error"] .user-cloud-state,
html[data-mezrd-preview] .user-cloud-status[data-state="offline"] .user-cloud-state { color: var(--error); }
html[data-mezrd-preview] .cloud-status-dot { background: var(--success); }
html[data-mezrd-preview] .user-cloud-status[data-state="demo"] .cloud-status-dot { background: var(--grey-400); }
html[data-mezrd-preview] .user-cloud-status[data-state="demo"] .user-cloud-state { color: var(--grey-600); }
html[data-mezrd-preview] .cloud-auth-root { padding: var(--space-6); background: var(--background); }
html[data-mezrd-preview] .cloud-auth-layout { border-color: var(--grey-200); border-radius: var(--radius); box-shadow: none; }
html[data-mezrd-preview] .cloud-auth-visual { position: relative; border-radius: var(--radius); background: linear-gradient(145deg, var(--mezrd-dark) 0%, var(--mezrd-dark-hover) 100%); }
html[data-mezrd-preview] .cloud-auth-visual::before { content: "mezrd"; position: absolute; top: clamp(24px, 5vw, 64px); left: clamp(24px, 5vw, 64px); display: flex; align-items: center; height: 48px; padding-left: 60px; background: url("mezrd-mark.svg") left center / 48px 48px no-repeat; color: white; font-size: 32px; line-height: 48px; font-weight: 750; letter-spacing: -.065em; }
html[data-mezrd-preview] .cloud-auth-visual-copy { padding: clamp(140px, 13vw, 184px) clamp(24px, 5vw, 64px) var(--space-12); }
html[data-mezrd-preview] .cloud-auth-visual-copy span { color: var(--mezrd-mint); font-weight: 600; }
html[data-mezrd-preview] .cloud-auth-visual-copy h2 { color: white; font-size: clamp(36px, 4vw, 48px); line-height: 1.17; }
html[data-mezrd-preview] .cloud-auth-visual-copy p { color: var(--grey-200); font-size: 16px; line-height: 24px; }
html[data-mezrd-preview] .cloud-auth-panel { padding: var(--space-12) clamp(24px, 5vw, 80px); }
html[data-mezrd-preview] .cloud-auth-panel .cloud-auth-card { border: 0; box-shadow: none; }
html[data-mezrd-preview] .cloud-auth-card h1 { font-size: 32px; line-height: 40px; }
html[data-mezrd-preview] .cloud-auth-card p { color: var(--grey-600); }
html[data-mezrd-preview] .cloud-auth-field label { color: var(--mezrd-dark); font-weight: 600; }
html[data-mezrd-preview] .cloud-auth-field input,
html[data-mezrd-preview] .cloud-auth-field select { min-height: 44px; border-color: var(--grey-200); border-radius: var(--radius); }
html[data-mezrd-preview] .cloud-auth-field input:focus,
html[data-mezrd-preview] .cloud-auth-field select:focus { border-color: var(--mezrd-green); outline: 0; box-shadow: var(--focus-ring); }
html[data-mezrd-preview] .cloud-auth-primary,
html[data-mezrd-preview] .cloud-auth-secondary { border-radius: var(--radius); }
html[data-mezrd-preview] .cloud-auth-text-button { color: var(--mezrd-dark); text-decoration: underline; text-decoration-color: var(--mezrd-green); text-underline-offset: 3px; }
html[data-mezrd-preview] .cloud-auth-text-button:hover { color: var(--mezrd-dark-hover); }
html[data-mezrd-preview] #cloudAuthRoot .cloud-mfa-remember input[type="checkbox"] { accent-color: var(--mezrd-dark); }
html[data-mezrd-preview] .cloud-auth-divider::before,
html[data-mezrd-preview] .cloud-auth-divider::after { background: var(--grey-200); }
html[data-mezrd-preview] .cloud-auth-message,
html[data-mezrd-preview] .cloud-auth-preview-note { border-radius: var(--radius); background: var(--grey-100); color: var(--mezrd-dark) !important; }
html[data-mezrd-preview] .cloud-auth-message.error { background: #FEECEC; color: #A92727 !important; }
html[data-mezrd-preview] .cloud-auth-message.success { background: var(--mezrd-aqua); color: var(--mezrd-dark) !important; }
html[data-mezrd-preview] .cloud-auth-spinner { border-color: var(--grey-200); border-top-color: var(--mezrd-green); }
html[data-mezrd-preview] .cloud-delete-warning { border-radius: var(--radius); background: #FEECEC; color: #A92727; }

/* The read-only admin page uses the same tokens in the local preview. */
html[data-mezrd-preview] .admin-shell { max-width: 1320px; padding-bottom: var(--space-16); }
html[data-mezrd-preview] .admin-header { border-bottom-color: var(--grey-200); }
html[data-mezrd-preview] .admin-brand-name,
html[data-mezrd-preview] .admin-brand > .brand-mark { display: none; }
html[data-mezrd-preview] .admin-mezrd-brand { display: flex; align-items: center; gap: var(--space-2); color: var(--mezrd-dark); font-size: 23px; line-height: 1; font-weight: 750; letter-spacing: -.06em; }
html[data-mezrd-preview] .admin-mezrd-brand img { width: 36px; height: 36px; }
html[data-mezrd-preview] .admin-mezrd-brand small { margin-left: var(--space-2); padding-left: var(--space-3); border-left: 1px solid var(--grey-200); color: var(--grey-600); font-size: 11px; letter-spacing: .08em; }
html[data-mezrd-preview] .back-link { color: var(--mezrd-dark); text-decoration: underline; text-decoration-color: var(--mezrd-green); text-underline-offset: 3px; }
html[data-mezrd-preview] .eyebrow { color: #087C65; }
html[data-mezrd-preview] .intro { padding: var(--space-8) 0; }
html[data-mezrd-preview] .intro h1 { font-size: 32px; line-height: 40px; }
html[data-mezrd-preview] .intro p,
html[data-mezrd-preview] .section-heading p,
html[data-mezrd-preview] .accounts-head p,
html[data-mezrd-preview] .privacy-note { color: var(--grey-600); }
html[data-mezrd-preview] .read-only-tag { border-color: var(--grey-200); background: var(--grey-100); color: var(--grey-600); }
html[data-mezrd-preview] .gate-card,
html[data-mezrd-preview] .metric-card,
html[data-mezrd-preview] .accounts-panel { border: 1px solid var(--grey-200); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-card); }
html[data-mezrd-preview] .gate-card { padding: var(--space-6); }
html[data-mezrd-preview] .gate-symbol { color: var(--mezrd-green); }
html[data-mezrd-preview] .gate-card.error .gate-symbol,
html[data-mezrd-preview] .table-status.error { color: var(--error); }
html[data-mezrd-preview] .gate-card p,
html[data-mezrd-preview] .metric-card span,
html[data-mezrd-preview] .metric-card small,
html[data-mezrd-preview] .table-status,
html[data-mezrd-preview] .table-footer,
html[data-mezrd-preview] td small { color: var(--grey-600); }
html[data-mezrd-preview] .metrics { gap: var(--space-4); margin-bottom: var(--space-8); }
html[data-mezrd-preview] .metric-card { padding: var(--space-6); }
html[data-mezrd-preview] .metric-card strong { color: var(--mezrd-dark); font-size: 32px; font-weight: 700; }
html[data-mezrd-preview] .metric-card.attention strong { color: #8A5600; }
html[data-mezrd-preview] .refresh-button,
html[data-mezrd-preview] .table-footer button { min-height: 40px; border: 1px solid var(--grey-200); border-radius: var(--radius); background: white; color: var(--mezrd-dark); }
html[data-mezrd-preview] .refresh-button:hover,
html[data-mezrd-preview] .table-footer button:hover:not(:disabled) { background: var(--grey-100); }
html[data-mezrd-preview] .search-field input,
html[data-mezrd-preview] .status-field select { min-height: 44px; border-color: var(--grey-200); border-radius: var(--radius); color: var(--mezrd-dark); }
html[data-mezrd-preview] .search-field input:focus,
html[data-mezrd-preview] .status-field select:focus { border-color: var(--mezrd-green); outline: 0; box-shadow: var(--focus-ring); }
html[data-mezrd-preview] th { background: var(--grey-100); color: var(--grey-600); }
html[data-mezrd-preview] td { border-top-color: var(--grey-200); color: var(--mezrd-dark); }
html[data-mezrd-preview] td strong { color: var(--mezrd-dark); }
html[data-mezrd-preview] .count-pill,
html[data-mezrd-preview] .record-badge { border-radius: 9999px; background: var(--mezrd-aqua); color: var(--mezrd-dark); }
html[data-mezrd-preview] .record-badge.missing { background: #FFF4DE; color: #8A5600; }

@media (max-width: 1050px) {
  html[data-mezrd-preview] .shell,
  html[data-mezrd-preview] body[data-view="budgets"] .shell,
  html[data-mezrd-preview] body[data-view="assets"] .shell { grid-template-columns: 220px minmax(0, 1fr); }
  html[data-mezrd-preview] body[data-view="budgets"] aside,
  html[data-mezrd-preview] body[data-view="assets"] aside { grid-row: 1 / span 2; }
  html[data-mezrd-preview] body[data-view="budgets"] .budget-directory,
  html[data-mezrd-preview] body[data-view="assets"] .asset-directory { grid-column: 2; position: static; height: auto; max-height: 280px; overflow-y: auto; padding: var(--space-4); border: 1px solid var(--grey-200); border-radius: var(--radius); margin: var(--space-4) var(--space-6) 0; }
  html[data-mezrd-preview] body[data-view="budgets"] main,
  html[data-mezrd-preview] body[data-view="assets"] main { grid-column: 2; }
  html[data-mezrd-preview] .dashboard-main-grid,
  html[data-mezrd-preview] .dashboard-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  html[data-mezrd-preview] .shell,
  html[data-mezrd-preview] body[data-view="budgets"] .shell { display: block; }
  html[data-mezrd-preview] aside { position: relative; height: auto; min-height: 0; padding: var(--space-4); }
  html[data-mezrd-preview] .mezrd-brand { margin-bottom: var(--space-3); }
  html[data-mezrd-preview] aside nav { display: flex; gap: var(--space-2); overflow-x: auto; }
  html[data-mezrd-preview] aside nav button { min-width: max-content; margin: 0; }
  html[data-mezrd-preview] .sidebar-status { margin-top: var(--space-4); }
  html[data-mezrd-preview] .sidebar-user { margin-top: var(--space-3); }
  html[data-mezrd-preview] main { padding: var(--space-6) var(--space-4) var(--space-12); }
  html[data-mezrd-preview] body[data-view="budgets"] .budget-directory { margin: var(--space-4); }
  html[data-mezrd-preview] .cloud-auth-root { padding: var(--space-3); }
  html[data-mezrd-preview] .cloud-auth-layout { grid-template-columns: 1fr; min-height: calc(100dvh - 24px); }
  html[data-mezrd-preview] .cloud-auth-visual { min-height: 160px; }
  html[data-mezrd-preview] .cloud-auth-visual::before { top: var(--space-4); left: var(--space-4); height: 36px; padding-left: 48px; background-size: 36px 36px; font-size: 24px; }
  html[data-mezrd-preview] .cloud-auth-visual-copy { padding: 72px var(--space-4) var(--space-4); }
  html[data-mezrd-preview] .cloud-auth-visual-copy span { margin-bottom: var(--space-2); }
  html[data-mezrd-preview] .cloud-auth-visual-copy h2 { font-size: 24px; line-height: 32px; }
  html[data-mezrd-preview] .cloud-auth-visual-copy p { margin-top: var(--space-2); font-size: 13px; line-height: 20px; }
  html[data-mezrd-preview] .cloud-auth-panel { padding: var(--space-6) var(--space-4); }
}
@media (max-width: 600px) {
  html[data-mezrd-preview] .dashboard-cards,
  html[data-mezrd-preview] .dashboard-assets-side,
  html[data-mezrd-preview] .forecast-grid,
  html[data-mezrd-preview] .category-detail-cards { grid-template-columns: 1fr; }
  html[data-mezrd-preview] .dashboard-period-tabs { width: 100%; }
  html[data-mezrd-preview] .cloud-auth-name-row { grid-template-columns: 1fr 1fr; }
  html[data-mezrd-preview] #user .user-profile-strip { flex-wrap: wrap; }
  html[data-mezrd-preview] #user .user-header-stats { order: 3; width: 100%; margin-left: 0; gap: var(--space-4); }
  html[data-mezrd-preview] #user .user-compact-fields { grid-template-columns: 1fr; }
}