/* ═══════════════════════════════════════════════════════════════════════
   Tracker — мобильная версия. Тёмная, минималистичная, liquid glass.

   Типографика (единая шкала):
     --fs-display 21px  заголовки экранов / день
     --fs-title   17px  названия карточек, заголовки шитов
     --fs-body    15px  строки, кнопки, поля
     --fs-sub     13px  вторичный текст, метрики
     --fs-cap     11px  uppercase-подписи
   Числа и метрики — моноширинный (JetBrains Mono).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* palette */
  --bg: #0a0a0a;
  --bg-3: #131313;
  --surface: #141414;
  --surface-2: #1a1a1a;
  --border: rgba(255,255,255,0.07);
  --border-2: rgba(255,255,255,0.12);
  --text: #f0f0f0;
  --text-2: #a8a8a8;
  --text-3: #6e6e6e;
  --text-4: #484848;
  --danger: #ef4444;

  /* liquid glass */
  --glass-bg:          rgba(255, 255, 255, 0.16);
  --glass-bg-hover:    rgba(255, 255, 255, 0.24);
  --glass-bg-active:   rgba(255, 255, 255, 0.3);
  --glass-blur:        blur(16px) saturate(1.4);
  --glass-red-bg:      rgba(239, 68, 68, 0.22);
  --glass-green-bg:    rgba(34, 197, 94, 0.22);
  --sheet-bg:          rgba(22, 22, 22, 0.86);
  --sheet-blur:        blur(28px) saturate(1.5);
  --tabbar-bg:         rgba(12, 12, 12, 0.78);

  /* type scale */
  --fs-display: 21px;
  --fs-title: 17px;
  --fs-body: 15px;
  --fs-sub: 13px;
  --fs-cap: 11px;

  /* geometry */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --pad: 16px;
  --tabbar-h: 54px;
  /* полный iOS safe-area снизу (34px на устройствах с home indicator) —
     для скролл-контента и bottom sheets */
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* зазор под таббаром: только полоска home bar, а не весь safe-area —
     иначе иконки меню «висят» высоко над низом экрана */
  --home-bar: min(env(safe-area-inset-bottom, 0px), 16px);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  letter-spacing: -0.005em;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
}

input, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

::-webkit-scrollbar { width: 0; height: 0; }

/* utility */
.hidden { display: none !important; }
.muted { color: var(--text-3); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ═══ App shell ═══════════════════════════════════════════════════════ */

.app {
  height: 100dvh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

.page {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--pad) calc(var(--tabbar-h) + var(--home-bar) + 24px);
}
.page[hidden] { display: none; }

/* Заголовок простых страниц (Статистика, Профиль) */
.page-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 4px;
}
.page-header__title {
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

/* ═══ Tabbar — liquid glass ═══════════════════════════════════════════ */

.tabbar {
  position: fixed;
  /* панель приподнята над низом на зону home bar: под ней — чистый фон
     (только полоска home indicator), а не цветной «хвост» стеклянной панели */
  left: 0; right: 0; bottom: var(--home-bar);
  z-index: 40;
  height: var(--tabbar-h);
  padding: 6px 12px;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  background: var(--tabbar-bg);
  -webkit-backdrop-filter: var(--sheet-blur);
  backdrop-filter: var(--sheet-blur);
  border-top: 1px solid var(--border);
}
.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-3);
  border-radius: var(--radius-sm);
  transition: color .15s;
}
.tabbar__item svg { width: 24px; height: 24px; }
.tabbar__item.active { color: var(--text); }
.tabbar__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ═══ Главная: шапка + календарь ══════════════════════════════════════ */

.main {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* sticky-верх: заголовок дня + неделя */
.main__top {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 calc(-1 * var(--pad));
  padding: calc(env(safe-area-inset-top, 0px) + 10px) var(--pad) 6px;
  background: linear-gradient(to bottom, var(--bg) 78%, transparent);
}

.main__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 40px;
}
/* пустой слот слева — под будущую сортировку/фильтр */
.main__header-slot {
  width: 38px; height: 38px;
  flex-shrink: 0;
}
.main__title {
  flex: 1;
  text-align: center;
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══ Кнопки — glass pills ════════════════════════════════════════════ */

.btn-primary, .btn-secondary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: 500;
  transition: background .14s, transform .1s;
}
.btn-primary:active, .btn-secondary:active, .btn-ghost:active {
  background: var(--glass-bg-active);
  transform: scale(0.97);
}
.btn-primary svg, .btn-secondary svg, .btn-ghost svg { width: 16px; height: 16px; }

