@font-face {
  font-family: "Wanted Sans";
  src: url("/beta/fonts/WantedSansVariable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  color-scheme: light;
  background: var(--background);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--background);
  color: var(--text);
  font-family: "Wanted Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body:has(dialog[open]) {
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
}

button,
input,
select,
label,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
a {
  color: inherit;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

button:disabled {
  cursor: default;
  opacity: 0.45;
}

svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden {
  display: none !important;
}

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

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

.auth-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 28px 18px;
}

.auth-card {
  width: min(400px, 100%);
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--surface);
}

.auth-brand,
.app-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.auth-brand > span,
.app-name > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text);
}

.auth-form {
  margin-top: 40px;
  animation: view-fade var(--motion-fast) ease-out;
}

.auth-form header {
  margin-bottom: 28px;
}

.auth-form header p,
.section-kicker {
  margin: 0;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 570;
}

.auth-form h1 {
  margin: 5px 0 0;
  font-size: 26px;
  font-weight: 680;
  letter-spacing: -0.04em;
}

.auth-field {
  display: block;
  margin-top: 16px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 450;
}

.auth-field input,
.settings-form input,
.add-category-form input,
.add-category-form select,
.export-form input,
.category-manage-row input,
.category-manage-row select,
.setting-row select {
  width: 100%;
  height: 46px;
  margin-top: 8px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  outline: 0;
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}

.auth-field input:hover,
.auth-field input:focus,
.settings-form input:hover,
.settings-form input:focus,
.add-category-form input:focus,
.category-manage-row input:focus,
.category-manage-row select:focus {
  border-color: var(--line-strong);
  background: var(--surface-hover);
}

.auth-feedback,
.form-feedback,
.field-feedback {
  color: var(--expense);
  font-size: 12px;
}

.auth-feedback {
  min-height: 18px;
  margin: 10px 0 0;
}

.form-feedback,
.field-feedback {
  min-height: 0;
  margin: 0;
}

.form-feedback:not(:empty),
.field-feedback:not(:empty) {
  margin-top: 10px;
  animation: list-reveal var(--motion-fast) var(--ease-standard) both;
}

.auth-primary,
.primary-button,
.danger-filled-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 0 14px;
  border: 1px solid var(--text);
  border-radius: var(--radius-control);
  background: var(--text);
  color: white;
  font-size: 13px;
  font-weight: 620;
  line-height: 1;
  cursor: pointer;
  transition: background var(--motion-fast) ease, transform var(--motion-fast) var(--ease);
}

.auth-primary {
  width: 100%;
  margin-top: 4px;
}

.auth-primary:hover,
.primary-button:hover {
  background: #30302f;
}

.auth-primary:active,
.primary-button:active,
.secondary-button:active,
.floating-action:active {
  transform: scale(0.98);
}

.auth-switch {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font-size: 13px;
  cursor: pointer;
}

.auth-switch:hover {
  color: var(--text);
}

.app-shell {
  width: 100%;
  max-width: calc(var(--content-max) + (var(--page-pad-desktop) * 2));
  min-height: 100svh;
  margin: 0 auto;
  padding: 26px var(--page-pad-desktop) calc(132px + env(safe-area-inset-bottom));
}

.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px;
}

.app-topbar h1 {
  margin: 5px 0 0;
  font-size: 24px;
  font-weight: 670;
  letter-spacing: -0.04em;
}

.profile-shortcut {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px 5px 5px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 580;
  cursor: pointer;
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}

.profile-shortcut:hover {
  border-color: var(--line);
  background: var(--surface);
}

#profileInitial {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--text);
  color: white;
  font-size: 13px;
}

.app-main {
  min-height: calc(100svh - 108px);
}

.app-view {
  width: 100%;
  min-height: inherit;
  animation: view-fade var(--motion-fast) ease-out;
}

.view-heading,
.calendar-toolbar,
.section-heading-row,
.settings-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.view-heading {
  margin-bottom: 18px;
}

.view-heading h2,
.month-heading,
.section-heading-row h2,
.settings-view h2,
.dialog-heading h2,
.confirm-card h2 {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 670;
  letter-spacing: -0.035em;
}

.summary-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--surface);
}

.summary-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 22px 24px;
}

.summary-item + .summary-item {
  border-left: 1px solid var(--line);
}

.summary-item span,
.compact-totals span {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 560;
}

.summary-item strong {
  min-width: 0;
  font-size: var(--summary-amount-size);
  font-variant-numeric: tabular-nums;
  font-weight: var(--summary-amount-weight);
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.is-updating {
  animation: amount-update 260ms var(--ease);
}

.goals-section {
  margin-top: 12px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--surface);
}



.section-heading-row.goals-heading {
  min-height: var(--control-height);
  align-items: center;
  padding: 0;
  border: 0;
}
.goal-heading-actions { display:flex; align-items:center; gap:3px; flex-shrink:0; }
.goal-month-button { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:var(--radius-small); background:transparent; color:var(--text-soft); cursor:pointer; }
.goal-month-button svg { width:15px; height:15px; }
.goal-month-button:hover:not(:disabled) { background:var(--surface-soft); color:var(--text); }
.goal-month-button:disabled { opacity:.3; }
.goal-editor-dialog .dialog-heading .section-kicker { margin-bottom:3px; }

.goal-list {
  display: grid;
  gap: 0;
}

.goal-empty {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 0 0;
  border: 0;
}

.goal-empty strong {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 580;
}

.goal-item {
  display: grid;
  grid-template-columns: 28px 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 84px;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  transition: opacity var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.goal-item.is-dragging,
.category-manage-row.is-dragging {
  opacity: 0.98;
}

.goal-drag,
.category-drag,
.record-drag {
  display: grid;
  place-items: center;
  width: 28px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #aaa9a3;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.goal-drag svg,
.category-drag svg,
.record-drag svg {
  width: 17px;
  height: 17px;
}

.goal-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-small);
  background: var(--surface-soft);
  color: var(--text-soft);
}

.goal-item.income-goal .goal-icon { background: var(--income-soft); color: var(--income); }
.goal-item.expense-goal .goal-icon { background: var(--expense-soft); color: var(--expense); }

.goal-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px 16px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.goal-copy,
.goal-copy strong,
.goal-copy small,
.goal-key small,
.goal-key b { display: block; }

.goal-copy { min-width: 0; }
.goal-copy strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goal-copy small,
.goal-key small {
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 11px;
}

.goal-item.income-goal .goal-copy small,
.goal-item.income-goal .goal-key b { color: var(--income); }

.goal-item.expense-goal .goal-copy small,
.goal-item.expense-goal .goal-key b { color: var(--expense); }

.goal-key { min-width: 0; text-align: right; }
.goal-key b { font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 620; overflow-wrap: anywhere; }
.goal-key small { overflow-wrap: anywhere; }

.goal-progress {
  display: block;
  grid-column: 1 / -1;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line);
}

.goal-progress > span {
  display: block;
  height: 100%;
  margin: 0;
  border-radius: inherit;
  background: var(--text);
}

.goal-item.income-goal .goal-progress > span { background: var(--income); }
.goal-item.expense-goal .goal-progress > span { background: var(--expense); }

