/* ═══════════════════════════════════════════════════════════════════════
   ui.css — общее оформление всех страниц Mini App (фаза 5: iOS)
   Подключается в <head> каждой страницы: <link rel="stylesheet" href="/ui.css?v=6">

   Стиль — системные приложения iOS 26 (Настройки, App Store, Telegram для
   iOS) в тёмной теме. Правила взяты из скиллов дизайна:
   • impeccable / reference/ios.md — системные цвета, один акцент (tint),
     иконки в духе SF Symbols, крупный заголовок, который при прокрутке
     уходит в компактную панель, сгруппированные списки, родные контролы
     (переключатель, сегменты), цели нажатия от 44px, текст 17px;
   • apple-design (Emil Kowalski) — отклик на касание сразу (pointer-down),
     пружины без перелёта для интерфейса и с лёгким — для шторок,
     полупрозрачные материалы и «мягкий край» вместо линий, трекинг по
     размеру шрифта, prefers-reduced-motion / -transparency / -contrast;
   • mobile-native — hover только для мыши, без серой вспышки при нажатии,
     touch-action:manipulation, безопасные зоны, overscroll-behavior;
   • taste-skill (app-screens) — без иконок в цветных кружках у цифр,
     без лишних цветных акцентов, вес 700 вместо 800–900.

   1. Токены: цвета iOS, шрифт, размеры текста, радиусы, движение.
   2. Поверхности браузера: выделение, каретка, фокус, скроллбары.
   3. Производительность: размытие только у нижней и верхней панелей.
   4. iOS: поля ввода ≥16px — Telegram не приближает страницу при фокусе.
   5. Общие элементы: панели, заголовки, списки, кнопки, контролы.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* ── цвета: системная палитра iOS, тёмная тема ── */
  --ui-bg:#000000;          /* systemBackground — фон страницы */
  --ui-s1:#1C1C1E;          /* secondarySystemGroupedBackground — ячейка, карточка */
  --ui-s2:#2C2C2E;          /* tertiarySystemGroupedBackground — элемент внутри ячейки */
  --ui-s3:#3A3A3C;          /* подсветка нажатой ячейки */
  --ui-sheet:#1C1C1E;       /* шторка */
  --ui-glass:rgba(30,30,32,.97);   /* панель без размытия (слабые Android) */
  --ui-mat:rgba(26,26,28,.72);     /* материал панелей с размытием */
  --ui-line:rgba(84,84,88,.6);     /* separator */
  --ui-line-2:rgba(84,84,88,.85);
  --ui-fill:rgba(118,118,128,.24);   /* tertiarySystemFill — серые кнопки, поиск */
  --ui-fill-2:rgba(118,118,128,.32); /* secondarySystemFill — дорожка переключателя */
  --ui-fill-3:rgba(118,118,128,.44); /* нажатие серой кнопки */
  --ui-tx:#FFFFFF;                   /* label */
  --ui-tx-2:rgba(235,235,245,.6);    /* secondaryLabel */
  --ui-tx-3:rgba(235,235,245,.46);   /* подписи (tertiary .3 — только для плейсхолдеров) */
  --ui-tx-4:rgba(235,235,245,.3);    /* tertiaryLabel: плейсхолдер, шеврон */
  --ui-ac:#0A84FF;          /* systemBlue — единственный акцент (tint) */
  --ui-ac-press:#0A6FD6;
  --ui-ac-tx:#409CFF;       /* tint для текста (Increase Contrast-вариант, AA на #1C1C1E) */
  --ui-ac-tx-2:#6CB4FF;
  --ui-ac-tint:rgba(10,132,255,.2);
  --ui-ac-line:rgba(10,132,255,.75);
  --ui-ok:#30D158; --ui-warn:#FF9F0A; --ui-err:#FF453A;
  --ui-up:#30D158; --ui-down:#FF453A;
  --ui-green:#30D158; --ui-red:#FF453A; --ui-orange:#FF9F0A; --ui-yellow:#FFD60A; --ui-mint:#63E6E2;
  --ui-teal:#40C8E0; --ui-cyan:#64D2FF; --ui-blue:#0A84FF; --ui-indigo:#5E5CE6; --ui-purple:#BF5AF2;
  --ui-pink:#FF375F; --ui-brown:#AC8E68; --ui-gray:#8E8E93; --ui-gray-2:#636366; --ui-gray-3:#48484A;
  /* ── шрифт: системный (на iPhone — SF Pro с оптическими размерами) ── */
  --ui-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ui-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  /* ── размеры текста iOS (Dynamic Type, размер «Large») ── */
  --ui-fs-lt:34px;   /* Large Title  34/41 bold */
  --ui-fs-t1:28px;   /* Title 1      28/34 */
  --ui-fs-t2:22px;   /* Title 2      22/28 */
  --ui-fs-t3:20px;   /* Title 3      20/25 */
  --ui-fs-body:17px; /* Body/Headline 17/22 */
  --ui-fs-cal:16px;  /* Callout      16/21 */
  --ui-fs-sub:15px;  /* Subheadline  15/20 */
  --ui-fs-fn:13px;   /* Footnote     13/18 */
  --ui-fs-c1:12px;   /* Caption 1    12/16 */
  --ui-fs-c2:11px;   /* Caption 2    11/13 — нижний предел */
  /* ── радиусы (iOS 26: концентрические, крупнее у больших поверхностей) ── */
  --ui-r-s:10px; --ui-r:22px; --ui-r-l:26px; --ui-r-xl:34px; --ui-pill:999px;
  --ui-r-cell:22px;   /* сгруппированный список */
  /* ── движение ──
     ease-out для появления, без «вялых» ease-in; пружины посчитаны из
     параметров UIKit: интерфейс — damping 1.0 / response .32 (без перелёта),
     шторки — damping .82 / response .34 (перелёт ~1%). */
  --ui-ease:cubic-bezier(.25,.1,.25,1);
  --ui-ease-out:cubic-bezier(.16,1,.3,1);
  --ui-spring-soft:linear(0, 0.064, 0.198, 0.347, 0.487, 0.606, 0.703, 0.78, 0.838, 0.882, 0.915, 0.939, 0.956, 0.969, 0.978, 0.985, 0.989, 0.992, 0.995, 0.996, 0.997, 0.998, 0.999, 0.999, 1);
  --ui-spring:linear(0, 0.083, 0.256, 0.447, 0.618, 0.754, 0.854, 0.922, 0.966, 0.991, 1.004, 1.01, 1.011, 1.01, 1.008, 1.006, 1.004, 1.003, 1.002, 1.001, 1);
  --ui-spring-bounce:linear(0, 0.09, 0.283, 0.495, 0.684, 0.83, 0.931, 0.993, 1.025, 1.037, 1.037, 1.031, 1.023, 1.015, 1.009, 1.004, 1.001, 1);
  --ui-t:180ms;
  --ui-press:100ms;   /* отклик на касание */
  --ui-drawer:cubic-bezier(.32,.72,0,1);
  --ui-dock-h:64px;
  --ui-dock-b:max(12px,calc(var(--tg-safe-b,env(safe-area-inset-bottom,0px)) - 12px));
  --ui-dock-space:calc(var(--ui-dock-h) + var(--ui-dock-b) + 28px);
  --ui-nav-top:0px;   /* ставит ui.js: где начинается строка кнопок Telegram */
  --ui-nav-h:44px;    /* высота компактной панели */
  color-scheme:dark;
}
@supports not (transition-timing-function:linear(0, 1)){
  :root{--ui-spring:cubic-bezier(.3,1.1,.4,1);--ui-spring-soft:cubic-bezier(.2,.9,.3,1);--ui-spring-bounce:cubic-bezier(.34,1.3,.55,1)}
}
html,body{background:var(--ui-bg)}
body{font-family:var(--ui-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-optical-sizing:auto;-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ── поверхности браузера ─────────────────────────────────────────────── */
::selection{background:rgba(10,132,255,.42);color:#fff}
input,textarea{caret-color:var(--ui-ac)}
input::placeholder,textarea::placeholder{color:var(--ui-tx-4)!important;opacity:1}
:focus{outline:none}
:focus-visible{outline:2px solid var(--ui-ac-tx)!important;outline-offset:2px}
input:focus-visible,textarea:focus-visible{outline:none!important}
a{text-underline-offset:.18em}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.tnum,[data-tnum]{font-variant-numeric:tabular-nums}
/* mobile-native: без серой вспышки WebKit и задержки двойного тапа; кнопки
   не выделяются как текст при долгом нажатии */
html{-webkit-tap-highlight-color:transparent}
button,[role="button"],[role="tab"],[role="switch"],a,label,summary{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,[role="button"],[role="tab"],[role="switch"]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* ── iOS: без авто-зума при фокусе ─────────────────────────────────────
   Safari приближает страницу, если у поля шрифт меньше 16px. */
:is(input[type="text"],input[type="search"],input[type="number"],input[type="url"],input:not([type]),textarea,select):not(.code-inp):not(.ui-keep-fs){font-size:16px!important}

/* ── производительность ───────────────────────────────────────────────
   Размытие под полупрозрачными слоями пересчитывается на каждом кадре
   прокрутки — на слабых Android это главный источник подвисаний. Поэтому
   стекло оставлено только у нижней панели разделов и верхней компактной
   панели, и только на нормальных телефонах. */

.aurora,.aurora-wrap,.starfield,.noise,.ui-deco{display:none!important}

/* длинные списки: браузер не рисует строки за пределами экрана */
.sit,.scan-item,.gw-row,.gwi,.ui-row-cv{content-visibility:auto;contain-intrinsic-size:auto 64px}
.ui-gcard,.gw-grid>.sit{contain-intrinsic-size:auto 178px}

img{-webkit-user-drag:none}
img.ui-fade{opacity:0;transition:opacity .2s var(--ui-ease)}
img.ui-fade.ui-in{opacity:1}

/* ── «Без анимации» (Меню → Настройки) и системные настройки ─────────
   apple-design §14: «меньше движения» — это мягкая смена прозрачности
   вместо сдвигов и пружин, а не полное отсутствие отклика. */
html.anim-off *,html.anim-off *::before,html.anim-off *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  *,*::before,*::after{transition-property:opacity,color,background-color,border-color,box-shadow!important;transition-duration:.2s!important}
}
@media (prefers-contrast:more){
  :root{--ui-tx-2:rgba(235,235,245,.78);--ui-tx-3:rgba(235,235,245,.66);--ui-line:rgba(120,120,128,.9)}
}

/* ── общие элементы кита ──────────────────────────────────────────────── */
.ui-skel{background:linear-gradient(90deg,var(--ui-s1) 0%,var(--ui-s2) 50%,var(--ui-s1) 100%);background-size:200% 100%;animation:uiSkel 1.2s linear infinite;border-radius:var(--ui-r-s)}
@keyframes uiSkel{from{background-position:100% 0}to{background-position:-100% 0}}
html.perf-low .ui-skel{animation:none}
.ui-sentinel{height:1px}

/* ═══ 5. Общие элементы ═════════════════════════════════════════════════ */

/* ── переходы между страницами (Chrome 126+, Safari 18.2+) ─────────────
   Страницы плавно сменяют друг друга, нижняя панель остаётся на месте. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:ease-out}
::view-transition-old(ui-dock){display:none}
::view-transition-new(ui-dock){animation:none}
::view-transition-group(ui-dock-lens){animation-duration:.44s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
::view-transition-old(ui-dock-lens){display:none}
::view-transition-new(ui-dock-lens){animation:none}
html.anim-off::view-transition-group(*),html.anim-off::view-transition-old(*),html.anim-off::view-transition-new(*){animation:none!important}

/* ── появление контента ───────────────────────────────────────────────
   Блоки мягко поднимаются по очереди: только прозрачность и сдвиг
   (без влияния на раскладку), ease-out. --d — номер блока, шаг 45 мс.
   fill-mode backwards: после анимации снова работают :active и т. п. */
@keyframes uiRise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes uiFade{from{opacity:0}to{opacity:1}}
.ui-rv{animation:uiRise .5s var(--ui-ease-out) backwards;animation-delay:calc(var(--d,0) * 45ms)}
html.anim-off .ui-rv{animation:none}
@media (prefers-reduced-motion:reduce){.ui-rv{animation-name:uiFade;animation-duration:.2s}}

/* ── нижняя панель разделов: таб-бар iOS 26 («жидкое стекло») ─────────
   Плавающая капсула поверх контента: размытие и насыщенность фона,
   светлая кромка сверху и тонкая обводка — свет на материале. Выбранная
   вкладка — синяя линза и синий значок; при ведении пальцем линза
   становится светлым стеклянным «пузырём». Под панелью — мягкое
   размытие контента (прогрессивный край), чтобы текст не «резался». */
.ui-dock{position:fixed;left:0;right:0;bottom:0;z-index:150;display:flex;justify-content:center;
  padding:0 max(14px,env(safe-area-inset-right,0px)) var(--ui-dock-b) max(14px,env(safe-area-inset-left,0px));
  pointer-events:none;view-transition-name:ui-dock;
  transition:transform .42s var(--ui-drawer),opacity .2s ease-out}
.ui-dock>*{pointer-events:auto}
.ui-dock.is-hidden{transform:translate3d(0,calc(100% + 24px),0);opacity:0}
.ui-dock.is-hidden>*{pointer-events:none}
.ui-dock.is-still,.ui-dock.is-still *{transition:none!important;animation:none!important}
.ui-dock__bar{position:relative;flex:1 1 auto;max-width:430px;min-width:0;height:var(--ui-dock-h);display:flex;padding:5px;border-radius:999px;
  background:rgba(25,30,40,.96);isolation:isolate;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.75),0 4px 14px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.1);
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html:not(.perf-low) .ui-dock__bar{background:rgba(23,28,38,.68);
  -webkit-backdrop-filter:blur(24px) saturate(1.9);backdrop-filter:blur(24px) saturate(1.9)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){html:not(.perf-low) .ui-dock__bar{background:rgba(25,30,40,.96)}}
@media (prefers-reduced-transparency:reduce){html:not(.perf-low) .ui-dock__bar{background:#1a1f2a;-webkit-backdrop-filter:none;backdrop-filter:none}}
.ui-dock__bar::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,0) 48%),radial-gradient(90% 120% at 50% 130%,rgba(61,130,246,.13),transparent 62%)}
.ui-dock__lens{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:var(--w,25%);border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,rgba(84,148,255,.26),rgba(61,130,246,.15));
  box-shadow:inset 0 0 0 1px rgba(128,174,255,.17),inset 0 1px 0 rgba(255,255,255,.09),0 0 24px -6px rgba(61,130,246,.5);
  transform:translate3d(var(--x,5px),0,0);view-transition-name:ui-dock-lens;
  transition:transform .5s var(--ui-spring),width .3s var(--ui-ease-out),scale .36s var(--ui-spring),background .22s ease-out,box-shadow .22s ease-out,opacity .2s;
  will-change:transform}
