/* Cash Note · Water & Light
   Approved login direction, shared by existing screens. No data/layout machinery.
   Keep semantic expense/warning colors and account-specific custom colors intact. */
:root {
  --water-sky: #72c0e5;
  --water-ink: #123b53;
  --water-muted: #587489;
  --water-line: #d8e7ef;
  --water-soft: #edf7fc;
  --water-hover: #d3eaf7;
  --water-selected-hover: #bcdff2;
  --water-raised: 0 5px 16px #226b9112;
  --water-card-shadow: none;
  --water-ease: cubic-bezier(.22, 1, .36, 1);
  --action-gradient: linear-gradient(170deg, #66c9eb 0%, #29a8dc 40%, #0786c9 100%);
  --bg: #f3f9fc;
  --surface-muted: #edf7fc;
  --ink: #173c52;
  --muted: #587489;
  --line: #d8e7ef;
  --cashnote-blue: #1683c3;
  --cashnote-navy: #123b53;
  --cashnote-border: #d8e7ef;
  --cashnote-muted: #587489;
  --shadow: var(--water-card-shadow);
}
body { -webkit-font-smoothing: antialiased; }
/* Keep the category marker away from the hover surface's rounded edge. */
#dashboardView #categoryBars .dashboard-stat-row,
.dashboard-categories-dialog .dashboard-stat-row {
  padding-inline: 12px;
  box-sizing: border-box;
  border-radius: 10px;
}
#dashboardView #categoryBars .dashboard-stat-row:is(:hover, :focus-visible),
.dashboard-categories-dialog .dashboard-stat-row:is(:hover, :focus-visible) {
  background-color: var(--water-hover);
  transform: none;
}
button, input, select, textarea { font-family: inherit; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid #1683c3; outline-offset: 3px;
}

/* The logo is a real asset, never a text X. Decorative lenses use a raster asset
   while the existing collision engine continues to own their transforms. */
.login-scene { background: #ecf8fd; padding: clamp(20px, 5vw, 64px); }
.login-shell {
  width: min(1328px, 100%); min-height: min(880px, calc(100dvh - 128px));
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr);
  border: 0; border-radius: 28px;
  box-shadow: 0 24px 70px #287a9f24;
}
.login-intro, .login-intro.has-orb-motion { background: var(--water-sky); padding: 52px; }
.login-intro-orbs, .has-orb-motion > .login-intro-orbs { display: block; }
.login-intro-orb {
  background: url('../assets/water-lens.png') center / contain no-repeat;
  border-radius: 0; opacity: .82;
}
.login-intro-orb:nth-child(1) { width: 103%; left: -35%; top: -15%; }
.login-intro-orb:nth-child(2) { width: 56%; left: 68%; top: -18%; }
.login-intro-orb:nth-child(3) { width: 56%; left: -34%; top: 60%; }
.login-intro-orb:nth-child(4) { width: 102%; left: 66%; top: 56%; }
.login-intro-orb:nth-child(5) { width: 45%; left: 17%; top: 76%; }
.login-brand-lockup { gap: 14px; }
.login-brand-lockup img { width: 72px; height: 72px; border-radius: 20px; box-shadow: none; }
.login-brand-lockup strong { font-size: 25px; letter-spacing: -.5px; }
.login-brand-lockup span { font-size: 14px; font-weight: 600; }
.login-intro-copy { margin-top: auto; margin-bottom: auto; max-width: 100%; gap: 22px; padding: 50px 0; }
.login-intro-copy h2 { font-size: clamp(34px, 3.1vw, 48px); line-height: 1.22; letter-spacing: -1.7px; color: #082f46; }
.login-intro-copy p { white-space: normal; color: #245770; font-size: 15px; line-height: 1.8; font-weight: 550; }
.login-intro-copy .login-kicker { padding: 9px 18px; color: #15445c; background: #ffffff59; border: 0; box-shadow: none; }
.login-intro-feature { margin-top: 0; padding: 22px; border-radius: 20px; border: 0; background: #ffffff94; }
.login-intro-feature-icon { width: 46px; height: 46px; flex-basis: 46px; border-radius: 13px; box-shadow: var(--water-raised); }
.login-intro-feature span { font-size: 12px; }
.login-intro-feature strong { font-size: 16px; }
.login-card { padding: 64px clamp(32px, 4.4vw, 66px) 64px clamp(32px, 6vw, 90px); gap: 17px; align-content: center; }
.login-card-heading { margin-bottom: 12px; }
.login-card h1 { font-size: 30px; font-weight: 800; line-height: 1.25; letter-spacing: -.8px; }
.login-card-description { font-size: 13.5px; line-height: 1.8; color: #587489; }
.login-card .login-field { gap: 9px; }
.login-input-wrap { display: flex; position: relative; width: 100%; align-items: center; }
.login-input-wrap > svg { position: absolute; left: 16px; width: 20px; height: 20px; color: #69899e; pointer-events: none; }
.login-card .login-input-wrap input { padding: 14px 44px; height: 52px; border-radius: 12px; border: 1px solid #cbdfea; background: #fbfdff; box-shadow: inset 0 2px 5px #163e5710; font-size: 14px; }
.login-card input::placeholder { color: #8195a5; }
.login-card input:focus { outline: none; border-color: #1683c3; box-shadow: 0 0 0 3px #1683c31a, inset 0 1px 3px #163e5708; background: #fff; }
.login-card .login-password-toggle { position: absolute; right: 4px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #587489; cursor: pointer; }
.login-password-toggle svg { width: 20px; height: 20px; }
.login-card .login-password-toggle:hover { background: #eaf5fb; }
.login-card .login-text-button { justify-self: end; font-size: 12px; }
.login-remember-control { margin: 0; }
.login-card .login-submit-button { height: 54px; min-height: 54px; margin-top: 3px; font-size: 17px; }
.login-card .oauth-section { margin-top: 3px; gap: 16px; }
.oauth-provider-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.oauth-provider-buttons .oauth-button { min-height: 44px; padding: 10px 12px; border-radius: 10px; font-size: 12px; gap: 9px; box-shadow: none; }
.oauth-button .oauth-icon { width: 20px; height: 20px; flex: 0 0 20px; font-size: 20px; }
.oauth-icon img { display: block; width: 20px; height: 20px; object-fit: contain; }
.oauth-provider-buttons .oauth-button.google { background: #fff; color: #1f1f1f; border-color: #747775; }
.oauth-provider-buttons .oauth-button.naver { background: #03a94d; border-color: #03a94d; color: #fff; }
.oauth-divider { font-size: 12px; color: #587489; }
.oauth-divider::before, .oauth-divider::after { background: #d5e4ed; }
.login-helper-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 6px; padding-top: 19px; border-top: 1px solid #d5e4ed; }
.login-helper-actions .login-reset-button { border: 0; border-radius: 0; min-height: 28px; padding: 4px 10px; color: #087fbf; background: transparent; font-size: 13px; }
.login-helper-actions .login-reset-button + .login-reset-button { border-left: 1px solid #cbdfea; }

/* Shared controls: soft depth is reserved for actions, not every data cell. */
body .primary-button,
#investmentsView .primary-button, #supportView .primary-button, #insightsView .primary-button,
#appShell .page-action-group > button.page-action--primary,
#settingsView button.primary-button, .settings-dialog button.primary-button,
#adminView button.primary-button {
  color: #fff; background: var(--action-gradient); border: 0;
  border-radius: 12px; font-weight: 700;
  box-shadow: 0 6px 16px #0985c329;
}
body .primary-button:hover:not(:disabled),
#investmentsView .primary-button:hover:not(:disabled), #supportView .primary-button:hover:not(:disabled), #insightsView .primary-button:hover:not(:disabled),
#appShell .page-action-group > button.page-action--primary:hover:not(:disabled),
#settingsView button.primary-button:hover:not(:disabled), #adminView button.primary-button:hover:not(:disabled) {
  background: var(--action-gradient); box-shadow: 0 9px 22px #0985c332; filter: brightness(1.04);
}
body .primary-button:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 2px 7px #0985c328; }
body .primary-button:disabled { opacity: .5; box-shadow: none; cursor: not-allowed; }
.secondary-button, .mini-button, #settingsView button,
#appShell .page-action-group > button.page-action--secondary,
#appShell .month-control button {
  border-color: transparent; border-radius: 11px; color: var(--water-ink);
  background: #eaf4fa; box-shadow: none; font-weight: 650;
}
.secondary-button:hover:not(:disabled), .mini-button:hover:not(:disabled),
#appShell .page-action-group > button.page-action--secondary:hover:not(:disabled),
#appShell .month-control button:hover { background: #eaf6fc; border-color: transparent; }
body :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]) {
  border-color: #cbdfe9; border-radius: 10px; color: #173c52;
  background-color: #fbfdff; box-shadow: inset 0 1px 3px #194e6808;
  transition: border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}
body :is(input, select, textarea):focus-visible { outline: 2px solid #1683c3; outline-offset: 2px; }
input[type=checkbox], input[type=radio] { accent-color: #1683c3; }
.modal-backdrop { background-color: #123b534f; backdrop-filter: blur(5px); }
body :is(.goal-modal, .modal-panel, .transaction-modal, .recurring-transaction-modal, .transaction-export-modal, .transaction-excel-modal, .settings-dialog),
#monthlyAnalysisDialog, #adminRecordDialog {
  background: #fff; color: var(--water-ink); border-color: #d5e7f0;
  box-shadow: 0 24px 80px #173c5233, inset 0 1px 0 #fff;
}
.modal-close-button, #monthlyAnalysisDialog .ma-close {
  color: #315c73; background: #f5fbfe; border: 1px solid #d9e8f0;
  box-shadow: var(--water-raised); border-radius: 11px;
}
.modal-close-button:hover { color: #0b6fa5; background: #e6f4fc; }
.goal-modal-icon, .ma-popup-icon { background: #eaf7fd; color: #1683c3; box-shadow: var(--water-raised); }
dialog::backdrop { background: #123b5355; backdrop-filter: blur(5px); }

/* Desktop workspace — retain every existing route, filter and data grouping. */
@media (min-width: 761px) {
  body { background: #f0f8fc; color: #173c52; font-family: 'Pretendard', 'Noto Sans KR', 'Malgun Gothic', 'Segoe UI', sans-serif; }
  #appShell.app-shell { max-width: none; background: #fff; }
  #appShell > .content { padding: 0 clamp(22px, 2.5vw, 44px) 56px; background: #fff; }
  #appShell > .sidebar { background: var(--water-sky); border-right: 1px solid #b7deee; }
  #appShell .sidebar .brand-mark { box-shadow: none; border: 0; background: transparent; border-radius: 16px; }
  #appShell .sidebar .brand-mark img { width: 100%; height: 100%; }
  #appShell .sidebar .brand strong { font-weight: 750; font-size: 20px; }
  #appShell .sidebar .brand span:not(.brand-mark) { font-weight: 550; }
  #appShell .sidebar .nav-item, #appShell .sidebar .nav-subitem { color: #154761; font-weight: 650; border-radius: 12px; }
  #appShell .sidebar .nav-item.active, #appShell .sidebar .nav-subitem.active { color: #0a5682; background: #ffffffeb; box-shadow: inset 0 1px 0 #fff, 0 5px 12px #29688817; }
  #appShell .sidebar .nav-submenu { border-radius: 13px; background: #ffffff26; }
  #appShell .sidebar-orbs .login-intro-orb { opacity: .45; }
  #appShell .topbar { min-height: 100px; padding: 24px 0 20px; margin-bottom: 24px; background: #fff; border-bottom: 0; }
  #appShell .ledger-scope-summary { padding-left: 0; }
  #appShell .ledger-scope-summary strong { color: #234e66; font-size: 16px; font-weight: 700; }
  #appShell #mainTitle { color: #123b53; font-size: 28px; font-weight: 750; letter-spacing: -.7px; }
  #appShell #mainSubtitle { color: #5f7b8d; line-height: 1.7; }
  #appShell .month-control strong { color: #234e66; font-weight: 700; }
  #appShell .page-action-group > button.page-action { font-size: 14px; font-weight: 700; }
  #appShell .panel { background-color: #fff; border: 0; border-radius: 18px; box-shadow: none; }
  #appShell .panel-heading h2 { color: #173f56; font-weight: 700; font-size: 16px; letter-spacing: -.3px; }
  #appShell .panel-heading span { color: #627e90; }
  #appShell .panel-heading { margin-bottom: 22px; }
  #appShell .content strong { font-weight: 700; }
  #appShell :is(.dashboard-grid, .work-grid) { gap: 22px; }
  #dashboardView, #transactionsView, #budgetsView { padding-top: 0; }
  #dashboardView .dashboard-hero-card { padding: 30px; border: 0; background: #e5f5fc; background-image: url('../assets/water-lens.png'); background-repeat: no-repeat; background-size: 410px; background-position: right -240px top -210px; }
  #dashboardView .dashboard-hero-copy > span { font-size: 15px; font-weight: 600; color: #315e78; }
  #dashboardView .dashboard-hero-copy > strong { color: #103e59; font-size: clamp(32px, 3vw, 42px); font-weight: 750; letter-spacing: -1.4px; }
  #dashboardView .dashboard-hero-copy > small { color: #587489; font-size: 12px; }
  #dashboardView .dashboard-hero-flow { background: #ffffffa6; border: 0; border-radius: 16px; box-shadow: none; }
  #dashboardView .dashboard-hero-flow strong { font-weight: 750; }
  #dashboardView .mobile-dashboard-quick-actions { display: none; }
  #dashboardView .dashboard-heading-link { font-weight: 600; color: #087ab5; }
  #dashboardView :is(.dashboard-stat-row, .dashboard-recent-item, .dashboard-money-point) { border-color: #e7eff4; }
  #dashboardView :is(.dashboard-recent-item, .dashboard-stat-row):hover { background: #f1f9fd; }
  #dashboardView .dashboard-analysis-preview { background: #eaf7fc; }

  /* Calendar, registered transactions, budgets and investment tables. */
  #transactionsView .transaction-calendar-panel { padding: 22px; }
  #transactionsView :is(.calendar-day, .transaction-calendar-day) { border-color: #dae9f1; border-radius: 12px; }
  #transactionsView :is(.history-group, .transaction-filter-panel) { border-color: #dce9f0; }
  #transactionsView :is(.history-group-heading, .history-date-heading) { color: #234e66; background: #f0f8fc; }
  #transactionsView :is(.history-item, .transaction-row):hover { background-color: #f0f9fd; }
  #budgetsView.budget-approved-screen :is(.budget-summary-strip, .budget-board-support > section, .budget-chart-panel, .budget-chart-container),
  #budgetDetailView .budget-analysis-metric { border-color: #d5e8f1; border-radius: 16px; box-shadow: var(--water-card-shadow); }
  #budgetsView.budget-approved-screen .budget-summary-strip { background: #eaf7fd; }
  #budgetsView.budget-approved-screen .budget-summary-title h2 { color: #173f56; font-weight: 700; }
  #budgetsView.budget-approved-screen .budget-summary-metrics article strong { color: #117eb8; font-weight: 750; }
  #budgetsView.budget-approved-screen .budget-summary-metrics article strong.danger { color: #bd493f; }
  #budgetDetailView :is(.budget-analysis-summary, .budget-analysis-transactions-panel) { border-color: #d8e7ef; }
  #investmentsView :is(.metric-card, .holding-card, .dividend-summary) { border-color: #d8e7ef; border-radius: 16px; box-shadow: var(--water-card-shadow); }
  #appShell :is(th, .table-columns, .history-columns) { background-color: #eff7fb; color: #5a778a; }

  /* Accounts keep their individual identifying colors; surrounding UI is sky. */
  #moneyMapView .money-map-section-tabs { background: #e4f1f8; border: 1px solid #d9e9f2; border-radius: 14px; padding: 5px; }
  #moneyMapView .money-map-section-tab { color: #42657b; font-weight: 650; }
  #moneyMapView .money-map-section-tab.active { background: var(--action-gradient); color: #fff; box-shadow: 0 4px 10px #1683c326; }
  #moneyMapView :is(.approved-pay-group, .approved-flow-item) { border: 0; border-radius: 16px; box-shadow: none; }
  #moneyMapView .approved-bank-heading { background: #edf7fc; }
  #moneyMapView .approved-flow-item.is-expanded { border-color: #79bbdc; }
  #moneyMapView .approved-flows .approved-flow-item.is-expanded .approved-flow-row { background: #edf8fe; }
  #moneyMapView .approved-flow-day { background: #1683c3; box-shadow: inset 0 1px 0 #ffffff50, 0 3px 8px #1683c320; border-radius: 12px; }
  #moneyMapView .approved-flows button.secondary-button { color: #137fb7; border-color: #a9cfe3; background: #fff; box-shadow: var(--water-raised); }
  #moneyMapView .approved-flows button.approved-flow-disclosure { color: #137fb7; }
  #moneyMapView .approved-flow-path > strong { font-weight: 700; color: #1d455e; }
  #moneyMapView :is(.approved-flow-amount, .approved-payment-name > strong) { color: #1d455e; }

  /* Analysis, support and settings use the same calm surfaces. */
  #insightsView :is(.insight-card, .insights-card, .analysis-card, .analysis-summary-card, .ma-card) { border-color: #d8e7ef; border-radius: 18px; box-shadow: var(--water-card-shadow); background-color: #fff; }
  #supportView :is(.support-ticket-card, .support-thread, .support-sidebar, .support-detail, .support-list-panel) { border-color: #d8e7ef; border-radius: 16px; background-color: #fff; }
  #supportView :is(.support-ticket-card.active, .support-ticket-card.selected) { border-color: #5db2db; background: #e9f6fd; }
  #settingsView .settings-b-layout { max-width: 1050px; padding-top: 10px; }
  #settingsView .settings-b-heading h1 { color: #123b53; }
  #settingsView .settings-b-section { border-color: #d8e7ef; }
  #settingsView .settings-editor-inner { background: #edf7fc; border-radius: 14px; border-color: #d8e7ef; }
  #settingsView .settings-members-card { border-color: #d8e7ef; border-radius: 18px; box-shadow: var(--water-card-shadow); }
  #settingsView button.settings-text-button { background: transparent; box-shadow: none; color: #1683c3; }

  /* Admin is part of the same website, with readable light-mode status colors. */
  #appShell > main.content.admin-page {
    --adm-bg: #f3f9fc; --adm-panel: #fff; --adm-line: #d8e7ef;
    --adm-ink: #173c52; --adm-muted: #587489; --adm-accent: #147fb7;
    --text: #173c52; --muted: #587489; --border: #d8e7ef;
    padding-top: 26px; background: var(--adm-bg); color: var(--adm-ink);
  }
  #adminView :is(.adm-panel, .adm-metrics article, .adm-metrics .adm-metric-button) { border-radius: 16px; box-shadow: var(--water-card-shadow); }
  #adminView button:not(.primary-button):not(.admin-tab):not(.adm-row) { background: #fff; color: #234e66; border-color: #d8e7ef; }
  #adminView :is(input, select, textarea) { color-scheme: light; background: #fbfdff; color: #173c52; border-color: #cbdfe9; }
  #adminView :is(.adm-table-head, .adm-grains, .adm-metrics .adm-metric-button[aria-pressed=true]) { background: #e8f5fc; color: #42657b; }
  #adminView :is(.adm-row:hover, .adm-metrics .adm-metric-button:hover) { background: #edf8fd; }
  #adminView .adm-grains button[aria-pressed=true] { background: #d6edf9; color: #0e6999; }
  #adminView .adm-success { color: #147453; }
  #adminView .adm-finance-value.median { color: #147fb7; }
  #adminView .adm-avatar { color: #17678f; background: #dceffa; }
  #adminView #adminNoticesPanel :is(.notice-item, .checkbox-label) { background: #f7fbfd; color: #234e66; }
  #adminRecordDialog { background: #fff; color: #173c52; }
  #adminRecordDialog dt { color: #587489; }
}

@media (min-width: 921px) {
  #appShell.app-shell { grid-template-columns: 256px minmax(0, 1fr); }
  #appShell > .sidebar { padding: 28px 16px 22px; }
  #appShell .sidebar .brand { gap: 8px; margin-bottom: 32px; padding: 0; }
  #appShell .sidebar .brand-mark { flex: 0 0 56px; width: 56px; height: 56px; }
  #appShell .sidebar .nav-item { min-height: 48px; }
  #appShell .sidebar .nav-subitem { min-height: 43px; }
  #appShell .sidebar .nav-submenu > .nav-subitem:nth-last-child(1 of .nav-subitem:not([hidden])) { background: transparent; box-shadow: none; }
}
@media (min-width: 1280px) {
  #dashboardView .dashboard-hero-card { grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); }
}
@media (min-width: 761px) and (max-width: 1450px) {
  #dashboardView .dashboard-hero-card { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
/* Borderless content rhythm, requested after the first implementation preview.
   Do not clear focus rings, validation boundaries or colored account identities. */
@media (min-width: 761px) {
  #appShell :is(.panel, .metric-card, .approved-bank-group, .approved-flow-item, .approved-detail-stats > div, .approved-flow-stats > div,
    .support-ticket-card, .support-thread, .support-list-panel, .support-detail-panel,
    .settings-members-card, .settings-editor-inner, .budget-analysis-metric) {
    border: 0; box-shadow: none;
  }
  #moneyMapView .approved-flows .approved-flow-item { border: 0; background: #fff; box-shadow: none; }
  #moneyMapView .approved-flows .approved-flow-row { border: 0; border-radius: 12px; }
  #moneyMapView .approved-flows .approved-flow-stats > div { border: 0; background: #e9f5fb; }
  #moneyMapView .approved-pay-group { border: 0; box-shadow: none; background: #fff; }
  #moneyMapView .approved-pay-group + .approved-pay-group { margin-top: 24px; }
  #moneyMapView .approved-payment-detail footer { border: 0; background: #edf7fc; }
  #moneyMapView .money-map-section-tabs,
  #moneyMapView:has(#moneyMapTabFlows:not([hidden])) .money-map-section-tabs { border: 0; background: #e5f1f8; box-shadow: none; }
  #moneyMapView:has(#moneyMapTabFlows:not([hidden])) .money-map-section-tab.active { background: var(--action-gradient); }
  #moneyMapView .approved-flows .approved-flow-day { background: #1683c3; }
  #moneyMapView :is(.approved-flows, .approved-pay) button.secondary-button { border: 0; background: #eaf5fb; box-shadow: none; }
  #budgetsView.budget-approved-screen :is(.budget-summary-strip, .budget-board-support > section),
  #budgetDetailView.budget-approved-screen :is(.budget-analysis-metric, .budget-analysis-summary, .budget-analysis-transactions-panel) { border: 0; box-shadow: none; }
  #settingsView :is(.settings-members-card, .settings-editor-inner) { border: 0; box-shadow: none; }
  #adminView :is(.adm-panel, .adm-metrics article, .adm-metrics .adm-metric-button, .adm-metrics.compact) { border: 0; box-shadow: none; }
  #budgetsView.budget-approved-screen :is(.budget-chart, .budget-chart-board, .budget-card) { border: 0; box-shadow: none; }
  #budgetsView.budget-approved-screen .budget-chart { border-radius: 18px; }
  #budgetsView.budget-approved-screen .budget-chart-board { background: #fff; }
  #budgetsView.budget-approved-screen .budget-card { border-radius: 16px; background: #fff; }
  #budgetsView.budget-approved-screen .budget-card:hover { background: #f8fcff; }
  #budgetsView.budget-approved-screen .budget-board-toolbar { background: transparent; }
  #budgetsView.budget-approved-screen .budget-board-tabs { border: 0; border-radius: 13px; padding: 4px; background: #e5f1f8; }
  #budgetsView.budget-approved-screen .budget-board-tab { border: 0; border-radius: 10px; background: transparent; color: #42657b; font-weight: 650; }
  #budgetsView.budget-approved-screen .budget-board-tab.active { background: #fff; color: #087eb9; box-shadow: 0 2px 5px #286b8e0d; }
  #appShell .page-action-group > button.page-action--secondary, #appShell .month-control button { border-color: transparent; box-shadow: none; }
}
/* A shared grid keeps all five data columns evenly spaced and dates intact. */
@media (min-width: 1241px) {
  #dashboardView #recentTransactions { overflow-x: auto; }
  #dashboardView :is(.dashboard-recent-columns, .dashboard-recent-item) {
    min-width: 580px;
    grid-template-columns: 34px repeat(5, minmax(0, 1fr));
    column-gap: 12px;
  }
  #dashboardView .dashboard-recent-item > :nth-child(5) { white-space: nowrap; }
  #dashboardView .dashboard-recent-item > :nth-child(3) {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}
/* Interactive content has an inset hit surface. Do not pad every button:
   icon-only actions, calendar cells, graph geometry and colored accounts keep
   their own dimensions. Existing roomy rows keep their original padding. */
#dashboardView :is(.dashboard-budget-row, .dashboard-money-point, .dashboard-recent-item, .dashboard-recent-columns),
#budgetDetailView .budget-analysis-breakdown-row,
#monthlyAnalysis :is(.ma-category, .ma-budget-alert),
#monthlyAnalysisDialog .ma-ranked-item,
#insightsView > .ma-legacy > summary,
#adminView .adm-row {
  padding-inline: 12px;
  box-sizing: border-box;
}
#dashboardView :is(.dashboard-budget-row, .dashboard-money-point, .dashboard-recent-item),
#monthlyAnalysis :is(.ma-category, .ma-budget-alert),
#monthlyAnalysisDialog .ma-ranked-item { border-radius: 10px; }
@media (min-width: 761px) {
  #dashboardView .dashboard-budget-row {
    grid-template-columns: clamp(90px, 12%, 144px) minmax(24px, 1fr) 38px max-content;
    gap: 12px;
  }
  #dashboardView .dashboard-budget-amounts { text-align: right; }
  #dashboardView .dashboard-budget-amounts strong { white-space: nowrap; }
  #dashboardView .dashboard-budget-row > * { grid-column: auto; }
  #dashboardView .dashboard-budget-amounts { display: grid; gap: 4px; justify-content: end; }
  #dashboardView .dashboard-category-panel .dashboard-stat-row {
    grid-template-columns: clamp(90px, 12%, 128px) minmax(40px, 1fr) minmax(96px, auto);
    column-gap: 12px;
  }
  #monthlyAnalysis .ma-category {
    grid-template-columns: minmax(120px, 1fr) minmax(110px, .65fr) minmax(180px, 1fr) 16px;
    column-gap: 20px;
  }
  #settingsView .settings-b-section { column-gap: 24px; }
}
@media (min-width: 1151px) {
  #moneyMapView :is(.approved-flow-columns, .approved-flow-item .approved-flow-row) {
    grid-template-columns: 52px minmax(150px, 1fr) clamp(90px, 10vw, 144px) 124px 76px 78px 76px;
    column-gap: 16px;
  }
  #moneyMapView .approved-flow-amount { white-space: nowrap; }
  #adminView :is(.adm-table-head, .adm-row):not(.signups) { column-gap: 16px; }
}

/* The same visible, borderless feedback across the workspace and dialogs. */
#dashboardView :is(.dashboard-budget-row, .dashboard-money-point, .dashboard-recent-item, .dashboard-stat-row-action):is(:hover, :focus-visible),
#transactionsView .history-item.transaction-history-card.transaction-table-row:is(:hover, :focus-within),
#budgetDetailView .budget-analysis-breakdown-row:is(:hover, :focus-visible),
#budgetsView.budget-approved-screen :is(.clickable-budget-card, .budget-card, .budget-risk-item, .budget-add-tile):is(:hover, :focus-visible),
#moneyMapView :is(.approved-payment-row, .approved-flow-item .approved-flow-row):is(:hover, :focus-visible),
#moneyMapView .approved-flows .approved-flow-item.is-expanded .approved-flow-row:is(:hover, :focus-visible),
#investmentsView .investment-picker-card:is(:hover, :focus-visible),
#insightsView :is(.review-list-item, .insight-extra-item, .insight-check-row, .goal-item):is(:hover, :focus-visible),
#monthlyAnalysis :is(.ma-category, .ma-budget-alert):is(:hover, :focus-visible),
#monthlyAnalysisDialog :is(.ma-ranked-item, .ma-popup-action):is(:hover, :focus-visible),
#insightsView > .ma-legacy > summary:is(:hover, :focus-visible),
#supportView :is(.support-user-ticket-card, .support-admin-ticket, .support-faq-list summary):is(:hover, :focus-visible),
#adminView :is(.adm-row, .adm-metrics .adm-metric-button):is(:hover, :focus-visible) {
  background: var(--water-hover);
  transform: none;
}
#investmentsView .investment-picker-card.selected-row:is(:hover, :focus-visible),
#budgetDetailView .budget-analysis-breakdown-row.is-selected:is(:hover, :focus-visible) {
  background: var(--water-selected-hover);
}
/* Retain account-specific colors, selected dates, and warning/danger semantics. */
#moneyMapView .money-point-registry-card:is(:hover, :focus-visible) {
  background-color: color-mix(in srgb, var(--node-color, #1683c3) 18%, white);
}
#transactionsView .calendar-day:not(.active):not(.is-today):not(.outside-day):is(:hover, :focus-visible) { background-color: var(--water-hover); }
#appShell .sidebar :is(.nav-item, .nav-subitem):not(.active):is(:hover, :focus-visible) { background: #ffffffb5; }
#appShell .sidebar :is(.nav-item, .nav-subitem).active:is(:hover, :focus-visible) { background: #fff; }
#appShell .page-action-group > button.page-action--secondary:is(:hover, :focus-visible),
#appShell .month-control button:is(:hover, :focus-visible),
#settingsView button:not(.primary-button):not(.danger):is(:hover, :focus-visible),
.settings-dialog button:not(.primary-button):not(.danger):is(:hover, :focus-visible),
#moneyMapView :is(.approved-flows, .approved-pay) button.secondary-button:is(:hover, :focus-visible) {
  background: var(--water-hover);
}
@media (prefers-reduced-motion: no-preference) {
  #appShell :is(.history-item, .approved-payment-row, .approved-flow-row, .money-point-registry-card, .calendar-day) {
    transition: background-color 240ms var(--water-ease), box-shadow 240ms var(--water-ease), color 240ms var(--water-ease);
  }
}
/* Distinguish key summaries, labels and selected states without outlines. */
@media (min-width: 761px) {
  #appShell .panel-heading h2 { color: #10374e; font-size: 18px; font-weight: 750; }
  #appShell .panel-heading :is(span, p), #appShell #mainSubtitle { color: #4e687a; }
  #dashboardView .dashboard-hero-card { background-color: #cceafa; }
  #dashboardView .dashboard-hero-flow { background-color: #fff; }
  #dashboardView .dashboard-panel-footer { background: #e8f2f8; border: 0; border-radius: 10px; padding: 12px; }
  #dashboardView :is(.dashboard-category-columns, .dashboard-recent-columns),
  #transactionsView .transaction-table-columns,
  #moneyMapView .approved-flow-columns {
    background: #e5eff6; color: #34566d; border: 0; border-radius: 8px; font-weight: 700;
  }
  #dashboardView .dashboard-category-columns { padding-inline: 12px; }
  #moneyMapView .approved-flow-columns { padding-block: 10px; margin-bottom: 8px; }
  #budgetsView.budget-approved-screen .budget-summary-strip,
  #moneyMapView .approved-flows .approved-flow-stats > div,
  #insightsView .ma-allocation { background: #dceff9; border: 0; box-shadow: none; }
  #transactionsView .transaction-overview-card {
    background: #e5f2fa !important; border: 0; box-shadow: none; border-radius: 14px;
  }
  #transactionsView .transaction-overview-card.expense { background: #fff0ed !important; }
  #transactionsView .transaction-overview-card.saving { background: #e8f3ef !important; }
  #transactionsView .transaction-overview-card[aria-pressed="true"],
  #transactionsView .transaction-overview-card.net.login-gradient-card[aria-pressed="true"] {
    background: #c6e6f7 !important; box-shadow: 0 5px 14px #195c811a;
  }
  #transactionsView .transaction-overview-card.net.login-gradient-card[aria-pressed="false"] { background: #e5f2fa !important; }
  #transactionsView .transaction-overview-card > div > span { color: #355568; }
  #transactionsView .calendar-day.active,
  #transactionsView .calendar-day.active.has-transactions {
    background: #ceeafa; border-color: transparent; box-shadow: none;
  }
  #transactionsView .calendar-day.is-today:not(.active) { background: #fff0b8; border-color: transparent; }
  #moneyMapView .approved-bank-heading { background: #e0eef7; color: #123b53; }
  #settingsView .settings-b-section > header h2 { color: #10374e; font-weight: 750; }
}
@media (max-width: 1100px) and (min-width: 981px) {
  .login-intro { padding: 36px; }
  .login-card { padding: 45px 32px; }
  .login-intro-copy h2 { font-size: 34px; }
}
@media (max-width: 980px) {
  .login-shell { width: min(640px, 100%); grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .login-intro { padding: 30px; }
  .login-intro-copy { margin: 24px 0 0; padding: 0; gap: 12px; }
  .login-intro-copy h2 { font-size: 32px; }
  .login-intro-feature { display: none; }
  .login-card { padding: 34px; }
}
@media (max-width: 520px) {
  .login-scene { padding: 16px; }
  .login-shell { border-radius: 22px; }
  .login-intro { padding: 25px; }
  .login-brand-lockup img { width: 54px; height: 54px; }
  .login-brand-lockup strong { font-size: 21px; }
  .login-brand-lockup span { font-size: 11px; }
  .login-intro-copy h2 { font-size: 29px; letter-spacing: -1px; }
  .login-card { padding: 28px 22px; gap: 15px; }
  .login-card h1 { font-size: 26px; }
  .oauth-provider-buttons .oauth-button { padding: 10px 7px; gap: 6px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .login-intro.has-orb-motion { background: var(--water-sky); }
  .login-intro > .login-intro-orbs { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
  :is(#appShell, #loginScene, .modal-backdrop, .settings-dialog) :is(button, a, summary, [role="button"]),
  #settingsView button {
    transition: background-color 240ms var(--water-ease), border-color 240ms var(--water-ease), color 240ms var(--water-ease), box-shadow 300ms var(--water-ease), transform 240ms var(--water-ease), opacity 220ms var(--water-ease), filter 240ms var(--water-ease);
  }
  .view.active-view:not(#moneyMapView),
  #moneyMapView .money-map-section-panel.active,
  .admin-tab-panel:not([hidden]) {
    animation-duration: 320ms;
    animation-timing-function: var(--water-ease);
  }
}