.list-reveal { animation: list-reveal var(--motion-normal) var(--ease-emphasized) both; }

.is-sorting { user-select: none; }

.sortable-overlay {
  z-index: 200;
  opacity: 0.98;
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-float);
  transform: scale(1.012);
  will-change: top, transform;
}

.sortable-placeholder {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-soft);
}

.record-list > .sortable-placeholder {
  border-width: 0 0 1px;
  border-radius: 0;
}

.goal-item.sortable-overlay,
.category-manage-row.sortable-overlay,
.record-item.sortable-overlay { cursor: grabbing; }

.record-drag {
  justify-self: center;
  width: 40px;
  height: 44px;
}

.category-drag {
  width: 40px;
  height: var(--control-height);
}

.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 620;
  line-height: 1;
  cursor: pointer;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}

.text-button:hover {
  background: var(--surface);
  color: var(--text);
}

.content-section {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--surface);
}

.section-heading-row {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.section-heading-row h2 {
  font-size: 20px;
}

.compact-totals {
  display: flex;
  align-items: center;
  gap: 14px;
  font-variant-numeric: tabular-nums;
}

.today-totals {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 14px;
  font-variant-numeric: tabular-nums;
}

.today-totals span,
.today-totals small,
.today-totals b {
  display: block;
  min-width: 0;
}

.today-totals small {
  margin-bottom: 3px;
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 560;
}

.today-totals b {
  font-size: 12px;
  font-weight: 620;
  white-space: nowrap;
}

.daily-note-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 18px 0 6px;
  padding: 13px 14px;
  border-radius: 13px;
  background: var(--surface-soft);
}

.daily-note-form label {
  flex: 1;
  min-width: 0;
}

.daily-note-form label span {
  display: block;
  margin-bottom: 5px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 580;
}

.daily-note-form input {
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
}

.record-list {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.record-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  transition: opacity var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.record-item:last-child {
  border-bottom: 0;
}

.record-main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--motion-fast) ease;
}

.record-main:hover {
  background: var(--surface-hover);
}

.record-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--text-soft);
}

.record-icon.income {
  background: var(--income-soft);
  color: var(--income);
}

.record-icon.expense {
  background: var(--expense-soft);
  color: var(--expense);
}

.record-copy {
  min-width: 0;
}

.record-copy strong,
.record-copy span,
.record-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-copy strong {
  font-size: 14px;
  font-weight: 630;
}

.record-copy span {
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 12px;
}

.record-copy small {
  margin-top: 2px;
  color: #9a9a94;
  font-size: 10px;
  font-weight: 540;
}

.record-amount {
  min-width: 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.mood-label {
  padding: 4px 7px;
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--text-soft);
  font-size: 10px;
  white-space: nowrap;
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 150px;
  color: var(--text-soft);
  text-align: center;
}

.empty-state strong {
  font-size: 14px;
  font-weight: 580;
}

.calendar-toolbar {
  margin-bottom: 18px;
}

.month-controls {
  display: flex;
  align-items: center;
  gap: 7px;
}

.icon-button,
.quiet-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--control-height);
  min-height: var(--control-height);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 620;
  line-height: 1;
  cursor: pointer;
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) var(--ease);
}

.icon-button {
  width: var(--control-height);
  padding: 0;
}

.quiet-button,
.secondary-button {
  padding: 0 14px;
}

.icon-button:hover,
.quiet-button:hover,
.secondary-button:hover {
  border-color: var(--line-strong);
  background: var(--surface-hover);
}

.calendar-summary {
  margin-bottom: 14px;
}

.calendar-mode-tabs {
  display: flex;
  gap: 20px;
  margin: 2px 0 14px;
  border-bottom: 1px solid var(--line);
}

.calendar-mode-tabs button {
  min-height: 40px;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 620;
  cursor: pointer;
}

.calendar-mode-tabs button.active { border-bottom-color: var(--text); color: var(--text); }

.calendar-panel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--surface);
}

.weekday-row,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.weekday-row {
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.weekday-row span {
  padding: 13px 8px 11px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 580;
  text-align: center;
}

.weekday-row span:first-child,
.day-button.is-sunday .day-number {
  color: var(--expense);
}

.calendar-grid {
  padding: 14px;
}

.day-button,
.calendar-blank {
  min-width: 0;
  min-height: 100px;
}

.day-button {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.day-button:hover {
  background: var(--surface-hover);
}

.day-button.is-selected {
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.day-number {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 610;
}

.day-button.is-today .day-number {
  box-shadow: inset 0 0 0 1.5px var(--text);
}

.calendar-amount {
  display: block;
  width: 100%;
  overflow: hidden;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 570;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-amount.income {
  color: var(--income);
}

.calendar-amount.expense {
  color: var(--expense);
}

.selected-day-section {
  margin-top: 14px;
}

.category-summary-content {
  animation: view-fade var(--motion-fast) ease-out;
}

.period-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.period-heading h2 {
  margin: 4px 0 0;
  font-size: 20px;
  font-weight: 670;
}

.period-label {
  display: block;
  margin-top: 5px;
  color: var(--text-soft);
  font-size: 11px;
}

.period-presets {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.period-presets button {
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 580;
  cursor: pointer;
}

.period-presets button:hover,
.period-presets button.active { border-color: var(--line); background: var(--surface); color: var(--text); }

.custom-period-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.date-field { position: relative; min-width: 0; }
.date-field > span:first-child { display: block; margin-bottom: 7px; color: var(--text-soft); font-size: 11px; font-weight: 570; }
.date-value-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.date-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 46px;
  min-width: 0;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 590;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease;
}
.date-trigger:hover { border-color: var(--line-strong); background: var(--surface-hover); }
.date-trigger svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-soft); }
.date-trigger [data-date-label] { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.period-summary { margin-bottom: 18px; }

.category-summary-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.category-summary-columns > section { min-width: 0; }
.category-summary-columns h3 { margin: 0; padding: 0 2px 12px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 650; }

.category-summary-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 66px;
  padding: 9px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.category-summary-row:hover { background: var(--surface-hover); }
.category-summary-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--surface-soft); color: var(--text-soft); }
.category-summary-icon.income { background: var(--income-soft); color: var(--income); }
.category-summary-icon.expense { background: var(--expense-soft); color: var(--expense); }
.category-summary-icon svg { width: 19px; height: 19px; }
.category-summary-copy { min-width: 0; }
.category-summary-copy strong { font-size: 13px; font-weight: 630; }
.category-summary-copy small { margin-left: 6px; color: var(--text-soft); font-size: 10px; }
.category-summary-row b { min-width: 0; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.category-ratio { display: block; height: 2px; margin-top: 7px; overflow: hidden; background: var(--line); }
.category-ratio span { display: block; height: 100%; background: var(--text-soft); }
.category-summary-empty { min-height: 66px; padding: 24px 2px; color: var(--text-soft); font-size: 12px; text-align: center; }
.summary-reveal { animation: summary-reveal 190ms var(--ease) both; }

.settings-view {
  width: 100%;
}

.settings-view > .view-heading {
  margin-bottom: 6px;
}

.settings-section {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.settings-section h3 {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 650;
}

.settings-title-row {
  align-items: center;
  margin-bottom: 18px;
}

.settings-title-row h3 { margin: 0; }

.settings-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 12px;
}

.settings-form label,
.export-form label {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 570;
}

.settings-form input:disabled {
  background: var(--surface-soft);
  color: var(--text-soft);
}

.settings-form input,
.settings-form .secondary-button,
.export-form input,
.export-form .secondary-button,
.setting-row select,
.logout-button {
  min-height: 40px;
  border-radius: var(--radius-control);
  font-size: 13px;
  font-weight: 590;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--setting-row-height);
  padding: 0 2px;
  border-top: 1px solid var(--line);
}

.setting-row:first-of-type {
  border-top: 0;
}

.setting-row strong,
.setting-row span {
  display: block;
}

.setting-row strong {
  font-size: 13px;
  font-weight: 620;
}

.setting-row span {
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 11px;
}

.setting-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--text);
}

