/* Оценщик артефактов — оформление мини-аппа.
   Палитра тёмная «под игру», но подхватывает цвета темы Telegram там,
   где это не ломает читаемость. */

:root {
  --bg:        #14161f;
  --bg-soft:   #1c1f2b;
  --card:      #232736;
  --card-hi:   #2b3042;
  --line:      #343a4e;
  --text:      #eceef5;
  --muted:     #949bb2;
  --gold:      #d3bc8e;
  --gold-dim:  #a8946c;
  --good:      #5fd39a;
  --warn:      #f0c05a;
  --bad:       #ef7a7a;
  --radius:    14px;
  --tabbar-h:  58px;
  /* Отступ под плавающие кнопки Telegram в полноэкранном режиме (закрыть/
     назад, ещё) — их зона не пересекается с OS-овым safe-area-inset, это
     отдельное значение от Telegram WebApp API. JS выставляет реальное число
     через contentSafeAreaInset/safeAreaInset; 0 — безопасный дефолт для
     остальных клиентов. */
  --tg-safe-top: 0px;
  /* Доп. запас под таб-баром сверх env(safe-area-inset-bottom) — на части
     устройств/клиентов один только safe-area-inset слишком плотно подходит
     к домашней полосе (home indicator). */
  --home-strip: 34px;
  /* Иконка очистки поля поиска — data:URI с готовыми цветами темы (не mask:
     через mask сохраняется только альфа-канал, а тут и кружок, и крестик
     одинаково непрозрачны, поэтому крестик пропадал и оставался сплошной
     кружок — см. ::-webkit-search-cancel-button). Цвет крестика — цвет фона
     самого поля (--bg-soft), чтобы он выглядел прорезанным в кружке. */
  --icon-clear: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1f2b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23949bb2' stroke='none'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E");
  --icon-clear-hover: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1f2b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9' fill='%23eceef5' stroke='none'/%3E%3Cpath d='M9 9l6 6M15 9l-6 6'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* Сплошная маска на самой верхней полосе экрана — см. комментарий у
   #safe-top-mask в index.html. Ниже sheet'ов (20/21), но выше вкладок,
   поиска и версий, которые сами по себе тоже sticky в этой зоне. */
#safe-top-mask {
  position: fixed; top: 0; left: 0; right: 0;
  height: calc(env(safe-area-inset-top) + var(--tg-safe-top));
  background: var(--bg);
  z-index: 19;
  pointer-events: none;
}

/* Правила вроде `.sheet { display: flex }` перебивают браузерное `[hidden]`,
   и скрытая шторка продолжает перехватывать клики. Закрываем это раз и навсегда. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  overscroll-behavior-y: none;
}

body { padding-bottom: env(safe-area-inset-bottom); }

#app { max-width: 720px; margin: 0 auto; }

/* В полноэкранном режиме Telegram (requestFullscreen) страница уходит под
   статус-бар устройства и под плавающие кнопки самого Telegram — без этого
   отступа контент экранов оказывался бы под ними. env() — обычный вырез/чёлка
   ОС, --tg-safe-top — отдельно зона кнопок Telegram (см. :root). Вне
   фуллскрина оба резолвятся в 0, для остальных клиентов ничего не меняется. */
.screen { padding: calc(12px + env(safe-area-inset-top) + var(--tg-safe-top)) 14px 28px; }

/* Экраны-вкладки (Герой/Артефакты/Билды) живут над нижним таб-баром и над
   плавающей кнопкой добавления — резервируем место снизу, чтобы контент не
   прятался под ними. Прочие экраны таб-бар не показывают, но небольшой
   лишний отступ снизу им не мешает — проще резервировать всегда. */
/* Плавающей кнопки добавления больше нет (её роль забрала центральная «+»
   таб-бара) — запас снизу нужен только под сам таб-бар. */
.main-screen { padding-bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom) + var(--home-strip)); }

/* «Мои артефакты» и «Билды» держат список поверх, а «+» плавает выше
   таб-бара — обычного запаса .main-screen не хватает, и «+» перекрывает
   последнюю карточку. Резервируем место под сам круг кнопки (52px) с
   отступом, как у screen-pick. */
#screen-storage, #screen-builds {
  padding-bottom: calc(var(--tabbar-h) + 82px + env(safe-area-inset-bottom) + var(--home-strip));
}

/* Пока набирают в поиске, таб-бар и «+» только перекрывают низ списка, по
   которому и листают результаты (см. обработчики focus/blur в app.js).
   Заодно отдаём списку освободившееся место снизу. */
body.searching .tabbar,
body.searching .fab-plus,
body.searching .fab-reset { display: none; }
body.searching .main-screen { padding-bottom: 18px; }
.top-search { padding-top: 6px; }

/* ── шапка ─────────────────────────────────────────────────────────────── */

/* Фуллскрин Telegram кладёт свои плавающие кнопки (закрыть/назад, ещё) поверх
   страницы у самых краёв — фиксированная сетка 40px/1fr/40px держит заголовок
   математически по центру независимо от того, есть ли у экрана кнопка назад
   или меню «⋮»: пустая колонка не хуже занятой держит симметрию. */
.topbar {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: start;
  gap: 6px;
  padding: 6px 0 14px;
}
.topbar h1 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: .2px; }
.topbar .sub { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.topbar > div { grid-column: 2; text-align: center; min-width: 0; }

/* Заголовок без шапки — экраны без кнопки назад (полагаются на системную
   кнопку Telegram) и без подзаголовка: только имя/заголовок, повыше и
   покомпактнее, чем полноценный .topbar. */
.screen-title { margin: 2px 0 14px; font-size: 21px; font-weight: 650; letter-spacing: .2px; text-align: center; }

.topbar .back { grid-column: 1; justify-self: start; }
.topbar .menu-btn { grid-column: 3; justify-self: end; margin-top: 0; }

.back {
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--text);
  font-size: 22px; line-height: 1;
  cursor: pointer;
}
.back:active { background: var(--card-hi); }

