/* ============================================================
   Шторки (модалки)
   ============================================================ */

.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(var(--shadow-rgb), 0.38);
  z-index: 50;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.sheet-backdrop.open { opacity: 1; }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--panel);
  border-radius: 28px 28px 0 0;
  padding: 10px 20px calc(22px + var(--safe-b));
  z-index: 60;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 -12px 40px rgba(var(--shadow-rgb), 0.18);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: calc(var(--app-h) * 0.9);
  overflow-y: auto;
  /* только вертикаль: вбок шторку и страницу под ней таскать нельзя */
  touch-action: pan-y;
  overscroll-behavior: contain;
}
.sheet.open { transform: translateY(0); }
.sheet-grip {
  width: 40px; height: 4px;
  border-radius: 2px;
  background: var(--divider);
  margin: 0 auto 6px;
}
.sheet-title { margin: 0 0 4px; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; }
.sheet-label { margin-top: 4px; }
.sheet .btn { margin-top: 6px; }

.amount-input {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 6px;
  padding: 6px 0 10px;
}
.amount-input input {
  flex: 0 1 auto;
  width: 100%;
  max-width: 220px;
  min-width: 0;
  border: none; background: none; outline: none;
  font-family: inherit;
  font-size: 44px; font-weight: 800; letter-spacing: -0.03em;
  text-align: right;
  color: var(--text);
  -moz-appearance: textfield;
}
.amount-input input::-webkit-outer-spin-button,
.amount-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount-input input::placeholder { color: var(--muted-2); }
.amount-cur { flex: 0 0 auto; text-align: left; font-size: 30px; font-weight: 800; color: var(--muted); }

.cat-search { padding: 9px 12px; font-size: 14px; margin-bottom: 8px; }
.cat-empty { font-size: 13px; color: var(--muted); padding: 9px 2px; }
.cat-picker {
  display: flex; gap: 8px;
  overflow-x: auto;
  flex-shrink: 0;  /* тот же риск схлопывания в длинной шторке, что у .emoji-picker */
  touch-action: pan-x;  /* здесь горизонталь нужна — это лента категорий */
  padding: 2px 0 4px;
  scrollbar-width: none;
}
.cat-picker::-webkit-scrollbar { display: none; }
.cat-chip {
  border: none;
  background: var(--panel-soft);
  border-radius: var(--r-sm);
  padding: 9px 13px;
  font-size: 13px; font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
  transition: transform 0.12s ease;
}
.cat-chip:active { transform: scale(0.95); }
.cat-chip.active { background: var(--pink-tint); color: var(--pink-deep); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--pink-soft); }

.plan-summary {
  background: var(--panel);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.plan-sum-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
  padding: 3px 0;
}
.plan-sum-row b { color: var(--text); font-size: 15px; font-weight: 700; }
.plan-sum-diff {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--divider);
  font-size: 14px;
  font-weight: 700;
}
.plan-sum-diff.short { color: var(--pink-deep); }
.plan-sum-diff.enough { color: var(--green); }

/* flex-shrink: 0 — иначе в длинной шторке (flex-column с overflow-y на .sheet)
   flex-алгоритм схлопывает именно этот блок до 0: как скролл-контейнер он
   единственный, у кого автоматический min-height по спеке — 0, а не контент.
   Кнопки внутри тогда «рисуются» поверх соседей, но клики перехватывает
   следующий элемент — сама шторка вместо этого просто скроллится, как и
   задумано её собственным overflow-y. */
.emoji-picker { display: flex; gap: 7px; flex-wrap: wrap; max-height: 190px; overflow-y: auto; flex-shrink: 0; }
.emoji-btn {
  width: 40px; height: 40px;
  border: none;
  border-radius: 13px;
  background: var(--panel-soft);
  font-size: 19px;
  display: flex; align-items: center; justify-content: center;
}
.emoji-btn.active { background: var(--pink-tint); box-shadow: inset 0 0 0 1.5px var(--pink-soft); }
.emoji-btn svg { width: 22px; height: 22px; color: var(--text-2); }
.emoji-btn.active svg { color: var(--pink-deep); }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 4px 0; }
/* Text next to a switch/button wraps instead of pushing the control off-screen */
.switch-row > div:first-child,
.setting-row > div:first-child { flex: 1; min-width: 0; }
.switch-row .row-title, .switch-row .row-sub,
.setting-row .row-title, .setting-row .row-sub,
.sheet > .row-sub, .settings-card > .row-sub { white-space: normal; overflow-wrap: break-word; }
.switch {
  width: 50px; height: 30px;
  border: none;
  border-radius: 999px;
  background: var(--divider);
  padding: 3px;
  display: flex;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.switch span {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(var(--shadow-rgb), 0.18);
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.switch.on { background: var(--pink-grad); }
.switch.on span { transform: translateX(20px); }
.switch:disabled { opacity: 0.45; pointer-events: none; }

/* ---------- шифрование: мастер-фраза, QR ---------- */
.mnemonic-box {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  background: var(--panel-soft);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 13.5px; font-weight: 600;
}
.qr-box {
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border-radius: var(--r-sm);
  padding: 16px;
  color: #111;
}

/* ============================================================
   Диалог подтверждения (confirmAsk) — независим от стека шторок,
   всегда поверх всего
   ============================================================ */

.confirm-backdrop {
  position: fixed; inset: 0;
  background: rgba(var(--shadow-rgb), 0.38);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.confirm-backdrop.open { opacity: 1; }
.confirm-box {
  width: 100%; max-width: 320px;
  background: var(--panel);
  border-radius: var(--r-md);
  box-shadow: 0 12px 40px rgba(var(--shadow-rgb), 0.24);
  padding: 20px;
  transform: scale(0.94);
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}
.confirm-backdrop.open .confirm-box { transform: scale(1); }
.confirm-text { margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--text); }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions .btn { flex: 1; margin-top: 0; }

/* ============================================================
   Тост
   ============================================================ */

.toast {
  position: fixed;
  left: 50%; bottom: calc(112px + var(--safe-b));
  transform: translate(-50%, 12px);
  background: var(--toast-bg);
  color: #fff;
  font-size: 13.5px; font-weight: 600;
  padding: 11px 18px;
  border-radius: 999px;
  z-index: 90;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
  max-width: 84vw;
  text-align: center;
}
.toast.open { opacity: 1; transform: translate(-50%, 0); }