.setting-row select {
  width: 110px;
  height: 42px;
  margin: 0;
}

.mini-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface-soft);
  isolation: isolate;
}

.mini-tabs::before {
  position: absolute;
  z-index: 0;
  top: 3px;
  left: 3px;
  width: calc((100% - 10px) / 2);
  height: calc(100% - 6px);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(23, 23, 22, 0.08);
  content: "";
  transition: transform var(--motion-normal) var(--ease-emphasized);
}

.mini-tabs.is-income::before { transform: translateX(calc(100% + 4px)); }

.mini-tabs button {
  position: relative;
  z-index: 1;
  min-width: 52px;
  min-height: 31px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  font-size: 12px;
  cursor: pointer;
}

.mini-tabs button.active {
  color: var(--text);
}

.category-manage-list {
  border-top: 1px solid var(--line);
}

.category-manage-row {
  display: grid;
  grid-template-columns: 104px minmax(120px, 1fr) 40px 104px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
}

.category-manage-row > input[data-category-name] {
  height: var(--control-height);
  margin: 0;
  padding-inline: 11px;
  border-radius: var(--radius-control);
  font-size: 13px;
}

.category-icon-select {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  height: var(--control-height);
  min-width: 0;
  overflow: hidden;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 580;
  text-align: left;
  cursor: pointer;
}

.category-icon-select > span:first-child { display: grid; place-items: center; }
.category-icon-select > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-icon-select svg { width: 17px; height: 17px; }
.category-icon-select:hover { border-color: var(--line-strong); color: var(--text); }

.category-status-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 104px;
}

.visibility-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: var(--control-height);
  cursor: pointer;
}

.visibility-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.visibility-track {
  position: relative;
  display: block;
  width: 34px;
  height: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-soft);
  transition: background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

.visibility-track > span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-soft);
  transition: transform var(--motion-normal) var(--ease-emphasized), background var(--motion-fast) var(--ease-standard);
}

.visibility-toggle input:checked + .visibility-track {
  border-color: var(--text);
  background: var(--text);
}

.visibility-toggle input:checked + .visibility-track > span {
  background: var(--surface);
  transform: translateX(14px);
}

.visibility-toggle input:focus-visible + .visibility-track {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.category-delete-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
}

.category-delete-button:hover {
  background: var(--expense-soft);
  color: var(--expense);
}

.category-delete-button svg {
  width: 16px;
  height: 16px;
}

.category-delete-spacer { width: 32px; height: 32px; }

.add-category-form {
  display: grid;
  grid-template-columns: 104px minmax(120px, 1fr) 40px 104px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}

.add-category-form > input,
.add-category-form > select {
  height: var(--control-height);
  margin: 0;
}

.category-new-icon { grid-column: 1; grid-row: 1; }
.category-new-name { grid-column: 2; grid-row: 1; }
.category-drag-spacer { grid-column: 3; grid-row: 1; width: 40px; height: var(--control-height); }
.category-add-button { grid-column: 4; grid-row: 1; justify-self: end; min-width: 72px; }

.export-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 12px;
}

.export-form input {
  height: 42px;
}

.export-form button {
  display: flex;
  align-items: center;
  gap: 7px;
  height: var(--control-height);
}

.export-form svg {
  width: 17px;
  height: 17px;
}

.logout-button {
  height: var(--control-height);
  min-width: 96px;
  padding: 0 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 590;
  cursor: pointer;
}

.logout-button:hover {
  border-color: var(--line-strong);
  background: var(--surface-soft);
  color: var(--text);
}

.app-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 0;
  color: var(--text-soft);
  font-size: 11px;
}

.app-info strong {
  color: var(--text);
  font-size: 12px;
}

.app-info-links {
  display: inline-flex;
  gap: 10px;
  margin-left: auto;
}

.app-info a {
  color: var(--text-soft);
  text-decoration: none;
}

.app-info a:hover {
  color: var(--text);
}

.bottom-dock {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(var(--dock-width), calc(100vw - 24px));
  height: var(--dock-height);
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  transform: translateX(-50%);
}

.bottom-dock a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  border-radius: 11px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 590;
  text-decoration: none;
  transition: background var(--motion-fast) ease, color var(--motion-fast) ease;
}

.bottom-dock a.active {
  background: var(--surface-soft);
  color: var(--text);
}

.bottom-dock svg {
  width: 18px;
  height: 18px;
}

.floating-action {
  position: fixed;
  right: max(24px, calc((100vw - var(--content-max)) / 2 + 24px));
  bottom: 94px;
  z-index: 19;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 18px 0 15px;
  border: 0;
  border-radius: 15px;
  background: var(--text);
  color: white;
  box-shadow: 0 7px 18px rgba(23, 23, 22, 0.14);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background var(--motion-fast) ease, transform var(--motion-fast) var(--ease);
}

.floating-action:hover {
  background: #30302f;
  transform: translateY(-1px);
}

dialog {
  color: var(--text);
  font-family: inherit;
}

dialog::backdrop {
  background: rgba(20, 20, 18, 0);
  backdrop-filter: blur(0);
  transition: background var(--motion-base) ease, backdrop-filter var(--motion-base) ease;
}

dialog.is-open::backdrop {
  background: rgba(20, 20, 18, 0.34);
  backdrop-filter: blur(2px);
}

.sheet-dialog {
  width: min(600px, calc(100vw - 32px));
  max-height: min(88dvh, 860px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(23, 23, 22, 0.16);
  opacity: 0;
  transform: translateY(12px) scale(0.985);
  transition: opacity var(--motion-base) ease, transform var(--motion-base) var(--ease), display var(--motion-base) allow-discrete;
}

.record-editor-dialog { width: min(840px, calc(100vw - 40px)); }

.sheet-dialog.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.date-picker-dialog {
  width: min(340px, calc(100vw - 28px));
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: transparent;
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition: opacity var(--motion-base) ease, transform var(--motion-base) var(--ease), display var(--motion-base) allow-discrete;
}

.date-picker-dialog.is-open { opacity: 1; transform: translateY(0) scale(1); }

.date-picker-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-dialog);
}