.ui-dock__lens.is-move{scale:1.1 .9}
.ui-dock.is-drag .ui-dock__lens{transition:width .3s var(--ui-ease-out),scale .32s var(--ui-spring),background .2s,box-shadow .2s;scale:1.14 1.2;
  background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.07));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),inset 0 1px 0 rgba(255,255,255,.34),0 10px 26px rgba(0,0,0,.38)}
.ui-dock.is-none .ui-dock__lens{opacity:0;view-transition-name:none}
.ui-dock__tab{position:relative;z-index:1;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  margin:0;padding:0 2px;border:0;border-radius:999px;background:none;color:rgba(214,222,238,.64);cursor:pointer;-webkit-tap-highlight-color:transparent;
  font:600 11px/13px var(--ui-font);letter-spacing:.005em;transition:color .2s ease-out}
.ui-dock__tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-dock__tab svg{width:25px;height:25px;flex:none;transition:transform .32s var(--ui-spring)}
.ui-dock__tab:active svg{transform:scale(.86);transition-duration:.1s}
.ui-dock__tab.is-on,.ui-dock__tab.is-preview{color:#62a0ff}
.ui-dock.is-drag .ui-dock__tab.is-on:not(.is-preview){color:rgba(214,222,238,.64)}
.ui-dock__tab.is-pop svg{animation:uiDockPop .44s var(--ui-spring-bounce)}
@keyframes uiDockPop{0%{transform:scale(.8)}100%{transform:scale(1)}}
.ui-dock__tab:focus-visible{outline:2px solid #8bbaff;outline-offset:-3px}
@media (hover:hover) and (pointer:fine){.ui-dock__tab:not(.is-on):hover{color:rgba(236,241,250,.92)}}
@media (max-width:350px){.ui-dock__tab{font-size:10px}.ui-dock__tab svg{width:23px;height:23px}}
.ui-dock-fade{position:fixed;left:0;right:0;bottom:0;z-index:149;height:calc(var(--ui-dock-h) + var(--ui-dock-b) + 36px);pointer-events:none;
  background:linear-gradient(0deg,rgba(9,12,18,.9) 0%,rgba(9,12,18,.62) 42%,rgba(9,12,18,0) 100%);opacity:0;transition:opacity .3s ease-out}
html:not(.perf-low) .ui-dock-fade{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(0deg,#000 30%,transparent);mask-image:linear-gradient(0deg,#000 30%,transparent)}
html.ui-dock-on:not(.ui-dock-away) .ui-dock-fade{opacity:1}
/* место под панелью: у страниц с прокруткой документа — отступ body,
   у страниц со своим контейнером прокрутки (.app-scroll) — у контейнера */
html.ui-dock-on body{padding-bottom:var(--ui-dock-space)!important}
html.ui-dock-on body:has(.app-scroll){padding-bottom:0!important}
html.ui-dock-on .app-scroll{padding-bottom:var(--ui-dock-space)!important}
html.ui-dock-on:not(.ui-dock-away) #toast,html.ui-dock-on:not(.ui-dock-away) .toast{bottom:calc(var(--ui-dock-space) - 8px)!important}

/* ── компактная панель сверху (iOS: крупный заголовок → строка) ───────
   Крупный заголовок страницы (h1) уезжает при прокрутке — вместо него
   сверху проявляется заголовок 17px по центру на «мягком крае»: размытие
   и затемнение, которые сходят на нет книзу, без жёсткой линии
   (apple-design §12 «scroll edge effect»). В полноэкранном Telegram
   заголовок встаёт в строку кнопок Telegram, между «Закрыть» и «⋯».
   Нажатие на панель — прокрутка наверх, как по статус-бару iOS. */
.ui-nav{position:fixed;left:0;right:0;top:0;z-index:140;height:calc(var(--ui-nav-top) + var(--ui-nav-h) + 18px);pointer-events:none}
.ui-nav__bg{opacity:0;transition:opacity .25s ease-out}
.ui-nav.is-on .ui-nav__bg,.ui-nav.is-edge .ui-nav__bg{opacity:1}
.ui-nav__bg{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.86) calc(100% - 26px),rgba(0,0,0,0) 100%)}
html:not(.perf-low) .ui-nav__bg{background:linear-gradient(180deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.72) calc(100% - 26px),rgba(0,0,0,0) 100%);
  -webkit-backdrop-filter:blur(20px) saturate(1.8)!important;backdrop-filter:blur(20px) saturate(1.8)!important;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 26px),transparent)}
