/* Фон бренда (горы и синица) + «жидкое стекло» в духе iOS.
   Размытие (backdrop-filter) — только у крупных поверхностей: верхняя панель, меню, карточки, шторки.
   Строки длинных списков — просто полупрозрачные: так не тормозит на слабых телефонах. */
html, body { background: #101012; }
.bg { background: url("../assets/bg.jpg") center / cover no-repeat, var(--ph, none) center / cover no-repeat, #101012; }
.bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12, 12, 14, .58) 0%, rgba(12, 12, 14, .30) 38%, rgba(12, 12, 14, .55) 70%, rgba(12, 12, 14, .82) 100%); }

:root {
  --glass-bg: rgba(34, 34, 38, .42);
  --glass-bg-strong: rgba(28, 28, 32, .62);
  --glass-edge: rgba(255, 255, 255, .12);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 0 0 .5px rgba(255, 255, 255, .04);
  --glass-blur: blur(22px) saturate(170%);
}

/* крупные поверхности — с размытием */
.hero, .card, .kpi, .preview-app, .persona-card, .tile, .lockbox, .ach, .who, .hint {
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-hi), 0 10px 30px -18px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.card .kpi, .card .card { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* строки списков — без размытия, чуть плотнее */
.row, .prow, .emo, .sort, .chip, .search, .period:not(.on), .fact--row {
  background: rgba(30, 30, 34, .56);
  border-color: rgba(255, 255, 255, .09);
}
.prow:active, .row:active { background: rgba(46, 46, 52, .7); }

/* верхняя панель и нижнее меню — плотное стекло */
.topnav {
  background: rgba(16, 16, 18, .55);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
}
.tabbar {
  background: rgba(26, 26, 30, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 30px -10px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
}
.tab.on { background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }

/* шторка и всплывашки */
.sheet__panel {
  background: rgba(24, 24, 28, .72);
  border: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
}
.sheet__bg { background: rgba(0, 0, 0, .35); }
.toast, .unlock {
  background: rgba(40, 40, 46, .7);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border-color: rgba(255, 255, 255, .14);
}
.btn--glass {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.btn--main { box-shadow: inset 0 1px 0 #fff, 0 8px 24px -12px rgba(0, 0, 0, .6); }
.period.on { background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.seg { background: rgba(0, 0, 0, .25); }
.seg button.on { background: rgba(255, 255, 255, .14); }

/* сторис и экраны загрузки — тоже на фоне бренда */
.stories, .loading, .pick { background: transparent; }
.stories::before { content: ''; position: absolute; inset: 0; background: rgba(10, 10, 12, .35); pointer-events: none; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero, .card, .kpi, .preview-app, .persona-card, .tile, .lockbox, .ach, .who, .hint, .topnav, .tabbar, .sheet__panel { background: rgba(26, 26, 30, .9); }
}

/* нажимаемые графики */
.chart--tap .bars { position: relative; cursor: pointer; touch-action: pan-y; }
.bars i { transition: background-color .14s var(--ease), opacity .14s var(--ease); }
.bars:has(i.sel) i:not(.sel) { opacity: .55; }
.bars i.sel { background: #ededed !important; opacity: 1; }
.bars__tip { position: absolute; transform: translate(-50%, -8px); padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  font-family: var(--mono); font-size: 11px; color: var(--text); background: rgba(40, 40, 46, .85); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity .12s var(--ease); z-index: 2; }
.bars__tip.on { opacity: 1; }
.area__box { cursor: crosshair; }
.area__dot { transition: left .08s linear, top .08s linear; }

/* «Отношения» */
.rel-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.rel-grid { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--glass-bg); border: 1px solid var(--glass-edge); }
.rel { display: flex; align-items: center; gap: 12px; }
.rel > .ic { width: 22px; height: 22px; flex: none; color: var(--accent); opacity: 1; }
.rel b { display: block; font-weight: 500; font-size: 16px; }
.rel span { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; }

/* тарифы */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plan { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border-radius: var(--r-lg); text-align: left;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); transition: transform .14s var(--ease); }
.plan:active { transform: scale(.98); }
.plan__name { font-size: 13px; color: var(--muted); }
.plan b { font-weight: 600; font-size: 22px; letter-spacing: -.02em; }
.plan small { font-size: 11px; color: var(--faint); line-height: 1.3; }
.plan--best { border-color: rgba(106, 179, 243, .6); background: rgba(106, 179, 243, .12); }
.plan__tag { position: absolute; top: -9px; right: 10px; padding: 2px 8px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 600; }

/* экран обязательной подписки */
.gate { justify-content: center; text-align: center; gap: 12px; }
.gate__mark { width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 18px; display: grid; place-items: center; background: rgba(106, 179, 243, .16); border: 1px solid rgba(106, 179, 243, .4); }
.gate__mark .ic { width: 30px; height: 30px; color: var(--accent); opacity: 1; }
.gate p { margin-bottom: 8px; }