/* --- Словарь стиля «Кошачий глаз» (см. DECISIONS.md, 2026-10-31) ---
   Цвета задаются парами: светлая тема здесь, тёмная — ниже.
   Шрифты системные: на iPhone это SF Pro и SF Pro Rounded. */
/* Знак дирхама (U+20C3) появился в 2025 году, и системные шрифты его пока не знают.
   Встроенный шрифт из одного знака подменяет только этот символ, весь остальной текст — системный. */
@font-face {
  font-family: "Spend4Me Dirham";
  src: url("data:font/otf;base64,T1RUTwAJAIAAAwAQQ0ZGIDTGymgAAAIsAAAAnU9TLzJoYGUHAAABAAAAAGBjbWFwAAwhFgAAAdgAAAA0aGVhZDCWUYAAAACcAAAANmhoZWEGiALTAAAA1AAAACRobXR4BVAARgAAAswAAAAIbWF4cAACUAAAAAD4AAAABm5hbWUDnhOnAAABYAAAAHhwb3N0AAMAAAAAAgwAAAAgAAEAAAABAAAsUc40Xw889QADA+gAAAAA5w0G8gAAAADnDQbyAEYAAAMgArwAAAADAAIAAAAAAAAAAQAAAyD/OAAAA1wARgA8AyAAAQAAAAAAAAAAAAAAAAAAAAIAAFAAAAIAAAADAqgBkAAFAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAA/Pz8/AAAgwyDDAyD/OAAAAyAAyAAAAAAAAAAAAAACvAAAACAAAAAAAAQANgABAAAAAAABAA8AAAABAAAAAAACAAcADwADAAEECQABAB4AFgADAAEECQACAA4ANFNwZW5kNE1lIERpcmhhbVJlZ3VsYXIAUwBwAGUAbgBkADQATQBlACAARABpAHIAaABhAG0AUgBlAGcAdQBsAGEAcgAAAAIAAAADAAAAFAADAAEAAAAUAAQAIAAAAAQABAABAAAgw///AAAgw///3z4AAQAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEABAEAAQEBD1NwZW5kNE1lRGlyaGFtAAEBARP4HALRi/m0+VAF1g+L9zES2REAAgEBBxZkaXJoYW1TcGVuZDRNZSBEaXJoYW0AAAABhwACAQEESviIDvnw91IW93oG91L3Avcq91z3XPsC9yr7Uh/7egb0/OcV+H73DAf3EdMi+yD7IEMi+xEf++33GxX5btH9bgbbBPlu0f1uBg4AAAAB9AAAA1wARg==") format("opentype");
  unicode-range: U+20C3;
  font-display: block;
}

:root {
  /* Цвета */
  --bg: #f6f4ef;
  --surface: #ffffff;
  --surface-2: #f2f0ea;
  --surface-3: #eae7e0;
  --ink: #16181a;
  --ink-muted: #676b66;
  --ink-faint: #9a9d97;
  --line: #eceae4;
  --line-strong: #ddd9d0;
  --accent: #17784a;
  --accent-strong: #0f5a37;
  --accent-ink: #ffffff;
  --accent-soft: #e3f4e7;
  --accent-line: #b9e2c3;
  --eye: #7fe08a;
  --cat: #16181a;
  --cat-rim: transparent;
  --fab: #16181a;
  --fab-ink: #ffffff;
  --hero-bg: #16181a;
  --hero-ink: #ffffff;
  --hero-muted: #b9bdb6;
  --hero-negative: #ff8a7a;
  --tone-green: #17784a;
  --tone-purple: #6a4bd0;
  --tone-blue: #3e63dd;
  --tone-red: #c2394b;
  --tone-orange: #b4510c;
  --tone-teal: #1f6f91;
  --tone-sea: #14706a;
  --tone-amber: #8a5a00;
  --tone-gray: #4f5450;
  --income: #17784a;
  --income-soft: #e3f4e7;
  --expense: #c2392b;
  --expense-soft: #fdecea;
  --warn: #a34a0b;
  --warn-soft: #fff1e3;
  --warn-line: #ffd9b8;
  --essential: #3e63dd;
  --essential-soft: #e6ecfc;
  --planned: #9b7bf0;
  --planned-soft: #efe9fd;
  --impulse: #f08a3c;
  --impulse-soft: #ffebdc;
  --focus-ring: rgba(23, 120, 74, 0.28);
  --overlay: rgba(22, 24, 26, 0.45);
  --glass: rgba(255, 255, 255, 0.78);
  --shadow: 0 1px 2px rgba(22, 24, 26, 0.04);
  --shadow-float: 0 8px 24px rgba(22, 24, 26, 0.12);
  --shadow-sheet: 0 30px 80px rgba(22, 24, 26, 0.25);

  /* Шрифты */
  --font-text: "Spend4Me Dirham", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-amount: "Spend4Me Dirham", ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Скругления */
  --radius-card: 22px;
  --radius-control: 14px;
  --radius-tile: 13px;
  --radius-sheet: 26px;
  --radius-pill: 999px;

  /* Отступы и размеры */
  --space-page: 16px;
  --tab-bar-height: 62px;
  --tab-bar-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1110;
    --surface: #1b1e1c;
    --surface-2: #242826;
    --surface-3: #2c302d;
    --ink: #f2f3ef;
    --ink-muted: #a3a8a2;
    --ink-faint: #6e736d;
    --line: #2c302d;
    --line-strong: #3a3f3b;
    --accent: #7fe08a;
    --accent-strong: #a8edb0;
    --accent-ink: #0f1110;
    --accent-soft: #1f3a29;
    --accent-line: #2f5a3c;
    --cat: #0c0d0f;
    --cat-rim: #8a929a;
    --fab: #7fe08a;
    --fab-ink: #0f1110;
    --hero-bg: #1b1e1c;
    --hero-ink: #f2f3ef;
    --hero-muted: #a3a8a2;
    --tone-green: #7fe08a;
    --tone-purple: #b39cf5;
    --tone-blue: #8fa6f5;
    --tone-red: #ff8a95;
    --tone-orange: #ffb37a;
    --tone-teal: #7cc8e8;
    --tone-sea: #6fd6c6;
    --tone-amber: #f2c14e;
    --tone-gray: #b4b9b3;
    --income: #7fe08a;
    --income-soft: #1f3a29;
    --expense: #ff8a7a;
    --expense-soft: #3a1f1c;
    --warn: #ffb37a;
    --warn-soft: #2b2118;
    --warn-line: #4a3220;
    --essential: #6e8cf0;
    --essential-soft: #1e2747;
    --planned: #b39cf5;
    --planned-soft: #2a2343;
    --impulse: #f5a066;
    --impulse-soft: #3a2615;
    --focus-ring: rgba(127, 224, 138, 0.35);
    --overlay: rgba(0, 0, 0, 0.6);
    --glass: rgba(38, 41, 39, 0.8);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-sheet: 0 30px 80px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0f1110;
  --surface: #1b1e1c;
  --surface-2: #242826;
  --surface-3: #2c302d;
  --ink: #f2f3ef;
  --ink-muted: #a3a8a2;
  --ink-faint: #6e736d;
  --line: #2c302d;
  --line-strong: #3a3f3b;
  --accent: #7fe08a;
  --accent-strong: #a8edb0;
  --accent-ink: #0f1110;
  --accent-soft: #1f3a29;
  --accent-line: #2f5a3c;
  --cat: #0c0d0f;
  --cat-rim: #8a929a;
  --fab: #7fe08a;
  --fab-ink: #0f1110;
  --hero-bg: #1b1e1c;
  --hero-ink: #f2f3ef;
  --hero-muted: #a3a8a2;
  --tone-green: #7fe08a;
  --tone-purple: #b39cf5;
  --tone-blue: #8fa6f5;
  --tone-red: #ff8a95;
  --tone-orange: #ffb37a;
  --tone-teal: #7cc8e8;
  --tone-sea: #6fd6c6;
  --tone-amber: #f2c14e;
  --tone-gray: #b4b9b3;
  --income: #7fe08a;
  --income-soft: #1f3a29;
  --expense: #ff8a7a;
  --expense-soft: #3a1f1c;
  --warn: #ffb37a;
  --warn-soft: #2b2118;
  --warn-line: #4a3220;
  --essential: #6e8cf0;
  --essential-soft: #1e2747;
  --planned: #b39cf5;
  --planned-soft: #2a2343;
  --impulse: #f5a066;
  --impulse-soft: #3a2615;
  --focus-ring: rgba(127, 224, 138, 0.35);
  --overlay: rgba(0, 0, 0, 0.6);
  --glass: rgba(38, 41, 39, 0.8);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-sheet: 0 30px 80px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-text);
  background: var(--bg);
  color: var(--ink);
}

