/* =============================================================================
   cabinet.css — кабинет заточника TIXOGEL
   Тот же язык, что на сайте: чёрный холст, дисплейный Unbounded,
   hairline-линии вместо панелей, пилюли, моноширинные цифры.
   ============================================================================= */

:root{
  /* Тёмная тема — основная. Светлая задаётся ниже переопределением
     этих же переменных, поэтому весь остальной файл о теме не знает
     и менять его не пришлось. */
  --void:#000;
  --ash:#c9c9c9;
  --frost:#fff;
  --mist:#9a9aa2;
  --graphite:#4c4c4c;
  --hairline:rgba(255,255,255,.14);
  --hairline-dim:rgba(255,255,255,.07);
  --danger:#ff6b6b;
  /* Кислотный жёлтый — единственный цвет в чёрном кабинете, поэтому он
     работает как знак отличия: его больше нигде нет. Ровный, без градиентов:
     перелив притягивал взгляд к наградам сильнее, чем к самим заточкам. */
  --acid:#d8ff2b;
  --acid-dim:rgba(216,255,43,.16);
  /* Полупрозрачные подложки: у стекла и накладных панелей свой оттенок */
  --glass:rgba(12,12,14,.72);
  --glass-top:rgba(0,0,0,.55);
  --overlay:rgba(0,0,0,.97);
  --raise:rgba(255,255,255,.08);
  --on-acid:#1b2400;
  --f-display:'Unbounded',sans-serif;
  --f-body:'Manrope',sans-serif;
  --f-mono:'JetBrains Mono',monospace;
  --pad-x:clamp(18px,5vw,72px);
  --nav-h:60px;
}

/* ── Светлая тема ────────────────────────────────────────────────────────────
   Не белый лист: чистый #fff под фотографиями бьёт по глазам и делает снимки
   грязными. Берём очень светлый тёплый серый — на нём кромка и сталь выглядят
   так же честно, как на чёрном.

   Акцентный цвет один и тот же в обеих темах, но на светлом фоне кислотный
   жёлтый нечитаем, поэтому текст на нём тёмный, а сам он чуть глубже. */
[data-theme="light"]{
  --void:#f4f4f2;
  --ash:#3a3a3e;
  --frost:#111114;
  --mist:#6b6b73;
  --graphite:#9a9aa2;
  --hairline:rgba(0,0,0,.16);
  --hairline-dim:rgba(0,0,0,.08);
  --danger:#c62828;
  --glass:rgba(250,250,248,.78);
  --glass-top:rgba(244,244,242,.7);
  --overlay:rgba(250,250,248,.97);
  --raise:rgba(0,0,0,.06);
  /* На светлом фоне кислотный нечитаем: берём глубже, а текст поверх — белый */
  --acid:#7d9b00;
  --acid-dim:rgba(125,155,0,.14);
  --on-acid:#ffffff;
}

*,*::before,*::after{box-sizing:border-box}
/* Документ прибит намертво. На iOS этого мало добиться одним overflow:hidden:
   страница всё равно «оттягивается» пальцем и при двойном тапе, и вместе с ней
   уезжает всё, что стоит на position:fixed, — на записи экрана панель вкладок
   так и сползала вниз на 60 pt.

   Лечится тремя вещами сразу:
     · height:100% вместо любых vh-единиц — они на iOS врут в установленном
       приложении;
     · position:fixed на самом body — документу физически некуда двигаться;
     · touch-action:manipulation — отключает двойной тап для масштабирования,
       который и дёргал раскладку (user-scalable=no iOS игнорирует).

   Прокрутка живёт только внутри .app-scroll — там она и нужна. */
html{
  margin:0;padding:0;background:var(--void);
  /* min-height, а не height: документ должен дорисовываться до физического
     низа экрана, каким бы этот низ ни оказался. dvh знает про панели
     и «остров», -webkit-fill-available выручает там, где dvh ещё не понимают. */
  min-height:100dvh;min-height:-webkit-fill-available;
  -webkit-text-size-adjust:100%;
  /* Двойной тап больше не масштабирует, но обычная прокрутка остаётся */
  touch-action:manipulation;
}
body{
  margin:0;padding:0;width:100%;background:var(--void);
  /* +1px намеренно: на iOS положение fixed-элементов зависит от того,
     прокручивается страница или нет. Пустой экран не прокручивался, и панель
     вкладок вставала на 108 pt выше, чем на экране с лентой. Лишний пиксель
     делает поведение одинаковым везде. */
  min-height:calc(100dvh + 1px);
  min-height:calc(-webkit-fill-available + 1px);
  touch-action:manipulation;
  /* Отскок на краях оставляем родной — это он даёт ощущение живой ленты
     и позволяет реализовать «потянуть вниз». */
  overscroll-behavior-y:auto;
}

/* Приложение — обычный поток документа.
   Раньше здесь был заблокированный документ и своя прокрутка внутри: из-за
   этого низ экрана в установленном приложении оставался незакрашенным —
   контейнер был короче физического экрана и не дотягивался. Теперь высоту
   определяет сам документ, и такой щели взяться неоткуда. */
#app{
  min-height:100dvh;min-height:-webkit-fill-available;
  display:flex;flex-direction:column;
}
#app[hidden]{display:none}
.app-scroll{
  flex:1 1 auto;
  /* Место под накрывающую шапку: её высоту меряет app.js */
  padding-top:var(--topbar-h, 64px);
  /* Место под накладную панель: её высота плюс зона домашнего индикатора.
     Без этого последняя карточка ленты пряталась бы под панелью. */
  padding-bottom:calc(var(--tabbar-h, 64px) + 18px + env(safe-area-inset-bottom, 0px));
}
body{
  font-family:var(--f-body);color:var(--ash);
  font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--frost);color:var(--void)}
