* { box-sizing: border-box; }

/* Светлая тема — значения по умолчанию на :root. Тёмная переопределяет те же токены ниже,
   либо через системную prefers-color-scheme, либо явно через [data-theme="dark"] (выбор в
   настройках, сохраняется в localStorage и применяется инлайн-скриптом в <head> до отрисовки,
   чтобы не было вспышки не той темы). */
:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --card-hover: #eef0f4;
  --border: #e2e5eb;
  --text: #15171c;
  --muted: #6b7280;
  --accent: #3b6bff;
  --accent-dim: #e4eaff;
  --danger: #e0394f;
  --success: #15a35a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115;
    --card: #1a1d24;
    --card-hover: #21252e;
    --border: #2a2e38;
    --text: #eef0f4;
    --muted: #8b93a3;
    --accent: #5b8cff;
    --accent-dim: #2c3a5e;
    --danger: #ff5b6e;
    --success: #4ade80;
  }
}

:root[data-theme="dark"] {
  --bg: #0f1115;
  --card: #1a1d24;
  --card-hover: #21252e;
  --border: #2a2e38;
  --text: #eef0f4;
  --muted: #8b93a3;
  --accent: #5b8cff;
  --accent-dim: #2c3a5e;
  --danger: #ff5b6e;
  --success: #4ade80;
}

html, body { background: var(--bg); }

body {
  margin: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  padding-top: env(safe-area-inset-top);
  -webkit-tap-highlight-color: transparent;
}

button, a, input, select {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  font-family: inherit;
}
input, select { -webkit-user-select: text; user-select: text; }

.hidden { display: none !important; }

/* --- Login --- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg);
}
.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 28px;
  width: 100%;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.login-badge-img { width: 96px; height: 96px; margin-bottom: 8px; }
.login-card h1 { margin: 0 0 8px; font-size: 24px; }
.muted { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.login-card input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 14px;
  border-radius: 12px;
  font-size: 16px;
  text-align: left;
  margin-bottom: 12px;
}
.auth-form { text-align: left; }
.auth-switch-link {
  display: block;
  margin-top: 16px;
  color: var(--accent);
  font-size: 14px;
  text-decoration: none;
  font-weight: 600;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: var(--muted);
  font-size: 13px;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.login-card button, .btn-primary {
  width: 100%;
  background: var(--accent);
  color: white;
  border: none;
  padding: 13px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.error { color: var(--danger); font-size: 14px; margin-bottom: 12px; }

/* --- Top bar --- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.brand-icon { width: 28px; height: 28px; border-radius: 8px; }

main#app { max-width: 480px; margin: 0 auto; padding: 16px 16px; padding-bottom: 150px; min-height: 100vh; }

.section-title { font-size: 17px; font-weight: 700; margin: 4px 0 14px; }

.toast {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 90px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  z-index: 60;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  white-space: nowrap;
}

/* --- Bottom nav --- */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 30;
}
.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 0 8px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}
.nav-tab.active { color: var(--accent); }

/* --- Mic (floating, thumb-reachable, above bottom nav) --- */
.mic-dock {
  position: fixed;
  right: 20px;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.mic-fab {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
  transition: transform 0.15s ease, background 0.15s ease;
  -webkit-touch-callout: none;
  touch-action: none;
}
.mic-fab:active { transform: scale(0.96); }
.mic-fab.recording { background: var(--danger); }
.mic-icon { position: relative; z-index: 2; transition: opacity 0.15s ease; }
.mic-fab.recording .mic-icon { opacity: 0; }
/* Во время записи на красной кнопке — иконка паузы: нажатие останавливает запись и отправляет */
.mic-pause-icon { position: absolute; z-index: 2; opacity: 0; transition: opacity 0.15s ease; }
.mic-fab.recording .mic-pause-icon { opacity: 1; }
.mic-status-pill { font-variant-numeric: tabular-nums; }
.mic-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--danger); opacity: 0; }
.mic-fab.recording .mic-ring { animation: mic-pulse 1.6s ease-out infinite; }
.mic-fab.recording .mic-ring-2 { animation-delay: 0.5s; }
@keyframes mic-pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.9); opacity: 0; } }
.mic-fab.listening:not(.recording) { animation: mic-listening-glow 2s ease-in-out infinite; }
@keyframes mic-listening-glow {
  0%, 100% { box-shadow: 0 4px 18px rgba(0,0,0,0.25), 0 0 0 0 var(--accent-dim); }
  50% { box-shadow: 0 4px 18px rgba(0,0,0,0.25), 0 0 0 8px var(--accent-dim); }
}
.mic-status-pill {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  max-width: calc(100vw - 40px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.rec-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); margin-right: 6px; vertical-align: 1px;
  animation: rec-blink 1s ease-in-out infinite;
}
@keyframes rec-blink { 50% { opacity: 0.35; } }

/* --- Last result toast/card --- */
.last-result {
  background: var(--card);
  border: 1px solid var(--accent-dim);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}
.last-result .lr-info { display: flex; flex-direction: column; gap: 2px; }
.last-result .lr-cat { font-size: 13px; color: var(--muted); }
.last-result .lr-desc { font-size: 15px; font-weight: 600; }
.last-result .lr-amount { font-size: 18px; font-weight: 700; color: var(--success); white-space: nowrap; }
.last-result.error { border-color: var(--danger); }
.last-result.error .lr-desc { color: var(--danger); }

/* --- Entry: category grid --- */
.income-chip {
  display: inline-flex;
  width: auto;
  margin-bottom: 14px;
  padding: 8px 16px;
  color: var(--success);
  border-color: var(--success);
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cat-tile {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
}
.cat-tile-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
}
.cat-tile-icon-add { background: var(--card); border: 1.5px dashed var(--border); color: var(--muted); font-size: 24px; font-weight: 300; }
.cat-tile-name { font-size: 12px; color: var(--text); text-align: center; line-height: 1.2; }

/* --- Period tabs (Итоги) --- */
.period-tabs {
  display: flex;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 14px;
  gap: 2px;
}
.period-tab {
  flex: 1;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 9px 4px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}
.period-tab.active { background: var(--accent); color: white; font-weight: 600; }

.period-pick-row { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.period-pick-row input[type=date] {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px;
  border-radius: 10px;
  font-size: 13px;
}
.period-pick-row .btn-primary { width: auto; padding: 9px 16px; }
.period-pick-row span { color: var(--muted); }

/* --- Month nav --- */
.month-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0 0 14px; }
.nav-arrow {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  width: 36px; height: 36px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
}
.month-label { font-weight: 600; min-width: 140px; text-align: center; }