/* Disables double-tap zoom on iOS; pinch zoom still works */
html {
  touch-action: manipulation;
}

body {
  min-height: 100vh;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}

button, input, select {
  font: inherit;
}

.app-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px var(--space-page) calc(var(--tab-bar-height) + var(--tab-bar-bottom) + 24px);
}

/* --- Экраны нижней навигации --- */

.screen {
  display: none;
}

.screen.active {
  display: grid;
  gap: 18px;
}

/* Плавающая панель: «стеклянная» капсула с вкладками и отдельная кнопка «+» справа, как в iOS 26 */
.tab-bar {
  position: fixed;
  left: var(--space-page);
  right: var(--space-page);
  bottom: var(--tab-bar-bottom);
  z-index: 20;
  max-width: 728px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tab-capsule {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: var(--tab-bar-height);
  padding: 0 6px;
  border: 0.5px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-float);
}

.tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}

.tab-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.tab-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab-btn.active {
  color: var(--accent);
  font-weight: 600;
}

.tab-btn.active .tab-icon {
  stroke-width: 2;
}

.tab-add-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tab-bar-height);
  height: var(--tab-bar-height);
  border: none;
  border-radius: 50%;
  background: var(--fab);
  color: var(--fab-ink);
  box-shadow: var(--shadow-float);
  cursor: pointer;
}

.tab-add-btn svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.tab-add-btn:active {
  transform: scale(0.96);
}

.tab-add-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.topbar {
  margin-bottom: 20px;
}

.status-pill[hidden] {
  display: none;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

h1, h2 {
  margin: 0;
}

/* Large Title из iOS */
h1 {
  font-size: 34px;
  line-height: 41px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.content {
  display: grid;
  gap: 18px;
}

/* «Свободные деньги»: чёрная карточка, из-за правого верхнего угла выглядывает котик */
.card.free-money-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 34px;
  padding: 20px 20px 18px;
  background: var(--hero-bg);
  color: var(--hero-ink);
}

.free-money-cat {
  position: absolute;
  right: 14px;
  top: -48px;
  width: 108px;
  height: 99px;
  pointer-events: none;
}

.free-money-cat .cat-outline {
  stroke: #4a5057;
  stroke-width: 3;
  stroke-linejoin: round;
}

/* Котики «Бюджета» и «Копилок»: сидят над правым краем первой карточки,
   нижней частью (листок, свинка) лежат на её кромке. В тёмной теме — светлый контур. */
.screen-cat {
  position: absolute;
  right: 4px;
  top: -122px;
  width: 156px;
  height: 130px;
  pointer-events: none;
  filter: drop-shadow(0 0 0.6px var(--cat-rim)) drop-shadow(0 0 0.6px var(--cat-rim));
}

.screen-cat .cat-outline {
  stroke: #4a5057;
  stroke-width: 3;
  stroke-linejoin: round;
}

.free-money-label,
.free-money-note {
  color: var(--hero-muted);
  font-size: 15px;
}

.free-money-note {
  font-size: 13px;
}

.free-money-total {
  margin-top: 2px;
  font-family: var(--font-amount);
  font-size: 40px;
  line-height: 48px;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.free-money-total.negative {
  color: var(--hero-negative);
}

.month-overview {
  display: grid;
  gap: 4px;
  padding: 6px 8px 16px;
}

.month-switcher {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.month-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.month-nav-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.month-nav-btn:disabled {
  color: var(--ink-faint);
  opacity: 0.5;
  cursor: default;
}

.month-nav-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
}

.month-label {
  font-size: 17px;
  font-weight: 600;
}

.month-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px;
}

.month-totals div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.month-totals span {
  color: var(--ink-muted);
  font-size: 13px;
}

.month-totals strong {
  font-family: var(--font-amount);
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.month-totals strong.income {
  color: var(--income);
}

/* Расход — обычным цветом текста, как в макете; красный остаётся для «не хватает» */
.month-totals strong.expense {
  color: var(--ink);
}

.period-result {
  margin: 0 0 12px;
  color: var(--ink-muted);
  font-size: 0.82rem;
}

/* Карточка как в iOS: белая на тёплом фоне, без рамки; цветная рамка остаётся только там, где её задаёт сам блок */
.card {
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
}

/* «Ещё» — сгруппированные строки, как в настройках iOS */
.more-group {
  display: grid;
  gap: 8px;
}

.more-group > .sheet-section-label {
  margin: 0;
}

.danger-zone {
  overflow: hidden;
}

.danger-row-btn {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--expense);
  font-size: 17px;
  text-align: left;
}

.danger-zone > * + * {
  border-top: 0.5px solid var(--line);
}

.account-row {
  margin: 0;
  padding: 15px 16px;
  font-size: 17px;
}

.danger-row-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.more-footnote {
  margin: 0;
  padding: 0 4px;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.4;
}

.row-chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ink-faint);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.recurring-entry-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 14px;
  border: none;
  color: var(--ink);
  text-align: left;
}