a{color:var(--frost);text-decoration:none}
button{font-family:inherit}
input,select,textarea{font-family:inherit;font-size:16px} /* 16px = iOS не зумит */

/* ── типографика ──────────────────────────────────────────────────────────── */
.eyebrow{
  font:400 11px/1 var(--f-body);letter-spacing:.22em;text-transform:uppercase;
  color:var(--mist);margin:0 0 14px;
}
h1.display{
  font:700 clamp(28px,7vw,52px)/0.98 var(--f-display);
  letter-spacing:-.02em;text-transform:uppercase;color:var(--frost);margin:0 0 22px;
}
h2.section{
  font:700 clamp(17px,4vw,22px)/1.15 var(--f-display);
  text-transform:uppercase;color:var(--frost);margin:0 0 16px;
}
.muted{color:var(--mist)}
.mono{font-family:var(--f-mono)}

/* ── каркас ───────────────────────────────────────────────────────────────── */
.wrap{padding:26px var(--pad-x) 30px;max-width:900px;margin:0 auto}
.view{display:none}
.view.active{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ── шапка ────────────────────────────────────────────────────────────────── */
/* Шапка накрывает системную зону размытым стеклом: содержимое проезжает
   под ней, а часы и значки связи остаются читаемыми на любом снимке.
   Сплошная чёрная полоса поверх фотографии выглядела бы обрезкой кадра. */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  /* В режиме приложения контент уходит под статус-бар, поэтому добавляем
     его высоту сверху. На обычной вкладке отступ нулевой. */
  padding:calc(14px + env(safe-area-inset-top,0px)) var(--pad-x) 14px;
  background:var(--glass-top);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
          backdrop-filter:blur(18px) saturate(130%);
  border-bottom:1px solid var(--hairline-dim);
  /* Свой слой композитора: иначе размытие пересчитывается на каждый кадр
     прокрутки и полоса моргает */
  transform:translateZ(0);
}
.topbar .brand{font:700 15px/1 var(--f-display);letter-spacing:.02em;color:var(--frost)}
.topbar .who{font:400 12px/1 var(--f-mono);color:var(--mist)}

/* ── нижняя навигация ─────────────────────────────────────────────────────── */
/* =============================================================================
   ПАНЕЛЬ ВКЛАДОК — плавающая капсула

   Без стекла и размытия. Размытие пересчитывается на каждый кадр прокрутки,
   и на iOS шов приходился ровно на линию зоны домашнего индикатора — там
   панель и моргала. Плотный фон в общем стиле кабинета: чёрный, hairline,
   мягкая тень. Ничего не пересчитывается — нечему и моргать.

   Капсула поднята выше зоны индикатора целиком, а не наполовину: пересечения
   с системной областью больше нет вообще.
   ============================================================================= */
.tabbar{
  /* Накладная поверх документа: лента продолжается под ней. Отступ снизу
     у списка равен высоте панели — последняя карточка не прячется.
     Высоту меряет app.js и кладёт в --tabbar-h: плотность может меняться,
     а отступ должен совпадать всегда. */
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:repeat(5,1fr);
  margin:0 auto;width:calc(100% - 24px);max-width:520px;
  border-radius:26px;
  /* Полупрозрачная: под ней видно, что лента продолжается */
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px);
          backdrop-filter:blur(16px);
  border:1px solid var(--hairline);
  box-shadow:0 6px 24px rgba(0,0,0,.6);
  /* Свой слой композитора: иначе размытие пересчитывается на каждый кадр
     прокрутки и панель заметно моргает */
  transform:translateZ(0);
  /* Отступ от края: свой плюс ВСЯ зона домашнего индикатора.
     Панель не должна её задевать — там и был шов. */
  margin-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
}
.tabbar button{
  background:none;border:none;color:var(--mist);cursor:pointer;
  border-radius:20px;transition:color .16s,background .16s;
  padding:10px 2px;display:flex;flex-direction:column;align-items:center;gap:4px;
  font:400 10px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;
}
.tabbar button i{font-size:17px}
.tabbar button.active{color:var(--frost)}
/* Активная вкладка — ровная подложка, без градиентов и бликов */
.tabbar button.active{background:var(--raise)}

/* ── кнопки ───────────────────────────────────────────────────────────────── */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  border-radius:9999px;border:1px solid var(--frost);background:transparent;
  color:var(--frost);font:400 13px/1 var(--f-body);
  letter-spacing:.1em;text-transform:uppercase;
  padding:14px 28px;cursor:pointer;transition:background .18s,color .18s;
}
.pill:hover{background:var(--frost);color:var(--void)}
.pill.solid{background:var(--frost);color:var(--void)}
.pill.solid:hover{background:var(--ash)}
/* Блочный уровень, а не inline-flex: у строчных элементов margin:auto
   не центрирует. Внутри слоёв каждый прямой потомок центруется правилом
   .sheet-body>* — и кнопка во всю ширину оставалась прижатой к левому краю,
   пока поля стояли по центру. На телефоне не видно: до предела в 720px
   ширина не доходит, поля и кнопка одинаково растянуты. Вылезает только
   на широком экране. */
.pill.wide{width:100%;display:flex}
.pill.small{padding:10px 18px;font-size:11px}
.pill.danger{border-color:var(--danger);color:var(--danger)}
.pill.danger:hover{background:var(--danger);color:var(--void)}
.pill:disabled{opacity:.4;cursor:not-allowed}
.ghost{
  background:none;border:none;padding:0;color:var(--mist);cursor:pointer;
  font:400 13px/1.4 var(--f-body);
}
.ghost:hover{color:var(--frost)}

