/* «Лови тренд» — дизайн-система v1 (v0.34.0). Подключается ПОСЛЕДНЕЙ в приложении, на сайте и в админке.
   Направление (владелец, 06.11.2026): светлый «дорогой» (вариант C) + тёмный просмотр видео как сторис (вариант B).
   Правила: тёплая светлая основа, белые карточки с мягкими многослойными тенями вместо рамок, один шрифт Onest,
   градиент — только акцент (главная кнопка, баланс), мелкий цветной текст — тёмный маджента (контраст ≥ 4.5:1).
   Описание и токены — DESIGN.md в корне проекта. */
@font-face{font-family:Onest;font-weight:400;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;src:url('/brand/onest-cyr-400.woff2') format('woff2')}
@font-face{font-family:Onest;font-weight:600;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;src:url('/brand/onest-cyr-600.woff2') format('woff2')}
@font-face{font-family:Onest;font-weight:700;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;src:url('/brand/onest-cyr-700.woff2') format('woff2')}
@font-face{font-family:Onest;font-weight:800;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;src:url('/brand/onest-cyr-800.woff2') format('woff2')}
@font-face{font-family:Onest;font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20BD,U+2122,U+2190-21FF;src:url('/brand/onest-lat-400.woff2') format('woff2')}
@font-face{font-family:Onest;font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20BD,U+2122,U+2190-21FF;src:url('/brand/onest-lat-600.woff2') format('woff2')}
@font-face{font-family:Onest;font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20BD,U+2122,U+2190-21FF;src:url('/brand/onest-lat-700.woff2') format('woff2')}
@font-face{font-family:Onest;font-weight:800;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20BD,U+2122,U+2190-21FF;src:url('/brand/onest-lat-800.woff2') format('woff2')}