/* ── поиск ─────────────────────────────────────────────────────────────── */

/* Поиск не липнет к верху сам по себе — только пока в нём набирают текст
   (см. .sticky-focused, включается/выключается фокусом инпута в app.js).
   Иначе залипающий блок просто откусывал экран без пользы, пока пользователь
   не искал ничего конкретного. */
.search-wrap { position: static; padding: 4px 0 10px; background: var(--bg); }
/* top не 0, а отступ под плавающие кнопки Telegram (--tg-safe-top, см. :root)
   — иначе залипшее поле оказалось бы у самого верха экрана и пряталось бы
   под системной шапкой в фуллскрине вместо того, чтобы просто оставаться
   под ней видимым. */
.search-wrap.sticky-focused { position: sticky; top: var(--tg-safe-top); z-index: 5; }

/* Строка поиска + кнопка «⋮» рядом — там, где раньше «⋮» сидела в шапке или
   в строке вкладок, теперь она у поля поиска: ближе к остальным действиям
   экрана и не мешает вкладкам скроллиться по всей ширине. */
.search-row { display: flex; align-items: center; gap: 8px; }
.search-row input { flex: 1; min-width: 0; }
.search-row .menu-btn { flex: none; }
.search-row button.primary { flex: none; }

/* ── переключатель типа артефакта («Мои артефакты») ──────────────────────── */
/* Своя строка вместо .tabs: там flex:1 растягивает все вкладки поровну —
   с шестью подписями («Все», «Цветок» … «Корона») это либо давит текст,
   либо переносит его. Тут ширина каждой вкладки по контенту, а строка
   при нехватке места просто скроллится вбок. */
.slot-tabs {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 8px 0 2px;
  scrollbar-width: none;
}
.slot-tabs::-webkit-scrollbar { display: none; }
.slot-tab {
  flex: none;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  color: var(--muted);
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.slot-tab.active { background: var(--card-hi); color: var(--text); border-color: var(--gold-dim); }

/* Поисковые поля с type="search" без явного сброса едут на нативный вид
   браузера (светлый фон, своя обводка). Правило по типу, а не по списку
   id: раньше здесь перечислялись конкретные поля, и каждое новое приезжало
   с нативным видом, пока про него не вспомнят. */
input[type="search"] {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--bg-soft);
  color: var(--text);
  font-size: 15px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"]:focus { border-color: var(--gold-dim); }

/* Нативный крестик очистки в WebKit — светлый квадратик, чужеродный на
   тёмном фоне. Подменяем на свою иконку в цвет остального интерфейса
   (mask, а не background: так цвет задаётся переменной темы). */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  cursor: pointer;
  background: var(--icon-clear) center/18px no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover { background-image: var(--icon-clear-hover); }


/* ── сетка персонажей ──────────────────────────────────────────────────── */

.char-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
}

.char {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 6px 5px 8px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.char:active { background: var(--card-hi); }
.char.dim { opacity: .45; }

.char .portrait {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--bg-soft) center/cover no-repeat;
  display: block;
  margin-bottom: 5px;
}

.char .name {
  font-size: 12px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.char .rarity-bar { position: absolute; left: 0; right: 0; top: 0; height: 3px; }
.char .no-data { font-size: 10px; color: var(--muted); }

/* ── карточки отрядов ──────────────────────────────────────────────────── */

.team {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 13px 14px;
  margin-bottom: 11px;
  cursor: pointer;
}
.team:active { background: var(--card-hi); }
/* та же карточка топа/билда внутри «С чем сравниваем» — не кликабельна,
   там незачем ни курсор-указатель, ни отклик на нажатие */
.team.no-click { cursor: default; }
.team.no-click:active { background: var(--card); }
/* заглушка вместо карточки эталона, когда эталонов у героя нет вовсе */
.team.no-profile { border-style: dashed; }
.team.no-profile .empty { margin: 0; padding: 4px 0; }

.team h3 { margin: 0; font-size: 16px; font-weight: 600; }
.team-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.akasha-link-btn {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--bg-soft); color: var(--muted); cursor: pointer;
}
.akasha-link-btn:active { background: var(--card-hi); }
/* по умолчанию 2 строки — длинные комментарии akasha раньше обрезались
   троеточием без возможности дочитать; теперь просто сворачиваем и даём
   кнопку «Показать целиком» (см. .details-toggle и делегированный
   обработчик в init()) */
.team .details {
  margin: 0 0 4px; color: var(--muted); font-size: 12.5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.team .details.expanded { -webkit-line-clamp: unset; overflow: visible; }
.details-toggle {
  display: block; margin: 0 0 10px; padding: 0;
  border: none; background: none;
  color: var(--gold-dim); font-size: 11.5px; font-weight: 600; cursor: pointer;
}

.mates { display: flex; gap: 8px; margin-bottom: 11px; flex-wrap: wrap; }
/* flex: none — иначе ячейки состава сжимаются по ширине, оставаясь 46px в
   высоту, и круглые аватары превращаются в овалы */
.mate { flex: none; width: 46px; text-align: center; }
.mate .av {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--bg-soft) center/cover no-repeat;
  border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--muted);
}
.mate .nm { font-size: 10px; color: var(--muted); margin-top: 3px; line-height: 1.2; }
/* Пустая ячейка состава — «Билды akasha» напарников не задают. Класс именно
   .blank, а не .empty: .empty — это глобальная заглушка «тут ничего нет» со
   своими отступами, из-за которых кружок раздувался в овал. */