.recurring-entry-copy strong {
  font-size: 16px;
  font-weight: 500;
}

.recurring-entry-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.recurring-entry-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.recurring-entry-copy > span {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.35;
}

.due-payments-section {
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--warn-soft);
}

.due-payments-icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--warn-line);
  color: var(--warn);
}

.due-payments-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.due-payment-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.due-payments-summary {
  display: grid;
  grid-template-areas: "icon heading totals chevron";
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.due-payments-summary::-webkit-details-marker {
  display: none;
}

.due-payments-heading {
  grid-area: heading;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.due-payments-heading strong {
  font-size: 15px;
}

.due-payments-count {
  color: var(--warn);
  font-size: 13px;
}

.due-payments-total {
  grid-area: totals;
  color: var(--warn);
  font-family: var(--font-amount);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.due-payments-details[open] .upcoming-payments-chevron {
  transform: rotate(180deg);
}

.due-payments-intro {
  margin: 12px 4px;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.4;
}

.due-payments-list {
  display: grid;
  gap: 12px;
}

.due-payment-card {
  padding: 14px;
  border-radius: 16px;
  background: var(--surface);
}

.due-payment-identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.due-payment-identity strong {
  font-size: 16px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.due-payment-timing {
  color: var(--warn);
  font-size: 13px;
  font-weight: 600;
}

.due-payment-amount {
  flex: 0 0 auto;
  color: var(--ink);
  font-family: var(--font-amount);
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.due-payment-details {
  margin: 6px 0 12px;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

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

.due-payment-actions button {
  min-height: 40px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.upcoming-payments-section {
  padding: 18px;
}

.upcoming-payments-summary {
  display: grid;
  grid-template-areas: "heading totals chevron";
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  list-style: none;
}

.upcoming-payments-summary::-webkit-details-marker {
  display: none;
}

.upcoming-payments-summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 5px;
  border-radius: 10px;
}

.upcoming-payments-heading,
.upcoming-payments-totals {
  display: flex;
  flex-direction: column;
}

.upcoming-payments-heading {
  grid-area: heading;
  gap: 5px;
}

.upcoming-payments-heading .eyebrow {
  margin: 0;
}

.upcoming-payments-title {
  font-size: 17px;
  font-weight: 600;
}

.upcoming-payments-totals {
  grid-area: totals;
  align-items: flex-end;
  gap: 4px;
}

.upcoming-payments-total {
  color: var(--ink);
  font-family: var(--font-amount);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.upcoming-payments-chevron {
  grid-area: chevron;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-muted);
  transition: transform 0.2s ease;
}

.due-payments-summary .upcoming-payments-chevron {
  color: var(--warn);
}

.upcoming-payments-details[open] .upcoming-payments-chevron {
  transform: rotate(180deg);
}

.upcoming-payments-list {
  display: grid;
  gap: 9px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
}

.upcoming-payment-item {
  display: grid;
  grid-template-areas: "date identity amount";
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink);
  text-align: left;
}

.upcoming-payment-item:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.upcoming-payment-item:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.upcoming-payment-date {
  grid-area: date;
  padding: 7px 9px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
}

.upcoming-payment-identity {
  display: flex;
  grid-area: identity;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.upcoming-payment-identity strong,
.upcoming-payment-details {
  overflow-wrap: anywhere;
}

.upcoming-payment-details {
  color: var(--ink-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.upcoming-payment-amount {
  grid-area: amount;
  color: var(--expense);
  font-family: var(--font-amount);
  font-size: 0.9rem;
}

.form-card {
  padding: 18px;
}

/* История операций лежит прямо на фоне; карточками становятся дни */
.list-card {
  padding: 6px 0 0;
}

#entryForm {
  display: grid;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

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

label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
}

label span {
  font-size: 0.9rem;
}

input, select, button {
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

input, select {
  min-height: 46px;
  padding: 0 12px;
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

button {
  cursor: pointer;
}

.primary-btn,
.secondary-btn {
  min-height: 46px;
  border: none;
  font-weight: 700;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.primary-btn:active,
.secondary-btn:active {
  transform: scale(0.99);
}

.primary-btn {
  background: var(--accent);
  color: var(--accent-ink);
}

.secondary-btn {
  background: var(--surface-3);
  color: var(--ink);
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 4px;
  padding: 0 4px;
}

.list-header h2 {
  font-size: 22px;
  font-weight: 700;
}

.filter-toggle-btn {
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 15px;
  font-weight: 600;
}

.filter-toggle-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Фильтр: переключатель типа и строка темы, как в шторке */
.filter-panel {
  display: grid;
  gap: 10px;
  margin: 8px 0 12px;
}

.filter-panel .filter-type-segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.filter-panel .filter-reset-btn {
  justify-self: center;
}

.day-group {
  display: grid;
  gap: 8px;
}

.day-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}

.day-header h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
}

.day-total {
  color: var(--ink-muted);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.day-total.income {
  color: var(--income);
}

.day-entries {
  display: grid;
  padding: 4px 0;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.entries-list {
  display: grid;
  gap: 20px;
}

/* Строка операции как в списке iOS: плитка, текст, сумма; разделитель начинается после плитки */
.entry-item {
  position: relative;
}

.entry-item + .entry-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 66px;
  right: 0;
  border-top: 0.5px solid var(--line);
}

.entry-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 14px;
  border-radius: 16px;
  cursor: pointer;
}

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

.entry-main:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.cat-tile {
  --tile-fg: var(--tone-gray);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-tile);
  background: color-mix(in srgb, var(--tile-fg) 14%, var(--surface));
  color: var(--tile-fg);
}

.cat-tile svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Эмодзи вместо контурной иконки, если его выбрали в настройках категории */
.cat-tile-emoji {
  font-size: 22px;
  line-height: 1;
}

[data-tone="green"] { --tile-fg: var(--tone-green); }
[data-tone="purple"] { --tile-fg: var(--tone-purple); }
[data-tone="blue"] { --tile-fg: var(--tone-blue); }
[data-tone="red"] { --tile-fg: var(--tone-red); }
[data-tone="orange"] { --tile-fg: var(--tone-orange); }
[data-tone="teal"] { --tile-fg: var(--tone-teal); }
[data-tone="sea"] { --tile-fg: var(--tone-sea); }
[data-tone="amber"] { --tile-fg: var(--tone-amber); }

.entry-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.entry-category {
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.entry-amount {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.entry-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

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

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

.entry-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.spending-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-faint);
}

.spending-dot[data-type="essential"] { background: var(--essential); }
.spending-dot[data-type="discretionary"] { background: var(--planned); }
.spending-dot[data-type="impulse"] { background: var(--impulse); }

.entry-theme {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.entry-recurring {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.delete-btn {
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.9rem;
  padding: 6px 8px;
}

.empty-state {
  text-align: center;
  color: var(--ink-muted);
  padding: 18px 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  background: var(--surface-2);
}

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
}

.modal.hidden {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay);
}

.modal-panel {
  position: relative;
  width: min(92vw, 560px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  box-shadow: var(--shadow-sheet);
  padding: 20px;
  z-index: 1;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.recurring-view,
.recurring-form,
.recurring-section,
.recurring-list {
  display: grid;
}

.recurring-view,
.recurring-form {
  gap: 16px;
}

.recurring-section {
  gap: 8px;
}

.sheet-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-right: 4px;
}

.sheet-section-header h3 {
  margin: 0;
}

/* Список платежей — сгруппированный, строки как у операций: плитка, текст, сумма */
.recurring-list {
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface);
}

.recurring-archive-section {
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface);
}

.recurring-archive-section summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 14px;
  cursor: pointer;
  font-size: 16px;
  list-style: none;
}

.recurring-archive-section summary > span:first-child {
  flex: 1;
}

.recurring-archive-section[open] .row-chevron {
  transform: rotate(180deg);
}

.recurring-archive-section .recurring-list {
  border-top: 0.5px solid var(--line);
  border-radius: 0;
}

.recurring-archive-section summary::-webkit-details-marker {
  display: none;
}

.recurring-item {
  position: relative;
}

.recurring-item + .recurring-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 66px;
  right: 0;
  border-top: 0.5px solid var(--line);
}

.recurring-item-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 12px 14px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.recurring-item-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.recurring-item-main:hover {
  background: var(--surface-2);
}

.recurring-item-main:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.recurring-item-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.recurring-item-topline strong:first-child {
  font-size: 16px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.recurring-item-amount {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.recurring-item-schedule,
.recurring-item-details,
.recurring-item-comment {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.recurring-item-comment {
  color: var(--ink);
}

.recurring-item-actions {
  display: flex;
  padding: 0 14px 6px 58px;
}

.recurring-status-btn {
  min-height: 34px;
  font-size: 15px;
}

.recurring-empty-state {
  padding: 16px 14px;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 15px;
}

.recurring-form-footer,
.entry-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
}

.danger-btn {
  color: var(--expense);
}

.theme-form {
  display: grid;
  gap: 14px;
}

.theme-create-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 12px;
}

.theme-create-fields.single-field {
  grid-template-columns: 1fr;
}

.theme-create-btn {
  width: 100%;
  border-radius: var(--radius-pill);
}

.theme-create-card .form-list {
  background: var(--surface-2);
}

/* «Новая копилка» — свёрнутая строка-кнопка; по нажатию раскрывается форма */
.card.theme-create-card {
  position: relative;
  margin-top: 100px;
  padding: 0;
}

.theme-create-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 18px;
  color: var(--accent);
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.theme-create-summary::-webkit-details-marker {
  display: none;
}

.theme-create-summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
  border-radius: var(--radius-card);
}

.theme-create-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
}

.theme-create-plus svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  transition: transform 0.2s ease;
}

.theme-create-card[open] .theme-create-plus svg {
  transform: rotate(45deg);
}

.theme-create-hint {
  margin: 0 18px 14px;
  color: var(--ink-muted);
  font-size: 13px;
}

.theme-create-card .theme-form {
  padding: 0 18px 18px;
}

.themes-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 12px;
}

.themes-section-header h3 {
  margin: 0;
  font-size: 1rem;
}

.themes-section-header h2 {
  padding: 0 4px;
  font-size: 22px;
  font-weight: 700;
}

.themes-count {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-size: 13px;
}

.themes-list {
  display: grid;
  gap: 10px;
}

.themes-archive-section {
  padding: 14px 18px;
  border-radius: var(--radius-card);
  background: var(--surface);
}

.themes-archive-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 24px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  list-style: none;
}