/* --- Total card --- */
.total-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  margin-bottom: 16px;
}
.total-label { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.total-amount { font-size: 30px; font-weight: 700; }
.income-total { color: var(--success); font-size: 14px; font-weight: 600; margin-top: 6px; }

/* --- Category breakdown --- */
.category-breakdown { margin-bottom: 20px; }
.cat-row { margin-bottom: 10px; }
.cat-row-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.cat-row-name { color: var(--text); }
.cat-emoji { margin-right: 6px; }
.cat-row-amount { color: var(--muted); }
.cat-bar-track { background: var(--border); border-radius: 6px; height: 8px; overflow: hidden; }
.cat-bar-fill { height: 100%; border-radius: 6px; }

/* --- Expense list --- */
.expense-list { display: flex; flex-direction: column; gap: 8px; }
.day-group-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin: 14px 0 6px; }
.expense-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.expense-row:active { background: var(--card-hover); }
/* Свайп влево для удаления: строка едет поверх красной подложки с кнопкой */
.swipe-wrap { position: relative; border-radius: 12px; overflow: hidden; transition: opacity 0.25s ease; }
.swipe-wrap .expense-row { position: relative; z-index: 1; touch-action: pan-y; transition: transform 0.22s ease; -webkit-user-select: none; user-select: none; }
.swipe-wrap .expense-row.swiping { transition: none; }
.swipe-delete-btn {
  position: absolute; top: 0; right: 0; bottom: 0; width: 92px;
  background: none; border: none; color: #fff; font-weight: 600; font-size: 14px; cursor: pointer;
  transition: width 0.2s ease;
}
.swipe-armed .swipe-delete-btn { width: 100%; text-align: right; padding-right: 22px; }
/* Красная подложка видна только во время свайпа/в открытом состоянии — иначе просвечивает по скруглённым углам */
.swipe-wrap.swipe-active { background: var(--danger); }
.swipe-wrap:not(.swipe-active) .swipe-delete-btn { visibility: hidden; }
.swipe-removing { opacity: 0; pointer-events: none; }
.expense-row .er-left { display: flex; align-items: center; overflow: hidden; }
.expense-row .er-emoji {
  font-size: 20px;
  width: 38px; height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  margin-right: 12px;
}
.expense-row .er-info { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.expense-row .er-desc { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.expense-row .er-cat { font-size: 12px; color: var(--muted); }
.expense-row .er-amount { font-weight: 700; white-space: nowrap; margin-left: 10px; }
.expense-row .er-amount-income { color: var(--success); }
.expense-row .er-amount-col { display: flex; flex-direction: column; align-items: flex-end; }
.expense-row .er-amount-main { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.empty-state { color: var(--muted); text-align: center; padding: 30px 0; font-size: 14px; }

/* --- Settings --- */
.settings-block { margin-bottom: 22px; }
.settings-block-label { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; margin-bottom: 6px; padding-left: 2px; }
.settings-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.logout-row { color: var(--danger); justify-content: center; font-weight: 600; margin-top: 8px; cursor: pointer; }
.cat-settings-row { gap: 10px; cursor: pointer; }
.cat-settings-row .cat-tile-icon { width: 34px; height: 34px; font-size: 17px; }
.cat-settings-name { flex: 1; }
.chevron { color: var(--muted); }
.cat-settings-add .cat-tile-icon-add { width: 34px; height: 34px; font-size: 18px; }

.theme-switch {
  display: flex;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
}
.theme-opt { flex: 1; background: none; border: none; border-radius: 9px; padding: 10px 4px; font-size: 13px; color: var(--muted); cursor: pointer; }
.theme-opt.active { background: var(--accent); color: white; font-weight: 600; }

.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 999px; transition: .2s; }
.switch-slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: .2s; }
.switch input:checked + .switch-slider { background: var(--accent); }
.switch input:checked + .switch-slider::before { transform: translateX(20px); }

/* --- Modal --- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal-card { background: var(--card); border-radius: 20px; padding: 20px; width: 100%; max-width: 420px; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.modal-card h3 { margin: 0 0 16px; }
.modal-card label { display: block; font-size: 12px; color: var(--muted); margin: 14px 0 4px; }
.modal-card label:first-of-type { margin-top: 0; }
.modal-card input, .modal-card select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px;
  border-radius: 10px;
  font-size: 15px;
}
.modal-actions { display: flex; gap: 8px; margin-top: 18px; }
.btn-ghost, .btn-danger {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}
.btn-danger { color: var(--danger); border-color: var(--danger); }
.modal-actions .btn-primary { flex: 1; }

.entry-modal-cat { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.entry-modal-cat .cat-tile-icon { width: 38px; height: 38px; font-size: 19px; }

.picker-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.picker-item {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid transparent;
  background: var(--bg);
  font-size: 19px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.picker-item.picked { border-color: var(--accent); }
.color-item.picked { border-color: var(--text); }

/* --- Currency list modal --- */
.currency-list { max-height: 60vh; overflow-y: auto; }
.currency-row { cursor: pointer; }
.currency-symbol-badge {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  margin-right: 10px;
}
.currency-name { flex: 1; }
.currency-row .check { color: var(--accent); font-weight: 700; }

/* --- Face ID --- */
.connect-row { color: var(--accent); justify-content: center; font-weight: 600; cursor: pointer; border: none; width: 100%; margin-top: 8px; }
.faceid-device-row { margin-top: 8px; }
.faceid-remove { flex: none; width: auto; padding: 7px 12px; font-size: 13px; }
.faceid-login-btn { margin-top: 10px; }

/* Поле суммы с кнопкой выбора валюты справа (модалка ввода) */
.amount-field { position: relative; }
.modal-card .amount-field input { padding-right: 96px; }
.amount-currency-btn {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  background: var(--card); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 6px 10px; font-size: 14px; font-weight: 600;
  cursor: pointer; touch-action: manipulation; max-width: 86px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Перестановка иконок категорий (долгое нажатие на экране "Ввод") */
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.section-title-row .section-title { flex: 1; }
.cat-done-btn { padding: 6px 14px; margin: 0 0 10px; font-weight: 600; }
.cat-tile { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; transition: transform 0.2s ease; }
.cat-grid-editing .cat-tile[data-id] { touch-action: none; }
.cat-grid-editing .cat-tile[data-id] .cat-tile-icon { animation: cat-wiggle 0.28s ease-in-out infinite alternate; }
.cat-grid-editing .cat-tile[data-id]:nth-child(2n) .cat-tile-icon { animation-delay: -0.14s; }
.cat-tile-dragging { position: relative; z-index: 20; transition: none !important; pointer-events: none; }
.cat-tile-dragging .cat-tile-icon { animation: none !important; box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
@keyframes cat-wiggle { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

/* Сворачиваемый раздел "Категории" в Настройках */
.cats-toggle { cursor: pointer; font-weight: 600; -webkit-user-select: none; user-select: none; }
.cats-toggle-right { display: flex; align-items: center; gap: 10px; }
.cats-toggle .chevron { display: inline-block; transition: transform 0.2s ease; font-size: 18px; }
.cats-toggle.open .chevron { transform: rotate(90deg); }
.cats-list { margin-top: 8px; }

/* Выбор эмодзи категории: прокручиваемый блок, сверху "Подходящие" от GPT */
.emoji-picker-wrap {
  max-height: 280px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: 12px; padding: 4px 8px 8px;
  background: var(--bg);
}
.emoji-section-title {
  position: sticky; top: -4px; z-index: 1; background: var(--bg);
  font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px 2px 6px;
}
.emoji-suggest-status { font-weight: 400; }
.emoji-section { border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 2px; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; }
.emoji-item {
  height: 42px; border: 2px solid transparent; border-radius: 10px; background: none;
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0; touch-action: manipulation;
}
.emoji-item.picked { border-color: var(--accent); background: var(--card); }
.emoji-loading { color: var(--muted); font-size: 13px; padding: 14px 4px; text-align: center; }

/* PIN-код: экран блокировки и установки */
.pin-overlay {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
.pin-close {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px;
  background: none; border: none; font-size: 22px; color: var(--muted); cursor: pointer; padding: 8px;
}
.pin-badge { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 14px; }
.pin-title { font-size: 18px; font-weight: 700; margin-bottom: 18px; text-align: center; }
.pin-dots { display: flex; gap: 16px; margin-bottom: 10px; }
.pin-dots span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); transition: background 0.1s; }
.pin-dots span.filled { background: var(--text); border-color: var(--text); }
.pin-dots.shake { animation: pin-shake 0.35s; }
@keyframes pin-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pin-error { color: var(--danger); font-size: 13px; min-height: 18px; margin-bottom: 14px; text-align: center; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 16px 24px; }
.pin-pad button {
  width: 72px; height: 72px; border-radius: 50%; border: none; background: var(--card);
  color: var(--text); font-size: 28px; font-weight: 500; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08); touch-action: manipulation;
}
.pin-pad button:active { background: var(--border); }
.pin-pad .pin-del { background: none; box-shadow: none; font-size: 24px; }
.pin-footer { margin-top: 24px; }
.pin-forgot { color: var(--accent); font-size: 14px; text-decoration: none; }
.pin-actions { display: flex; gap: 8px; }
.pin-actions .connect-row { flex: 1; }
.pin-off-btn { color: var(--danger); }
.pin-set-btn { margin-top: 0; }
.pin-hint { padding: 6px 4px 0; }

/* ---------- Типографика: единая шкала размеров (2026-10-04) ----------
   Кнопки по умолчанию НЕ наследуют шрифт (в iOS это ~13px) — отсюда были мелкие
   "Установить PIN-код" и т.п. Поля ввода 16px — иначе iOS зумит страницу при фокусе.
   Шкала: 12 подписи таб-бара · 13 служебные/вторичные · 15 элементы управления ·
   16 основной текст · 20+ заголовки и суммы. */
button, input, select, textarea { font: inherit; }
body { font-size: 16px; line-height: 1.35; }

.brand { font-size: 18px; }
.section-title { font-size: 19px; } /* было 22px, −15% по просьбе Антона */
.nav-tab { font-size: 12px; }

.settings-block-label { font-size: 13px; }
.settings-row { font-size: 16px; }
.settings-sub { font-size: 13px; }
.chevron { font-size: 22px; line-height: 1; }
.cats-toggle { font-size: 17px; }
.cats-toggle .chevron { font-size: 22px; }
.cats-toggle-right .settings-sub { font-size: 15px; margin-top: 0; }
.connect-row, .logout-row { font-size: 16px; }
.theme-opt { font-size: 15px; }

.cat-tile-name { font-size: 13px; }
.period-tab { font-size: 15px; }
.total-label { font-size: 14px; }
.total-amount { font-size: 32px; }
.income-total { font-size: 15px; }
.cat-row-top { font-size: 15px; }
.day-group-label { font-size: 13px; }
.expense-row .er-desc { font-size: 16px; }
.expense-row .er-cat { font-size: 13px; }
.expense-row .er-amount { font-size: 16px; }
.expense-row .er-amount-main { font-size: 13px; }
.last-result .lr-cat { font-size: 13px; }
.last-result .lr-desc { font-size: 16px; }
.empty-state { font-size: 15px; }

.modal-card h3 { font-size: 20px; }
.modal-card label { font-size: 13px; }
.modal-card input, .modal-card select { font-size: 16px; }
.btn-ghost, .btn-danger, .btn-primary { font-size: 16px; }
.entry-modal-cat { font-size: 16px; }
.toast { font-size: 15px; }
.mic-status-pill { font-size: 13px; }

/* ---------- Кнопка микрофона: ожидание расшифровки ---------- */
.mic-fab.processing { filter: brightness(0.85); cursor: progress; }
.mic-fab.processing .mic-icon { opacity: 0.45; }
.mic-fab.processing::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 3px solid transparent; border-top-color: var(--accent); border-right-color: var(--accent);
  animation: mic-spin 0.9s linear infinite;
}
@keyframes mic-spin { to { transform: rotate(360deg); } }

/* Меню долгого нажатия на плитке категории */
.tile-menu-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.18); pointer-events: none; }
.tile-menu-backdrop.armed { pointer-events: auto; }
.tile-menu {
  position: fixed; z-index: 62; min-width: 210px; padding: 6px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.25); display: flex; flex-direction: column;
}
.tile-menu button {
  background: none; border: none; text-align: left; padding: 12px 14px; border-radius: 10px;
  font-size: 16px; color: var(--text); cursor: pointer; touch-action: manipulation;
}
.tile-menu button:active { background: var(--bg); }
.tile-menu .tile-menu-danger { color: var(--danger); }
.cat-tile-menu-open { position: relative; z-index: 61; transform: scale(1.06); }
.cat-tile { transition: none; }