.mate .av.blank { border-style: dashed; opacity: .45; }

.team-sets { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }

.set-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-soft);
  font-size: 12.5px;
}
.set-chip img { width: 22px; height: 22px; border-radius: 50%; background: var(--card); }
.set-chip b { color: var(--gold); font-weight: 600; }

.mains-line { font-size: 12.5px; color: var(--muted); }
.mains-line div { margin-bottom: 2px; }
.mains-line div:last-child { margin-bottom: 0; }
.mains-line b { color: var(--text); font-weight: 500; }

/* ── слоты ─────────────────────────────────────────────────────────────── */

.slots { display: flex; flex-direction: column; gap: 9px; }

.slot {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 10px 12px;
  cursor: pointer;
  min-height: 68px;
}
.slot:active { background: var(--card-hi); }
/* не .empty: этот класс уже занят общим пустым состоянием, которое центрирует
   текст и красит его в серый — пустой слот выглядел бы сломанным */
.slot.vacant { border-style: dashed; }

.slot .icon {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 10px;
  background: var(--bg-soft) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--gold-dim);
}

.slot .info { flex: 1; min-width: 0; }
.slot .slot-name { font-size: 12px; color: var(--muted); }
.slot .slot-main { font-size: 14.5px; font-weight: 600; }
.slot .slot-main .val { color: var(--gold); }
.slot .slot-set { font-size: 12px; color: var(--muted); }
.slot .slot-subs { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.slot .clear {
  flex: none;
  border: none; background: none;
  color: var(--muted); font-size: 18px;
  padding: 4px 2px; cursor: pointer;
}

/* ── кнопки ────────────────────────────────────────────────────────────── */

.actions { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }

button.primary {
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color: #241f14;
  font-size: 15.5px; font-weight: 650;
  cursor: pointer;
}
button.primary:disabled { opacity: .4; cursor: default; }
button.primary:not(:disabled):active { filter: brightness(.92); }

button.ghost {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-size: 14.5px;
  cursor: pointer;
}
button.ghost:active { background: var(--card); }

button.wide { width: 100%; margin-top: 14px; }

/* ── шторки ────────────────────────────────────────────────────────────── */

.sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 20;
}

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 21;
  max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--bg-soft);
  border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--line);
  animation: rise .18s ease-out;
}
@keyframes rise { from { transform: translateY(18px); opacity: .4; } }

.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.sheet-head h2 { margin: 0; font-size: 17px; font-weight: 600; }

.close {
  border: none; background: none;
  color: var(--muted); font-size: 19px;
  padding: 4px 6px; cursor: pointer;
}

.sheet-body {
  padding: 14px 16px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Снизу — тот же запас под домашнюю полосу, что и у таб-бара (--home-strip):
   шторка прижата к низу экрана, и без него кнопки диалога (удалить артефакт
   и т.п.) упираются в home indicator. Когда под телом есть .sheet-foot,
   отступ держит он — иначе запас удвоился бы. */
.sheet-body:last-child {
  padding-bottom: calc(20px + env(safe-area-inset-bottom) + var(--home-strip));
}

/* Кнопка вне .sheet-body — не скроллится вместе со списком сетов, всегда
   видна внизу шторки независимо от того, насколько длинный список. */
.sheet-foot {
  flex: none;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom) + var(--home-strip));
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
}
.sheet-foot .primary { margin-top: 0; }

/* ── карточка артефакта в списке ───────────────────────────────────────── */

.art {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 9px 11px;
  margin-bottom: 8px;
  cursor: pointer;
  position: relative;         /* якорь для .art-owner в углу */
}
.art:active { background: var(--card-hi); }

/* Чей это артефакт — в правом верхнем углу и только при 2+ аккаунтах.
   Вне потока: справа в строке уже стоит бейдж качества, а подпись должна
   быть именно в углу, над ним. */
.art-owner {
  position: absolute; top: 5px; right: 11px;
  max-width: 45%;
  font-size: 10.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  pointer-events: none;
}

/* ── свайп-удаление карточки артефакта ───────────────────────────────────── */
/* Кнопка удаления больше не сидит в самой карточке — она открывается
   смахиванием влево (см. attachSwipeDelete в app.js). .art-swipe — рамка с
   обрезкой, .art-swipe-body — сама карточка, которая едет поверх кнопки. */