.themes-archive-section summary::-webkit-details-marker {
  display: none;
}

.themes-archive-section[open] summary {
  margin-bottom: 12px;
}

.theme-item {
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.theme-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.theme-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.theme-details strong {
  font-size: 17px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.themes-screen,
.themes-view {
  gap: 18px;
}

.themes-view {
  display: grid;
}

.theme-create-card,
.theme-detail-card,
.theme-history-card {
  padding: 18px;
}

.section-heading,
.theme-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

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

.section-heading > p {
  max-width: 300px;
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.86rem;
  line-height: 1.45;
  text-align: right;
}

.compact-heading {
  margin-bottom: 14px;
}

.goal-fields {
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.65fr);
}

.themes-collection {
  display: grid;
  gap: 12px;
}

.themes-collection .themes-section-header,
.theme-history-card .themes-section-header {
  margin: 0;
}

.theme-card-button {
  display: grid;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.theme-card-button:hover {
  background: var(--surface-2);
}

.theme-card-button:focus-visible,
.history-main:focus-visible,
.back-btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.theme-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.theme-card-arrow {
  color: var(--ink-faint);
  font-size: 1.6rem;
  line-height: 1;
}

.theme-goal-label {
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

.theme-card-metrics,
.theme-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.theme-card-metric,
.theme-stats > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.theme-card-metric span,
.theme-stats span {
  color: var(--ink-muted);
  font-size: 13px;
}

.theme-card-metric strong,
.theme-stats strong {
  font-family: var(--font-amount);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.positive {
  color: var(--income);
}

.negative {
  color: var(--expense);
}

.theme-card-progress {
  margin-top: -4px;
}

.theme-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

.theme-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.25s ease;
}

/* «‹ Копилки» — кнопка «назад» как в навигации iOS */
.back-btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  margin: -8px 0 -6px -8px;
  padding: 0 8px 0 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 17px;
  font-weight: 400;
}

.back-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-detail-card {
  display: grid;
  gap: 18px;
}

.theme-detail-identity h2 {
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.theme-detail-identity .theme-goal-label {
  font-size: 15px;
}

.theme-hero {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.theme-hero span {
  color: var(--ink-muted);
  font-size: 15px;
}

.theme-hero strong {
  font-family: var(--font-amount);
  font-size: 40px;
  line-height: 48px;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.theme-hero strong.negative {
  color: var(--expense);
}

.theme-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.theme-status-pill {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 600;
}

.compact-btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
}

.theme-stats {
  order: 1;
  padding-top: 14px;
  border-top: 0.5px solid var(--line);
}

.theme-detail-card .contribution-btn {
  order: 2;
}

.theme-progress {
  display: grid;
  gap: 8px;
}

.theme-progress-copy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-muted);
  font-size: 13px;
}

.theme-progress-copy strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

/* Полоса цели с котиком, который сидит на конце заполненной части */
.theme-progress-rail {
  position: relative;
  margin-top: 30px;
}

.theme-progress-rail .theme-progress-track {
  height: 12px;
}

.theme-progress-cat {
  position: absolute;
  bottom: 9px;
  left: 0;
  width: 40px;
  height: 36px;
  color: var(--cat);
  /* В тёмной теме чёрный котик получает светлый контур, иначе он сливается с карточкой */
  filter: drop-shadow(0 0 0.6px var(--cat-rim)) drop-shadow(0 0 0.6px var(--cat-rim));
  transform: translateX(-50%);
  transition: left 0.25s ease;
}

.contribution-btn {
  width: 100%;
  min-height: 50px;
  border-radius: var(--radius-pill);
}

.inline-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.inline-actions button {
  min-width: 130px;
}

.theme-history-card {
  display: grid;
  gap: 14px;
}

.theme-history {
  display: grid;
  margin: 0 -18px -8px;
}

/* Строка истории — как строка операции: плитка, текст, сумма; разделитель после плитки */
.history-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.history-item.expense {
  grid-template-columns: 1fr;
}

.history-item + .history-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 70px;
  right: 0;
  border-top: 0.5px solid var(--line);
}

.history-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 60px;
  padding: 10px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

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

.history-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.history-type {
  font-size: 16px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.history-amount {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

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

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

.history-meta {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.history-delete-btn {
  margin-right: 10px;
  color: var(--expense);
  font-size: 13px;
}

#contributionForm {
  display: grid;
  gap: 16px;
}

.transaction-theme-field {
  width: 100%;
}

/* --- Бюджет --- */

.budget-screen {
  align-content: start;
}

.budget-empty-state {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
  background: var(--accent-soft);
}

.budget-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent);
}

.budget-empty-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.budget-empty-state .eyebrow {
  margin-bottom: 5px;
  color: var(--accent);
}

.budget-empty-state h2 {
  font-size: 1.12rem;
}

.budget-empty-state p:last-child {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.budget-empty-state .primary-btn {
  white-space: nowrap;
}

.budget-hero,
.budget-section-card {
  padding: 20px;
}

.budget-hero {
  position: relative;
  display: grid;
  gap: 12px;
  margin-top: 100px;
}

.budget-hero h2 {
  color: var(--ink-muted);
  font-size: 15px;
  font-weight: 500;
}

.budget-section-card h2 {
  font-size: 17px;
  font-weight: 600;
}

.budget-hero-heading,
.budget-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.budget-hero-heading .eyebrow,
.budget-section-heading .eyebrow {
  margin-bottom: 6px;
}

.budget-status-pill {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}

.budget-status-pill.negative {
  background: var(--expense-soft);
  color: var(--expense);
}

.budget-available-total {
  margin-top: -6px;
  color: var(--accent);
  font-family: var(--font-amount);
  font-size: 40px;
  line-height: 48px;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.budget-available-total.negative {
  color: var(--expense);
}

.budget-hero-note,
.budget-forecast-copy {
  margin: -4px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

/* Расшифровка суммы — строками списка, как в настройках iOS */
.budget-breakdown {
  display: grid;
  grid-template-columns: 1fr;
}

.budget-breakdown > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 11px 0;
  border-top: 0.5px solid var(--line);
}

.budget-breakdown span {
  font-size: 15px;
}

.budget-breakdown strong {
  font-size: 15px;
  font-weight: 600;
}

.budget-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--radius-control);
}

.budget-metric span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted);
  font-size: 13px;
}