/* ── формы ────────────────────────────────────────────────────────────────── */
.field{margin-bottom:20px}
.field label{
  display:block;font:400 10px/1 var(--f-body);letter-spacing:.2em;
  text-transform:uppercase;color:var(--mist);margin-bottom:9px;
}
.field input,.field select,.field textarea{
  width:100%;background:transparent;color:var(--frost);
  border:none;border-bottom:1px solid var(--hairline);
  border-radius:0;padding:10px 0;outline:none;
  transition:border-color .18s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--frost)}
.field textarea{resize:vertical;min-height:78px;line-height:1.5}
.field select{appearance:none;background-image:none}
.field select option{background:#0a0a0a;color:var(--frost)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}

/* Калькулятор: три поля в ряд на широких экранах, в столбик на узких.
   align-items:end держит поля ввода на одной линии, даже если подпись
   переносится на две строки. */
.calc-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:end}
.calc-fields .field{margin-bottom:0}
.calc-fields.three{grid-template-columns:1fr 1fr 1fr}
@media(max-width:520px){
  .calc-fields.three{grid-template-columns:1fr 1fr}
  .calc-fields.three .field:first-child{grid-column:1 / -1}
}

/* чипы выбора (камни, продукты) */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--hairline);border-radius:9999px;background:transparent;
  color:var(--ash);font:400 12px/1 var(--f-mono);padding:10px 16px;cursor:pointer;
  transition:all .18s;
}
.chip:hover{border-color:var(--frost);color:var(--frost)}
.chip.on{background:var(--frost);border-color:var(--frost);color:var(--void)}
.chip .ord{
  display:inline-block;margin-right:6px;font-size:10px;opacity:.6;
}

/* ── список журнала ───────────────────────────────────────────────────────── */
.entry{
  border-top:1px solid var(--hairline);padding:18px 0;cursor:pointer;
  display:block;width:100%;background:none;border-left:0;border-right:0;border-bottom:0;
  text-align:left;color:inherit;
}
.entry:last-child{border-bottom:1px solid var(--hairline)}
.entry-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.entry-title{font:600 16px/1.25 var(--f-body);color:var(--frost)}
.entry-date{font:400 11px/1 var(--f-mono);color:var(--mist);white-space:nowrap}
.entry-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:9px;
  font:400 13px/1.4 var(--f-body);color:var(--ash);
}
.entry-meta i{color:var(--graphite);font-style:normal;font-size:11px}
.entry-note{
  margin-top:8px;font:400 13px/1.45 var(--f-body);color:var(--mist);
}
.entry-stones{margin-top:8px;font:400 12px/1.4 var(--f-mono);color:var(--mist)}
.entry-thumbs{display:flex;gap:6px;margin-top:11px}
.entry-thumbs img{width:44px;height:44px;object-fit:cover;border-radius:2px}

/* ── карточки ножей и камней ──────────────────────────────────────────────── */
.card{
  border-top:1px solid var(--hairline);padding:16px 0;
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
}
.card:last-of-type{border-bottom:1px solid var(--hairline)}
.card-title{font:600 15px/1.3 var(--f-body);color:var(--frost)}
.card-sub{font:400 12px/1.4 var(--f-mono);color:var(--mist);margin-top:5px}

/* ── фото ─────────────────────────────────────────────────────────────────── */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
/* Превью тем же кадром, что и в ленте: квадратное превью обещало один кадр,
   а в ленте появлялся другой — человек видел не то, что выбирал. */