.art-swipe { position: relative; overflow: hidden; border-radius: 12px; margin-bottom: 8px; }
.art-swipe .art-swipe-body.art,
.art-swipe .art-swipe-body.saved {
  margin-bottom: 0;
  position: relative;
  z-index: 1;
  touch-action: pan-y;
}
.art-swipe-action {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 76px;
  border: none;
  background: var(--bad);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.art .icon {
  flex: none; width: 42px; height: 42px;
  border-radius: 9px;
  background: var(--bg-soft) center/cover no-repeat;
}
/* На «Мои артефакты» картинка сета крупнее — это единственная опора для
   узнавания предмета на глаз теперь, когда карточка не занята кнопкой
   удаления (она открывается смахиванием). */
.art-swipe-body .icon { width: 58px; height: 58px; border-radius: 11px; }
.art .info { flex: 1; min-width: 0; }
.art .line1 { font-size: 14px; font-weight: 600; }
.art .line1 .val { color: var(--gold); }
.art .line2 { font-size: 12px; color: var(--muted); }

/* доп-статы карточки — сеткой 2×2: так значения выровнены друг под другом
   и читаются с одного взгляда, а не выискиваются в сплошной строке через « · » */
.subs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 12px;
  margin-top: 4px;
}
.sub-cell {
  display: flex; align-items: center; gap: 2px;
  min-width: 0;
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* внутри плотной сетки 24px раздувал бы карточку — берём заметно крупнее
   прежнего (было ~16px), но без потери компактности списка */
.sub-cell .si { width: 18px; height: 18px; vertical-align: -4px; margin-right: 2px; }
.sub-cell b { color: var(--text); font-weight: 600; margin-left: 2px; }
.art .del {
  flex: none; border: none; background: none;
  color: var(--bad); padding: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.art .badge {
  flex: none;
  font-size: 11px; color: var(--good);
  border: 1px solid var(--good); border-radius: 20px;
  padding: 1px 7px;
}

/* ── форма ─────────────────────────────────────────────────────────────── */

.field { display: block; margin-bottom: 12px; }
.field > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.field > span .hint-inline { color: var(--gold); font-weight: 500; margin-left: 4px; }

select, input.num {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  color: var(--text);
  font-size: 15px;
  outline: none;
  appearance: none;
}
select:focus, input.num:focus { border-color: var(--gold-dim); }

.main-value { margin: -4px 0 14px; font-size: 12.5px; color: var(--gold); }

.subs-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 4px 0 8px;
  font-size: 12.5px; color: var(--muted);
}

/* Стат теперь выбирается кнопкой-«пикером», а не <select> — без явного flex
   она тянулась под свой контент и отжимала поле ввода до нечитаемой узкой
   полоски. Название стата короче цифр, поэтому ему достаточно меньшей доли
   строки, а полю ввода — оставляем гарантированный минимум под «999.9». */
/* Пока в форме что-то редактируют, держим запас пустоты снизу: последние
   поля саб-статов стоят у самого низа документа, и без этого запаса
   прокрутке просто некуда их поднять из-под клавиатуры (см. обработчик
   focusin в app.js). Без фокуса отступ схлопывается. */
#screen-new-artifact:focus-within { padding-bottom: 50vh; }

/* stretch, а не center: в «выборе стата» лежит иконка 22px, из-за которой
   он выше поля ввода — раньше они стояли разной высоты. Так поле тянется
   по высоте соседа, чем бы та ни задавалась. */
.sub-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: stretch; }
.sub-row .sub-picker { flex: 1.1; min-width: 0; padding: 11px 10px; }
.sub-row .sub-picker .label { font-size: 13.5px; }
.sub-row input { flex: none; width: 76px; min-width: 76px; text-align: center; padding: 11px 6px; }
.sub-row .rolls {
  flex: none; width: 52px; font-size: 11.5px; color: var(--muted); text-align: right;
  display: flex; align-items: center; justify-content: flex-end;
}

.form-error {
  margin: 4px 0 0;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(239,122,122,.13);
  color: var(--bad);
  font-size: 13px;
}

/* ── результат ─────────────────────────────────────────────────────────── */

.score-hero {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  padding: 20px 16px 18px;
  text-align: center;
  margin-bottom: 14px;
}

/* имя героя (+ созвездие) и правка/удаление версии — только на экране
   истории версий, см. renderHistory(). Раньше имя жило в шапке экрана и
   пропадало при скролле, а правка/удаление были пунктами меню «⋮». */
.score-hero-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px; text-align: left;
}
.score-hero-name { font-size: 16.5px; font-weight: 650; min-width: 0; }
.score-hero-actions { display: flex; gap: 2px; flex: none; }