.btn-ghost { background: rgba(255,255,255,0.08); color: var(--text-2); }

.btn-primary--icon {
  width: 38px; height: 38px;
  padding: 0;
  flex-shrink: 0;
  border-radius: 50%;
}
.btn-primary--icon svg { width: 19px; height: 19px; }
.btn-primary--icon.is-active { background: var(--glass-bg-active); }

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  color: #fca5a5;
  background: var(--glass-red-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  font-size: var(--fs-body);
  font-weight: 500;
}
.btn-danger svg { width: 15px; height: 15px; }
.btn-danger:active { background: rgba(239,68,68,0.32); }

/* ═══ Weekstrip ═══════════════════════════════════════════════════════ */

.weekstrip {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 0 8px;
}
.weekstrip__arrow {
  width: 24px;
  height: 56px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  flex-shrink: 0;
}
.weekstrip__arrow svg { width: 16px; height: 16px; }
.weekstrip__arrow:active:not(:disabled) { color: var(--text); }
.weekstrip__arrow:disabled { opacity: 0.25; }

.weekstrip__days {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  min-width: 0;
}
.weekday {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  position: relative;
  border-radius: 14px;
}
.weekday.active { background: rgba(255,255,255,0.07); }
.weekday.future { opacity: 0.35; }

.weekday__label {
  font-size: var(--fs-cap);
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.weekday.active .weekday__label,
.weekday.today .weekday__label { color: var(--text); }
.weekday.today .weekday__label { font-weight: 700; }

.weekday__ring {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(var(--ring-color, var(--text-2)) calc(var(--pct,0) * 1%), rgba(255,255,255,0.07) 0);
}
.weekday__ring::before {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: var(--bg);
}
.weekday.active .weekday__ring::before { background: #181818; }
.weekday__num {
  position: relative;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.weekday.future .weekday__num,
.weekday__num--dash { color: var(--text-4); }

/* ═══ Карточки привычек — портретные, 2 в ряд ═════════════════════════ */

.main__scroll { padding-top: 6px; }
.main__scroll--empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.habits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.habit {
  position: relative;
  aspect-ratio: 3 / 4;
  min-height: 200px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.09);
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.habit.completed { border-color: rgba(255,255,255,0.38); }
.habit.missed { border-color: rgba(255,255,255,0.05); }

.habit__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.habit.missed .habit__bg { filter: grayscale(0.6) brightness(0.7); }

/* ── верх карточки: кнопки + streak ── */
.habit__head {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 9px 9px 0;
  z-index: 3;
}
.habit__head-left {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  background: rgba(0,0,0,0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 999px;
}
.habit__edit-btn, .habit__desc-btn {
  display: grid;
  place-items: center;
  width: 28px; height: 32px;
  color: rgba(255,255,255,0.78);
}
.habit__edit-btn svg, .habit__desc-btn svg { width: 16px; height: 16px; }
.habit__edit-btn:active, .habit__desc-btn:active { color: #fff; }

.habit__streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  padding: 0 9px 0 7px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: #fff;
  background: rgba(0,0,0,0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 999px;
}
.habit__streak-chip svg { width: 15px; height: 15px; }

/* ── низ карточки: имя, метрика, кнопки ── */
.habit__foot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 14px 0 52px;
  display: flex;
  flex-direction: column;
}
.habit__foot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
  -webkit-mask-image: linear-gradient(to top, black 70%, transparent 100%);
  mask-image: linear-gradient(to top, black 70%, transparent 100%);
}

.habit__name {
  position: relative;
  z-index: 1;
  font-size: var(--fs-title);
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
  padding: 0 11px;
  margin: auto 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.habit__metric {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.62);
  padding: 0 11px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.habit__sleep-times {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.4);
  padding: 0 11px;
  margin: -2px 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.habit__foot-row {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px 9px;
}

/* «Пропустить» — круглая glass-кнопка */
.habit__miss-btn {
  width: 36px; height: 36px;
  min-width: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: rgba(255,255,255,0.72);
  display: grid;
  place-items: center;
}
.habit__miss-btn svg { width: 14px; height: 14px; stroke-width: 2.6; }
.habit__miss-btn:active { background: var(--glass-bg-active); color: #fff; }

/* «Выполнить» / «Выполнено» / «Не выполнено» — glass pill */
.habit__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: rgba(255,255,255,0.9);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .14s, color .14s;
}
.habit__action-btn svg { width: 14px; height: 14px; stroke-width: 2.6; flex-shrink: 0; }
.habit__action-btn:active { background: var(--glass-bg-active); color: #fff; }

.habit__action-btn.done {
  background: rgba(0,0,0,0.42);
  color: rgba(255,255,255,0.75);
}
.habit__action-btn.missed {
  background: rgba(0,0,0,0.32);
  color: var(--text-3);
}
.habit__action-btn.missed svg { color: var(--text-4); }

/* На мобиле hover-swap «Отменить» не нужен — показываем основной лейбл */
.habit__action-btn .label-cancel,
.habit__action-btn .icon-cancel { display: none; }
.habit__action-btn .label-done,
.habit__action-btn .label-missed { display: inline; }
.habit__action-btn .icon-done,
.habit__action-btn .icon-missed { display: inline-flex; align-items: center; }

/* ── Inline-панель ввода внутри карточки ── */
.habit.panel-open .habit__foot {
  top: 44px;
  bottom: 0;
  padding-top: 14px;
  padding-bottom: 47px;
}
.habit.panel-open .habit__foot::before {
  -webkit-mask-image: linear-gradient(to top, black 85%, transparent 100%);
  mask-image: linear-gradient(to top, black 85%, transparent 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.6) 100%);
}

.habit__inline-ctrl {
  position: relative;
  z-index: 1;
  padding: 0 9px;
  margin-top: 6px;
  margin-bottom: 8px;
}

.habit__inline-ctrl--count,
.habit__inline-ctrl--duration {
  display: flex;
  align-items: center;
  gap: 6px;
}

.habit__ctrl-num-block,
.habit__ctrl-time-box {
  flex: 1;
  height: 36px;
  min-width: 0;
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.habit__ctrl-num-input {
  width: 100%;
  max-width: 72px;
  height: 30px;
  padding: 0 6px;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  font-family: var(--font-mono);
  text-align: center;
  -moz-appearance: textfield;
}
.habit__ctrl-num-input::-webkit-inner-spin-button,
.habit__ctrl-num-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.habit__ctrl-step-btn {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: rgba(255,255,255,0.78);
  font-size: 17px;
  display: grid;
  place-items: center;
}
.habit__ctrl-step-btn:active:not(:disabled) { background: var(--glass-bg-active); color: #fff; }
.habit__ctrl-step-btn:disabled { opacity: 0.3; }

.habit__ctrl-scroll-part {
  font-size: 16px;
  font-family: var(--font-mono);
  color: var(--text);
  width: 26px;
  text-align: center;
  user-select: none;
}
.habit__ctrl-colon {
  font-size: 16px;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.4);
}

/* Сон: два нативных time-инпута */
.habit__inline-ctrl--sleep {
  display: flex;
  gap: 6px;
}
.habit__ctrl-sleep-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.habit__ctrl-sleep-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.habit__ctrl-time-input {
  width: 100%;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-mono);
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  padding: 0 4px;
}
.habit__ctrl-time-input::-webkit-calendar-picker-indicator {
  background: none;
  display: none;
}

/* подтверждение / отмена в открытой панели */
.habit__cancel-btn {
  width: 36px; height: 36px;
  min-width: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--glass-red-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: #f87171;
  display: grid;
  place-items: center;
}
.habit__cancel-btn svg { width: 14px; height: 14px; stroke-width: 2.6; }
.habit__cancel-btn:active { background: rgba(239,68,68,0.34); }

.habit__confirm-btn {
  flex: 1;
  height: 36px;
  border-radius: 999px;
  background: var(--glass-green-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: #4ade80;
  font-size: 13.5px;
  font-weight: 500;
  display: grid;
  place-items: center;
}
.habit__confirm-btn:active { background: rgba(34,197,94,0.34); }

/* ── Пустые состояния ── */
.empty {
  text-align: center;
  color: var(--text-3);
  padding: 28px 20px;
}
.empty--big .empty__icon {
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  color: var(--text-4);
}
.empty--big .empty__icon svg { width: 44px; height: 44px; }
.empty--big h3 {
  font-size: var(--fs-title);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}
.empty--big p {
  font-size: var(--fs-sub);
  margin: 0 0 18px;
}
.empty--mini p { font-size: var(--fs-sub); margin: 0; }

/* описание привычки в поповере */
.habit__desc-pop {
  white-space: pre-wrap;
  line-height: 1.5;
  font-size: var(--fs-sub);
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.habit__desc-pop--empty { color: var(--text-3); font-style: italic; }

/* ═══ Статистика ══════════════════════════════════════════════════════ */

.stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stats-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 0;
}
.stats-header__title {
  font-size: var(--fs-display);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.stats-habit-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: var(--text-2);
  font-size: var(--fs-sub);
  font-weight: 500;
  max-width: 100%;
}
.stats-habit-pick__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-habit-pick__chev { flex-shrink: 0; opacity: 0.6; }
.stats-habit-pick:active { background: rgba(255,255,255,0.12); color: var(--text); }

.stats-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stats-controls__divider { display: none; }

/* сегмент-контрол периода */
.stats-seg {
  display: flex;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.stats-seg__btn {
  flex: 1;
  height: 32px;
  border-radius: 999px;
  font-size: var(--fs-sub);
  font-weight: 500;
  color: var(--text-3);
  transition: background .14s, color .14s;
  white-space: nowrap;
  padding: 0 4px;
}
.stats-seg__btn.active {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: #fff;
}

.stats-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.nav-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-3);
  background: rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.nav-arrow:active:not(:disabled) { color: var(--text); background: rgba(255,255,255,0.12); }
.nav-arrow:disabled { opacity: 0.3; }
.nav-arrow.hidden { visibility: hidden; }

.stats-range {
  flex: 1;
  text-align: center;
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-range.clickable {
  text-decoration: underline;
  text-decoration-color: var(--text-4);
  text-underline-offset: 4px;
}

.stats__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 4 карточки метрик — 2×2 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-card__top {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
}
.stat-card__top svg { width: 14px; height: 14px; flex-shrink: 0; }
.stat-card__label {
  font-size: var(--fs-cap);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-card__value {
  font-size: 24px;
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.1;
}
.stat-card__value .unit { font-size: 15px; color: var(--text-3); margin-left: 1px; }
.stat-card__value .sep { color: var(--text-4); margin: 0 2px; }
.stat-card__value .sub { font-size: 15px; color: var(--text-3); }

/* ── Барчарт (неделя) ── */
.barchart {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px 10px;
}
.barchart__nav, .perfcal__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.chart-nav__label {
  flex: 1;
  text-align: center;
  font-size: var(--fs-sub);
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barchart__nav .nav-arrow, .perfcal__nav .nav-arrow {
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.05);
}

.barchart__plot {
  position: relative;
  /* высота согласована с константами в stats.js (H=108 + label 18 + top 4) */
  height: 130px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-left: 30px;
}
.barchart__yaxis {
  position: absolute;
  left: 0; top: 0; bottom: 18px;
  width: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
.barchart__ytick {
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text-4);
  line-height: 1;
  transform: translateY(4px);
}
.barchart__gridline {
  position: absolute;
  left: 30px; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.05);
}
.barchart__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  position: relative;
  z-index: 1;
  height: 100%;
}
.barchart__bar {
  width: 100%;
  max-width: 30px;
  border-radius: 6px 6px 3px 3px;
  background: rgba(255,255,255,0.82);
  min-height: 3px;
}
.barchart__day {
  font-size: 9.5px;
  color: var(--text-4);
  white-space: nowrap;
  line-height: 1;
  height: 14px;
  display: flex;
  align-items: flex-end;
}

/* ── Календарь выполнения (месяц / свой) ── */
.perfcal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px 14px;
}
.perfcal__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 6px;
}
.perfcal__dow span {
  text-align: center;
  font-size: var(--fs-cap);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-4);
}
.perfcal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 4px;
}
.pc-cell {
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  position: relative;
}
.pc-cell.future, .pc-cell.muted { color: var(--text-4); }
.pc-cell.run {
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-weight: 600;
}
.pc-cell.run.l { border-radius: 999px 0 0 999px; }
.pc-cell.run.r { border-radius: 0 999px 999px 0; }
.pc-cell.run.l.r { border-radius: 999px; }
.pc-ring {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(var(--ring-color, var(--text-2)) calc(var(--pct,0) * 100%), rgba(255,255,255,0.08) 0);
}
.pc-ring::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--surface);
}
.pc-ring__num { position: relative; font-size: 12px; }