.date-picker-heading {
  display: grid;
  grid-template-columns: var(--control-height) 1fr var(--control-height);
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.date-picker-heading h2 { margin: 0; font-size: 16px; font-weight: 660; text-align: center; }
.date-picker-weekdays,
.date-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.date-picker-weekdays span { padding: 7px 0; color: var(--text-soft); font-size: 10px; font-weight: 570; text-align: center; }
.date-picker-blank,
.date-picker-day { min-width: 0; min-height: 38px; }
.date-picker-day {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.date-picker-day:hover { background: var(--surface-hover); }
.date-picker-day.is-today { box-shadow: inset 0 0 0 1px var(--line-strong); }
.date-picker-day.is-selected { background: var(--text); color: var(--surface); box-shadow: none; }
.date-picker-footer { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }

.record-form,
.dialog-card {
  padding: 24px;
}

.record-form.dialog-frame,
.dialog-card.dialog-frame {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(88dvh, 860px);
  padding: 0;
  overflow: hidden;
}

.sheet-dialog > .record-form:not(.dialog-frame),
.sheet-dialog > .dialog-card:not(.dialog-frame) {
  max-height: min(88dvh, 860px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sheet-dialog > .record-form:not(.dialog-frame)::-webkit-scrollbar,
.sheet-dialog > .dialog-card:not(.dialog-frame)::-webkit-scrollbar { display: none; }

.dialog-content {
  min-height: 0;
  padding: 18px 24px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-block: 16px 80px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.dialog-content::-webkit-scrollbar { display: none; }

.sheet-handle {
  display: none;
}

.dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.dialog-frame > .dialog-heading {
  position: relative;
  min-height: 70px;
  margin: 0;
  padding: 15px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.dialog-heading h2,
.confirm-card h2 {
  font-size: 22px;
}

.dialog-heading .icon-button {
  border-color: transparent;
  background: var(--surface-soft);
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.type-switch {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  min-height: var(--segment-height);
  padding: var(--segment-inset);
  border-radius: var(--segment-radius);
  background: var(--surface-soft);
  isolation: isolate;
}

.type-switch > .segment-indicator {
  position: absolute;
  z-index: 0;
  top: 4px;
  left: 4px;
  width: calc((100% - 12px) / 2);
  height: calc(100% - 8px);
  border-radius: calc(var(--segment-radius) - var(--segment-inset));
  background: var(--surface);
  box-shadow: var(--segment-shadow);
  content: "";
  transition: transform var(--motion-base) var(--ease);
}

.type-switch:has(label:nth-of-type(2) input:checked) > .segment-indicator {
  transform: translateX(calc(100% + 4px));
}

.type-switch label,
.category-option,
.icon-option,
.mood-picker label {
  cursor: pointer;
}

.type-switch label { position: relative; z-index: 1; }

.type-switch input,
.choice-field input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.type-switch span {
  display: grid;
  place-items: center;
  min-height: calc(var(--segment-height) - 2 * var(--segment-inset));
  border-radius: calc(var(--segment-radius) - var(--segment-inset));
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 620;
  transition: color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}

.type-switch input:checked + span {
  color: var(--text);
}

.type-switch input:focus-visible + span,
.choice-field input:focus-visible + span {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

.amount-field {
  display: block;
  padding: 25px 4px 20px;
  border-bottom: 1px solid var(--line);
}

.record-dialog-content > .amount-field { padding: 18px 4px 14px; }
.record-dialog-content .amount-input-wrap input { font-size: var(--type-amount-size); font-weight:var(--type-amount-weight); }

.record-choice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
  gap: 18px;
}

.record-choice-grid .choice-field { min-width: 0; }
.record-dialog-content > .text-field { display: block; margin-top: 17px; }

.amount-field > span:first-child,
.text-field > span,
.choice-field legend,
.goal-input > span:first-child {
  display: block;
  margin-bottom: 9px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 580;
}

.amount-input-wrap,
.goal-input > span:last-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.amount-input-wrap input,
.goal-input input {
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: clamp(34px, 8vw, 44px);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.045em;
}

.amount-input-wrap input::placeholder,
.goal-input input::placeholder {
  color: #c4c4bf;
}

.amount-input-wrap b,
.goal-input b {
  flex: 0 0 auto;
  color: var(--text-soft);
  font-size: 18px;
  font-weight: 620;
}

.field-feedback {
  display: block;
}

.choice-field {
  margin-top: 17px;
}

.choice-field legend small {
  margin-left: 3px;
  color: #a0a09a;
  font-size: 11px;
  font-weight: 520;
}

.category-picker,
.icon-picker,
.mood-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.category-option > span,
.mood-picker span {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 39px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 580;
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.category-option svg {
  width: 17px;
  height: 17px;
}

.icon-option > span {
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--text-soft);
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.category-option input:checked + span,
.icon-option input:checked + span,
.mood-picker input:checked + span {
  border-color: var(--text);
  background: var(--surface-soft);
  color: var(--text);
}

.icon-choice-dialog { width: min(520px, calc(100vw - 32px)); }

.icon-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.icon-choice {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 48px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text-soft);
  text-align: left;
  cursor: pointer;
}

.icon-choice > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--surface-soft); }
.icon-choice svg { width: 17px; height: 17px; }
.icon-choice strong { overflow: hidden; font-size: 11px; font-weight: 590; text-overflow: ellipsis; white-space: nowrap; }
.icon-choice:hover { border-color: var(--line-strong); color: var(--text); }
.icon-choice.is-selected { border-color: var(--text); background: var(--surface-soft); color: var(--text); }

.summary-record-list { display: grid; }
.summary-record-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 62px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.summary-record-row > span:nth-child(2) { min-width: 0; }
.summary-record-row strong,
.summary-record-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.summary-record-row strong { font-size: 13px; font-weight: 630; }
.summary-record-row small { margin-top: 3px; color: var(--text-soft); font-size: 10px; }
.summary-record-row b { min-width: 0; font-size: 12px; white-space: nowrap; }

.field-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  margin-top: 17px;
}

.text-field input,
.text-field select {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  outline: 0;
  color: var(--text);
  background: var(--surface);
}

.text-field small {
  margin-left: 3px;
  color: #a0a09a;
  font-size: 11px;
}

/* The record editor and design example share one field baseline. */
.record-editor-dialog .text-field { display: block; min-width: 0; }
.record-editor-dialog .text-field > span:first-child {
  display: flex;
  align-items: baseline;
  height: var(--field-label-line);
  min-height: var(--field-label-line);
  margin: 0 0 8px;
  font-size: var(--field-label-size);
  line-height: var(--field-label-line);
  font-weight: 580;
}
.record-editor-dialog .text-field > input:not([type="hidden"]),
.record-editor-dialog .text-field > select,
.record-editor-dialog .text-field > .date-trigger {
  display: flex;
  align-items: center;
  height: var(--field-height);
  min-height: var(--field-height);
  margin: 0;
  padding: 0 13px;
  font-size: var(--field-text-size);
  line-height: 20px;
  font-weight: 450;
}
.record-editor-dialog .date-trigger [data-date-label] {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.dialog-actions,
.confirm-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
}

.dialog-frame > .dialog-actions {
  min-height: 64px;
  margin: 0;
  padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.detail-content { padding-top: 8px; }

.action-spacer {
  flex: 1;
}

.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height);
  min-height: var(--control-height);
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--expense);
  font-size: 13px;
  font-weight: 620;
  line-height: 1;
  cursor: pointer;
}

.danger-button:hover {
  background: var(--expense-soft);
}

.danger-filled-button {
  border-color: var(--expense);
  background: var(--expense);
}

.confirm-dialog {
  width: min(390px, calc(100vw - 32px));
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition: opacity var(--motion-base) ease, transform var(--motion-base) var(--ease), display var(--motion-base) allow-discrete;
}

.confirm-dialog.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.confirm-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(23, 23, 22, 0.18);
}

.confirm-card h2 {
  margin-top: 6px;
}

.confirm-description {
  margin: 16px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.55;
}

.confirm-description + .text-field {
  display: block;
  margin-top: 20px;
}

.confirm-actions {
  justify-content: flex-end;
  margin-top: 24px;
}

.goal-input {
  display: block;
  margin-top: 26px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.goal-input input {
  font-size: 34px;
}

.compact-amount-field {
  padding-top: 18px;
}

.compact-amount-field .amount-input-wrap input {
  font-size: 34px;
}

.goal-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 20px;
}

.goal-detail-progress {
  height: 4px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--line);
}