.icon-btn {
  flex: none; border: none; background: none;
  color: var(--muted); padding: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.icon-btn.bad { color: var(--bad); }

.gauge { position: relative; width: 148px; height: 148px; margin: 0 auto 12px; }
.gauge svg { transform: rotate(-90deg); }
.gauge .num {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gauge .num b { font-size: 34px; font-weight: 700; line-height: 1; }
.gauge .num small { font-size: 11px; color: var(--muted); margin-top: 3px; }

.score-hero h2 { margin: 0 0 4px; font-size: 19px; }
.score-hero p { margin: 0; color: var(--muted); font-size: 13.5px; }

.part {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 11px 13px;
  margin-bottom: 9px;
}
.part .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.part .head b { font-size: 14.5px; font-weight: 600; }
.part .head .pct { font-size: 14.5px; font-weight: 650; }
.part .bar { height: 6px; border-radius: 4px; background: var(--bg-soft); overflow: hidden; }
.part .bar i { display: block; height: 100%; border-radius: 4px; }
.part .detail { margin: 7px 0 0; font-size: 12.5px; color: var(--muted); }
.part .weight { font-size: 11px; color: var(--muted); margin-left: 6px; font-weight: 400; }

/* разбивка «что не так» по конкретным статам — раньше одной строкой через
   «; », теперь построчно, чтобы иконка стата не терялась в общем тексте */
.part-items { display: flex; flex-direction: column; gap: 6px; margin-top: 7px; }
.part-item {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}
.pi-slot { color: var(--text); font-weight: 600; flex: none; }
.pi-val { display: inline-flex; align-items: center; }
.pi-want { color: var(--gold); }
.pi-arrow { color: var(--muted); }
.pi-gap { margin-left: auto; color: var(--warn); }

.block-title { margin: 18px 0 9px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; }

/* «С чем сравниваем» — заголовок блока и «Сменить билд» в одну строку */
.compare-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.compare-head .block-title { margin: 18px 0 9px; }

table.stats { width: 100%; border-collapse: collapse; font-size: 13px; }
table.stats th {
  text-align: right; font-weight: 500; color: var(--muted);
  font-size: 11.5px; padding: 0 0 6px;
}
table.stats th:first-child { text-align: left; }
table.stats td { padding: 6px 0; border-top: 1px solid var(--line); text-align: right; }
table.stats td:first-child { text-align: left; }
table.stats .low { color: var(--bad); }
table.stats .ok { color: var(--good); }

/* Разбор по слотам: цвет полосы слева — насколько предмет подходит билду
   (см. grade_artifacts в scoring.py). */
.grade-list { display: flex; flex-direction: column; gap: 7px; }
.grade-row {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 8px 11px;
}
.grade-row.good { border-left-color: var(--good); }
.grade-row.ok   { border-left-color: var(--warn); }
.grade-row.weak { border-left-color: var(--bad); }
.grade-row .pic {
  flex: none; width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--bg-soft) center/cover no-repeat;
}
.grade-row .txt { flex: 1; min-width: 0; }
.grade-row .l1 { font-size: 13px; font-weight: 600; }
.grade-row .l2 { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.grade-row .l3 { font-size: 11px; color: var(--bad); margin-top: 2px; }
.grade-row .l3.ok { color: var(--muted); }
.grade-row .tag {
  font-size: 10px; font-weight: 600;
  border-radius: 20px; padding: 1px 7px; margin-left: 5px;
  border: 1px solid currentColor;
}
.grade-row.good .tag { color: var(--good); }
.grade-row.ok   .tag { color: var(--warn); }
.grade-row.weak .tag { color: var(--bad); }

.grade-row .l3-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.grade-row .l3-row .l3 { margin-top: 0; flex: 1; }
.grade-detail-toggle {
  flex: none; padding: 0; border: none; background: none;
  color: var(--gold-dim); font-size: 10.5px; font-weight: 600; cursor: pointer;
}
.grade-detail {
  display: none;
  margin-top: 7px; padding-top: 7px;
  border-top: 1px dashed var(--line);
}
.grade-detail.open { display: block; }
.gd-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--muted);
  padding: 2px 0;
}
.gd-row.need { color: var(--bad); }
.gd-stat { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.gd-val { color: var(--text); white-space: nowrap; }
.gd-row.need .gd-val { color: var(--bad); }
.gd-ref { flex: none; white-space: nowrap; }

.advice { list-style: none; padding: 0; margin: 0; }
.advice li {
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: 10px;
  background: var(--card);
  padding: 9px 12px;
  margin-bottom: 7px;
  font-size: 13px;
}
/* цвет полосы = насколько срочно менять предмет */
.advice li.sev-high { border-left-color: var(--bad); }
.advice li.sev-mid  { border-left-color: var(--warn); }
.advice li.sev-low  { border-left-color: var(--gold-dim); }

.cv-row {
  display: flex; gap: 10px; margin-bottom: 14px;
}
.cv-box {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 10px 12px;
  text-align: center;
}
.cv-box small { display: block; font-size: 11.5px; color: var(--muted); }
.cv-box b { font-size: 19px; }

/* ── фильтр по стихиям ─────────────────────────────────────────────────── */

.elements { display: flex; gap: 6px; padding: 8px 0 2px; }

.el {
  flex: 1 1 0;
  min-width: 0;
  padding: 7px 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
  text-align: center;
  /* невыбранные приглушены, но узнаваемы */
  opacity: .38;
  filter: grayscale(.7);
  transition: opacity .12s, filter .12s;
}
.el img { display: block; width: 26px; height: 26px; margin: 0 auto; }
.el.on { opacity: 1; filter: none; background: var(--card-hi); }

/* ── иконки статов ─────────────────────────────────────────────────────── */

.si {
  display: inline-block;
  width: 24px; height: 24px;
  vertical-align: -7px;
  margin-right: 4px;
  object-fit: contain;
  flex: none;
}

/* ── выбор из списка с картинками ──────────────────────────────────────── */

.picker {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  color: var(--text);
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}
.picker:active { background: var(--card-hi); }
.picker .pic {
  flex: none; width: 30px; height: 30px;
  object-fit: contain;
  border-radius: 7px;
  background: var(--bg-soft);
}
.picker .pic:not([src]), .picker .pic[src=""] { visibility: hidden; }
.picker .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker .chev { flex: none; color: var(--muted); font-size: 19px; }

/* шторка выбора лежит поверх шторки создания артефакта */
.sheet.over { z-index: 23; }
.sheet-backdrop.over { z-index: 22; }

.choice {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}
.choice:active { background: var(--card); }
.choice.on { border-color: var(--gold); background: var(--card); }
.choice img {
  flex: none; width: 34px; height: 34px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--bg-soft);
}
.choice .nm { flex: 1; min-width: 0; font-size: 14px; }
.choice .sub2 { font-size: 11.5px; color: var(--muted); }

.choice-sym {
  flex: none; width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: var(--gold);
}

#choose-search { margin-bottom: 10px; }

/* ── детальный вид артефакта ───────────────────────────────────────────── */

.art-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.art-head .pic {
  flex: none; width: 62px; height: 62px;
  border-radius: 12px;
  background: var(--bg-soft) center/cover no-repeat;
}
.art-head .who { flex: 1; min-width: 0; }
.art-head .set { font-size: 15px; font-weight: 600; }
/* не .slot: этот класс уже занят слотом на экране сборки — там крупная
   карточка с рамкой, и подпись превращалась в пустой блок */
.art-head .where { font-size: 12.5px; color: var(--muted); }
.art-head .main { font-size: 14px; margin-top: 3px; }
.art-head .main b { color: var(--gold); }