@media (prefers-reduced-transparency:reduce){html:not(.perf-low) .ui-nav__bg{background:linear-gradient(180deg,#000 calc(100% - 20px),rgba(0,0,0,0));-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
.ui-nav__t{position:absolute;left:50%;top:var(--ui-nav-top);height:var(--ui-nav-h);max-width:calc(100% - 200px);display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,6px);opacity:0;transition:transform .32s var(--ui-spring-soft),opacity .2s ease-out;
  font:600 17px/22px var(--ui-font);letter-spacing:-.01em;color:var(--ui-tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto;cursor:default}
.ui-nav__t>span{overflow:hidden;text-overflow:ellipsis}
.ui-nav.is-on .ui-nav__t{transform:translate(-50%,0);opacity:1}
html.ui-nav-wide .ui-nav__t{max-width:calc(100% - 40px)}

/* ── заголовки (iOS Dynamic Type) ─────────────────────────────────────
   apple-design §15: трекинг зависит от размера — крупные строки
   плотнее, основной текст без трекинга, мелкий — чуть свободнее. */
.ui-h1,.ui-lt{font:700 var(--ui-fs-lt)/41px var(--ui-font);letter-spacing:-.012em;color:var(--ui-tx)}
.ui-h2{font:700 var(--ui-fs-t2)/28px var(--ui-font);letter-spacing:-.01em;color:var(--ui-tx)}
.ui-h3{font:600 var(--ui-fs-t3)/25px var(--ui-font);letter-spacing:-.008em;color:var(--ui-tx)}
.ui-sub{font:400 var(--ui-fs-sub)/20px var(--ui-font);color:var(--ui-tx-2)}
.ui-cap{font:400 var(--ui-fs-fn)/18px var(--ui-font);color:var(--ui-tx-2)}
/* заголовок раздела в духе App Store: Title 2 жирный */
.ui-sec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0;padding:0 20px 10px;font:700 var(--ui-fs-t2)/28px var(--ui-font);letter-spacing:-.01em;color:var(--ui-tx)}
.ui-sec>a,.ui-sec>button{flex:none;border:0;background:none;padding:0;color:var(--ui-ac-tx);font:400 17px/22px var(--ui-font);cursor:pointer}

/* ── сгруппированный список (inset grouped) ───────────────────────────
   Как в Настройках iOS: ячейки на #1C1C1E, разделитель-волосок с отступом
   до текста, подсветка нажатой строки сразу на касании и плавное
   угасание после — без масштабирования. */
.ui-gh{margin:0 16px;padding:0 16px 7px;font:400 var(--ui-fs-fn)/18px var(--ui-font);letter-spacing:.01em;text-transform:uppercase;color:var(--ui-tx-2)}
.ui-gf{margin:0 16px;padding:7px 16px 0;font:400 var(--ui-fs-fn)/18px var(--ui-font);color:var(--ui-tx-2);text-wrap:pretty}
.ui-list{margin:0 16px;border-radius:var(--ui-r-cell);background:var(--ui-s1);overflow:hidden}
.ui-cell{--ui-sep:16px;position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:52px;margin:0;padding:8px 16px;border:0;background:transparent;
  color:var(--ui-tx);font:400 var(--ui-fs-body)/22px var(--ui-font);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color .4s ease-out}
.ui-cell:active{background:var(--ui-s3);transition:none}
.ui-cell::after{content:"";position:absolute;left:var(--ui-sep);right:0;bottom:0;height:1px;background:var(--ui-line);transform:scaleY(.5);transform-origin:0 100%;pointer-events:none}
.ui-cell:last-child::after{display:none}
.ui-cell:has(>.ui-sq){--ui-sep:58px}
.ui-cell:has(>.ui-th){--ui-sep:72px}
.ui-cell.is-static{cursor:default}
.ui-cell.is-static:active{background:transparent}
.ui-cell__t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.ui-cell__t>b{font:400 var(--ui-fs-body)/22px var(--ui-font);color:var(--ui-tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-cell__t>small,.ui-cell__t>span{font:400 var(--ui-fs-fn)/18px var(--ui-font);color:var(--ui-tx-2);text-wrap:pretty}
.ui-cell__v{flex:0 1 auto;min-width:0;max-width:55%;color:var(--ui-tx-2);font:400 var(--ui-fs-body)/22px var(--ui-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-chev{flex:none;width:17px;height:17px;margin-right:-5px;color:var(--ui-tx-4)}
.ui-cell.is-ac>.ui-cell__t>b,.ui-cell.is-ac{color:var(--ui-ac-tx)}
/* значок Настроек iOS: цветной скруглённый квадрат с белым символом */
.ui-sq{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:8px;background:var(--c,var(--ui-gray));color:#fff}
.ui-sq .ui-i{width:19px;height:19px}
/* миниатюра в строке (подарок, фон) */
.ui-th{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:10px;background:var(--ui-s2);overflow:hidden}

/* ── переключатель iOS (51×31, зелёный) ───────────────────────────────
   При нажатии бегунок вытягивается, как у UISwitch. */
.ui-sw,.sw{position:relative;flex:none;width:51px;height:31px;padding:0;border:0;border-radius:16px;background:var(--ui-fill-2);cursor:pointer;
  transition:background-color .25s ease-out;-webkit-tap-highlight-color:transparent}
.ui-sw::after,.sw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:14px;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);transition:transform .32s var(--ui-spring-soft),width .2s var(--ui-spring-soft)}
.ui-sw:active::after,.sw:active::after{width:33px}
.ui-sw[aria-checked="true"],.sw[aria-checked="true"]{background:var(--ui-green)}
.ui-sw[aria-checked="true"]::after,.sw[aria-checked="true"]::after{transform:translateX(20px)}
.ui-sw[aria-checked="true"]:active::after,.sw[aria-checked="true"]:active::after{transform:translateX(14px)}

/* ── сегментированный контрол iOS 26 ──────────────────────────────────
   Капсула-дорожка и «бегунок» (::before), который едет к выбранному
   сегменту. Странице достаточно поставить --n (сколько сегментов) и
   --i (номер выбранного) на .ui-seg. */
.ui-seg{--n:2;--i:0;position:relative;isolation:isolate;display:flex;padding:2px;border-radius:var(--ui-pill);background:var(--ui-fill)}
.ui-seg::before{content:"";position:absolute;z-index:0;top:2px;bottom:2px;left:2px;width:calc((100% - 4px) / var(--n));border-radius:var(--ui-pill);
  background:#636366;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);
  transform:translateX(calc(100% * var(--i)));transition:transform .34s var(--ui-spring-soft)}
.ui-seg>button{position:relative;z-index:1;flex:1 1 0;min-width:0;height:32px;margin:0;padding:0 10px;border:0;border-radius:var(--ui-pill);background:none;
  color:var(--ui-tx);font:500 14px/1 var(--ui-font);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;transition:opacity var(--ui-press) ease-out}
.ui-seg>button:active{opacity:.6}
.ui-seg>button.on,.ui-seg>button[aria-selected="true"]{font-weight:600}

/* ── кнопки ───────────────────────────────────────────────────────────
   Капсулы iOS 26: основная — заливка акцентом, вторая — серая заливка
   с текстом акцентного цвета. Отклик: scale(.97) на касании, 100 мс. */
.ui-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:50px;padding:0 20px;border:0;border-radius:var(--ui-pill);
  background:var(--ui-ac);color:#fff;font:600 var(--ui-fs-body)/22px var(--ui-font);letter-spacing:-.01em;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform var(--ui-press) ease-out,opacity var(--ui-press) ease-out,background-color .2s ease-out}
.ui-btn:active{transform:scale(.97);opacity:.82}
.ui-btn.is-2{background:var(--ui-fill);color:var(--ui-ac-tx)}
.ui-btn.is-2:active{background:var(--ui-fill-3)}
.ui-btn.is-tint{background:var(--ui-ac-tint);color:var(--ui-ac-tx)}
.ui-btn.is-sm{width:auto;height:34px;padding:0 14px;font-size:15px}
.ui-btn:disabled{opacity:1;background:var(--ui-fill);color:var(--ui-tx-4);pointer-events:none}
.ui-btn .ui-i{width:20px;height:20px}
/* круглая кнопка панели (iOS 26: стеклянный круг 44px) */
.ui-circle{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--ui-fill);
  color:var(--ui-tx);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--ui-press) ease-out,background-color .15s ease-out}
.ui-circle:active{transform:scale(.92);background:var(--ui-fill-3)}
.ui-circle svg{width:22px;height:22px}
.ui-circle.is-fill{background:var(--ui-fill)}
.ui-circle.is-sm{width:30px;height:30px}
.ui-circle.is-sm svg{width:15px;height:15px}
.ui-pill{display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;padding:0 12px;border:0;border-radius:var(--ui-pill);
  background:var(--ui-fill);color:var(--ui-tx);font:600 var(--ui-fs-sub)/1 var(--ui-font);white-space:nowrap;font-variant-numeric:tabular-nums}
.ui-pill.is-fill{background:var(--ui-fill)}
.ui-pill.is-ac{background:var(--ui-fill);color:var(--ui-ac-tx)}
/* «Открыть» как в App Store: серая капсула, жирный текст акцентного цвета */
.ui-get{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:74px;height:30px;padding:0 14px;border:0;border-radius:var(--ui-pill);
  background:var(--ui-fill);color:var(--ui-ac-tx);font:700 15px/1 var(--ui-font);letter-spacing:-.005em;text-transform:none;cursor:pointer;
  transition:transform var(--ui-press) ease-out,background-color .15s}
.ui-get:active{transform:scale(.94);background:var(--ui-fill-3)}

/* ── поле поиска (iOS 26: капсула) ───────────────────────────────────── */
.ui-search{position:relative;flex:1;min-width:0}
.ui-search>svg{position:absolute;left:13px;top:50%;width:19px;height:19px;transform:translateY(-50%);color:var(--ui-tx-2);pointer-events:none}
.ui-search>input{width:100%;height:44px;padding:0 16px 0 40px;border:0;border-radius:var(--ui-pill);background:var(--ui-fill);color:var(--ui-tx);
  font:400 17px var(--ui-font)!important;outline:none;-webkit-appearance:none;appearance:none;transition:box-shadow .16s}
.ui-search>input:focus{box-shadow:inset 0 0 0 1.5px var(--ui-ac-line)}

/* ── карточки подарков (сетка) ───────────────────────────────────────── */
.ui-ggrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (min-width:600px){.ui-ggrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}}
.ui-gcard{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;padding:12px 8px 10px;border-radius:18px;
  background:var(--ui-s1);overflow:hidden;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform var(--ui-press) ease-out,background-color .15s}
.ui-gcard:active{transform:scale(.97)}
.ui-gcard__img{display:block;width:74%;aspect-ratio:1;object-fit:contain}
.ui-gcard__nm{max-width:100%;margin-top:8px;font:600 14px/18px var(--ui-font);letter-spacing:-.005em;color:var(--ui-tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-gcard__sub{max-width:100%;margin-top:1px;font:400 12px/16px var(--ui-font);color:var(--ui-tx-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-gcard .ui-pill{margin-top:8px}
.ui-corner{position:absolute;top:9px;right:10px;font:500 12px/1 var(--ui-font);color:var(--ui-tx-2);font-variant-numeric:tabular-nums}
.ui-ribbon{position:absolute;top:8px;right:8px;pointer-events:none}
.ui-ribbon>b{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--ui-pill);background:rgba(0,0,0,.5);color:#fff;
  font:600 11px/1 var(--ui-font);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.ui-ribbon.is-down>b{background:var(--ui-down)}
.ui-ribbon.is-up>b{background:#248A3D}

/* ═══ иконки и общие детали ═════════════════════════════════════════════ */
:root{
  --i-send-f:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M32.8 52.6q2.5-.2 3.7-3.8L52 8.8q.7-1.6.7-2.9-.1-2.4-2.5-2.5-1.2 0-2.9.7L7 19.6c-2 .7-3.5 1.9-3.5 3.6 0 2.2 1.7 2.9 4 3.6L20 30.6c1.5.5 2.3.4 3.3-.5L49 6.1q.6-.4 1 0 .3.3 0 .8L26 32.7c-1 1-1 1.8-.5 3.4l3.7 12.3c.7 2.4 1.4 4.2 3.6 4.2'/%3E%3C/svg%3E");
  --i-arrow-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M49.8 28q0-.9-.7-1.6L33.5 11q-.7-.7-1.6-.7a2 2 0 0 0-2 2q0 1 .6 1.5l5.2 5.4 8 7.2-5.8-.4H8.3a2 2 0 0 0-2 2.1q.1 1.9 2 2h29.6l5.7-.3-7.9 7.2-5.2 5.4a2 2 0 0 0-.6 1.5q.2 1.8 2 2 .9 0 1.6-.7L49 29.6q.6-.7.7-1.6'/%3E%3C/svg%3E");
  --i-caret-r:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M18.7 48.4q.9 0 1.5-.7l18.6-18.1q.7-.7.7-1.6a2 2 0 0 0-.7-1.6L20.2 8.3a2 2 0 0 0-1.5-.7c-1.2 0-2.2 1-2.2 2.2q0 .9.7 1.5l17 16.7-17 16.7q-.6.7-.7 1.5.2 2 2.2 2.2'/%3E%3C/svg%3E");
  --i-caret-d:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M28 39.5q1 0 1.6-.7l18.1-18.6q.6-.7.7-1.5-.2-2-2.2-2.2-.9 0-1.5.6L28 34.2l-16.7-17q-.7-.6-1.5-.7c-1.2 0-2.2 1-2.2 2.2q0 .9.7 1.5l18.1 18.6q.7.7 1.6.7'/%3E%3C/svg%3E");
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M23 48q1.6 0 2.4-1.3l22.2-34.9q.6-1 .6-1.7-.1-2-2.2-2.1-1.2 0-2 1.2L23 42.7 12 28.4q-.6-1.1-2-1.1-2 .1-2.2 2.2 0 .8.7 1.7l12.1 15.5q1.1 1.3 2.5 1.3'/%3E%3C/svg%3E");
  --i-download:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M28 37.9q.7 0 1.4-.6l7.9-7.7q.5-.4.5-1.2-.1-1.6-1.7-1.7-.7 0-1.2.6l-3.6 3.8-1.6 1.6.2-3.5V4.5q-.2-1.6-1.9-1.8-1.7.1-1.9 1.8v24.7l.2 3.5-1.6-1.6-3.6-3.8q-.5-.6-1.2-.6-1.6.1-1.7 1.7 0 .7.5 1.2l8 7.7q.6.6 1.3.6M14.6 53.3h26.8q7.5 0 7.4-7.3V21.8q0-7.2-7.4-7.2h-6.7v3.7h6.7q3.5 0 3.6 3.7v23.8q0 3.7-3.6 3.7H14.6q-3.5 0-3.6-3.7V22q0-3.6 3.6-3.7h6.7v-3.7h-6.7q-7.4 0-7.4 7.2V46q0 7.3 7.4 7.3'/%3E%3C/svg%3E");
  --i-chev-ud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M28 7.3q-.7 0-1.6.6L10.6 20.8a2 2 0 0 0-.6 1.5 2 2 0 0 0 2.1 2.1q.7 0 1.6-.6L28 12.2l14.3 11.6q.8.6 1.6.6a2 2 0 0 0 2.1-2.1 2 2 0 0 0-.6-1.5L29.6 7.9q-.8-.6-1.6-.6m0 41.4q.7 0 1.6-.6l15.8-12.9q.6-.4.6-1.5-.1-2-2.1-2.2-.7 0-1.6.7L28 43.8 13.7 32.2q-.8-.7-1.6-.7-2 .2-2.1 2.2 0 1 .6 1.5l15.8 12.9q.8.6 1.6.6'/%3E%3C/svg%3E");
  --i-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M24 41.8a18 18 0 0 0 10.4-3.4l11.1 11.1q.9.8 2 .8c1.5 0 2.6-1.2 2.6-2.7q0-1.1-.8-1.9l-11-11A18 18 0 0 0 24 5.7a18 18 0 0 0 0 36m0-4c-7.8 0-14.2-6.3-14.2-14S16.2 9.5 24 9.5 38 16 38 23.7C38 31.5 31.8 38 24 38'/%3E%3C/svg%3E");
  --i-x-c:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M28 52a24 24 0 0 0 24-24C52 15 41 4 28 4A24 24 0 0 0 4 28a24 24 0 0 0 24 24m-8.4-13.6a2 2 0 0 1-2-2q0-.8.6-1.3l7-7-7-7.1q-.6-.5-.6-1.4c0-1 .9-2 2-2q.8 0 1.3.7l7 7 7.2-7q.6-.7 1.3-.7a2 2 0 0 1 2 2q0 .8-.6 1.4l-7 7 7 7q.5.6.6 1.4a2 2 0 0 1-2 2 2 2 0 0 1-1.4-.6l-7-7-7 7a2 2 0 0 1-1.4.6'/%3E%3C/svg%3E");
  --i-copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M11.5 56H33q6.8 0 6.7-7v-4H44q6.8 0 6.8-7V19.7c0-2.7-.5-4.4-2.1-6L37.4 2.1A8 8 0 0 0 31.6 0h-9q-6.8 0-6.8 7v4h-4.3q-6.8 0-6.8 7v31q0 7 6.8 7m28.1-24.7c0-2.8-.3-4-2-5.8L25.3 13c-1.7-1.7-3-2.1-5.6-2.1h-.4V7q0-3.4 3.4-3.5H32v11.6q0 3.7 3.8 3.7h11.3V38q0 3.4-3.5 3.5h-4Zm-3.2-15.7q-1.1 0-1-1V4.2l11.1 11.3ZM11.7 52.5q-3.5-.1-3.5-3.5V18q0-3.4 3.5-3.5h7.7v12.8q0 4.2 4 4.2h12.7V49q0 3.4-3.5 3.5ZM23.9 28q-1.3 0-1.2-1.2V15.2l12.7 13Z'/%3E%3C/svg%3E");
  --i-share:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M28 36.1q1.7-.1 1.9-1.8V10.2l-.2-3.5 1.6 1.7L35 12q.5.6 1.2.6 1.6-.1 1.7-1.6 0-.8-.5-1.3l-8-7.6q-.6-.7-1.3-.6t-1.3.6l-8 7.6q-.5.6-.5 1.3.1 1.5 1.7 1.6.8 0 1.2-.6l3.6-3.7 1.6-1.7-.2 3.5v24q.2 1.7 2 1.9M14.6 54.4h26.8q7.5 0 7.4-7.2V24q0-7.3-7.4-7.3H35v3.8h6.5q3.5 0 3.6 3.7V47q0 3.6-3.6 3.7H14.6q-3.5 0-3.6-3.7V24.3q0-3.7 3.6-3.7h6.5v-3.8h-6.5q-7.4 0-7.4 7.3v23q0 7.4 7.4 7.3'/%3E%3C/svg%3E");}
/* иконка из спрайта: <svg class="ui-i"><use href="#i-gift"/></svg>
   Набор в духе SF Symbols (Framework7 Icons, MIT) — сетка 56×56. */
.ui-i{display:inline-block;flex:none;width:1em;height:1em;fill:currentColor;vertical-align:-.14em;overflow:visible;pointer-events:none}
/* иконка-маска для ::before/::after, когда текст кнопки меняет логика */
.ui-mi{display:inline-block;flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}

/* круглая кнопка «назад» / действия (iOS 26: стеклянный круг) */
.ui-back,.ui-ib{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:var(--ui-fill);color:var(--ui-tx);font-size:20px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform var(--ui-press) ease-out,background-color .15s ease-out}
.ui-back:active,.ui-ib:active{transform:scale(.92);background:var(--ui-fill-3)}
.ui-back .ui-i,.ui-ib .ui-i{width:21px;height:21px}
.ui-back .ui-i{margin-left:-2px}
.ui-ib.is-line{background:var(--ui-fill)}

/* фильтр-капсула (iOS 26: Фото, Музыка): серая заливка, выбранная — светлая */
.ui-chip{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;height:36px;padding:0 15px;border:0;border-radius:var(--ui-pill);
  background:var(--ui-fill);color:var(--ui-tx);font:500 15px/1 var(--ui-font);letter-spacing:-.005em;white-space:nowrap;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--ui-press) ease-out,background-color .15s,color .15s}
.ui-chip .ui-i{width:17px;height:17px}
.ui-chip:active{transform:scale(.95)}
.ui-chip.is-on{background:var(--ui-tx);color:#000;font-weight:600}
.ui-chip.is-fill{background:var(--ui-fill)}
.ui-chip.is-ac{background:var(--ui-ac);color:#fff}
/* всплывающий выбор «Коллекция ⌃⌄» (UIButton pop-up) */
.ui-drop{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 12px 0 15px;border:0;border-radius:var(--ui-pill);background:var(--ui-fill);
  color:var(--ui-tx);font:500 15px/1 var(--ui-font);white-space:nowrap;cursor:pointer}
.ui-drop::after{content:"";width:14px;height:14px;background:var(--ui-tx-2);-webkit-mask:var(--i-chev-ud) center/contain no-repeat;mask:var(--i-chev-ud) center/contain no-repeat}
/* тонированная капсула акцента */
.ui-tint{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:0;border-radius:var(--ui-pill);
  background:var(--ui-ac-tint);color:var(--ui-ac-tx);font:600 15px/1 var(--ui-font);white-space:nowrap;cursor:pointer}
.ui-tint .ui-i{width:17px;height:17px}
/* плашки в углах карточек */
.ui-badge{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:4px;height:22px;min-width:22px;padding:0 7px;border-radius:var(--ui-pill);
  background:rgba(0,0,0,.5);color:#fff;font:600 11px/1 var(--ui-font);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.ui-badge .ui-i{width:13px;height:13px}
.ui-badge.is-tl{top:8px;left:8px}.ui-badge.is-tr{top:8px;right:8px}.ui-badge.is-bl{bottom:8px;left:8px}.ui-badge.is-br{bottom:8px;right:8px}
.ui-badge.is-ico{padding:0;width:26px;height:26px;justify-content:center}
.ui-badge.is-ok{background:rgba(48,209,88,.2);color:var(--ui-green)}
.ui-badge.is-ac{background:var(--ui-ac);color:#fff}
/* иконка в строке списка: без цветной подложки (taste: не прятать иконки в
   тонированные квадраты) — серый символ на сером, как миниатюра */
.ui-tile{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:var(--ui-s2);color:var(--ui-tx-2);font-size:20px}
.ui-tile .ui-i{width:21px;height:21px}
.ui-tile.is-gray{background:var(--ui-s2);color:var(--ui-tx-2)}
/* статус-экран: крупный символ без подложки (как пустые состояния iOS) */
.ui-stat{display:grid;place-items:center;width:72px;height:72px;margin:0 auto;border-radius:50%;background:transparent;color:var(--ui-tx-3);font-size:56px}
.ui-stat .ui-i{width:56px;height:56px}
.ui-stat.is-ok{color:var(--ui-green)}
.ui-stat.is-err{color:var(--ui-red)}
.ui-stat.is-warn{color:var(--ui-orange)}
.ui-stat.is-ac{color:var(--ui-ac)}

/* ── шторка iOS (общие правила для .ui-sheet) ────────────────────────── */
.ui-sheet-h{position:relative;display:flex;align-items:center;justify-content:center;min-height:56px;padding:6px 64px}
.ui-sheet-h>h2,.ui-sheet-h>h3{margin:0;font:600 17px/22px var(--ui-font);letter-spacing:-.01em;color:var(--ui-tx);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-sheet-h>.ui-circle,.ui-sheet-h>[data-close]{position:absolute;top:50%;right:12px;transform:translateY(-50%)}
.ui-sheet-h>.ui-circle:active,.ui-sheet-h>[data-close]:active{transform:translateY(-50%) scale(.92)}

/* ── hover только для мыши (mobile-native §1) ────────────────────────── */
@media (hover:hover) and (pointer:fine){
  .ui-cell:hover{background:rgba(255,255,255,.04)}
  .ui-btn:hover{filter:brightness(1.08)}
  .ui-circle:hover,.ui-back:hover,.ui-ib:hover,.ui-chip:not(.is-on):hover,.ui-get:hover{background:var(--ui-fill-2)}
  .ui-gcard:hover{background:#242426}
}