.goal-detail-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--text);
  transition: width var(--motion-base) var(--ease);
}

.goal-detail-target {
  margin: 9px 0 0;
  color: var(--text-soft);
  font-size: 12px;
}

.goal-entry-form .text-field {
  display: block;
  margin-top: 16px;
}

.detail-amount {
  padding: 14px 0 24px;
  border-bottom: 1px solid var(--line);
  font-size: 38px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.045em;
}

.detail-list {
  margin: 8px 0 0;
}

.detail-list > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid var(--line);
}

.detail-list dt {
  color: var(--text-soft);
  font-size: 12px;
}

.detail-list dd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 570;
}

.detail-icon {
  color: var(--text-soft);
}

.detail-icon svg {
  width: 18px;
  height: 18px;
}

/* Record details use spacing, not a table of separators. */
.record-detail-dialog { --detail-inset: 24px; }
.record-detail-dialog .dialog-frame > .dialog-heading {
  padding: 20px var(--detail-inset) 12px;
  border-bottom: 0;
}
.record-detail-dialog .dialog-heading > div { min-width: 0; }
.record-detail-dialog .dialog-heading h2 { overflow-wrap: anywhere; }
.record-detail-dialog .dialog-heading .icon-button { flex-shrink: 0; }
.record-detail-dialog .detail-content { padding: 12px var(--detail-inset) 24px; }
.record-detail-dialog .detail-amount {
  padding: 0;
  border: 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.record-detail-dialog .detail-list { margin: 24px 0 0; }
.record-detail-dialog .detail-list > div {
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 12px;
  min-height: 40px;
  padding: 8px 0;
  border: 0;
  align-items: start;
  line-height: 24px;
}
.record-detail-dialog .detail-list dd { min-width: 0; overflow-wrap: anywhere; }
.record-detail-dialog .detail-icon { flex-shrink: 0; }
.record-detail-dialog .dialog-frame > .dialog-actions { padding-inline: var(--detail-inset); }
@media (max-width: 760px) {
  .record-detail-dialog { --detail-inset: 20px; }
  html:has(.record-detail-dialog[open]) { scrollbar-gutter: auto; }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 100px;
  z-index: 100;
  max-width: calc(100vw - 40px);
  padding: 11px 15px;
  border-radius: 12px;
  background: var(--text);
  color: white;
  box-shadow: 0 8px 24px rgba(23, 23, 22, 0.16);
  font-size: 12px;
  font-weight: 580;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity var(--motion-base) ease, transform var(--motion-base) var(--ease);
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes view-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes amount-update {
  from { opacity: 0.55; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes summary-reveal {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes list-reveal {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 761px) {
  .record-dialog-content .category-option > span,
  .record-dialog-content .mood-picker span { min-height: 36px; }
  .record-editor-dialog .mood-picker { flex-wrap: nowrap; }
}

@media (max-width: 760px) {
  html:has(.sheet-dialog[open]) { scrollbar-gutter: auto; }
  .app-shell {
    padding: 20px var(--page-pad-mobile) calc(132px + env(safe-area-inset-bottom));
  }

  .app-topbar {
    margin-bottom: 26px;
    padding-inline: 4px;
  }

  .profile-shortcut {
    padding-right: 5px;
  }

  #profileName {
    display: none;
  }

  .summary-panel {
    border-radius: 16px;
  }

  .summary-item {
    padding: 17px 13px;
  }

  .summary-item span {
    font-size: 11px;
  }

  .summary-item strong { font-size: var(--summary-amount-size); }

  .today-totals {
    gap: 9px;
  }

  .day-totals { gap: 7px; }

  .goal-item {
    grid-template-columns: 28px 32px minmax(0, 1fr);
    gap: 7px;
  }

  .content-section {
    padding: 18px 14px;
    border-radius: 16px;
  }

  .section-heading-row {
    align-items: flex-end;
  }

  .compact-totals {
    gap: 9px;
  }

  .record-item {
    grid-template-columns: minmax(0, 1fr) 36px;
  }

  .record-main {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 9px;
    padding-inline: 5px;
  }

  .record-icon {
    width: 38px;
    height: 38px;
  }

  .mood-label {
    display: none;
  }

  .calendar-toolbar {
    align-items: flex-end;
  }

  .calendar-toolbar .month-heading {
    font-size: 20px;
  }

  .month-controls {
    gap: 2px;
  }

  .month-controls .icon-button {
    width: 34px;
    min-height: 34px;
    border-color: transparent;
    background: transparent;
  }

  .month-controls .quiet-button {
    min-height: 34px;
    padding-inline: 11px;
  }

  .calendar-panel {
    border-radius: 16px;
  }

  .weekday-row,
  .calendar-grid {
    padding-left: 6px;
    padding-right: 6px;
  }

  .calendar-grid {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .day-button,
  .calendar-blank {
    min-height: 74px;
  }

  .day-button {
    gap: 2px;
    padding: 6px 4px;
    border-radius: 10px;
  }

  .day-number {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .calendar-amount {
    font-size: 9.5px;
    letter-spacing: -0.04em;
  }

  .settings-form,
  .export-form {
    grid-template-columns: 1fr;
  }

  .settings-form .secondary-button,
  .export-form .secondary-button {
    justify-content: center;
  }

  .category-manage-row {
    grid-template-columns: 92px minmax(100px, 1fr) 36px 100px;
    gap: 8px;
  }

  .category-manage-row > input[data-category-name] {
    padding-inline: 9px;
  }

  .category-icon-select { padding-inline: 5px; font-size: 10px; }
  .category-status-actions { width: 100px; gap: 6px; }

  .add-category-form {
    grid-template-columns: 92px minmax(100px, 1fr) 36px 100px;
    gap: 8px;
  }

  .category-add-button { grid-column: 4; grid-row: 1; }

  .period-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .period-presets { justify-content: flex-start; }
  .custom-period-form { grid-template-columns: 1fr 1fr; }
  .custom-period-form .secondary-button { grid-column: 1 / -1; justify-content: center; }
  .category-summary-columns { grid-template-columns: 1fr; gap: 22px; }
  .icon-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .floating-action {
    right: 16px;
    bottom: 94px;
  }

  .sheet-dialog {
    width: 100vw;
    max-width: none;
    max-height: 100dvh;
    margin: auto 0 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 22px 22px 0 0;
    transform: translateY(calc(26px + var(--sheet-drag-y, 0px)));
  }

  .sheet-dialog.is-open {
    transform: translateY(var(--sheet-drag-y, 0px));
  }

  .record-form,
  .dialog-card {
    padding: 10px 18px max(20px, env(safe-area-inset-bottom));
  }

  .sheet-handle {
    display: block;
    width: 38px;
    height: 4px;
    margin: 0 auto 11px;
    border-radius: 999px;
    background: var(--line-strong);
    touch-action: none;
  }

  .dialog-frame { max-height: 100dvh !important; }
  .dialog-frame > .dialog-heading { min-height: 72px; padding: 22px 18px 12px; }
  .dialog-frame > .dialog-heading .sheet-handle {
    position: absolute;
    top: 8px;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
  }
  .dialog-content { padding: 14px 18px 20px; scroll-padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .record-choice-grid { grid-template-columns: 1fr; gap: 0; }
  .dialog-frame > .dialog-actions {
    position: relative;
    margin: 0;
    padding: 11px 18px calc(11px + env(safe-area-inset-bottom));
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .record-form:not(.dialog-frame) .dialog-actions,
  .dialog-card:not(.dialog-frame) .dialog-actions {
    position: sticky;
    bottom: 0;
    margin: 14px -18px -20px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.97);
  }
}

@media (max-width: 430px) {
  .auth-card {
    padding: 25px 20px;
  }

  .goals-section {
    padding-inline: 15px;
  }

  .daily-note-form {
    align-items: center;
  }

  .record-amount {
    font-size: 13px;
  }

  .category-manage-row {
    grid-template-areas:
      "icon name"
      "drag status";
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: var(--control-height) var(--control-height);
    gap: 8px 10px;
    min-height: 104px;
    padding: 8px 0;
  }

  .category-manage-row > .category-icon-select { grid-area: icon; }
  .category-manage-row > input[data-category-name] { grid-area: name; }
  .category-manage-row > .category-drag { grid-area: drag; justify-self: start; }
  .category-manage-row > .category-status-actions { grid-area: status; justify-self: end; }

  .add-category-form {
    grid-template-areas:
      "icon name"
      "drag status";
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: var(--control-height) var(--control-height);
    gap: 8px 10px;
    min-height: 104px;
    padding: 8px 0;
  }

  .category-new-icon { grid-area: icon; }
  .category-new-name { grid-area: name; }
  .category-drag-spacer { grid-area: drag; }
  .category-add-button { grid-area: status; justify-self: end; }

  .today-totals small { font-size: 9px; }

  .floating-action {
    width: 50px;
    padding: 0;
    justify-content: center;
    border-radius: 15px;
  }

  .floating-action span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: var(--motion-reduced) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--motion-reduced) !important;
  }
}

/* Budget shares surface and typography with neighboring goal cards. */
.budget-section { margin:20px 0 12px; padding:10px 20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-surface); }
.budget-section > .section-heading-row { border:0; padding:0; gap:12px; align-items:center; flex-wrap:wrap; }
.budget-section > .section-heading-row h2 { margin:0; font-size:16px; font-weight:600; white-space:nowrap; }
.budget-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:10px; }
.budget-summary > div { display:flex; flex-direction:column; gap:6px; padding-inline:20px; border-left:1px solid var(--line); min-width:0; }
.budget-summary > div:first-child { padding-left:0; border:0; }
.budget-summary span { font-size:12px; color:var(--text-soft); }
.budget-summary strong { font-size:var(--summary-amount-size); font-weight:var(--summary-amount-weight); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; letter-spacing:-.035em; }
.budget-summary small { color:var(--text-soft); font-size:11px; }
.budget-summary span small { margin-left:4px; }
.budget-history { margin-top:14px; border-top:1px solid var(--line); font-size:12px; }
.budget-history summary { display:flex; align-items:center; gap:8px; cursor:pointer; padding:0 2px; line-height:22px; list-style:none; border-radius:4px; min-height:40px; }
.budget-history summary::-webkit-details-marker { display:none; }
.budget-history summary::after { content:''; width:6px; height:6px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); margin-left:auto; margin-right:4px; transition:transform var(--motion-fast); }
.budget-history[open] summary::after { transform:rotate(225deg); }
.budget-history summary:focus:not(:focus-visible) { outline:none; }
.budget-history summary:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
#budgetDays { margin-top:12px; }
.budget-day { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:8px; padding:12px 0; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; align-items:center; }
.budget-day span { text-align:right; }
.budget-day-heading { border:0; color:var(--text-soft); font-size:11px; }
.budget-day-heading span:first-child { text-align:left; }
.budget-fields { display:grid; gap:20px; }
.budget-fields input,.budget-fields select { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); color:var(--text); font:inherit; }
#budgetDialog { max-width:560px; }
.bottom-dock { border-radius:var(--radius-surface); box-shadow:0 2px 12px #00000006; }
@media(max-width:600px) {
 .budget-section { padding:8px 16px; }
 .budget-summary { grid-template-columns:1fr 1fr; gap:14px 12px; }
 .budget-summary > div { padding:0; border:0; }
 .budget-summary > div:first-child { display:grid; grid-template-columns:1fr auto; align-items:center; grid-column:1/-1; padding-bottom:12px; border-bottom:1px solid var(--line); }
 .budget-summary > div:first-child small { grid-column:1/-1; }

 .budget-summary > div:first-child strong { justify-content:flex-end; text-align:right; }
 .budget-summary > div:not(:first-child) small { font-size:10px; }
 #budgetDialog { max-width:none; }
}

.amount-result { display:block; margin-top:8px; color:var(--text-soft); font-size:14px; font-variant-numeric:tabular-nums; }
.amount-result:empty { display:none; }
.budget-actions,.budget-tabs { display:flex; align-items:center; gap:8px; }
.budget-tabs { flex:1; min-width:0; gap:8px; margin:0; color:var(--text-soft); }
.budget-tabs::before { content:'·'; }
.budget-tabs select { max-width:100%; min-width:0; min-height:40px; border:0; border-radius:var(--radius-control); background:transparent; color:var(--text); font-size:13px; font-weight:500; padding:6px 20px 6px 0; cursor:pointer; text-overflow:ellipsis; }
.budget-tabs > span { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.budget-actions { margin-left:auto; }
.calendar-budget { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px; margin-top:16px; }
.calendar-budget-item { display:flex; flex-direction:column; gap:6px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); min-width:0; }
.calendar-budget-title { font-size:12px; color:var(--text-soft); overflow-wrap:anywhere; }
.calendar-budget-title > span { padding:0 4px; }
.calendar-budget-item > strong { font-size:var(--summary-amount-size); font-weight:var(--summary-amount-weight); }
.budget-summary strong, .calendar-budget-item > strong { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:5px; row-gap:2px; line-height:1.25; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.budget-summary .budget-number, .calendar-budget-item .budget-number { color:inherit; font:inherit; }
.budget-summary .budget-status, .calendar-budget-item .budget-status { color:inherit; font-size:12px; font-weight:450; letter-spacing:0; }
@media(max-width:600px) {
 .budget-section > .section-heading-row { gap:8px; }
 .budget-section > .section-heading-row h2 { font-size:15px; }
 .budget-actions { gap:0; }
 .budget-actions .text-button { padding-inline:8px; }
 .budget-tabs { flex-basis:60px; }
}
.budget-summary strong.income-text { color:var(--income); }
.budget-summary strong.expense-text { color:var(--expense); }
.category-suggestions { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 16px; }
.category-suggestions button { display:flex; align-items:center; gap:6px; }
.category-suggestions svg { width:16px; height:16px; }
.category-overlap-label { display:block; margin-top:4px; color:var(--text-soft); font-size:11px; }
.record-copy small { overflow-wrap:anywhere; }

/* Recurring expenses reuse the record editor fields and quiet surface tokens. */
.recurring-section { padding:10px 16px; }
.recurring-heading { padding:0; border:0; gap:12px; }
.recurring-heading h2 { margin:0; min-width:0; font-size:15px; }
.recurring-toggle { display:flex; align-items:center; gap:9px; min-height:40px; padding:0; border:0; background:none; font:inherit; font-weight:inherit; cursor:pointer; }
.recurring-toggle svg { width:14px; height:14px; color:var(--text-soft); transition:transform var(--motion-fast) var(--ease-standard); }
.recurring-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.recurring-count { color:var(--text-soft); font-size:12px; font-weight:450; font-variant-numeric:tabular-nums; }
.recurring-count:empty { display:none; }
.recurring-add { display:inline-flex; gap:5px; align-items:center; justify-content:center; min-height:36px; padding:0 10px; font-size:12px; }
.recurring-add svg { width:14px; height:14px; }
.recurring-section > div:not([hidden]) { margin-top:8px; border-top:1px solid var(--line); }
.recurring-section .form-feedback:empty { display:none; }
.recurring-section .recurring-hint { margin:16px 0; }
.recurring-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; border-bottom:1px solid var(--line); }
.recurring-row:last-child { border-bottom:0; }
.recurring-entry { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:12px; align-items:center; min-width:0; width:100%; padding:14px 0; text-align:left; border:0; background:none; cursor:pointer; border-radius:var(--radius-control); }
.recurring-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:var(--radius-small); background:var(--surface-soft); color:var(--text-soft); transition:color var(--motion-fast),background var(--motion-fast); }
.recurring-icon svg { width:17px; height:17px; }
.recurring-entry:hover .recurring-icon { background:var(--line); color:var(--text); }
.recurring-copy { min-width:0; }
.recurring-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:580; line-height:1.5; }
.recurring-copy small { display:block; margin-top:3px; color:var(--text-soft); font-size:11px; line-height:1.5; overflow-wrap:anywhere; }
.recurring-money { font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.recurring-remove { min-width:36px; min-height:40px; padding:0 4px; font-size:11px; font-weight:450; color:var(--text-soft); background:none; border:0; border-radius:var(--radius-control); cursor:pointer; }
.recurring-remove:hover { color:var(--expense); background:var(--expense-soft); }
.recurring-dialog { width:min(800px,calc(100vw - 40px)); border-radius:var(--radius-dialog); }
.recurring-content { display:grid; gap:22px; padding:24px; align-content:start; }
.recurring-identity { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px; }
.recurring-fields { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1fr); gap:14px; }
.recurring-fields:has(#recurringMonthField.hidden) { grid-template-columns:1fr 1fr; }
.recurring-schedule { padding-block:20px; border-block:1px solid var(--line); }
.recurring-schedule select:disabled,.recurring-schedule .date-trigger:disabled { opacity:1; background:var(--surface-soft); color:var(--text-soft); cursor:default; }
.recurring-schedule .date-trigger:disabled [data-date-label] { color:var(--text-soft); }
.recurring-content .amount-field { margin:0; padding:0; border:0; }
.recurring-content .amount-field > span:first-child { font-size:var(--field-label-size); line-height:var(--field-label-line); margin:0 0 8px; height:var(--field-label-line); }
.recurring-content .amount-input-wrap { height:var(--field-height); border-bottom:1px solid var(--line-strong); }
.recurring-content .amount-input-wrap input { font-size:var(--type-amount-size); font-weight:var(--type-amount-weight); }
.recurring-content .amount-result:empty { display:none; }
.recurring-content .choice-field { margin:0; min-width:0; }
.recurring-extras { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.recurring-extras .text-field { min-width:0; }
.recurring-content #recurringWeekField:not(.hidden) { margin-top:18px; }
#recurringWeekdays { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
#recurringWeekdays .category-option > span { justify-content:center; width:100%; min-height:40px; padding-inline:0; }
.recurring-hint { color:var(--text-soft); font-size:11px; line-height:1.5; margin:6px 0 0; }
.recurring-check { display:flex; align-items:center; gap:8px; font-size:13px; }
.recurring-check input { accent-color:var(--text); width:16px; height:16px; }
.recurring-content .form-feedback:empty { display:none; }
@media(max-width:600px) {
 html:has(.recurring-dialog[open]) { scrollbar-gutter:auto; }
 .recurring-section { padding:8px 12px; }
 .recurring-row { gap:6px; }
 .recurring-entry { grid-template-columns:28px minmax(0,1fr) auto; gap:8px; padding:13px 0; }
 .recurring-icon { width:28px; height:28px; }
 .recurring-copy strong,.recurring-money { font-size:13px; }
 .recurring-copy small { font-size:11px; }
 .recurring-remove { min-width:36px; font-size:12px; }
 .recurring-dialog { width:100vw; border-radius:var(--radius-dialog) var(--radius-dialog) 0 0; }
 .recurring-content { padding:20px 16px; gap:20px; }
 .recurring-identity { grid-template-columns:1fr; gap:18px; }
 .recurring-fields { grid-template-columns:1fr 1fr; gap:16px; }
 .recurring-fields .date-field { grid-column:1/-1; grid-row:2; }
 .recurring-fields #recurringMonthField { grid-column:2; grid-row:1; }
 .recurring-fields:has(#recurringMonthField.hidden) { grid-template-columns:1fr; }
 .recurring-extras { grid-template-columns:1fr; gap:18px; }
 .recurring-content .amount-input-wrap { border-bottom:0; }
 #recurringWeekdays { gap:6px; }
}
@media(prefers-reduced-motion:reduce) { .recurring-toggle svg,.recurring-icon { transition:none; } }

/* Peer section headings share one scale, including disclosure titles. */
.section-heading-row h2.section-title {
  margin: 0;
  font-size: var(--section-title-size);
  font-weight: var(--section-title-weight);
  line-height: var(--section-title-line);
  letter-spacing: -.02em;
}
.section-heading-row:has(.section-title) { align-items: center; }
.goals-section:not(.recurring-section) { padding: 14px 20px; }
.goal-list:not(:has(.goal-empty)) { margin-top: 8px; }
.goal-item:last-child { padding-bottom: 4px; }
.goal-icon svg { width: 18px; height: 18px; }
.goal-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px 12px; min-height: 44px; }
.goal-copy strong { font-weight: 590; }
.goal-item.income-goal .goal-copy small,
.goal-item.expense-goal .goal-copy small { color: var(--text-soft); }
.goal-progress { height: 2px; background: var(--surface-soft); }
.goal-item:has(.goal-main:hover) { background: var(--surface-hover); }
.recurring-add { min-height: var(--control-height); font-size: 13px; padding-inline: 10px; }
@media (max-width: 600px) {
  .goals-section:not(.recurring-section) { padding: 12px 16px; }
  .recurring-section { padding-inline: 16px; }
  .today-section { padding-inline: 16px; }
  .goal-item { gap: 8px; }
  .goal-main { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .goal-key { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; text-align: left; }
  .goal-key small { margin: 0; }
  .goal-copy { display: flex; align-items: baseline; gap: 8px; }
  .goal-copy small { flex-shrink: 0; margin: 0; }
}

/* Goal editor uses the same fixed frame as record and recurring sheets. */
.goal-editor-dialog { width: min(720px, calc(100vw - 40px)); border-radius: var(--radius-dialog); }
.goal-editor-content { display: grid; gap: 20px; align-content: start; padding: 20px 24px 24px; }
.goal-editor-content > .text-field { display: block; min-width: 0; }
.goal-editor-content > .choice-field { margin: 0; }
.goal-editor-content > .amount-field { padding: 0 0 16px; }
.goal-editor-content .amount-input-wrap input { font-size: var(--type-amount-size); }
.goal-editor-content > .form-feedback:empty { display: none; }
@media (max-width: 760px) {
  .goal-editor-dialog { width: 100vw; max-height: calc(var(--goal-viewport-height, 100dvh) - 2px); margin: 0; inset: auto 0 max(0px, calc(100dvh - var(--goal-viewport-height, 100dvh) - var(--goal-viewport-top, 0px))); }
  .goal-editor-dialog > .dialog-frame { max-height: calc(var(--goal-viewport-height, 100dvh) - 2px) !important; }
  .goal-editor-dialog .dialog-heading { min-height: 64px; padding: 12px 16px; }
  .goal-editor-content { padding: 18px 16px 24px; gap: 18px; }
  .goal-editor-dialog .dialog-actions { padding-inline: 16px; }
}

@media(max-width:760px) { html:has(.goal-editor-dialog[open]) { scrollbar-gutter: auto; } }

/* Record list: centered title/category and centered amount/source, including empty sources. */
.record-main { grid-template-columns:36px minmax(0,1fr) minmax(106px,max-content); min-height:76px; align-items:center; gap:12px; }
.record-main .record-icon { width:36px; height:36px; border-radius:10px; }
.record-copy .record-title-line { display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; margin:0; overflow:visible; white-space:normal; }
.record-title-line strong { min-width:0; color:var(--text); white-space:normal; overflow-wrap:anywhere; line-height:21px; }
.record-title-line small { margin:0; color:var(--text-soft); font-size:11px; font-weight:450; line-height:18px; white-space:normal; overflow-wrap:anywhere; }
.record-copy .record-memo { display:flex; align-items:flex-start; gap:5px; margin-top:6px; overflow:visible; white-space:normal; }
.record-memo svg { flex-shrink:0; width:12px; height:12px; margin-top:3px; color:var(--text-soft); }
.record-copy .record-memo > span { min-width:0; margin:0; font-size:12px; line-height:18px; white-space:normal; overflow-wrap:anywhere; }
.record-copy .mood-label { width:fit-content; margin-top:6px; }
.record-payment { display:flex; flex-direction:column; align-items:center; justify-content:center; align-self:center; gap:5px; min-width:0; max-width:170px; text-align:center; }
.record-payment .record-amount { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
.record-payment-source { display:flex; align-items:center; justify-content:center; gap:4px; min-width:0; max-width:136px; color:var(--text-soft); font-size:11px; line-height:18px; }
.record-payment-source svg { flex-shrink:0; width:13px; height:13px; }
.record-payment-source > span { min-width:0; overflow-wrap:anywhere; }
.payment-editor-form .text-field { display:block; margin-top:18px; }
.payment-method-row { display:flex; align-items:center; gap:8px; min-height:54px; border-bottom:1px solid var(--line); }
.payment-method-name { display:flex; align-items:center; gap:8px; flex:1; min-width:0; font-size:13px; }
.payment-method-name svg { width:17px; height:17px; flex-shrink:0; color:var(--text-soft); }
.payment-method-name > span { min-width:0; overflow-wrap:anywhere; }
.payment-method-row .text-button { flex-shrink:0; font-size:12px; padding-inline:8px; }
.payment-empty { margin:10px 0; color:var(--text-soft); font-size:13px; }
@media(max-width:760px){
 .record-item { grid-template-columns:minmax(0,1fr) 32px; }
 .record-main { grid-template-columns:30px minmax(0,1fr) minmax(90px,max-content); gap:8px; padding-inline:4px; }
 .record-main .record-icon { width:30px; height:30px; border-radius:8px; }
 .record-payment { max-width:110px; }
 .record-payment-source { max-width:98px; font-size:10px; }
 .record-title-line strong { font-size:13px; }
 .record-copy .record-title-line { column-gap:6px; }
}

@media(max-width:760px){.record-copy .mood-label{display:none}.record-drag{width:32px}}

/* Native disclosures keep settings compact without hiding controls from keyboard users. */
.settings-disclosure { padding-block:12px; }
.settings-disclosure > summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; list-style:none; cursor:pointer; border-radius:var(--radius-small); }
.settings-disclosure > summary::-webkit-details-marker { display:none; }
.settings-disclosure > summary h3 { margin:0; }
.settings-disclosure > summary svg { width:16px; height:16px; flex-shrink:0; color:var(--text-soft); transition:transform var(--motion-fast) var(--ease); }
.settings-disclosure[open] > summary svg { transform:rotate(180deg); }
.settings-disclosure-content { padding-top:16px; }
.settings-disclosure-content > .settings-title-row { justify-content:flex-end; }
@media(prefers-reduced-motion:reduce) { .settings-disclosure > summary svg { transition:none; } }

/* Calendar amounts keep the chosen unit visible on narrow screens. */
#calendarGrid .calendar-amount { white-space:normal; overflow-wrap:anywhere; overflow:visible; text-overflow:clip; line-height:1.3; }

.summary-grouping { width:fit-content; margin-bottom:20px; }
.summary-grouping.is-payment::before { transform:translateX(calc(100% + 4px)); }
.category-summary-copy strong { overflow-wrap:anywhere; }