.q-row { display: flex; gap: 10px; margin-bottom: 14px; }
.q-box {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 9px 11px;
  text-align: center;
}
.q-box small { display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.q-box .q-val { display: flex; align-items: baseline; justify-content: center; gap: 5px; }
.q-box b { font-size: 18px; }
.q-box .cap, .q-box .q-sub { font-size: 11.5px; color: var(--muted); font-weight: 400; }

/* число роллов — цветом сразу видно, «9-рольный» артефакт или нет */
.q-box .q-sub.rolls-low  { color: var(--bad); }
.q-box .q-sub.rolls-mid  { color: var(--warn); }
.q-box .q-sub.rolls-high { color: var(--good); }

.info-btn {
  flex: none;
  width: 15px; height: 15px;
  border: 1px solid var(--muted);
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font-size: 10px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-style: italic; font-family: Georgia, serif;
}
.info-btn:active { border-color: var(--gold); color: var(--gold); }

table.rolls { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 6px; }
table.rolls th {
  text-align: right; font-weight: 500; color: var(--muted);
  font-size: 11.5px; padding: 0 0 6px;
}
table.rolls th:first-child { text-align: left; }
table.rolls td { padding: 7px 0; border-top: 1px solid var(--line); text-align: right; }
table.rolls td:first-child { text-align: left; }
table.rolls .cap { color: var(--muted); font-size: 11.5px; }
table.rolls .n { color: var(--muted); font-size: 11.5px; }

/* ── артефакт внутри рекомендации ──────────────────────────────────────── */

.rec-art {
  display: flex; align-items: center; gap: 9px;
  margin-top: 8px; padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.rec-art .pic {
  flex: none; width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--bg-soft) center/cover no-repeat;
}
.rec-art .txt { flex: 1; min-width: 0; font-size: 11.5px; color: var(--muted); }
.rec-art .txt b { color: var(--text); font-weight: 600; }
.rec-art .hl { color: var(--gold); font-weight: 600; }

/* доп. статы рекомендованного предмета — раньше одной строкой через «·»,
   теперь таблицей 2×2 (артефакт даёт максимум 4 саб-стата) */
.rec-subs-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3px 10px; margin-top: 4px;
}
.rec-subs-empty { margin-top: 4px; }

/* ── нижняя навигация ──────────────────────────────────────────────────── */

.tabbar.hidden-bar { display: none; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 15;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--home-strip));
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--home-strip));
  display: flex; align-items: stretch; justify-content: space-around;
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
}

.tabbar-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  border: none; background: none;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}
.tabbar-btn svg { width: 23px; height: 23px; }
.tabbar-btn.active { color: var(--gold); }

/* Плавающая кнопка «+» — отдельно от таб-бара, в правом нижнем углу поверх
   контента; своя роль (см. handlePlusClick) не зависит от того, где кнопка
   физически нарисована. */
.fab-plus {
  position: fixed;
  right: 16px;
  bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom) + var(--home-strip));
  z-index: 16;
  width: 52px; height: 52px;
  border: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  color: #241f14;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(211,188,142,.35);
}
/* На экранах без таб-бара (выбор артефакта в слот) под кнопкой нет панели —
   опускаем её к самому низу, оставив только системный отступ. */
#screen-pick .fab-plus { bottom: calc(16px + env(safe-area-inset-bottom) + var(--home-strip)); }
/* …и резервируем под неё место, чтобы последняя карточка не пряталась */
#screen-pick { padding-bottom: calc(84px + env(safe-area-inset-bottom) + var(--home-strip)); }

.fab-plus svg { width: 24px; height: 24px; }
.fab-plus:active { filter: brightness(.94); }
.fab-plus:disabled { opacity: .4; pointer-events: none; }
.fab-plus.hidden-bar { display: none; }

/* Плавающая кнопка сброса фильтра сетов — только когда фильтр реально
   что-то прячет; левый нижний угол, чтобы не спорить с «+» за правый. */
.fab-reset {
  position: fixed;
  left: 16px;
  bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom) + var(--home-strip));
  z-index: 16;
  padding: 11px 16px;
  border: none; border-radius: 20px;
  background: var(--card-hi);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
}
.fab-reset:active { background: var(--card); }


/* ── шапка с меню «⋮» ──────────────────────────────────────────────────── */

.menu-btn {
  flex: none;
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--text);
  font-size: 20px; line-height: 1;
  cursor: pointer;
}
.menu-btn:active { background: var(--card-hi); }

/* ── строка вкладок аккаунтов + меню «⋮» рядом с ней ─────────────────────── */

/* На «Мои артефакты»/«Мои билды» заголовка-шапки больше нет вовсе — экран
   начинается сразу со строки вкладок аккаунтов, поднятой к самому верху (под
   плавающими кнопками Telegram). «⋮» сидит в этой же строке, справа. Сами
   вкладки скроллятся по горизонтали, если аккаунтов много, а кнопка
   остаётся на месте — не уезжает вместе с ними. */
.tabs-row {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 13px;
}
/* .top — эта строка теперь первый элемент экрана: небольшой зазор под
   отступ .screen (там уже учтён --tg-safe-top), а не полноразмерный margin
   шапки, которой здесь больше нет. */
.tabs-row.top { margin-top: 2px; }
.tabs-row .tabs {
  flex: 1; min-width: 0;
  margin-bottom: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs-row .tabs::-webkit-scrollbar { display: none; }
.tabs-row .tabs .tab { flex: none; white-space: nowrap; }
/* margin-left:auto, а не justify-content на строке: так кнопка уезжает
   вправо и когда вкладки скрыты (один аккаунт), и когда видны — без
   зависимости от :has(), который старые WebView могут не понимать */
.tabs-row .menu-btn { flex: none; margin-left: auto; }

/* ── массовое выделение ────────────────────────────────────────────────── */

.bulk-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
  font-size: 13.5px;
}
.bulk-bar span { flex: 1; color: var(--muted); }

