/* ==========================================================================
   MD3 + LIQUID GLASS · единая визуальная система
   ─────────────────────────────────────────────────────────────────────────
   Референс: Apple iOS 26 Liquid Glass HIG (лензинг вместо блюра, специуляр
   вдоль верхнего края, тонкая светлая окантовка ~1px, тинт 8-14% свет /
   20-28% тёмный) + Material Design 3 (tonal surfaces, elevation через
   свет+тень, state-layers на interactions, а не только hover-цвет).

   Всё построено ТОЛЬКО на переменных темы (--bg/--surface/--accent/--pos/
   --neg), заданных в JS из Telegram themeParams — адаптив не ломается.
   Плоский кислотный зелёный (#4ade80 flat fill) уничтожен полностью:
   .btn-pos теперь matte MD3-tonal поверхность, производная от --pos.
   ========================================================================== */

:root{
  --r-btn: 18px;
  --r-card: 26px;
  --r-chip: 18px;

  /* Специуляр и окантовка — по гайду: ~1px, свет 20% / тёмный 8-20% */
  --glass-edge-top:    color-mix(in srgb, #ffffff 32%, transparent);
  --glass-edge-bottom: color-mix(in srgb, #000000 22%, transparent);
  --glass-tint:        color-mix(in srgb, var(--surface) 38%, transparent);
  --glass-blur: 28px;

  /* MD3 elevation tokens — тень не чёрная абстракция, а тон поверхности */
  --el1: 0 1px 2px rgba(0,0,0,.20), 0 1px 1px rgba(0,0,0,.12);
  --el2: 0 2px 6px -1px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.16);
  --el3: 0 8px 20px -6px rgba(0,0,0,.38), 0 2px 4px rgba(0,0,0,.18);
  --el4: 0 14px 32px -10px rgba(0,0,0,.46), 0 4px 8px rgba(0,0,0,.2);

  --glass-bar-h: 60px;
  --glass-inset-x: 14px;
  --glass-inset-b: max(14px, env(safe-area-inset-bottom));
}

*{ -webkit-tap-highlight-color: transparent; }

/* ══════════════════════════ ФОН СЦЕНЫ ══════════════════════════
   Liquid Glass существует только когда ЕСТЬ что рефрактить —
   плоский bg делает "стекло" фейковым. Добавляем тихий, но живой
   градиентный подклад цвета темы, чтобы блюр таб-бара/masthead
   реально преломлял что-то, а не имитировал стекло на пустоте. */
html{
  background:
    radial-gradient(120% 70% at 15% -10%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 55%),
    radial-gradient(100% 60% at 100% 0%, color-mix(in srgb, var(--pos) 7%, transparent) 0%, transparent 50%),
    var(--bg);
  background-attachment: fixed;
  overscroll-behavior-y: none;
  height: 100%;
}
body{ background: transparent !important; overscroll-behavior-y: none; }

.ios-tabbar-spacer{
  height: calc(var(--glass-bar-h) + var(--glass-inset-b) + 14px);
  width: 100%;
}
body{ padding-bottom: 14px !important; }
.nav{ display: none !important; }

/* ══════════════════════════ TAB BAR — LIQUID GLASS ══════════════════════════
   Настоящий лензинг через filter:url(#glassLens) на псевдо-слое + backdrop
   blur/saturate на самом контейнере (два разных механизма, как у Apple:
   traditional blur снизу + light bending поверх). */
.ios-tabbar{
  position: fixed;
  left: var(--glass-inset-x);
  right: var(--glass-inset-x);
  bottom: var(--glass-inset-b);
  z-index: 60;
  max-width: 616px;
  margin: 0 auto;

  display: flex;
  gap: 3px;
  height: var(--glass-bar-h);
  padding: 6px;
  border-radius: 24px;

  background: var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(200%) brightness(1.06);
  backdrop-filter: blur(var(--glass-blur)) saturate(200%) brightness(1.06);

  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 1px var(--glass-edge-top) inset,
    0 -1px 0 0 var(--glass-edge-bottom) inset,
    var(--el4);

  isolation: isolate;
}

/* лензинг-слой: дублирует фон через SVG displacement, создавая
   лёгкое "плавление" картинки под стеклом — то, что Apple называет
   lensing и явно отличает от обычного frosted blur */
.ios-tabbar-glow{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg,
    color-mix(in srgb, #ffffff 20%, transparent) 0%,
    color-mix(in srgb, #ffffff 4%, transparent) 18%,
    transparent 45%,
    color-mix(in srgb, #ffffff 3%, transparent) 82%,
    color-mix(in srgb, #ffffff 10%, transparent) 100%);
  mix-blend-mode: overlay;
  filter: url(#glassLens);
}

.ios-tab{
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 18px;
  cursor: pointer;
  user-select: none;
  color: var(--ink-faint);
  transition: color .18s ease;
  z-index: 1;
}

.ios-tab-pill{
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 20%, var(--ink) 8%) 0%,
    color-mix(in srgb, var(--accent) 10%, transparent) 100%);
  opacity: 0;
  transform: scale(.92);
  box-shadow: 0 1px 0 0 color-mix(in srgb, #fff 18%, transparent) inset;
  transition: opacity .24s cubic-bezier(.2,.8,.2,1), transform .24s cubic-bezier(.2,.8,.2,1);
  z-index: -1;
}

.ios-tab.active{ color: var(--ink); }
.ios-tab.active .ios-tab-pill{
  opacity: 1;
  transform: scale(1);
}
.ios-tab.active .ios-tab-icon{ color: var(--accent); transform: translateY(-1px) scale(1.04); }
.ios-tab:active .ios-tab-pill{ transform: scale(.95); }

.ios-tab-icon{
  width: 21px; height: 21px;
  display: flex; align-items: center; justify-content: center;
  transition: color .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.ios-tab-icon svg{ width: 100%; height: 100%; }

.ios-tab-label{
  font-size: 10px;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1;
}

/* ══════════════════════════ MASTHEAD (навигационный слой = стекло) ══════════════════════════ */
.masthead{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: max(10px, env(safe-area-inset-top)) 12px 11px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 88%, transparent) 0%,
    color-mix(in srgb, var(--bg) 68%, transparent) 55%,
    transparent 100%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 0 color-mix(in srgb, #ffffff 8%, transparent);
}
.masthead-spacer{ width:100%; }
.masthead-title{
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.035em;
  background: linear-gradient(135deg, var(--ink) 30%, color-mix(in srgb, var(--accent) 65%, var(--ink)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.masthead-id{ display:flex; align-items:center; gap:9px; }


/* ══════════════════════════ КОНТЕНТ = ПЛОТНЫЙ СЛОЙ (не стекло) ══════════════════════════
   HIG: "текст всегда на плотных слоях, никогда прямо на стекле". Карточки
   получают MD3 tonal-surface подход: не прозрачность, а лёгкий tonal-lift
   (поверхность на 1 ступень светлее фона) + мягкая многослойная тень. */
.card{
  position: relative;
  border-radius: var(--r-card);
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--ink) 4%, var(--surface)) 0%,
      var(--surface) 55%);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, var(--line));
  box-shadow:
    0 1px 0 0 color-mix(in srgb, var(--ink) 6%, transparent) inset,
    var(--el2);
  padding: 19px;
}
.card::before{
  content:'';
  position:absolute; left:0; right:0; top:0; height:1px;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #ffffff 22%, transparent) 40%, color-mix(in srgb, #ffffff 22%, transparent) 60%, transparent);
  pointer-events: none;
}
.card .card-head{ margin-bottom: 15px; }
.card .label{ font-size: 11px; letter-spacing: .07em; font-weight: 700; }

/* тонкая MD3-style "тональная" полоска слева от card-head — структурный
   акцент, кодирующий что это заголовок секции, не декор ради декора */
.card-head-lbl{ position: relative; padding-left: 11px; }
.card-head-lbl::before{
  content:'';
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:14px; border-radius:2px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 40%, transparent));
}

/* ══════════════════════════ КНОПКИ: MD3 tonal + Liquid Glass ══════════════════════════
   Три реальных стиля, не варианты одной заливки:
   1) .btn          — MD3 "filled" — плотная поверхность, высокий приоритет
   2) .btn-pos/-neg — MD3 "tonal"  — приглушённый тон семантики, БЕЗ flat-заливки
   3) .btn-ghost     — Liquid Glass "matte" — настоящее стекло: blur+saturate+edge
   Зелёный #4ade80 flat-fill (то, что просили выкинуть) нигде не используется —
   .btn-pos строится из color-mix(var(--pos)) поверх tonal-surface. */

.btn{
  position: relative;
  border-radius: var(--r-btn);
  border: none;
  font-weight: 700;
  letter-spacing: -.005em;
  isolation: isolate;
  overflow: hidden;
  transition: transform .14s cubic-bezier(.34,1.2,.64,1), box-shadow .14s ease, filter .14s ease;
}
.btn:active{ transform: scale(.982); }

/* ── Filled (primary): тёплый акцентный градиент, специуляр сверху ── */
.btn:not(.btn-pos):not(.btn-neg):not(.btn-ghost){
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 94%, white 8%) 0%,
    color-mix(in srgb, var(--accent) 100%, black 4%) 100%);
  color: color-mix(in srgb, black 80%, var(--accent) 20%);
  box-shadow:
    0 1px 0 0 color-mix(in srgb, white 34%, transparent) inset,
    0 -1.5px 0 0 color-mix(in srgb, black 16%, transparent) inset,
    0 8px 18px -8px color-mix(in srgb, var(--accent) 55%, transparent),
    var(--el1);
}
.btn:not(.btn-pos):not(.btn-neg):not(.btn-ghost):active{
  filter: brightness(.97);
  box-shadow:
    0 1px 0 0 color-mix(in srgb, white 20%, transparent) inset,
    0 4px 10px -6px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ── Tonal positive: MD3-tonal поверхность в тоне --pos, НЕ flat fill.
   Это прямая замена "блевотной зелёной кнопки" — цвет живёт в тоне
   поверхности, не в кислотной заливке, и наследует тему Telegram. ── */
.btn-pos{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pos) 26%, var(--surface-3)) 0%,
    color-mix(in srgb, var(--pos) 16%, var(--surface-2)) 100%);
  color: color-mix(in srgb, var(--pos) 88%, white 10%);
  border: 1px solid color-mix(in srgb, var(--pos) 34%, var(--line));
  box-shadow:
    0 1px 0 0 color-mix(in srgb, var(--pos) 26%, white 12%) inset,
    0 -1px 0 0 rgba(0,0,0,.2) inset,
    0 10px 22px -14px color-mix(in srgb, var(--pos) 45%, transparent),
    var(--el1);
}
.btn-pos:active{ filter: brightness(1.08); }
.btn-pos svg{ color: currentColor; }