/* ── Квадраты активности (всё время) ── */
.stats-act__wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.stats-act__cols {
  display: flex;
  gap: 4px;
  justify-content: space-between;
}
.stats-act__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.stats-act__cell {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 5px;
}

/* dropdown выбора привычки в статистике */
.stats-habit-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: var(--fs-body);
  text-align: left;
}
.stats-habit-item.active { color: var(--text); background: rgba(255,255,255,0.06); }
.stats-habit-item:active { background: rgba(255,255,255,0.08); }
.stats-habit-item__thumb {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
}
.stats-habit-item__name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stats-habit-item__check { flex-shrink: 0; color: var(--text); }

/* ═══ Профиль ═════════════════════════════════════════════════════════ */

.profile {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.profile__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.profile__avatar {
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #2c2c2c, #181818);
  border: 1px solid var(--border-2);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
.profile__name-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  font-size: var(--fs-title);
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.profile__name-input:focus { border-bottom-color: var(--border-2); }
.profile__name-input::placeholder { color: var(--text-4); font-weight: 400; }

/* ═══ Секции настроек (профиль + редактор) ════════════════════════════ */

.setting-section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.setting-section__label {
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0 4px;
}
.setting-section__hint {
  font-size: 12px;
  color: var(--text-4);
  padding: 0 4px;
}
.setting-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.linkrow {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 8px 14px;
  font-size: var(--fs-body);
  color: var(--text);
  text-align: left;
  transition: background .12s;
}
.linkrow + .linkrow { border-top: 1px solid var(--border); }
.linkrow:active:not(.linkrow--static) { background: rgba(255,255,255,0.05); }
.linkrow__icon { flex-shrink: 0; color: var(--text-3); width: 18px; height: 18px; }
.linkrow__label { flex-shrink: 0; }
.linkrow__val {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: var(--fs-sub);
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.linkrow__chev {
  flex-shrink: 0;
  width: 15px; height: 15px;
  color: var(--text-4);
}
.linkrow > .linkrow__chev:first-of-type:last-child { margin-left: auto; }
/* у строк без значения — прижать стрелку вправо */
.linkrow__label + .linkrow__chev { margin-left: auto; }

/* ═══ Bottom sheets — редактор, флай-ауты, поповеры ═══════════════════
   JS из десктопной версии выставляет inline left/top — гасим их !important
   и превращаем все всплывашки в нижние шиты. ═══════════════════════════ */

@keyframes sheet-up {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.editor-panel,
.editor-flyout,
.picker-popover,
.date-picker-popover {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 22px 22px 0 0;
  background: var(--sheet-bg);
  -webkit-backdrop-filter: var(--sheet-blur);
  backdrop-filter: var(--sheet-blur);
  border: 1px solid var(--border);
  border-bottom: none;
  box-shadow: 0 -18px 60px rgba(0,0,0,0.55);
  animation: sheet-up .22s cubic-bezier(.2,.8,.3,1);
  padding-bottom: var(--safe-b);
}

/* слои: панель < флай-аут < поповер < календарь */
.editor-panel        { z-index: 100; }
.editor-flyout       { z-index: 120; }
.picker-popover      { z-index: 140; }
.date-picker-popover { z-index: 150; }

/* ── Редактор привычки ── */
.editor-panel {
  display: flex;
  flex-direction: column;
  max-height: 88dvh;
}
.editor-panel__head {
  flex-shrink: 0;
  padding: 14px 18px 8px;
  position: relative;
}
/* грабер как у системных шитов */
.editor-panel__head::before {
  content: '';
  position: absolute;
  top: 7px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
}
.editor-panel__title {
  font-size: var(--fs-title);
  font-weight: 600;
  margin: 6px 0 0;
  text-align: center;
}
.editor-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.editor-hero {
  display: flex;
  gap: 14px;
  align-items: stretch;
}
.editor-image-wrap {
  position: relative;
  width: 96px;
  flex-shrink: 0;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-2);
}
.editor-image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.editor-image-edit-btn {
  position: absolute;
  right: 6px; bottom: 6px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  display: grid;
  place-items: center;
}
.editor-hero__right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.editor-name {
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.07);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text);
}
.editor-name::placeholder { color: var(--text-4); font-weight: 400; }
.editor-description {
  flex: 1;
  min-height: 64px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.07);
  font-size: var(--fs-sub);
  color: var(--text-2);
  resize: none;
  line-height: 1.4;
}
.editor-description::placeholder { color: var(--text-4); }