button.link {
  border: none; background: none;
  color: var(--text); font-size: 13.5px;
  padding: 6px 4px; cursor: pointer;
}
button.bad {
  border: 1px solid var(--bad);
  border-radius: 10px;
  background: transparent;
  color: var(--bad);
  font-size: 13.5px; font-weight: 600;
  padding: 8px 14px;
  cursor: pointer;
}
button.bad:active { background: rgba(239,122,122,.12); }
button.wide-auto { width: auto; margin-top: 0; }

.pick-box {
  flex: none; width: 20px; height: 20px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #241f14;
}
.picked .pick-box { background: var(--gold); border-color: var(--gold); }

/* ── сортировка ────────────────────────────────────────────────────────── */

/* ── фильтр по сетам (в шторке сортировки) ────────────────────────────── */

#set-filter-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.set-filter-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
}
.set-filter-row.on { border-color: var(--gold); background: var(--card-hi); }
.set-filter-row img {
  flex: none; width: 30px; height: 30px;
  object-fit: contain;
  border-radius: 7px;
  background: var(--bg-soft);
}
.set-filter-row span { flex: 1; min-width: 0; font-size: 13.5px; }

/* ── список синхронизированных аккаунтов (Настройки) ─────────────────────── */

.account-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  margin-bottom: 8px;
}
.account-row .info { flex: 1; min-width: 0; }
.account-row .nm { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.account-row .uid { font-size: 12px; color: var(--muted); margin-top: 1px; }
.account-row .badge-primary {
  flex: none;
  font-size: 10px; font-weight: 600;
  color: #241f14;
  background: linear-gradient(135deg, var(--gold), var(--gold-dim));
  border-radius: 20px;
  padding: 1px 8px;
}
.account-row .sync {
  flex: none; border: none; background: none;
  color: var(--muted); padding: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.account-row .del {
  flex: none; border: none; background: none;
  color: var(--bad); padding: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* ── подтверждение действия ───────────────────────────────────────────── */

#confirm-buttons { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }

.sort-dir { display: flex; gap: 8px; margin-top: 12px; }
.dir-btn {
  flex: 1;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  color: var(--text);
  font-size: 13.5px;
  cursor: pointer;
}
.dir-btn.active { border-color: var(--gold); background: var(--card-hi); color: var(--gold); }

/* ── вкладки ───────────────────────────────────────────────────────────── */

.tabs {
  display: flex; gap: 6px;
  padding: 4px;
  margin-bottom: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
}
.tab {
  flex: 1;
  padding: 9px 6px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 14px; font-weight: 550;
  cursor: pointer;
}
.tab.active { background: var(--card-hi); color: var(--text); }
.tab small { display: block; font-size: 11px; font-weight: 400; opacity: .75; }

/* ── оружие ────────────────────────────────────────────────────────────── */

.weapons { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }

.weapon-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 3px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-soft);
  font-size: 12.5px;
}
.weapon-chip img {
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--card); object-fit: cover;
}
.weapon-chip .cnt { color: var(--muted); font-size: 11px; }

/* ── сохранённые билды ─────────────────────────────────────────────────── */

.saved {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
}
.saved:active { background: var(--card-hi); }
.saved.picked { border-color: var(--gold); }

.saved .box {
  flex: none; width: 22px; height: 22px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #241f14;
}
.saved.picked .box { background: var(--gold); border-color: var(--gold); }