.photo-cell{position:relative;aspect-ratio:3/4;background:#0b0b0b;border:1px solid var(--hairline-dim)}
.photo-cell img{width:100%;height:100%;object-fit:cover;display:block}
.photo-cell .del{
  position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;
  background:var(--overlay);color:var(--frost);border:none;cursor:pointer;font-size:12px;
  display:flex;align-items:center;justify-content:center;
}
.photo-add{
  aspect-ratio:3/4;border:1px dashed var(--hairline);background:none;color:var(--mist);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;font:400 10px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;
}
.photo-add:hover{border-color:var(--frost);color:var(--frost)}
.photo-add i{font-size:20px}
.upload-note{font:400 11px/1.5 var(--f-mono);color:var(--mist);margin-top:9px}

/* ── вход ─────────────────────────────────────────────────────────────────── */
/* Экран входа сам управляет своим display.
   Раньше .login{display:flex} перебивал .view{display:none} — экран не скрывался;
   а после добавления .active побеждало .view.active{display:block}, и flex-центровка
   слетала, из-за чего блок уезжал влево. Селекторы из двух и трёх классов
   расставляют приоритеты однозначно. */
.login.view{display:none}
.login.view.active{
  display:flex;min-height:100svh;
  align-items:center;justify-content:center;
  padding:var(--pad-x);
}
.login-inner{max-width:420px;width:100%}
.login h1{font:700 clamp(30px,9vw,56px)/0.96 var(--f-display);
  text-transform:uppercase;color:var(--frost);letter-spacing:-.02em;margin:0 0 18px}
.login p{color:var(--ash);margin:0 0 30px}
.tg-step{
  border-top:1px solid var(--hairline);margin-top:26px;padding-top:20px;
  font:400 13px/1.6 var(--f-body);color:var(--mist);
}
.tg-step ol{margin:10px 0 0;padding-left:18px}
.tg-step li{margin-bottom:6px}

/* ── статусы ──────────────────────────────────────────────────────────────── */
.empty{padding:48px 0;text-align:center;color:var(--mist)}
.empty i{font-size:28px;display:block;margin-bottom:14px;opacity:.5}
.toast{
  position:fixed;left:50%;bottom:calc(var(--nav-h) + 18px);transform:translateX(-50%);
  background:var(--frost);color:var(--void);padding:12px 22px;border-radius:9999px;
  font:500 13px/1 var(--f-body);z-index:100;opacity:0;pointer-events:none;
  transition:opacity .2s;white-space:nowrap;max-width:90vw;
}
.toast.show{opacity:1}
.toast.err{background:var(--danger);color:#fff}
.spinner{
  width:18px;height:18px;border:2px solid var(--hairline);border-top-color:var(--frost);
  border-radius:50%;animation:spin .7s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}
.bar{height:2px;background:var(--hairline);overflow:hidden;margin-top:10px}
.bar span{display:block;height:100%;background:var(--frost);width:0;transition:width .25s}

/* ── модальный слой формы ─────────────────────────────────────────────────── */
.sheet{
  position:fixed;inset:0;z-index:60;background:var(--void);
  display:none;
  /* Колонка: шапка закреплена, прокручивается только тело.
     Раньше прокручивался весь слой, а шапка держалась на sticky —
     на iOS она подрагивала и «уезжала» при инерции. */
  flex-direction:column;
}
.sheet.open{display:flex}

.sheet-head{
  flex:0 0 auto;                       /* не сжимается, всегда на месте */
  display:flex;align-items:center;justify-content:space-between;
  /* В режиме приложения уходим из-под статус-бара */
  padding:calc(16px + env(safe-area-inset-top,0px)) var(--pad-x) 16px;
  border-bottom:1px solid var(--hairline-dim);
  background:var(--void);
}
.sheet-title{font:700 14px/1 var(--f-display);text-transform:uppercase;color:var(--frost)}

.sheet-body{
  flex:1 1 auto;
  overflow-y:auto;
  /* Без этого iOS не отдаёт слою прокрутку, пока не коснёшься содержимого */
  -webkit-overflow-scrolling:touch;
  /* Прокрутка не «протекает» на страницу под слоем */
  overscroll-behavior:contain;
  padding:24px var(--pad-x) calc(40px + env(safe-area-inset-bottom,0px));
}
/* Центрирование прямых потомков слоя. Класс продублирован нарочно: без этого
   правила вроде .hint{margin:...} и h2.section{margin:...}, объявленные ниже,
   перебивают margin:auto — и абзац прилипает к левому краю, пока соседние
   поля стоят по центру. На телефоне не видно, вылезает на широком экране. */
.sheet-body.sheet-body>*{max-width:720px;margin-left:auto;margin-right:auto}
.x{background:none;border:none;color:var(--frost);font-size:20px;cursor:pointer;line-height:1}

/* ── профиль ──────────────────────────────────────────────────────────────── */
.stat{border-top:1px solid var(--hairline);padding:16px 0;display:flex;
  justify-content:space-between;align-items:baseline;gap:12px}
.stat:last-of-type{border-bottom:1px solid var(--hairline)}
.stat .k{font:400 11px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.stat .v{font:400 14px/1 var(--f-mono);color:var(--frost)}

@media(min-width:768px){
  /* Капсула по содержимому: раньше колонки фиксировались по 132 px (660 всего),
     а ширина оставалась «во всю строку» — панель вылезала за правый край */
  .tabbar{grid-template-columns:repeat(5,112px);width:max-content;max-width:calc(100% - 24px)}
  .wrap{padding-top:34px}
}

/* ── Калькулятор и конвертер ──────────────────────────────────────────────── */
.calc-out{
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  padding:22px 0 18px;margin-bottom:26px;
  display:flex;align-items:baseline;gap:10px;
}
.calc-value{
  font:700 clamp(46px,14vw,86px)/0.9 var(--f-display);
  letter-spacing:-.03em;color:var(--frost);
}
.calc-unit{font:400 13px/1 var(--f-mono);color:var(--mist);
  text-transform:uppercase;letter-spacing:.12em}

.grit-table{margin-bottom:18px}
.grit-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-top:1px solid var(--hairline-dim);padding:12px 0;
}
.grit-row:last-child{border-bottom:1px solid var(--hairline-dim)}
.grit-row .k{font:400 10px/1 var(--f-body);letter-spacing:.2em;
  text-transform:uppercase;color:var(--mist)}
.grit-row .v{font:500 17px/1 var(--f-mono);color:var(--frost)}

.grit-range{
  width:100%;appearance:none;background:transparent;height:32px;cursor:pointer;
}
.grit-range::-webkit-slider-runnable-track{height:1px;background:var(--hairline)}
.grit-range::-moz-range-track{height:1px;background:var(--hairline)}
.grit-range::-webkit-slider-thumb{
  appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--frost);margin-top:-11px;
}
.grit-range::-moz-range-thumb{
  width:22px;height:22px;border:none;border-radius:50%;background:var(--frost);
}

/* подсказка под полем */
.hint{margin:8px 0 0;font:400 12px/1.45 var(--f-body);color:var(--mist)}
.hint a{color:var(--frost);text-decoration:underline;text-underline-offset:2px}

/* ── Жидкости ─────────────────────────────────────────────────────────────── */
.bottle{
  border-top:1px solid var(--hairline);padding:16px 0;
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
}
.bottle:last-of-type{border-bottom:1px solid var(--hairline)}
.bottle-name{font:600 15px/1.3 var(--f-body);color:var(--frost)}
.bottle-sub{font:400 12px/1.5 var(--f-mono);color:var(--mist);margin-top:5px}
.bottle.done .bottle-name{color:var(--mist)}
.bottle-act{display:flex;flex-direction:column;gap:8px;align-items:flex-end;flex-shrink:0}
.bottle-warn{
  margin-top:9px;font:400 12px/1.5 var(--f-body);color:var(--ash);
}
.bottle-warn a{color:var(--frost);text-decoration:underline;text-underline-offset:2px}

/* ── Выбор смахиванием ────────────────────────────────────────────────────
   Горизонтальная лента с прилипанием: листаешь пальцем, выбранным становится
   тот вариант, что оказался по центру. Тап тоже работает. */
.swipe{
  position:relative;
  display:flex;gap:10px;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:4px 0 6px;
  /* поля по краям, чтобы крайние варианты доезжали до центра */
}
.swipe::-webkit-scrollbar{display:none}
.swipe-opt{
  flex:0 0 auto;scroll-snap-align:center;
  border:1px solid var(--hairline);border-radius:9999px;
  background:transparent;color:var(--mist);
  font:400 13px/1 var(--f-body);white-space:nowrap;
  padding:13px 20px;cursor:pointer;
  transition:color .18s,border-color .18s,background .18s;
}
.swipe-opt.on{
  background:var(--frost);border-color:var(--frost);color:var(--void);
  font-weight:500;
}
.swipe::after{content:'';flex:0 0 12px}

/* ── Просмотр фото во весь экран ──────────────────────────────────────────── */
.viewer{
  position:fixed;inset:0;z-index:80;display:none;
  background:var(--overlay);
  align-items:center;justify-content:center;
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
}
.viewer.open{display:flex}
.viewer img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.viewer-close{
  position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:16px;
  width:42px;height:42px;border-radius:50%;
  background:var(--raise);border:none;color:var(--frost);
  font-size:24px;line-height:1;cursor:pointer;z-index:2;
}
.viewer-count{
  position:absolute;bottom:calc(20px + env(safe-area-inset-bottom,0px));
  left:50%;transform:translateX(-50%);
  font:400 12px/1 var(--f-mono);color:var(--mist);
}
.photo-cell img{cursor:zoom-in}

/* =============================================================================
   ЛЕНТА, ПРОФИЛИ ЗАТОЧНИКОВ, РЕЙТИНГ
   Тот же язык: чёрный холст, hairline вместо панелей, моноширинные цифры.
   Карточка не «плитка» с рамкой, а полоса контента — так на телефоне
   помещается больше сути и меньше декора.
   ============================================================================= */

.feed-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.feed-tools{display:flex;gap:8px;padding-top:6px}
.icon-btn{
  position:relative;width:40px;height:40px;border-radius:50%;
  background:none;border:1px solid var(--hairline);color:var(--ash);
  font-size:16px;cursor:pointer;transition:.15s;
}
.icon-btn:hover{border-color:var(--frost);color:var(--frost)}
.icon-btn .dot{
  position:absolute;top:7px;right:7px;width:6px;height:6px;border-radius:50%;
  background:var(--frost);
}

/* ── карточка ────────────────────────────────────────────────────────────── */
/* Карточка ленты во всю ширину экрана: фотография от края до края, текст
   с полями. Так лента читается как лента, а не как список карточек в рамках.
   Отрицательные поля выносят её за padding контейнера — иначе снимок
   оказался бы уже экрана. */
.fcard{
  padding:18px 0 14px;
  margin:0 calc(var(--pad-x) * -1);
  border-bottom:1px solid var(--hairline-dim);
}
.fcard:last-child{border-bottom:none}
.fcard-top,
.fcard-body,
.fcard-acts,
.fcard-bare{padding-left:var(--pad-x);padding-right:var(--pad-x)}

.fcard-top{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:none;cursor:pointer;text-align:left;
  /* Поля те же, что у нижней части карточки: имя и время должны стоять
     по одной линии с характеристиками, а не липнуть к краю. Фотография —
     единственное, что идёт от края до края. */
  padding:0 var(--pad-x);
}
.ava{
  width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  background:var(--graphite);
}
.ava.letter{
  display:flex;align-items:center;justify-content:center;
  font:600 13px/1 var(--f-body);color:var(--frost);
}
.ava.big{width:72px;height:72px}
.ava.big.letter{font-size:28px}
.fcard-who{display:flex;align-items:baseline;gap:8px;min-width:0}
.fcard-name{font:600 14px/1.2 var(--f-body);color:var(--frost);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcard-stars{font-size:11px;color:var(--mist);white-space:nowrap}
.fcard-ago{margin-left:auto;font-size:11px;color:var(--graphite);white-space:nowrap}



.fcard-body{margin-top:13px}
.fcard-knife{font:600 15px/1.3 var(--f-body);color:var(--frost)}
.fcard-caption{margin:7px 0 0;color:var(--ash)}
.fcard-specs{margin-top:9px;font-size:12px;color:var(--mist);
  display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.fcard-specs i{color:var(--graphite);font-style:normal;font-size:11px}
.fcard-stones{margin-top:7px;font-size:12px;color:var(--mist)}
.fcard-coolant{margin-top:7px;font-size:12px;color:var(--graphite)}
.fcard-note{margin:10px 0 0;font-size:13px;color:var(--mist);
  border-left:1px solid var(--hairline);padding-left:12px}

.fcard-acts{display:flex;align-items:center;gap:18px;margin-top:14px}
.fcard-acts .spacer{flex:1 1 auto}
.fact{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;padding:6px 0;cursor:pointer;
  color:var(--mist);font-size:15px;transition:color .15s;
}
.fact span{font-size:12px}
.fact:hover{color:var(--frost)}
.fact.on{color:var(--frost)}
.fact.static{cursor:default;color:var(--graphite)}
.fact.static.mine{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.fact:disabled{opacity:.35;cursor:default}
.feed-end{text-align:center;color:var(--graphite);font-size:12px;padding:26px 0 8px}

/* ── профиль заточника ───────────────────────────────────────────────────── */
.ghost.back{
  background:none;border:none;padding:0 0 18px;cursor:pointer;
  color:var(--mist);font:400 12px/1 var(--f-body);letter-spacing:.1em;
  text-transform:uppercase;
}
.ghost.back:hover{color:var(--frost)}

.person-head{text-align:center;padding:6px 0 4px}
.person-head .ava{margin:0 auto 16px;display:block}
.person-head .ava.letter{display:flex}
h1.display.person-name{font-size:clamp(24px,6vw,38px);margin:0 0 6px}
.person-bio{max-width:520px;margin:12px auto 0;color:var(--ash)}

.person-nums{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin:26px 0 28px;padding:18px 0;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.pnum{display:flex;flex-direction:column;align-items:center;gap:5px}
.pnum .v{font:500 19px/1 var(--f-mono);color:var(--frost)}
.pnum .k{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}

.arsenal{border-top:1px solid var(--hairline-dim)}
.ars-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--hairline-dim);
}
.ars-name{color:var(--frost);font-size:14px}
.ars-grit{font-size:12px;color:var(--mist);white-space:nowrap}

/* ── рейтинг ─────────────────────────────────────────────────────────────── */
.top-row{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:12px 0;background:none;border:none;border-bottom:1px solid var(--hairline-dim);
  cursor:pointer;text-align:left;
}
.top-place{width:26px;flex:0 0 auto;font-size:13px;color:var(--graphite)}
.top-who{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.top-sub{font-size:11px;color:var(--mist)}
.top-score{font-size:14px;color:var(--frost)}

/* ── тумблер ─────────────────────────────────────────────────────────────── */
.toggle-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--hairline-dim);
}
.toggle{
  position:relative;flex:0 0 auto;width:44px;height:26px;border-radius:13px;
  background:none;border:1px solid var(--hairline);cursor:pointer;transition:.18s;
}
.toggle::after{
  content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:var(--graphite);transition:.18s;
}
.toggle.on{background:var(--frost);border-color:var(--frost)}
.toggle.on::after{left:21px;background:var(--void)}
/* Строка времени на странице заточника: те же поля и тот же ритм, что
   у шапки карточки в ленте. Без верхнего отступа время липло к предыдущей
   записи. */
.fcard-bare{padding:6px var(--pad-x) 2px}
.fcard-bare .fcard-ago{margin-left:0}

/* Кнопки-иконки обязаны сохранять площадь нажатия, даже если шрифт иконок
   не доехал (CDN недоступен, связь легла). Без этого кнопка жалобы
   схлопывается в ноль пикселей, и палец попадает в пустоту. */
.fact{min-width:34px;min-height:36px;justify-content:center}
.fact.like,.fact.static{justify-content:flex-start}

/* =============================================================================
   АВАТАРЫ И НАГРАДЫ
   ============================================================================= */

/* Аватар может быть картинкой в фоне (свой снимок или фото из Telegram)
   либо буквой имени — запасной вариант, когда ни того, ни другого нет. */
.ava{background-size:cover;background-position:center;background-repeat:no-repeat}

.ava-edit{display:flex;align-items:center;gap:18px;margin:0 0 30px}
.ava-edit .ava.big{flex:0 0 auto}
.ava-edit-acts{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ava-edit-acts .upload-note{margin:2px 0 0}

.awards{display:flex;flex-wrap:wrap;gap:8px}
.award{
  font-weight:600;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border:1px solid var(--hairline);border-radius:100px;
  font-size:12px;color:var(--ash);
}
.award i{font-size:13px;color:var(--mist)}
/* Медаль вручается руками — она и должна отличаться от посчитанной ачивки */
.award.medal{border-color:var(--frost);color:var(--frost)}
.award.medal i{color:var(--frost)}

.award-row{
  display:flex;align-items:center;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--hairline-dim);opacity:.5;
}
.award-row.got{opacity:1}
.award-ic{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--mist);
}
.award-row.got .award-ic{border-color:var(--frost);color:var(--frost)}
.award-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.award-name{font:600 14px/1.25 var(--f-body);color:var(--frost)}
.award-hint{font-size:11px;color:var(--mist)}
.award-prog{font-size:12px;color:var(--graphite);white-space:nowrap}

/* ── очередь жалоб ───────────────────────────────────────────────────────── */
.rep-row{padding:15px 0;border-bottom:1px solid var(--hairline-dim)}
.rep-row.hidden{opacity:.55}
.rep-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.rep-who{font:600 14px/1.2 var(--f-body);color:var(--frost)}
.rep-n{font-size:11px;color:var(--danger);white-space:nowrap}
.rep-cap{margin-top:6px;font-size:13px;color:var(--ash)}
.rep-reasons{margin-top:5px;font-size:11px;color:var(--mist)}
.rep-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:11px}