.editor-panel__foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
}
.editor-foot__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}
.editor-foot__actions .btn-primary { min-width: 130px; }

/* сегментные поля дат */
.linkrow--date-seg { cursor: default; }
.date-seg-field {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1px;
  font-family: var(--font-mono);
  font-size: var(--fs-sub);
  color: var(--text);
}
.date-seg--empty { color: var(--text-4); }
.date-seg__part { padding: 2px 1px; }
.date-seg__sep { color: var(--text-4); }
.date-seg-cal-btn {
  flex-shrink: 0;
  width: 34px; height: 34px;
  margin-left: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: var(--text-2);
  display: grid;
  place-items: center;
}
.date-seg-cal-btn:active { background: rgba(255,255,255,0.14); color: var(--text); }

/* ── Флай-ауты (цель / повтор) ── */
.editor-flyout {
  max-height: 70dvh;
  overflow-y: auto;
  padding: 14px 16px;
}
.flyout-rows {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius);
  overflow: hidden;
}
.flyout-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 8px 14px;
  font-size: var(--fs-body);
  color: var(--text);
  text-align: left;
  width: 100%;
}
.flyout-row + .flyout-row { border-top: 1px solid var(--border); }
.flyout-row--column {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.flyout-row__label { flex-shrink: 0; color: var(--text-2); font-size: var(--fs-sub); }
.flyout-row__val {
  flex: 1;
  text-align: right;
  font-size: var(--fs-sub);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.flyout-row__chev { flex-shrink: 0; width: 15px; height: 15px; color: var(--text-4); }
.flyout-row--input { justify-content: space-between; }

.every-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.every-stepper__suffix {
  font-size: var(--fs-sub);
  color: var(--text-3);
  min-width: 52px;
}

/* выбор дней недели / чисел месяца */
.weekday-picker {
  display: flex;
  gap: 5px;
}
.weekday-picker .day-chip { flex: 1; }
.monthday-picker {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.day-chip {
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: var(--text-3);
  font-size: var(--fs-sub);
  font-weight: 500;
  display: grid;
  place-items: center;
  transition: background .12s, color .12s;
}
.day-chip.on {
  background: var(--glass-bg-active);
  color: #fff;
}

/* number-stepper: [−] число [+] */
.number-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 38px;
  background: rgba(255,255,255,0.07);
  border-radius: 999px;
  padding: 0 3px;
}
.number-stepper button {
  width: 34px; height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--text-2);
}
.number-stepper button:active:not(:disabled) { background: rgba(255,255,255,0.1); color: var(--text); }
.number-stepper button:disabled { opacity: 0.3; }
.number-stepper button svg { width: 14px; height: 14px; }
.number-stepper__input {
  width: 44px;
  text-align: center;
  font-size: var(--fs-body);
  font-family: var(--font-mono);
  color: var(--text);
  -moz-appearance: textfield;
}
.number-stepper__input::-webkit-inner-spin-button,
.number-stepper__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Поповеры (единица, частота, картинки, описание, выбор привычки) ── */
.picker-popover {
  max-height: 72dvh;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
}
.picker-popover__head {
  flex-shrink: 0;
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--text-2);
  padding-bottom: 10px;
  text-align: center;
}
.picker-popover__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* частота */
.freq-options {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius);
  overflow: hidden;
}
.freq-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 14px;
  font-size: var(--fs-body);
  color: var(--text);
  text-align: left;
}
.freq-option + .freq-option { border-top: 1px solid var(--border); }
.freq-option:active { background: rgba(255,255,255,0.06); }
.freq-option__check { color: var(--text); display: grid; place-items: center; }

