/* Shared graphic language for reports, lists and account-management dialogs. */
body { --page-accent: var(--brand-purple-ink); --page-fill: var(--brand-purple); --page-tint: var(--brand-purple-tint); --page-symbol: #fff; }
body:has(#view-operations.active), body:has(#view-accounts.active) { --page-accent: var(--brand-blue-ink); --page-fill: var(--brand-blue); --page-tint: var(--brand-blue-tint); }
body:has(#view-debts.active) { --page-accent: var(--brand-yellow-ink); --page-fill: var(--brand-yellow); --page-tint: var(--brand-yellow-tint); --page-symbol: var(--brand-yellow-symbol); }
html:has(.view.active:not(#view-dashboard)), body:has(.view.active:not(#view-dashboard)) { background: #fafbfe; }
.topbar:not(.dashboard-header) { min-height: 68px; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid #e1e6ec; }
.topbar:not(.dashboard-header) .topbar-title { flex: 1; min-width: 0; gap: 10px; }
.topbar:not(.dashboard-header) h1 { font-size: 23px; font-weight: 650; line-height: 1.2; overflow-wrap: anywhere; }
.topbar:not(.dashboard-header) .app-wordmark { font-size: 12px; color: #7b8590; }
.page-symbol { display: grid; place-items: center; order: 1; margin-left: auto; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--page-fill); color: var(--page-symbol); }
.page-symbol svg { display: none; width: 22px; height: 22px; stroke-width: 1.8; }
.dashboard-header .page-symbol { display: none; }
body:has(#view-operations.active) .symbol-operations, body:has(#view-analytics.active) .symbol-analytics,
body:has(#view-debts.active) .symbol-debts, body:has(#view-settings.active) .symbol-settings,
body:has(#view-accounts.active) .symbol-accounts { display: block; }
body:has(#view-profiles.active) .symbol-settings { display: block; }
.view:not(#view-dashboard) { padding-bottom: 24px; }
.view:not(#view-dashboard) h2 { font-size: 18px; font-weight: 650; }
.view:not(#view-dashboard) input:not([type="checkbox"]), .view:not(#view-dashboard) select,
dialog:not(.navigation-drawer) input:not([type="checkbox"]), dialog:not(.navigation-drawer) select { min-height: 46px; border-color: #dce2e9; border-radius: 6px; background: #fff; }
.view:not(#view-dashboard) label, dialog:not(.navigation-drawer) label { gap: 7px; color: #586575; font-size: 13px; }
.view:not(#view-dashboard) :is(input, select):focus, dialog:not(.navigation-drawer) :is(input, select):focus { border-color: var(--page-accent); box-shadow: 0 0 0 3px var(--page-tint); }
.view:not(#view-dashboard) .primary-action, .entity-compose button[type="submit"] { min-height: 46px; border-radius: 6px; background: var(--page-accent); color: #fff; font-weight: 600; }
#view-debts .primary-action { background: var(--page-fill); color: var(--page-symbol); }
.scope-label { line-height: 1.5; }
.view:not(#view-dashboard) .text-action { color: var(--page-accent); }
.view:not(#view-dashboard) .icon-button { box-shadow: none; border-radius: 6px; }

/* Operations keep filters close to a quiet, scan-friendly ledger. */
.upcoming-strip { margin-bottom: 22px; padding-bottom: 16px; }
.upcoming-strip h2 { display: flex; align-items: center; gap: 10px; }
.upcoming-strip h2 svg { width: 34px; height: 34px; flex: 0 0 34px; padding: 7px; border-radius: 50%; background: var(--brand-yellow); color: var(--brand-yellow-symbol); }
.upcoming-strip .text-action { display: grid; place-items: center; width: 44px; }
.upcoming-strip .text-action svg { width: 20px; height: 20px; }
#view-operations .toolbar { gap: 10px; }
#view-operations .history-filters { margin: 12px 0; padding: 0 0 8px; border-bottom: 1px solid #e1e6ec; }
.history-filters summary { color: var(--brand-blue-ink); font-weight: 600; min-height: 44px; }
.history-filters .form-grid { padding-top: 8px; }
.operation-row { border: 0; border-bottom: 1px solid #e1e6ec; border-radius: 0; box-shadow: none; background: transparent; padding: 16px 0; gap: 10px; grid-template-columns: minmax(0,1fr) auto; }
.operation-row h3, .operation-meta { overflow-wrap: anywhere; }
.operation-row h3 { font-weight: 600; line-height: 1.4; }
.operation-meta { line-height: 1.5; }
.operation-row .amount { font-size: 16px; font-weight: 650; }
.row-actions:empty { display: none; }
.row-actions button { display: grid; place-items: center; width: 44px; height: 44px; color: var(--brand-blue-ink); border: 0; background: #eaf5fc; border-radius: 6px; padding: 10px; }
.row-actions button svg { width: 20px; height: 20px; }
.table-list { gap: 0; }
@media (min-width: 601px) {
  .operation-row { grid-template-columns: minmax(0,1fr) auto 44px; align-items: center; gap: 16px; }
  .operation-row .row-actions { grid-column: 3; grid-row: 1; }
}

/* Reports use color to distinguish totals, not to frame whole sections. */
.analytics-filter { padding-bottom: 22px; border-bottom: 1px solid #e1e6ec; gap: 16px; }
.analytics-sections .analytics-check { padding: 8px 10px; border-radius: 6px; gap: 10px; }
.analytics-check:has(input:checked) { background: var(--brand-purple-tint); }
.analytics-check input { accent-color: var(--brand-purple-ink); }
#analytics-section-options { gap: 4px 8px; }
.analytics-sections > .analytics-check { width: fit-content; margin-bottom: 4px; }
#analytics-report > .section-head { margin-top: 24px; }
#year-net { font-size: 23px; font-weight: 650; font-variant-numeric: tabular-nums; }
#view-analytics .metric { border: 0; border-left: 3px solid #d8c3ec; background: #f0ebf7; border-radius: 0; padding: 16px; }
#view-analytics .metric.accent-green { border-color: #4b997a; background: #e9f5ef; }
#view-analytics .metric.accent-red { border-color: #d18b96; background: #f9edef; }
#view-analytics .metric.accent-blue { border-color: var(--brand-blue); background: #eaf4fb; }
#view-analytics .metric span { min-height: 34px; margin-bottom: 10px; font-size: 13px; line-height: 1.4; }
#view-analytics .metric strong { font-size: 23px; font-weight: 650; line-height: 1.25; font-variant-numeric: tabular-nums; }
.analytics-unit { background: #f0ebf7; padding: 3px; border: 0; border-radius: 6px; }
.analytics-unit button { min-height: 38px; border: 0; border-radius: 4px; color: var(--brand-purple-ink); }
.analytics-unit button[aria-pressed="true"] { background: var(--brand-purple-ink); color: white; }
.analytics-forecast { padding-block: 20px; }
.analytics-forecast h3 { color: var(--brand-purple-ink); }
.analytics-forecast dd { font-variant-numeric: tabular-nums; }
.year-month { box-shadow: none; border-radius: 6px; border-color: #e1e6ec; padding: 14px; }
.year-month strong { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.year-table-wrap { border-radius: 6px; box-shadow: none; border-color: #e1e6ec; }
.year-table th { background: #f0ebf7; color: #59426f; }

/* Debts and planned payments are lists first; creation stays one tap away. */
.entity-row { border: 0; border-left: 3px solid var(--brand-yellow); border-radius: 0; box-shadow: none; padding: 14px 16px; gap: 6px; }
.entity-row h3 { line-height: 1.4; overflow-wrap: anywhere; font-weight: 600; }
.entity-row p { line-height: 1.5; overflow-wrap: anywhere; }
.entity-row progress { width: 100%; height: 6px; accent-color: var(--brand-yellow); border: 0; border-radius: 3px; overflow: hidden; }
.entity-row progress::-webkit-progress-bar { background: var(--brand-yellow-tint); }
.entity-row progress::-webkit-progress-value { background: var(--brand-yellow); }
.entity-compose { margin: 12px 0 30px; border-block: 1px solid #e1e6ec; }
.entity-compose summary { display: flex; align-items: center; gap: 10px; list-style: none; min-height: 54px; color: var(--brand-yellow-ink); font-weight: 600; }
.entity-compose summary::-webkit-details-marker { display: none; }
.entity-compose summary svg { width: 20px; height: 20px; flex: 0 0 20px; }
.entity-compose summary svg:last-child { margin-left: auto; }
.entity-compose[open] summary svg:last-child { transform: rotate(180deg); }
.entity-compose .inline-form { margin: 0; padding: 6px 0 20px; border: 0; border-radius: 0; box-shadow: none; background: transparent; gap: 16px; }

.more-links button { display: grid; grid-template-columns: 42px minmax(0,1fr) 20px; align-items: center; gap: 14px; padding: 20px 0; min-height: 86px; font-size: 15px; font-weight: 500; line-height: 1.45; }
.more-links button:hover { background: #f0ebf7; }
.more-links button > svg { width: 18px; height: 18px; color: #929ba6; }
.setting-symbol { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: white; }
.setting-symbol svg { width: 22px; height: 22px; stroke-width: 1.8; }
.setting-blue { background: var(--brand-blue); }.setting-pink { background: var(--brand-pink); }.setting-purple { background: var(--brand-purple); }
#view-accounts .account-card { position: relative; background: #fff; border: 1px solid #e1e6ec; box-shadow: none; padding: 20px 12px; }
#view-accounts .account-icon { border-radius: 50%; background: #617888; color: white; }
#view-accounts .account-masha .account-icon { background: var(--brand-pink); }
#view-accounts .account-nikita .account-icon { background: var(--brand-blue); }
#view-accounts .account-cafe .account-icon { background: var(--brand-yellow); color: var(--brand-yellow-symbol); }
#view-accounts .account-card .catalog-tool { position: absolute; top: 4px; right: 4px; }
#view-accounts .account-card h3 { margin-top: 8px; overflow-wrap: anywhere; }
#view-accounts .account-card strong { font-size: 20px; font-weight: 650; }

/* Setup and reconciliation share the same field rhythm without nested cards. */
#setup-dialog { --page-accent: var(--brand-pink-ink); --page-fill: var(--brand-pink); --page-tint: var(--brand-pink-tint); }
#quick-dialog, #account-dialog, #edit-dialog { --page-accent: var(--brand-blue-ink); --page-fill: var(--brand-blue); --page-tint: var(--brand-blue-tint); }
dialog:not(.navigation-drawer) { border: 1px solid #e1e6ec; }
/* Keep mobile input focus from zooming the page and shifting dialog controls. */
@media (max-width: 600px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
}
dialog:not(.navigation-drawer) h2 { font-size: 20px; line-height: 1.3; font-weight: 650; }
dialog:not(.navigation-drawer) :is(.section-head, .dialog-head) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid #e1e6ec; }
dialog:not(.navigation-drawer) :is(.section-head, .dialog-head) h2 { min-width: 0; margin: 0; overflow-wrap: anywhere; }
#setup-title, #quick-title, #account-title { display: flex; align-items: center; gap: 10px; }
#setup-title::before, #quick-title::before, #account-title::before { content: ''; width: 8px; height: 24px; flex: 0 0 8px; border-radius: 4px; background: var(--page-fill); }
#setup-balances { margin-top: 20px; gap: 16px; }
#setup-balances label { padding: 12px 0; border-top: 1px solid #e1e6ec; }
#setup-dialog fieldset { padding-top: 16px; border-top: 1px solid #e1e6ec; }
#setup-dialog input[type="checkbox"] { accent-color: var(--brand-pink-ink); min-height: 18px; }
#setup-next, #quick-form > .primary-action, #account-form > .primary-action, #edit-form button[type="submit"] { background: var(--page-accent); color: #fff; font-weight: 600; border-radius: 6px; }
#setup-back, #edit-cancel { background: var(--page-tint); color: var(--page-accent); }
#edit-delete { background: #f9edef; color: #a33447; }
#quick-dialog .money-route { border: 0; border-radius: 6px; background: #eaf4fb; color: var(--brand-blue-ink); }
#quick-dialog .amount-input input { border: 0; background: #fafbfe; border-bottom: 2px solid #b9dcee; border-radius: 0; }
#quick-dialog .amount-keypad button { border-radius: 6px; box-shadow: none; background: #f3f7fa; color: #25303b; }
#quick-dialog .segmented button.active { background: var(--brand-blue-ink); color: white; }

@media (max-width: 600px) {
  .topbar:not(.dashboard-header) { gap: 8px; min-height: 58px; margin-bottom: 18px; }
  .topbar:not(.dashboard-header) h1 { font-size: 20px; }
  .topbar:not(.dashboard-header) .app-wordmark { display: none; }
  .topbar:not(.dashboard-header) .topbar-title { gap: 8px; }
  .page-symbol { width: 36px; height: 36px; flex-basis: 36px; }
  #view-operations .toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #search-input { grid-column: 1 / -1; }
  .analytics-filter > label, .analytics-filter > .primary-action { max-width: none; }
  .analytics-metrics-head { align-items: flex-start; flex-wrap: wrap; }
  #view-analytics .metric { padding: 12px; }
  #view-analytics .metric strong, #year-net { font-size: 20px; }
  .operation-row { grid-template-columns: minmax(0,1fr) 44px; align-items: center; }
  .operation-row .operation-main { grid-column: 1 / -1; }
  .operation-row .amount { grid-column: 1; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .operation-row .row-actions { grid-column: 2; justify-self: end; }
  .entity-compose .inline-form { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 420px) {
  #accounts-list { grid-template-columns: minmax(0,1fr); }
  #view-accounts .account-card { grid-template-columns: 44px minmax(0,1fr) 36px; gap: 8px 12px; align-items: center; justify-items: start; text-align: left; padding: 16px 12px; }
  #view-accounts .account-icon { grid-column: 1; grid-row: 1 / 4; width: 44px; height: 44px; }
  #view-accounts .account-card h3 { grid-column: 2; grid-row: 1; margin: 0; }
  #view-accounts .account-card strong { grid-column: 2 / 4; grid-row: 2; margin: 0; max-width: 100%; }
  #view-accounts .account-card p { grid-column: 2 / 4; grid-row: 3; margin: 0; }
  #view-accounts .account-card .catalog-tool { position: static; grid-column: 3; grid-row: 1; width: 36px; height: 36px; }
}

.profile-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 18px 0 28px; }
.profile-choice { display: flex; gap: 12px; align-items: center; min-width: 0; padding: 14px; border: 1px solid #e1e6ec; border-radius: 8px; background: white; color: #25303b; text-align: left; }
.profile-choice[aria-pressed="true"] { border-color: var(--flow-color); background: var(--flow-tint); }
.profile-choice > span:last-child { min-width: 0; }
.profile-choice strong, .profile-item strong { display: block; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.profile-choice small, .profile-item small { display: block; color: #667085; font-size: 12px; margin-top: 5px; }
.profile-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--flow-fill); color: var(--flow-symbol); }
.profile-avatar svg { width: 22px; height: 22px; }
#profile-detail { border-top: 1px solid #e1e6ec; padding-top: 20px; }
#profile-catalog-tabs { width: fit-content; max-width: 100%; flex-wrap: wrap; background: var(--flow-tint); }
#profile-catalog-tabs button { color: var(--flow-color); }
#profile-catalog-tabs button[aria-pressed="true"] { background: var(--flow-color); color: white; }
.profile-catalog-tools { display: flex; justify-content: space-between; align-items: center; min-height: 58px; gap: 12px; margin-top: 12px; }
.profile-catalog-tools label { display: flex; align-items: center; gap: 10px; }
.profile-catalog-tools input { width: 18px; height: 18px; min-height: 18px; accent-color: var(--flow-color); }
.profile-catalog-tools label[hidden] { display: none; }
.profile-item { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #e1e6ec; }
.profile-item-actions { display: flex; gap: 4px; }
.profile-item-actions .icon-button { width: 44px; min-width: 44px; height: 44px; }
.profile-item-delete { color: #b32632; }
.profile-item-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--flow-tint); color: var(--flow-color); }
.profile-item-icon svg { width: 20px; height: 20px; }
.profile-item .icon-button svg, #view-profiles .icon-button svg { width: 20px; height: 20px; }
.profile-colors { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.profile-colors label { position: relative; display: grid; place-items: center; width: 100%; min-height: 44px; cursor: pointer; }
.profile-colors input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.profile-colors span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; pointer-events: none; }
.profile-colors svg { width: 22px; height: 22px; visibility: hidden; }
.profile-colors input:checked + span svg { visibility: visible; }
.profile-colors input:checked + span { outline: 2px solid #435361; outline-offset: 3px; }
.profile-colors input:focus-visible + span { outline: 3px solid var(--brand-blue-ink); outline-offset: 3px; }
#profile-form .primary-action { background: var(--brand-purple-ink); }
#profile-family-summary { padding: 12px 0; margin-bottom: 18px; border-bottom: 1px solid #e1e6ec; }
#profile-family-summary h3 { font-size: 14px; color: var(--flow-color); }
#profile-family-summary dl { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; font-size: 14px; }
#profile-family-summary dt { overflow-wrap: anywhere; }
#profile-family-summary dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
@media(max-width:600px) {
  .profile-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .profile-choice { padding: 10px; gap: 8px; }
  .profile-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  .profile-avatar svg { width: 18px; height: 18px; }
  .profile-colors { grid-template-columns: repeat(4,minmax(0,1fr)); }
}