.budget-metric span::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--essential);
}

.budget-metric.impulse span::before {
  background: var(--impulse);
}

.budget-breakdown strong,
.budget-metric strong,
.budget-forecast-total {
  font-family: var(--font-amount);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.budget-section-card {
  display: grid;
  gap: 16px;
}

.budget-section-heading > p {
  max-width: 250px;
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
  text-align: right;
}

.budget-limits-list {
  display: grid;
}

/* Лимит — строка списка: плитка категории, полоса прогресса, поле суммы */
.budget-limit-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(190px, 1.4fr) 125px;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 0.5px solid var(--line);
}

.budget-limit-row:first-child {
  border-top: none;
  padding-top: 0;
}

.budget-limit-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.budget-limit-identity .cat-tile {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}

.budget-limit-identity .cat-tile svg {
  width: 19px;
  height: 19px;
}

.budget-limit-identity .cat-tile-emoji {
  font-size: 20px;
}

.budget-limit-identity strong {
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.budget-limit-progress {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.budget-limit-progress-copy {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-muted);
  font-size: 13px;
}

.budget-limit-progress-copy strong {
  color: var(--ink);
  font-family: var(--font-amount);
}

.budget-progress-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-3);
}

.budget-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.2s ease;
}

.budget-limit-row.warning .budget-progress-track span {
  background: var(--impulse);
}