/* единицы */
.unit-custom-row {
  display: flex;
  gap: 8px;
}
.unit-custom-input {
  flex: 1;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.07);
  font-size: var(--fs-body);
  color: var(--text);
}
.unit-custom-input::placeholder { color: var(--text-4); }
.unit-custom-apply {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--glass-bg);
  color: #fff;
  display: grid;
  place-items: center;
}
.unit-custom-apply:disabled { opacity: 0.3; }
.unit-group { display: flex; flex-direction: column; gap: 7px; }
.unit-group__label {
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.unit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.unit-chip {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text-2);
  font-size: var(--fs-sub);
  font-weight: 500;
}
.unit-chip.active {
  background: var(--glass-bg-active);
  color: #fff;
}

/* выбор изображения */
.image-picker__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.image-picker__btn,
.image-picker__photo-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--bg-3);
  padding: 0;
}
.image-picker__btn img,
.image-picker__photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.image-picker__btn.active,
.image-picker__photo-tile.active { border-color: rgba(255,255,255,0.8); }
.image-picker__upload-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--text-3);
}
.image-picker__photo-tile-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(0,0,0,0.35);
}
.image-picker__photo-action {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  display: grid;
  place-items: center;
}
.image-picker__photo-action--delete { color: #f87171; }

/* ── Календарь (date-picker + свой диапазон) ── */
.date-picker-popover {
  padding: 18px 16px;
}
.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.dp-nav {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: var(--text-2);
  display: grid;
  place-items: center;
}
.dp-nav:active { background: rgba(255,255,255,0.12); color: var(--text); }
.dp-month-label {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
}
.dp-dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.dp-dow {
  text-align: center;
  font-size: var(--fs-cap);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-4);
  padding: 4px 0;
}
.dp-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 3px;
}
.dp-cell {
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  border-radius: 999px;
  cursor: pointer;
}
.dp-cell--empty { cursor: default; }
.dp-cell--disabled { color: var(--text-4); cursor: default; }
.dp-cell--today {
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--border-2);
}
.dp-cell--selected,
.dp-cell--range-start,
.dp-cell--range-end {
  background: rgba(255,255,255,0.9);
  color: #0a0a0a;
  font-weight: 600;
}
.dp-cell--in-range {
  background: rgba(255,255,255,0.12);
  color: var(--text);
  border-radius: 0;
}
.dp-cell--range-start:not(.dp-cell--range-end) { border-radius: 999px 0 0 999px; }
.dp-cell--range-end:not(.dp-cell--range-start) { border-radius: 0 999px 999px 0; }