/* =============================================================================
   СНИМКИ В ЛЕНТЕ — листаются пальцем
   Без открытия в полный экран: в ленте лишний слой только мешает. Прокрутка
   с привязкой к кадру, полоса прокрутки спрятана — жест остаётся нативным,
   а значит инерция и «резинка» работают как везде в системе.
   ============================================================================= */
.shots{position:relative;margin:13px 0 0}
.shots-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  scrollbar-width:none;background:#0a0a0a;
}
.shots-track::-webkit-scrollbar{display:none}
.shots-track img{
  /* Кадр 3:4 задаётся при загрузке (photo-compress.js), поэтому здесь
     ничего не режем: снимок показывается целиком. */
  flex:0 0 100%;width:100%;aspect-ratio:3/4;object-fit:cover;
  scroll-snap-align:center;display:block;user-select:none;
}
.shots-dots{
  display:flex;justify-content:center;gap:6px;padding:10px 0 0;
}
.shots-dots i{
  width:5px;height:5px;border-radius:50%;background:var(--graphite);
  transition:background .2s,transform .2s;
}
.shots-dots i.on{background:var(--frost);transform:scale(1.25)}

/* ── Медаль: контур двойной толщины — вручается руками и должна отличаться
   от посчитанной ачивки ──────────────────────────────────────────────────── */