.btn-neg{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--neg) 26%, var(--surface-3)) 0%,
    color-mix(in srgb, var(--neg) 16%, var(--surface-2)) 100%);
  color: color-mix(in srgb, var(--neg) 88%, white 10%);
  border: 1px solid color-mix(in srgb, var(--neg) 34%, var(--line));
  box-shadow:
    0 1px 0 0 color-mix(in srgb, var(--neg) 26%, white 12%) inset,
    0 -1px 0 0 rgba(0,0,0,.2) inset,
    0 10px 22px -14px color-mix(in srgb, var(--neg) 45%, transparent),
    var(--el1);
}

/* ── Ghost = настоящее Liquid Glass matte: blur+saturate+тонкая кромка,
   по параметрам из HIG (frost ~28px, edge ~1px light 8-20%). ── */
.btn-ghost{
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink-dim);
  box-shadow:
    0 1px 0 0 color-mix(in srgb, var(--ink) 10%, transparent) inset,
    var(--el1);
}
.btn-ghost:active{ background: color-mix(in srgb, var(--surface-3) 78%, transparent); }

.btn-block{ width:100%; }
.btn-row{ display:flex; gap:9px; margin-top:2px; }
.btn-row .btn{ flex:1; }

/* ══════════════════════════ ИНПУТЫ / СЕЛЕКТЫ ══════════════════════════ */
.form-group input, .form-group select{
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, var(--line));
  border-radius: 13px;
  box-shadow: 0 1px 0 0 color-mix(in srgb, #ffffff 6%, transparent) inset;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
.form-group input:focus, .form-group select:focus{
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  background: var(--surface-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  outline: none;
}
.form-group label{ font-weight: 700; }

/* ══════════════════════════ ПЛАШКИ/СПИСКИ: MD3 tonal-surface ══════════════════════════
   Единый приём для всех "серых плашек" — вместо картонной плоской заливки
   лёгкий внутренний блик сверху (tonal elevation), как у filled MD3 chips. */
.stat-box, .record-box, .rule-item, .recip-item, .tx-item, .calc-stat, .totals-tile, .cat-box{
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--ink) 2%, var(--surface-2)) 0%,
    var(--surface-2) 100%);
  border: 1px solid color-mix(in srgb, var(--ink) 6%, var(--line-soft));
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--ink) 5%, transparent) inset;
  border-radius: var(--r-chip);
}