/* Вторая валюта */
.amt-alt { color: var(--muted); font-weight: 400; }
.last-result .lr-amount-col { display: flex; flex-direction: column; align-items: flex-end; }
.last-result .lr-amount-alt { font-size: 13px; color: var(--muted); margin-top: 2px; white-space: nowrap; }

/* Плитка "Доход" — отдельной строкой над сеткой трат */
.income-grid { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }

/* Ошибка распознавания — окно по центру, фон размыт */
.error-popup {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0,0,0,0.2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.2s ease;
}
.error-popup.visible { opacity: 1; }
.error-popup-card {
  background: var(--card); border-radius: 20px; padding: 24px 22px 18px;
  width: 100%; max-width: 320px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  transform: scale(0.94); transition: transform 0.2s ease;
}
.error-popup.visible .error-popup-card { transform: scale(1); }
.error-popup-icon { font-size: 40px; margin-bottom: 8px; }
.error-popup-text { font-size: 17px; font-weight: 600; margin-bottom: 18px; line-height: 1.35; }
.error-popup-btn { width: 100%; }

/* Результат голосового ввода — та же центральная карточка, что и ошибка */
.error-popup-check { font-size: 13px; color: var(--success); font-weight: 600; margin-bottom: 12px; }
.result-popup-icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px;
  display: flex; align-items: center; justify-content: center; font-size: 32px;
}
.result-popup-cat { font-size: 13px; color: var(--muted); margin-bottom: 2px; }
.result-popup-desc { font-size: 17px; font-weight: 600; margin-bottom: 10px; line-height: 1.3; }
.result-popup-amount { font-size: 30px; font-weight: 700; }
.result-popup-amount.is-income { color: var(--success); }
.result-popup-alt { font-size: 14px; color: var(--muted); margin-top: 2px; }
.result-popup-actions { display: flex; gap: 8px; margin-top: 18px; }
.result-popup-actions button { flex: 1; }