:root{
  --ds-bg:#FAF7F9; --ds-card:#FFFFFF; --ds-ink:#17131C; --ds-ink2:#3B3442; --ds-muted:#6B6372; --ds-line:#ECE5EE;
  --ds-soft:#F5EEF4; --ds-accent:#C2185B; --ds-accent-soft:#FBEAF2; --ds-ok:#12804A; --ds-bad:#B42318;
  --ds-grad:linear-gradient(120deg,#E4570D 0%,#EE3B3B 32%,#C41BCB 68%,#6B19FB 100%);
  --ds-sh1:0 1px 2px rgba(40,22,48,.05),0 6px 18px -10px rgba(40,22,48,.18);
  --ds-sh2:0 2px 4px rgba(40,22,48,.05),0 14px 34px -16px rgba(40,22,48,.30);
  --ds-sh-cta:0 14px 28px -14px rgba(196,27,203,.75);
  --ds-r:20px; --ds-r-sm:14px;
  /* старые имена переменных страниц — на новые значения */
  --ink:var(--ds-ink); --muted:var(--ds-muted); --line:var(--ds-line); --soft:var(--ds-soft); --bg:var(--ds-bg);
  --primary:var(--ds-accent); --grad:var(--ds-grad);
}
html{background:var(--ds-bg)}
body{background:var(--ds-bg)!important;color:var(--ds-ink);font-family:Onest,-apple-system,"Segoe UI",Roboto,sans-serif!important;font-feature-settings:"ss01" 0;letter-spacing:-.003em}
::selection{background:var(--ds-accent);color:#fff}
input,select,textarea,button{font-family:inherit}
h1,h2,h3{letter-spacing:-.022em;text-wrap:balance}
h1{font-weight:800}
h2,h3{font-weight:800}

/* Шапка: полупрозрачная, со стеклом, без жёсткой линии */
header{background:rgba(250,247,249,.86)!important;-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid rgba(236,229,238,.8)!important}
.pill{background:var(--ds-card)!important;box-shadow:var(--ds-sh1);color:var(--ds-ink)}

/* Кнопки: главная — градиент с мягкой тенью; вторичная — белая карточка */
.btn{border-radius:16px;min-height:48px;font-weight:800;letter-spacing:-.005em;background:var(--ds-grad);box-shadow:var(--ds-sh-cta);transition:transform .12s ease,box-shadow .12s ease,opacity .12s}
.btn:active{transform:scale(.98)}
.btn2,.btn.btn2{background:var(--ds-card)!important;color:var(--ds-ink)!important;border:0!important;box-shadow:var(--ds-sh1)!important}
.btn:disabled{opacity:.45;box-shadow:none}
.btn.danger,.btn2.danger{color:var(--ds-bad)!important}

/* Поля ввода: 16 px (iOS не приближает), 48 px, мягкая рамка, фокус — кольцом цвета акцента */
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{font-size:16px!important;border:1px solid #E3DAE6!important;border-radius:var(--ds-r-sm)!important;background:#fff!important;color:var(--ds-ink)}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select{min-height:48px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ds-accent)!important;box-shadow:0 0 0 4px rgba(194,24,91,.14)}
input[type=checkbox]{accent-color:var(--ds-accent)}

/* Карточки: белые, тени вместо рамок */
.card,.icard,.trow,.box,.rcard,.chapter,.grp,.stat,.wallet,.pack,.item,.menu,.tile,.kpi{background:var(--ds-card);border-color:transparent!important;box-shadow:var(--ds-sh1)}
.card{border-radius:22px}
.card:hover,.trow:hover,.icard:hover{box-shadow:var(--ds-sh2)}

/* Чипы и бейджи: спокойные, градиент — только у выбранного */
.chip{background:var(--ds-card)!important;border-color:transparent!important;box-shadow:var(--ds-sh1);font-weight:700}
.chip[aria-pressed=true]{background:var(--ds-ink)!important;color:#fff!important;box-shadow:none}
.badge{font-weight:700}

/* Мелкий цветной текст — тёмный маджента (контраст ≥ 4.5:1 на белом) */
.link,.copy,a.more,.accent{color:var(--ds-accent)}

/* Тосты */
#toast{border-radius:16px!important;box-shadow:var(--ds-sh2)!important;font-weight:700}

/* Ссылки-изображения и медиа — скругления */
video,img{-webkit-user-drag:none}


/* v0.34.13 (владелец: «цвет кнопок — отвратительно и не читается»):
   выбранное — тёмное, а не градиент (на градиенте серые подписи пропадали); неактивная главная кнопка — читаемая, без полупрозрачности */
.btn:disabled{opacity:1!important;background:#EFE8EF!important;color:#5F5767!important;box-shadow:none!important}
.quality button{border:0!important;box-shadow:var(--ds-sh1)}
.quality button[aria-checked=true]{background:var(--ds-ink)!important;color:#fff!important;box-shadow:0 8px 20px -10px rgba(23,19,28,.55)!important}
.quality button[aria-checked=true] small{color:#fff!important}.quality button[aria-checked=true] .qh,.quality button[aria-checked=true] .rec{color:rgba(255,255,255,.88)!important;opacity:1!important}
nav.tabs button[data-tab][aria-current="page"]{background:var(--ds-ink)!important;color:#fff!important;box-shadow:none!important}
.sc-nums b{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:var(--ds-ink)!important}

/* ===== v0.35.0 Движение (владелец: «нужна плавность — нажатия, переключения, перелистывание») =====
   Правила (Impeccable animate + ui-ux-pro-max): движение объясняет нажатие, смену состояния и переход; 100–150 мс — отклик,
   150–300 мс — смена состояния, 300–450 мс — окна и экраны; уход быстрее появления; без пружин и подпрыгиваний.
   Анимируем только transform и opacity. В режиме «Уменьшить движение» сдвиги убираются, смена цвета и прозрачности остаётся. */
:root{--ds-ease:cubic-bezier(.16,1,.3,1);--ds-ease-in:cubic-bezier(.4,0,1,1);--ds-t-fast:120ms;--ds-t:220ms;--ds-t-slow:340ms}
html{-webkit-tap-highlight-color:transparent}
a,button,[role=button],[role=tab],[role=switch],label,summary,input,select,textarea{touch-action:manipulation}
/* 1. Отклик на нажатие: всё нажимаемое чуть утапливается */
.ds-press,button,.btn,.btn2,a.btn,.chip,.pill,[role=button]{transition:transform var(--ds-t-fast) var(--ds-ease),background-color var(--ds-t) var(--ds-ease),color var(--ds-t) var(--ds-ease),box-shadow var(--ds-t) var(--ds-ease),opacity var(--ds-t) var(--ds-ease),border-color var(--ds-t) var(--ds-ease)}
button:not(:disabled):active,.btn:not(:disabled):active,a.btn:active,.chip:active,.pill:active,[role=button]:active,.ds-press:active{transform:scale(.96)}
.card:active,.ds-press-soft:active{transform:scale(.985)}
.card,.ds-press-soft{transition:transform var(--ds-t-fast) var(--ds-ease),box-shadow var(--ds-t) var(--ds-ease)}
/* 2. Появление экрана / раздела */
@keyframes ds-in{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes ds-fade{from{opacity:0}to{opacity:1}}
@keyframes ds-out{to{opacity:0}}
.ds-enter{animation:ds-in var(--ds-t-slow) var(--ds-ease) both}
.ds-fade{animation:ds-fade var(--ds-t) var(--ds-ease) both}
/* Переход между экранами через View Transitions (где браузер умеет): старый экран тает, новый выплывает */
::view-transition-old(root){animation:ds-out 160ms var(--ds-ease-in) both}
::view-transition-new(root){animation:ds-in 280ms var(--ds-ease) both}
/* 3. Заготовки, пока грузится (вместо пустоты) */
@keyframes ds-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.ds-sk{background:linear-gradient(90deg,#F1EAF0 25%,#F9F5F8 50%,#F1EAF0 75%);background-size:200% 100%;animation:ds-shimmer 1.3s linear infinite;border-radius:14px;color:transparent!important}
/* 4. Окна снизу: выезжают за 340 мс, уходят за 200 мс */
@keyframes ds-sheet-in{from{transform:translate3d(0,100%,0)}to{transform:none}}
@keyframes ds-sheet-out{to{transform:translate3d(0,100%,0)}}
@keyframes ds-dim-in{from{opacity:0}to{opacity:1}}
/* 6. Видео: проявляется, когда готово к показу */
video.ds-v{opacity:0;transition:opacity var(--ds-t-slow) var(--ds-ease)}video.ds-v.is-ready{opacity:1}
/* 5. Листание вбок: с примагничиванием и без «резинки» всей страницы */
.ds-hscroll{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-behavior:smooth}.ds-hscroll::-webkit-scrollbar{display:none}.ds-hscroll>*{scroll-snap-align:start}
/* 8. Уменьшить движение: без сдвигов и масштабов, мгновенная смена; цвет и прозрачность остаются */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  button:active,.btn:active,.chip:active,.pill:active,.card:active,[role=button]:active,.ds-press:active,.ds-press-soft:active{transform:none!important}
  .ds-enter{animation-name:ds-fade!important}
  .ds-sk{animation:none!important}
}