.totals-net{
  box-shadow: 0 1px 0 0 color-mix(in srgb, var(--ink) 5%, transparent) inset,
              0 6px 18px -10px color-mix(in srgb, var(--accent) 35%, transparent);
}

.icon-btn{
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
  transition: background .14s ease, color .14s ease, transform .12s ease;
}
.icon-btn:active{ transform: scale(.92); }
.icon-btn.danger:active{ color: var(--neg); background: color-mix(in srgb, var(--neg) 14%, var(--surface-2)); }

/* ══════════════════════════ БАЛАНС: liquid-glass числовой герой ══════════════════════════ */
.ledger{
  position: relative;
  padding: 4px 2px 6px;
}
.ledger-value{
  font-weight: 800;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 96%, white 14%) 0%,
    var(--accent) 55%,
    color-mix(in srgb, var(--accent) 88%, black 10%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent));
}
.ledger-value svg{ -webkit-text-fill-color: initial; filter: none; }

/* ══════════════════════════ ТАБ-ФИЛЬТР ВНУТРИ КАРТОЧКИ (Доход/Расход и т.п.) ══════════════════════════ */
.tab-group{
  background: color-mix(in srgb, var(--surface-2) 65%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-radius: 15px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--ink) 6%, var(--line-soft));
  box-shadow: 0 1px 0 0 color-mix(in srgb, #ffffff 7%, transparent) inset;
}
.tab-group .tab{
  border-radius: 10px;
  font-weight: 650;
  transition: background .16s ease, color .16s ease;
}
.tab-group .tab.active{
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ink) 96%, white) 0%, var(--ink) 100%);
  color: var(--bg);
  box-shadow: var(--el1);
}