.holo{
  color:var(--acid)!important;
  border:2px solid var(--acid)!important;
  background:var(--void)!important;
  font-weight:600;
}
.holo i{color:var(--acid)!important}

/* ── Достижения: тонкий контур того же цвета ─────────────────────────────── */
.holo-text{
  color:var(--acid)!important;
  border:1px solid var(--acid)!important;
  background:var(--void)!important;
}
.holo-text i{color:var(--acid)!important}

/* ── Поставленный лайк ───────────────────────────────────────────────────── */
.fact.like.on{color:var(--acid)}
.fact.like.on span{color:var(--frost)}

/* ── Звёзды автора в ленте: плотный значок ───────────────────────────────── */
.fcard-stars{
  padding:2px 7px;border-radius:9px;
  background:var(--acid);color:var(--on-acid);
  font-weight:600;
}

/* ── Значок медали рядом с именем ────────────────────────────────────────── */
.name-medal{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;flex:0 0 auto;
  background:var(--acid);
}

/* =============================================================================
   БЕГУЩАЯ СТРОКА СКИДОК
   Единственная реклама в кабинете, поэтому ведёт себя тихо: одна строка,
   без картинок и рамок. Цвет — тот же голографический, что у наград:
   в чёрном интерфейсе он читается как «здесь что-то приятное».
   ============================================================================= */