/* Шапка: енот размером с кружки категорий (56px), название — как заголовки экранов (19px) */
.brand { font-size: 19px; gap: 10px; }
.brand-icon { width: 45px; height: 45px; border-radius: 11px; } /* размер задан Антоном */
.login-badge-img, .pin-badge { border-radius: 22%; }

/* Итоги: сворачиваемый блок категорий, фильтр по категории, сворачиваемые дни */
.section-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; padding: 4px 2px 10px; cursor: pointer;
  color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
}
.section-toggle .chevron, .day-group-label .chevron {
  display: inline-block; transition: transform 0.2s ease; font-size: 20px; color: var(--muted);
}
.section-toggle.open .chevron, .day-group-label.open .chevron { transform: rotate(90deg); }
.cat-row { cursor: pointer; transition: opacity 0.15s ease; }
.cat-row-dim { opacity: 0.4; }
.cat-row-active .cat-row-name { font-weight: 700; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 4px;
  background: var(--card); border: 1px solid var(--accent); color: var(--text);
  border-radius: 999px; padding: 6px 6px 6px 12px; font-size: 14px;
}
.filter-chip button {
  background: var(--bg); border: none; border-radius: 50%; width: 24px; height: 24px;
  color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1;
}
.day-group-label {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; padding: 0 2px; cursor: pointer; text-align: left;
}
.day-sum { text-transform: none; letter-spacing: 0; font-weight: 600; }
.day-group-items { display: flex; flex-direction: column; gap: 8px; }

/* Экран входа: "Забыли пароль?" основной ссылкой, регистрация — второй, поменьше */
.auth-switch-secondary { margin-top: 24px; color: var(--muted); font-size: 14px; }

/* Поле даты в "Изменить запись": iOS рисует date-input по-своему (по центру, другой высоты) */
.modal-card input[type=date] {
  -webkit-appearance: none; appearance: none; min-height: 46px; text-align: left; display: block;
}
.modal-card input[type=date]::-webkit-date-and-time-value { text-align: left; }

/* "Объединить трату?" — N штук по цене за штуку */
.merge-calc { font-size: 16px; color: var(--muted); margin-bottom: 16px; }
.merge-calc b { color: var(--text); font-size: 20px; }
.merge-actions { display: flex; flex-direction: column; gap: 8px; }
.merge-actions button { width: 100%; }
.merge-cancel { background: none; border: none; color: var(--muted); font-size: 14px; margin-top: 12px; cursor: pointer; padding: 6px; }

/* Длинные обозначения валют (AED, сум) — мельче, чтобы влезали в кружок */
.currency-symbol-badge.badge-small { font-size: 11px; letter-spacing: -0.2px; }

/* "16.04 = 16.37 × 0.98 · кэшбэк 2%" под суммой в "Изменить запись" */
.amount-hint { font-size: 13px; color: var(--muted); margin: 6px 2px 0; }

/* "Новая трата": строка категории нажимается — поверх неё прозрачный нативный select */
.entry-modal-cat.changeable { position: relative; cursor: pointer; }
.entry-cat-change { margin-left: auto; color: var(--accent); font-size: 14px; font-weight: 500; }
.modal-card .entry-cat-select {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  font-size: 16px; /* меньше 16px — iOS зумит страницу */ padding: 0; border: none;
}

/* "изм." в строке категории окна "Новая трата" — над прозрачным select */
.modal-card .entry-cat-select { z-index: 1; }
.entry-cat-edit {
  position: relative; z-index: 2; background: var(--bg); border: 1px solid var(--border);
  color: var(--muted); border-radius: 8px; padding: 3px 8px; font-size: 13px; font-weight: 500;
  cursor: pointer; touch-action: manipulation;
}

/* "Кэшбэк, %" в "Изменить запись" — компактная строка под суммой */
.cashback-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.modal-card .cashback-row label { margin: 0; font-size: 14px; color: var(--muted); }
.cashback-input { display: flex; align-items: center; gap: 6px; }
.modal-card .cashback-input input { width: 84px; text-align: right; padding: 8px 10px; }
.cashback-input span { color: var(--muted); font-size: 16px; }
.amount-hint { color: var(--text); font-weight: 600; }