/* ══════════════════════════ ФИКСЫ РАЗМЕТКИ (перенесены из предыдущей версии) ══════════════════════════ */

/* Карточки "РЕКОРДЫ" — длинные надписи не должны выламывать grid */
.record-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
.record-box{ min-width: 0; overflow: hidden; }
.record-box-label{ white-space: normal; line-height: 1.3; overflow-wrap: break-word; }
.record-box-label svg{ flex-shrink: 0; }
.record-box-val{ flex-wrap: wrap; }

/* Подпись под суммой калькулятора — обычный шрифт, без капса */
.calc-hero-sub{
  font-size: 12.5px !important;
  color: var(--ink-faint);
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
  margin-top: 4px;
}

/* Вкладка "Профиль": список людей переиспользует стиль .recip-item */
.people-list{ display:flex; flex-direction:column; gap:6px; max-height:520px; overflow-y:auto; padding-right:2px; }
.person-item:active{ opacity:.7; }

/* ══════════════════════════ ФОЛЛБЭК: браузеры без color-mix / backdrop-filter ══════════════════════════ */
@supports not (background: color-mix(in srgb, red, blue)){
  .ios-tabbar{ background: rgba(28,29,33,.75); }
  .ios-tab-pill{ background: rgba(232,184,75,.16); }
  .masthead{ background: rgba(22,23,26,.88); }
  .card{ background: var(--surface); }
  .btn-pos{ background: rgba(74,222,128,.16); color: #4ade80; }
  .btn-ghost{ background: rgba(38,39,44,.85); }
}
@media (prefers-reduced-motion: reduce){
  .ios-tab-icon, .ios-tab-pill, .btn, .icon-btn{ transition: none !important; }
}

/* ══════════════════════════ OWNER-ПАНЕЛЬ (доступ + статистика открытий) ══════════════════════════ */
.owner-user-list{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.owner-user-row{
  display:flex; flex-direction:column; gap:9px;
  min-width:0; max-width:100%;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  padding: 12px 13px;
  box-sizing: border-box;
  overflow: hidden;
}
.owner-user-row-flat{ flex-direction:row; align-items:center; justify-content:space-between; }
.owner-user-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.owner-user-name{ font-size:13px; color:var(--ink); font-weight:700; word-break:break-word; }
.owner-user-owner-badge{ color:var(--accent); font-weight:700; font-size:11px; }
.owner-user-tags{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.owner-user-tag{
  font-size:10.5px; font-weight:700; letter-spacing:.02em;
  color: var(--ink-faint);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-3));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 7px;
  padding: 3px 8px;
  white-space: nowrap;
}
.owner-user-tag-id{
  color: var(--ink-dim);
  background: var(--surface-3);
  border-color: var(--line-soft);
  font-family: var(--mono);
}
.owner-user-count{ font-family: var(--mono); font-size:13px; color:var(--ink); font-weight:700; flex-shrink:0; }
.owner-user-row .btn{ font-size:12.5px; padding:9px 12px; }
.owner-grant-row{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.owner-grant-row input{ width:100%; box-sizing:border-box; padding:10px 13px; font-size:13px; color:var(--ink); }