.budget-limit-row.danger .budget-progress-track span {
  background: var(--expense);
}

.budget-limit-input-wrap {
  position: relative;
}

.budget-limit-input-wrap input {
  width: 100%;
  min-height: 40px;
  padding-left: 10px;
  padding-right: 28px;
  /* 16px: iOS Safari zooms into inputs with smaller text on focus */
  font-size: 16px;
  font-family: var(--font-amount);
  text-align: right;
}

.budget-limit-input-wrap span {
  position: absolute;
  top: 50%;
  right: 12px;
  color: var(--ink-muted);
  font-size: 0.82rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.budget-awareness-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.budget-metric {
  background: var(--surface-2);
}

.budget-metric strong {
  font-size: 19px;
  font-weight: 800;
}

.budget-metric small {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.budget-metric.impulse strong {
  color: var(--warn);
}

.budget-forecast-total {
  flex: 0 0 auto;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
}

.budget-recommendations {
  display: grid;
  gap: 10px;
}

.budget-recommendations-list {
  display: grid;
  gap: 9px;
}

.budget-recommendation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--warn-soft);
}

.budget-recommendation.ok {
  background: var(--accent-soft);
}

.budget-recommendation-icon {
  color: var(--warn);
  font-weight: 800;
}

.budget-recommendation.ok .budget-recommendation-icon {
  color: var(--accent);
}

.budget-recommendation strong {
  display: block;
  margin-bottom: 3px;
  font-size: 15px;
}

.budget-recommendation p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

.budget-history-list {
  display: grid;
  gap: 8px;
}

.budget-history-header,
.budget-history-row {
  display: grid;
  grid-template-columns: minmax(130px, 1.4fr) repeat(3, minmax(90px, 1fr));
  align-items: center;
  gap: 10px;
}

.budget-history-header {
  padding: 0 14px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 600;
}

.budget-history-row {
  padding: 12px 14px;
  border-radius: var(--radius-control);
  background: var(--surface-2);
}

.budget-history-row span:not(:first-child),
.budget-history-header span:not(:first-child) {
  text-align: right;
}

.budget-history-row span:not(:first-child) {
  font-family: var(--font-amount);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.budget-history-row .over-plan {
  color: var(--expense);
}

.budget-history-empty {
  padding: 18px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--ink-muted);
  font-size: 0.84rem;
  text-align: center;
}

.hidden {
  display: none !important;
}

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

