/* Budget Byron shared visual foundation.
   Loaded after page-specific CSS so equivalent UI elements converge on one
   product language without changing page structure or behaviour. */

:root{
  --font-ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-size-xs:.75rem;
  --font-size-sm:.8125rem;
  --font-size-md:.875rem;
  --font-size-base:1rem;
  --font-size-lg:1.125rem;
  --weight-regular:400;
  --weight-medium:600;
  --weight-semibold:700;
  --weight-bold:800;
  --control-height:42px;
  --control-height-compact:34px;
  --control-radius:10px;
  --surface-radius:14px;
  --nested-radius:12px;
  --ui-gap:10px;

  /* Semantic component colours are derived from the active theme. */
  --success-soft:color-mix(in srgb,var(--success) 12%,transparent);
  --success-border:color-mix(in srgb,var(--success) 32%,var(--border));
  --success-text:color-mix(in srgb,var(--success) 72%,var(--text));
  --warning-soft:color-mix(in srgb,var(--warning) 12%,transparent);
  --warning-border:color-mix(in srgb,var(--warning) 34%,var(--border));
  --warning-text:color-mix(in srgb,var(--warning) 74%,var(--text));
  --danger-soft:color-mix(in srgb,var(--danger) 11%,transparent);
  --danger-border:color-mix(in srgb,var(--danger) 34%,var(--border));
  --danger-text:color-mix(in srgb,var(--danger) 74%,var(--text));
  --info-soft:color-mix(in srgb,var(--primary) 11%,transparent);
  --info-border:color-mix(in srgb,var(--primary) 30%,var(--border));
  --info-text:var(--primary-soft-text);

  /* Defaults for built-in themes. Custom Theme supplies these dynamically. */
  --primary-contrast:#111111;
  --success-contrast:#111111;
  --danger-contrast:#111111;
  --warning-contrast:#111111;
  --nav-contrast:#ffffff;
}


/* Navigation foreground follows Custom Theme header contrast as well as colour. */
.topbar .brand,
.topbar .navlink,
.topbar .header-icon-link,
.topbar .account-toggle,
.topbar .header-customize,
.topbar .nav-toggle{
  color:color-mix(in srgb,var(--nav-contrast) 78%,transparent);
}

.topbar .brand,
.topbar .navlink.active,
.topbar .navlink:hover,
.topbar .header-icon-link:hover,
.topbar .header-icon-link.active,
.topbar .account-toggle:hover,
.topbar .account-toggle.active,
.topbar .header-customize:hover{
  color:var(--nav-contrast);
}

.topbar .nav-toggle,
.topbar .header-icon-link,
.topbar .account-toggle,
.topbar .header-customize,
.topbar .desktop-nav-links{
  border-color:color-mix(in srgb,var(--nav-contrast) 16%,transparent);
}

.topbar .btn.ghost{
  color:var(--nav-contrast);
  border-color:color-mix(in srgb,var(--nav-contrast) 22%,transparent);
}

.burger,
.burger::before,
.burger::after{background:color-mix(in srgb,var(--nav-contrast) 92%,transparent)}

