/* «О!Нашел» — витрина. Три темы: Поток (светлая), Ночь (тёмная),
   Бархат (сумеречная фиолетово-серая — гибрид). У каждой темы свой набор
   токенов и СВОЯ спокойная анимация фона: поток течёт вбок, ночь дышит,
   бархат медленно переливается по диагонали. Скругления — 8, пилюли остались
   только там, где они работают: вкладки, чипы, переключатель. */

@font-face{font-family:"Unbounded";font-weight:400;font-style:normal;src:url("fonts/Unbounded-Regular.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Unbounded";font-weight:500;font-style:normal;src:url("fonts/Unbounded-Medium.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Unbounded";font-weight:700;font-style:normal;src:url("fonts/Unbounded-Bold.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Unbounded";font-weight:800;font-style:normal;src:url("fonts/Unbounded-ExtraBold.woff2") format("woff2");font-display:swap}

:root{
  /* ---------- ПОТОК: светлая база, синий акцент ---------- */
  --page:#F4F6FB;
  --surf:#FFFFFF;
  --surf-2:#EDF1F9;
  --ink:#0E1220;
  --ink-2:#56607A;
  --ink-3:#5E6884;
  --line:#E3E8F3;
  --line-2:#CFD7E8;

  --acc:#2F69FF; --acc-deep:#1E4CD6; --acc-soft:#E7EFFF; --on-acc:#FFFFFF;
  --ok:#0B7A4C; --ok-soft:#E3F6EC;
  --bad:#C0364C; --bad-soft:#FCECEF;
  --warn-soft:#FFF3E2; --warn-line:#F0D3AC;
  --knob:#FFFFFF;

  /* фон: три мягких пятна. Центр пятна = сам цвет токена, поэтому контраст
     текста, лежащего на фоне, считается против этих же значений */
  --bg-a:#DDE8FF; --bg-b:#E3F1FA; --bg-c:#EAE4FF;
  --bg-op:.8; --bg-dur:44s; --bg-motion:bg-drift;
  --band-c:#CFE0FF; --band-op:.55; --band-dur:68s;
  --topbar-glass:rgba(244,246,251,.72);

  /* образцы тем в переключателе: они показывают ЧУЖУЮ тему, поэтому цвета
     постоянные и из текущей темы не берутся */
  --sw-flow:#F4F6FB; --sw-flow-acc:#2F69FF;
  --sw-night:#0B0E14; --sw-night-acc:#5B8BFF;
  --sw-velvet:#2B2733; --sw-velvet-acc:#A98BF7;

  --r-card:8px; --r-tile:8px; --r-ctl:8px; --r-pill:999px;
  --sh-card:0 1px 2px rgba(15,18,32,.05), 0 10px 26px rgba(15,18,32,.07);
  --sh-float:0 8px 28px rgba(15,18,32,.12), 0 1px 3px rgba(15,18,32,.07);

  --ff:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ff-brand:"Unbounded",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  /* микро-размер держим 12px: ниже подписи полок и полей человек читает
     уже не слова, а узор */
  --fs-micro:12px; --fs-cap:12px; --fs-sm:13px; --fs-base:15px;
  --fs-md:17px; --fs-lg:22px; --fs-xl:28px; --fs-hero:32px;

  --pad:16px; --gap:10px; --tabbar-h:66px;
  --t-1:.12s; --t-2:.22s; --ease:cubic-bezier(.2,.7,.2,1);

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

/* ---------- пастельные пары полок: фон + знак ---------- */
.tint-0{--tint-bg:#E8F5EC;--tint-ink:#1B7549}
.tint-1{--tint-bg:#E9F0FF;--tint-ink:#1E4CD6}
.tint-2{--tint-bg:#F0ECFF;--tint-ink:#6A4AD8}
.tint-3{--tint-bg:#FDECEC;--tint-ink:#C0364C}
.tint-4{--tint-bg:#FFF3E2;--tint-ink:#96620B}
.tint-5{--tint-bg:#E7F4F8;--tint-ink:#1F6F86}

/* ---------- НОЧЬ: тёмная сине-графитовая ---------- */
:root[data-theme="night"]{
  --page:#0B0E14; --surf:#161B25; --surf-2:#1E2431;
  --ink:#F2F4FA; --ink-2:#A6AEC2; --ink-3:#828CA2;
  --line:#232838; --line-2:#2E3547;
  --acc:#5B8BFF; --acc-deep:#8FB4FF; --acc-soft:#1E2740; --on-acc:#0B1020;
  --ok:#3DDC97; --ok-soft:#14332A; --bad:#FF7A8A; --bad-soft:#3A1E25;
  --warn-soft:#2B2216; --warn-line:#5A4326;
  --knob:#E9EDF6;
  --bg-a:#16203A; --bg-b:#101C2C; --bg-c:#1A2440;
  --bg-op:.85; --bg-dur:60s; --bg-motion:bg-breathe;
  --band-c:#24406B; --band-op:.22; --band-dur:96s;
  --topbar-glass:rgba(11,14,20,.72);
  --sh-card:0 2px 6px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.5);
  --sh-float:0 8px 28px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.45);
}
:root[data-theme="night"] .tint-0{--tint-bg:#163024;--tint-ink:#6FE0A8}
:root[data-theme="night"] .tint-1{--tint-bg:#16233F;--tint-ink:#8FB4FF}
:root[data-theme="night"] .tint-2{--tint-bg:#241B44;--tint-ink:#B79BFF}
:root[data-theme="night"] .tint-3{--tint-bg:#3A1B22;--tint-ink:#FF97A4}
:root[data-theme="night"] .tint-4{--tint-bg:#38290F;--tint-ink:#F3C672}
:root[data-theme="night"] .tint-5{--tint-bg:#10303A;--tint-ink:#7FD6EA}

/* ---------- БАРХАТ: сумерки — не светлая и не чёрная. Фиолетово-серая
   база, приподнятые поверхности светлее, акцент — светлый фиолет с тёмным
   текстом внутри (белый на таком акценте не читается) ---------- */
:root[data-theme="velvet"]{
  --page:#2B2733; --surf:#383341; --surf-2:#433D4F;
  --ink:#F5F2FA; --ink-2:#C9C2D5; --ink-3:#B0A8BE;
  --line:#4A4458; --line-2:#5C556C;
  --acc:#A98BF7; --acc-deep:#D6C4FF; --acc-soft:#4A3E68; --on-acc:#1A1426;
  --ok:#6FE0AC; --ok-soft:#2F4A3E; --bad:#FF97A4; --bad-soft:#4A2A33;
  --warn-soft:#4A3B26; --warn-line:#6B5535;
  --knob:#F5F2FA;
  --bg-a:#463760; --bg-b:#39324C; --bg-c:#493A57;
  --bg-op:.8; --bg-dur:52s; --bg-motion:bg-sheen;
  --band-c:#5F4C8C; --band-op:.22; --band-dur:110s;
  --topbar-glass:rgba(43,39,51,.72);
  --sh-card:0 2px 6px rgba(10,6,20,.28),0 14px 34px rgba(10,6,20,.34);
  --sh-float:0 8px 28px rgba(10,6,20,.42),0 1px 3px rgba(10,6,20,.3);
}
:root[data-theme="velvet"] .tint-0{--tint-bg:#2F4A3E;--tint-ink:#8FEFC0}
:root[data-theme="velvet"] .tint-1{--tint-bg:#3A3A5C;--tint-ink:#B9C8FF}
:root[data-theme="velvet"] .tint-2{--tint-bg:#4A3A6B;--tint-ink:#E2CCFF}
:root[data-theme="velvet"] .tint-3{--tint-bg:#4A2A33;--tint-ink:#FFB9C2}
:root[data-theme="velvet"] .tint-4{--tint-bg:#4A3B26;--tint-ink:#FFD79A}
:root[data-theme="velvet"] .tint-5{--tint-bg:#2C4350;--tint-ink:#A6E4F5}

/* ---------- живой фон: три пятна, каждое со своим ходом ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bg i{position:absolute;display:block;width:72vmax;height:72vmax;border-radius:50%;
  opacity:var(--bg-op);will-change:transform}
.bg-1{left:-18vmax;top:-26vmax;
  background:radial-gradient(circle at 50% 50%,var(--bg-a) 0%,rgba(0,0,0,0) 62%)}
.bg-2{right:-22vmax;top:18vmax;
  background:radial-gradient(circle at 50% 50%,var(--bg-b) 0%,rgba(0,0,0,0) 64%)}
.bg-3{left:6vmax;bottom:-34vmax;
  background:radial-gradient(circle at 50% 50%,var(--bg-c) 0%,rgba(0,0,0,0) 60%)}

/* Поток: течение вбок. Ночь: медленное дыхание. Бархат: диагональный перелив. */
@keyframes bg-drift{
  from{transform:translate3d(0,0,0)}
  50%{transform:translate3d(9vmax,3vmax,0) scale(1.06)}
  to{transform:translate3d(0,0,0)}
}
@keyframes bg-breathe{
  from{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-5vmax,0) scale(1.12)}
  to{transform:translate3d(0,0,0) scale(1)}
}
@keyframes bg-sheen{
  from{transform:translate3d(-6vmax,4vmax,0) scale(1)}
  50%{transform:translate3d(6vmax,-4vmax,0) scale(1.08)}
  to{transform:translate3d(-6vmax,4vmax,0) scale(1)}
}
/* у темы свой ход и своя скорость: имя и длительность лежат в токенах темы,
   пятна на слое просто берут их — поэтому добавление темы не трогает этот блок */
.bg-1,.bg-2,.bg-3{animation:var(--bg-motion) var(--bg-dur) linear infinite}
.bg-1{animation-delay:-6s}
.bg-2{animation-delay:-38s}
.bg-3{animation-delay:-64s}

/* четвертая вещь на слое: световая полоса — «свет в комнате», как блик от
   лампы на стене. Одна широкая и очень мягкая, идёт по диагонали через весь
   экран и уходит за край; между темами у неё ритм (--band-dur), густота
   (--band-op) и цвет (--band-c). Цвет отдельный, а не цвет карточки: белый
   блик на почти белой странице Потока давал различимую разницу в 2,3 шага
   и человек не видел движения вообще. Полоса нарочно втрое больше экрана и
   с полностью прозрачными краями у градиента: ни её край, ни торец никогда
   не попадают в видимую область — иначе человек увидел бы «шторку». Едет
   только по transform ( rotate(9deg) + translate3d ), композитор ничего не
   перерисовывает; ход общий, а скорость выбирает тема */
.bg .bg-band{
  position:absolute;left:50%;top:50%;
  width:240vmax;height:240vmax;margin:-120vmax 0 0 -120vmax;
  border-radius:0;display:block;
  background:linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,rgba(0,0,0,0) 34%,
    var(--band-c) 50%,
    rgba(0,0,0,0) 66%,rgba(0,0,0,0) 100%);
  opacity:var(--band-op);pointer-events:none;will-change:transform;
  transform:rotate(9deg) translate3d(0,-115vmax,0);
  animation:bg-band-sweep var(--band-dur) linear infinite;
}
@keyframes bg-band-sweep{
  from{transform:rotate(9deg) translate3d(0,-115vmax,0)}
  to{transform:rotate(9deg) translate3d(0,115vmax,0)}
}

/* контент лежит НАД фоном: экран поднят над слоем пятен, шапка и панель ещё
   выше; сам фон тапов не ловит (pointer-events:none у слоя) */
#topbar{z-index:30}

/* ---------- база ---------- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* кнопка без своей краски иначе рисует системное «лицо»: в Safari пилюля
   «Все» на главной вышла серым кругом именно так */
button{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;
  text-align:inherit;-webkit-appearance:none;appearance:none;cursor:pointer}
a,button,input,label,.pill,.chip,.tab{touch-action:manipulation}
html{height:100%;background:var(--page)}
html,body{margin:0}
body{
  min-height:100%;
  background:var(--page);
  color:var(--ink);
  font:400 var(--fs-base)/1.5 var(--ff);
  overflow-x:hidden;
  padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 16px);
  transition:background-color var(--t-2) var(--ease),color var(--t-2) var(--ease);
}

/* плавное перетекание цвета при смене темы на главных поверхностях */
html,#topbar,.card,.rows,.tile,.chip,.searchbar,.gate,.notice,.media-box,.viewer,.switch .track{
  transition:background-color var(--t-2) var(--ease),color var(--t-2) var(--ease),border-color var(--t-2) var(--ease);
}

.page{max-width:560px;margin:0 auto;padding:0 var(--pad)}

h1{font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em;margin:0}
h2{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em;margin:0}
h3{font-size:var(--fs-md);font-weight:700;margin:0}
p{margin:8px 0}
.sub{color:var(--ink-2);font-size:var(--fs-sm)}
.mut{color:var(--ink-3);font-size:var(--fs-cap)}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.overflow-any{overflow-wrap:anywhere}
a.plain{display:block;min-height:44px;text-decoration:none;color:inherit}
/* ссылка обязана брать цвет строки, а не системный синий: <a class="row-main">
   в напоминаниях краски не имел и Safari рисовал её #0000EE — на Бархате и
   Ночи это «не читается», как он и написал */
a{color:inherit}
.row-main{flex:1;min-width:0;display:flex;align-items:center;min-height:44px;text-decoration:none}
.divider{height:1px;background:var(--line);margin:18px 0;border:0}
.row{display:flex;align-items:center;gap:var(--gap);flex-wrap:wrap}
.row-tight{display:flex;align-items:center;gap:8px}
.spacer,.top-spacer{flex:1}
.stack>*+*{margin-top:10px}

:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}

/* ---------- заголовок-герой в две тональности ---------- */
.hero{margin:18px 0 14px}
.hero,.hero h1{font-size:var(--fs-hero);font-weight:800;letter-spacing:-.03em;line-height:1.1}
.hero-a{display:block;color:var(--ink)}
.hero-b{display:block;color:var(--ink-2)}

/* ---------- микро-заголовки ---------- */
.kicker{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:24px 0 10px;
  font:700 var(--fs-sm)/1.2 var(--ff);letter-spacing:.01em;
  color:var(--ink-3);
}
/* отступ раздела нужен МЕЖДУ блоками; первым ребёнком в карточке он добавлял
   мёртвую полосу в 24px поверх собственных полей карточки */
.card>:first-child{margin-top:0}
/* «Все» — контрол, а не потерянное в пустоте слово: у него есть своя рамка
   и подложка, правый край рамки совпадает с правым краем стены полок, а
   надпись стоит в ней по центру. Отрицательный отступ только слева (добавляет
   площадь нажатия): вправо пилюля выползала за край карточки на 12px */
.kicker-link{
  display:inline-flex;align-items:center;justify-content:center;height:44px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  color:var(--acc-deep);text-decoration:none;
  font:700 var(--fs-sm)/1.25 var(--ff);letter-spacing:.01em;
  padding:0 14px;margin:-6px 0;border-radius:var(--r-pill);
  border:1px solid var(--line-2);background:var(--surf);
}
.kicker-link:active{background:var(--acc-soft)}
.section-title{margin:22px 0 4px;font:700 var(--fs-sm)/1.4 var(--ff);letter-spacing:.01em;color:var(--ink-3)}

/* ---------- верхняя панель ---------- */
#topbar{
  position:sticky;top:0;z-index:30;
  background:var(--page);
  padding-top:var(--safe-t);
}
/* шапка приоткрыта: за ней видно, как дышит фон, — иначе на телефоне
   анимация остаётся в 15% экрана между карточками. Без поддержки
   backdrop-filter остаётся глухая подложка, ничего не плывёт */
@supports (backdrop-filter:blur(2px)){
  #topbar{background:var(--topbar-glass);backdrop-filter:blur(16px) saturate(1.25)}
}
.topbar-inner{
  max-width:560px;margin:0 auto;padding:10px var(--pad);
  display:flex;align-items:center;gap:var(--gap);min-height:52px;
}
.brand{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--ff-brand);font-weight:800;font-size:var(--fs-md);
  letter-spacing:-.02em;color:var(--ink);text-decoration:none;
}
.brand span{color:var(--acc-deep)}
#quota-chip,.quota-chip,#help-chip{
  display:inline-flex;align-items:center;justify-content:center;flex:0 1 auto;min-width:0;
  height:36px;min-height:36px;padding:0 14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border:1px solid var(--line-2);border-radius:var(--r-pill);
  background:var(--surf);color:var(--ink-2);
  font:600 var(--fs-cap)/1 var(--ff);letter-spacing:.01em;
  text-decoration:none;transition:color var(--t-1) var(--ease),border-color var(--t-1) var(--ease);
}
#quota-chip[data-state="low"],.quota-chip[data-state="low"],#help-chip[data-state="low"]{color:var(--acc-deep);border-color:var(--acc);background:var(--acc-soft)}
#quota-chip:active,.quota-chip:active,#help-chip:active{background:var(--acc-soft)}

/* ---------- карточки ---------- */
.card{
  background:var(--surf);border:0;border-radius:var(--r-card);
  padding:18px var(--pad);margin:12px 0;box-shadow:var(--sh-card);
}
.card-brief{background:var(--acc-soft);box-shadow:none}
.card-warn{background:var(--warn-soft);border:1px solid var(--warn-line);box-shadow:none}
/* опасная зона: красная рамка и заголовок, иконка-предупреждение */
.card-warn{border-color:color-mix(in srgb,var(--bad) 38%,transparent);
  background:color-mix(in srgb,var(--bad-soft) 55%,var(--surf))}
.card-warn .kicker{color:var(--bad);display:flex;align-items:center;justify-content:flex-start;gap:8px}
.card-warn .kicker::before{content:"";flex:0 0 auto;width:16px;height:16px;
  background:var(--bad);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.5 22 20H2z"/><path d="M12 9.5v4.6"/><path d="M12 17.2h.01"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.5 22 20H2z"/><path d="M12 9.5v4.6"/><path d="M12 17.2h.01"/></svg>') center/contain no-repeat}
.card-warn .sub{color:var(--ink-2)}
.card-warn .slide-track{border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.card-recent .item-card{margin:0;border:0;box-shadow:none;padding:0}
/* сетка настроек: на телефоне одна колонка, на широком — две;
   ритм по вертикали как у обычных карточек (карточки внутри без своих отступов).
   min-width:0 обязателен: без него grid-ребёнок считает себя шириной самого
   длинного слова и вылезает за карточку */
.settings-grid{display:grid;grid-template-columns:1fr;gap:12px;align-items:start}
.settings-grid>*{min-width:0}
.settings-grid>.card{margin:0}
.set-wide{grid-column:1/-1}

/* ---------- слайд-подтверждение ---------- */
/* «Удалить всё» и «да, удалить всё» двумя кнопками в его записи дали кашу:
   человек жмёт одну, а видит обе. Здесь одно действие и один жест — довести
   бегунок до края. Отпустил раньше края — ничего не удалилось, и это видно. */
.slide{margin-top:14px}
.slide-track{position:relative;display:flex;align-items:center;height:56px;overflow:hidden;
  background:var(--surf);border:1px solid var(--line-2);border-radius:var(--r-ctl);
  -webkit-user-select:none;user-select:none}
.slide-fill{position:absolute;top:0;bottom:0;left:0;width:var(--slide-x,0px);
  background:var(--bad-soft);transition:width .16s var(--ease),background-color var(--t-1) linear}
/* заливка однородная: без кромки и градиента — один тон по всей ширине */
/* надпись стоит по центру ВСЕГО трека. Второй слой — тот же текст, но
   покрашенный в цвет опасности и открытый заливкой через clip-path: надпись
   проставляется по мере движения бегунка («делается заливкой»).
   Поля по ширине бегунка с обеих сторон: текст центрирован в треке и при этом
   никогда не уходит под бегунок — на телефоне фраза переносится на две строки,
   а не теряет первую букву под красным квадратом */
.slide-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;
  align-items:center;justify-content:center;padding:0 56px;
  font:700 var(--fs-sm)/1.2 var(--ff);letter-spacing:.01em;
  color:var(--ink-3);pointer-events:none;transition:color var(--t-1) linear}
.slide-wet{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;
  align-items:center;justify-content:center;padding:0 56px;color:var(--bad);
  clip-path:inset(0 calc(100% - var(--slide-x,0px)) 0 0)}
.slide-knob{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:44px;height:44px;min-width:44px;min-height:44px;margin:0 6px;
  border-radius:var(--r-ctl);cursor:grab;
  background:var(--bad);color:var(--bad-soft);touch-action:none;
  transition:transform .26s cubic-bezier(.34,1.16,.36,1),background-color var(--t-1) linear,
    color var(--t-1) linear,box-shadow var(--t-1) linear}
.slide-knob svg{display:block;width:22px;height:22px}
/* пока палец ведёт бегунок, переход мешает: он должен идти за пальцем */
.slide.is-drag .slide-fill,.slide.is-drag .slide-knob{transition:none}
.slide.is-drag .slide-knob{cursor:grabbing;box-shadow:var(--sh-float)}
.slide.is-done .slide-fill{background:var(--bad)}
.slide.is-done .slide-label,.slide.is-done .slide-wet{color:var(--bad-soft)}
.slide.is-busy{pointer-events:none}
.slide.is-busy .slide-knob{cursor:default}
/* тап без движения — не удаление; отвечает краской, а не прыжком бегунка */
.slide.is-nudge .slide-label{color:var(--ink-2)}
/* ---------- сводка на главной ---------- */
.brief-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:2px 0 12px}
.brief-num{display:flex;flex-direction:column;gap:4px;min-width:0}
.brief-num b{font:800 var(--fs-xl)/1 var(--ff);letter-spacing:-.02em;color:var(--tint-ink,var(--ink))}
.brief-num span{font:600 var(--fs-micro)/1.3 var(--ff);letter-spacing:.01em;color:var(--ink-3)}
.brief-line{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.5;margin-bottom:14px}

/* ---------- заголовок раздела со ссылкой ---------- */
.kicker-row{display:flex;align-items:center;justify-content:space-between;gap:8px}

/* ---------- карточка предмета ---------- */
.item-h1{font-size:var(--fs-lg);line-height:1.25}
.item-text{white-space:pre-wrap;line-height:1.6}
.chip-row{display:flex;flex-wrap:wrap;gap:6px}
.row-date{font-weight:600;font-size:var(--fs-sm);color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.row-line .row-date{white-space:nowrap;flex:0 0 auto}

/* ---------- сохранённый кадр ---------- */
/* Картинка и видео — обычное место В ПОТОКЕ экрана, а не накладка: на
   коротком окне Telegram плавающий блок ложится на соседние кнопки (тот же
   урок, что и с подсказкой над полками). Наверху только полноэкранный
   просмотр — слой #viewer. */
.media-box{
  position:relative;display:block;margin:12px 0;overflow:hidden;
  border:1px solid var(--line-2);border-radius:var(--r-card);
  background:var(--surf);box-shadow:var(--sh-card);
}
/* файла ещё нет в коробке — она живёт той же пульсацией, что скелетоны,
   и ни одним битым значком: пустая коробка и есть состояние «в дороге» */
.media-box:empty{
  min-height:200px;background:var(--surf-2);
  animation:sk 1.3s ease-in-out infinite;
}
.media-box[role="button"]{cursor:pointer}
.media-box[role="button"]:active{border-color:var(--ink-3)}
/* кадр в коробке: пульсация не нужна, рамка уходит в фон — это и есть видимый
   ответ человеку, что файл дошёл и лежит перед ним */
.media-box.is-ready{border-color:transparent;box-shadow:none}
/* кадр не открылся: коробка складывается, остаётся одна спокойная строка */
.media-box.is-gone{display:none}
.media-view{
  display:block;width:100%;max-height:62vh;object-fit:contain;
  background:var(--surf);
}
/* у видео тап принадлежит его собственным кнопкам, поэтому кадр открывает
   рисованный знак в углу — не меньше 44px */
.media-expand{
  position:absolute;right:10px;bottom:10px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;min-height:44px;border-radius:var(--r-ctl);
  background:var(--surf);color:var(--ink);box-shadow:var(--sh-float);
}
.media-expand svg{display:block;width:20px;height:20px}
.media-expand:active{background:var(--surf-2)}
.media-note{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.media-retry{flex:0 0 auto}

/* ---------- пилюли-метки ---------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;max-width:100%;
  height:28px;min-height:28px;padding:0 10px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;text-decoration:none;
  font:600 var(--fs-micro)/1.15 var(--ff);letter-spacing:.01em;
  background:var(--surf-2);color:var(--ink-2);border-radius:var(--r-pill);
}
.chip-acc{background:var(--acc-soft);color:var(--acc-deep)}
.chip-ok{background:var(--ok-soft);color:var(--ok)}
.chip-bad{background:var(--bad-soft);color:var(--bad)}
.chip-mute{background:transparent;color:var(--ink-3);border:1px solid var(--line-2)}
.chipset{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}

/* ---------- пастельная плитка с монограммой ---------- */
.tile{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-tile);
  background:var(--tint-bg,var(--surf-2));color:var(--tint-ink,var(--ink-2));
  font:800 var(--fs-md)/1 var(--ff);text-transform:uppercase;overflow:hidden;
}
.tile span,.tile{white-space:nowrap}
/* нарисованный знак полки: тот же цвет, что и подпись полки, поэтому
   контраст иконки проверяется парами tint-ink / tint-bg */
.tile .tile-ico{display:block;width:23px;height:23px;color:var(--tint-ink,var(--ink-2))}
.shelf .tile{width:48px;height:48px}
.tile-img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.shelf .tile .tile-ico{width:25px;height:25px}

/* ---------- кнопки ---------- */
.btn{
  -webkit-appearance:none;appearance:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:48px;min-height:48px;padding:0 22px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-radius:var(--r-ctl);
  font:600 var(--fs-base)/1 var(--ff);letter-spacing:-.01em;
  background:var(--acc);color:var(--on-acc);text-decoration:none;text-align:center;
  touch-action:manipulation;
  transition:background-color var(--t-1) linear,color var(--t-1) linear,
    border-color var(--t-1) linear;
}
/* нажатие — смена краски, а не scale: трансформация кнопки на телефоне
   перерисовывает слой и ощущается как «лагает». accent-deep только для синих
   кнопок: красная кнопка на синем квадрате с красной надписью не читается */
.btn:active{background:var(--acc-deep)}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn-ghost,.btn.ghost{background:var(--surf);color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:active,.btn.ghost:active{background:var(--surf-2)}
.btn-danger,.btn.danger{background:var(--bad-soft);color:var(--bad);border:1px solid transparent}
.btn-danger:active,.btn.danger:active{background:var(--bad);color:var(--bad-soft)}
.btn-sm,.btn.small{height:44px;min-height:44px;padding:0 16px;font-size:var(--fs-sm)}
.btn-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.btn-row .btn{width:auto;flex:1;min-width:140px}
.linkish{
  -webkit-appearance:none;appearance:none;border:0;background:none;cursor:pointer;
  display:inline-flex;align-items:center;
  color:var(--acc-deep);font:600 var(--fs-sm) var(--ff);padding:12px 4px;min-height:44px;
  transition:opacity var(--t-1) var(--ease);
}
.linkish:active{opacity:.65}

/* ---------- фильтры-пилюли ---------- */
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
/* темы — строго в один ряд, три равные пилюли; подпись сжимается с многоточием */
#theme-pills{flex-wrap:nowrap}
#theme-pills .pill{flex:1 1 0;min-width:0;padding:0 8px;gap:6px}
.pill,.chipset button{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  flex:0 0 auto;max-width:100%;height:44px;min-height:44px;padding:0 18px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-radius:var(--r-pill);border:1px solid var(--line-2);
  background:var(--surf);color:var(--ink-2);
  font:600 var(--fs-sm)/1 var(--ff);
  transition:background var(--t-1) var(--ease),color var(--t-1) var(--ease),border-color var(--t-1) var(--ease);
}
.pill:active,.chipset button:active{background:var(--surf-2)}
.pill[aria-pressed="true"],.chipset button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surf);font-weight:700}
/* кружок-образец темы: показывает, какой экран получится, а не просто
   раскрашенный шарик — половина фон темы, половина её акцент */
.sw{
  flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  border:1px solid var(--line-2);
  background:linear-gradient(90deg,var(--sw-bg,var(--surf)) 0 55%,
                         var(--sw-acc,var(--acc)) 55% 100%);
}
.pill[data-theme-key="flow"] .sw{--sw-bg:var(--sw-flow);--sw-acc:var(--sw-flow-acc)}
.pill[data-theme-key="night"] .sw{--sw-bg:var(--sw-night);--sw-acc:var(--sw-night-acc)}
.pill[data-theme-key="velvet"] .sw{--sw-bg:var(--sw-velvet);--sw-acc:var(--sw-velvet-acc)}

/* ---------- формы ---------- */
.field{margin:14px 0}
.field:first-child{margin-top:0}
.field label,label{
  display:block;font:700 var(--fs-sm)/1.3 var(--ff);
  letter-spacing:.01em;color:var(--ink-3);
  margin:14px 0 6px;
}
.field label{margin-top:0}
input,select,textarea{
  width:100%;min-height:48px;padding:13px 14px;
  border-radius:var(--r-ctl);border:1px solid transparent;
  background:var(--surf-2);color:var(--ink);
  font:400 16px/1.35 var(--ff);
  transition:border-color var(--t-1) var(--ease),background var(--t-1) var(--ease);
}
textarea{min-height:88px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--acc);background:var(--surf);
  box-shadow:0 0 0 3px var(--acc-soft);
}
input[type=search]{-webkit-appearance:none;appearance:none;background-clip:padding-box}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration{display:none}
.hint{color:var(--ink-3);font-size:var(--fs-cap);margin-top:6px}

/* переключатель: пилюля 52×32, белый кружок */
.switch{display:flex;align-items:center;gap:12px;min-height:52px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .track{
  flex:0 0 auto;width:52px;height:32px;border-radius:var(--r-pill);
  background:var(--line-2);border:0;position:relative;
  transition:background var(--t-2) var(--ease);
}
.switch .track::after{
  content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;
  background:var(--knob);
  transition:transform var(--t-2) var(--ease);
}
.switch input:checked+.track{background:var(--acc)}
.switch input:not(:checked)+.track::after{box-shadow:0 0 0 1px rgba(15,18,32,.14)}
.switch input:checked+.track::after{transform:translateX(20px)}
.switch input:focus-visible+.track{outline:2px solid var(--acc);outline-offset:2px}
.switch .switch-label{font-size:var(--fs-base)}

/* ---------- поиск ---------- */
.searchbar{
  display:flex;align-items:center;gap:10px;
  min-height:56px;padding:6px 8px 6px 16px;margin:14px 0;
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r-pill);
  box-shadow:var(--sh-card);text-decoration:none;color:inherit;
}
.searchbar .ico{color:var(--ink-3)}
.searchbar span{color:var(--ink-3);font-size:var(--fs-base)}
.searchbar input{
  flex:1;min-width:0;min-height:44px;padding:0;border:0;background:transparent;
  box-shadow:none;font:400 var(--fs-base)/1.3 var(--ff);color:var(--ink);
}
.searchbar input:focus{outline:none;border:0;background:transparent;box-shadow:none}
.searchbar button,.searchbar .q-clear,.search-x{
  -webkit-appearance:none;appearance:none;cursor:pointer;flex:0 0 auto;
  width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--ink-3);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background-color var(--t-1) linear,color var(--t-1) linear;
}
.searchbar button svg{display:block;width:20px;height:20px}
.searchbar button:active{background:var(--surf-2);color:var(--ink)}
/* крестик есть только тогда, когда есть что стирать: пустая рамка в конце
   строки поиска читается как «маленький квадратик — а это что за кнопка?» */
.searchbar input:placeholder-shown~.search-x{display:none}
.searchline{display:flex;gap:8px;margin-top:14px}
.searchline input{flex:1;min-width:0}
.searchline .btn{width:auto;flex:0 0 auto;min-width:96px}

/* ---------- строки с волосяными разделителями ---------- */
.rows{background:var(--surf);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:2px var(--pad);margin:12px 0}
.rows .row-line,.row-line{
  display:flex;align-items:center;gap:12px;
  min-height:56px;min-width:0;padding:10px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
}
.rows .row-line:last-child{border-bottom:0}
.rows .row-line:first-child{padding-top:12px}
.rows .row-line:last-child{padding-bottom:12px}
/* карточка, которая одновременно строка: .row-line{padding:10px 0} перебивал
   поля карточки, и «Доступ и лимиты» вставал впритык к левому краю своей рамки */
.card.row-line{padding:18px var(--pad)}
/* кнопка в строке — размером со своё слово. .btn{width:100%} внутри flex-строки
   раздувал «Отменить» на всю ширину карточки, строка переносилась, и человек
   видел пустой прямоугольник с надписью внизу: «как будто их там не должно быть» */
.row-line .btn{width:auto;flex:0 0 auto}
/* ссылка в строке не должна превращаться в узкую ленту: в напоминаниях между
   датой и «Отменить» от неё оставалось 36–69 px на 360, и «открыть карточку»
   складывалось в три строчки по букве. Теперь при нехватке места кнопка
   переезжает на свою строку, а слово остаётся словом */
.row-line .row-main{min-width:9em}
/* действие в строке остаётся действием: ссылка подкрашена акцентом, а не
   системным синим, и читается во всех трёх темах */
.row-line a.row-main{color:var(--acc-deep)}
.row-line .grow,.row-line .cap{min-width:0}
.row-line .grow{flex:1}
.row-line .cap{font-size:var(--fs-base);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* дата и значение в строке: переносим, а не выпускаем за карточку */
.row-line .when{color:var(--ink-3);font-size:var(--fs-sm)}
.row-line .when,.row-line .row-date{min-width:0;overflow-wrap:anywhere}
/* «›» — ромбик на чистом CSS, не символ.
   поворот на 45° делает видимый ромб шире квадратика на ~1.7px с каждой
   стороны, поэтому справа оставлен зазор: без него кончик вылезал за край */
.chev,.row-chev{
  flex:0 0 auto;width:8px;height:8px;margin-left:auto;margin-right:2px;
  border-top:2px solid var(--ink-3);border-right:2px solid var(--ink-3);
  transform:rotate(45deg);border-radius:1px;
}

/* ---------- полки ---------- */
.shelves{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.shelf{
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  min-height:104px;padding:16px;text-align:left;cursor:pointer;min-width:0;
  color:var(--ink);text-decoration:none;
  background:var(--surf);border-radius:var(--r-card);box-shadow:var(--sh-card);
  transition:background-color var(--t-1) linear,box-shadow var(--t-2) var(--ease);
}
.shelf:active{background:var(--surf-2)}
.shelf-name{font-weight:700;font-size:var(--fs-base);letter-spacing:-.01em;line-height:1.3;overflow-wrap:anywhere}
.shelf-count{font-size:var(--fs-sm);font-variant-numeric:tabular-nums;color:var(--tint-ink,var(--ink-3))}
.shelf.is-empty .shelf-count{color:var(--ink-3)}

/* ---------- список карточек ---------- */
.item-card{
  display:flex;align-items:flex-start;gap:12px;width:100%;min-height:44px;text-align:left;
  text-decoration:none;color:inherit;cursor:pointer;
  background:var(--surf);border:0;border-radius:var(--r-card);
  padding:14px 16px;margin:10px 0;box-shadow:var(--sh-card);
  transition:background-color var(--t-1) linear,box-shadow var(--t-2) var(--ease);
}
.item-card:active{background:var(--surf-2)}
.item-body{flex:1;min-width:0}
.item-title{font-weight:600;font-size:var(--fs-base);line-height:1.35;overflow-wrap:anywhere}
.item-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}
.tag{
  display:inline-flex;align-items:center;gap:5px;max-width:100%;
  font:600 var(--fs-cap)/1.2 var(--ff);letter-spacing:.01em;
  color:var(--ink-2);background:var(--surf-2);border-radius:var(--r-pill);
  padding:6px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tag-accent{color:var(--acc-deep);background:var(--acc-soft)}
.tag-warn{color:var(--bad);background:var(--bad-soft)}
.tag-muted{color:var(--ink-3);background:transparent}
.item-origin-lost{color:var(--bad)}

/* ---------- напоминания ---------- */
.rem-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.rem-row:last-child{border-bottom:0}
.rem-when{font-size:var(--fs-sm);font-variant-numeric:tabular-nums;color:var(--acc-deep)}

/* ---------- доступ / тарифы ---------- */
.plan{
  display:block;width:100%;min-height:44px;text-align:left;cursor:pointer;color:inherit;
  background:var(--tint-bg,var(--surf));
  border:2px solid transparent;border-radius:var(--r-card);
  padding:18px var(--pad);margin:10px 0;
  transition:border-color var(--t-2) var(--ease),background-color var(--t-1) linear;
}
.plan:active{opacity:.85}
.plan[aria-pressed="true"]{border-color:var(--acc);box-shadow:var(--sh-card)}
.plan-name{font-weight:800;font-size:var(--fs-md);letter-spacing:-.01em;overflow-wrap:anywhere}
.plan-note{color:var(--ink-2);font-size:var(--fs-sm);margin-top:4px}
.req-line{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.req-line:last-child{border-bottom:0}
.req-line b{font-weight:600;overflow-wrap:anywhere;text-align:right}
.amount-big{font-weight:800;font-size:var(--fs-xl);letter-spacing:-.02em;color:var(--ink);margin:6px 0}

/* ---------- пустое состояние ---------- */
.empty{text-align:center;padding:36px 12px;margin:12px 0}
.empty p{color:var(--ink-2);line-height:1.6;margin:8px auto 16px;max-width:320px}
.empty .btn{max-width:280px;margin:0 auto}
.empty-hero{padding:26px 4px 8px}
.empty-hero p{color:var(--ink-2);line-height:1.6}

/* ---------- экраны-контейнеры ---------- */
#view{position:relative;z-index:1}
#notice,#gate{max-width:100%}
#login-retry{width:auto;min-width:220px}

/* ---------- уведомление ---------- */
.notice{
  position:fixed;left:50%;transform:translate(-50%,16px);
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px);
  z-index:60;max-width:min(340px,calc(100vw - 48px));
  padding:12px 18px;border-radius:16px;line-height:1.35;
  background:var(--surf);border:1px solid var(--line);
  color:var(--ink);font-size:var(--fs-sm);
  box-shadow:var(--sh-float);opacity:0;pointer-events:none;
  transition:opacity var(--t-2) var(--ease),transform var(--t-2) var(--ease);
}
.notice.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.notice.bad{color:var(--bad);border-color:var(--bad-soft);background:var(--bad-soft)}
.notice .btn{margin-top:10px}

/* ---------- экран входа ---------- */
.gate{
  position:fixed;inset:0;z-index:70;background:var(--page);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.gate-card{max-width:360px;text-align:center}
.gate-title{font-family:var(--ff-brand);font-weight:800;font-size:var(--fs-hero);letter-spacing:-.03em;margin-bottom:10px}
.gate-title span{color:var(--acc-deep)}
.gate-text{color:var(--ink-2);font-size:var(--fs-base);line-height:1.55;margin-bottom:18px}
.gate-card .btn{width:auto;min-width:200px}

/* ---------- кадр на весь экран ---------- */
/* Библиотечного модального окна здесь нет и не будет: свой слой по тому же
   шаблону, что экран входа, — hidden на блоке, показ и скрытие одним флагом.
   Панель вкладок остаётся под этим слоем и не воюет с кнопкой закрытия. */
.viewer{
  position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  padding:calc(var(--safe-t) + 14px) 14px 0;
  background:var(--page);
  /* жесты остаются здесь: за кадром страница не двигается */
  touch-action:none;
}
.viewer-stage{
  display:flex;align-items:center;justify-content:center;
  flex:1;min-width:0;min-height:0;width:100%;overflow:hidden;
}
.viewer-full{
  display:block;max-width:100%;max-height:100%;object-fit:contain;
  border-radius:var(--r-card);background:var(--surf);
}
/* кнопка закрытия — под большим пальцем, под ней запас на системную строку */
.viewer-bar{display:flex;justify-content:center;padding:0 0 calc(var(--safe-b) + 14px)}
.viewer-close{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:48px;min-height:48px;border-radius:var(--r-pill);
  background:var(--surf);color:var(--ink);border:1px solid var(--line-2);
  box-shadow:var(--sh-float);
}
.viewer-close svg{display:block;width:22px;height:22px}
.viewer-close:active{background:var(--surf-2)}
/* экран под открытым кадром заморожен; при закрытии краска возвращается */
body.no-scroll{overflow:hidden}

/* ---------- скелетоны ---------- */
.skel{
  min-height:74px;border-radius:var(--r-card);margin:12px 0;
  background:var(--surf-2);
  animation:sk 1.3s ease-in-out infinite;
}
.skel.short{min-height:34px}
@keyframes sk{50%{opacity:.5}}

/* ---------- нижняя плавающая панель ---------- */
#tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  padding:0 var(--pad) calc(var(--safe-b) + 14px);
  pointer-events:none;
}
/* панель глухая (стекло сюда встало бы подписями вкладок на чужие цветные
   пятна и сняло бы контраст до ~3:1), поэтому карточки снизу не должны
   обрываться по линейке и показывать свой хвост в щель под панелью:
   последние ~110px растворяются в цвет страницы */
#tabbar::before{
  content:"";position:fixed;left:0;right:0;bottom:0;z-index:-1;
  height:calc(var(--tabbar-h) + var(--safe-b) + 46px);
  background:linear-gradient(to bottom,transparent,var(--page) 58%);
  pointer-events:none;
}
.tabbar-inner{
  pointer-events:auto;
  max-width:560px;margin:0 auto;height:var(--tabbar-h);
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--surf);border-radius:var(--r-pill);
  box-shadow:var(--sh-float);
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-width:0;min-height:44px;text-decoration:none;color:var(--ink-3);
  font:600 var(--fs-micro)/1.15 var(--ff);letter-spacing:.01em;
  transition:color var(--t-1) var(--ease),opacity var(--t-1) var(--ease);
}
.tab:active{opacity:.7}
.tab .ico{transition:background-color var(--t-2) var(--ease),color var(--t-2) var(--ease)}
.tab span{display:block;width:100%;text-align:center;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:11px;letter-spacing:0;padding:0 3px}
/* узкие окна (десктопный Telegram): подписи не касаются краёв ячейки */
@media (max-width:360px){.tab span{font-size:10px}}
.tab[aria-current="page"]{color:var(--acc-deep)}

/* иконки вкладок — рисованные знаки, как у полок: <i class="ico"> + svg.
   Символ из системного шрифта на разных телефонах рисуется по-разному, а
   знак из 4 штрихов («Полки») читался как меню-гамбургер */
.ico{display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;width:30px;height:30px;border-radius:var(--r-ctl);color:inherit}
.ico svg{display:block;width:24px;height:24px}
/* активная вкладка: знак в мягкой акцентной подложке — ответ на тап краской,
   слой никуда не уезжает */
.tab[aria-current="page"] .ico{background:var(--acc-soft);color:var(--acc-deep)}

/* ---------- движение: только CSS, без JS ---------- */
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Появление страницы: ОДИН ход у контейнера, а не каскад по детям.
   Каскад из 28.09 плодил лишние слои на iOS: соседние блоки успевали
   наезжать друг на друга прямо на экране, и это выглядело как «анимация
   хромает». 6px и 180мс глаз читает как «появилось», а не как «летит». */
.page{animation:rise .18s var(--ease) backwards}

/* Появление полок: плитка надувается на своём месте, одна за другой.
   Ход ровно по transform и opacity — ячейки сетки с первой же секунды стоят
   там же, где будут стоять, поэтому ничто ни на что не наезжает (наезд
   соседних блоков и был причиной «анимация хромает» выше). Тень в полёте не
   растёт: анимация box-shadow перерисовывала бы слой каждый кадр на iPhone.
   Очередь берётся из --i, который app.js ставит на каждую плитку; после
   седьмой задержка перестаёт расти, чтобы двенадцать полок не превращались в
   получасовое шоу. */
@keyframes shelf-pop{
  from{opacity:0;transform:scale(.88)}
  60%{opacity:1;transform:scale(1.03)}
  to{opacity:1;transform:none}
}
.shelves .shelf{animation:shelf-pop .3s var(--ease) backwards;
  animation-delay:calc(min(var(--i,0),7) * 40ms)}

/* наведение только там, где есть настоящий курсор */
@media (hover:hover){
  .btn:hover{background:var(--acc-deep)}
  .btn-ghost:hover,.btn.ghost:hover{background:var(--surf-2)}
  .shelf:hover{transform:translateY(-2px);box-shadow:var(--sh-float)}
  .item-card:hover{transform:translateY(-1px);box-shadow:var(--sh-float)}
  /* карточка внутри карточки не должна заводить свою рамку и тень: на снимке
     «Недавно добавлено» под курсором дала коробку внутри коробки */
  .card-recent .item-card:hover{transform:none;box-shadow:none;background:var(--surf)}
  .plan:hover{border-color:var(--acc)}
  .pill:hover{border-color:var(--ink-3)}
  .kicker-link:hover{background:var(--acc-soft)}
}

/* ---------- широкие экраны ---------- */
.wide-split{display:grid;gap:20px;align-items:start}
@media (min-width:1180px){
  :root{--pad:28px}
  /* ОДНА мерка на весь экран: колонка 720, и в ней у каждого блока общие левый
     и правый край. Прежняя схема — колонка 880, а внутри неё полосы то 640, то
     на всю ширину — и есть тот «разъезд» с его снимков: «Все» висело в пустоте
     над стеной полок, карточка «Недавно добавлено» уезжала вправо от своего
     заголовка, а строка поиска начиналась левее заголовка экрана */
  .page,.topbar-inner{max-width:720px}
  .tabbar-inner{max-width:640px}
  .shelves{grid-template-columns:repeat(3,1fr);gap:14px}
  .wide-split{grid-template-columns:1.1fr .9fr}
  body{padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 24px)}
  /* подсказка в строке-ссылке тянется на всю ширину */
  .searchbar span{flex:1;min-width:0}
  /* настройки в две колонки */
  .settings-grid{grid-template-columns:1fr 1fr;gap:14px}
  /* ни один блок больше не имеет права сам задавать себе ширину: именно это
     и рождало разные края внутри одной колонки */
  .page>*{max-width:none;margin-left:0;margin-right:0}
  .card,.rows,.item-card{max-width:none;margin-left:0;margin-right:0}
  .settings-grid>.card,.wide-split .card,.wide-split .rows{max-width:none;margin-left:0;margin-right:0}
}

@media (prefers-reduced-motion:reduce){
  /* универсальный селектор гасит и появление страницы, и фоновые пятна, и
     световую полосу: без анимации полоса замирает на базовом transform —
     целиком за краем экрана, то есть выключена полностью */
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- справка «Как это работает» ---------- */
.help-steps{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.help-step,.help-note{
  padding:14px 16px;background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r-card, 16px);
}
.help-step h2,.help-note h2{font-size:var(--fs-md, 16px);margin:0 0 6px}
.help-step p,.help-note p{margin:0;color:var(--ink-2);font-size:var(--fs-sm)}
.help-note{margin-top:10px}

/* ---------- статус заявки: перевод -> проверка -> доступ ---------- */
.row-order .row-main{display:flex;flex-direction:column;gap:8px}
.tl{display:flex;gap:6px;flex-wrap:wrap}
.tl-step{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;
  border-radius:var(--r-pill);background:var(--surf-2);color:var(--ink-3);
  font:600 var(--fs-micro)/1 var(--ff);white-space:nowrap;
}
.tl-step i{width:6px;height:6px;border-radius:50%;background:currentColor}
.tl-step.tl-done{background:var(--ok-soft);color:var(--ok)}
.tl-step.tl-now{background:var(--acc-soft);color:var(--acc-deep)}

/* ---------- onboarding (first session, three cards) ---------- */
.onb-card{max-width:340px}
.onb-dots{display:flex;gap:8px;justify-content:center;margin-bottom:20px}
.onb-dots i{width:8px;height:8px;border-radius:50%;background:var(--ink-3);opacity:.35}
.onb-dots i.on{opacity:1;background:var(--acc-deep)}
.onb-title{font-family:var(--ff-brand);font-weight:800;font-size:var(--fs-hero);letter-spacing:-.03em;margin-bottom:10px}

/* быстрый захват: микрофон в записи пульсирует фирменным «плохим» красным */
.btn-rec{color:#fff;background:var(--bad);border-color:transparent;animation:recPulse 1.4s ease-in-out infinite}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.55}}