.choice-fieldset legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.field-hint {
  margin: -2px 0 12px;
  color: var(--ink-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.segmented-control label {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

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

.segmented-control span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 8px 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: clamp(0.72rem, 2.4vw, 0.88rem);
  font-weight: 700;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.segmented-control label:first-child span {
  border-radius: 12px 0 0 12px;
}

.segmented-control label:not(:first-child) span {
  margin-left: -1px;
}

.segmented-control label:last-child span {
  border-radius: 0 12px 12px 0;
}

.segmented-control input:checked + span {
  position: relative;
  z-index: 1;
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.segmented-control input:focus-visible + span {
  position: relative;
  z-index: 2;
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* --- Шторка операции: снизу экрана, как sheet в iOS --- */

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

.modal-panel.sheet-panel {
  width: min(100vw, 480px);
  max-height: calc(100dvh - 24px);
  padding: 0 var(--space-page) calc(env(safe-area-inset-bottom, 0px) + 16px);
  border: none;
  border-radius: var(--radius-sheet);
  background: var(--bg);
}

.sheet-grabber {
  width: 36px;
  height: 5px;
  margin: 6px auto 0;
  border-radius: 3px;
  background: var(--line-strong);
}

.sheet-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  margin: 0 calc(var(--space-page) * -1) 4px;
  padding: 0 8px;
  background: var(--bg);
}

.sheet-header-spacer {
  min-width: 1px;
}

.sheet-title {
  align-self: center;
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sheet-form,
.sheet-panel .recurring-view {
  display: grid;
  gap: 14px;
}

.sheet-intro {
  margin: 0;
  padding: 0 4px;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 1.4;
}

.sheet-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding-top: 6px;
}

.sheet-footer .sheet-text-btn {
  align-self: center;
  justify-self: auto;
}

.sheet-panel .back-btn {
  margin: 0 0 -6px -8px;
}

.sheet-text-btn {
  justify-self: start;
  min-height: 44px;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 17px;
}

.type-segments {
  display: flex;
  padding: 2px;
  border-radius: 10px;
  background: var(--surface-3);
}

.type-segment {
  min-height: 32px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
}

.type-segment.selected {
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(22, 24, 26, 0.12);
  font-weight: 600;
}

.type-segment:focus-visible,
.sheet-text-btn:focus-visible,
.payer-avatar:focus-visible,
.category-picker-row:focus-visible,
.category-wheel-item:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.entry-sheet #entryForm {
  gap: 14px;
}

/* Крупная сумма по центру */
.amount-field {
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  padding: 4px 0 6px;
}

.amount-field input {
  width: 1.4ch;
  max-width: 78vw;
  min-height: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-amount);
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -1px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.amount-field input:focus {
  box-shadow: none;
}

.amount-field input::placeholder {
  color: var(--ink-faint);
}

.amount-currency {
  color: var(--ink-faint);
  font-family: var(--font-amount);
  font-size: 36px;
  font-weight: 800;
}

/* Подпись над группой в шторке, как заголовок секции в iOS */
.sheet-section-label {
  display: block;
  padding-left: 4px;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* «Недавние»: ряд кнопок с мини-плиткой, листается вбок */
.recent-categories {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.recent-chips {
  display: flex;
  gap: 8px;
  margin: 0 calc(var(--space-page) * -1);
  padding: 0 var(--space-page);
  overflow-x: auto;
  scrollbar-width: none;
}

.recent-chips::-webkit-scrollbar {
  display: none;
}

.recent-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 7px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.recent-chip .cat-tile {
  width: 26px;
  height: 26px;
  border-radius: 9px;
}

.recent-chip .cat-tile svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.recent-chip .cat-tile-emoji {
  font-size: 15px;
}

.recent-chip.selected {
  border-color: var(--tile-fg, var(--tone-gray));
  background: color-mix(in srgb, var(--tile-fg, var(--tone-gray)) 14%, var(--surface));
  color: var(--tile-fg, var(--tone-gray));
  font-weight: 600;
}

.recent-chip.selected .cat-tile {
  background: var(--surface);
}

.recent-chip:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

/* Категория: строка «Питание › Продукты», под ней двухколёсный выбор */
.category-picker {
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface);
}

.category-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px 14px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.category-picker-tile.empty {
  background: var(--surface-3);
}

.category-picker-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.category-picker-label {
  color: var(--ink-muted);
  font-size: 13px;
}

.category-picker-copy strong {
  font-size: 17px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.category-picker-chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.category-picker-row[aria-expanded="true"] .category-picker-chevron {
  transform: rotate(180deg);
}

.category-wheel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 6px;
  border-top: 0.5px solid var(--line);
}

.category-wheel.hidden {
  display: none;
}

.category-wheel:not(:has(#categoryParentOptions .selected)) .category-wheel-band {
  display: none;
}

.category-wheel-band {
  position: absolute;
  left: 6px;
  right: 6px;
  top: calc(6px + 36px);
  height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
}

.category-wheel-column-wrap {
  min-width: 0;
  border-left: 0.5px solid var(--line);
}

.category-wheel-column {
  position: relative;
  height: 108px;
  padding: 36px 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
  mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent);
}

.category-wheel-column::-webkit-scrollbar {
  display: none;
}

.category-wheel-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 0 8px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.5;
  scroll-snap-align: center;
}

#categoryParentOptions .category-wheel-item {
  justify-content: flex-start;
}

.category-wheel-item.selected {
  font-size: 17px;
  font-weight: 600;
  opacity: 1;
}

.category-wheel-item .cat-tile {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}

.category-wheel-item .cat-tile svg {
  width: 15px;
  height: 15px;
}

.category-wheel-item .cat-tile-emoji {
  font-size: 14px;
}

.category-wheel-empty {
  margin: 0;
  color: var(--ink-muted);
  font-size: 15px;
  line-height: 36px;
  text-align: center;
}

/* Осознанность: три кнопки с цветными точками */
.spending-type-field legend {
  margin-bottom: 8px;
  padding-left: 4px;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.spending-segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.spending-segments label {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

.spending-segments input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.spending-segments span {
  --dot: var(--essential);
  --soft: var(--essential-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 6px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.spending-segments label:nth-child(2) span {
  --dot: var(--planned);
  --soft: var(--planned-soft);
}

.spending-segments label:nth-child(3) span {
  --dot: var(--impulse);
  --soft: var(--impulse-soft);
}

.spending-segments span::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot);
}

.spending-segments input:checked + span {
  border-color: var(--dot);
  background: var(--soft);
}

.spending-segments input:focus-visible + span {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

/* Сгруппированный список, как в настройках iOS */
.form-list {
  overflow: hidden;
  border-radius: 18px;
  background: var(--surface);
}

.form-list:not(:has(> :not(.hidden))) {
  display: none;
}

.form-list-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  font-weight: 400;
}

.form-list-row + .form-list-row {
  border-top: 0.5px solid var(--line);
}

.form-list-row > span {
  flex: 0 0 auto;
  font-size: 16px;
}

.form-list-row select,
.form-list-row input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: 16px;
  text-align: right;
}

.form-list-row select {
  text-align-last: right;
}

.form-list-row input[type="text"],
.form-list-row input[type="number"] {
  color: var(--ink);
}

.form-list-row input::placeholder {
  color: var(--ink-faint);
}

.form-list-row.note-row input {
  text-align: left;
}

/* Переключатель «да / нет», как в iOS */
.form-list-row input.switch {
  flex: 0 0 auto;
  position: relative;
  width: 51px;
  min-height: 0;
  height: 31px;
  margin: 0;
  border-radius: 16px;
  background: var(--surface-3);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.form-list-row input.switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

.form-list-row input.switch:checked {
  background: var(--accent);
}

.form-list-row input.switch:checked::before {
  transform: translateX(20px);
}

.form-list-row input.switch:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.form-list-row select:focus,
.form-list-row input:focus {
  box-shadow: none;
}

.payer-row {
  padding-right: 6px;
}

.payer-row > #payerLabel {
  flex: 1;
}

.payer-name {
  color: var(--ink-muted);
  font-size: 16px;
}

.payer-avatars {
  display: flex;
}

.payer-avatar {
  --av-bg: var(--ink);
  --av-ink: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 5px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--av-bg);
  color: var(--av-ink);
  font-size: 14px;
  font-weight: 700;
  opacity: 0.35;
  transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.payer-avatar[data-tone="green"] {
  --av-bg: var(--accent-soft);
  --av-ink: var(--accent);
}

.payer-avatar[data-tone="both"] {
  --av-bg: var(--surface-3);
  --av-ink: var(--ink);
  font-size: 10px;
}

.payer-avatar.selected {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

.entry-sheet .entry-form-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding-top: 6px;
}

.sheet-save-btn {
  min-height: 54px;
  border-radius: var(--radius-pill);
  font-size: 17px;
}

.entry-sheet .danger-btn {
  justify-self: center;
  align-self: center;
  color: var(--expense);
}

@media (max-width: 560px) {
  .modal {
    align-items: flex-end;
  }

  .modal-panel.sheet-panel {
    width: 100%;
    max-height: calc(100dvh - 44px);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  }
}

@media (max-width: 560px) {
  .app-shell {
    padding-left: var(--space-page);
    padding-right: var(--space-page);
  }

  .header-row {
    align-items: center;
  }

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

  .theme-create-fields {
    grid-template-columns: 1fr;
  }

  .due-payments-section {
    padding: 15px;
  }

  .upcoming-payments-section {
    padding: 15px;
  }

  .upcoming-payments-summary {
    grid-template-areas:
      "heading chevron"
      "totals chevron";
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .upcoming-payments-totals {
    align-items: flex-start;
    margin-top: 10px;
  }

  .due-payment-card-header {
    align-items: baseline;
  }

  .due-payment-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .upcoming-payment-item {
    grid-template-areas:
      "date amount"
      "identity identity";
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .upcoming-payment-date {
    justify-self: start;
  }

  .recurring-form-footer,
  .entry-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .section-heading,
  .theme-detail-header {
    align-items: stretch;
    flex-direction: column;
  }

  .section-heading > p {
    max-width: none;
    text-align: left;
  }

  .theme-detail-header .compact-btn {
    align-self: flex-start;
  }

  .theme-detail-actions {
    justify-content: flex-start;
  }

  .theme-card-metrics,
  .theme-stats {
    gap: 7px;
  }

  .theme-card-button {
    padding: 14px;
  }

  .theme-create-card,
  .theme-detail-card,
  .theme-history-card {
    padding: 15px;
  }

  .inline-actions {
    width: 100%;
  }

  .inline-actions button {
    flex: 1;
    min-width: 0;
  }

  .history-item {
    grid-template-columns: 1fr;
  }

  .history-delete-btn {
    justify-self: start;
    margin: -12px 0 6px 62px;
  }

  .theme-history {
    margin: 0 -15px -6px;
  }

  .history-main {
    padding: 10px 15px;
  }

  .history-item + .history-item::before {
    left: 67px;
  }

  .budget-empty-state {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 15px;
  }

  .budget-empty-state .primary-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .budget-hero,
  .budget-section-card {
    padding: 15px;
  }

  .budget-breakdown,
  .budget-awareness-grid {
    grid-template-columns: 1fr;
  }

  .budget-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .budget-section-heading > p {
    max-width: none;
    text-align: left;
  }

  .budget-limit-row {
    grid-template-columns: minmax(0, 1fr) 124px;
    gap: 10px;
  }

  .budget-limit-progress {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .budget-history-header {
    display: none;
  }

  .budget-history-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .budget-history-row span:first-child {
    grid-column: 1 / -1;
    font-weight: 700;
  }

  .budget-history-row span:not(:first-child) {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .budget-history-row span:not(:first-child)::before {
    content: attr(data-label);
    color: var(--ink-muted);
    font-family: var(--font-text);
    font-size: 0.68rem;
    font-weight: 600;
  }
}

/* --- Вход: пока нет сессии, приложение скрыто целиком --- */

body.is-locked .app-shell,
body.is-locked .modal {
  display: none;
}

.login-screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px var(--space-page);
}

.login-screen[hidden] {
  display: none;
}

.login-card {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.login-icon {
  justify-self: center;
  width: 72px;
  height: 72px;
  border-radius: 17px;
}

.login-title {
  margin: 0;
  font-size: 28px;
}

.login-subtitle {
  margin: -8px 0 6px;
  color: var(--ink-muted);
  font-size: 15px;
}

.login-card .form-list {
  text-align: left;
}

.login-error {
  margin: 0;
  color: var(--expense);
  font-size: 15px;
}

.login-error[hidden] {
  display: none;
}

.login-submit {
  border-radius: var(--radius-pill);
  font-size: 17px;
}

.login-submit:disabled {
  opacity: 0.6;
}

/* --- Ещё → Категории --- */

.categories-type-segments {
  justify-self: center;
}

.lock-inline {
  white-space: nowrap;
}

.category-item-main {
  align-items: center;
  padding: 11px 14px;
}

.category-item-main strong {
  font-size: 16px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.category-item.no-tile::before {
  left: 14px;
}

.category-lock {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-form-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.category-preview-tile {
  width: 52px;
  height: 52px;
  border-radius: 15px;
}

.category-preview-tile svg {
  width: 26px;
  height: 26px;
}

.category-preview-tile .cat-tile-emoji {
  font-size: 28px;
}

.category-form-hint {
  flex: 1;
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.35;
}

.category-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.category-emoji-option {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: var(--surface);
  font-size: 23px;
  line-height: 1;
}

.category-emoji-option[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.category-emoji-option:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.category-emoji-default .cat-tile {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.category-emoji-default .cat-tile svg {
  width: 16px;
  height: 16px;
}

.category-form-error {
  margin: 0;
  color: var(--expense);
  font-size: 14px;
}

.category-add-child-btn {
  justify-self: start;
}

.form-list-row input:disabled {
  color: var(--ink-muted);
  -webkit-text-fill-color: var(--ink-muted);
  opacity: 1;
}