/* Typography ------------------------------------------------------------- */
body{
  font-family:var(--font-ui);
  font-weight:var(--weight-regular);
  line-height:1.5;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

button,
input,
select,
textarea{
  font-family:inherit;
}

/* Financial/date values stay aligned without changing to a second typeface. */
.mono{
  font-family:inherit !important;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  letter-spacing:0;
}

h1{font-weight:var(--weight-bold)}
h2{font-weight:var(--weight-bold)}
h3{font-weight:var(--weight-semibold)}
h4{font-weight:var(--weight-semibold)}

.small{font-size:var(--font-size-sm)}

.panel-kicker,
.bb2-eyebrow{
  font-size:.6875rem !important;
  font-weight:var(--weight-bold) !important;
  letter-spacing:.07em !important;
  line-height:1.25;
  text-transform:uppercase;
}

.page-head>div:first-child>.muted,
.page-head>div:first-child>p,
.bb2-page-head p{
  font-size:var(--font-size-sm);
  line-height:1.55;
}

/* Surfaces --------------------------------------------------------------- */
.panel{
  border-radius:var(--surface-radius);
}

.card{
  border-radius:var(--nested-radius);
}

/* Nested UI should feel related to its parent, not like another dashboard. */
.income-stream-card,
.income-confirm-row,
.income-funding-row,
.income-planned-row,
.income-history-row,
.income-upcoming-row,
.smart-dialog-summary,
.smart-decision-row,
.monzo-pot-option,
.monzo-payday-rule,
.monzo-payday-ready,
.monzo-connection-setting-row,
.notification-device,
.admin-stat-card,
.admin-approval-card,
.admin-user-card{
  border-radius:var(--nested-radius);
}

/* Forms ------------------------------------------------------------------ */
label{
  font-size:var(--font-size-xs);
  font-weight:var(--weight-semibold);
  line-height:1.35;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
select,
textarea{
  min-height:var(--control-height);
  border-radius:var(--control-radius);
  border-color:rgba(var(--theme-border-rgb),.26);
  background:var(--theme-input);
  color:var(--text);
  font-size:var(--font-size-md);
  line-height:1.3;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):focus,
select:focus,
textarea:focus{
  border-color:rgba(var(--primary-rgb),.64);
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.14);
  outline:none;
}

input[type="checkbox"],
input[type="radio"]{
  accent-color:var(--primary);
}

/* Buttons ---------------------------------------------------------------- */
.btn{
  min-height:40px;
  padding:9px 13px;
  gap:6px;
  border-radius:var(--control-radius);
  font-size:var(--font-size-sm);
  font-weight:var(--weight-semibold);
  line-height:1.2;
  letter-spacing:0;
  box-shadow:none;
}

.btn.tiny{
  min-height:var(--control-height-compact);
  padding:7px 10px;
  border-radius:9px;
  font-size:var(--font-size-xs);
}

.btn.primary{
  color:var(--primary-contrast);
}

.btn.ok{
  color:var(--success-contrast);
}

.btn.danger{
  color:var(--danger-contrast);
}

.btn.gray{
  background:var(--theme-toolbar);
  border-color:rgba(var(--theme-border-rgb),.24);
  color:var(--text);
}

.btn.ghost{
  background:color-mix(in srgb,var(--theme-toolbar) 42%,transparent);
  border-color:rgba(var(--theme-border-rgb),.24);
}

.btn.ghost:hover{
  background:color-mix(in srgb,var(--theme-toolbar-hover) 72%,transparent);
  border-color:rgba(var(--theme-border-rgb),.34);
}

.danger-text{
  color:var(--danger-text) !important;
}

.btn.ghost.danger-text:hover,
.account-menu-logout:hover{
  border-color:var(--danger-border);
  background:var(--danger-soft);
  color:var(--danger-text) !important;
}

.account-menu-logout{
  color:var(--danger-text);
}

.icon-btn{
  display:inline-grid;
  place-items:center;
  width:36px;
  height:36px;
  min-width:36px;
  padding:0;
  border:1px solid rgba(var(--theme-border-rgb),.26);
  border-radius:var(--control-radius);
  background:var(--theme-toolbar);
  color:var(--muted);
  font:inherit;
  font-size:1.25rem;
  line-height:1;
  cursor:pointer;
}

.icon-btn:hover{
  background:var(--theme-toolbar-hover);
  color:var(--text);
}

/* Status, alerts and badges --------------------------------------------- */
.alert{
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:var(--nested-radius);
  background:color-mix(in srgb,var(--theme-card) 82%,transparent);
  color:var(--text);
  font-size:var(--font-size-sm);
  line-height:1.45;
}

.alert.ok{
  border-color:var(--success-border);
  background:var(--success-soft);
  color:var(--success-text);
}

.alert.bad{
  border-color:var(--danger-border);
  background:var(--danger-soft);
  color:var(--danger-text);
}

.app-alert{margin-bottom:14px}

.badge,
.due-badge,
.tag,
.admin-status-chip,
.income-pill,
.joint-feature-pill,
.monzo-default-tag{
  font-weight:var(--weight-semibold);
  letter-spacing:0;
}

.badge.ok,
.due-badge.ok{
  background:var(--success-soft);
  border-color:var(--success-border);
  color:var(--success-text);
}

.badge.warn,
.due-badge.warn{
  background:var(--warning-soft);
  border-color:var(--warning-border);
  color:var(--warning-text);
}

.due-badge.bad{
  background:var(--danger-soft);
  border-color:var(--danger-border);
  color:var(--danger-text);
}

.due-badge.neutral,
.due-badge.paid-ahead{
  background:var(--info-soft);
  border-color:var(--info-border);
  color:var(--info-text);
}

.income-hero-status.warning,
.income-status-buffer-risk,
.income-pill-warning{
  color:var(--warning);
}

.income-pill-warning{
  border-color:var(--warning-border);
  background:var(--warning-soft);
}

.bb2-attention{
  border-color:var(--warning-border);
}

.bb2-attention-icon{
  background:var(--warning-soft);
  color:var(--warning);
}

.bb2-money-icon-in{
  background:var(--success-soft);
}

.bb2-money-icon-out{
  background:var(--danger-soft);
}

.joint-plan-warning,
.monzo-bills-pot-warning,
.transactions-bulk-warning{
  border-color:var(--warning-border);
  background:var(--warning-soft);
}

/* Tables ----------------------------------------------------------------- */
thead th{
  font-size:var(--font-size-xs);
  font-weight:var(--weight-bold);
  letter-spacing:.015em;
}

tbody td{
  font-size:var(--font-size-sm);
}

tbody tr:hover{
  background:color-mix(in srgb,var(--primary) 9%,transparent);
}

/* Disclosure components ------------------------------------------------- */
:is(
  .money-ahead-snapshot,
  .income-legacy-panel,
  .income-optional-panel,
  .income-protection-details,
  .smart-history-review,
  .smart-learning-tools,
  .smart-decision-history,
  .payment-history-panel,
  .smart-schedule-fields,
  .monzo-manage-details,
  .monzo-connection-settings,
  .monzo-rule-editor,
  .monzo-bills-pot-included,
  .notification-advanced-timing,
  .bb2-form-more,
  .bb2-bills-details,
  .joint-contribution-plan,
  .monzo-plan-inline-editor
){
  position:relative;
  border:1px solid rgba(var(--theme-border-rgb),.24);
  border-radius:var(--nested-radius);
  background:color-mix(in srgb,var(--theme-card) 76%,transparent);
  overflow:hidden;
  margin:0;
  transition:margin .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

:is(
  .money-ahead-snapshot,
  .income-legacy-panel,
  .income-optional-panel,
  .income-protection-details,
  .smart-history-review,
  .smart-learning-tools,
  .smart-decision-history,
  .payment-history-panel,
  .smart-schedule-fields,
  .monzo-manage-details,
  .monzo-connection-settings,
  .monzo-rule-editor,
  .monzo-bills-pot-included,
  .notification-advanced-timing,
  .bb2-form-more,
  .bb2-bills-details,
  .joint-contribution-plan,
  .monzo-plan-inline-editor
)>summary{
  color:var(--text);
  font-size:var(--font-size-sm);
  font-weight:var(--weight-semibold);
  line-height:1.35;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}

:is(
  .money-ahead-snapshot,
  .income-legacy-panel,
  .income-optional-panel,
  .income-protection-details,
  .smart-history-review,
  .smart-learning-tools,
  .smart-decision-history,
  .payment-history-panel,
  .smart-schedule-fields,
  .monzo-manage-details,
  .monzo-connection-settings,
  .monzo-rule-editor,
  .monzo-bills-pot-included,
  .notification-advanced-timing,
  .bb2-form-more,
  .bb2-bills-details,
  .joint-contribution-plan,
  .monzo-plan-inline-editor
)>summary:hover{
  background:color-mix(in srgb,var(--primary) 5%,transparent);
}

:is(
  .money-ahead-snapshot,
  .income-legacy-panel,
  .income-optional-panel,
  .income-protection-details,
  .smart-history-review,
  .smart-learning-tools,
  .smart-decision-history,
  .payment-history-panel,
  .smart-schedule-fields,
  .monzo-manage-details,
  .monzo-connection-settings,
  .monzo-rule-editor,
  .monzo-bills-pot-included,
  .notification-advanced-timing,
  .bb2-form-more,
  .bb2-bills-details,
  .joint-contribution-plan,
  .monzo-plan-inline-editor
)[open]{
  margin:8px;
  border-color:color-mix(in srgb,var(--primary) 36%,rgba(var(--theme-border-rgb),.24));
  background:linear-gradient(180deg,color-mix(in srgb,var(--theme-card) 93%,var(--primary) 7%),color-mix(in srgb,var(--surface) 94%,var(--primary) 6%));
  box-shadow:0 12px 28px color-mix(in srgb,var(--primary) 10%,transparent),0 0 0 1px color-mix(in srgb,var(--primary) 10%,transparent) inset;
}

:is(
  .money-ahead-snapshot,
  .income-legacy-panel,
  .income-optional-panel,
  .income-protection-details,
  .smart-history-review,
  .smart-learning-tools,
  .smart-decision-history,
  .payment-history-panel,
  .smart-schedule-fields,
  .monzo-manage-details,
  .monzo-connection-settings,
  .monzo-rule-editor,
  .monzo-bills-pot-included,
  .notification-advanced-timing,
  .bb2-form-more,
  .bb2-bills-details,
  .joint-contribution-plan,
  .monzo-plan-inline-editor
)[open]>summary{
  border-bottom-color:rgba(var(--theme-border-rgb),.20);
  background:color-mix(in srgb,var(--primary) 4%,transparent);
}

:is(
  .income-form-more,
  .monzo-plan-breakdown,
  .monzo-payday-add,
  .monzo-payday-advanced,
  .monzo-payday-transfer-bills
){
  border-radius:var(--nested-radius);
  transition:background-color .18s ease,box-shadow .18s ease,border-color .18s ease;
}

:is(
  .income-form-more,
  .monzo-plan-breakdown,
  .monzo-payday-add,
  .monzo-payday-advanced,
  .monzo-payday-transfer-bills
)[open]{
  background:color-mix(in srgb,var(--primary) 4%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--primary) 16%,transparent) inset;
}

/* Payment History sits beneath the date-correction card, so keep a clear
   external gap while still using the shared inset-on-open interaction. */
.payment-history-panel{margin:14px 0 0}
.payment-history-panel[open]{margin:14px 8px 8px}

/* Compact disclosure links keep their smaller hierarchy. */
.income-form-more>summary,
.monzo-plan-breakdown>summary,
.monzo-payday-add>summary,
.monzo-payday-advanced>summary,
.monzo-payday-transfer-bills>summary{
  font-size:var(--font-size-xs);
  font-weight:var(--weight-semibold);
}

/* Dialogs ---------------------------------------------------------------- */
dialog.dialog,
dialog.income-dialog{
  border:0;
  border-radius:var(--surface-radius);
  color:var(--text);
  box-shadow:0 24px 70px rgba(0,0,0,.42);
}

dialog.dialog::backdrop,
dialog.income-dialog::backdrop{
  background:rgba(3,7,18,.68);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

.dialog-body,
dialog.income-dialog{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid rgba(var(--theme-border-rgb),.28);
  border-radius:var(--surface-radius);
}

.dialog-body,
.income-dialog:not(.income-dialog-compact)>form,
.income-dialog-compact{
  padding:20px;
}

.income-dialog-compact>form{padding:0}

.dialog h2,
.dialog h3,
.income-dialog h2,
.income-dialog h3{
  margin-top:0;
}

.dialog .actions,
.income-dialog-actions{
  gap:8px;
}

/* Public/auth pages ------------------------------------------------------ */
.auth-shell{
  width:min(760px,100%);
  margin:0 auto;
  display:grid;
  gap:16px;
}

.banner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding:4px 2px 2px;
}

.banner>div:first-child{min-width:0}
.banner h1{margin-bottom:7px}
.banner .sub{color:var(--muted);font-size:var(--font-size-sm);line-height:1.5}
.banner .actions{flex:0 0 auto}
.page-card{padding:20px}
.auth-form{width:100%;max-width:560px}
.auth-form-compact{max-width:520px}

.public-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.public-feature-card{padding:16px;box-shadow:none}
.public-feature-title{margin-top:6px;font-size:var(--font-size-base);font-weight:var(--weight-bold)}
.public-feature-copy{margin-top:6px}
.public-banner-actions{margin:10px}
.actions-top-space{margin-top:14px}

/* Small utilities replacing one-off inline presentation styles. */
.full-width{width:100%}
.mobile-menu-logout{width:100%}
.mobile-menu-logout .btn{width:100%}
.bb2-bulk-col{width:42px}
.bulk-error-spacer{margin-right:auto}
.bulk-row-last{border-bottom:0;padding-bottom:0}
.dialog-compact-panel{padding:14px}
.dialog-list{margin:0;padding-left:18px}
.income-settings-note{margin-top:12px}
.income-settings-save{margin-top:14px}

/* A few equivalent component labels had drifted into 9-10px territory. Keep
   compact metadata compact, but legible and consistent. */
.admin-status-chip,
.admin-tab-count,
.monzo-default-tag,
.joint-feature-pill,
.runway-lowest-pill{
  font-size:.6875rem;
}

.income-stream-meta span,
.income-pill,
.monzo-manage-details>summary small,
.monzo-connection-settings>summary small,
.monzo-rule-editor>summary small,
.monzo-bills-pot-included>summary small,
.smart-history-review summary small,
.smart-learning-tools summary small,
.smart-decision-history summary small{
  font-size:var(--font-size-xs);
}

/* Mobile keeps the same component language, only the layout changes. */
@media(max-width:720px){
  .banner{
    align-items:flex-start;
    flex-direction:column;
    gap:13px;
  }
  .banner .actions{width:100%}
  .banner .actions .btn{flex:1}
  .public-feature-grid{grid-template-columns:1fr}
  .dialog-body,
  .income-dialog:not(.income-dialog-compact)>form,
  .income-dialog-compact{padding:17px}
  .income-dialog-compact>form{padding:0}
  :is(
    .money-ahead-snapshot,
    .income-legacy-panel,
    .income-optional-panel,
    .income-protection-details,
    .smart-history-review,
    .smart-learning-tools,
    .smart-decision-history,
    .payment-history-panel,
    .smart-schedule-fields,
    .monzo-manage-details,
    .monzo-connection-settings,
    .monzo-rule-editor,
    .monzo-bills-pot-included,
    .notification-advanced-timing,
    .bb2-form-more,
    .bb2-bills-details,
    .joint-contribution-plan,
    .monzo-plan-inline-editor
  )[open]{margin:6px}
  .payment-history-panel[open]{margin:14px 6px 6px}
}

/* Type roles -------------------------------------------------------------
   Page-specific styles historically used many near-identical numeric weights
   and tiny metadata sizes. Map equivalent roles onto the shared scale while
   retaining deliberate hierarchy between hero values, titles and helper text. */
:is(
  .account-name,
  .notification-settings-link,
  .runway-primary-label,
  .runway-day-intraday,
  .joint-plan-member label,
  .transactions-bulk-edit-toggle,
  .calendar-day-metrics,
  .calendar-context-date strong,
  .calendar-event-filter,
  .monzo-review-tabs a,
  .monzo-payday-advanced>summary,
  .monzo-payday-transfer-bills>summary,
  .monzo-payday-override span,
  .income-form-more>summary,
  .income-protection-details>summary,
  .income-stream-meta span,
  .income-pill,
  .custom-theme-status,
  .theme-note
){font-weight:var(--weight-semibold)}

:is(
  .cards .v,
  .runway-status,
  .runway-primary-value,
  .runway-chart-title,
  .runway-money-input>span,
  .joint-feature-pill,
  .joint-member em,
  .income-hero-amount,
  .income-stream-value,
  .income-core-amount,
  .income-core-status,
  .financial-calculation-result,
  .money-ahead-window-title span,
  .money-ahead-window-result,
  .admin-stat-card>span,
  .admin-status-chip,
  .monzo-default-tag,
  .calendar-weekdays>span,
  .calendar-week-weekday,
  .calendar-bill-name
){font-weight:var(--weight-bold)}

/* Compact text never drops below the shared 11px metadata tier unless it is
   a purely decorative/count badge. */
:is(
  .notification-item-time,
  .notification-menu-head span,
  .runway-primary-stats span,
  .runway-chart-payday span,
  .runway-chart-axis small,
  .runway-fact small,
  .runway-fact em,
  .runway-lowest-pill,
  .runway-day-balance small,
  .runway-event-copy small,
  .budget-account-toggle-copy small,
  .budget-account-menu-label,
  .budget-account-option small,
  .budget-account-menu-link small,
  .joint-feature-pill,
  .joint-privacy-grid small,
  .joint-step-head small,
  .joint-security-note,
  .joint-cycle-setup-head small,
  .joint-bill-picker-head,
  .joint-bill-choice-copy small,
  .joint-member small,
  .joint-member em,
  .joint-member-remove,
  .joint-live-dot,
  .joint-activity-copy>span,
  .joint-empty-activity small,
  .joint-overview-money span,
  .joint-overview-meta,
  .admin-tab-count,
  .admin-user-activity small,
  .admin-user-settings label>span,
  .monzo-history-copy>small,
  .monzo-balance-breakdown span,
  .monzo-pot-copy small,
  .monzo-payday-transfer small,
  .monzo-payday-transfer>span>small,
  .monzo-bills-pot-coverage span,
  .monzo-bills-pot-coverage small,
  .monzo-bills-pot-shortfall small,
  .monzo-bills-pot-actions small,
  .monzo-bills-pot-detection-head small,
  .monzo-bills-pot-detection-meta span,
  .monzo-bills-pot-detection-review-link small,
  .monzo-balance-refresh small,
  .monzo-plan-window small,
  .monzo-plan-transfer-main small,
  .monzo-plan-breakdown>summary,
  .monzo-plan-breakdown-list>div,
  .monzo-rule-link small,
  .monzo-rule-editor>summary small,
  .monzo-rule-editor>summary>span:last-child:not(.btn),
  .monzo-connection-setting-row small,
  .monzo-fixed-amount-field>small,
  .monzo-plan-transfer-copy>small,
  .monzo-default-tag,
  .monzo-bills-pot-config-head>small,
  .monzo-bills-pot-included>summary small,
  .monzo-bills-pot-breakdown-total,
  .monzo-bills-pot-funding-choice>div>small,
  .monzo-bills-pot-funding-note,
  .income-funding-target small,
  .income-history-main span,
  .custom-theme-editor-head span,
  .custom-picker-heading span,
  .custom-colour-name,
  .custom-colour-note,
  .custom-colour-hex,
  .custom-picker-value,
  .custom-picker-sliders label,
  .custom-hex-label>span,
  .custom-preview-panel>strong,
  .custom-preview-panel>span,
  .custom-contrast,
  .theme-note,
  .preference-note
){font-size:.6875rem}

:is(.bb2-label,.setup-tour-kicker,.admin-stat-card>span){
  font-size:.6875rem;
  font-weight:var(--weight-bold);
  letter-spacing:.07em;
  text-transform:uppercase;
}

.badge,
.due-badge,
.tag,
.income-pill{
  font-size:var(--font-size-xs);
}

/* Native colour inputs and literal hex values are intentionally technical. */
.custom-hex-row input[type="text"]{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-variant-numeric:normal;
}

/* Theme-safe neutral UI --------------------------------------------------
   Neutral chrome follows the selected theme too. Fixed black/white remains
   only where it is part of glass/shadow rendering or third-party branding. */
label{color:var(--muted)}

input::placeholder,
textarea::placeholder{
  color:color-mix(in srgb,var(--muted) 70%,transparent);
}

select option{color:var(--text)}
select option:checked,
select option:hover{color:var(--primary-contrast)}

.mnav,
.account-menu-link,
.customize-item .label{
  color:color-mix(in srgb,var(--text) 84%,transparent);
}

.mnav:hover,
.mnav.active,
.account-menu-link:hover,
.account-menu-link.active{
  color:var(--text);
}

.notification-clear,
.notification-empty-icon{
  color:var(--primary-soft-text);
}

.notification-item-copy strong,
.notification-menu-empty strong{
  color:var(--text);
}

.notification-item-body,
.notification-item-time,
.notification-dismiss,
.notification-menu-state,
.notification-menu-empty,
.notification-settings-link{
  color:var(--muted);
}

.income-stream-meta span,
.income-pill{
  border-color:rgba(var(--theme-border-rgb),.22);
  background:color-mix(in srgb,var(--theme-toolbar) 56%,transparent);
}

.income-pill-warning{
  border-color:var(--warning-border);
  background:var(--warning-soft);
}

.financial-calculation-row{
  border-color:rgba(var(--theme-border-rgb),.18);
}

.notification-invite-btn{
  border-color:rgba(var(--theme-border-rgb),.24);
  background:var(--theme-toolbar);
  color:var(--text);
}

.notification-invite-btn:hover:not(:disabled){
  border-color:rgba(var(--theme-border-rgb),.36);
  background:var(--theme-toolbar-hover);
}

@media(max-width:900px){
  .public-feature-grid{grid-template-columns:1fr}
}

.cards .k{color:var(--muted)}
.chip{color:var(--text)}
.account-name{color:var(--nav-contrast)}
.account-avatar{color:var(--primary-contrast)}

.topbar .notification-toggle[aria-expanded="true"]{color:var(--nav-contrast)}
.notification-clear:hover,
.notification-settings-link:hover{color:var(--text)}

.panel.hideable>.hide-btn,
.panel.hideable>.drag-handle,
.panel.hideable.has-top-action>.row-between>:last-child.btn,
.panel.hideable.has-top-action>.row-between>:last-child .btn,
.card>.card-drag-handle{
  color:var(--text) !important;
}

.runway-setup-visual{
  background:linear-gradient(
    180deg,
    rgba(var(--primary-rgb),.12),
    color-mix(in srgb,var(--theme-card) 34%,transparent)
  );
}


/* Push delivery health: visible only when this device needs attention. */
.push-health-banner{
  width:min(1180px,calc(100% - 28px));
  margin:14px auto 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 12px;
  border:1px solid color-mix(in srgb,var(--danger) 34%,var(--border));
  border-radius:13px;
  background:color-mix(in srgb,var(--danger) 7%,var(--surface));
  box-shadow:0 8px 22px color-mix(in srgb,var(--danger) 8%,transparent);
}
.push-health-banner[hidden]{display:none}
.push-health-banner-copy{display:flex;align-items:center;gap:10px;min-width:0}
.push-health-banner-copy>span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.push-health-banner-copy strong{font-size:12px;line-height:1.35}
.push-health-banner-copy small{font-size:10px;line-height:1.45;color:var(--muted)}
.push-health-banner-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px;border-radius:999px;background:color-mix(in srgb,var(--danger) 16%,transparent);color:var(--danger);font-size:12px;font-weight:900}
.push-health-banner-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
@media(max-width:620px){
  .push-health-banner{align-items:stretch;flex-direction:column;width:calc(100% - 20px);margin-top:10px}
  .push-health-banner-actions{width:100%}
  .push-health-banner-actions .btn{flex:1}
}