.offers{
  overflow:hidden;margin:22px 0;padding:10px 0;
  border-top:1px solid var(--hairline-dim);border-bottom:1px solid var(--hairline-dim);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.offers-run{
  display:flex;align-items:center;gap:26px;width:max-content;
  animation:offers-run 40s linear infinite;
}
.offers:hover .offers-run{animation-play-state:paused}
@keyframes offers-run{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.offer{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
.offer-name{font-size:12px;color:var(--ash)}
.offer-price{
  font-size:12px;
  color:var(--acid);
}
.offer-old{font-size:11px;color:var(--graphite);text-decoration:line-through}
.offer-disc{
  font-size:11px;padding:2px 6px;border-radius:2px;color:var(--on-acid);
  background:var(--acid);
}
@media (prefers-reduced-motion:reduce){
  .offers-run{animation:none}
}

/* Вывод диагностики: моноширинный, с прокруткой, чтобы длинный отчёт
   не растягивал страницу */
.diag{
  margin:14px 0 0;padding:12px;max-height:50vh;overflow:auto;
  border:1px solid var(--hairline);border-radius:3px;
  font:400 11px/1.5 var(--f-mono);color:var(--ash);
  white-space:pre-wrap;word-break:break-word;background:#080808;
}

/* ── Комментарии ─────────────────────────────────────────────────────────── */
.cmt{padding:12px 0;position:relative}
.cmt-who{
  display:flex;align-items:center;gap:9px;background:none;border:none;padding:0;
  cursor:pointer;text-align:left;width:100%;
}
.cmt-who .ava{width:24px;height:24px}
.cmt-who .ava.letter{font-size:11px}
.cmt-body{margin:9px 0 0;color:var(--ash);white-space:pre-wrap;word-break:break-word}
.cmt-del{
  background:none;border:none;padding:6px 0 0;cursor:pointer;
  color:var(--graphite);font:400 11px/1 var(--f-body);letter-spacing:.08em;
  text-transform:uppercase;
}
.cmt-del:hover{color:var(--danger)}

/* Форма ввода: одна строка с кнопкой внутри, без разделителей.
   Ничего не объясняем текстом — поле и кнопка говорят сами за себя. */
.cmt-form{
  position:sticky;bottom:0;z-index:2;
  display:flex;flex-direction:column;gap:8px;
  margin-top:16px;padding:12px 0 4px;background:var(--void);
}
.cmt-input{
  display:flex;align-items:flex-end;gap:8px;
  border:1px solid var(--hairline);border-radius:22px;padding:6px 6px 6px 16px;
  transition:border-color .16s;
}
.cmt-input:focus-within{border-color:var(--frost)}
.cmt-form textarea{
  flex:1 1 auto;width:100%;background:none;border:none;
  color:var(--frost);font:400 15px/1.4 var(--f-body);padding:7px 0;resize:none;
  max-height:120px;
}
.cmt-form textarea:focus{outline:none}
.cmt-send{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:var(--frost);color:var(--void);font-size:15px;
  display:flex;align-items:center;justify-content:center;transition:opacity .16s;
}
.cmt-send:disabled{opacity:.3;cursor:default}

/* ── События ─────────────────────────────────────────────────────────────── */
.evt{
  display:flex;gap:11px;padding:13px 0;align-items:flex-start;
  border-bottom:1px solid var(--hairline-dim);cursor:pointer;
}
.evt .ava{width:28px;height:28px;flex:0 0 auto}
.evt-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.evt-line{color:var(--mist);font-size:13px}
.evt-line b{color:var(--frost);font-weight:600}
.evt-quote{
  color:var(--ash);font-size:13px;
  border-left:1px solid var(--hairline);padding-left:10px;
}
/* Непрочитанное отмечено голографической точкой — тем же языком, что награды */
.evt.fresh{position:relative;padding-left:14px}
.evt.fresh::before{
  content:'';position:absolute;left:0;top:20px;width:5px;height:5px;border-radius:50%;
  background:var(--acid);
}

/* Кнопка «новые заточки»: не подменяем ленту под пальцами, а предлагаем */
.new-posts{
  display:flex;margin:0 auto 18px;
  background:var(--acid);border-color:transparent;color:var(--on-acid);
}
.new-posts:hover{color:var(--on-acid)}
/* Слои и просмотр фото тоже перестают быть fixed — иначе они накрывают
   только верхние 812 pt, и под ними остаётся видна лента */


/* Ответы: один уровень вложенности, отступ и черта слева */
.cmt.reply{margin-left:22px;padding-left:12px;border-left:1px solid var(--hairline)}
.cmt-acts{display:flex;gap:16px;margin-top:6px}
.cmt-link{
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--graphite);font:400 11px/1 var(--f-body);
  letter-spacing:.08em;text-transform:uppercase;
}
.cmt-link:hover{color:var(--frost)}
.cmt-link.danger:hover{color:var(--danger)}
.reply-to{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:6px 14px;border-radius:14px;
  background:rgba(255,255,255,.06);color:var(--mist);font-size:12px;
}
.reply-to b{color:var(--frost);font-weight:600}

/* Указатель обновления ленты: висит над шапкой и выезжает вслед за пальцем */
#pull-hint{
  position:fixed;top:6px;left:50%;z-index:70;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(20,20,22,.9);border:1px solid var(--hairline);
  transform:translate(-50%,-48px);opacity:0;pointer-events:none;
  transition:transform .18s ease-out,opacity .18s ease-out;
}
/* Оттянули достаточно — подсвечиваем: палец должен знать, что можно отпускать */
#pull-hint.ready{border-color:var(--acid);box-shadow:0 0 12px rgba(216,255,43,.4)}
#pull-hint.busy{transition:transform .22s ease-out}
#pull-hint.busy .spinner{animation-duration:.7s}

/* =============================================================================
   НАГРАДЫ ЗНАЧКАМИ

   Пятнадцать подписанных пилюль занимали пол-экрана и читались как список
   задач. Значок узнаётся с одного взгляда, а расшифровка ушла в бегущие
   строки под ними.
   ============================================================================= */
.badges{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:14px}
/* Только иконка, без обводки: круг вокруг каждого значка на чёрном фоне
   читался как пустая кнопка, а не как знак отличия. */
.badge-award{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  color:var(--acid);font-size:19px;line-height:1;
}
/* Медаль вручается руками — она ярче и чуть крупнее посчитанной ачивки */
.badge-award.medal{font-size:22px;filter:drop-shadow(0 0 6px rgba(216,255,43,.35))}

/* ── Две встречные бегущие строки со справкой ──────────────────────────────
   Встречное движение выбрано не для красоты: две одинаково едущие строки
   сливаются в одну полосу, и глаз перестаёт различать, где кончается первая.
   Разное направление разделяет их без единой линии. */
.ticker{
  overflow:hidden;margin:0 0 8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker-run{
  display:flex;align-items:center;gap:22px;width:max-content;
  animation:tick-left 46s linear infinite;
  will-change:transform;
}
.ticker.back .ticker-run{animation-name:tick-right}
.ticker:hover .ticker-run{animation-play-state:paused}

/* Оба состояния заданы явно. Без «from» браузер берёт текущее значение —
   а оно none, то есть не длина, и интерполировать не с чем: анимация
   числится запущенной, но ничего не двигается. Ровно это и произошло. */
@keyframes tick-left{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes tick-right{
  from{transform:translateX(-50%)}
  to{transform:translateX(0)}
}

.tick{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:12px;color:var(--mist);
}
.tick i{color:var(--acid);font-size:13px}
.tick b{color:var(--frost);font-weight:600}
/* Вторая строка — про недостигнутое, поэтому тише */
.ticker.back .tick{opacity:.55}

@media (prefers-reduced-motion:reduce){
  .ticker-run{animation:none}
}

/* На широком экране снимок во всю ширину колонки выглядит плакатом:
   лента перестаёт читаться как лента. Ограничиваем колонку карточки —
   пропорции 3:4 сохраняются, просто кадр меньше. */
@media (min-width:768px){
  .fcard{max-width:460px;margin-left:auto;margin-right:auto}
  .shots-track img{max-height:560px}
}

/* Последний тумблер в группе не подчёркиваем: черта вплотную к кнопке
   читается как её часть, а не как разделитель строк. */
#publish-row{border-bottom:none}
.toggle-row:last-of-type{border-bottom:none}

/* Снимок на широком экране — чуть крупнее, чем было: 460 читалось мелко,
   900 превращало ленту в плакат. */
@media (min-width:768px){
  /* Карточка узкой колонкой по центру, а подписи без боковых полей:
     на широком экране колонка и так узкая, и поля внутри неё съедали
     половину строки. */
  .fcard{max-width:560px}
  .fcard-top,
  .fcard-body,
  .fcard-acts,
  .fcard-bare{padding-left:0;padding-right:0}
  .shots-track img{max-height:680px}

  /* Шапка растягивалась во всю ширину экрана, а её содержимое жалось
     к самым краям. Держим ту же колонку, что и у остального интерфейса. */
  .topbar{
    padding-left:max(var(--pad-x), calc((100vw - 900px) / 2));
    padding-right:max(var(--pad-x), calc((100vw - 900px) / 2));
  }
}

/* Выбор темы и языка: невыбранная кнопка не должна выглядеть отключённой.
   Раньше «Светлая» на тёмном фоне читалась как недоступная — контур был
   того же тона, что у выключенных элементов. */
.theme-pick .chip,
.lang-pick .chip{
  border-color:var(--hairline);
  color:var(--ash);
  opacity:1;
}
.theme-pick .chip:hover,
.lang-pick .chip:hover{border-color:var(--frost);color:var(--frost)}
.theme-pick .chip.on,
.lang-pick .chip.on{
  background:var(--frost);color:var(--void);border-color:var(--frost);
}