/* ============================================================
   Card List — стили
   ============================================================ */

:root{
  --bg:#0f1115; --panel:#171a21; --panel-2:#1e222b;
  --text:#e6e9ef; --muted:#8b93a1; --border:#262b36;
  --accent:#4c8bf5; --star:#ffc107; --ok:#4caf50; --err:#e91e63;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
              "Helvetica Neue",Arial,sans-serif;line-height:1.4;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;background:var(--panel);
  border-bottom:1px solid var(--border);
  font-size:14px;position:relative;z-index:100;
}
.topbar .brand{font-weight:700;font-size:16px;letter-spacing:.02em}
.topbar .brand:hover{color:var(--accent)}
.topbar-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--muted)}
.topbar-right .user{color:var(--text);font-weight:500}
.topbar-right a{color:var(--muted);transition:color .15s}
.topbar-right a:hover{color:var(--text)}
.topbar-right .link-btn,
.link-btn{
  background:none;border:1px solid var(--border);border-radius:6px;
  color:var(--muted);cursor:pointer;font-size:12px;
  padding:4px 10px;transition:background .15s,border-color .15s,color .15s;
}
.topbar-right .link-btn:hover,
.link-btn:hover{background:var(--panel-2);border-color:#3a4150;color:var(--text)}

/* Кто участвовал в создании коллекции: строка в шапке выпуска. Ники — ссылки
   на страницы авторов, поэтому оформляем их заметно, но не громче заголовка. */
.collection-authors{
  margin-top:10px;font-size:13px;color:var(--muted);line-height:1.6;
}
.collection-authors .ca-label{ margin-right:4px; }
.collection-authors a{
  color:var(--text);text-decoration:none;border-bottom:1px dotted var(--border);
  transition:color .15s,border-color .15s;
}
.collection-authors a:hover{ color:var(--accent);border-bottom-color:var(--accent); }

/* Страница автора — витрина: крупная шапка, монограмма вместо аватара,
   площадки автора кнопками с иконками. Аватара у нас нет, а пустое место в
   шапке оставлять жалко. */
.author-card{
  display:flex;gap:18px;align-items:flex-start;margin-top:6px;
}
.author-avatar{
  flex:0 0 auto;width:84px;height:84px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:800;line-height:1;color:var(--accent);
  background:radial-gradient(circle at 32% 26%, rgba(76,139,245,.26), rgba(76,139,245,.05));
  border:1px solid var(--border);
  user-select:none;
}
.author-card-body{ min-width:0;flex:1; }
.author-card-body h1{ margin:0;font-size:30px;line-height:1.15; }
.author-handle{ color:var(--muted);font-size:14px;margin-top:3px; }
.author-card-body .meta{ margin-top:7px; }
.author-bio{
  margin:12px 0 0;max-width:760px;color:var(--text);font-size:15px;line-height:1.65;
}
.author-links{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;
}
.author-link{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px;border:1px solid var(--border);border-radius:12px;
  background:var(--panel);color:var(--text);text-decoration:none;
  font-size:14px;font-weight:600;
  transition:transform .12s,border-color .15s,box-shadow .15s;
}
.author-link:hover{
  transform:translateY(-1px);
  border-color:var(--brand,var(--accent));
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.author-link .al-ico{
  display:inline-flex;width:24px;height:24px;
  color:var(--brand,var(--accent));
}
.author-link .al-ico svg{ width:24px;height:24px; }
.author-link .al-out{ color:var(--muted);font-size:12px; }

/* Фирменные цвета площадок, подобранные под тёмную тему: чёрный логотип X или
   тёмно-синий Tumblr на тёмном фоне были бы не видны. */
.svc-telegram{ --brand:#229ed9; }
.svc-vk{ --brand:#3f8cff; }
.svc-tumblr{ --brand:#93a4bd; }
.svc-youtube{ --brand:#ff4d4d; }
.svc-instagram{ --brand:#e1306c; }
.svc-x{ --brand:#d7dce6; }
.svc-boosty{ --brand:#f5a623; }
.svc-patreon{ --brand:#f96854; }
.svc-deviantart{ --brand:#05cc47; }
.svc-artstation{ --brand:#13aff0; }
.svc-link{ --brand:#8b93a7; }

.author-group{ margin-top:22px; }

@media (max-width:640px){
  .author-card{ flex-direction:column;gap:12px; }
  .author-avatar{ width:64px;height:64px;font-size:26px; }
  .author-card-body h1{ font-size:24px; }
  .author-link{ padding:8px 13px;font-size:13px; }
}

/* Подписка на новинки в шапке: состояние читается колокольчиком и цветом.
   Выключена — обычная серая кнопка, включена — акцентная с бубенцом. */
.sub-btn{white-space:nowrap}
.sub-btn .sub-ico{opacity:.7}
.sub-btn.on{border-color:var(--accent);color:var(--accent)}
.sub-btn.on .sub-ico{opacity:1}

/* ============================================================
   HEADER СТРАНИЦ
   ============================================================ */
header.site{padding:24px 24px 12px;border-bottom:1px solid var(--border)}
header.site h1{margin:0 0 4px;font-size:24px}
header.site .meta{color:var(--muted);font-size:14px}
header.site .back{
  display:inline-block;margin-bottom:8px;color:var(--muted);
  font-size:13px;padding:4px 10px;border:1px solid var(--border);
  border-radius:999px;background:var(--panel);
}
header.site .back:hover{color:var(--text);border-color:#3a4150}

main{padding:24px}

/* ============================================================
   ГЛАВНАЯ: СЕТКА ТАЙТЛОВ
   ============================================================ */
.titles-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
}
.title-card{
  background:var(--panel);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.title-card:hover{
  transform:translateY(-3px);border-color:#3a4150;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.title-card .cover{
  position:relative;
  background:var(--panel-2);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  border-radius:15px;
  box-shadow:0 3px 10px rgba(0,0,0,.4);
  transition:box-shadow .2s ease;
}
.title-card:hover .cover{box-shadow:0 5px 16px rgba(0,0,0,.55)}
.title-card .cover img{width:100%;height:100%;object-fit:cover;display:block}
.title-card .cover::after{
  content:'';position:absolute;inset:0;background:transparent;z-index:1;
}
.title-card .cover.empty{color:var(--muted);font-size:13px}
.title-card .info{padding:14px 16px;border-top:1px solid var(--border)}
.title-card h3{margin:0 0 4px;font-size:16px}
.title-card .count{color:var(--muted);font-size:13px}

/* ============================================================
   STICKY-НАВИГАЦИЯ
   ============================================================ */
.sticky-nav{
  position:sticky;top:0;z-index:10;
  background:rgba(15,17,21,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
nav.tabs{display:flex;flex-wrap:wrap;gap:8px;padding:10px 24px}
nav.tabs a{
  color:var(--text);padding:5px 12px;
  border-radius:999px;border:1px solid var(--border);
  background:var(--panel);font-size:13px;
  transition:background .15s,border-color .15s;
  user-select:none;
}
nav.tabs a:hover{background:var(--panel-2);border-color:#3a4150}
nav.tabs a.active{background:var(--accent);border-color:var(--accent);color:#fff}
nav.tabs.tabs-state{
  border-top:1px solid var(--border);
  background:rgba(20,23,28,.5);
  padding-top:6px;padding-bottom:6px;
}
nav.tabs.tabs-state a{font-size:12px;padding:4px 10px;background:transparent}

/* Приватность и ссылка в шапке «Моей коллекции».
   Стоит в одной строке со статистикой и прижата вправо: шапка от неё не
   становится выше, а поделиться можно не уходя в профиль. На узком экране
   блок переносится на свою строку. */
.collection-stats{align-items:flex-start}
.share-block{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin-left:auto;align-self:flex-start;
}
.share-label{
  font-size:12px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;
}
/* Специфичность важна: ниже по файлу объявлен `.privacy-options` со
   `flex-direction: column`, и при равной специфичности он побеждал — режимы
   вставали в столбик и растягивали шапку. */
.privacy-options.privacy-options-compact{
  display:flex;flex-direction:row;flex-wrap:wrap;gap:4px;margin-top:0;
}
.privacy-options-compact .privacy-option{
  padding:4px 10px;font-size:12px;border-radius:999px;
}
.share-copy{
  padding:5px 10px;font-size:12px;cursor:pointer;white-space:nowrap;
  color:var(--text);background:var(--panel-2);
  border:1px solid var(--border);border-radius:999px;
  transition:border-color .15s,color .15s;
}
.share-copy:hover{border-color:var(--accent);color:var(--accent)}
.share-copy[hidden]{display:none}
.share-block .privacy-status{margin:0;font-size:11px}

@media (max-width:900px){
  .share-block{margin-left:0;width:100%}
}

/* Персонаж в модалке — ссылка на страницу всех его карт */
.cv-char{transition:border-color .15s,color .15s}
a.cv-char:hover{border-color:var(--accent);color:var(--accent)}

/* Сводка по коллекционерам в модалке карты: три числа без имён */
.cv-community{
  margin:14px 0 0;padding:12px 14px;
  border:1px solid var(--border);border-radius:12px;
  background:rgba(20,23,28,.5);
}
.cv-community-title{
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted,#8b93a5);margin-bottom:10px;
}
.cv-stats{display:flex;gap:10px;flex-wrap:wrap}
.cv-stat{
  flex:1 1 0;min-width:88px;
  display:flex;flex-direction:column;gap:2px;align-items:center;
  padding:8px 10px;border-radius:10px;
  border:1px solid var(--border);background:var(--panel);
  cursor:default;
}
.cv-stat-value{font-size:18px;font-weight:700;color:var(--text);line-height:1.1}
.cv-stat-label{font-size:11px;color:var(--muted,#8b93a5);text-align:center}

/* «Есть на обмен» в модалке: видно только владельцу отметки «хочу».
   Кнопка ведёт прямо в чат Telegram — это и есть весь смысл блока, поэтому
   она крупная и с иконкой, а не строчкой текста со ссылкой. */
.cv-traders{
  margin:12px 0 0;padding:12px 14px;
  border:1px solid var(--border);border-radius:12px;
  background:rgba(20,23,28,.5);
}
/* «Предложить обмен» в блоке совпадений: до начатого обмена вместо контактов */
.trade-offer{display:inline-flex;align-items:center;gap:8px;margin-top:7px}
.trade-offer-who{font-size:12px;color:var(--muted)}
.trade-offer-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;font-size:12px;line-height:1.3;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
}
.trade-offer-btn:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}
/* В модалке карты тот же выбор: имя на сайте и кнопка до начала обмена */
.cv-trader-offer{display:inline-flex;align-items:center;gap:8px;margin:2px 6px 2px 0}
.cv-trader-who{font-size:12px;color:var(--muted)}

.cv-traders-list{margin-top:8px}

.cv-traders-list{display:flex;flex-wrap:wrap;gap:8px}
.cv-trader{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:999px;
  border:1px solid rgba(56,168,240,.45);
  background:rgba(56,168,240,.12);
  color:var(--text);text-decoration:none;
  font-size:13px;font-weight:600;
  transition:background .15s,border-color .15s,transform .15s;
}
.cv-trader:hover{
  background:rgba(56,168,240,.22);
  border-color:rgba(56,168,240,.75);
  transform:translateY(-1px);
}
.cv-trader-ico{font-size:13px;line-height:1}
.cv-trader-nick{white-space:nowrap}
.cv-traders-more{
  margin-top:8px;font-size:12px;color:var(--muted,#8b93a5);
}
.cv-traders-empty{
  font-size:13px;color:var(--muted,#8b93a5);
}

/* «Есть совпадения на обмен с пользователем» на «Моей коллекции»: карты
   вишлиста, на которые есть обмен, с кнопками-никами. Это отдельная секция, а
   не карточки в
   сетке: здесь важен не состав коллекции, а кому и по какой карте писать.
   Кнопки-ники — те же `.cv-trader`, что и в модалке карты: одно действие
   выглядит одинаково в обоих местах. */
.trade-help{
  margin:18px 0 6px;padding:14px 16px;
  border:1px solid var(--border);border-radius:14px;
  background:linear-gradient(180deg,rgba(56,168,240,.07),rgba(20,23,28,.4));
}
.trade-help-head{
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
  justify-content:space-between;margin-bottom:10px;
}
.trade-help-head h2{margin:0;font-size:16px}
.trade-help-sub{font-size:12px;color:var(--muted,#8b93a5)}
.trade-help-off{
  margin:0 0 10px;font-size:12px;color:#e2b33c;
}
.trade-help-off a{color:inherit;text-decoration:underline}
.trade-help-list{display:flex;flex-direction:column;gap:10px}
.trade-help-row{
  display:flex;gap:12px;align-items:flex-start;
  padding:8px;border-radius:10px;
  background:rgba(20,23,28,.45);border:1px solid var(--border);
}
.trade-help-thumb{flex:0 0 96px;width:96px}
.trade-help-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.trade-help-name{
  font-size:13px;font-weight:600;color:var(--text);text-decoration:none;
}
.trade-help-name:hover{color:#64b5f6}
.trade-help-coll{font-size:11px;color:var(--muted,#8b93a5)}
.trade-help-more{margin:10px 0 0;font-size:12px;color:var(--muted,#8b93a5)}

@media (max-width:560px){
  .trade-help-thumb{flex-basis:72px;width:72px}
}

/* Выпуск на карточке страницы персонажа: карты разных выпусков идут вперемешку */
.card-collection{
  display:inline-block;margin:2px 0 4px;padding:1px 7px;
  border-radius:999px;font-size:10px;letter-spacing:.03em;
  color:var(--muted,#8b93a5);border:1px solid var(--border);
}

/* Скрывающийся фильтр персонажей: на иных выпусках вкладок под три десятка,
   и в развёрнутом виде они выдавливают карты с экрана. Списком управляет
   сам браузер через <details>, скрипт только подписывает выбор и закрывает. */
details.char-filter{border-top:1px solid var(--border);background:rgba(20,23,28,.5)}
details.char-filter>summary{
  display:flex;align-items:center;gap:10px;
  padding:9px 24px;cursor:pointer;list-style:none;
  font-size:13px;color:var(--text);user-select:none;
}
details.char-filter>summary::-webkit-details-marker{display:none}
details.char-filter>summary::before{
  content:"▸";font-size:11px;color:var(--muted,#8b93a5);
  transition:transform .15s;
}
details.char-filter[open]>summary::before{transform:rotate(90deg)}
details.char-filter>summary:hover{background:var(--panel-2)}
.char-filter-title{color:var(--muted,#8b93a5)}
.char-filter-current{
  color:var(--accent);font-weight:600;
  max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.char-filter-count{
  margin-left:auto;font-size:11px;color:var(--muted,#8b93a5);
  border:1px solid var(--border);border-radius:999px;padding:1px 8px;
}

/* ============================================================
   БЛОКИ РЕДКОСТЕЙ И СЕТКА КАРТ
   ============================================================ */
/* Редкость — свёрнутая секция (details), заголовок стал summary. */
.rarity-block{margin-bottom:14px}
.rarity-block>summary{
  margin:0 0 12px;font-size:15px;
  text-transform:uppercase;letter-spacing:.05em;
  display:flex;align-items:baseline;gap:8px;
  cursor:pointer;list-style:none;
  padding:8px 10px;border-radius:8px;
  border:1px solid var(--border);background:var(--panel-2);
}
.rarity-block>summary::-webkit-details-marker{display:none}
.rarity-block>summary::before{
  content:'▸';color:var(--muted);font-size:13px;
}
.rarity-block[open]>summary::before{content:'▾'}
.rarity-block[open]>summary{margin-bottom:12px}
.rarity-block .grid{margin:0 0 14px}
.rarity-block>summary .cnt{
  color:var(--muted);font-weight:400;font-size:13px;
  text-transform:none;letter-spacing:0;
}
.grid{
  display:grid;
  /* Было 220 px: на 1440 выходило 4 карты в ряд. 190 px даёт шесть в ряд, но
     подписи ещё не переносятся по слогам (при 170 px плитка становилась выше,
     а не ниже). */
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:14px;
}

/* Внутри блока редкости значок редкости дублирует заголовок секции —
   на плитке он занимает строку у каждой из 209 карт. */
.rarity-block .card .info > .rarity{display:none}

/* Счётчики «Есть − N +» и «Обмен − N +» на телефоне остаются: без них карту
   можно было отметить только через модалку. Плитка от этого выше, зато
   добавить десяток копий можно прямо в сетке (1.44.2). */

/* Прыжки по редкостям: у больших выпусков их пять-шесть, и до нужной
   приходилось прокручивать весь предыдущий блок. */
.rarity-nav{
  display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;
}
.rarity-nav a{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;font-size:12px;
  border:1px solid var(--border);background:var(--panel-2);
  color:var(--text);text-decoration:none;
}
.rarity-nav a:hover{border-color:var(--accent)}
.rarity-nav .rn-dot{font-size:10px}

/* ============================================================
   КАРТОЧКА
   ============================================================ */
.card{
  background:var(--panel);border:1px solid var(--border);
  border-radius:12px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .15s,border-color .15s,opacity .15s;
}
.card:hover{transform:translateY(-2px);border-color:#3a4150}
.card .thumb{
  position:relative;
  background:var(--panel-2);
  overflow:hidden;
  border-radius:15px;
  box-shadow:
    0 2px 4px rgba(0,0,0,.45),
    0 6px 18px rgba(0,0,0,.35);
  transition:box-shadow .2s ease;
  cursor:zoom-in;
}
.card:hover .thumb{
  box-shadow:
    0 3px 6px rgba(0,0,0,.55),
    0 10px 26px rgba(0,0,0,.5),
    0 0 0 1px var(--rarity-color, transparent);
}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card .thumb::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:
    inset 0 0 0 2px var(--rarity-color, #8b93a1),
    inset 0 1px 0 rgba(255,255,255,.18);
  pointer-events:none;z-index:2;opacity:.9;
}
.card .thumb::after{
  content:'';position:absolute;inset:0;background:transparent;z-index:1;
}
.card .info{padding:10px 12px;border-top:1px solid var(--border)}
.card .name{
  font-size:14px;font-weight:600;word-break:break-word;margin-bottom:6px;
  transition:opacity .25s;
}
.card .rarity{
  display:inline-block;font-size:11px;padding:2px 8px;
  border-radius:999px;text-transform:uppercase;letter-spacing:.04em;
}
/* Метка темы на карточке: тематические промо лежат внутри обычного промо-блока,
   и метка — единственное, что отличает новогоднюю от рядовой. Цвет и значок
   приходят из справочника тем (--theme-color), поэтому новая тема ничего не
   требует от вёрстки. */
.card-themes{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 2px}
.card-theme{
  display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:999px;
  font-size:10px;letter-spacing:.03em;text-decoration:none;white-space:nowrap;
  color:var(--theme-color,var(--muted));border:1px solid var(--theme-color,var(--border));
  background:color-mix(in srgb,var(--theme-color,#8b93a5) 12%,transparent);
}
.card-theme:hover{border-color:var(--theme-color,var(--accent));filter:brightness(1.15)}
.card-theme .ct-ico{font-size:11px;line-height:1}

/* Строка тем в шапке выпуска: отдельный ряд табов, потому что тема — не
   редкость и не персонаж, а повод. */
.tabs-theme{margin-top:6px}
.tabs-theme .tt-ico{margin-right:4px}
.theme-now{
  display:inline-block;padding:0 7px;border-radius:999px;font-size:11px;
  color:var(--ok);border:1px solid var(--ok);
}

/* Страница темы: карты одного повода из разных тайтлов */
.theme-hero .theme-card{
  display:flex;gap:16px;align-items:flex-start;margin-top:14px;padding:16px 18px;
  background:var(--panel);border:1px solid var(--border);border-radius:14px;
  border-left:4px solid var(--theme-color,var(--accent));
}
.theme-badge{
  flex:0 0 auto;width:56px;height:56px;border-radius:14px;display:flex;
  align-items:center;justify-content:center;font-size:28px;line-height:1;
  background:color-mix(in srgb,var(--theme-color,#8b93a5) 16%,transparent);
  border:1px solid var(--theme-color,var(--border));
}
.theme-card-body{min-width:0}
.theme-card-body h1{margin:0 0 4px;font-size:22px}
.theme-card-body .meta{color:var(--muted);font-size:13px}
.theme-note{color:var(--muted);font-size:13px;line-height:1.55;margin:10px 0 0}
.theme-siblings{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:12px}
.theme-siblings .ts-label{color:var(--muted);font-size:12px}
.theme-chip{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:12px;text-decoration:none;color:var(--text);
  border:1px solid var(--theme-color,var(--border));
  background:color-mix(in srgb,var(--theme-color,#8b93a5) 12%,transparent);
}
.theme-chip:hover{border-color:var(--theme-color,var(--accent))}
.theme-chip .tc-count{color:var(--muted);font-size:11px}

.card.missing{border-style:dashed;opacity:.55}
.card.missing .thumb img{filter:grayscale(55%)}
.card.missing .name{color:var(--muted)}

/* ============================================================
   CARD CONTROLS
   ============================================================ */
.card-controls{
  margin-top:10px;display:flex;flex-direction:column;gap:5px;
  padding-top:8px;border-top:1px dashed var(--border);
}
.ctrl-row{display:flex;align-items:center;gap:6px;font-size:12px}
.ctrl-label{
  color:var(--muted);flex:1;font-size:11px;
  text-transform:uppercase;letter-spacing:.03em;
}
.ctrl-btn{
  width:22px;height:22px;border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);
  border-radius:6px;font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  padding:0;user-select:none;
  transition:background .15s,border-color .15s;
}
.ctrl-btn:hover:not(:disabled){background:#262b36;border-color:#3a4150}
.ctrl-btn:disabled{opacity:.25;cursor:not-allowed}
.ctrl-val{
  min-width:22px;text-align:center;font-weight:600;font-size:13px;
  color:var(--muted);font-variant-numeric:tabular-nums;
}
.ctrl-want{
  margin-top:2px;width:100%;padding:5px 8px;
  border:1px solid var(--border);background:var(--panel-2);
  color:var(--muted);border-radius:6px;font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;
  transition:all .15s;user-select:none;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.ctrl-want:hover{background:#262b36;color:var(--text)}
.ctrl-want .star{font-size:14px;line-height:1}
.ctrl-want.active{
  background:rgba(255,193,7,.12);border-color:var(--star);color:var(--star);
}

/* ============================================================
   ТЕЛЕФОН: КАРТЫ В ДВА СТОЛБИКА
   ============================================================
   «Моя коллекция» и так даёт два столбика (`.mini-grid`, минимум 150px), а
   выпуск, тема и страница персонажа верстались в один: карточка на всю ширину
   заставляла листать бесконечно. Здесь те же два столбика, плюс подписи внутри
   карточки ужимаются, чтобы кнопки «Есть»/«Обмен» и звёздочка влезали в
   половину экрана. */
@media (max-width:600px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card .info{padding:8px}
  .card .name{font-size:12px;margin-bottom:4px}
  .card .rarity{font-size:10px;padding:1px 6px}
  .card-collection{font-size:9px;margin:2px 0}
  .card-themes{gap:3px;margin:3px 0 1px}
  .card-theme{font-size:9px;padding:0 6px}
  .card-theme .ct-ico{font-size:9px}
  .card-controls{margin-top:6px;gap:4px;padding-top:6px}
  .ctrl-row{gap:4px;font-size:11px}
  .ctrl-label{font-size:10px;white-space:nowrap}
  .ctrl-btn{width:20px;height:20px;font-size:12px}
  .ctrl-val{min-width:16px;font-size:12px}
  .ctrl-want{padding:4px 6px;font-size:10px}
}

/* ============================================================
   СТАТИСТИКА И ПРОГРЕСС НА СТРАНИЦЕ ТАЙТЛА
   ============================================================ */
.title-stats{display:flex;flex-wrap:wrap;gap:24px;margin-top:12px}
.title-stats .ts{display:flex;flex-direction:column;gap:2px}
.ts-label{
  font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;
}
.ts-value{font-size:20px;font-weight:700;line-height:1}
.ts-value.have{color:var(--ok)}
.ts-value.trade{color:#2196f3}
.ts-value.want{color:var(--star)}
.ts-sub{font-size:11px;color:var(--muted)}
.progress{
  height:6px;background:var(--panel-2);border-radius:3px;
  overflow:hidden;margin-top:12px;max-width:400px;
}
.progress-fill{
  height:100%;width:0;
  background:linear-gradient(90deg,#4caf50,#8bc34a);
  transition:width .3s ease;
}
.progress-text{font-size:12px;color:var(--muted);margin-top:6px}
.progress-text b{color:var(--text)}

/* ============================================================
   ПОИСК
   ============================================================ */
.search-wrap{padding:10px 24px 6px}
.search-input{
  width:100%;max-width:400px;padding:8px 12px;
  font-size:14px;font-family:inherit;
  border:1px solid var(--border);background:var(--panel);
  color:var(--text);border-radius:8px;
}
.search-input:focus{outline:none;border-color:var(--accent)}

/* ============================================================
   TOAST (уведомления)
   ============================================================ */
.card-toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(100px);
  background:#2196f3;color:#fff;padding:10px 20px;
  border-radius:8px;font-size:13px;font-weight:600;
  z-index:99999999;opacity:0;
  transition:transform .3s,opacity .3s;pointer-events:none;
}
.card-toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.card-toast.ok{background:var(--ok)}
.protect-toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(100px);
  background:var(--err);color:#fff;padding:12px 22px;
  border-radius:8px;font-size:13px;font-weight:600;
  z-index:99999999;opacity:0;
  transition:transform .3s,opacity .3s;pointer-events:none;
  box-shadow:0 4px 20px rgba(233,30,99,.35);
}
.protect-toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* ============================================================
   AUTH (вход / регистрация)
   ============================================================ */
.auth-page{display:flex;justify-content:center;padding:60px 24px}
.auth-card{
  width:100%;max-width:400px;
  background:var(--panel);border:1px solid var(--border);
  border-radius:14px;padding:28px;
}
.auth-card h1{margin:0 0 20px;font-size:22px}
.auth-card label{
  display:block;font-size:12px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;
  margin:14px 0 6px;
}
/* Поля форм, которые приходят от allauth (их виджеты без наших классов):
   страницы привязки и завершения регистрации выглядят как остальные. */
.auth-card input[type=text],
.auth-card input[type=email],
.auth-card input[type=password]{
  width:100%;padding:10px 12px;font-size:14px;
  border:1px solid var(--border);background:var(--panel-2);
  color:var(--text);border-radius:8px;font-family:inherit;
}
.auth-card input[type=text]:focus,
.auth-card input[type=email]:focus,
.auth-card input[type=password]:focus{outline:none;border-color:var(--accent)}
.acc-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--border);font-size:14px;
}
.acc-row:last-of-type{border-bottom:none}
.acc-name{flex:1;min-width:0;overflow-wrap:anywhere}
.acc-brand{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.form-input{
  width:100%;padding:10px 12px;font-size:14px;
  border:1px solid var(--border);background:var(--panel-2);
  color:var(--text);border-radius:8px;font-family:inherit;
}
.form-input:focus{outline:none;border-color:var(--accent)}
.auth-card .btn{
  margin-top:20px;width:100%;padding:10px 14px;
  border-radius:8px;font-size:14px;
  border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);
  transition:background .15s,border-color .15s;
}
.auth-card .btn.primary{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.auth-card .btn.primary:hover{background:#3d7ae0}
.auth-card .hint{
  display:block;color:var(--muted);font-size:11px;
  line-height:1.4;margin-top:4px;
}
.auth-error{color:#ff5a7a;font-size:13px;margin:8px 0}
.auth-alt{margin-top:18px;text-align:center;font-size:13px;color:var(--muted)}
.auth-alt a{color:var(--accent)}
.auth-divider{
  display:flex;align-items:center;gap:10px;
  margin:20px 0;color:var(--muted);font-size:12px;
  text-transform:uppercase;letter-spacing:.05em;
}
.auth-divider::before,
.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.tg-widget-wrap{display:flex;justify-content:center;min-height:44px}

/* Кнопка Telegram */
.btn-tg{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:11px 16px;
  background:#229ED9;color:#fff;border-radius:8px;
  font-size:14px;font-weight:600;transition:background .15s;
}
.btn-tg:hover{background:#1e8ec2}
.btn-tg .tg-ico{font-size:16px;line-height:1}

/* ============================================================
   ПРОФИЛЬ
   ============================================================ */
.profile-page{
  max-width:640px;margin:0 auto;padding:24px;
  display:flex;flex-direction:column;gap:20px;
}
.profile-card{
  background:var(--panel);border:1px solid var(--border);
  border-radius:14px;padding:22px 24px;
}
.profile-card h1,
.profile-card h2{margin:0 0 16px;font-size:20px}
.profile-row{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:16px;padding:10px 0;border-bottom:1px solid var(--border);
  font-size:14px;
}
.profile-row:last-child{border-bottom:none}
.profile-label{
  color:var(--muted);font-size:12px;
  text-transform:uppercase;letter-spacing:.04em;
}
.profile-value{
  color:var(--text);font-weight:500;
  text-align:right;word-break:break-word;
}
.btn-tg-unlink{
  display:inline-block;padding:10px 16px;
  background:var(--panel-2);border:1px solid var(--err);
  color:var(--err);border-radius:8px;font-size:14px;font-weight:600;
  transition:background .15s;
}
.btn-tg-unlink:hover{background:rgba(233,30,99,.1)}
.btn-tg-unlink:disabled{opacity:.5;cursor:wait}

/* ============================================================
   КОЛЛЕКЦИЯ (моя / публичная)
   ============================================================ */
.collection-header{padding:24px;border-bottom:1px solid var(--border)}
.collection-header h1{margin:0 0 16px;font-size:22px}
.collection-stats{display:flex;flex-wrap:wrap;gap:24px}
.collection-stats .stat{display:flex;flex-direction:column;gap:2px}
.collection-stats .stat-label{
  font-size:12px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;
}
.collection-stats .stat-value{font-size:24px;font-weight:700}
.collection-stats .stat-value.have{color:var(--ok)}
.collection-stats .stat-value.trade{color:#2196f3}
.collection-stats .stat-value.want{color:var(--star)}
.collection-stats .stat-sub{font-size:11px;color:var(--muted)}
/* Рейтинг обменов: числа заметны, но не спорят с «Собрано» и «На обмен» */
.collection-stats .rating-stat .stat-value{font-size:20px;color:#a78bfa}
.collection-stats .rating-stat .stat-value.rating-new{color:var(--muted)}
.collection-section{margin:32px 0}
.section-title{
  font-size:16px;margin:0 0 20px;
  border-left:3px solid var(--accent);padding-left:10px;
}
.section-title.have{border-color:var(--ok)}
.section-title.trade{border-color:#2196f3}
.section-title.want{border-color:var(--star)}
.collection-block{margin-bottom:28px}
.collection-block h3{
  font-size:14px;margin:0 0 12px;
  text-transform:uppercase;letter-spacing:.04em;
  display:flex;align-items:baseline;gap:8px;
}
.collection-block h3 a{color:var(--text)}
.collection-block h3 a:hover{color:var(--accent)}
.collection-block h3 .cnt{
  color:var(--muted);font-weight:400;font-size:12px;
  letter-spacing:0;text-transform:none;
}
.mini-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;
}
.mini-card{
  background:var(--panel);border:1px solid var(--border);
  border-radius:10px;overflow:hidden;
  transition:transform .12s,border-color .12s;
}
.mini-card:hover{transform:translateY(-2px);border-color:#3a4150}
.mini-thumb{
  position:relative;
  background:var(--panel-2);
  overflow:hidden;
  border-radius:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  cursor:zoom-in;
}
.mini-card:hover .mini-thumb{
  box-shadow:
    0 3px 8px rgba(0,0,0,.5),
    0 0 0 1px var(--rarity-color, transparent);
}
.mini-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mini-thumb::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:
    inset 0 0 0 1.5px var(--rarity-color, #8b93a1),
    inset 0 1px 0 rgba(255,255,255,.14);
  pointer-events:none;z-index:2;opacity:.9;
}
.mini-thumb::after{
  content:'';position:absolute;inset:0;background:transparent;z-index:1;
}
.mini-info{padding:6px 8px}
.mini-name{
  font-size:11px;font-weight:600;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mini-badges{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}
.badge{
  font-size:10px;padding:1px 6px;border-radius:999px;font-weight:600;
}
.badge.have{background:rgba(76,175,80,.15);color:var(--ok)}
.badge.trade{background:rgba(33,150,243,.15);color:#64b5f6}
.badge.want{background:rgba(255,193,7,.15);color:var(--star)}
.empty-state{color:var(--muted);padding:60px 24px;text-align:center}

/* Публичная страница пользователя */
.user-title{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:16px;
}
.user-title h1{margin:0;font-size:22px}
.btn-compare{
  display:inline-block;padding:8px 14px;
  background:var(--accent);color:#fff;border-radius:8px;
  font-size:13px;font-weight:600;transition:background .15s;
}
.btn-compare:hover{background:#3d7ae0}

/* Заголовки групп в коллекции */
.group-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin:0 0 14px;
  padding-bottom:10px;border-bottom:1px solid var(--border);
}
.group-title{margin:0;font-size:18px;font-weight:600}
.group-title a{color:var(--text)}
.group-title a:hover{color:var(--accent)}
.btn-share{
  padding:6px 12px;background:var(--panel-2);
  border:1px solid var(--border);color:var(--text);
  border-radius:8px;font-size:12px;
  transition:background .15s,border-color .15s;
}
.btn-share:hover{background:#262b36;border-color:#3a4150}
.user-section{margin-bottom:22px}
.section-subtitle{
  margin:0 0 10px;font-size:13px;
  text-transform:uppercase;letter-spacing:.05em;
  display:flex;align-items:baseline;gap:6px;color:var(--muted);
}
.section-subtitle.section-have{color:var(--ok)}
.section-subtitle.section-trade{color:#2196f3}
.section-subtitle.section-want{color:var(--star)}
.section-subtitle .cnt{
  color:var(--muted);font-weight:400;font-size:12px;
  text-transform:none;letter-spacing:0;
}

/* ============================================================
   COMPARE-VIEW
   ============================================================ */
.compare-view{
  position:fixed;inset:0;background:var(--bg);
  display:none;z-index:99999;overflow-y:auto;
}
.compare-view.open{display:block}
.cv-top{
  position:sticky;top:0;z-index:5;
  background:rgba(15,17,21,.98);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.cv-head{display:flex;align-items:flex-start;gap:16px;padding:18px 24px 10px}
.cv-head h2{margin:0;font-size:20px}
.cv-meta{color:var(--muted);font-size:13px;margin-top:4px}
.cv-close{
  margin-left:auto;background:none;border:none;
  color:var(--muted);font-size:28px;line-height:1;padding:0 8px;
}
.cv-close:hover{color:var(--text)}
.cv-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:0 24px 12px}
.cv-tabs button{
  padding:6px 12px;border:1px solid var(--border);
  background:var(--panel);color:var(--text);
  border-radius:999px;font-size:12px;
  transition:background .15s,border-color .15s;
}
.cv-tabs button:hover{background:var(--panel-2);border-color:#3a4150}
.cv-tabs button.active{background:var(--accent);border-color:var(--accent);color:#fff}
.cv-body{padding:20px 24px 60px}
.cv-section{margin-bottom:32px}
.cv-section h3{
  margin:0 0 14px;font-size:13px;
  text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);display:flex;align-items:baseline;gap:8px;
}
.cv-section h3 b{
  color:var(--text);font-size:16px;font-weight:600;
  letter-spacing:0;text-transform:none;
}
.cv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:12px;
}
.cv-empty{
  color:var(--muted);font-size:13px;padding:24px 0;
  text-align:center;font-style:italic;
}
.cv-mini{
  background:var(--panel);border:1px solid var(--border);
  border-radius:10px;overflow:hidden;
  transition:transform .12s,border-color .12s;
  cursor:zoom-in;
}
.cv-mini:hover{transform:translateY(-2px);border-color:#3a4150}
.cv-mini .cv-thumb{
  position:relative;
  background:var(--panel-2);
  overflow:hidden;
  border-radius:11px;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.cv-mini:hover .cv-thumb{
  box-shadow:
    0 3px 8px rgba(0,0,0,.5),
    0 0 0 1px var(--rarity-color, transparent);
}
.cv-mini .cv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cv-mini .cv-thumb::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:
    inset 0 0 0 1.5px var(--rarity-color, #8b93a1),
    inset 0 1px 0 rgba(255,255,255,.14);
  pointer-events:none;z-index:2;opacity:.9;
}
.cv-mini .cv-thumb::after{
  content:'';position:absolute;inset:0;background:transparent;z-index:1;
}
.cv-mini .cv-badge{
  position:absolute;top:6px;right:6px;
  background:rgba(0,0,0,.78);color:#fff;
  padding:2px 7px;border-radius:10px;
  font-size:11px;font-weight:600;line-height:1.4;
}
.cv-mini .cv-badge.trade{
  background:rgba(33,150,243,.18);color:#64b5f6;
  border:1px solid rgba(33,150,243,.6);
}
.cv-mini .cv-badge.want{
  background:rgba(255,193,7,.15);color:var(--star);
  border:1px solid var(--star);
}
.cv-mini .cv-name{
  font-size:11px;font-weight:600;line-height:1.3;
  padding:6px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ============================================================
   МОДАЛКИ ИМПОРТА / ЭКСПОРТА
   ============================================================ */
.fl-modal-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center;
  z-index:999999;padding:20px;opacity:0;transition:opacity .2s;
}
.fl-modal-bg.open{opacity:1}
.fl-modal{
  background:var(--panel);border:1px solid var(--border);
  border-radius:14px;max-width:560px;width:100%;
  max-height:90vh;overflow-y:auto;padding:22px;position:relative;
}
.fl-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.fl-modal-head h2{margin:0;font-size:19px}
.fl-modal-close{
  background:none;border:none;color:var(--muted);
  font-size:26px;line-height:1;padding:0 6px;
}
.fl-modal-close:hover{color:var(--text)}
.fl-hint{font-size:13px;color:var(--muted);margin:0 0 14px;line-height:1.5}
.fl-info-box{
  background:var(--panel-2);border:1px solid var(--border);
  border-radius:8px;padding:10px 14px;font-size:13px;
  line-height:1.5;margin-bottom:14px;
}
.fl-info-box b{color:var(--text)}
.fl-subsection{margin-top:10px;padding-top:12px;border-top:1px solid var(--border)}
.fl-label{
  font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;margin-right:auto;
}
.fl-actions-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.fl-btn-mini{
  padding:4px 10px;background:var(--panel-2);
  border:1px solid var(--border);color:var(--text);
  border-radius:6px;font-size:12px;transition:background .15s;
}
.fl-btn-mini:hover{background:#262b36;border-color:#3a4150}
.fl-check-list{
  display:flex;flex-direction:column;gap:4px;
  max-height:300px;overflow-y:auto;padding:4px 0;
}
.fl-check-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;background:var(--panel-2);
  border:1px solid var(--border);border-radius:8px;
  cursor:pointer;transition:background .12s;
  font-size:13px;
}
.fl-check-row:hover{background:#262b36}
.fl-check-row.fl-disabled{opacity:.5}
.fl-check-row input[type=checkbox]{
  width:16px;height:16px;accent-color:var(--accent);flex-shrink:0;
}
.fl-check-name{flex:1;font-weight:500;word-break:break-word}
.fl-check-stats{
  color:var(--muted);font-size:12px;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.fl-radio-group{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.fl-radio-row{
  display:flex;gap:10px;padding:10px 12px;
  background:var(--panel-2);border:1px solid var(--border);
  border-radius:8px;cursor:pointer;font-size:13px;line-height:1.4;
}
.fl-radio-row:hover{background:#262b36}
.fl-radio-row input[type=radio]{
  width:16px;height:16px;accent-color:var(--accent);
  margin-top:2px;flex-shrink:0;
}
.fl-radio-row small{color:var(--muted);font-size:12px}
.fl-modal-foot{
  display:flex;gap:10px;justify-content:flex-end;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--border);
}
.fl-btn-cancel,
.fl-btn-primary,
.fl-btn-danger{
  padding:9px 16px;border-radius:8px;font-size:13px;font-weight:600;
  border:1px solid var(--border);
  background:var(--panel-2);color:var(--text);
  transition:background .15s,border-color .15s;
}
.fl-btn-cancel:hover{background:#262b36;border-color:#3a4150}
.fl-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.fl-btn-primary:hover{background:#3d7ae0}
.fl-btn-danger{background:var(--err);border-color:var(--err);color:#fff}
.fl-btn-danger:hover{background:#c2185b}

/* ============================================================
   ЗАЩИТА: шиммер + защита от выделения
   ============================================================ */
img[data-src]:not([src]){
  background:linear-gradient(90deg,#1e222b,#262b36,#1e222b);
  background-size:200% 100%;
  animation:shimmer 1.4s infinite linear;
}
@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.card .thumb img,
.title-card .cover img,
.mini-thumb img,
.cv-thumb img{
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;
  user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;
}

/* ============================================================
   FULLSCREEN-ПРОСМОТРЩИК
   ============================================================ */
.viewer{
  position:fixed;inset:0;background:rgba(0,0,0,.94);
  display:none;align-items:center;justify-content:center;
  z-index:9999999;
}
.viewer.open{display:flex}
.viewer img{
  max-width:92vw;max-height:92vh;
  object-fit:contain;
  -webkit-user-drag:none;user-select:none;pointer-events:none;
  border-radius:11px;
  box-shadow:0 8px 40px rgba(0,0,0,.7);
}
.viewer .close{
  position:absolute;top:16px;right:24px;color:#fff;
  font-size:36px;line-height:1;padding:8px;
  user-select:none;font-family:Arial,sans-serif;z-index:2;
}
.viewer .close:hover{color:#ff5a7a}

/* ============================================================
   МОДАЛКА ПОДРОБНОГО ПРОСМОТРА КАРТЫ
   ============================================================ */
.card-viewer{
  position:fixed;inset:0;background:rgba(0,0,0,.85);
  display:none;align-items:flex-start;justify-content:center;
  z-index:9999998;padding:20px;overflow-y:auto;
}
.card-viewer.open{display:flex}
.card-viewer .cv-box{
  background:var(--panel);border:1px solid var(--border);
  border-radius:14px;max-width:520px;width:100%;
  margin:auto;position:relative;padding:12px;
  animation:cvFadeIn .2s ease;
}
@keyframes cvFadeIn{
  from{opacity:0;transform:scale(.97)}
  to{opacity:1;transform:scale(1)}
}
.card-viewer .cv-image{
  display:block;
  text-align:center;
  padding:6px;
  cursor:zoom-in;
}
.card-viewer .cv-image img{
  display:inline-block;
  max-width:100%;
  /* Было 60vh: картинка занимала 614 px, и до кнопок с данными карты надо
     было прокручивать. 34vh оставляет место имени и переключателям. */
  max-height:34vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  box-shadow:
    0 2px 6px rgba(0,0,0,.45),
    0 10px 32px rgba(0,0,0,.55);
}
.card-viewer .cv-info{padding:14px 12px 10px}
/* Модалка целиком не выше экрана: данные карты прокручиваются внутри, а не
   уезжают за нижний край (было 1249 px при окне 950). */
.card-viewer .cv-box{
  max-height:92vh;
  display:flex;
  flex-direction:column;
}
.card-viewer .cv-image{flex:0 0 auto}
.card-viewer .cv-info{overflow-y:auto;min-height:0}
.card-viewer .cv-name{
  font-size:17px;font-weight:700;margin-bottom:4px;
  word-break:break-word;
}
.card-viewer .cv-subname{font-size:12px;color:var(--muted);margin-bottom:14px}
/* Строки в две колонки: однострочные значения («Тайтл», «Номер», «Редкость»)
   раньше шли по одной на строку и растягивали блок на 157 px. */
.card-viewer .cv-rows{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 18px;align-items:start;
}
.card-viewer .cv-row{gap:8px}
.card-viewer .cv-row-label{min-width:72px}

/* ---------- счётчики «есть / на обмен» и «хочу» ---------- */
.card-viewer .cv-actions{
  display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px;
}
/* Степпер, а не переключатель: копий у человека бывает десять, и «+» должен
   добавлять по одной, а не переключать 0/1. */
.card-viewer .cv-step{
  flex:1 1 150px;display:inline-flex;align-items:center;gap:6px;
  padding:5px 8px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--border);
}
.card-viewer .cv-step-label{
  flex:1;min-width:0;color:var(--muted);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-viewer .cv-step-btn{
  width:24px;height:24px;flex:0 0 auto;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--panel);color:var(--text);
  border-radius:6px;font-size:15px;line-height:1;font-family:inherit;
  cursor:pointer;transition:background .15s,border-color .15s;
}
.card-viewer .cv-step-btn:hover:not(:disabled){background:#262b36;border-color:#3a4150}
.card-viewer .cv-step-btn:disabled{opacity:.3;cursor:not-allowed}
.card-viewer .cv-step-val{
  min-width:20px;text-align:center;font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--text);
}
.card-viewer .cv-want{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:8px;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--border);
  color:var(--muted);font-size:12px;font-weight:600;font-family:inherit;
  transition:background .15s,border-color .15s,color .15s;
}
.card-viewer .cv-want:hover{border-color:var(--star);color:var(--text)}
.card-viewer .cv-want.on{
  background:rgba(255,193,7,.12);border-color:var(--star);color:var(--star);
}
.card-viewer .cv-want-star{font-size:14px;line-height:1}

/* ---------- свёрнутые блоки модалки ---------- */
.card-viewer .cv-fold{
  margin-top:10px;border:1px solid var(--border);border-radius:8px;
  background:var(--panel-2);
}
.card-viewer .cv-fold > summary{
  padding:8px 12px;cursor:pointer;list-style:none;
}
/* Старые .cv-community/.cv-traders несут свои padding и margin — внутри
   details это давало двойные отступы. */
.card-viewer .cv-fold.cv-community,
.card-viewer .cv-fold.cv-traders{padding:0;margin:10px 0 0}
.card-viewer .cv-fold > summary.cv-community-title{margin:0}
.card-viewer .cv-fold > summary::-webkit-details-marker{display:none}
.card-viewer .cv-fold > summary::after{
  content:'▸';float:right;color:var(--muted);font-size:12px;
}
.card-viewer .cv-fold[open] > summary::after{content:'▾'}
.card-viewer .cv-fold .cv-stats,
.card-viewer .cv-fold .cv-traders-list,
.card-viewer .cv-fold .cv-traders-empty{padding:0 12px 10px}
.card-viewer .cv-row{display:flex;gap:12px;font-size:13px;align-items:baseline}
.card-viewer .cv-row-label{
  color:var(--muted);font-size:11px;text-transform:uppercase;
  letter-spacing:.04em;min-width:90px;flex-shrink:0;
}
.card-viewer .cv-row-value{
  color:var(--text);font-weight:500;word-break:break-word;
}
.card-viewer .cv-rarity{
  display:inline-block;padding:2px 10px;border-radius:999px;
  font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;
}
.card-viewer .cv-chars{display:flex;flex-wrap:wrap;gap:6px}
.card-viewer .cv-char{
  display:inline-block;padding:2px 10px;
  background:var(--panel-2);border:1px solid var(--border);
  border-radius:999px;font-size:12px;color:var(--text);
}
.card-viewer .cv-close{
  position:absolute;top:14px;right:16px;
  background:rgba(0,0,0,.55);border:none;color:#fff;
  font-size:22px;width:32px;height:32px;border-radius:50%;
  line-height:1;padding:0;display:flex;align-items:center;
  justify-content:center;z-index:3;user-select:none;
  transition:background .15s;
}
.card-viewer .cv-close:hover{background:rgba(233,30,99,.75)}
.card-viewer .cv-loading{
  padding:80px 20px;text-align:center;
  color:var(--muted);font-size:14px;
}
@media (max-width:520px){
  .card-viewer .cv-rows{grid-template-columns:minmax(0,1fr)}
  .card-viewer .cv-row{flex-direction:row;gap:8px;align-items:baseline}
  .card-viewer .cv-row-label{min-width:78px}
  .card-viewer .cv-step{flex:1 1 100%}
  .card-viewer .cv-step-label{font-size:10px}
  .card-viewer .cv-want{flex:1 1 100%;justify-content:center}
}

/* ============================================================
   ШИЛДИК АВТОРСКОЙ КАРТЫ
   ============================================================ */
.author-seal{
  position:absolute;top:6px;right:6px;
  width:24px;height:24px;border-radius:50%;
  background:#d4a017;border:1px solid #ffdd57;
  display:flex;align-items:center;justify-content:center;
  color:#2a1d00;z-index:2;pointer-events:none;user-select:none;
}
.author-seal svg{width:13px;height:13px;display:block}
.author-seal.author-seal-sm{
  width:18px;height:18px;top:4px;right:4px;
}
.author-seal.author-seal-sm svg{width:10px;height:10px}

/* ============================================================
   БАННЕР ПЕРЕНОСА localStorage → АККАУНТ
   ============================================================ */
.migrate-banner{
  position:fixed;top:0;left:0;right:0;z-index:999999;
  background:linear-gradient(135deg,#1a3a5c,#1e4a6f);
  border-bottom:1px solid var(--accent);
  padding:14px 24px;display:flex;align-items:center;
  gap:16px;flex-wrap:wrap;
  transform:translateY(-100%);transition:transform .35s ease;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.migrate-banner.show{transform:translateY(0)}
.migrate-text{flex:1;min-width:220px;font-size:14px;line-height:1.45}
.migrate-text b{display:block;margin-bottom:4px;font-size:15px}
.migrate-text .migrate-stats{
  display:inline-block;background:rgba(255,255,255,.1);
  padding:2px 10px;border-radius:999px;font-size:12px;
  margin:4px 0;font-variant-numeric:tabular-nums;
}
.migrate-text small{display:block;color:#b8c4d4;font-size:12px;margin-top:4px}
.migrate-actions{display:flex;gap:8px;flex-wrap:wrap}
.migrate-btn{
  padding:8px 14px;border-radius:8px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);color:#e6e9ef;
  font-size:13px;font-weight:600;
  transition:background .15s,border-color .15s;white-space:nowrap;
}
.migrate-btn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35)}
.migrate-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.migrate-btn.primary:hover{background:#3d7ae0}
.migrate-btn.danger{border-color:rgba(233,30,99,.6);color:#ff7a9e}
.migrate-btn.danger:hover{background:rgba(233,30,99,.15)}

/* ============================================================
   FOOTER
   ============================================================ */
footer.site{
  padding:24px;color:var(--muted);font-size:12px;
  border-top:1px solid var(--border);text-align:center;
}

/* ============================================================
   FLIP-АНИМАЦИЯ КАРТЫ (рубашка)
   ============================================================ */
.card-viewer .cv-image.flipper{
  perspective: 1600px;
}
.card-viewer .cv-image .card-flip{
  position: relative;
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.4,.2,.2,1);
  cursor: pointer;
  user-select: none;
}
.card-viewer .cv-image .card-flip.flipped{
  transform: rotateY(180deg);
}
.card-viewer .cv-image .card-flip .card-face{
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 12px;
  box-shadow:
    0 2px 6px rgba(0,0,0,.45),
    0 10px 32px rgba(0,0,0,.55);
  overflow: hidden;
}
.card-viewer .cv-image .card-flip .card-face img{
  display: block;
  max-width: 100%;
  /* Как и обычная картинка: 60vh давало 570 px и вытесняло данные карты. */
  max-height: 34vh;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
.card-viewer .cv-image .card-flip .card-face-back{
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
}
.card-viewer .cv-image .flip-hint{
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: center;
  user-select: none;
}

/* ============================================================
   ЛОГОТИП В ШАПКЕ
   ============================================================ */
.topbar .brand{
  display: flex;
  align-items: center;
  text-decoration: none;
}
.topbar .brand-logo{
  height: 34px;
  width: auto;
  display: block;
}
@media (max-width: 600px){
  .topbar .brand-logo{ height: 26px; }
}

/* ============================================================
   ФУТЕР
   ============================================================ */
footer.site{
  padding: 40px 24px 28px;
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid var(--border);
  background: #0c0e12;
}
.footer-inner{
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 1100px){
  .footer-inner{ grid-template-columns: repeat(3, 1fr); }
  .footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 700px){
  .footer-inner{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .footer-inner{ grid-template-columns: 1fr; gap: 24px; }
}
.footer-col h4{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text);
  margin: 0 0 12px;
  font-weight: 600;
}
.footer-brand{
  text-align: center;
}
.footer-brand .footer-logo{
  height: 42px;
  width: auto;
  display: block;
  margin: 0 auto 10px;
  opacity: .95;
}
.footer-tagline{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.footer-copy{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}
.footer-muted{ color: #5e6673; }
.footer-links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-links li a{
  color: var(--muted);
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.footer-links li a:hover{ color: var(--text); }
.footer-ico{
  font-size: 14px;
  line-height: 1;
  display: inline-block;
}
.footer-mail{
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.footer-mail:hover{ color: var(--accent); }

/* ============================================================
   COOKIE-БАННЕР
   ============================================================ */
.cookie-banner{
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 99999;
  transform: translateY(120%);
  transition: transform .35s ease;
  max-width: 720px;
  margin: 0 auto;
}
.cookie-banner.show{ transform: translateY(0); }
.cookie-text{
  flex: 1;
  min-width: 220px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.cookie-text a{ color: var(--accent); text-decoration: underline; }
.cookie-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cookie-btn{
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.cookie-btn:hover{ background: #262b36; border-color: #3a4150; }
.cookie-btn.primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.cookie-btn.primary:hover{ background: #3d7ae0; }

/* ============================================================
   ПРАВОВЫЕ СТРАНИЦЫ
   ============================================================ */
.legal-page{ padding: 32px 24px 60px; }
.legal-container{
  max-width: 800px;
  margin: 0 auto;
}
.legal-title{
  font-size: 28px;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.legal-content{
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}
.legal-content h2{
  font-size: 20px;
  margin: 28px 0 12px;
  color: var(--text);
}
.legal-content h3{
  font-size: 16px;
  margin: 22px 0 10px;
  color: var(--text);
}
.legal-content p{ margin: 0 0 14px; }

/* «Что нового»: каждая дата выпуска — свёрнутый блок, свежая раскрыта.
   Отдельная запись не должна выглядеть как длинная простыня. */
.legal-content details.wn-release{
  margin: 0 0 12px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.legal-content details.wn-release > summary{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  transition: color .15s;
}
.legal-content details.wn-release > summary::-webkit-details-marker{ display: none; }
.legal-content details.wn-release > summary::before{
  content: '▸';
  display: inline-block;
  color: var(--accent);
  transition: transform .15s;
}
.legal-content details.wn-release[open] > summary::before{ transform: rotate(90deg); }
.legal-content details.wn-release > summary:hover{ color: var(--accent); }
.legal-content details.wn-release h3{ margin-top: 18px; }
.legal-content details.wn-release > *:last-child{ margin-bottom: 14px; }
.legal-content ul,
.legal-content ol{
  margin: 0 0 14px;
  padding-left: 24px;
}
.legal-content li{ margin-bottom: 6px; }
.legal-content a{
  color: var(--accent);
  text-decoration: underline;
}
.legal-content a:hover{ color: #80b0ff; }
.legal-content strong{ color: var(--text); font-weight: 700; }
.legal-content code{
  background: var(--panel-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
  color: #80b0ff;
}
.legal-meta{
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
}

/* ============================================================
   КНОПКА «КУПИТЬ ПАК» НА СТРАНИЦЕ ТАЙТЛА
   ============================================================ */
.title-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.title-head-left{ flex: 1; min-width: 200px; }

.btn-buy{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #4caf50 0%, #4c8bf5 100%);
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow:
    0 2px 6px rgba(76,175,80,.35),
    0 6px 18px rgba(76,139,245,.3);
  white-space: nowrap;
}
.btn-buy:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 3px 8px rgba(76,175,80,.5),
    0 10px 28px rgba(76,139,245,.45);
}
.btn-buy-icon{
  font-size: 16px;
  line-height: 1;
  display: inline-block;
}
@media (max-width: 600px){
  .btn-buy{ padding: 8px 14px; font-size: 13px; }
}

/* ============================================================
   КНОПКИ «КУПИТЬ» В МОДАЛКЕ КАРТЫ
   ============================================================ */
.cv-buy-row{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.cv-buy-btn{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #4caf50 0%, #4c8bf5 100%);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
  box-shadow: 0 2px 6px rgba(76,175,80,.3);
}
.cv-buy-btn:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.cv-buy-btn.secondary{
  background: linear-gradient(135deg, #4c8bf5 0%, #9c27b0 100%);
  box-shadow: 0 2px 6px rgba(76,139,245,.3);
}
.cv-buy-icon{
  font-size: 15px;
  line-height: 1;
  display: inline-block;
  flex-shrink: 0;
}

/* ============================================================
   ССЫЛКА НА АВТОРА В МОДАЛКЕ
   ============================================================ */
.card-viewer .cv-author-link{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(76,139,245,.5);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .01em;
}

.card-viewer .cv-author-link:hover{
  color: #80b0ff;
  border-bottom-style: solid;
  border-bottom-color: #80b0ff;
}
.card-viewer .cv-author-link::after{
  /* Стрелка внутрь сайта: ссылка ведёт на страницу автора, а не наружу. */
  content: '→';
  font-size: 12px;
  line-height: 1;
  opacity: .8;
  transform: translateY(-1px);
}
.card-viewer .cv-author-name{
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}
.card-viewer .cv-author-link:hover::after{
  opacity: 1;
}

/* Кнопка Яндекс */
.btn-ya{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:11px 16px;
  margin-top:10px;
  background:#FC3F1D;
  color:#fff;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:background .15s;
}
.btn-ya:hover{ background:#e03517; }
.btn-ya .ya-ico{ font-size:16px; line-height:1; }

/* ВКонтакте: основной вход и отвязка (фирменный синий ВК) */
/* Кнопка VK ID — по требованиям VK: цвет #0077FF (наведение и нажатие —
   соседние тона из их же палитры), белый текст, логотип по центру, высота в
   рекомендованном диапазоне 32–56 px. Логотип — официальный SVG
   (`cards/vk_logo.html`), в цветах не перекрашиваем. */
.btn-vk{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:44px;padding:0 16px;margin-top:10px;
  background:#0077FF;color:#fff;border-radius:8px;
  font-size:15px;font-weight:600;text-decoration:none;
  transition:background .15s;
}
.btn-vk:hover{ background:#0071F2; }
.btn-vk:active{ background:#0069E1; }
.btn-vk .vk-logo{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex:none;
}
.btn-vk .vk-logo svg{ display:block;width:100%;height:100%; }
.btn-vk-unlink{
  display:inline-block;padding:10px 16px;
  background:var(--panel-2);border:1px solid var(--err);
  color:var(--err);border-radius:8px;font-size:14px;font-weight:600;
  transition:background .15s;
}
.btn-vk-unlink:hover{ background:rgba(233,30,99,.1); }
.btn-vk-unlink:disabled{ opacity:.5; cursor:wait; }
/* Ссылка-кнопка «Разрешить уведомления» в карточке ВК: тот же вид, что у
   кнопки входа, но это переход на страницу ВК, а не форма. */
a.btn-vk{ text-decoration:none; }

/* Кнопка «Отвязать Яндекс» — в красных тонах Яндекса */
.btn-ya-unlink{
  display: inline-block;
  padding: 10px 16px;
  background: var(--panel-2);
  border: 1px solid #FC3F1D;
  color: #FC3F1D;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}
.btn-ya-unlink:hover{ background: rgba(252,63,29,.1); }
.btn-ya-unlink:disabled{ opacity: .5; cursor: wait; }

/* Подсказка в профиле — когда отвязка невозможна */
.profile-hint{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 10px 0 0;
  padding: 10px 14px;
  background: var(--panel-2);
  border: 1px dashed var(--border);
  border-radius: 8px;
}

/* Разрешение ВК выдаётся на чужой странице, и это единственное место, которое мы
   не можем оформить. Зато можем объяснить, что там будет: аккуратная панель с
   шагами и живым ожиданием, чтобы окно ВК не выглядело подозрительным. */
.vk-wait{
  margin: 12px 0 0;padding: 12px 16px;
  background: var(--panel-2);border: 1px solid var(--border);
  border-left: 3px solid var(--vk);border-radius: 8px;
  font-size: 13px;color: var(--muted);line-height: 1.55;
}
.vk-wait b{ color: var(--text);font-weight: 600; }
.vk-wait ol{ margin: 8px 0 0;padding-left: 20px; }
.vk-wait ol li{ margin-top: 2px; }
.vk-wait .vk-wait-now{
  display: flex;align-items: center;gap: 8px;
  margin-top: 8px;color: var(--text);font-weight: 500;
}
.vk-wait .vk-wait-now[hidden]{ display: none; }
.vk-spin{
  width: 14px;height: 14px;flex: 0 0 14px;
  border: 2px solid var(--border);border-top-color: var(--vk);
  border-radius: 50%;animation: vk-spin .8s linear infinite;
}
@keyframes vk-spin{ to{ transform: rotate(360deg); } }

/* ============================================================
   ПРОГРЕСС ПО СЕТУ НА КАРТОЧКЕ ТАЙТЛА (главная)
   ============================================================ */
.title-progress{ margin-top: 10px; }
.title-progress-track{
  height: 5px;
  background: var(--panel-2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.title-progress-fill{
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  transition: width .4s ease;
}
.title-progress-text{
  font-size: 11px;
  color: var(--muted);
}
.title-progress-text b{ color: var(--text); font-weight: 700; }

/* Счётчик «X/Y» на табах редкости */
nav.tabs a .tab-count{
  opacity: .7;
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}

/* ============================================================
   БЕЙДЖ ПРИВАТНОСТИ + КНОПКА TELEGRAM НА ПУБЛИЧНОЙ СТРАНИЦЕ
   ============================================================ */
.privacy-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.privacy-badge.privacy-public{ color: #4caf50; border-color: rgba(76,175,80,.4); }
.privacy-badge.privacy-link{ color: #4c8bf5; border-color: rgba(76,139,245,.4); }
.privacy-badge.privacy-private{ color: #ff5a7a; border-color: rgba(233,30,99,.4); }

.btn-tg-write{
  padding: 8px 14px;
  background: #229ED9;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.btn-tg-write:hover{ background: #1e8ec2; }

/* Выбор канала «Написать»: Telegram, ВКонтакте или оба сразу */
.write-choice{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}
.write-choice-label{
  font-size: 12px;
  color: var(--muted, #888);
}
.btn-write{
  display: inline-block;
  padding: 8px 14px;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.btn-write-tg{ background: #229ED9; }
.btn-write-tg:hover{ background: #1e8ec2; }
.btn-write-vk{ background: #0077FF; }
.btn-write-vk:hover{ background: #0066dd; }

/* Кнопки «Написать» в compare-view: по одной на каждый канал человека */
.cv-write{
  margin-left: auto;
  margin-right: 8px;
  display: inline-flex;
  gap: 6px;
}
.cv-write .cv-tg-btn{ margin-left: 0; margin-right: 0; }
.cv-tg-btn{
  display: inline-block;
  text-decoration: none;
  padding: 6px 14px;
  background: #229ED9;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-left: auto;
  margin-right: 8px;
  transition: background .15s;
  white-space: nowrap;
}
.cv-tg-btn:hover{ background: #1e8ec2; }
.cv-tg-btn.cv-vk{ background: #0077FF; }
.cv-tg-btn.cv-vk:hover{ background: #0066dd; }

/* ============================================================
   ПРИВАТНОСТЬ В ПРОФИЛЕ
   ============================================================ */
.privacy-options{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.privacy-option{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background .12s, border-color .12s;
  user-select: none;
}
.privacy-option:hover{ background: #262b36; }
.privacy-option.active{ border-color: var(--accent); background: rgba(76,139,245,.08); }
.privacy-option input[type=radio]{
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.privacy-status{
  font-size: 12px;
  margin-top: 12px;
  min-height: 16px;
}
.privacy-status.ok{ color: #4caf50; }
.privacy-status.err{ color: #ff5a7a; }
.privacy-status.info{ color: var(--muted); }

/* ============================================================
   ЗАЩИТА КАРТИНОК ОТ СКАЧИВАНИЯ
   ------------------------------------------------------------
   Полностью запретить скачивание невозможно: чтобы нарисовать
   картинку, браузер обязан получить её байты, поэтому DevTools,
   скриншот и curl с нашим Referer обходят любой запрет (подробнее
   в deploy/README.md, раздел «Защита картинок от скачивания»).
   Здесь закрыты бытовые способы:
     • «Сохранить изображение как…» и «Открыть изображение в новой
       вкладке» — картинка не является целью клика (pointer-events:
       none), правый клик попадает в контейнер, и этих пунктов в
       меню браузера нет. Работает даже при выключенном JS;
     • перетаскивание картинки на рабочий стол — user-drag;
     • выделение и копирование — user-select;
     • долгое нажатие на мобильном (Android/iOS) — touch-callout;
     • печать страницы и экспорт в PDF — @media print ниже.
   ============================================================ */
.thumb img,
.cover img,
.mini-thumb img,
.cv-thumb img,
.cv-image img,
.card-face img,
.viewer img{
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.thumb img,
.cover img,
.mini-thumb img,
.cv-thumb img,
.cv-image img,
.card-face img,
.viewer img{
  pointer-events: none;
}

/* Печать/экспорт в PDF: картинки в документ не попадают
   (текст и остальная вёрстка печатаются как обычно). */
@media print{
  .thumb, .cover, .mini-thumb, .cv-thumb, .cv-image, .viewer{
    visibility: hidden !important;
  }
}

/* ============================================================
   КНОПКА «НАВЕРХ»
   ============================================================ */
.to-top{
  position: fixed;
  right: 20px;
  bottom: 20px;                 /* подъём над cookie-баннером делает скрипт */
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  z-index: 900;                 /* выше контента, но ниже модалок и просмотрщика */
  transition: opacity .2s ease, transform .2s ease,
              background .15s, border-color .15s, color .15s;
}
.to-top:hover,
.to-top:focus-visible{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  outline: none;
}

/* Класс «взведено» ставит скрипт из base.html: пока страница наверху, кнопка
   не мешает (появляется после прокрутки). Без JS класса нет — кнопка видна
   сразу и работает обычной ссылкой на #top. */
.to-top-armed .to-top{
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
}
.to-top-armed .to-top.show{
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

/* На узких экранах кнопка компактнее и ближе к краю. */
@media (max-width: 480px){
  .to-top{
    right: 12px;
    width: 42px;
    height: 42px;
    font-size: 18px;
  }
}

@media print{
  .to-top{ display: none !important; }
}


/* ============================================================
   УВЕДОМЛЕНИЯ: КОЛОКОЛЬЧИК В ШАПКЕ
   ============================================================
   Колокольчик — последний элемент в правом верхнем углу. Красный круг поверх
   иконки — число непрочитанных. Список раскрывается по клику (класс `open`
   ставит скрипт в base.html); без JavaScript ссылка ведёт на страницу
   «Все уведомления», поэтому кнопка всегда осмысленна. */
.notif{ position:relative; display:flex; align-items:center; }
.notif-bell{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  color:var(--text); font-size:24px; line-height:1;
  background:none; border:1px solid transparent;
  transition:background .15s,border-color .15s;
}
.notif-bell:hover{ background:var(--panel-2); border-color:var(--border); }
.notif-bell-ico{ display:block; }

/* Круг с числом: поверх иконки, справа сверху. Обводка цветом шапки —
   иначе на тёмном фоне круг «слипается» с колокольчиком. */
.notif-badge{
  position:absolute; top:-2px; right:-2px; z-index:1;
  min-width:19px; height:19px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:#e53935; border:2px solid var(--panel);
  color:#fff; font-size:11px; font-weight:700; line-height:1;
}

/* Выпадающий список */
.notif-panel{
  display:none;
  position:absolute; top:calc(100% + 10px); right:0; z-index:200;
  width:min(380px, calc(100vw - 24px)); max-height:min(70vh, 520px);
  overflow-y:auto;
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.notif.open .notif-panel{ display:block; }

.notif-head{
  position:sticky; top:0; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; background:var(--panel);
  border-bottom:1px solid var(--border); font-size:14px;
}
.notif-read-all{
  background:none; border:1px solid var(--border); border-radius:6px;
  color:var(--muted); font-size:12px; padding:4px 9px;
  transition:background .15s,border-color .15s,color .15s;
}
.notif-read-all:hover{ background:var(--panel-2); border-color:#3a4150; color:var(--text); }

.notif-list{ list-style:none; margin:0; padding:0; }
.notif-item{ border-bottom:1px solid var(--border); }
.notif-item:last-child{ border-bottom:0; }
/* Непрочитанное видно сразу: подсветка строки и точка слева. */
.notif-item.unread{ background:rgba(76,139,245,.10); }
.notif-link{
  display:flex; gap:10px; padding:11px 14px;
  transition:background .15s;
}
.notif-link:hover{ background:var(--panel-2); }
.notif-ico{ flex:0 0 auto; font-size:18px; line-height:1.3; }
.notif-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.notif-title{ font-size:13px; color:var(--text); }
.notif-item.unread .notif-title{ font-weight:600; }
.notif-text{
  font-size:12px; color:var(--muted);
  /* Длинный текст сообщения не должен растягивать список */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.notif-when{ font-size:11px; color:var(--muted); opacity:.8; }

.notif-empty{ margin:0; padding:16px 14px; font-size:13px; color:var(--muted); }
.notif-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; border-top:1px solid var(--border); font-size:12px;
}
.notif-foot a{ color:var(--accent); }

/* Страница «Все уведомления» */
.notif-page{ max-width:760px; margin:0 auto; padding:24px 20px 60px; }
.notif-page-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.notif-page-head h1{ margin:0; font-size:22px; }
.notif-page-intro{ margin:10px 0 18px; color:var(--muted); font-size:13px; }
.notif-page-intro a{ color:var(--accent); }
.notif-page-list{
  list-style:none; margin:0; padding:0;
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  overflow:hidden;
}
.notif-item-page .notif-link{ padding:14px 16px; }
.notif-item-page .notif-title{ font-size:14px; }
.notif-pages{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:16px; font-size:13px; color:var(--muted);
}
.notif-page-num{ color:var(--muted); }

/* Телефон: список открывается почти во всю ширину и не уезжает за экран */
@media (max-width:560px){
  .notif-bell{ width:36px; height:36px; font-size:22px; }
  .notif-panel{
    position:fixed; top:64px; left:8px; right:8px; width:auto;
    max-height:calc(100vh - 80px);
  }
  .notif-page{ padding:16px 14px 40px; }
}

/* ---------- Аватары ----------
   Одно поле ввода на человека и на автора: картинку всегда обрезаем до
   квадрата (это делает сервер), поэтому в вёрстке достаточно object-fit —
   иначе портрет в круглой рамке «поплыл» бы от пропорций исходника. */
.author-avatar img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
}
.user-avatar{
  width:20px;height:20px;border-radius:50%;object-fit:cover;
  vertical-align:-4px;margin-right:6px;
}
.avatar-row{ display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap; }
.avatar-preview{
  flex:0 0 auto;width:96px;height:96px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 26%, rgba(76,139,245,.26), rgba(76,139,245,.05));
  border:1px solid var(--border);
}
.avatar-preview img{ width:100%;height:100%;object-fit:cover; }
.avatar-letter{ font-size:38px;font-weight:800;color:var(--accent);user-select:none; }
.avatar-body{ flex:1;min-width:240px; }
.avatar-hint{ color:var(--text);font-size:14px;line-height:1.45; }
.avatar-form{ display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0 6px; }
.avatar-form input[type="file"]{ color:var(--muted);font-size:13px;max-width:100%; }
.avatar-actions{ display:flex;gap:14px;flex-wrap:wrap;margin-top:4px; }
.avatar-actions form{ display:inline; }
.avatar-note{ color:var(--muted);font-size:12px;line-height:1.4;margin-top:10px; }
.avatar-status{
  padding:9px 13px;border-radius:8px;margin:12px 0;font-size:13px;
  border:1px solid var(--border);background:var(--panel-2);
}
.avatar-status.ok{ border-left:3px solid var(--ok); }
.avatar-status.error{ border-left:3px solid var(--err); }
@media (max-width:640px){
  .avatar-preview{ width:72px;height:72px; }
  .avatar-letter{ font-size:28px; }
}

/* ============================================================
   ОБМЕНЫ: «Мои обмены» и страница отметки по ссылке.
   Стилей тут не было вовсе — страницы открывались голым HTML.
   Отмечают сделкой (набор карт с одним человеком), поэтому
   карточки сгруппированы по партнёру, а над ними форма выбора.
   ============================================================ */
/* Приглушённый текст: класс пришёл из админки (cards/css/admin.css), а на сайте
   его не было — страницы обменов и споров помечали им второстепенное зря. */
.quiet{color:var(--muted)}

.trades-page{max-width:900px;margin:0 auto;padding:24px 16px 56px}
.trades-head h1{font-size:26px;margin:0 0 8px}
.trades-intro{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 18px;max-width:70ch}

.trades-rating{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;
  padding:14px 16px;margin-bottom:16px;
  background:var(--panel);border:1px solid var(--border);border-radius:10px;
}
.trades-rating-line{font-weight:600}
.trades-rating-score b{font-size:20px;color:var(--ok)}
.trades-rating-partners{font-size:13px}

.trades-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.trades-filter{
  padding:6px 12px;border-radius:999px;font-size:13px;
  background:var(--panel);border:1px solid var(--border);color:var(--muted);
}
.trades-filter:hover{color:var(--text);border-color:#3a4150}
.trades-filter.is-on{background:var(--accent);border-color:var(--accent);color:#fff}

.trades-list{display:flex;flex-direction:column;gap:18px}
.trade-group{
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;
}
.trade-group-head{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding-bottom:10px;border-bottom:1px solid var(--border);
}
.trade-group-name{font-size:16px}
.trade-group-what{color:var(--muted);font-size:13px}
/* Состояние обмена: ответ на вопрос «что происходит», а не «что нажать».
   Цвет — только у двух случаев: ждут вас (янтарный) и спор (красный). */
.trade-state{
  font-size:11px;line-height:1;padding:5px 9px;border-radius:999px;
  border:1px solid var(--border);color:var(--muted);white-space:nowrap;
  text-transform:lowercase;letter-spacing:.01em;
}
.trade-state-wait{color:#f0c46b;border-color:rgba(240,196,107,.45);
  background:rgba(240,196,107,.10)}
.trade-state-bad{color:#ff8a9b;border-color:rgba(255,138,155,.45);
  background:rgba(255,138,155,.10)}
.trade-state-idle{color:var(--muted)}
.trade-state-done{color:#8fe0a8;border-color:rgba(143,224,168,.35)}

/* Подсказки «?»: то, что раньше висело абзацами и растягивало каждый блок. */
details.page-help,details.trade-help{
  margin:0 0 14px;font-size:13px;color:var(--muted);
}
details.trade-help{margin:8px 0 0}
details.page-help summary,details.trade-help summary{
  cursor:pointer;color:var(--muted);width:max-content;
  border-bottom:1px dotted var(--border);
}
details.page-help summary:hover,details.trade-help summary:hover{color:var(--text)}
details.page-help p,details.trade-help p{
  margin:8px 0 0;max-width:80ch;line-height:1.5;
}

/* Форма сделки: кнопка отметки и пояснение. Галочки — у самих карт (.trade-pick) */
.trade-deal{
  margin:12px 0 4px;padding:12px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--border);
}
.trade-deal-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* Предложение обмена: одна кнопка на человека, набор карт отмечают в окне. */
.trade-offer{margin:12px 0 0}
.offer-count{color:inherit;opacity:.85}
/* «Все» и «Снять» в окне выбора — слева, подтверждение справа. */
.offer-pick-bulk{margin-right:auto;display:flex;gap:6px;align-items:center}
/* Полоса отметки набора: стоит над картами, у самих галочек. */
.trade-pick-bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin:12px 0 8px;padding:8px 12px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--border);
}
.trade-pick-label{
  font-size:11px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;
}
.trade-pick-sum{
  margin-left:auto;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.trade-decline{margin-top:10px}
.trade-decline summary{cursor:pointer;font-size:14px}
.trade-field{display:flex;flex-direction:column;gap:4px;font-size:13px;margin:10px 0}
.trade-field select,.trade-field input{
  padding:7px 10px;border-radius:8px;font-size:14px;
  background:var(--bg);border:1px solid var(--border);color:var(--text);
}
/* Выбор фото: у файлового поля своя кнопка «Выбрать файлы», рамку ей не задаём */
.trade-field input[type=file]{padding:6px 8px;font-size:13px;color:var(--muted)}
.trade-field input[type=file]::file-selector-button{
  margin-right:10px;padding:6px 12px;border-radius:8px;font-size:13px;
  background:var(--bg);border:1px solid var(--border);color:var(--text);
  cursor:pointer;
}
.trade-field input[type=file]::file-selector-button:hover{border-color:var(--accent)}

/* Одна пара — одна карта */
.trade-card{
  display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--border);
}
.trade-group .trade-card:first-of-type{border-top:0}
.trade-card.is-stale{opacity:.6}
.trade-thumb{position:relative;flex:0 0 56px}
.trade-thumb img{width:56px;border-radius:6px;display:block}
/* Галочка «эта карта в обмене» — в углу картинки: она относится к карте, а не к
   списку сверху. Подложка нужна, чтобы галочка читалась на светлой картинке. */
.trade-pick{
  position:absolute;top:3px;left:3px;z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;cursor:pointer;
  background:rgba(12,14,20,.72);border:1px solid var(--border);
}
.trade-pick:hover{border-color:var(--accent)}
.trade-pick input{margin:0;cursor:pointer}
.trade-body{flex:1;min-width:0}
.trade-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.trade-card-name{color:var(--text);font-weight:600;text-decoration:none}
.trade-card-name:hover{color:var(--accent)}
.trade-state{
  font-size:12px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--border);color:var(--muted);
}
.trade-state.state-active{border-color:var(--accent);color:var(--accent)}
.trade-state.state-confirmed{border-color:var(--ok);color:var(--ok)}
.trade-state.state-declined{border-color:var(--err);color:var(--err)}
.trade-state.state-dispute{border-color:var(--star);color:var(--star)}
.trade-state.state-stale{opacity:.8}
.trade-badge{
  font-size:12px;padding:2px 8px;border-radius:999px;
  background:var(--panel-2);border:1px solid var(--border);color:var(--star);
}
.trade-badge.quiet{color:var(--muted)}
/* Заморозка: та же снежинка, что и в «Моей коллекции», чтобы отметка читалась
   одинаково в двух местах. */
.trade-badge.freeze{color:#cfe9ff;border-color:rgba(140,210,255,.55);background:rgba(140,210,255,.12)}
.trade-dates{color:var(--muted);font-size:12px;margin-top:4px}
.trade-note{color:var(--muted);font-size:13px;line-height:1.5;margin:8px 0 0}
.trade-marks{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.trade-mark{font-size:13px;color:var(--ok)}
.trade-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.trade-contact{
  font-size:13px;color:var(--accent);text-decoration:none;
  padding:3px 9px;border-radius:999px;border:1px solid var(--border);
}
.trade-contact:hover{border-color:var(--accent)}

.trades-empty{color:var(--muted);font-size:14px;line-height:1.6;max-width:70ch}
.trades-more{font-size:13px;margin-top:16px}

/* Страница отметки по ссылке из сообщения */
.trades-action-page .trade-action-form{
  background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:16px 18px;max-width:560px;
}
.trades-action-page .trade-note{margin-top:12px}
@media (max-width:640px){
  .trades-page{padding:16px 12px 40px}
  .trade-thumb{flex-basis:44px}
  .trade-thumb img{width:44px}
  .trade-pick{width:20px;height:20px}
}


.trade-dispute{
  margin-top:10px;padding:10px 12px;border-radius:9px;font-size:13px;line-height:1.55;
  background:var(--panel-2);border:1px solid var(--border);border-left:3px solid var(--star);
}
.trade-dispute-mark{font-weight:600;color:var(--star);margin-right:4px}
.trade-dispute a{white-space:nowrap}

/* ===== Дело о споре глазами сторон (страница «Мои обмены» → дело) ===== */
.dispute-page{max-width:900px;margin:0 auto;padding:24px 16px 56px}
.dispute-back{font-size:13px;margin:0 0 12px}
.dispute-head h1{font-size:24px;margin:0 0 8px}
.dispute-intro{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 16px;max-width:72ch}

/* Состояние дела: главное, что человек должен понять с первого экрана */
.dispute-status{
  padding:14px 16px;margin-bottom:16px;border-radius:10px;
  background:var(--panel);border:1px solid var(--border);
  border-left:3px solid var(--star);
}
.dispute-status h2{font-size:16px;margin:0 0 6px}
.dispute-status p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.dispute-status-confirmed{border-left-color:var(--ok)}
.dispute-status-declined{border-left-color:var(--err)}
.dispute-verdict-note{
  margin-top:8px !important;padding:9px 11px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--border);color:var(--text) !important;
  font-size:13.5px;white-space:pre-wrap;
}

.dispute-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:820px){.dispute-grid{grid-template-columns:minmax(0,1fr)}}
.dispute-panel{
  padding:14px 16px;border-radius:12px;
  background:var(--panel);border:1px solid var(--border);
}
.dispute-panel + .dispute-panel{margin-top:16px}
.dispute-grid .dispute-panel + .dispute-panel{margin-top:0}
.dispute-panel h2{font-size:15px;margin:0 0 10px}
.dispute-panel h3{font-size:13px;margin:14px 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.dispute-reason{font-size:14px;line-height:1.55;margin:0 0 6px}
.dispute-panel .quiet{font-size:13px;line-height:1.55}
.dispute-warn{
  margin:10px 0 0;padding:9px 11px;border-radius:8px;font-size:13px;
  background:var(--panel-2);border:1px solid var(--border);border-left:3px solid var(--star);
  line-height:1.5;
}

.dispute-table{width:100%;border-collapse:collapse;font-size:13.5px}
.dispute-table td{padding:6px 8px 6px 0;border-bottom:1px solid var(--border);vertical-align:top}
.dispute-table tr:last-child td{border-bottom:0}
.dispute-yes{color:var(--ok);font-weight:600}
.dispute-no{color:var(--err);font-weight:600}

.dispute-timeline{list-style:none;margin:0;padding:0;font-size:13.5px}
.dispute-timeline li{padding:5px 0 5px 14px;border-left:2px solid var(--border);line-height:1.5}
.dispute-timeline li:last-child{border-left-color:var(--star)}
.dispute-when{display:block;color:var(--muted);font-size:12px}

.dispute-photos{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 0}
.dispute-photo{margin:0;width:150px}
.dispute-photo a{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--panel-2)}
.dispute-photo img{width:100%;height:120px;object-fit:cover;display:block}
.dispute-photo figcaption{font-size:12px;color:var(--muted);line-height:1.45;margin-top:5px}

.dispute-add{margin-top:14px}
.dispute-add summary{cursor:pointer;font-size:14px}
.dispute-add .trade-field{margin-top:10px}
.dispute-foot{font-size:13px;margin-top:18px;line-height:1.55}

/* ===== Отзывы об обменах (страницы /u/<ник>/reviews/ и /my/reviews/) ===== */
.reviews-page{max-width:900px;margin:0 auto;padding:24px 16px 56px}
.reviews-back{font-size:13px;margin:0 0 12px}
.reviews-head h1{font-size:24px;margin:0 0 8px}
.reviews-intro{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 16px;max-width:76ch}
.reviews-block{margin-top:22px}
.reviews-block h2,.reviews-write h2{font-size:16px;margin:0 0 10px}
.reviews-muted{color:var(--muted);font-weight:400;font-size:13px}
.reviews-hint{font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 10px}
.reviews-foot{font-size:13px;color:var(--muted);margin-top:22px;line-height:1.55}
.reviews-pager{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:18px;font-size:13.5px}

/* Форма отзыва: стоит там же, где отзывы читают */
.reviews-write{
  padding:14px 16px;border-radius:12px;margin-bottom:18px;
  background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--star);
}
.review-write + .review-write{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.review-write h3{font-size:14px;margin:0 0 10px;font-weight:600}
.review-form textarea{
  width:100%;box-sizing:border-box;padding:9px 11px;border-radius:8px;resize:vertical;
  background:var(--panel-2);border:1px solid var(--border);color:var(--text);
  font:inherit;font-size:14px;line-height:1.5;
}
.review-form-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px}
.review-file{font-size:13.5px;display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.review-file input{font-size:12.5px;max-width:230px}
.review-hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin:8px 0 0}
.review-submit{white-space:nowrap}
.review-del{margin-top:8px}
.review-del-btn{color:var(--err)}

/* Сам отзыв */
.review-card{
  padding:14px 16px;border-radius:12px;margin-bottom:12px;
  background:var(--panel);border:1px solid var(--border);
}
.review-card-warn{border-left:3px solid var(--star)}
.review-card-hidden{opacity:.75}
.review-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.review-author{font-weight:600}
.review-kind{
  font-size:12.5px;padding:2px 8px;border-radius:999px;
  background:var(--panel-2);border:1px solid var(--border);color:var(--muted);
}
.review-card-warn .review-kind{color:var(--star);border-color:var(--star)}
.review-when{margin-left:auto;color:var(--muted);font-size:12.5px}
.review-text{margin:10px 0 0;font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.review-note{
  margin:10px 0 0;padding:8px 10px;border-radius:8px;font-size:12.5px;line-height:1.5;
  background:var(--panel-2);border:1px solid var(--border);color:var(--muted);
}
.review-photos{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}
.review-photo{margin:0;position:relative;width:130px}
.review-photo a{display:block;border-radius:8px;overflow:hidden;border:1px solid var(--border);background:var(--panel-2)}
.review-photo img{width:100%;height:104px;object-fit:cover;display:block}
.review-photo-del{position:absolute;top:4px;right:4px;margin:0}
.review-photo-del button{
  width:24px;height:24px;padding:0;border-radius:6px;cursor:pointer;
  background:rgba(0,0,0,.6);border:1px solid var(--border);color:#fff;font-size:12px;line-height:1;
}
.review-own{margin-top:12px;font-size:13.5px}
.review-own summary{cursor:pointer;color:var(--muted)}
.review-form-edit{margin-top:10px}

/* Отзыв в «Моих обменах»: рядом с самим обменом */
.trade-review-link{
  font-size:13px;white-space:nowrap;padding:2px 8px;border-radius:999px;
  background:var(--panel-2);border:1px solid var(--star);color:var(--star);
}
.trade-review-link.done{border-color:var(--border);color:var(--muted)}
.review-stat .review-open{
  display:block;margin-top:6px;font-size:12.5px;white-space:nowrap;
}
.review-warn-count{color:var(--star)}

/* Обмены, ждущие отзыва (страница «Мои отзывы») */
.review-pending{list-style:none;margin:0;padding:0;font-size:13.5px}
.review-pending li{padding:6px 0;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.review-pending li:last-child{border-bottom:0}
.review-pending-kind{color:var(--muted);font-size:12.5px}
.review-pending time{margin-left:auto;color:var(--muted);font-size:12.5px}

/* ============================================================
   БЫСТРОЕ ПРЕДЛОЖЕНИЕ ОБМЕНА (сравнение коллекций)
   ============================================================ */
/* Кнопка под картой во вкладке «Взаимный обмен»: обмен начинается с человеком,
   поэтому она одинаковая у всех карт — и у тех, что отдаёт человек, и у тех,
   что он получает. */
.cv-offer{
  display:block;width:calc(100% - 12px);margin:0 6px 6px;
  padding:5px 8px;border-radius:8px;font-size:11.5px;line-height:1.3;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  transition:background .15s;
}
.cv-offer:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.cv-offer.done,
.cv-offer:disabled{
  color:var(--muted);background:var(--panel-2);border-color:var(--border);
  cursor:default;
}

/* Модалка после нажатия: куда писать и о чём договориться */
.offer-lead{margin:0 0 14px;font-size:13.5px;line-height:1.5}
.offer-links{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.offer-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:999px;font-size:13px;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
}
.offer-link:hover{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.offer-hint{
  margin:0 0 14px;padding:10px 14px;border-radius:8px;font-size:13px;
  line-height:1.5;background:var(--panel-2);border:1px solid var(--border);
  color:var(--muted);
}
.offer-block{margin-bottom:14px}
.offer-block-title{
  font-size:11px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:8px;
}
.offer-warn{list-style:none;margin:0;padding:0}
.offer-warn li{
  display:flex;gap:8px;align-items:flex-start;
  padding:7px 0;border-bottom:1px solid var(--border);
  font-size:13px;line-height:1.5;
}
.offer-warn li:last-child{border-bottom:0}
.offer-warn-ico{flex:0 0 auto}
.offer-actions{display:flex;align-items:center;gap:8px;margin-top:16px}
.offer-go{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 16px;border-radius:999px;font-size:13px;
  color:#fff;background:var(--accent);border:1px solid var(--accent);
}
.offer-go:hover{filter:brightness(1.1)}

/* Почему нет кнопки «Предложить обмен»: интерес односторонний */
.cv-mutual-hint{
  margin:0;padding:10px 14px;border-radius:8px;font-size:12.5px;line-height:1.5;
  color:var(--muted);background:rgba(20,23,28,.5);border:1px solid var(--border);
}

/* ============================================================
   ОБМЕНЫ: кнопки отметки и заморозка
   ============================================================ */
/* Класс `.btn-primary` стоял в разметке «Моих обменов» и профиля, но описания
   у него не было вовсе — браузер рисовал свою кнопку, и страница выбивалась из
   сайта. Теперь это та же кнопка, что `fl-btn-primary`. */
.btn-primary{
  padding:9px 16px;border-radius:8px;font-size:13px;font-weight:600;
  border:1px solid var(--accent);background:var(--accent);color:#fff;
  transition:background .15s,border-color .15s;
}
.btn-primary:hover{background:#3d7ae0}
.btn-primary:disabled{opacity:.55;cursor:default}
.btn-primary.btn-decline{background:var(--err);border-color:var(--err)}
.btn-primary.btn-decline:hover{background:#c2185b}
/* Вторичное действие: то же место и размер, но не спорит с главным.
   Так «Предложить обмен» не выглядит как второй primary рядом с подтверждением. */
.btn-secondary{
  padding:9px 16px;border-radius:8px;font-size:13px;font-weight:600;
  border:1px solid var(--border);background:transparent;color:var(--text);
  transition:background .15s,border-color .15s,color .15s;
}
.btn-secondary:hover{background:var(--panel-2);border-color:#3a4150}
.btn-secondary:disabled{opacity:.55;cursor:default}

/* Заморозка обмена: полоса в группе пары. Спокойный цвет — это состояние,
   а не тревога: заморозка — нормальный ход, а не проблема. */
.trade-freeze {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 10px 0 0; padding: 10px 12px; border-radius: 8px;
  border: 1px solid rgba(90, 170, 255, .35);
  background: rgba(90, 170, 255, .08);
  font-size: 13px; color: #cfe4ff;
}
.trade-freeze.is-frozen { border-color: rgba(140, 210, 255, .5); background: rgba(140, 210, 255, .12); }
.trade-freeze .trade-freeze-what { color: var(--text); }
.trade-freeze .trade-freeze-note { color: var(--muted); font-size: 12px; flex-basis: 100%; }
.trade-freeze-form { display: inline-flex; gap: 8px; margin: 0; }
.trade-freeze form { display: inline-flex; gap: 8px; margin: 0; }
/* Заморозка-«строка»: в свёрнутом виде это чип в один ряд с картами. */
.trade-freeze-collapsed{display:block;padding:0}
.trade-freeze-collapsed > summary{
  list-style:none;cursor:pointer;padding:10px 12px;color:var(--text);
  font-size:13px;display:flex;align-items:center;gap:8px;
}
.trade-freeze-collapsed > summary::-webkit-details-marker{display:none}
.trade-freeze-collapsed > summary::after{
  content:'›';margin-left:auto;color:var(--muted);transition:transform .15s;
}
.trade-freeze-collapsed[open] > summary::after{transform:rotate(90deg)}
.trade-freeze-body{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.trade-freeze-body p{margin:0}

/* Снежинка на карте в коллекции: карта не свободна, её берегут за обменом. */
.card .card-freeze{
  position: absolute; top: 6px; left: 6px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(12, 20, 32, .82); border: 1px solid rgba(140, 210, 255, .55);
  font-size: 12px; line-height: 1; color: #cfe9ff;
}
.card .thumb{position:relative}
.card:has(.card-freeze){box-shadow:inset 0 0 0 1px rgba(140, 210, 255, .25)}
.mini-card .card-frozen{
  position: absolute; top: 6px; left: 6px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(12, 20, 32, .82); border: 1px solid rgba(140, 210, 255, .55);
  font-size: 12px; line-height: 1; color: #cfe9ff;
}
.mini-card .mini-thumb { position: relative; }
.mini-card.is-frozen { box-shadow: inset 0 0 0 1px rgba(140, 210, 255, .35); }

/* ============================================================
   ТЕЛЕФОН: шапка под кнопкой, крупные цели, плотные карточки
   На узком экране шапка занимала 177 px (три строки ссылок), а подписи были
   20–24 px высотой — попасть пальцем в такую цель почти нельзя.
   ============================================================ */
.nav-toggle{display:none}

@media (max-width:760px){
  /* Шапка переносится: логотип и кнопка — в первой строке, меню — во второй. */
  .topbar{flex-wrap:wrap;padding:10px 14px;gap:8px}
  .topbar .brand{order:1}
  .nav-toggle{order:2}
  .topbar-right{order:3}
  /* Скрытые поля (импорт) не должны всплывать: `display:flex` ниже сильнее
     атрибута hidden, и в меню появлялся выбор файла. */
  .topbar-right > [hidden]{display:none !important}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-left:auto;
    background:none;border:1px solid var(--border);border-radius:10px;
    color:var(--text);font-size:18px;line-height:1;cursor:pointer;
  }
  .nav-toggle:hover{border-color:#3a4150;background:var(--panel-2)}
  .topbar-right{
    display:none;flex-basis:100%;width:100%;margin-top:8px;
    padding-top:6px;border-top:1px solid var(--border);
    flex-direction:column;align-items:stretch;gap:0;
  }
  .topbar[data-nav-open] .topbar-right{display:flex}
  .topbar-right > *{
    min-height:44px;display:flex;align-items:center;justify-content:flex-start;
    font-size:14px;text-align:left;
  }
  .topbar-right .link-btn{
    border:0;background:none;padding:0;font-size:14px;
    min-height:44px;display:flex;align-items:center;
  }
  .topbar-right .user{font-size:14px}
  /* Колокольчик в меню: одна иконка без подписи читается как пустая строка. */
  .topbar-right .notif{width:100%}
  .topbar-right .notif-bell{
    width:100%;height:44px;justify-content:flex-start;gap:10px;
    border-radius:0;padding:0;font-size:18px;
  }
  .topbar-right .notif-bell::after{
    content:'Уведомления';font-size:14px;color:var(--text);
  }
  .topbar-right .notif-panel{position:static;width:100%;max-height:none}
  .topbar-right form{display:flex;align-items:center}

  /* Подписи-кнопки в карточках: палец должен попадать без прицела. */
  .link-btn{min-height:36px;display:inline-flex;align-items:center;padding:7px 12px}
  .trades-filter{padding:9px 14px;font-size:13px;line-height:1.2}
  .trade-decline > summary.link-btn{width:100%;justify-content:center}

  /* Ряды карты в обменах: название больше не рвётся на две строки, отступы тише. */
  .trade-card{gap:10px;padding:9px 0;align-items:flex-start}
  .trade-thumb{flex:0 0 48px}
  .trade-thumb img{width:48px}
  .trade-card-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .trade-pick{width:24px;height:24px}
  .trade-pick input{width:16px;height:16px}

  /* Главная: два тайтла в ряд вместо одного на экран (12 361 px → ~5 тыс). */
  .titles-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .title-card{border-radius:12px}
  .title-card .info{padding:9px 10px}
  .title-card h3{font-size:13px;line-height:1.25;margin-bottom:3px}
  .title-card .count{font-size:11px;line-height:1.3}
  .title-card:hover{transform:none}

  /* Блок обмена: шапка и кнопки в одну колонку, без «плавающих» отступов. */
  .trade-group{padding:12px}
  .trade-group-head{gap:6px 8px}
  .trade-deal{padding:10px}
  .trade-deal-actions{flex-direction:column;align-items:stretch}
  .trade-deal-actions .btn-primary{width:100%;justify-content:center}
  .trade-offer .btn-primary,.trade-offer .btn-secondary{width:100%}
}

/* ============================================================
   ПОИСК В КОЛЛЕКЦИИ И ПЛОТНЫЕ ШАПКИ (1.41.0)
   Строка поиска фильтрует на месте — без числа непонятно, «пусто» это или
   ещё не отфильтровалось.
   ============================================================ */
.search-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search-found{
  font-size:12px;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.search-found[hidden]{display:none}

@media (max-width:760px){
  /* Шапка «Моей коллекции»: четыре числа в две колонки вместо ленты на пол-экрана. */
  .collection-stats{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 16px;width:100%;
  }
  .collection-stats .stat-value{font-size:20px}
  .collection-stats .rating-stat .stat-value{font-size:17px}
  .collection-stats .stat-sub{font-size:11px;line-height:1.35}
  /* Во всю ширину сетки: иначе тумблеры приватности встают в правую колонку
     и растягивают шапку на три строки. */
  .share-block{grid-column:1 / -1;width:100%;margin:2px 0 0;gap:6px}
  .share-label{width:100%;font-size:11px}
  .privacy-options.privacy-options-compact{flex-wrap:wrap;gap:5px}
  /* Три режима — одной строкой: крупные пилюли переносились и растягивали шапку. */
  .privacy-options-compact .privacy-option{padding:4px 9px;font-size:11px}
  .share-copy{padding:4px 10px;font-size:11px}
  .search-wrap{padding:8px 14px 4px}
  .search-input{max-width:none;font-size:16px}  /* 16px — иначе iOS зумит */

  /* Полоса рейтинга в «Моих обменах»: одна строка вместо четырёх. */
  .trades-rating{padding:8px 12px;margin-bottom:12px;gap:4px 10px;font-size:12px}
  .trades-rating-score b{font-size:15px}
  .trades-rating-partners{width:100%;font-size:11px}
  /* Восемь фильтров в три строки — это пол-экрана до первого обмена.
     На телефоне — одна строка с горизонтальной прокруткой. */
  .trades-filters{
    margin-bottom:14px;gap:6px;flex-wrap:nowrap;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;scrollbar-width:none;
  }
  .trades-filters::-webkit-scrollbar{display:none}
  .trades-filter{flex:0 0 auto}
}