/* Тур по кнопкам для нового пользователя */
.tour { position: fixed; inset: 0; z-index: 90; touch-action: none; overscroll-behavior: none; }
.tour-spot {
  position: fixed; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62);
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.tour-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid rgba(255, 255, 255, 0.85);
}
.tour-card {
  position: fixed; left: 16px; right: 16px; max-width: 420px; margin: 0 auto;
  background: var(--card); color: var(--text); border-radius: 18px; padding: 16px 16px 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.tour-step { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.tour-text { font-size: 16px; line-height: 1.4; margin-bottom: 14px; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour-skip { background: none; border: none; color: var(--muted); font-size: 15px; padding: 8px 4px; cursor: pointer; }
.tour-next { min-width: 120px; margin-left: auto; }

/* Удаление аккаунта */
.delete-account-link {
  display: block; width: 100%; margin-top: 14px; background: none; border: none;
  color: var(--muted); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; padding: 6px;
}
.delete-account-text { color: var(--muted); font-size: 14px; line-height: 1.4; margin: 0 0 6px; }
.btn-danger-solid {
  flex: 1; background: var(--danger); color: #fff; border: none; border-radius: 12px;
  padding: 12px; font-size: 16px; font-weight: 600; cursor: pointer;
}
.btn-danger-solid:disabled { opacity: 0.6; }

/* Кружок кэшбэка "2%" в правом нижнем углу значка категории */
.expense-row .er-emoji, .result-popup-icon { position: relative; }
.cb-badge {
  position: absolute; right: -7px; bottom: -7px; min-width: 22px; height: 22px; padding: 0 4px;
  border-radius: 11px; background: var(--success); color: #fff; border: 2px solid var(--card);
  font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; letter-spacing: -0.2px;
  box-sizing: border-box;
}
.result-popup-icon .cb-badge { min-width: 30px; height: 26px; line-height: 22px; font-size: 12px; right: -6px; bottom: -4px; }
.expense-row .er-left { overflow: visible; } /* иначе кружок кэшбэка обрезается снизу; ellipsis держит .er-info */
.expense-row .er-info { min-width: 0; }

/* ================= Единая шкала шрифтов (2026-10-05, вторая итерация) =================
   Антон: "слишком много типов шрифтов". Вместо десятка размеров — четыре + крупные цифры:
   13 — мелкие ЗАГЛАВНЫЕ заголовки разделов и подписи под плитками
   14 — второстепенный/серый текст: подписи полей, пояснения, категория под тратой, "≈ …"
   16 — основной текст: строки, кнопки, поля ввода, вкладки
   19 — заголовки экранов и окон
   (суммы "Расход за период"/"Записано" — отдельно, крупно; таб-бар — 12, как в iOS)
   Этот блок последний в файле и перекрывает все размеры выше — новые размеры добавлять только сюда. */
:root { --fs-xs: 13px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 19px; }

.settings-block-label, .day-group-label, .section-toggle, .emoji-section-title, .tour-step,
.cat-tile-name { font-size: var(--fs-xs); }

.settings-sub, .modal-card label, .modal-card .cashback-row label, .expense-row .er-cat,
.expense-row .er-amount-main, .result-popup-cat, .result-popup-alt, .total-label, .entry-cat-change,
.entry-cat-edit, .delete-account-link, .delete-account-text, .auth-switch-link, .auth-switch-secondary,
.error, .muted, .pin-forgot, .pin-error, .tour-skip, .filter-chip, .mic-status-pill, .toast,
.swipe-delete-btn, .emoji-loading, .cats-toggle-right .settings-sub, .amount-currency-btn,
.merge-cancel { font-size: var(--fs-sm); }

body, .settings-row, .connect-row, .logout-row, .theme-opt, .period-tab, .cat-row-top,
.expense-row .er-desc, .expense-row .er-amount, .income-total, .tile-menu button, .tour-text,
.empty-state, .result-popup-desc, .error-popup-text, .merge-calc, .cats-toggle, .entry-modal-cat,
.modal-card input, .modal-card select, .btn-ghost, .btn-danger, .btn-primary, .btn-danger-solid,
.login-card input, .login-card button, .cashback-input span { font-size: var(--fs-md); }

.section-title, .brand, .modal-card h3, .pin-title { font-size: var(--fs-lg); }

/* подпись "Итого: … (кэшбэк 2%)" — обычная серая, как остальные пояснения */
.amount-hint { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); }

/* Кэшбэк: поле сразу за словом "Кэшбэк" и уже */
.cashback-row { justify-content: flex-start; gap: 10px; }
.modal-card .cashback-input input { width: 64px; }

/* Тур: кнопка "Назад" рядом с "Далее" */
.tour-back {
  background: none; border: 1px solid var(--border); border-radius: 12px; color: var(--text);
  padding: 10px 16px; font-size: var(--fs-md); cursor: pointer; touch-action: manipulation;
}
.tour-actions .tour-back + .tour-next { margin-left: 0; }
.tour-actions .tour-skip + .tour-back { margin-left: auto; }
.tour-next { min-width: 110px; }

/* "Записано N траты" — несколько трат из одной голосовой фразы */
.multi-result-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; text-align: left; }
.multi-result-row { display: flex; align-items: center; gap: 12px; }
.multi-result-emoji {
  position: relative; width: 38px; height: 38px; min-width: 38px; border-radius: 10px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.multi-result-info { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-md); }
.multi-result-info small { color: var(--muted); font-size: var(--fs-sm); }
.multi-result-amount { font-weight: 700; font-size: var(--fs-md); white-space: nowrap; }

/* Язык (RU / EN): в Настройках — как переключатель темы, на страницах входа — маленькие кнопки внизу карточки */
.lang-opt { flex: 1; background: none; border: none; border-radius: 9px; padding: 10px 4px; font-size: var(--fs-md); color: var(--muted); cursor: pointer; }
.lang-opt.active { background: var(--accent); color: white; font-weight: 600; }
.lang-switch { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.login-card .lang-switch button {
  background: none; border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px;
  font-size: var(--fs-xs); font-weight: 500; color: var(--muted); cursor: pointer; width: auto;
}
.login-card .lang-switch button.active { border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* Фон не прокручивается под открытым окном (см. updateScrollLock в app.js); прокрутка списка
   внутри окна не передаётся странице, когда список докручен до края */
html.scroll-locked, body.scroll-locked { overflow: hidden; overscroll-behavior: none; }
.modal { overscroll-behavior: contain; touch-action: none; }
.modal-card, .currency-list, .emoji-picker-wrap { overscroll-behavior: contain; touch-action: pan-y; }

/* Поиск в окне выбора валюты — справа от заголовка */
.currency-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.currency-head h3 { margin: 0; }
.modal-card .currency-head input#currencySearch {
  flex: 1; min-width: 0; width: auto; margin: 0; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 16px;
}
.currency-empty { text-align: center; padding: 18px 0; }

/* Tour geometry shares one fixed origin; no animated lag after iOS scroll locking. */
.tour { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.tour-spot { position: absolute; transition: none; }
.tour-card { position: absolute; overflow-y: auto; }
.modal.tour-entry-preview { align-items: flex-start; padding-top: var(--tour-entry-top, 24px); }
.tour-entry-preview .modal-card { max-height: var(--tour-entry-height, 60vh); }

/* Center the highlighted edit header and its tour hint as one group. */
.modal.tour-edit-preview { align-items: flex-start; padding-top: var(--tour-edit-top, 20px); }

/* Animated touch cue before the tour performs the category filter click. */
.cat-row.tour-tap { position: relative; }
.cat-row.tour-tap::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px;
  border: 3px solid var(--accent); border-radius: 50%; background: var(--accent-dim);
  pointer-events: none; animation: tour-tap 1.1s ease-out forwards;
}
@keyframes tour-tap {
  0%, 25% { transform: translate(-50%, -50%) scale(.55); opacity: 0; }
  45% { transform: translate(-50%, -50%) scale(.7); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* Supplied wordmarks: crop transparent margins in SVG, preserve source PNGs. */
.brand-logo { width: auto; height: 45px; max-width: 90vw; gap: 10px; }
.brand-logo .brand-icon { flex: 0 0 45px; }
.brand-wordmarks { display: block; width: 150px; height: 32px; }
.brand-wordmark { display: none; width: 100%; height: 100%; overflow: hidden; }
.brand-wordmark { color: var(--text); }
html:not([lang="en"]) .logo-ru-light, html[lang="en"] .logo-en-light { display: block; }
html[data-theme="dark"] .logo-ru-light, html[data-theme="dark"] .logo-en-light { display: none; }
html[data-theme="dark"]:not([lang="en"]) .logo-ru-dark, html[data-theme="dark"][lang="en"] .logo-en-dark { display: block; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .logo-ru-light, html:not([data-theme="light"]) .logo-en-light { display: none; }
  html:not([data-theme="light"]):not([lang="en"]) .logo-ru-dark, html:not([data-theme="light"])[lang="en"] .logo-en-dark { display: block; }
}

/* Шапка: енот + надпись на 10% меньше (Антон, 2026-10-06): было 45px / 150x32 / gap 10 */
.brand-logo { height: 40.5px; gap: 9px; }
.brand-logo .brand-icon { width: 40.5px; height: 40.5px; flex: 0 0 40.5px; border-radius: 10px; }
.brand-wordmarks { width: 135px; height: 28.8px; }

/* Тур, шаг 1: кружок касания на кнопке микрофона (имитация нажатия, см. tourDemoMic) */
.tour-mic-tap {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; z-index: 3;
  border: 3px solid #fff; border-radius: 50%; background: rgba(255, 255, 255, 0.35);
  pointer-events: none; animation: tour-tap 1.1s ease-out forwards;
}

/* Тур, шаг 2: касание плитки категории (см. tourDemoTileTap) */
.cat-tile-icon { position: relative; }
.tour-tap-dot {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; z-index: 3;
  border: 3px solid var(--accent); border-radius: 50%; background: var(--accent-dim);
  pointer-events: none; animation: tour-tap 1.1s ease-out forwards;
}
/* сжимается только кружок: размер самой плитки (и рамки тура вокруг неё) не меняется */
.cat-tile.tour-tile .cat-tile-icon { transition: transform 0.12s ease; }
.cat-tile.tour-pressed .cat-tile-icon { transform: scale(0.9); }

/* Тур, шаг 3: касания и ввод в окне «Новая трата» (см. tourDemoEntry) */
.tour-tap-fixed {
  position: fixed; width: 30px; height: 30px; z-index: 95;
  border: 3px solid var(--accent); border-radius: 50%; background: var(--accent-dim);
  pointer-events: none; animation: tour-tap 1.1s ease-out forwards;
}
.modal-card input.tour-typing { outline: 2px solid var(--accent); outline-offset: 1px; }
.amount-currency-btn.tour-pop { animation: tour-pop 0.35s ease; }
@keyframes tour-pop { 50% { scale: 1.12; } } /* scale, не transform: кнопка позиционирована через transform */

/* Тур, шаг 4: удержание и перестановка плиток (см. tourDemoTileMove) */
.cat-tile.tour-dragging { position: relative; z-index: 5; }
.cat-tile.tour-dragging .cat-tile-icon { scale: 1.12; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
.tour-finger {
  position: fixed; width: 40px; height: 40px; z-index: 95; translate: -50% -10%;
  border-radius: 50%; border: 3px solid var(--accent); background: rgba(59, 130, 246, 0.12);
  pointer-events: none; transition: left 0.6s ease, top 0.6s ease;
}
.cat-tile.tour-holding .cat-tile-icon { scale: 0.92; transition: scale 0.7s ease; }
.tour-hold-ring {
  position: absolute; inset: -7px; border-radius: 50%; border: 3px solid var(--accent);
  pointer-events: none; animation: tour-hold 0.8s ease-out forwards;
}
@keyframes tour-hold { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: scale(1); } }

/* Тур, шаг 3: выплывающий список валют под кнопкой (см. tourDemoEntry) */
.tour-cur-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; min-width: 132px; padding: 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); animation: tour-cur-pop-in 0.2s ease-out;
  transform-origin: top right;
}
@keyframes tour-cur-pop-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
.tour-cur-row {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 9px;
  font-size: var(--fs-md); font-weight: 600; color: var(--text); transition: background 0.15s ease;
}
.tour-cur-row .check { margin-left: auto; color: var(--accent); }
.tour-cur-row.active { background: var(--accent-dim); }

/* Нижние вкладки: отклик на нажатие (класс .pressed ставит app.js) */
.nav-tab { position: relative; transition: color 0.15s ease; }
.nav-tab::before {
  content: ""; position: absolute; inset: 4px 16%; border-radius: 14px;
  background: transparent; transition: background 0.15s ease;
}
.nav-tab > * { position: relative; }
.nav-tab.pressed { color: var(--accent); }
.nav-tab.pressed::before { background: var(--accent-dim); }

/* Неподвижна только шапка (см. bindStickyHead в app.js); верх экранов прокручивается вместе со страницей */
html { scroll-padding-top: var(--sticky-total, 0px); }
.topbar {
  position: sticky; top: 0; z-index: 30; background: var(--bg);
  margin-top: calc(-1 * env(safe-area-inset-top, 0px));
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}

/* «Итоги»: двухэтапная компактная сводка под шапкой при прокрутке (renderReportMini/updateReportMini) */
.report-mini {
  position: fixed; top: var(--topbar-h, 0px); left: 0; right: 0; z-index: 25;
  max-width: 480px; margin: 0 auto; padding: 0 16px; background: var(--bg);
  border-bottom: 1px solid var(--border);
  opacity: 0; pointer-events: none;
  /* шторку (clip-path) задаёт updateReportMini() по ходу прокрутки — без transition, чтобы не отставала */
}
.total-card { transform-origin: top center; }
.rm-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0 8px; }
.rm-period { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; white-space: nowrap; }
.rm-total { font-size: var(--fs-md); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-cats-wrap { padding: 0 0 8px; }
.rm-cats {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.rm-cats::-webkit-scrollbar { display: none; }
.rm-cat {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--text);
  font-size: var(--fs-xs); white-space: nowrap; cursor: pointer;
}
.rm-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.rm-cat-dim { opacity: 0.4; }
.rm-cat-active { border-color: var(--accent); font-weight: 700; }
.rm-stack { display: flex; height: 3px; border-radius: 2px; overflow: hidden; margin-top: 7px; background: var(--border); }
.rm-stack i { display: block; height: 100%; }

/* Заголовок «Настройки» прилипает под шапкой */
.settings-title {
  position: sticky; top: var(--topbar-h, 0px); z-index: 20; background: var(--bg);
  margin: -16px -16px 6px; padding: 20px 16px 8px; /* то же место, что у обычного заголовка */
}

/* Надписи v3 (ChatGPT, вставлены без изменений, 2026-10-06): один PNG на язык как маска,
   цвет задаётся фоном — тёмно-серый в светлой теме, --text в тёмной. Старые SVG-фильтры убраны. */
.brand-wm {
  display: none; width: 100%; height: 100%; background: #3d434d;
  -webkit-mask: url("/static/logos/wordmark-ru-v4.png") center / contain no-repeat;
          mask: url("/static/logos/wordmark-ru-v4.png") center / contain no-repeat;
}
.brand-wm.wm-en {
  -webkit-mask-image: url("/static/logos/wordmark-en-v4.png");
          mask-image: url("/static/logos/wordmark-en-v4.png");
}
html:not([lang="en"]) .wm-ru, html[lang="en"] .wm-en { display: block; }
html[data-theme="dark"] .brand-wm { background: var(--text); }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .brand-wm { background: var(--text); }
}

/* Шапка v2 (Антон, 2026-10-07): енот выглядывает из-за нижней линии шапки — низ картинки стоит
   ровно на линии (у шапки нет нижнего отступа), надпись справа по центру высоты енота */
.topbar { padding-bottom: 0; }
.brand-logo { height: auto; align-items: center; gap: 10px; }
.brand-peek { display: block; height: 64px; width: auto; flex: 0 0 auto; align-self: flex-end; }
.brand-logo .brand-wordmarks { margin-bottom: 4px; }

/* Шапка v3 (2026-10-07): енот v2 чуть ниже высоты шапки, сама шапка ниже (64 px вместо 79) */
.topbar { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
.brand-peek { height: 56px; }
.brand-logo .brand-wordmarks { width: 126px; height: 27px; margin-bottom: 2px; }

/* Шапка v4 (2026-10-07): ближе к размеру заголовков (19 px), но чуть крупнее */
.topbar { padding-top: calc(6px + env(safe-area-inset-top, 0px)); }
.brand-peek { height: 42px; }
.brand-logo { gap: 8px; }
.brand-logo .brand-wordmarks { width: 94px; height: 20px; margin-bottom: 1px; }

/* Надпись в шапке — того же цвета, что заголовки экранов (--text), в обеих темах */
.brand-wm, html[data-theme="dark"] .brand-wm { background: var(--text); }

/* Свёрнутые «Итоги»: цветная полоса долей не показывается (Антон) */
.rm-stack { display: none; }

/* Поиск по эмодзи справа от «Значок» (см. runEmojiSearch) */
.emoji-label-row { display: flex; align-items: center; gap: 12px; }
.emoji-label-row label { flex: 0 0 auto; margin: 0; }
.modal-card .emoji-label-row input#emojiSearch {
  flex: 1; min-width: 0; width: auto; margin: 8px 0; padding: 7px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 16px;
}
.search-hidden { display: none !important; }

/* Шкала шрифтов, финальная (2026-10-07): текст только 12 · 14 · 16 · 19 + витринные 24 (логотип на
   входе) и 32 (сумма итога). 13 px слит с 14 (разница в 1 px читалась как неаккуратность), 11 → 12.
   Начертания только 400 / 600 / 700. Эмодзи, стрелки и иконки — не текст, их размеры не трогаем. */
:root { --fs-xs: 14px; }
.cat-tile-name, .rm-cat, .day-group-label, .emoji-suggest-status, .settings-block-label,
.login-card .lang-switch button, .rm-period, .tour-step { font-size: 14px; }
.currency-symbol-badge.badge-small { font-size: 12px; }
.login-card .lang-switch button, .entry-cat-edit, .entry-cat-change { font-weight: 600; }
.rm-total { font-weight: 700; }
/* подписи плиток на 14 px: «Связь и интернет» не хватало ~1 px до одной строки */
.cat-tile-name { letter-spacing: -0.2px; }

/* Вход: неверная почта/пароль — поля остаются заполненными, рамка красная */
.login-card input.input-error { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.login-card .error.hidden { display: none; }

/* Кнопки форм входа/регистрации: нажатие (класс .pressed из i18n.js) и индикатор отправки */
.login-card form button[type=submit] { position: relative; transition: transform 0.1s ease, filter 0.1s ease; }
.login-card form button[type=submit].pressed { transform: scale(0.97); filter: brightness(0.88); }
.login-card form button[type=submit].loading { color: transparent; pointer-events: none; }
.login-card form button[type=submit].loading::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border: 2.5px solid rgba(255, 255, 255, 0.45); border-top-color: #fff; border-radius: 50%;
  animation: mic-spin 0.7s linear infinite;
}
.login-card .auth-switch-link, .login-card .lang-switch button { transition: transform 0.1s ease, opacity 0.1s ease; }
.login-card .auth-switch-link.pressed, .login-card .lang-switch button.pressed { transform: scale(0.95); opacity: 0.6; }

/* Страница входа: вместо текстового «Денежки» — надпись-логотип (та же маска, что в шапке) */
.login-card h1.login-wordmark { width: 190px; height: 40px; margin: 6px auto 10px; }
.login-card h1.login-wordmark { width: 152px; height: 32px; } /* −20% (Антон) */

/* Тур: кнопка «Далее/Начать» — зелёная (Антон, вариант 3), чтобы не сливаться с синими кнопками приложения */
#tourNext.tour-next { background: #16a34a; color: #fff; }
#tourNext.tour-next:active, #tourNext.tour-next.pressed { background: #15803d; }

/* Окно «Автозапись покупок Apple Pay» */
.ingest-intro { margin: 0 0 10px; font-size: 14px; line-height: 1.4; }
.ingest-status { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.ingest-copy-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ingest-copy-row code {
  flex: 1; min-width: 0; padding: 9px 10px; border-radius: 10px; background: var(--bg);
  border: 1px solid var(--border); font-size: 12px; word-break: break-all; color: var(--text);
}
.ingest-copy-row .btn-ghost { flex: 0 0 auto; padding: 8px 10px; font-size: 14px; }
.ingest-key code { border-color: var(--accent); }
.ingest-steps { margin: 6px 0 14px; padding-left: 20px; font-size: 14px; line-height: 1.45; }
.ingest-steps li { margin-bottom: 6px; }

/* Кэшбэк по картам в окне автозаписи Apple Pay */
.ingest-cb { margin: 4px 0 12px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ingest-cb-hint { font-size: 14px; margin: 0 0 8px; line-height: 1.35; }
.ingest-rule { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.modal-card .ingest-rule input.rule-match { flex: 1; min-width: 0; margin: 0; }
.ingest-rule .cashback-input { flex: 0 0 auto; }
.modal-card .ingest-rule input.rule-pct { width: 64px; margin: 0; }
.ingest-rule .rule-del { flex: 0 0 auto; background: none; border: none; color: var(--muted); font-size: 16px; padding: 6px; cursor: pointer; }
.ingest-cb-actions { display: flex; gap: 8px; }
.ingest-cb-actions button { flex: 1; }
.ingest-seen { font-size: 14px; margin-top: 8px; line-height: 1.35; }

/* Описание траты в Итогах переносится на следующую строку, а не обрезается многоточием */
.expense-row .er-desc { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; overflow-wrap: anywhere; }
.expense-row .er-left { min-width: 0; flex: 1; }

/* Стрелки сворачивания «По категориям» / дней — крупнее (Антон); надпись в шапке ближе к еноту */
.section-toggle .chevron, .day-group-label .chevron { font-size: 26px; line-height: 1; width: 26px; text-align: center; }
.brand-logo { gap: 2px; }

/* Итоги: карточка «Расход за период» ниже, свёрнутая сводка просторнее (Антон) */
.total-card { padding: 11px 18px 12px; }
.total-label { margin-bottom: 2px; }
.income-total { margin-top: 3px; }
.rm-top { padding: 13px 0 11px; }
.rm-cats-wrap { padding: 0 0 13px; }

/* 2026-10-08: мягкая тень под свёрнутой сводкой Итогов — видна граница со списком */
.report-mini-shadow {
  position: fixed; left: 0; right: 0; z-index: 24; max-width: 480px; margin: 0 auto;
  height: 10px; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .report-mini-shadow { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); }
}
:root[data-theme="dark"] .report-mini-shadow { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); }

/* 2026-10-08: тень под шапкой на вкладке «Ввод» при прокрутке (как под сводкой Итогов) */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; pointer-events: none;
  opacity: 0; transition: opacity 0.15s;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0));
}
.topbar.topbar-shadow::after { opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); }
}
:root[data-theme="dark"] .topbar::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); }

