/* iOS: системный шрифт SF Pro, цвета и материалы iOS (тёмная тема), «жидкое стекло» iOS 26.
   Подключается последним и переопределяет базовую тему, разметку не трогает. */
:root {
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', 'Segoe UI Variable Text', 'Segoe UI', Roboto, system-ui, sans-serif;
  --mono: var(--sans);
  --text: #ffffff;
  --muted: rgba(235, 235, 245, .66);
  --faint: rgba(235, 235, 245, .56);  /* .42 давало ~3:1 на стекле — мелкие подписи не читались */
  --accent: #0a84ff;          /* systemBlue */
  --accent-ink: #ffffff;
  --pos: #30d158;             /* systemGreen */
  --neg: #ff453a;             /* systemRed */
  --orange: #ff9f0a;
  --sep: rgba(84, 84, 88, .55);
  --fill: rgba(120, 120, 128, .24);
  --fill-2: rgba(120, 120, 128, .16);
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 28px;
  --spring: cubic-bezier(.32, .72, 0, 1);  /* «пружина» iOS */
  --glass-bg: rgba(30, 30, 34, .48);
  --glass-edge: rgba(255, 255, 255, .13);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(255, 255, 255, .03);
  --glass-blur: blur(28px) saturate(180%);
}
body { font-size: 17px; letter-spacing: -.01em; font-feature-settings: 'tnum' 1, 'cv11' 1; }

