/* Approved common design, 2026-10-02. Appearance only; existing layouts/data stay authoritative. */
html, body, body.info-page { background: var(--dk-page); color: var(--dk-text); }
:root {
  --surface: var(--dk-surface); --surface-soft: var(--dk-soft);
  --text: var(--dk-text); --muted: var(--dk-muted); --border: var(--dk-line);
  --calendar-line: var(--dk-line); --accent: var(--dk-income);
  --accent-soft: var(--dk-income-bg); --expense: var(--dk-expense);
}
body { font-family: var(--dk-font-body); line-height: 1.6; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.03em; }
button, input, select, textarea { font-family: inherit; }
button { font-weight: 700; }
button:not(.calendar-day):not(.month-main):not(.monthly-trend-row) { min-height: 48px; font-size: 14px; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
  min-width: 0; max-width: 100%; min-height: 48px; font-size: 16px !important; font-weight: 400;
  color: var(--dk-text); background: var(--dk-field); border: 1px solid var(--dk-control); border-radius: 8px;
}
input::placeholder, textarea::placeholder { color: var(--dk-muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--dk-action); }
input:focus, select:focus, textarea:focus { border-color: var(--dk-accent-ink); box-shadow: inset 0 0 0 1px var(--dk-accent-ink); }
:is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--dk-error) !important; box-shadow: inset 0 0 0 1px var(--dk-error) !important;
}
.primary-button, .quick-add-trigger, .receipt-action small,
.display-mode-control button[aria-pressed="true"], .scenario-control button[aria-pressed="true"],
.planned-selection-filter button[aria-pressed="true"], .calendar-view-switch button[aria-pressed="true"],
.monthly-trend-presets button[aria-pressed="true"] {
  background: var(--dk-action); color: var(--dk-on-action); border-color: var(--dk-action);
}
.primary-button:hover, .quick-add-trigger:hover { background: var(--dk-action-hover); }
.secondary-button, .record-action, .year-button, .back-button, .utility-action,
.receipt-action, .dialog-close, .mobile-tools-toggle, .item-name-chip, .category-chip {
  background: var(--dk-field); color: var(--dk-text); border: 1px solid var(--dk-control); border-radius: 8px;
}
.secondary-button:hover, .record-action:hover, .dialog-close:hover, .item-name-chip:hover, .category-chip:hover { background: var(--dk-hover); }
.record-action.delete, .danger-button { color: var(--dk-error); border-color: var(--dk-error); }
button:disabled, input:disabled, select:disabled, textarea:disabled,
.item-name-favorite-row:disabled, .dashboard-widget-order button:disabled {
  opacity: 1 !important; background: var(--dk-disabled) !important; color: var(--dk-disabled-text) !important;
  border-color: var(--dk-control); cursor: not-allowed;
}
.theme-toolbar { display: flex; align-items: center; gap: 12px; max-width: 1180px; margin: 0 auto; padding: 12px 16px; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0;
  min-width: 48px; height: 48px; padding: 0 12px; border: 1px solid var(--dk-control); border-radius: 8px;
  background: var(--dk-field); color: var(--dk-text); cursor: pointer; }
.theme-toggle[aria-pressed="true"] { background: var(--dk-selected); color: var(--dk-accent-ink); border-color: var(--dk-accent-ink); }
.theme-toggle svg { width: 18px; height: 18px; stroke-width: 1.6; flex-shrink: 0; }
.theme-toggle[aria-pressed="false"] .theme-moon,
.theme-toggle[aria-pressed="true"] .theme-sun { display: none; }
.theme-status { font-size: 13px; color: var(--dk-warning); background: var(--dk-warning-bg); padding: 8px; border-radius: 6px; }
.dialog-header { gap: 10px; align-items: center; flex-wrap: wrap; }
.dialog-header > div:first-child { flex: 1 1 140px; }
.dialog-header-actions { flex-wrap: wrap; justify-content: flex-end; }
.dialog-close { width: 48px; height: 48px; flex-shrink: 0; }
.display-mode-control { background: var(--dk-surface); box-shadow: none; }
.display-mode-control button { padding-inline: 8px; }
.landing-screen { background: var(--dk-page); }
.landing-card { border-radius: 20px; box-shadow: none; }
.brand-lockup { color: var(--dk-text); }
.eyebrow, .dialog-eyebrow { color: var(--dk-accent-ink); }
/* Preserve the original mark, on its own light backing, in either palette. */
.brand-lockup img { background: #fafaf7; border-radius: 8px; padding: 2px; }
.brand-fill-mark { width: 96px; background: none; border-radius: 0; }
.brand-fill-mark img { position: absolute; inset: 0; }
.brand-fill-mark .brand-dark { display: none; }
html[data-theme="dark"] .brand-fill-mark .brand-light { display: none; }
html[data-theme="dark"] .brand-fill-mark .brand-dark { display: block; }
.summary-card, .month-card, .planned-card, .monthly-entry-card, .landing-card,
.calendar, .info-card, .budget-item { border-radius: 16px; }
.summary-card { background: var(--dk-soft); }
.balance-summary { background: var(--dk-soft); }
.month-card, .monthly-entry-card { box-shadow: none; }
.income, .income-text { color: var(--dk-income); }
.expense, .expense-text { color: var(--dk-expense); }
.saturday { color: var(--dk-info) !important; }
.calendar-day.saturday .day-number { color: var(--dk-info); }
.calendar-day.today { box-shadow: inset 0 0 0 2px var(--dk-accent-ink); }
.calendar-day.today .day-number {
  background: var(--dk-action); color: var(--dk-on-action); border-radius: 50%;
}
.calendar-day.selected, .calendar-day[aria-selected="true"] { background: var(--dk-selected); box-shadow: inset 0 0 0 2px var(--dk-accent-ink); }
.calendar-day:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: -2px; }
.monthly-trend-bar.trend-income { background: var(--dk-income); }
.monthly-trend-bar.trend-expense { background: var(--dk-expense); }
.monthly-trend-filters input[type="checkbox"] { accent-color: var(--dk-income); }
.monthly-trend-filters .trend-expense input { accent-color: var(--dk-expense); }
.monthly-trend-tooltip { background: var(--dk-surface); color: var(--dk-text); border-color: var(--dk-control); font-size: 13px; }
.monthly-trend-value { color: var(--dk-text); }
.monthly-trend-value, .monthly-trend-axis, .monthly-trend-month, .monthly-trend-year { font-size: 12px; }
.monthly-trend-note, .monthly-trend-status, .metric-secondary, .calendar-view-note,
.landing-demo-note, .landing-policy, .account-sync-control, .account-read-banner span,
.release-footer, .dialog-item-meta, .recurring-copy small { font-size: 13px; }
.account-sync-control button { flex-shrink: 0; white-space: nowrap; }
.monthly-trend-row:hover, .monthly-trend-row:focus-visible { background-color: var(--dk-hover); }
.monthly-trend-row:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: -2px; }
.monthly-trend-presets button { border-radius: 8px; }
.monthly-trend-controls { align-items: end; }
.monthly-trend-filters label { min-height: 32px; font-size: 13px; }
.monthly-trend-filters input[type="checkbox"] { flex: 0 0 18px; width: 18px; height: 18px; }
.monthly-trend-dates label { font-size: 13px; }
.monthly-trend-controls input[type="month"] { font-size: 16px; border-color: var(--dk-control); }
dialog { color: var(--dk-text); background: var(--dk-surface); }
dialog::backdrop { background: rgb(38 50 56 / 40%); }
.dialog-header, .category-quick, .item-name-quick { background: var(--dk-surface); }
.dialog-header h2 { font-size: 18px; }
.dialog-total { color: var(--dk-muted); background: var(--dk-soft); }
.financial-safe-mode-dialog { border-color: var(--dk-error); }
.financial-safe-mode-keys, .backup-restore-review, .full-reset-option { color: var(--dk-error); background: var(--dk-error-bg); }
.backup-inspector-issues.warning { color: var(--dk-warning); background: var(--dk-warning-bg); }
.info-callout, .account-read-banner { background: var(--dk-info-bg); border-color: var(--dk-info); }
.info-warning { background: var(--dk-warning-bg); border-color: var(--dk-warning); }
.transaction-form label, .recurring-form label, .budget-form label, .search-form label,
.record-copy small, .recurring-copy small, .dialog-eyebrow, .empty-message, .amount-input-preview { font-size: 13px; }
.record-copy strong, .recurring-copy strong { font-size: 14px; overflow-wrap: anywhere; white-space: normal; }
.record-amount, .recurring-amount, .planned-amount, .calendar-list-record-amount { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.item-name-favorite-toggle { min-width: 48px; min-height: 48px; border-color: var(--dk-control); border-radius: 8px; }
.transaction-form .transaction-repeat-toggle { min-height: 48px; }
.transaction-form { grid-template-columns: minmax(0, 1fr); }
.transaction-form label { min-width: 0; }
.status-tag { border-radius: 6px; }
@media (max-width: 760px) {
  .theme-toolbar { padding: 12px 8px; }
  .theme-toggle { width: 48px; padding: 0; }
  .theme-toggle .theme-label { display: none; }
  .display-mode-control { max-width: calc(100% - 76px); }
  .display-mode-control > span { display: none; }
  .theme-status { position: relative; z-index: 41; }
  .dialog-header { padding: 16px; }
  .dialog-header-actions { gap: 6px; }
  .monthly-trend-presets { flex-wrap: wrap; }
  .monthly-trend-controls { flex-wrap: wrap; }
  .monthly-trend-controls input[type="month"] { padding: 6px; }
}
@media (max-width: 520px) {
  .record-item { grid-template-columns: minmax(0, 1fr) auto; }
  .record-item .record-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .record-amount { white-space: normal; overflow-wrap: anywhere; }
  .recurring-item { flex-wrap: wrap; }
  .form-actions { flex-wrap: wrap; }
  .monthly-trend-controls { grid-template-columns: minmax(0, 1fr); }
}

/* Dashboard composition, approved 2026-10-03. Widget identities and financial stores are unchanged. */
.dashboard-topbar, body > .page-shell { width: 100%; max-width: 1124px; margin: 0 auto; padding: 12px 32px; }
.dashboard-topbar { gap: 8px; position: relative; flex-wrap: wrap; }
.dashboard-topbar .theme-toggle { width: 48px; padding: 0; border-color: transparent; background: transparent; }
.dashboard-topbar .theme-label { display: none; }
.dashboard-topbar .theme-status { flex-basis: 100%; order: 5; }
.dashboard-brand { display: flex; align-items: center; gap: 7px; font-size: 20px; font-weight: 800; }
.dashboard-brand img { background: #fafaf7; border-radius: 8px; padding: 2px; }
.dashboard-top-actions { display: flex; margin-left: auto; gap: 6px; align-items: center; }
.dashboard-top-actions button, .dashboard-scenario-trigger, .dashboard-edit-trigger {
  border: 0; border-radius: 8px; padding: 8px 12px; background: transparent; color: var(--dk-text); cursor: pointer;
}
.dashboard-top-actions button:hover, .dashboard-scenario-trigger:hover, .dashboard-edit-trigger:hover { background: var(--dk-hover); }
#dashboard-menu-open { min-width: 48px; }
.page-shell .year-header, .page-shell .monthly-header { display: block; margin: 0 0 12px; padding: 0; }
.page-shell .year-picker, .page-shell .month-picker {
  display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; align-items: center;
  width: 100%; max-width: 420px; margin: 0 auto; padding: 0; gap: 16px; border: 0; background: transparent;
}
.dashboard-period-center { text-align: center; min-width: 0; }
.page-shell :is(#selected-year, #month-picker-label, .balance-summary .metric-value, .dashboard-analysis-toggle, .calendar-mobile-toolbar > strong) { color: var(--dk-text); }
.page-shell #page-title, .page-shell #monthly-title { margin: 0; font-size: 13px; font-weight: 700; color: var(--dk-muted); line-height: 1.6; }
.page-shell #selected-year, .page-shell #month-picker-label { margin: 0; min-width: 0; font-size: 28px; font-weight: 800; line-height: 1.4; }
.page-shell .year-button { width: 48px; height: 48px; padding: 0; }
.month-picker, #calendar-calendar-view { touch-action: pan-y pinch-zoom; }
.month-picker { user-select: none; }
/* Approved follow-up: desktop text action; mobile calendar/chart above previous month. */
.page-shell .monthly-header { position: relative; }
.dashboard-monthly-period { width: 100%; max-width: 420px; margin: 0 auto; }
.dashboard-monthly-year-row {
  display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; align-items: center; gap: 16px; margin-bottom: 8px;
}
.dashboard-monthly-year-center { grid-column: 2; text-align: center; min-width: 0; }
.dashboard-monthly-year-value { display: inline-block; position: relative; }
.page-shell .dashboard-monthly-year-value #monthly-title { line-height: 1.6; white-space: nowrap; }
#dashboard-year-open, .monthly-header > #dashboard-view-switch {
  height: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--dk-control); border-radius: 8px; background: transparent; color: var(--dk-text); cursor: pointer;
}
.monthly-header > #dashboard-view-switch { position: absolute; left: 0; bottom: -2px; padding: 0 18px; }
#dashboard-view-switch[hidden] { display: none; }
#dashboard-view-switch > svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#dashboard-view-switch > svg,
#dashboard-view-switch.is-monthly-return .dashboard-period-tooltip { display: none; }
#dashboard-view-switch .dashboard-switch-label { display: inline; }
#dashboard-year-open.dashboard-period-control { border: 0; padding: 0 10px; gap: 8px; }
.dashboard-period-control > .year-picker-chevron { width: 12px; height: 12px; color: var(--dk-muted); flex-shrink: 0; }
.dashboard-period-control[aria-expanded="true"] { background: var(--dk-selected); color: var(--dk-accent-ink); border-color: var(--dk-accent-ink); }
.dashboard-period-control[aria-expanded="true"] .year-picker-chevron { transform: rotate(180deg); }
.dashboard-period-control:hover, .monthly-header > #dashboard-view-switch:hover { background: var(--dk-hover); }
.dashboard-period-control:focus-visible, .monthly-header > #dashboard-view-switch:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 4px; }
.dashboard-period-tooltip {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 45; visibility: hidden;
  padding: 6px 8px; border: 1px solid var(--dk-control); border-radius: 6px; background: var(--dk-surface);
  color: var(--dk-text); font-size: 12px; font-weight: 700; white-space: nowrap;
}
#dashboard-view-switch:focus-visible:not(.is-tooltip-dismissed) .dashboard-period-tooltip { visibility: visible; }
@media (hover: hover) and (pointer: fine) {
  #dashboard-view-switch:hover:not(.is-tooltip-dismissed) .dashboard-period-tooltip { visibility: visible; }
}
.dashboard-year-dialog { width: 284px; max-width: calc(100vw - 16px); margin: 0; padding: 14px; border: 1px solid var(--dk-control); border-radius: 14px; }
.dashboard-year-dialog::backdrop { background: transparent; }
.dashboard-year-range { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 8px; margin-bottom: 12px; }
.dashboard-year-range p { margin: 0; text-align: center; font-size: 14px; font-weight: 700; }
#dashboard-year-dialog button { min-width: 0; height: 44px; min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--dk-text); cursor: pointer; }
.dashboard-year-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
#dashboard-year-options button { font-size: 16px; font-weight: 700; }
#dashboard-year-dialog button:hover { background: var(--dk-hover); }
#dashboard-year-options button[aria-pressed="true"] { border-color: var(--dk-accent-ink); color: var(--dk-accent-ink); background: var(--dk-selected); }
#annual-view, #monthly-dashboard-widgets { display: flex; flex-direction: column; gap: 12px; }
#annual-view[hidden], #monthly-view[hidden], #back-to-annual[hidden], .dashboard-menu-actions[hidden] { display: none; }
#annual-view > [data-dashboard-widget], #monthly-dashboard-widgets > [data-dashboard-widget] { margin: 0; }
.page-shell .scenario-comparison { padding: 0; border: 0; background: none; border-radius: 0; gap: 12px; min-width: 0; }
.dashboard-scenario-trigger { text-align: left; color: var(--dk-muted); font-weight: 400; padding-left: 4px; }
.dashboard-edit-trigger { flex-shrink: 0; padding-right: 4px; color: var(--dk-muted); }
.page-shell .summary { grid-template-columns: repeat(3,minmax(0,1fr)); padding: 8px 0; box-shadow: none; background: var(--dk-surface); gap: 0; }
.page-shell .summary-item { display: block; padding: 12px 22px; min-width: 0; background: transparent; border: 0; border-right: 1px solid var(--dk-line); border-radius: 0; }
.page-shell .summary-item:last-child { border-right: 0; }
.page-shell .metric-label { margin: 0 0 5px; font-size: 13px; color: var(--dk-muted); }
.page-shell .metric-value { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.page-shell .metric-secondary { margin: 5px 0 0; font-size: 12px; }
.page-shell .summary-interactive::after, .page-shell .detail-interactive::after { display: none; }
.page-shell .monthly-entry-card-action, .page-shell .safe-money-breakdown { display: none; }
.page-shell :is(.metric-label,.safe-money-label,.planned-label,.annual-budget-card-head > span,.monthly-entry-card h2)::after,
.dashboard-analysis-toggle::after {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 6px; vertical-align: -3px;
  background: var(--dk-muted); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m6 4 4 4-4 4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
.dashboard-money-group, .annual-insight-grid { border: 1px solid var(--dk-line); border-radius: 16px; background: var(--dk-surface); }
.dashboard-money-group { display: flex; flex-wrap: wrap; overflow: hidden; }
.dashboard-money-group > .monthly-entry-card { flex: 1 1 0; width: auto; }
.dashboard-money-group > #monthly-safe-money { flex-grow: 1.3; }
.dashboard-money-group > .monthly-entry-card, .page-shell .annual-insight-grid > article {
  display: block; min-width: 0; min-height: 0; margin: 0; padding: 16px 20px; border: 0; border-radius: 0;
  border-right: 1px solid var(--dk-line); background: transparent; box-shadow: none; text-align: left;
}
.dashboard-money-group > .monthly-entry-card:last-child, .page-shell .annual-insight-grid > article:last-child { border-right: 0; }
.page-shell .monthly-entry-card h2, .page-shell .safe-money-label { margin: 0 0 5px; font-size: 13px; font-weight: 400; color: var(--dk-muted); }
.page-shell .monthly-entry-card-value, .page-shell .safe-money-value { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 700; overflow-wrap: anywhere; }
.page-shell .safe-money.warning .safe-money-value { color: var(--dk-expense); }
.page-shell .safe-money.warning { background: var(--dk-surface); border-color: var(--dk-line); }
.page-shell .monthly-entry-card-copy, .page-shell .safe-money-main { display: block; min-width: 0; }
.page-shell .monthly-planned-values { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; margin: 0; }
.dashboard-analysis-group { border-bottom: 1px solid var(--dk-line); }
.dashboard-analysis-toggle { list-style: none; cursor: pointer; padding: 14px 4px; min-height: 48px; font-size: 14px; font-weight: 800; }
.dashboard-analysis-toggle::-webkit-details-marker { display: none; }
.dashboard-analysis-toggle::after { transform: rotate(90deg); }
.dashboard-analysis-group[open] > .dashboard-analysis-toggle::after { transform: rotate(-90deg); }
.dashboard-analysis-items { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 12px; }
.dashboard-analysis-items > .monthly-entry-card { flex: 1 1 180px; min-width: 0; min-height: 80px; padding: 14px; margin: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; }
.page-shell .monthly-entry-card .section-heading { margin: 0; display: block; }
.page-shell .monthly-overview-launch { display: block; }
.page-shell .monthly-closing-status, #monthly-closing-status, #monthly-category-analysis-status { display: none; }
.page-shell .calendar-section { margin: 0; border: 0; background: none; box-shadow: none; }
.page-shell .calendar-mobile-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 8px; }
.calendar-mobile-toolbar strong { font-size: 14px; }
.dashboard-calendar-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.page-shell .calendar-view-switch { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--dk-line); border-radius: 10px; background: var(--dk-surface); }
.page-shell .calendar-view-switch button { padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--dk-text); }
.page-shell .calendar-view-switch button[aria-pressed="true"] { background: var(--dk-action); color: var(--dk-on-action); }
.dashboard-calendar-actions > button { min-width: 48px; padding: 6px 10px; }
[data-dashboard-widget][hidden] { display: none !important; }
.page-shell .calendar-scroll { border: 1px solid var(--dk-line); border-radius: 16px; overflow: hidden; }
.page-shell .annual-insight-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; overflow: hidden; }
.page-shell .safe-card-heading { flex-wrap: wrap; }
.page-shell .safe-month-nav { margin-left: auto; }
.page-shell .annual-budget-card-head { display: block; }
.page-shell .annual-budget-card-head > span { font-size: 13px; color: var(--dk-muted); }
.page-shell .annual-budget-card-head strong { display: block; font-size: 18px; overflow-wrap: anywhere; }
.page-shell .annual-insight-grid :is(p,small) { overflow-wrap: anywhere; }
.page-shell .planned-groups { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.page-shell .planned-group { min-width: 0; padding: 0; border: 0; background: none; }
.page-shell .planned-group > h3, .page-shell .planned-section > .section-heading p { display: none; }
.page-shell .planned-grid { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--dk-line); border-radius: 16px; overflow: hidden; }
.page-shell .planned-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px 12px; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--dk-line); border-radius: 0; background: var(--dk-surface); box-shadow: none; }
.page-shell .planned-card:last-child { border-bottom: 0; }
.page-shell .planned-heading { flex-wrap: wrap; gap: 4px 8px; }
.page-shell .planned-label { font-size: 13px; margin: 0; }
.page-shell .planned-value { font-size: 16px; margin: 0; max-width: 100%; overflow-wrap: anywhere; }
.page-shell .planned-detail { grid-column: 1/-1; font-size: 12px; margin: 0; }
.page-shell .planned-card:not(.goal-card) > .planned-detail { display: none; }
.page-shell .schedule-list { grid-column: 1/-1; margin: 0; }
.page-shell .fixed-recurring-totals { margin: 0; font-size: 13px; }
.page-shell .goal-card { display: block; }
.page-shell .goal-card > * + * { margin-top: 10px; }
.page-shell .section-heading { margin-bottom: 8px; }
.page-shell .section-heading h2 { font-size: 14px; }
.dashboard-menu-dialog, .dashboard-scenario-dialog { width: min(420px,calc(100% - 24px)); padding: 0; border: 1px solid var(--dk-line); border-radius: 16px; }
.dashboard-menu-body { padding: 16px; display: grid; gap: 16px; }
.dashboard-menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dashboard-menu-actions button { text-align: left; }
.dashboard-menu-dialog .display-mode-control, .dashboard-menu-dialog .home-install-control,
.dashboard-menu-dialog .account-sync-control { position: static; width: 100%; max-width: none; margin: 0; padding: 0; box-shadow: none; border: 0; background: transparent; }
.dashboard-menu-dialog .account-sync-control { display: flex; justify-content: flex-end; }
.dashboard-menu-dialog .account-sync-control[hidden] { display: none; }
#account-sync-status { display: none; }
.dashboard-menu-dialog .display-mode-control { display: flex; flex-wrap: wrap; }
.dashboard-menu-dialog .display-mode-control[hidden] { display: none; }
.dashboard-menu-dialog .home-install-control p { font-size: 12px; overflow-wrap: anywhere; }
.dashboard-scenario-note { padding: 0 16px 16px; font-size: 13px; color: var(--dk-muted); }
.dashboard-scenario-dialog .scenario-control { display: grid; gap: 8px; }
.dashboard-scenario-dialog .scenario-control > span { display: none; }
.dashboard-scenario-dialog .scenario-control button { border: 1px solid var(--dk-control); border-radius: 8px; }
@media (max-width: 760px) {
  .dashboard-topbar, body > .page-shell { padding: 8px 16px; }
  .dashboard-topbar { gap: 2px; }
  .dashboard-brand { gap: 5px; font-size: 18px; }
  .dashboard-brand img { width: 24px; height: 24px; }
  .dashboard-top-actions { gap: 0; }
  .dashboard-top-actions button { padding-inline: 8px; font-size: 13px; }
  .page-shell .summary { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0; }
  .page-shell .summary-item { padding: 14px 16px; }
  .page-shell .summary-item:nth-child(2) { border-right: 0; }
  .page-shell .balance-summary { grid-column: 1/-1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--dk-line); padding-block: 10px; }
  .page-shell .balance-summary .metric-label { margin: 0; }
  .page-shell .balance-summary .metric-value { font-size: 18px; }
  .page-shell .metric-value { font-size: 22px; }
  .dashboard-money-group > .monthly-entry-card { padding: 12px 16px; flex: 1 1 40%; }
  .dashboard-money-group > #monthly-safe-money { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--dk-line); }
  .dashboard-money-group #monthly-safe-money .safe-money-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
  .dashboard-money-group #monthly-safe-money .safe-money-label { margin: 0; }
  .page-shell .annual-insight-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .page-shell .annual-insight-grid > #annual-safe-money { grid-column: 1/-1; border-right: 0; border-bottom: 1px solid var(--dk-line); }
  .page-shell .annual-insight-grid > article { padding: 14px 16px; }
  .page-shell .planned-groups { grid-template-columns: minmax(0,1fr); }
  .page-shell .planned-card { grid-template-columns: minmax(0,1fr); }
  .page-shell .planned-value, .page-shell .fixed-recurring-totals { text-align: right; }
  .dashboard-analysis-items { flex-direction: column; }
  .dashboard-analysis-items > .monthly-entry-card { flex: initial; }
}
@media (max-width: 360px) {
  .dashboard-brand img { display: none; }
  .page-shell .metric-value { font-size: 20px; }
}

/* Final handoff, 2026-10-03: presentation only; retained widget IDs/order and data contracts. */
/* Inset hover stays inside grouped/clipped cards and paints all four edges without reflow. */
:root { --dashboard-hover-line: #b8bfba; }
html[data-theme="dark"] { --dashboard-hover-line: #a4aca9; }
@media (hover: hover) {
  .page-shell :is(.summary-interactive, .monthly-entry-card, .detail-interactive, .planned-card-interactive, .month-card):hover:not(:focus-visible) {
    outline: none; border-color: var(--dk-line); transform: none;
    box-shadow: inset 0 0 0 1px var(--dashboard-hover-line);
  }
}
.page-shell :is(.summary-interactive, .monthly-entry-card, .detail-interactive, .planned-card-interactive, .month-card):focus-visible {
  outline: 2px solid var(--dk-accent-ink); outline-offset: -2px;
}
.dashboard-brand { font-size: 21px; letter-spacing: -.7px; gap: 8px; }
.dashboard-brand strong > span { color: var(--dk-accent-ink); }
.dashboard-brand-mark { display: grid; flex: 0 0 32px; }
.dashboard-brand-mark img { grid-area: 1/1; width: 32px; height: 32px; padding: 0; background: none; border-radius: 0; display: block; }
.dashboard-brand-mark .brand-dark { display: none; }
html[data-theme="dark"] .dashboard-brand-mark .brand-dark { display: block; }
html[data-theme="dark"] .dashboard-brand-mark .brand-light { display: none; }
.dashboard-topbar .theme-toggle { border: 1px solid var(--dk-accent-ink); border-radius: 12px; background: var(--dk-selected); color: var(--dk-accent-ink); }
.dashboard-topbar .theme-toggle svg, #dashboard-menu-open svg { width: 22px; height: 22px; }
#dashboard-menu-open { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--dk-control); border-radius: 12px; }
.page-shell .month-picker > .year-button { align-self: end; margin-bottom: -4px; }
.page-shell .summary { padding: 0; }
.page-shell .summary-item { display: grid; grid-template-rows: 1fr auto 1fr; gap: 2px; min-height: 116px; padding: 14px 22px; }
.page-shell .summary-item .metric-label { align-self: start; margin: 0; }
.page-shell .summary-item .metric-value { grid-row: 2; align-self: center; justify-self: end; text-align: right; min-width: 0; max-width: 100%; transform: translateY(4px); }
.page-shell .summary-item .metric-secondary { grid-row: 3; align-self: end; text-align: right; margin: 0; }
.dashboard-money-group > #monthly-safe-money { flex-grow: 1; }
.dashboard-money-group > .monthly-entry-card { padding: 16px 22px; }
.dashboard-money-group :is(.monthly-entry-card-copy, .safe-money-main) { display: grid; grid-template-rows: 1fr auto 1fr; gap: 2px; min-height: 84px; height: 100%; }
.dashboard-money-group #monthly-safe-money .safe-money-main { display: grid; align-content: stretch; }
.dashboard-money-group :is(h2, .safe-money-label) { grid-row: 1; align-self: start; margin: 0; }
.dashboard-money-group :is(.monthly-entry-card-value, .safe-money-value, .monthly-planned-values) { grid-row: 2; justify-self: end; align-self: center; text-align: right; min-width: 0; max-width: 100%; font-size: 26px; font-weight: 800; line-height: 1.3; transform: translateY(4px); }
.dashboard-money-group .monthly-planned-values { display: grid; gap: 2px 10px; }
.monthly-planned-values > :is(.income, .expense) { display: grid; grid-template-columns: 26px minmax(0,1fr); align-items: center; gap: 0 8px; }
.monthly-planned-values small { font-size: 12px; font-weight: 400; }
.monthly-planned-values strong { font-size: inherit; font-weight: 800; overflow-wrap: anywhere; }
.dashboard-money-sign { display: inline-block; position: relative; width: .72em; color: transparent; vertical-align: baseline; }
.dashboard-money-sign::before, .dashboard-money-sign.is-positive::after { content: ""; position: absolute; background: currentColor; color: var(--dk-expense); }
.income .dashboard-money-sign::before, .income .dashboard-money-sign::after { color: var(--dk-income); }
.dashboard-money-sign::before { width: .54em; height: max(2px,.105em); left: .09em; top: calc(50% - .0525em); }
.dashboard-money-sign.is-positive::after { height: .54em; width: max(2px,.105em); left: calc(.36em - .0525em); top: calc(50% - .27em); }
@media (forced-colors: active) { .dashboard-money-sign { color: inherit; } .dashboard-money-sign::before, .dashboard-money-sign::after { display: none; } }
.quick-add { right: calc(24px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); }
.quick-add-trigger { width: 56px; height: 56px; padding: 0; border-radius: 50%; }
.quick-add-trigger > span:first-child { font-size: 28px; }
.quick-add-label { display: none; }
body > .page-shell { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.page-shell .calendar-day { align-items: stretch; padding-right: 6px; }
.page-shell .day-number { align-self: start; font-size: 14px; }
.page-shell .day-totals, .page-shell .calendar-day .day-compact-totals { text-align: right; width: 100%; }
@media (min-width: 761px) {
  .page-shell .day-totals { grid-template-columns: minmax(0,1fr); font-size: 18px; line-height: 1.25; }
  .page-shell .day-totals > .day-total-planned { font-size: 11px; }
}
@media (max-width: 760px) {
  .monthly-header > #dashboard-view-switch { width: 44px; left: 0; top: 0; bottom: auto; padding: 0; }
  .monthly-header > #dashboard-view-switch > svg { display: block; }
  .monthly-header > #dashboard-view-switch .dashboard-switch-label { display: none; }
  .dashboard-topbar { gap: 4px; }
  .dashboard-top-actions { gap: 4px; }
  #dashboard-menu-open { width: 48px; padding: 0; }
  #dashboard-menu-open > span { display: none; }
  .dashboard-brand { font-size: 19px; gap: 6px; }
  .page-shell .summary-item { padding: 12px 16px; min-height: 112px; }
  .page-shell .summary-item .metric-value { font-size: 23px; }
  .page-shell .balance-summary { display: flex; min-height: 44px; padding: 10px 16px; }
  .page-shell .balance-summary .metric-label { align-self: center; }
  .page-shell .balance-summary .metric-value { font-size: 18px; transform: none; }
  .dashboard-money-group > .monthly-entry-card { padding: 12px 16px; }
  .dashboard-money-group :is(.monthly-entry-card-copy, .safe-money-main) { min-height: 80px; }
  .dashboard-money-group :is(.monthly-entry-card-value, .safe-money-value, .monthly-planned-values) { font-size: 16px; }
  .dashboard-money-group > #monthly-safe-money { padding-block: 10px; }
  .dashboard-money-group #monthly-safe-money .safe-money-main { display: flex; min-height: 28px; }
  .dashboard-money-group #monthly-safe-money .safe-money-label { align-self: center; }
  .dashboard-money-group #monthly-safe-money .safe-money-value { transform: none; }
  .dashboard-money-group #monthly-safe-money .safe-money-main > small:empty { display: none; }
  .quick-add { right: calc(16px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); }
  .page-shell .day-number { font-size: 12px; }
}
@media (max-width: 360px) {
  .dashboard-brand { font-size: 17px; gap: 4px; }
  .dashboard-top-actions { gap: 2px; }
  .dashboard-top-actions #dashboard-view-switch { padding-inline: 4px; font-size: 12px; }
  .page-shell .summary-item .metric-value { font-size: 21px; }
  .page-shell .balance-summary .metric-value { font-size: 18px; }
  .page-shell .calendar-day { padding-right: 3px; }
}

/* Keep the existing card layout; shrink long amounts only, then wrap Korean unit groups. */
.page-shell .dashboard-fit-money {
  display: block; min-width: 0; max-width: 100%; width: 100%;
  white-space: nowrap; overflow-wrap: normal; word-break: normal;
  transition: none;
}
.page-shell .dashboard-fit-money.is-unit-wrap { white-space: normal; }
.dashboard-money-unit { display: inline-block; white-space: nowrap; }
.dashboard-fit-money, .dashboard-fit-money * { transition: none; }
.page-shell .summary-item { grid-template-columns: minmax(0, 1fr); }
.dashboard-money-group :is(.monthly-entry-card-copy, .safe-money-main) { grid-template-columns: minmax(0, 1fr); }
.monthly-planned-values strong.dashboard-fit-money { width: auto; }
@media (max-width: 760px) {
  .page-shell .balance-summary .dashboard-fit-money,
  .dashboard-money-group #monthly-safe-money .dashboard-fit-money { width: auto; }
}
.page-shell .dashboard-fit-money.is-money-overflow { overflow: hidden; text-overflow: ellipsis; }
.dashboard-fit-money.is-money-overflow .dashboard-money-unit {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
}