.dp-foot {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.dp-today-btn, .dp-clear-btn, .dp-save-btn {
  flex: 1;
  height: 40px;
  border-radius: 999px;
  font-size: var(--fs-sub);
  font-weight: 500;
  color: var(--text);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.dp-clear-btn { color: var(--text-3); background: rgba(255,255,255,0.07); }
.dp-save-btn:disabled { opacity: 0.35; }
.dp-today-btn:active, .dp-save-btn:active:not(:disabled) { background: var(--glass-bg-active); }

/* ═══ Модалка (общий каркас, на случай использования) ═════════════════ */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal {
  background: var(--sheet-bg);
  -webkit-backdrop-filter: var(--sheet-blur);
  backdrop-filter: var(--sheet-blur);
  border-radius: 22px 22px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  width: 100% !important;
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  animation: sheet-up .22s cubic-bezier(.2,.8,.3,1);
  padding-bottom: var(--safe-b);
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 8px;
}
.modal__title { font-size: var(--fs-title); font-weight: 600; margin: 0; }
.modal__close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  color: var(--text-2);
  display: grid;
  place-items: center;
}
.modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 18px 16px;
}
.modal__foot, .modal__foot--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 18px 14px;
  border-top: 1px solid var(--border);
}

/* ── Логин ─────────────────────────────────────────────────── */
.login {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login__box {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.login__title {
  font-size: var(--fs-display);
  font-weight: 700;
  text-align: center;
  margin: 0;
}
.login__sub {
  font-size: var(--fs-sub);
  color: var(--text-3);
  text-align: center;
  margin: 0 0 16px;
}
.login__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login__input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-body);
  padding: 14px 16px;
  outline: none;
}
.login__input:focus { border-color: var(--border-2); }
.login__error {
  font-size: var(--fs-sub);
  color: #ff6b6b;
  text-align: center;
}
.login__btn {
  background: var(--text);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  padding: 14px 16px;
  margin-top: 6px;
  cursor: pointer;
}
.login__btn:disabled { opacity: 0.6; }

/* ── Тост ──────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(86px + var(--safe-b));
  transform: translate(-50%, 16px);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-sub);
  padding: 10px 16px;
  max-width: calc(100vw - 48px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 1000;
}
.toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}