/* типографика iOS: Large Title / Title / Headline / Footnote — полужирные, без «тонких 500» */
.hero-home h1, .pick h2 { font-weight: 700; letter-spacing: -.025em; }
.hero-home h1 { font-size: 34px; line-height: 1.1; }
.hero__num, .preview-app__num, .big, .word, .hero__word { font-weight: 700; letter-spacing: -.035em; }
.hero__title, .title, .persona-card b, .person__head b, .promo-sheet h3, .lockbox h3, .hero__person b { font-weight: 700; }
.kpi b, .tile b, .row-card b, .plan b, .ach-prev__head b, .promo > b { font-weight: 700; }
.sec__h { font-size: 22px; font-weight: 700; letter-spacing: -.02em; padding: 0 4px; }
.brand { font-weight: 700; font-size: 17px; }
.brand__mark { border-radius: 7px; }
.row__v, .prow__v, .axis, .hm__m, .hm__legend, .bubble__time, .chip span, .row__n, .prow__n, .ach small, .tag, .period small, .area__tip, .bars__tip, .who span, .emo b {
  font-family: var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.row__v, .prow__v { font-size: 15px; color: var(--muted); }

/* поверхности: материал iOS — скругление 22, без резких рамок, мягкая тень */
.hero, .card, .kpi, .preview-app, .persona-card, .tile, .lockbox, .ach, .who, .hint, .rel-grid, .versus, .chart:not(.chart--area) {
  border-radius: var(--r-lg);
  background: var(--glass-bg);
  border: .5px solid var(--glass-edge);
  box-shadow: var(--glass-hi), 0 16px 40px -24px rgba(0, 0, 0, .7);
}
.hero { border-radius: var(--r-xl); }

/* кнопки — капсулы, как в iOS 26 */
.btn { border-radius: 999px; font-weight: 600; font-size: 17px; min-height: 50px; transition: transform .3s var(--spring), opacity .2s, background-color .2s; }
.btn:active { transform: scale(.96); opacity: .85; }
.btn--main { background: #fff; color: #000; }
.btn--gold { background: var(--accent); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn--gold .tge { filter: brightness(0) invert(1); opacity: .95; }
.btn--glass { background: rgba(255, 255, 255, .1); border: .5px solid rgba(255, 255, 255, .18); }
.btn--quiet { color: var(--accent); font-weight: 500; min-height: 44px; }
.actions .row2 .btn, .upload .row2 .btn { padding: 0 12px; }
.get-pro { position: relative; flex: none; white-space: nowrap; color: var(--accent); font-weight: 600; font-size: 15px; padding: 6px 12px; border-radius: 999px; background: rgba(10, 132, 255, .16); }

/* сегментные переключатели iOS */
.seg { padding: 2px; border-radius: 9px; background: var(--fill); border: 0; }
.seg button { min-height: 40px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--text); padding: 7px; transition: background-color .3s var(--spring); }
.seg button.on { background: rgba(255, 255, 255, .26); box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }

/* периоды — капсулы-чипы, как фильтры в «Фото»/«Музыке» */
.periods { gap: 8px; }
.period { min-height: 40px; align-items: center; border-radius: 999px; padding: 7px 14px; background: var(--fill-2); border: 0; flex-direction: row; gap: 6px; }
.period:not(.on) { background: var(--fill-2); }
.period b { font-size: 15px; font-weight: 600; color: var(--text); }
.period small { font-size: 12px; color: var(--muted); }
.period.on { background: #fff; box-shadow: none; }
.period.on b { color: #000; }
.period.on small { color: rgba(0, 0, 0, .55); }
.sort { border-radius: 999px; height: 40px; padding: 0 14px; background: var(--fill-2); border: 0; color: var(--text); font-size: 14px; font-weight: 600; }
.sort.on { background: #fff; color: #000; }
.chip { border-radius: 999px; background: var(--fill-2); border: 0; padding: 6px 12px; }

/* верхняя панель: стекло без линии, как навбар iOS при прокрутке */
.topnav { border-bottom: .5px solid rgba(255, 255, 255, .08); background: rgba(14, 14, 16, .5); }

/* нижнее меню — плавающая капсула iOS 26 */
.tabbar { border-radius: 999px; padding: 5px; bottom: calc(var(--bottom) + 14px); width: min(calc(100% - 32px), 480px);
  background: rgba(28, 28, 32, .5); border: .5px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .04), 0 18px 40px -14px rgba(0, 0, 0, .75); }
.tab { border-radius: 999px; font-size: 10px; font-weight: 600; color: var(--muted); padding: 6px 2px 5px; transition: background-color .35s var(--spring), color .2s; }
.tab.on { background: rgba(255, 255, 255, .14); color: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.tab .tge { width: 26px; height: 26px; }

/* списки — сгруппированные, как «Настройки»: одна карточка, строки через тонкий разделитель */
.list, .plist { gap: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--glass-bg); border: .5px solid var(--glass-edge);
  box-shadow: var(--glass-hi); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.list > .row, .plist > .prow { border-radius: 0; background: transparent; border: 0; }
.list > .row + .row::before, .plist > .prow + .prow::before { content: ''; position: absolute; top: 0; left: 52px; right: 0; height: .5px; background: var(--sep); z-index: 2; }
.list > .row:active, .plist > .prow:active { background: rgba(255, 255, 255, .08); transform: none; }
.prow { padding-right: 30px; }
.prow::after { content: ''; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-top: 2px solid rgba(235, 235, 245, .3); border-right: 2px solid rgba(235, 235, 245, .3); transform: rotate(45deg); border-radius: 1px; }
.row__fill { background: rgba(10, 132, 255, .12); }
.fact--row { border-radius: var(--r-md); background: var(--glass-bg); border: .5px solid var(--glass-edge); }
/* факты внутри сгруппированного списка — строки, а не отдельные карточки */
.list > .fact--row { border-radius: 0; background: transparent; border: 0; }
.list > .fact--row + .fact--row { border-top: .5px solid var(--sep); }

/* поле поиска iOS */
.search { height: 38px; border-radius: 11px; background: var(--fill); border: 0; font-size: 17px; }
.search:focus { border: 0; box-shadow: 0 0 0 2px rgba(10, 132, 255, .5); }

/* графики: цвета iOS */
.bars i { background: rgba(235, 235, 245, .18); border-radius: 4px 4px 2px 2px; }
.bars i.hl { background: rgba(235, 235, 245, .32); }
.bars i.peak { background: var(--accent); }
.area__dot { box-shadow: 0 0 0 4px rgba(10, 132, 255, .25); }
.area__peakline { stroke: rgba(10, 132, 255, .4); }
.hm__c { background: rgba(120, 120, 128, .2); }
.hm__c.l1 { background: rgba(10, 132, 255, .28); }
.hm__c.l2 { background: rgba(10, 132, 255, .5); }
.hm__c.l3 { background: rgba(10, 132, 255, .75); }
.prow__fill i.them, .prow__bar i.them, .legend i.them { background: var(--accent); }
.mood__bar .pos { background: var(--pos); }
.mood__bar .neg { background: var(--neg); }
.pill--up { color: var(--pos); }
.preview-app__row b { color: var(--pos); }

/* пузыри — как в iMessage/Telegram iOS */
.bubble { border-radius: 18px 18px 18px 6px; background: rgba(58, 58, 60, .82); font-size: 15px; }
.bubble--out { background: var(--accent); border-radius: 18px 18px 6px 18px; }
.bubble__time { color: rgba(235, 235, 245, .6); }
.bubble--out .bubble__time { color: rgba(255, 255, 255, .75); }
.bubble--out .bubble__time::after { color: #fff; }

/* шторка iOS: крупное скругление, «хваталка» */
.sheet__panel { border-radius: 38px 38px 0 0; padding-top: 6px; background: rgba(28, 28, 32, .78); border: .5px solid rgba(255, 255, 255, .14); border-bottom: 0; }
.sheet__grip { width: 36px; height: 5px; border-radius: 3px; background: rgba(235, 235, 245, .3); margin: 0 auto 18px; }
.sheet__panel { transition: transform .5s var(--spring); }

/* переключатель iOS (51×31, зелёный) */
.toggle i { width: 51px; height: 31px; border-radius: 16px; background: var(--fill); }
.toggle i::after { top: 2px; left: 2px; width: 27px; height: 27px; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 3px 1px rgba(0, 0, 0, .06); transition: transform .35s var(--spring); }
.toggle.on i { background: var(--pos); }
.toggle.on i::after { transform: translateX(20px); }

/* тарифы */
.plan { border-radius: var(--r-lg); background: rgba(255, 255, 255, .07); border: .5px solid rgba(255, 255, 255, .16); }
.plan--best { border: 1.5px solid var(--accent); background: rgba(10, 132, 255, .14); }
.plan__tag { border-radius: 999px; background: var(--accent); color: #fff; }

/* мелочи */
.toast { border-radius: 999px; font-weight: 600; font-size: 15px; padding: 12px 20px; }
.unlock { border-radius: 999px; font-weight: 600; }
.tag { border-radius: 6px; background: var(--fill); }
.ava { font-weight: 600; }
.step::before { border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-family: var(--sans); }
.close-st { background: rgba(120, 120, 128, .32); color: #fff; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.progress i b { background: #fff; }
.gate__mark { background: rgba(10, 132, 255, .18); border: 0; }
.upload { border-color: rgba(10, 132, 255, .4); }
.theme-pick button.on { box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff; }
.drop__box { border-color: rgba(10, 132, 255, .7); border-radius: var(--r-xl); }

/* нажатие — лёгкое «пружинное» сжатие, как у системных кнопок */
.hero--person, .ach-prev, .plan, .persona-card--locked { transition: transform .35s var(--spring); }
.hero--person:active, .ach-prev:active, .persona-card--locked:active { transform: scale(.975); }

/* ---------- вкладка «Приколы» ---------- */
.verdict { align-items: center; text-align: center; gap: 10px; }
.verdict .hero__label { align-self: stretch; text-align: left; }
.verdict__e { width: 96px !important; height: 96px !important; margin: 4px 0; }
.verdict__text { min-height: 66px; display: grid; place-items: center; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; padding: 0 4px; }
.verdict__text.spin { animation: verdict-in .55s var(--spring) both; }
.verdict .btn { margin-top: 6px; }
@keyframes verdict-in { 0% { opacity: 0; transform: translateY(14px) scale(.94); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: none; } }

.meters { display: flex; flex-direction: column; gap: 8px; }
.meter { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-lg); background: var(--glass-bg); border: .5px solid var(--glass-edge); box-shadow: var(--glass-hi); }
.meter__e { width: 40px !important; height: 40px !important; flex: none; }
.meter__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.meter__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.meter__name { font-size: 15px; color: var(--muted); font-weight: 600; }
.meter__val { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.meter__bar { height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.meter__bar i { display: block; height: 100%; border-radius: inherit; background: var(--pos); transform-origin: left; animation: fill .8s var(--spring) both; }
.meter__rank { font-size: 15px; line-height: 1.35; color: var(--muted); }
.meter__rank b { color: var(--text); font-weight: 700; }
.meter__sub { font-size: 13px; color: var(--faint); }
.meters .locked-box { border-radius: var(--r-lg); }

.quiz { display: flex; flex-direction: column; gap: 14px; }
.quiz__head { display: flex; justify-content: space-between; font-size: 13px; color: var(--faint); font-weight: 600; }
.quiz__q { font-size: 20px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.quiz__opts { display: flex; flex-direction: column; gap: 8px; }
.quiz__opt { min-height: 48px; padding: 12px 18px; line-height: 1.3; overflow-wrap: anywhere; border-radius: 14px; text-align: left; font-size: 17px; font-weight: 600; background: var(--fill-2); border: .5px solid rgba(255, 255, 255, .08); transition: transform .3s var(--spring), background-color .2s; }
.quiz__opt:active { transform: scale(.97); }
.quiz__opt.ok { background: rgba(48, 209, 88, .28); border-color: var(--pos); }
.quiz__opt.bad { background: rgba(255, 69, 58, .26); border-color: var(--neg); animation: shake .4s; }
.quiz__done { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 6px 0; }
.quiz__done b { font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.quiz__done span { color: var(--muted); margin-bottom: 8px; }
.quiz__e { width: 72px !important; height: 72px !important; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.horo { display: flex; flex-direction: column; gap: 6px; }
.horo__when { font-size: 13px; font-weight: 600; color: var(--accent); text-transform: none; }
.horo b { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.horo span { font-size: 15px; color: var(--muted); }

/* 6 вкладок в нижнем меню — чуть плотнее */
.tabbar .tab span { white-space: nowrap; }
@media (max-width: 380px) { .tab { font-size: 9.5px; } .tab .tge { width: 24px; height: 24px; } }

/* ---------- правки вёрстки и доступности ---------- */
/* мелкие кнопки: видимый размер прежний, область нажатия — 44 px */
.get-pro::after, .theme-pick button::after { content: ''; position: absolute; inset: -6px; }
.theme-pick button::after { inset: -8px; border-radius: 50%; }
/* «Как выгрузить» — вся строка заголовка нажимается */
.howto { padding: 0 16px; }
.howto[open] { padding-bottom: 16px; }
.howto summary { min-height: 52px; }
.howto[open] > .seg, .howto[open] > .steps { margin-top: 4px; }
.howto[open] > .steps { margin-top: 16px; }
/* экран подписки/техработ: центр, но без обрезки верха, если не влезает */
.gate { justify-content: flex-start; }
.gate > :first-child { margin-top: auto; }
.gate > :last-child { margin-bottom: auto; }
/* длинные имена */
.rel > div { min-width: 0; }
.rel b, .ach-mini span, .ach b, .meter__rank { overflow-wrap: anywhere; }
.versus__names span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* пересчёт периода: экран остаётся, только приглушается */
.tabview.busy { opacity: .45; pointer-events: none; }
.btn.is-busy { opacity: .6; pointer-events: none; }
/* узкие экраны (320–360) */
@media (max-width: 360px) {
  .kpi { padding: 14px; }
  .kpi b { font-size: 21px; }
  .hero { padding: 18px; }
  .upload .row2 { grid-template-columns: 1fr; }
  .get-pro__full { display: none; }
  .get-pro__short { display: inline !important; }
}
.get-pro__short { display: none; }
.topnav__row .brand { min-width: 0; white-space: nowrap; }
/* горизонталь: верхняя панель и меню компактнее, чтобы контенту хватало высоты */
@media (orientation: landscape) and (max-height: 500px) {
  .topnav { padding-top: calc(var(--top) + 6px); gap: 6px; }
  .tab { flex-direction: row; justify-content: center; gap: 6px; padding: 4px 2px; }
  .tab .tge { width: 22px; height: 22px; }
  .tabbar { bottom: calc(var(--bottom) + 8px); }
  .tabview { padding-bottom: calc(var(--bottom) + 76px); }
  .slide { padding-top: calc(var(--top) + 44px); gap: 10px; }
}