/* 2026-10-08: та же тень под прилипшим заголовком «Настройки» */
.settings-title::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; pointer-events: none;
  opacity: 0; transition: opacity 0.15s;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0));
}
.settings-title.title-shadow::after { opacity: 1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .settings-title::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); }
}
:root[data-theme="dark"] .settings-title::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); }

/* 2026-10-08: свайп вправо → 🔔 напоминание о платеже */
.swipe-bell-btn {
  position: absolute; top: 0; left: 0; bottom: 0; width: 80px;
  background: none; border: none; color: #fff; font-size: 24px; cursor: pointer;
  transition: width 0.2s ease;
}
.swipe-armed-right .swipe-bell-btn { width: 100%; text-align: left; padding-left: 28px; }
.swipe-wrap.swipe-active.swipe-right { background: rgba(245, 158, 11, 0.55); }
.swipe-wrap.swipe-right .swipe-delete-btn { visibility: hidden; }
.swipe-wrap:not(.swipe-right) .swipe-bell-btn { visibility: hidden; }
.expense-row .er-bell { font-size: 12px; margin-left: 2px; }
.reminder-what {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 4px;
  background: var(--bg); border-radius: 12px;
}
.reminder-what-emoji { font-size: 20px; }
.reminder-what-desc { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.reminder-what-amount { font-size: 16px; font-weight: 700; white-space: nowrap; }
.reminder-hint { margin-top: 12px; font-size: 14px; color: var(--muted); }
.reminder-warn { margin-top: 8px; font-size: 14px; color: var(--danger); }
.reminder-hint-error { color: var(--danger); }
#reminderAt { -webkit-appearance: none; appearance: none; min-height: 48px; text-align: left; }

/* 2026-10-08: верх «Итогов» плотнее (Антон): меньше отступ от шапки, ниже вкладки периода и строка
   месяца, меньше зазоры до карточки и после неё */
.period-tabs { margin-top: -6px; margin-bottom: 8px; padding: 3px; }
.period-tab { padding: 7px 4px; }
.month-nav { margin-bottom: 8px; }
.nav-arrow { width: 32px; height: 32px; }
.period-pick-row { margin-bottom: 8px; }
.total-card { margin-bottom: 8px; }

/* 2026-10-08: свёрнутая сводка Итогов — строки чуть выше; меньше зазор «По категориям» → первый день */
.rm-top { padding: 16px 0 13px; }
.rm-cats-wrap { padding: 0 0 16px; }
#expenseList > .day-group-label:first-child { margin-top: 4px; }

/* 2026-10-08: меньше отступы: открытые категории → первый день (20 → 10), заголовок дня → его записи (14 → 8) */
.category-breakdown { margin-bottom: 10px; }
.day-group-label { margin-bottom: 0; }

/* 2026-10-08: свёрнутая сводка — баланс (19 для суммы оказалось слишком): месяц и сумма одного размера 16,
   различаются насыщенностью и цветом (месяц 600 серый, сумма 700 основной); облачка 14 (шкала 12/14/16/19) */
.rm-period { font-size: 16px; }
.rm-total { font-size: 16px; }
.rm-cat { font-size: 14px; }

/* 2026-10-12: перетаскивание записей внутри дня (долгое нажатие) */
.swipe-wrap { -webkit-touch-callout: none; }
.swipe-wrap.row-shifting { transition: transform 0.18s ease; }
.swipe-wrap.row-dragging {
  position: relative; z-index: 5; transition: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); border-radius: 12px;
}