.saved .av-wrap { position: relative; flex: none; }
.saved .av {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-soft) center/cover no-repeat;
  border: 2px solid var(--line);
}
.saved .set-badge {
  position: absolute; right: -5px; bottom: -3px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--card) center/cover no-repeat;
  border: 1.5px solid var(--bg-soft);
}
.saved .info { flex: 1; min-width: 0; }
.saved .nm { font-size: 14px; font-weight: 600; }
.saved .lb {
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.saved .dt { font-size: 11px; color: var(--muted); }
.saved .vc {
  font-size: 10.5px; color: var(--gold);
  border: 1px solid var(--gold-dim); border-radius: 20px;
  padding: 0 6px; margin-left: 5px;
}
.saved .sc { flex: none; font-size: 17px; font-weight: 700; }
/* процент и под ним владелец — правая колонка карточки */
.saved .sc-wrap { flex: none; text-align: right; }
/* чей это герой — только при 2+ синхронизированных аккаунтах */
.saved .owner {
  flex: none;
  font-size: 10.5px; color: var(--muted);
  max-width: 84px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 2px;
}

/* синхронизированный герой без единой посчитанной версии — приглушённая
   карточка, чтобы не путать с реальным результатом */
.saved.pending { border-style: dashed; }
.saved .pending-label { color: var(--gold-dim); font-style: italic; }
.saved .del {
  flex: none; border: none; background: none;
  color: var(--bad); font-size: 15px; padding: 6px; cursor: pointer;
}

/* ── версии билда персонажа ────────────────────────────────────────────── */

.history-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.history-toolbar .sub { margin: 0; color: var(--muted); font-size: 13px; }

/* Липнут к верху экрана при скролле, чтобы переключать версии можно было
   без прокрутки назад — и сжимаются, чтобы не отъедать слишком много места
   у контента, пока висят поверх него. top — отступ под плавающие кнопки
   Telegram (--tg-safe-top, см. :root и .search-wrap.sticky-focused) —
   иначе залипшие чипы оказались бы у самого верха и в фуллскрине прятались
   бы под системной шапкой вместо того, чтобы просто оставаться под ней. */
.versions {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 8px 0 8px;
  margin: 0 -14px 14px;
  padding-left: 14px; padding-right: 14px;
  position: sticky; top: var(--tg-safe-top); z-index: 6;
  background: var(--bg);
  transition: padding .15s ease;
}
.versions.shrink { padding-top: 4px; padding-bottom: 4px; }
.version-chip {
  flex: none;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  text-align: center;
  cursor: pointer;
  min-width: 84px;
  transition: padding .15s ease, transform .15s ease;
}
.versions.shrink .version-chip { padding: 5px 10px; transform: scale(.92); }
.version-chip.active { border-color: var(--gold); background: var(--card-hi); }
.version-chip .vsc { font-size: 15px; font-weight: 700; }
.version-chip .vdt { font-size: 10.5px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.version-chip .vac { font-size: 10.5px; color: var(--gold-dim); margin-top: 1px; white-space: nowrap; }
.versions.shrink .vdt, .versions.shrink .vac { display: none; }

table.cmp .better { color: var(--good); }
table.cmp .worse  { color: var(--bad); }

/* ── все билды за карточкой топа/билда ────────────────────────────────── */

#all-builds-title { margin: 0 0 12px; color: var(--muted); font-size: 13px; }

.all-builds-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 10px; padding: 9px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-soft); color: var(--text);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.all-builds-btn:active { background: var(--card-hi); }

.pbuild {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  margin-bottom: 8px;
  overflow: hidden;
}
.pbuild-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 11px 13px;
  border: none; background: none; color: var(--text);
  font-size: 13.5px; cursor: pointer;
}
.pbuild-nm { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbuild-cv { flex: none; color: var(--gold); font-weight: 600; }
.pbuild-head .chev { flex: none; color: var(--muted); font-size: 19px; transition: transform .15s ease; }
.pbuild.open .pbuild-head .chev { transform: rotate(90deg); }
.pbuild-arts { display: none; padding: 0 11px 11px; }
.pbuild.open .pbuild-arts { display: block; }
.pbuild-arts .art { cursor: default; }
.pbuild-arts .art:active { background: var(--card); }

/* ── результат импорта витрины ─────────────────────────────────────────── */

.imported {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 7px 11px;
  margin-bottom: 6px;
}
.imported .av {
  flex: none; width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-soft) center/cover no-repeat;
  border: 2px solid var(--line);
}
.imported .nm { flex: 1; min-width: 0; font-size: 13.5px; }
.imported .nm small {
  display: block; font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.imported .cnt { flex: none; font-size: 12px; color: var(--muted); }

/* ── сравнение ─────────────────────────────────────────────────────────── */

.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; }

table.cmp { border-collapse: collapse; font-size: 13px; min-width: 100%; }
table.cmp th, table.cmp td {
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  text-align: center;
  white-space: nowrap;
}
table.cmp th:first-child, table.cmp td:first-child {
  text-align: left;
  position: sticky; left: 0;
  background: var(--bg);
  color: var(--muted);
  font-weight: 400;
}
table.cmp td:first-child .si { width: 16px; height: 16px; vertical-align: -3px; margin-right: 3px; }
table.cmp thead th { border-top: none; vertical-align: bottom; }
table.cmp .hero { display: flex; flex-direction: column; align-items: center; gap: 4px; }
table.cmp .hero img { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-soft); }
table.cmp .hero b { font-size: 12.5px; font-weight: 600; }
table.cmp .hero small { color: var(--muted); font-size: 10.5px; max-width: 110px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.cmp .big { font-size: 18px; font-weight: 700; }
table.cmp .best { color: var(--good); }

/* Имя героя — в углу таблицы, слева от колонок версий (отдельной шапки у
   экрана больше нет). */
.cmp-hero { display: flex; align-items: center; gap: 8px; }
.cmp-hero .av {
  flex: none; width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bg-soft) center/cover no-repeat;
  border: 2px solid var(--line);
}
.cmp-hero .nm { font-size: 14px; font-weight: 650; color: var(--text); }
/* название билда длинное — единственная строка, которой можно переноситься */
table.cmp td.cmp-build {
  white-space: normal;
  max-width: 140px;
  font-size: 11.5px;
  color: var(--muted);
}

/* заголовки-разделители секций («Артефакты», «Саб-статы») внутри той же
   таблицы — не отдельная таблица, чтобы колонки версий не разъезжались */
table.cmp .cmp-section td {
  text-align: left;
  color: var(--gold-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  background: var(--bg);
  position: static;
}

.cmp-art { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cmp-art-pic {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--bg-soft) center/cover no-repeat;
}
.cmp-art-txt { display: flex; align-items: center; gap: 2px; font-size: 11.5px; white-space: nowrap; }
.cmp-art-txt .si { width: 16px; height: 16px; margin-right: 1px; vertical-align: -3px; }

/* ── прочее ────────────────────────────────────────────────────────────── */

.hint {
  margin: 0 0 12px;
  padding: 9px 11px;
  border-radius: 10px;
  border-left: 3px solid var(--gold-dim);
  background: var(--card);
  color: var(--muted);
  font-size: 12.5px;
}

.actions.tight { margin-top: 0; margin-bottom: 12px; }

.empty { color: var(--muted); text-align: center; padding: 26px 10px; font-size: 14px; }

.toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: 40;
  padding: 10px 16px;
  border-radius: 20px;
  background: rgba(20,22,31,.96);
  border: 1px solid var(--line);
  font-size: 13.5px;
  max-width: 90vw;
}

.loader {
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(20,22,31,.6);
  z-index: 50;
}
.loader.on { display: flex; }
.spin {
  width: 34px; height: 34px;
  border: 3px solid var(--line);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: sp .8s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }