@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./assets/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./assets/fonts/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("./assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  color-scheme: dark;
  --page: #050706;
  --surface: #0b0f0d;
  --surface-raised: #121915;
  --ink: #edf4ef;
  --muted: #a4b4ab;
  --line: #27332c;
  --accent: #91e2b9;
  --accent-dark: #72d4a2;
  --accent-ink: #102018;
  --income: #a3ebc6;
  --income-bg: #14241a;
  --repayment: #ffb49f;
  --repayment-bg: #291a16;
  --brand-bg: #000000;
  --hover-line: #516f5a;
  --control-bg: #070b08;
  --scroll-thumb: #506b59;
  --scroll-track: #080c09;
  --heading-bg: #0d1510;
  --weekday-bg: #090d0a;
  --weekday-ink: #b8c8be;
  --empty-bg: #070a08;
  --day-hover: #101a13;
  --today-bg: #16281c;
  --day-number-hover: #1d3023;
  --weekend-ink: #b1c5b9;
  --secondary-ink: #c1d3c7;
  --more-hover: #17291d;
  --income-line: #2d5139;
  --income-summary: #101f15;
  --repayment-line: #4b3229;
  --repayment-summary: #21150f;
  --footer-ink: #9bb1a2;
  --notice-line: #705637;
  --notice-bg: #2a2011;
  --notice-ink: #f5d6a8;
  --error-line: #754c3e;
  --error-ink: #ffcab8;
  --button-line: #364b3d;
  --button-hover-line: #618b71;
  --button-hover-bg: #1b2c20;
  --danger-line: #6a4437;
  --danger-bg: #291b16;
  --danger-ink: #ffc5b3;
  --danger-hover-line: #c08772;
  --danger-hover-bg: #3d251c;
  --dialog-line: #3d5845;
  --shadow-color: #000000aa;
  --backdrop: #000000c7;
  --icon-ink: #c9d8ce;
  --icon-hover-bg: #203626;
  --day-entry-line: #304338;
  --field-line: #435c4a;
  --placeholder: #94aa9b;
  --disabled-opacity: .42;
  --entry-hover-brightness: 1.17;
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #f3f6f1;
  --surface: #ffffff;
  --surface-raised: #edf4ee;
  --ink: #172b20;
  --muted: #576e60;
  --line: #cddbd0;
  --accent: #246b49;
  --accent-dark: #1b583b;
  --accent-ink: #f7fff9;
  --income: #236443;
  --income-bg: #e4f4e9;
  --repayment: #9a452e;
  --repayment-bg: #fff0e8;
  --hover-line: #7eaa8e;
  --control-bg: #f7faf5;
  --scroll-thumb: #95b49f;
  --scroll-track: #e5eee6;
  --heading-bg: #edf5ed;
  --weekday-bg: #f6f8f1;
  --weekday-ink: #536b5c;
  --empty-bg: #f6f8f2;
  --day-hover: #eef6ee;
  --today-bg: #e0f2e4;
  --day-number-hover: #d9ede0;
  --weekend-ink: #657a6d;
  --secondary-ink: #405e4c;
  --more-hover: #deeee1;
  --income-line: #bedfc9;
  --income-summary: #e9f5ec;
  --repayment-line: #efd0be;
  --repayment-summary: #fff2e9;
  --footer-ink: #5e7266;
  --notice-line: #e4c99d;
  --notice-bg: #fff6e7;
  --notice-ink: #775019;
  --error-line: #daab97;
  --error-ink: #8f3925;
  --button-line: #bacebe;
  --button-hover-line: #7b9c84;
  --button-hover-bg: #dfede2;
  --danger-line: #ddb4a3;
  --danger-bg: #fff2ea;
  --danger-ink: #93402a;
  --danger-hover-line: #bd8066;
  --danger-hover-bg: #f9ded0;
  --dialog-line: #b4cbbc;
  --shadow-color: #1d3c2526;
  --backdrop: #172b204d;
  --icon-ink: #506b5b;
  --icon-hover-bg: #dfede2;
  --day-entry-line: #cdded1;
  --field-line: #789680;
  --placeholder: #5f7365;
  --disabled-opacity: .55;
  --entry-hover-brightness: .97;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--page); color: var(--ink); font-size: 15px; line-height: 1.55; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; border: 0; -webkit-tap-highlight-color: transparent; }
button, input, select { touch-action: manipulation; }
button:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
svg, img { display: block; }
a { color: var(--accent); }
.app-shell { max-width: 1504px; margin-inline: auto; padding-inline: 32px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 100px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 13px; color: var(--ink); text-decoration: none; flex-shrink: 0; }
.brand-mark { display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border-radius: 14px; background: var(--brand-bg); flex-shrink: 0; }
.brand-mark img { width: 52px; height: 52px; object-fit: contain; }
.brand-mark svg { width: 40px; height: 40px; }
.brand-name { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.9px; line-height: 1.15; }
.brand-caption { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 500; }
.header-actions { display: flex; align-items: center; gap: 22px; min-width: 0; }
.theme-toggle { display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-width: 102px; min-height: 42px; padding: 8px 12px; border: 1px solid var(--button-line); border-radius: 10px; background: var(--surface-raised); color: var(--ink); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.theme-toggle:hover { border-color: var(--button-hover-line); background: var(--button-hover-bg); }
.theme-icon { display: inline-grid; place-items: center; width: 19px; height: 19px; flex-shrink: 0; color: var(--accent); }
.theme-icon svg { width: 19px; height: 19px; }
.theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-icon-sun { display: block; }
:root[data-theme="light"] .theme-icon-moon { display: none; }
.privacy-note { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.privacy-note > span { color: var(--accent); font-size: 10px; }
.workspace { padding-top: 28px; }
.page-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 25px; }
.eyebrow { margin: 0 0 7px; color: var(--accent); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; }
.page-title { margin: 0; font-size: clamp(27px, 3vw, 34px); font-weight: 750; letter-spacing: -1.1px; line-height: 1.2; }
.intro-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.calendar-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 12px; color: var(--muted); font-size: 12px; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.legend-dot-income, .legend-dot-repayment { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.legend-dot-income { background: var(--income); }
.legend-dot-repayment { background: var(--repayment); }
.calendar-help, .calendar-unit-note { color: var(--muted); font-size: 11px; }
.legend-note { margin-left: auto; color: var(--muted); font-size: 11px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.month-navigation { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.nav-button, .today-button, .view-button { min-height: 42px; background: transparent; border-radius: 9px; }
.nav-button { display: grid; place-items: center; width: 42px; border: 1px solid var(--line); background: var(--surface); font-size: 17px; }
.today-button { padding: 8px 16px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 650; }
.nav-button:hover, .today-button:hover { border-color: var(--hover-line); background: var(--surface-raised); }
.period-navigation-label { margin-left: 12px; font-size: 15px; font-weight: 700; }
.calendar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.view-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); background: var(--control-bg); border-radius: 11px; }
.view-button { min-width: 92px; min-height: 38px; padding: 6px 14px; color: var(--muted); font-size: 12px; font-weight: 650; }
.view-button:hover { color: var(--ink); }
.view-button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.calendar-layout { display: grid; gap: 16px; align-items: start; }
.calendar-layout[data-view="1"] { grid-template-columns: minmax(0, 1fr); }
.calendar-layout[data-view="3"] { grid-template-columns: repeat(3, minmax(235px, 1fr)); overflow-x: auto; padding-bottom: 4px; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
.month-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.month-heading { margin: 0; padding: 17px 18px; font-size: 18px; font-weight: 750; letter-spacing: -.4px; background: var(--heading-bg); }
.weekday-row, .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekday-row { padding: 10px 0; border-block: 1px solid var(--line); background: var(--weekday-bg); color: var(--weekday-ink); font-size: 11px; font-weight: 650; text-align: center; }
.calendar-day { position: relative; min-width: 0; min-height: 92px; padding: 4px 2px 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day:nth-last-child(-n+7) { border-bottom: 0; }
.calendar-day.is-empty { background: var(--empty-bg); cursor: default; }
.calendar-day:not(.is-empty):hover { background: var(--day-hover); }
.calendar-day.is-today { background: var(--today-bg); }
.day-number { display: grid; place-items: center; width: min(40px, 100%); min-height: 40px; margin: 0 auto 3px; border-radius: 11px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.day-number:hover { background: var(--day-number-hover); }
.is-weekend .day-number { color: var(--weekend-ink); }
.is-today .day-number { background: var(--accent); color: var(--accent-ink); font-weight: 800; }
.day-entries { display: flex; flex-direction: column; gap: 4px; }
.calendar-entry { display: block; width: 100%; min-width: 0; min-height: 42px; padding: 5px 2px; border-radius: 5px; text-align: left; line-height: 1.3; }
.calendar-entry:hover { filter: brightness(var(--entry-hover-brightness)); }
.entry-income { background: var(--income-bg); color: var(--income); }
.entry-repayment { background: var(--repayment-bg); color: var(--repayment); }
.entry-amount { display: block; width: 100%; overflow: hidden; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.4px; white-space: nowrap; }
.entry-value { display: inline-block; transform-origin: left center; }
.entry-bank { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 500; }
.day-more { display: block; width: 100%; min-height: 40px; padding: 3px 1px; border-radius: 5px; background: transparent; color: var(--secondary-ink); font-size: 11px; text-align: left; }
.day-more:hover { color: var(--accent); background: var(--more-hover); }
.calendar-layout[data-view="1"] .calendar-day { min-height: 110px; padding: 7px; }
.calendar-layout[data-view="1"] .day-number { margin-left: 0; font-size: 14px; }
.calendar-layout[data-view="1"] .calendar-entry { padding: 6px 8px; }
.calendar-layout[data-view="1"] .entry-amount { font-size: 15px; }
.calendar-layout[data-view="1"] .entry-bank { font-size: 12px; }
.summary { margin-top: 26px; }
.summary-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 13px; }
.summary-heading h2 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 750; letter-spacing: -.35px; }
.summary-period { margin: 0; color: var(--muted); font-size: 12px; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.summary-card { position: relative; min-width: 0; padding: 20px 23px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.summary-income { border-color: var(--income-line); background: var(--income-summary); }
.summary-repayment { border-color: var(--repayment-line); background: var(--repayment-summary); }
.summary-icon { position: absolute; display: grid; place-items: center; top: 19px; right: 21px; width: 32px; height: 32px; border: 1px solid currentColor; border-radius: 10px; font-size: 18px; }
.summary-income .summary-icon, .summary-income .summary-value { color: var(--income); }
.summary-repayment .summary-icon, .summary-repayment .summary-value { color: var(--repayment); }
.summary-label { margin: 0 42px 9px 0; color: var(--secondary-ink); font-size: 12px; font-weight: 550; }
.summary-value { margin: 0; font-size: clamp(26px, 3vw, 35px); font-weight: 750; line-height: 1.3; letter-spacing: -1px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.summary-note { margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.app-footer { display: flex; align-items: start; justify-content: space-between; gap: 24px; padding: 24px 0 28px; color: var(--footer-ink); font-size: 11px; }
.footer-note { margin: 0; max-width: 720px; }
.text-button { min-height: 42px; padding: 7px 0; background: transparent; color: var(--accent); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.notice { margin: 0 0 18px; padding: 12px 15px; border: 1px solid var(--notice-line); border-radius: 9px; background: var(--notice-bg); color: var(--notice-ink); font-size: 13px; }
.notice-error { border-color: var(--error-line); background: var(--repayment-bg); color: var(--error-ink); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 44px; padding: 9px 16px; border: 1px solid var(--button-line); border-radius: 9px; background: var(--surface-raised); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.4; text-decoration: none; }
.button:hover { border-color: var(--button-hover-line); background: var(--button-hover-bg); }
.button-primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.button-primary:hover { border-color: var(--accent-dark); background: var(--accent-dark); }
.button-quiet { background: transparent; }
.button-small { min-height: 40px; padding: 7px 11px; font-size: 11px; }
.button-danger { border-color: var(--danger-line); background: var(--danger-bg); color: var(--danger-ink); }
.button-danger:hover { border-color: var(--danger-hover-line); background: var(--danger-hover-bg); }
.dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 0; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--dialog-line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 100px var(--shadow-color); }
.dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(4px); }
.dialog-header { position: sticky; z-index: 1; top: 0; display: flex; justify-content: space-between; align-items: start; gap: 15px; padding: 22px 25px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.dialog-kicker { margin: 0 0 5px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.dialog-title { margin: 0; font-size: 23px; font-weight: 750; line-height: 1.3; letter-spacing: -.6px; }
.icon-button { display: grid; place-items: center; width: 42px; min-height: 42px; margin: -5px -8px 0 0; border-radius: 9px; background: transparent; color: var(--icon-ink); font-size: 25px; line-height: 1; flex-shrink: 0; }
.icon-button:hover { background: var(--icon-hover-bg); color: var(--ink); }
.dialog-body { padding: 19px 25px 24px; }
.day-records { display: flex; flex-direction: column; gap: 8px; }
.day-records-title { margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 650; }
.day-empty { margin: 0 0 18px; padding: 7px 0 15px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.day-entry { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px; border: 1px solid var(--day-entry-line); border-radius: 9px; }
.day-entry-copy { flex: 1; min-width: 110px; overflow-wrap: anywhere; font-size: 13px; }
.day-entry-copy > strong, .day-entry-copy > span { display: block; }
.day-entry-copy > strong { font-weight: 750; }
.day-entry-copy > span { margin-top: 3px; font-size: 12px; }
.day-entry-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.delete-question { align-self: center; font-size: 12px; }
.delete-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex-basis: 100%; font-size: 12px; }
.entry-form { margin-top: 18px; }
.field { display: block; min-width: 0; margin-bottom: 17px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field-label { display: block; margin: 0 0 7px; font-size: 12px; font-weight: 700; }
.field input, .field select, .entry-form input:not([type="hidden"]), .entry-form select { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 11px 12px; border: 1px solid var(--field-line); border-radius: 8px; background: var(--control-bg); color: var(--ink); font-size: 16px; line-height: 1.4; }
.field input::placeholder { color: var(--placeholder); opacity: 1; }
.field input:focus, .field select:focus { border-color: var(--accent); }
.field input[type="date"] { font-variant-numeric: tabular-nums; }
.field-hint { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.form-error { margin: 0 0 15px; padding: 11px 12px; border: 1px solid var(--danger-line); border-radius: 8px; background: var(--repayment-bg); color: var(--danger-ink); font-size: 12px; }
.form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 21px; }
.form-actions .button-primary { min-width: 126px; }
.install-steps { margin: 6px 0 18px; padding-left: 20px; font-size: 14px; }
.install-steps li { margin-bottom: 13px; padding-left: 3px; }
.install-dialog p { font-size: 13px; color: var(--muted); }
.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; }
@media (max-width: 1099px) {
  .app-shell { padding-inline: 24px; }
  .calendar-layout { gap: 12px; }
  .calendar-layout[data-view="3"] .month-heading { padding: 16px 11px; font-size: 17px; }
  .calendar-layout[data-view="3"] .calendar-day { padding-inline: 0; }
  .calendar-layout[data-view="3"] .calendar-entry { padding-inline: 1px; }
  .calendar-layout[data-view="3"] .entry-amount { font-size: 11px; letter-spacing: -.5px; }
  .calendar-layout[data-view="3"] .entry-bank { font-size: 10px; }
}
@media (max-width: 719px) {
  .app-shell { padding-inline: 16px; }
  .topbar { min-height: 88px; gap: 12px; }
  .brand { gap: 10px; }
  .brand-mark, .brand-mark img { width: 44px; height: 44px; }
  .brand-mark { border-radius: 12px; }
  .brand-name { font-size: 21px; letter-spacing: -.7px; }
  .brand-caption { font-size: 10px; }
  .header-actions { gap: 8px; }
  .privacy-note { display: none; }
  .theme-toggle { width: 42px; min-width: 42px; min-height: 42px; padding: 10px; }
  .theme-label { display: none; }
  .header-actions .button { min-height: 44px; padding-inline: 10px; font-size: 11px; }
  .header-actions:has(#install-button:not([hidden])) #install-help { display: none; }
  .text-button { font-size: 10px; }
  .workspace { padding-top: 23px; }
  .page-intro { display: block; margin-bottom: 20px; }
  .page-title { font-size: 28px; letter-spacing: -.8px; }
  .intro-note { margin-top: 12px; font-size: 12px; }
  .calendar-legend { gap: 7px 15px; font-size: 11px; }
  .calendar-help, .calendar-unit-note { font-size: 10px; }
  .legend-note { flex-basis: 100%; margin-left: 0; font-size: 10px; }
  .toolbar { gap: 12px; }
  .month-navigation { gap: 4px; }
  .nav-button { width: 44px; min-height: 44px; }
  .today-button { min-height: 44px; padding-inline: 11px; font-size: 12px; }
  .period-navigation-label { margin-left: 5px; font-size: 13px; }
  .calendar-actions { gap: 10px; }
  .view-switch { margin-left: auto; }
  .view-button { min-width: 82px; min-height: 40px; padding-inline: 10px; font-size: 11px; }
  .calendar-actions .button { min-height: 44px; }
  .month-card { border-radius: 12px; }
  .month-heading { padding: 15px 14px; font-size: 18px; }
  .weekday-row { font-size: 11px; }
  .calendar-day, .calendar-layout[data-view="1"] .calendar-day { min-height: 86px; padding: 4px 0 6px; }
  .calendar-layout[data-view="1"] .day-number { margin-left: auto; font-size: 13px; }
  .calendar-layout[data-view="1"] .calendar-entry { padding: 5px 1px; }
  .calendar-layout[data-view="1"] .entry-amount { font-size: 11px; letter-spacing: -.5px; }
  .calendar-layout[data-view="1"] .entry-bank { font-size: 10px; }
  .calendar-layout[data-view="3"] { grid-template-columns: repeat(3, minmax(270px, 1fr)); scroll-snap-type: x proximity; }
  .calendar-layout[data-view="3"] .month-card { scroll-snap-align: start; }
  .summary { margin-top: 23px; }
  .summary-heading h2 { font-size: 16px; }
  .summary-period { font-size: 11px; }
  .summary-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .summary-card { padding: 18px 19px; border-radius: 12px; }
  .summary-label { min-height: 0; margin-bottom: 9px; font-size: 12px; }
  .summary-value { font-size: 30px; }
  .summary-note { font-size: 10px; }
  .app-footer { flex-direction: column; gap: 7px; padding-top: 21px; font-size: 10px; }
  .dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 14px; }
  .dialog-header { padding: 18px 18px 15px; }
  .dialog-title { font-size: 21px; }
  .dialog-body { padding: 16px 18px 20px; }
  .field-row { gap: 10px; }
  .field input, .field select { padding-inline: 9px; }
  .form-actions .button { flex: 1; }
}
@media (max-width: 359px) {
  .app-shell { padding-inline: 10px; }
  .header-actions { gap: 5px; }
  .text-button { font-size: 9px; }
  .brand-name { font-size: 19px; }
  .period-navigation-label { flex-basis: 100%; margin: 5px 0 0; }
  .calendar-actions { gap: 7px; }
  .view-button { min-width: 74px; }
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .calendar-layout[data-view="1"] .entry-amount { font-size: 10px; }
}
@media (prefers-reduced-motion: no-preference) {
  button { transition: background-color .14s ease, color .14s ease, border-color .14s ease; }
  .dialog[open] { animation: dialog-enter .16s ease-out; }
  @keyframes dialog-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
}