/* 2026-10-12: своя картинка-значок категории вместо эмодзи (например лого BNI для источника дохода).
   .cat-icon-img заполняет свой контейнер (круглую плитку, маленькую иконку записи и т.д.) и наследует
   его border-radius, поэтому отдельный размер/форма под каждое место не нужны. .cat-icon-img-sm — для
   мелких инлайн-мест без отдельного контейнера (сводка категорий, свёрнутая шапка Итогов). */
.cat-icon-img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
.cat-icon-img-sm { width: 15px; height: 15px; border-radius: 50%; object-fit: cover; vertical-align: -3px; display: inline-block; }
.icon-image-row { margin: 10px 0 14px; }
.icon-image-upload-btn { flex: none; width: auto; display: inline-block; padding: 8px 14px; font-size: 13px; }
.icon-image-preview { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; }
.icon-image-preview img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.icon-image-preview span { flex: 1; font-size: 13px; color: var(--muted); }
.icon-image-clear { flex: none; width: 26px; height: 26px; border-radius: 50%; border: none; background: var(--border); color: var(--text); font-size: 14px; line-height: 1; cursor: pointer; }
/* .reminder-what-emoji — обычный <span> без своей ширины/высоты (эмодзи-текст её не требовал),
   поэтому только тут .cat-icon-img нужен явный размер вместо унаследованных 100%/100% */
.reminder-what-emoji .cat-icon-img { width: 20px; height: 20px; border-radius: 50%; display: inline-block; vertical-align: -4px; }

/* 2026-10-12: итог за период в одну строку, размер подгоняет fitTotalAmount() в app.js */
.total-amount { white-space: nowrap; overflow: hidden; }

/* 2026-10-14: окно категории целиком в экране — прокручивается только список значков, «Сохранить»
   всегда видна; кнопка загрузки — стрелка вниз + «Загрузить свою картинку» */
#categoryModal .modal-card { display: flex; flex-direction: column; overflow: hidden; }
#categoryModal .modal-card > * { flex-shrink: 0; }
#categoryModal .modal-card > .emoji-picker-wrap { flex: 1 1 auto; min-height: 110px; }
.icon-image-upload-btn { display: inline-flex; align-items: center; gap: 8px; }
.icon-upload-arrow { flex: none; }
#categoryModal .modal-card {
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto; /* запас: если совсем не влезает — окно прокручивается, кнопки не теряются */
}
#categoryModal .modal-card > .emoji-picker-wrap { min-height: 96px; }
#categoryModal .color-item { aspect-ratio: auto; height: 34px; }
#categoryModal .modal-actions { margin-top: 14px; }

/* Импорт из банка (SimpleFIN) */
.bank-accounts { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.bank-acc { font-size: 14px; color: var(--text); }
#bankModal .modal-actions button:disabled { opacity: 0.5; }
.bank-error { font-size: 14px; color: #ef4444; margin: 0 0 10px; }
.modal-card textarea.bank-token {
  width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 11px; border-radius: 10px; font: inherit; font-size: 16px; resize: none; margin-bottom: 6px; word-break: break-all;
}