/* Стили мини-аппа. Отдельным файлом: браузер Telegram кеширует его
   между открытиями, а страница приходит в разы легче. */
/* ============================================================================
   NFT render — мини-апп портфеля подарков Telegram.

   Цвета сняты пипеткой с экспорта макета, а не подобраны на глаз: фон
   #010001, карточка #1b1b1b, карточка на карточке #0b0b0b, сетка графика
   #4e4e4f, линии #7987ff и #ffa5cb, зелёный рост #30ab63, полоса прогресса
   #75b936, пустая сота #d9d9d9.

   Тёмная тема ОДНА и намеренно: апп живёт внутри Telegram, где фон всегда
   тёмный, а макет нарисован под него. Медиазапросов темы тут нет, но каждый
   цвет выставлен явно — страница держится на любом фоне хоста.
   ========================================================================= */
:root {
  --ground:      #010001;
  --ink:         #ffffff;
  --ink-dim:     #8d8d8d;
  --ink-faint:   #4d4e54;
  --surface:     #1b1b1b;
  --deep:        #0b0b0b;
  --hairline:    #282828;
  --grid:        #4e4e4f;
  --up:          #30ab63;
  --up-bg:       #245136;
  --bar:         #75b936;
  --avg:         #7987ff;
  --floor:       #ffa5cb;
  --hex:         #d9d9d9;

  --r-lg: 20px;
  --r-md: 16px;
  --gut: 24px;

  --ui: -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Segoe UI", sans-serif;
  --mark: "Archivo", "Manrope", -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ui);
  font-synthesis: none;
  font-size: 15px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  min-width: 280px;
  min-height: 100dvh;
  overflow-x: hidden;
}

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
button { -webkit-tap-highlight-color: transparent; }
button:active { transform: scale(.975); }

/* Телефонная колонка. Шире 460 не растягиваем: апп открывается в Telegram,
   и на планшете растянутая на весь экран сетка подарков выглядит сломанной. */
.phone {
  width: min(100%, 390px);
  margin: 0 auto;
  padding-inline: var(--gut);
  padding-block: 0 calc(104px + env(safe-area-inset-bottom));
  position: relative;
}
.phone::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 20px 0 0;
  pointer-events: none;
  opacity: .10;
  background: url("portfolio-pattern.webp") top center / 100% auto repeat-y;
}
.phone > .screen { position: relative; z-index: 1; }

/* Нижняя панель разделов — плавающее стекло. Не прижата к краю: полоса во
   всю ширину экрана сливается с системной панелью телефона, а приподнятая
   читается как часть приложения. Стекло настоящее: размытие того, что под
   ней, плюс внутренний блик по верхней кромке. */
.tabbar {
  position: fixed; z-index: 6;
  left: 50%; transform: translateX(-50%);
  bottom: calc(10px + env(safe-area-inset-bottom));
  width: calc(100% - var(--gut) * 2); max-width: calc(460px - var(--gut) * 2);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  padding: 7px 7px 8px;
  border-radius: 26px;
  background: rgba(28, 28, 32, .62);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 0 0 1px rgba(255, 255, 255, .07),
    0 10px 30px rgba(0, 0, 0, .55);
}
.tabbar button {
  position: relative;
  display: grid; justify-items: center; gap: 4px;
  padding: 7px 2px 4px;
  border-radius: 20px;
  color: var(--ink-faint);
  font-size: 10.5px; font-weight: 600; letter-spacing: -.01em;
  transition: color .18s ease;
}
/* Подсветка активного раздела — СТЕКЛО, а не заливка акцентом. Сплошная
   зелёная плашка на матовой панели читалась как наклейка поверх неё: цвет
   спорил со стеклом вместо того, чтобы лежать в нём. Светлая полупрозрачная
   подложка остаётся частью панели, а акцент уходит туда, где он и нужен, —
   на саму иконку. */
.tabbar button::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  opacity: 0;
  transition: opacity .18s ease;
}
.tabbar button[aria-current="true"]::before { opacity: 1; }
.tabbar button svg {
  position: relative; width: 23px; height: 23px;
  transition: color .18s ease, transform .18s cubic-bezier(.2, .9, .3, 1.3);
}
.tabbar button[aria-current="true"] { color: var(--ink); }
.tabbar button[aria-current="true"] svg {
  color: var(--bar);
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 7px rgba(117, 185, 54, .45));
}
.tabbar button span { position: relative; white-space: nowrap; }
/* Рамка фокуса нужна клавиатуре, а не пальцу: после тапа она оставалась
   висеть синим кольцом вокруг раздела. */
.tabbar button:focus { outline: none; }
.tabbar button:focus-visible { outline: 2px solid var(--bar); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .tabbar button::before, .tabbar button svg { transition: none; }
}

/* --- верхняя полоса ------------------------------------------------------ */

.bar { position: relative; z-index: 12; display: flex; align-items: center; gap: 8px; padding-top: max(20px, env(safe-area-inset-top)); }
.bar .side { display: flex; gap: 8px; flex: 1 1 0; min-width: 0; }
.bar .side.right { justify-content: flex-end; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 13px;
  border-radius: 999px;
  background: #1c1c1e;
  font-size: 13.5px; font-weight: 700;
}
.pill:hover { background: #232323; }
.pill.icon { width: 34px; padding: 0; justify-content: center; }

.wordmark {
  flex: none;
  padding: 6px 16px 7px;
  border-radius: 999px;
  background: var(--ink);
  color: #000;
  font-family: var(--mark);
  font-style: italic;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.02em;
}

.menu {
  position: absolute;
  top: 54px; right: 0;
  z-index: 9;
  min-width: 196px;
  padding: 6px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
  display: grid; gap: 2px;
}
.menu[hidden] { display: none; }
.menu:not([hidden]) { transform-origin:top right; animation:menu-in .14s cubic-bezier(.2,.8,.2,1) both; }
@keyframes menu-in { from { opacity:0; transform:translateY(-4px) scale(.985); } to { opacity:1; transform:none; } }
.menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px; font-weight: 600;
  text-align: left;
}
.menu button:hover { background: #262626; }
.menu button[aria-current="true"] { color: var(--up); }
.language-picker { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:5px 4px 8px; padding:8px 8px 8px 11px; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.language-title { display:flex; align-items:center; gap:7px; color:var(--ink-dim); font-size:11px; font-weight:700; }.language-title svg { width:16px; height:16px; color:#9aa7ff; }
.language-toggle { display:grid; grid-template-columns:repeat(3,auto); gap:3px; padding:3px; border-radius:11px; background:#111; }
.menu .language-toggle button { width:auto; min-width:43px; height:30px; padding:0 8px; justify-content:center; border-radius:8px; color:#777; font-size:10px; font-weight:900; }
.menu .language-toggle button[aria-pressed="true"] { color:#111; background:#fff; box-shadow:0 3px 12px #0008; }
.currency-picker { margin-top:0; border-top:0; }
.currency-toggle { grid-template-columns:repeat(5,auto); }
.menu .currency-toggle button { min-width:32px; padding:0 6px; }
.theme-picker { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 8px 8px 11px; border-bottom:1px solid rgba(255,255,255,.06); }
.theme-title { color:var(--ink-dim); font-size:11px; font-weight:700; }
.theme-picker > button { width:auto; padding:5px 7px; gap:7px; border-radius:999px; background:#111; color:var(--ink); font-size:10px; font-weight:800; }
.theme-switch { display:inline-flex; align-items:center; width:30px; height:18px; padding:2px; border-radius:999px; background:#45464b; transition:background .18s ease; }
.theme-switch i { display:block; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0004; transition:transform .18s ease; }
.theme-picker > button[aria-pressed="true"] .theme-switch { background:#74ad3b; }
.theme-picker > button[aria-pressed="true"] .theme-switch i { transform:translateX(12px); }
.menu:not([hidden]) { will-change:opacity,transform; }

/* --- шапка профиля ------------------------------------------------------- */

.hero { position: relative; margin-inline: calc(var(--gut) * -1); padding: 0 var(--gut) 4px; overflow: hidden; }
.hero::before {
  content: none;
  position: absolute; inset: -30px 0 auto; height: 330px;
  background-image: radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1.1px);
  background-size: 6px 6px;
  -webkit-mask-image: radial-gradient(130% 85% at 50% 28%, #000 22%, transparent 72%);
  mask-image: radial-gradient(130% 85% at 50% 28%, #000 22%, transparent 72%);
  pointer-events: none;
}

.avatar {
  position: relative; z-index: 1;
  width: 120px; height: 120px;
  margin: 26px auto 0;
  border-radius: 50%;
  background: var(--ink);
  color: #111;
  display: grid; place-items: center;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.who { position: relative; z-index: 1; text-align: center; margin-top: 14px; }
.who h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.who p { margin: 1px 0 0; color: var(--ink-faint); font-size: 15px; font-weight: 600; }

/* Метка образца. Врать про чужие цифры нельзя: пока апп не подключена к
   боту, она честно говорит, что показывает образец. */
.demo {
  position: relative; z-index: 2;
  display: none;
  width: fit-content;
  margin: 12px auto 0;
  padding: 4px 12px 5px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-dim);
  font-size: 12px; font-weight: 600;
}
body.is-demo .demo { display: block; }

/* Плашка с причиной. Стоит там же, где метка образца, и говорит человеческим
   языком, что нажать. Молчаливый образец вместо портфеля — худшее из
   поведений: непонятно, кто сломался. */
.why {
  position: relative; z-index: 2;
  margin: 12px 0 0;
  padding: 12px 14px 13px;
  border-radius: 14px;
  background: var(--surface);
  border-left: 3px solid var(--bar);
}
.why b { display: block; font-size: 14px; font-weight: 800; }
.why p { margin: 4px 0 0; color: var(--ink-dim); font-size: 12.5px; font-weight: 600; line-height: 1.45; }

/* --- карточка подарка ---------------------------------------------------- */

.card { margin-top: 16px; border-radius: 18px; overflow: hidden; background: var(--surface); }
.card-top {
  display: grid; place-items: center;
  height: 190px;
  background: linear-gradient(160deg, #2a2a33, #15151a);
}
.card-glyph { font-size: 84px; line-height: 1; }
.card-name { margin: 14px 0 0; text-align: center; font-size: 22px; font-weight: 800; }
.card-name i { margin-left: 7px; color: var(--ink-dim); font-style: normal; font-weight: 700; }
.card-sub { margin: 3px 0 16px; text-align: center; color: var(--ink-dim); font-size: 14px; font-weight: 600; }

/* Таблица свойств. Пары «ключ — значение» строками, как у Telegram: он
   первым показывает владельца, и начинать с модели значило бы начинать
   с середины. */
.facts { margin: 14px 0 0; padding: 0; border-radius: 16px; overflow: hidden; background: var(--surface); }
.facts > div { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.facts > div + div { border-top: 1px solid rgba(255, 255, 255, .06); }
.facts dt { flex: 0 0 104px; color: var(--ink-dim); font-size: 13px; font-weight: 600; }
.facts dd { margin: 0; font-size: 14px; font-weight: 700; }
.facts .rare {
  margin-left: 7px; padding: 1px 7px 2px;
  border-radius: 999px; background: rgba(121, 135, 255, .16);
  color: var(--avg); font-size: 11.5px; font-weight: 700;
}

.wide {
  display: block; width: 100%;
  margin: 16px 0 0; padding: 13px;
  border-radius: 14px; background: var(--bar);
  color: #10240a; font-size: 15px; font-weight: 800;
}

.gift-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:14px; padding:9px; border:1px solid rgba(255,255,255,.055); border-radius:20px; background:#151515; }
.gift-action { min-width:0; min-height:104px; padding:12px 8px 11px; border-radius:16px; background:#202020; color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center; }
.gift-action .action-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#2b2b2b; color:#d8d8d8; transition:.18s ease; }
.gift-action .action-icon svg { width:22px; height:22px; }
.gift-action .action-label { min-width:0; font-size:12px; line-height:1.2; font-weight:800; }
.gift-action.on { color:#fff; background:#263119; box-shadow:inset 0 0 0 1px #75b93670; }
.gift-action.on .action-icon { background:var(--bar); color:#10240a; }
.gift-action.compare { grid-column:1/-1; min-height:58px; flex-direction:row; background:linear-gradient(145deg,#262b1f,#1f1f1f); }
.gift-action.compare .action-icon { background:#b7ff4a; color:#142000; }
.collection-watch-actions { margin:10px 0 0; }
.collection-watch-actions .gift-action { min-height:72px; flex-direction:row; gap:8px; }
.collection-watch-actions .action-icon { width:35px; height:35px; flex:none; }
.alert-editor { margin-top:10px; padding:14px; border-radius:16px; background:var(--surface); }
.alert-editor p { margin:0 0 11px; color:var(--ink-dim); font-size:12px; line-height:1.35; }
.alert-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.alert-fields label { color:var(--ink-dim); font-size:10px; font-weight:650; }
.alert-fields input { width:100%; margin-top:5px; padding:10px 7px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:#111; color:var(--ink); font:inherit; font-size:13px; }
.alert-save { margin-top:10px; width:100%; padding:11px; border-radius:12px; background:#303033; font-size:13px; font-weight:750; }
.alert-status { min-height:16px; margin-top:7px; color:var(--bar); font-size:11px; }
.wishlist-hero { position:relative; overflow:hidden; padding:21px 19px 19px; border:1px solid #b7ff4a25; border-radius:24px; background:radial-gradient(circle at 92% 12%,#b7ff4a25,transparent 38%),linear-gradient(145deg,#242b1d,#171917 68%); }
.wishlist-hero::after { content:""; position:absolute; right:-24px; bottom:-43px; width:140px; height:140px; border:1px solid #b7ff4a25; border-radius:35px; transform:rotate(28deg); pointer-events:none; }
.wishlist-hero-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:13px; background:#b7ff4a; color:#1c280e; }
.wishlist-hero-mark svg { width:21px; height:21px; }
.wishlist-hero h1 { position:relative; z-index:1; margin:14px 0 4px; font-size:27px; letter-spacing:-.04em; }
.wishlist-hero p { position:relative; z-index:1; max-width:270px; margin:0; color:#b5bcb0; font-size:12px; line-height:1.45; }
.wishlist-stats { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:12px 0 18px; }
.wishlist-stat { padding:13px 14px; border:1px solid #ffffff0c; border-radius:17px; background:var(--surface); }
.wishlist-stat strong { display:block; font-size:24px; line-height:1; letter-spacing:-.05em; }
.wishlist-stat span { display:block; margin-top:6px; color:var(--ink-dim); font-size:11px; }
.wishlist-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.wishlist-filters { display:flex; gap:5px; min-width:0; overflow:auto; scrollbar-width:none; }
.wishlist-filters::-webkit-scrollbar { display:none; }
.wishlist-filters button { flex:none; min-height:36px; padding:0 11px; border-radius:12px; color:#a4a4a8; background:#202020; font-size:11px; font-weight:750; }
.wishlist-filters button[aria-pressed="true"] { color:#172207; background:#b7ff4a; }
.wishlist-sort { flex:none; max-width:114px; height:36px; padding:0 21px 0 9px; border:1px solid #ffffff16; border-radius:12px; color:#d8d8d8; background:#202020; font:inherit; font-size:10px; }
.wishlist-list { display:grid; gap:9px; }
.wishlist-row { width:100%; min-height:100px; padding:11px; border:1px solid #ffffff0d; border-radius:18px; background:linear-gradient(130deg,#252525,#1b1b1b); display:grid; grid-template-columns:78px minmax(0,1fr) 16px; gap:11px; align-items:center; text-align:left; }
.wishlist-row:focus-visible { outline:2px solid #b7ff4a; outline-offset:2px; }
.wishlist-row .thumb { width:78px; height:78px; border-radius:14px; display:grid; place-items:center; overflow:hidden; font-size:40px; background:radial-gradient(circle,#343b33,#242824 72%); }
.wishlist-row .thumb img { width:100%; height:100%; object-fit:contain; }
.wishlist-row-main { min-width:0; }
.wishlist-row b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.wishlist-row small { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-dim); font-size:10px; }
.wishlist-row-foot { display:flex; flex-wrap:wrap; align-items:center; gap:5px 9px; margin-top:10px; }
.wishlist-row-price { color:#b7ff4a; font-size:15px; font-weight:850; }
.wishlist-row-price.unavailable { color:#999; }
.wishlist-row .watch-pill { padding:4px 6px; border-radius:7px; background:#b7ff4a1c; color:#b7ff4a; font-size:9px; font-weight:800; }
.wishlist-row-arrow { color:#777; font-size:24px; line-height:1; }
.wishlist-empty { padding:26px 20px; border:1px dashed #ffffff24; border-radius:20px; background:#1d1d1d; text-align:center; }
.wishlist-empty svg { width:30px; height:30px; color:#b7ff4a; }
.wishlist-empty b { display:block; margin-top:8px; font-size:15px; }
.wishlist-empty p { margin:7px auto 0; max-width:240px; color:var(--ink-dim); font-size:11px; line-height:1.45; }
.wishlist-empty button { margin-top:15px; min-height:38px; padding:0 15px; border-radius:11px; background:#b7ff4a; color:#172207; font-size:11px; font-weight:800; }
.compare-hero { padding:20px 18px; border:1px solid #9aa7ff30; border-radius:22px; background:radial-gradient(circle at 84% 18%,#7987ff38,transparent 35%),linear-gradient(145deg,#202230,#171717 65%); }
.compare-hero span { color:#9aa7ff; font-size:10px; font-weight:900; letter-spacing:.14em; }.compare-hero h1 { margin:7px 0 4px; font-size:27px; letter-spacing:-.04em; }.compare-hero p { margin:0; color:var(--ink-dim); font-size:12px; line-height:1.45; }
.compare-chooser { position:relative; display:block; margin:14px 0 10px; color:var(--ink-dim); font-size:10px; font-weight:700; }
.compare-search { position:relative; display:flex; align-items:center; margin-top:6px; }
.compare-search > svg { position:absolute; left:13px; width:18px; height:18px; color:#8a8a91; pointer-events:none; }
.compare-search input { display:block; width:100%; height:52px; padding:0 42px; border:1px solid rgba(255,255,255,.1); border-radius:16px; outline:none; background:#1d1d1d; color:#fff; font:inherit; font-size:13px; font-weight:700; }
.compare-search input:focus { border-color:#a6ff3b80; box-shadow:0 0 0 3px #a6ff3b12; }
.compare-search-clear { position:absolute; right:7px; width:34px; height:34px; display:grid; place-items:center; color:#8a8a91; border-radius:11px; font-size:18px; }
.compare-results { position:absolute; z-index:12; top:calc(100% + 6px); left:0; right:0; max-height:286px; overflow:auto; padding:6px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:#151517; box-shadow:0 18px 38px #000b; overscroll-behavior:contain; }
.compare-result-option { width:100%; min-height:54px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:9px; align-items:center; padding:7px 9px; border-radius:11px; text-align:left; content-visibility:auto; contain-intrinsic-size:auto 54px; animation:market-option-in .16s ease-out both; }
.compare-result-option:hover,.compare-result-option:focus-visible { background:#26262a; }
.compare-result-option .mini-art { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:#24242a; font-size:21px; }
.compare-result-option b,.compare-result-option small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.compare-result-option b { color:#fff; font-size:12px; }.compare-result-option small { margin-top:2px; color:#85858b; font-size:9px; }
.compare-result-option strong { color:#76dc94; font-size:11px; white-space:nowrap; }
@keyframes market-option-in { from { opacity:0; transform:translateY(3px); } }
.compare-grid { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.compare-pick { position:relative; overflow:hidden; min-width:0; padding:9px 9px 12px; border:1px solid rgba(255,255,255,.06); border-radius:19px; background:linear-gradient(160deg,#232323,#181818 68%); }
.compare-pick .side-label { position:absolute; z-index:2; top:9px; left:9px; width:24px; height:24px; display:grid; place-items:center; border-radius:8px; color:#142000; background:#b7ff4a; font-size:10px; font-weight:950; }
.compare-art { height:112px; margin:-1px -1px 8px; display:grid; place-items:center; border-radius:14px; overflow:hidden; background:radial-gradient(circle,#34343b,#202024 70%); font-size:64px; }
.compare-art img { width:92%; height:92%; object-fit:contain; filter:drop-shadow(0 10px 9px #0008); }
.compare-pick b { display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compare-pick small { display:block; height:28px; margin-top:3px; color:var(--ink-dim); font-size:9px; line-height:1.35; overflow:hidden; }
.compare-market { margin-top:6px; color:#b8b8b8; font-size:9px; }.compare-market strong { color:#fff; font-size:11px; }
.compare-price { position:relative; display:block; margin-top:9px; }.compare-price span { position:absolute; z-index:1; left:10px; top:50%; transform:translateY(-50%); color:#6f6f74; font-size:13px; font-weight:800; }
.compare-price input { width:100%; height:42px; padding:0 8px 0 25px; border:1px solid rgba(255,255,255,.1); border-radius:12px; outline:none; background:#101010; color:var(--ink); font:inherit; font-size:13px; font-weight:750; }
.compare-price input:focus { border-color:#7987ff; box-shadow:0 0 0 3px #7987ff12; }
.compare-vs { position:absolute; z-index:3; left:50%; top:86px; transform:translate(-50%,-50%); width:38px; height:38px; display:grid; place-items:center; border:5px solid #010001; border-radius:50%; background:#fff; color:#111; font-size:9px; font-weight:950; }
#compare-run { min-height:51px; border-radius:16px; background:linear-gradient(135deg,#b7ff4a,#75b936); box-shadow:0 10px 26px #75b93618; }
.compare-result { margin-top:14px; padding:16px; border:1px solid #b7ff4a25; border-radius:19px; background:linear-gradient(145deg,#24291e,#181818 65%); }
.compare-result::before { content:"SMART PICK"; display:block; margin-bottom:6px; color:#b7ff4a; font-size:9px; font-weight:950; letter-spacing:.13em; }
.compare-result h3 { margin:0 0 5px; font-size:18px; }
.compare-result > p { margin:0 0 13px; color:var(--ink-dim); font-size:11px; line-height:1.45; }
.compare-metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.compare-metric { position:relative; overflow:hidden; padding:10px; border-radius:13px; background:#111; }
.compare-metric.winner { box-shadow:inset 0 0 0 1px var(--bar); background:#182012; }
.compare-metric b { display:block; font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.compare-metric strong { display:block; margin:7px 0 2px; color:#b7ff4a; font-size:19px; }
.compare-metric span { display:block; color:var(--ink-dim); font-size:9px; line-height:1.55; }
.share-panel { margin-top:14px; padding:13px; border-radius:16px; background:var(--surface); }
.share-panel p { margin:8px 0 0; color:var(--ink-dim); font-size:11px; line-height:1.4; }
.share-actions { display:flex; gap:8px; }
.share-actions button { flex:1; padding:11px 8px; border-radius:12px; background:#2a2a2e; font-size:12px; font-weight:750; }
.share-actions .primary { color:#10240a; background:var(--bar); }
.public-banner { margin:10px 0 14px; padding:10px 12px; border:1px solid rgba(117,185,54,.3); border-radius:14px; color:var(--bar); background:rgba(117,185,54,.08); font-size:12px; font-weight:700; text-align:center; }
.shared-view #share-panel,.shared-view #tabbar [data-tab="wishlist"] { display:none; }
.shared-view .tabbar { grid-template-columns:repeat(3,1fr); }
.shared-view [data-go="larp"],.shared-view [data-go="hype"],.shared-view #profile-larp { display:none !important; }
.larp-entry { width:100%; margin-top:14px; padding:15px; border:1px solid rgba(183,255,74,.18); border-radius:18px; color:#fff; text-align:left; background:linear-gradient(135deg,#242a1d,#181818 58%); }
.larp-entry span { display:block; color:#b7ff4a; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.larp-entry b { display:block; margin-top:5px; font-size:16px; }
.larp-entry small { display:block; margin-top:4px; color:var(--ink-dim); font-size:11px; line-height:1.35; }
.larp-hero { position:relative; overflow:hidden; padding:22px 18px; border:1px solid rgba(183,255,74,.16); border-radius:22px; background:radial-gradient(circle at 84% 18%,rgba(183,255,74,.18),transparent 33%),linear-gradient(145deg,#272d1f,#151515 62%); }
.larp-hero::after { content:"VS"; position:absolute; right:14px; bottom:-16px; color:#fff; opacity:.045; font-size:86px; font-weight:950; font-style:italic; }
.larp-kicker { color:#b7ff4a; font-size:10px; font-weight:900; letter-spacing:.14em; }
.larp-hero h1 { margin:8px 0 4px; font-size:28px; letter-spacing:-.04em; }
.larp-hero p,.larp-note { margin:0; max-width:280px; color:var(--ink-dim); font-size:12px; line-height:1.45; }
.larp-record { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:10px; }
.larp-record div { min-width:0; padding:9px 6px; border:1px solid #b7ff4a17; border-radius:12px; background:#10110f; text-align:center; }.larp-record b,.larp-record small { display:block; }.larp-record b { color:#b7ff4a; font-size:16px; }.larp-record small { margin-top:2px; color:#777d70; font-size:8px; }
.larp-form { margin-top:14px; padding:14px; border-radius:18px; background:var(--surface); }
.larp-modes { display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:4px; border-radius:13px; background:#111; }
.larp-modes button { min-height:39px; padding:5px 8px; border-radius:10px; color:#858585; font-size:10px; font-weight:850; }.larp-modes button[aria-pressed=true] { color:#142000; background:#b7ff4a; }
.larp-panel { margin-top:11px; }.larp-panel[hidden] { display:none; }
.larp-random-card { position:relative; overflow:hidden; padding:17px 15px; border:1px solid #b7ff4a28; border-radius:16px; background:radial-gradient(circle at 85% 20%,#b7ff4a28,transparent 32%),#141612; text-align:left; }
.larp-random-card::after { content:'?'; position:absolute; right:18px; top:3px; color:#b7ff4a; opacity:.13; font-size:72px; font-weight:950; }.larp-random-card b,.larp-random-card small { display:block; position:relative; z-index:1; }.larp-random-card b { color:#fff; font-size:15px; }.larp-random-card small { max-width:220px; margin-top:4px; color:#858b80; font-size:10px; line-height:1.35; }
.larp-form label { color:var(--ink-dim); font-size:11px; }
.larp-input { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:7px; }
.larp-input input { min-width:0; height:43px; padding:0 12px; border:1px solid rgba(255,255,255,.09); border-radius:12px; outline:none; background:#111; color:#fff; font:inherit; }
.larp-input input:focus { border-color:#b7ff4a80; box-shadow:0 0 0 3px #b7ff4a12; }
.larp-input button,.larp-challenge { min-height:43px; padding:0 15px; border-radius:12px; background:#b7ff4a; color:#142000; font-weight:850; }
.larp-random { width:100%; min-height:45px; margin-top:8px; border:1px solid #b7ff4a2b; border-radius:12px; background:linear-gradient(135deg,#26301d,#181a16); color:#dfffb2; font-weight:800; }
.larp-random span { margin-right:7px; font-size:16px; }
.larp-status { min-height:16px; margin:8px 2px 0; color:var(--ink-dim); font-size:11px; }
.larp-result { margin-top:14px; animation:larp-reveal .32s cubic-bezier(.2,.8,.2,1) both; }
.larp-result-meta { display:flex; justify-content:space-between; gap:8px; margin:0 3px 7px; color:#858585; font-size:9px; font-weight:750; text-transform:uppercase; letter-spacing:.06em; }
.larp-verdict { padding:16px; border-radius:18px; background:linear-gradient(145deg,#222,#171717); text-align:center; }
.larp-verdict h2 { margin:0; font-size:20px; }.larp-verdict p { margin:6px 0 0; color:var(--ink-dim); font-size:11px; line-height:1.4; }
.larp-versus { display:grid; grid-template-columns:1fr 34px 1fr; gap:7px; align-items:stretch; margin-top:9px; }
.larp-side { min-width:0; padding:12px 8px; border-radius:15px; background:#111; text-align:center; }
.larp-side.winner { box-shadow:inset 0 0 0 1px #b7ff4a; background:#1b2117; }
.larp-side b,.larp-side small,.larp-side strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.larp-side b { font-size:12px; }.larp-side strong { margin-top:6px; color:#b7ff4a; font-size:22px; }.larp-side small { margin-top:3px; color:var(--ink-dim); font-size:9px; }
.larp-vs { align-self:center; color:#777; font-size:11px; font-weight:900; text-align:center; }
.larp-scales { display:grid; gap:8px; margin-top:10px; }
.larp-scale { padding:10px; border-radius:13px; background:var(--surface); }
.larp-scale-head { display:flex; justify-content:space-between; gap:8px; color:#c8c8c8; font-size:10px; font-weight:700; }
.larp-scale-bars { display:grid; grid-template-columns:1fr 1fr; gap:3px; margin-top:7px; }
.larp-scale-bars i { display:block; height:5px; border-radius:999px; background:#383838; overflow:hidden; }
.larp-scale-bars i:first-child { display:flex; justify-content:flex-end; }.larp-scale-bars span { display:block; height:100%; background:#777; }.larp-scale-bars i:first-child span { background:#b7ff4a; }
.larp-result .larp-scale-bars span { animation:larp-bar .45s ease-out both; transform-origin:left; }.larp-result .larp-scale-bars i:first-child span { transform-origin:right; }
@keyframes larp-reveal { from { opacity:0; transform:translateY(8px) scale(.985); } } @keyframes larp-bar { from { transform:scaleX(0); } }
.larp-challenge { width:100%; margin-top:12px; }
.larp-leaders { display:grid; gap:6px; }
.larp-leader { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:8px; align-items:center; padding:10px 12px; border-radius:14px; background:var(--surface); }
.larp-leader em { color:#b7ff4a; font-style:normal; font-weight:900; text-align:center; }.larp-leader b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }.larp-leader small { color:var(--ink-dim); font-size:10px; }
.profile-reactions { margin:15px 0 2px; padding:15px; border:1px solid #ff865a25; border-radius:20px; background:radial-gradient(circle at 100% 0,#ff865a17,transparent 46%),linear-gradient(145deg,#24201e,#191919 75%); }
.reaction-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }.reaction-heading { display:flex; align-items:center; gap:9px; min-width:0; }.reaction-heading-icon { width:31px; height:31px; display:grid; place-items:center; flex:none; border-radius:10px; color:#2b1710; background:#ff9368; }.reaction-heading-icon svg { width:18px; height:18px; }.reaction-head b { font-size:14px; letter-spacing:-.02em; }.reaction-head small { padding:5px 7px; border-radius:8px; color:#ffba96; background:#ff865a1d; font-size:10px; font-weight:800; white-space:nowrap; }
.reaction-sub { margin:9px 0 0; color:#a59b98; font-size:11px; line-height:1.4; }
.reaction-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:13px; }
.reaction-buttons button { min-width:0; min-height:77px; padding:9px 4px 8px; border:1px solid #ffffff10; border-radius:13px; background:#151515; display:grid; justify-items:center; align-content:center; gap:2px; }
.reaction-buttons button i { font-size:23px; font-style:normal; line-height:1.1; }.reaction-label { color:#c7c7c7; font-size:10px; font-weight:800; }.reaction-count { color:#fff; font-size:13px; font-weight:900; line-height:1.2; }
.reaction-buttons button.selected { border-color:#ff9368; background:#37241d; box-shadow:inset 0 0 0 1px #ff93681a; }.reaction-buttons button.selected .reaction-label { color:#ffc5aa; }
.reaction-buttons button:disabled { cursor:default; }.reaction-buttons button:focus-visible { outline:2px solid #ff9368; outline-offset:2px; }
.reaction-foot { display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:10px; }.reaction-note { min-width:0; margin:0; color:var(--ink-dim); font-size:10px; line-height:1.35; }.reaction-leaderboard { display:flex; align-items:center; gap:4px; flex:none; min-height:31px; padding:0 8px; border-radius:9px; color:#ffad87; background:#ff865a16; font-size:10px; font-weight:800; }
.hype-hero { position:relative; overflow:hidden; padding:21px 19px 18px; border:1px solid #ff825032; border-radius:24px; background:radial-gradient(circle at 90% 5%,#ff744738,transparent 45%),linear-gradient(145deg,#30221d,#191919 68%); }
.hype-hero::after { content:""; position:absolute; right:-43px; bottom:-65px; width:176px; height:176px; border:1px solid #ff895626; border-radius:50%; box-shadow:0 0 0 27px #ff89560c,0 0 0 57px #ff895608; pointer-events:none; }
.hype-hero-icon { display:grid; place-items:center; width:39px; height:39px; border-radius:13px; background:#ff865a; color:#24120e; }
.hype-hero-icon svg { width:23px; height:23px; }
.hype-hero h1 { position:relative; z-index:1; margin:15px 0 5px; font-size:28px; letter-spacing:-.045em; }.hype-hero p { position:relative; z-index:1; max-width:280px; margin:0; color:#c6b5ae; font-size:12px; line-height:1.45; }
.hype-summary { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:12px 0 20px; }
.hype-stat { padding:13px 14px; border:1px solid #ffffff0c; border-radius:17px; background:var(--surface); }.hype-stat strong { display:block; font-size:24px; line-height:1; letter-spacing:-.05em; }.hype-stat span { display:block; margin-top:6px; color:var(--ink-dim); font-size:11px; }
.hype-list-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }.hype-list-head h2 { margin:0; font-size:18px; letter-spacing:-.03em; }.hype-refresh { width:35px; height:35px; display:grid; place-items:center; flex:none; border-radius:11px; color:#aaa; background:#242424; }.hype-refresh svg { width:17px; height:17px; }.hype-refresh:disabled { opacity:.5; }
.hype-search { display:flex; align-items:center; gap:9px; height:43px; padding:0 12px; margin-bottom:12px; border:1px solid #ffffff16; border-radius:13px; background:#202020; }.hype-search:focus-within { border-color:#ff865a; }.hype-search svg { width:17px; height:17px; color:#8e8e94; flex:none; }.hype-search input { width:100%; min-width:0; border:0; outline:0; color:#fff; background:transparent; font:inherit; font-size:12px; }.hype-search input::placeholder { color:#85858b; }
.hype-status { margin:-4px 0 10px; color:#ffb493; font-size:11px; line-height:1.4; }
.hype-list { display:grid; gap:9px; }
.hype-card { padding:13px; border:1px solid #ffffff0d; border-radius:18px; background:linear-gradient(145deg,#242424,#1a1a1a); }.hype-card.top { border-color:#ff865a36; background:linear-gradient(145deg,#2a211e,#1b1b1b 75%); }
.hype-main { display:grid; grid-template-columns:29px 44px minmax(0,1fr) auto; gap:9px; align-items:center; }.hype-rank { color:#7d7d84; font-size:13px; font-weight:900; }.hype-card.top .hype-rank { color:#ff9b70; }
.hype-avatar { width:44px; height:44px; border-radius:14px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(145deg,#47312a,#292524); color:#ffd1b6; font-size:19px; font-weight:900; }.hype-avatar img { width:100%; height:100%; object-fit:cover; }
.hype-person { min-width:0; }.hype-person b,.hype-person small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.hype-person b { font-size:13px; }.hype-person small { margin-top:3px; color:var(--ink-dim); font-size:10px; }
.hype-score { color:#ff996d; font-size:18px; font-weight:900; text-align:right; }.hype-score small { display:block; color:var(--ink-dim); font-size:9px; font-weight:600; }
.hype-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) auto; gap:6px; margin-top:12px; }.hype-actions button,.hype-actions a { min-height:37px; display:flex; align-items:center; justify-content:center; gap:4px; border:1px solid #ffffff0b; border-radius:11px; background:#111; color:#fff; text-decoration:none; font-size:13px; }.hype-actions button.selected { border-color:#ff865a; background:#39251e; }.hype-actions button:disabled { opacity:.45; }.hype-actions a { padding:0 10px; color:#ffab82; font-size:10px; font-weight:800; }
.hype-empty { padding:27px 18px; border:1px dashed #ffffff24; border-radius:18px; color:var(--ink-dim); background:#1e1e1e; text-align:center; font-size:12px; line-height:1.5; }.hype-empty button { display:block; min-height:36px; margin:13px auto 0; padding:0 15px; border-radius:10px; color:#26130d; background:#ff865a; font-size:11px; font-weight:800; }

/* --- заголовки секций ---------------------------------------------------- */

.head { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; }
.head h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.025em; }
.head .count { color: var(--ink-faint); font-size: 20px; font-weight: 700; }
.head .count.right { margin-left: auto; }
.head .more {
  margin-left: auto;
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: var(--surface);
  display: grid; place-items: center;
}
.head .more:hover { background: #262626; }
.head .more svg { display: block; }

/* --- соты ---------------------------------------------------------------- */

.hexes { display: flex; align-items: center; padding-inline: 5px; }
.hex {
  position: relative;
  flex: 0 0 calc((100% + 32px) / 5);
  aspect-ratio: 1 / 1.02;
  margin-left: -8px;
  background: #ffffff;
  clip-path: polygon(50% 0%, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
  display: grid; place-items: center;
  padding: 0;
}
.hex:first-child { margin-left: 0; }
.hex::before {
  content: ""; position: absolute; inset: 5px;
  background: var(--hex-fill, var(--hex));
  clip-path: inherit;
}
.hex svg { position: relative; z-index: 1; width: 54%; height: 54%; }

/* --- инвентарь ----------------------------------------------------------- */

.tiles-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kind {
  background: var(--surface);
  border-radius: var(--r-md);
  min-height: 108px;
  padding: 11px 11px 12px;
  text-align: left;
  display: flex; flex-direction: column; gap: 7px;
}
.kind:hover { background: #202020; }
.kind .art { height: 42px; display: flex; align-items: center; overflow: visible; }
.kind b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.kind span { color: var(--ink-dim); font-size: 12px; font-weight: 600; }

/* --- итог ---------------------------------------------------------------- */

.totals {
  background: var(--surface);
  border-radius: var(--r-md);
  min-height: 58px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  align-items: center;
}
.coin {
  width: 24px; height: 24px; flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #a8e6a0, #4e9b57 72%);
  display: grid; place-items: center;
}
.totals .col small { display: block; color: var(--ink-dim); font-size: 11.5px; font-weight: 600; }
.totals .col b { font-size: 10px; font-weight: 500; }
.totals .col b i { font-style: normal; color: var(--ink-dim); font-weight: 600; }
.totals .col em { display: block; font-style: normal; font-size: 10px; font-weight: 500; margin-top: 1px; overflow-wrap: anywhere; }

/* --- сетка подарков ------------------------------------------------------ */

.gifts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.gift {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 1 / 1.03;
  padding: 0;
  text-align: left;
  display: block;
}
.gift .bg { position: absolute; inset: 0; }
/* Диагональный блик из макета: одна светлая полоса через плитку. */
.gift .bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(206deg, transparent 46%, rgba(255,255,255,.13) 47%,
                              rgba(255,255,255,.13) 48.5%, transparent 49.5%);
}
.gift .glyph {
  position: absolute; right: -8px; bottom: -13px;
  font-size: 78px; line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));
}
.gift .name {
  position: absolute; top: 9px; left: 10px; right: 8px;
  font-size: 13px; font-weight: 800; letter-spacing: -.015em;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.gift .chg {
  position: absolute; top: 29px; left: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 5px 3px 7px;
  border-radius: 999px;
  background: var(--up-bg);
  color: var(--up);
  font-size: 11px; font-weight: 800;
}
.chg .arrow { width: 13px; height: 13px; flex: none; border-radius: 50%; background: var(--up); display: grid; place-items: center; }

/* --- достижения ---------------------------------------------------------- */

.ach-hero {
  position:relative; overflow:hidden; margin-top:14px; padding:18px;
  border:1px solid rgba(168,119,255,.22); border-radius:24px;
  background:
    radial-gradient(circle at 84% 13%,rgba(181,223,112,.16),transparent 31%),
    radial-gradient(circle at 16% 4%,rgba(139,116,255,.2),transparent 34%),
    linear-gradient(145deg,#242231,#171719 67%);
  box-shadow:0 18px 42px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.045);
}
.ach-hero::after {
  content:""; position:absolute; width:150px; height:150px; right:-58px; bottom:-74px;
  border:28px solid rgba(255,255,255,.025); border-radius:50%; pointer-events:none;
}
.ach-kicker { color:#a99cff; font-size:9px; font-weight:950; letter-spacing:.16em; }
.ach-hero-main { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) 82px; gap:14px; align-items:center; margin-top:8px; }
.ach-hero h1 { margin:0; font-size:27px; line-height:1.02; letter-spacing:-.045em; }
.ach-hero p { margin:7px 0 0; max-width:230px; color:#98989f; font-size:11px; line-height:1.45; }
.ach-ring {
  --ach-angle:0deg; width:78px; height:78px; padding:7px; border-radius:50%;
  background:conic-gradient(#b7ff4a var(--ach-angle),rgba(255,255,255,.08) 0);
  box-shadow:0 0 28px rgba(183,255,74,.1);
}
.ach-ring > span { width:100%; height:100%; display:grid; place-items:center; border-radius:50%; background:#171719; text-align:center; }
.ach-ring b,.ach-ring small { display:block; }.ach-ring b { font-size:19px; line-height:1; }.ach-ring small { margin-top:3px; color:#777780; font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.ach-stats { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:15px; }
.ach-stat { min-width:0; padding:9px 8px; border:1px solid rgba(255,255,255,.055); border-radius:13px; background:rgba(7,7,8,.34); }
.ach-stat b,.ach-stat small { display:block; }.ach-stat b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }.ach-stat small { min-height:18px; margin-top:3px; color:#85858d; font-size:8px; font-weight:750; line-height:1.15; text-wrap:balance; }
.ach-showcase { margin-top:13px; }
.ach-showcase-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 2px 8px; }
.ach-showcase-head b { font-size:13px; }.ach-showcase-head small { color:#777780; font-size:9px; }
.ach-showcase .hexes { justify-content:flex-start; min-height:62px; padding-left:5px; }
.ach-emoji-pack { display:flex; align-items:center; gap:12px; margin-top:12px; padding:12px; border:1px solid #b5df7040; border-radius:16px; background:linear-gradient(110deg,#20271c,#1b1c1e); }
.ach-emoji-pack > span { font-size:24px; line-height:1; }
.ach-emoji-pack > div { min-width:0; flex:1; }
.ach-emoji-pack b { display:block; color:#f4f7ed; font-size:12px; }
.ach-emoji-pack small { display:block; margin-top:3px; color:#a4a9a0; font-size:10px; line-height:1.3; }
.ach-emoji-pack a { flex:none; padding:9px 11px; border-radius:10px; background:#b5df70; color:#1b2412; font-size:10px; font-weight:800; text-decoration:none; }
.ach-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:22px 0 10px; }
.ach-toolbar h2 { margin:0; font-size:20px; letter-spacing:-.035em; }
.ach-filters { display:flex; gap:4px; padding:3px; border-radius:12px; background:#151517; }
.ach-filters button { min-height:30px; padding:0 9px; border-radius:9px; color:#777780; font-size:9px; font-weight:850; }
.ach-filters button[aria-pressed="true"] { color:#111; background:#fff; box-shadow:0 4px 12px #0007; }
.ach-empty { grid-column:1/-1; padding:28px 16px; border:1px dashed rgba(255,255,255,.1); border-radius:18px; color:#85858b; text-align:center; font-size:12px; }
.badges { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.badge-card {
  background: var(--surface);
  border-radius: var(--r-md);
  min-height: 182px;
  padding: 13px 10px 11px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  text-align: center;
}
.badge-card:hover { background: #202020; }
.badge-hex {
  width: 64px; aspect-ratio: 1 / 1.02;
  clip-path: polygon(50% 0%, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
  display: grid; place-items: center;
}
.badge-hex svg { width: 56%; height: 56%; }
.badge-card .lvl { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; }
.badge-card .lvl i { width: 8px; height: 8px; border-radius: 50%; background: var(--bar); display: block; }
.badge-card .nm { font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.rail { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: auto; }
.rail small { font-size: 11px; font-weight: 700; flex: none; }
.rail .track { flex: 1; height: 9px; border-radius: 999px; background: var(--ink); overflow: hidden; }
.rail .fill { display: block; height: 100%; border-radius: 999px; background: var(--bar); }

/* --- крупное достижение -------------------------------------------------- */

.trophy { position: relative; text-align: center; padding-bottom: 6px; }
.trophy::before {
  content: "";
  position: absolute; inset: -20px calc(var(--gut) * -1) auto; height: 300px;
  background-image: radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1.1px);
  background-size: 6px 6px;
  -webkit-mask-image: radial-gradient(130% 85% at 50% 25%, #000 20%, transparent 70%);
  mask-image: radial-gradient(130% 85% at 50% 25%, #000 20%, transparent 70%);
}
.trophy .big {
  position: relative;
  width: 128px; aspect-ratio: 1 / 1.08;
  margin: 24px auto 0;
  clip-path: polygon(50% 0%, 96% 25%, 96% 75%, 50% 100%, 4% 75%, 4% 25%);
  display: grid; place-items: center;
}
.trophy .big svg { width: 52%; height: 52%; }
.trophy .lvl { position: relative; display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 17px; font-weight: 700; }
.trophy .lvl i { width: 11px; height: 11px; border-radius: 50%; background: var(--bar); display: block; }
.trophy h1 { position: relative; margin: 4px 0 0; font-size: 27px; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
.trophy .note { position: relative; margin: 16px 0 0; color: var(--ink-faint); font-size: 14.5px; font-weight: 700; text-wrap: pretty; }
.trophy .rail { margin: 22px 0 0; }
.trophy .rail small { font-size: 15px; font-weight: 800; }
.trophy .rail .track { height: 13px; }

.rule {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 12px 13px;
  margin-top: 18px;
}
.rule b { font-size: 14px; font-weight: 800; }
.rule span { margin-left: auto; color: var(--ink-dim); font-size: 11.5px; font-weight: 600; text-align: right; max-width: 58%; }

/* --- экран коллекции ----------------------------------------------------- */

.screen[hidden] { display: none; }
.screen:not([hidden]) { animation: screen-in .18s ease-out both; }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* В Telegram возврат рисует сам клиент. На вложенных экранах оставляем
   чистую шапку из макета; в обычном браузере кнопки остаются для проверки. */
body.in-telegram:not([data-screen="profile"]) .bar .side { visibility: hidden; }

.card-top {
  position: relative;
  border-radius: var(--r-lg);
  padding: 16px 15px 15px;
  overflow: hidden;
  background: var(--deep);
  margin-top: 18px;
}
.card-top::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.1px);
  background-size: 6px 6px;
  -webkit-mask-image: linear-gradient(#000, transparent 85%);
  mask-image: linear-gradient(#000, transparent 85%);
}
.card-top .ghost { position: absolute; left: -16px; top: -24px; font-size: 140px; line-height: 1; opacity: .07; filter: grayscale(1); }
.card-top .row { position: relative; display: flex; align-items: center; gap: 11px; }
.round { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 21px; background: var(--surface); }
.card-top h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.card-top .sub { color: var(--ink-faint); font-size: 12.5px; font-weight: 600; margin-top: 1px; }
.card-top .vol { margin-left: auto; text-align: right; }
.card-top .vol b { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.card-top .vol small { display: block; color: var(--ink-dim); font-size: 11.5px; font-weight: 600; }

.chips { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 8px; margin-top: 10px; overflow: hidden; }
.chip { background: var(--surface); border-radius: 999px; padding: 8px 11px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.chip .dot { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 14px; }
.chip .txt { min-width: 0; }
.chip b { display: block; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip small { display: block; color: var(--ink-dim); font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip .mag { margin-left: auto; display: flex; }

.plot { background: var(--surface); border-radius: var(--r-lg); padding: 12px 13px 9px; margin-top: 10px; }
.plot .legend-top { display: flex; align-items: flex-start; gap: 10px; }
.plot .legend-top .keys small { display: block; color: var(--ink-dim); font-size: 12px; font-weight: 600; }
.plot .legend-top .vals { margin-left: auto; text-align: right; }
.plot .legend-top .vals b { display: flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: 13px; font-weight: 800; }
.plot svg.chart { display: block; width: 100%; height: auto; margin-top: 6px; }
.plot .legend { display: flex; gap: 18px; margin-top: 4px; font-size: 12.5px; font-weight: 700; }
.plot .legend span { display: flex; align-items: center; gap: 7px; }
.plot .legend i { width: 8px; height: 8px; border-radius: 50%; display: block; }

/* Переключатель периода. Данные за полгода у нас есть по каждой сделке,
   и смотреть их одним куском — терять всё, что происходило на неделе. */
.periods { display: flex; gap: 6px; margin: 12px 0 0; }
.periods button {
  flex: 1; padding: 7px 4px 8px;
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink-dim);
  font-size: 11.5px; font-weight: 600;
  transition: background .15s, color .15s;
}
.periods button[aria-current="true"] { background: var(--bar); color: #10240a; }
.periods button:focus { outline: none; }
.periods button:focus-visible { outline: 2px solid var(--bar); outline-offset: 2px; }

.tabs { display: flex; align-items: center; gap: 14px; margin: 20px 0 10px; }
.tab { padding: 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-faint); }
.tab[aria-selected="true"] { color: var(--ink); }
.tabs .more { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; }

.sales { display: grid; gap: 7px; }
.sale { background: var(--surface); border-radius: 14px; padding: 8px 9px 8px 10px; display: flex; align-items: center; gap: 9px; }
.sale .round { width: 30px; height: 30px; font-size: 16px; background: var(--deep); }
.sale .who b { display: block; font-size: 13.5px; font-weight: 800; }
.sale .who small { display: block; color: var(--ink-dim); font-size: 11px; font-weight: 600; }
.sale .price { margin-left: auto; text-align: right; }
.sale .price b { display: flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: 13.5px; font-weight: 800; }
.sale .price small { display: block; color: var(--up); font-size: 10.5px; font-weight: 700; }
.venue {
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  background: #1b3a7a;
  color: #cfe0ff;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  text-decoration: none;
}
.venue:hover { background: #24499a; }
/* Значок площадки. Размер тот же, что у буквенной плашки рядом: у площадок
   без логотипа она остаётся, и строки не должны прыгать по высоте. */
.venue-logo {
  flex: none; width: 30px; height: 30px;
  border-radius: 9px; object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.empty { color: var(--ink-dim); font-size: 13.5px; font-weight: 600; text-align: center; padding: 22px 10px; }
.catalogue-filter { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 16px; }
.catalogue-filter button { color: var(--ink-dim); font-size: 12px; text-decoration: underline; }

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

@media (max-width: 360px) {
  :root { --gut: 16px; }
  .chips { grid-template-columns: 1fr 1fr; }
  .chips .chip:first-child { grid-column: 1 / -1; }
  .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hex { flex-basis: calc((100% + 24px) / 5); margin-left: -6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* GiftFolio, Figma hTSHLZWFTr7rvWItEWRNTp: 390px frame, 24px gutters. */
:root { --gut:24px; --r-md:16px; }
.phone { width:100%; max-width:460px; min-height:100dvh; isolation:isolate; }
.phone::before { content:""; position:absolute; inset:40px 0 auto; height:780px; z-index:-1;
  background:url("portfolio-pattern.webp") top center / 100% auto repeat-y;
  opacity:.16; pointer-events:none; }
.hero::before,.trophy::before { display:none; }
.bar { padding-top:max(15px,env(safe-area-inset-top)); gap:4px; }
.wordmark { font-size:16px; padding:2px 11px 3px; line-height:1.15; }
.pill { height:32px; padding:0 11px; font-size:13px; }
.bar .side.right { gap:0; border-radius:999px; }
.bar .side.right .pill { background:transparent; }
.avatar { width:120px; height:120px; margin-top:24px; }
.who h1 { font-size:24px; font-weight:700; }
.who { margin-top:12px; }
.head { margin:20px 0 10px; gap:8px; }
.head h2,.head .count { font-size:20px; font-weight:600; }
.head .more,.tabs .more { width:20px; height:20px; padding:0; flex-shrink:0; }
.head .more svg,.tabs .more svg { margin:auto; }
.hexes { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin:0 10px; isolation:isolate; }
.hex { position:relative; background:transparent !important; aspect-ratio:.88; margin:0 -9px; clip-path:none;
  filter:drop-shadow(-3px 4px 2px #0009); }
.hex:first-child { margin-left:-9px; }
.hex::before { content:""; position:absolute; inset:0; clip-path:url(#rounded-hex);
  background:linear-gradient(155deg,#fff 0%,#fff 38%,#d7d9df 70%,#858994 100%); }
.hex::after { content:""; position:absolute; inset:4px 4px 8px; clip-path:url(#rounded-hex);
  background:linear-gradient(145deg,#ffffff30,transparent 45%,#0003),var(--badge-tint,#d9d9d9); }
.hex img,.hex svg { transform:translateY(-2px); }
.hex svg { z-index:1; }
.tiles-3,.gifts,.badges { gap:8px; }
.kind { aspect-ratio:1; min-height:0; gap:0; padding:10px; justify-content:flex-end; }
.kind .art { height:36px; margin-bottom:12px; }
.kind .art img { width:42px; height:42px; border-radius:8px; object-fit:contain; transform:rotate(-12deg); }
.kind .art img+img { margin-left:-14px; transform:rotate(12deg); }
.kind b { font-size:15px; font-weight:600; white-space:nowrap; }
.kind span { font-size:11px; }
.totals { padding:9px 8px; gap:4px; border-radius:13px; grid-template-columns:26px minmax(0,1fr) minmax(0,1fr); align-items:start; }
.coin { width:26px; height:26px; margin-top:0; background:#b5df70; box-shadow:none; }
.totals .col { min-width:0; line-height:1.15; }
.totals .col small { font-size:12px; line-height:1.25; margin:0; }
.totals .col b,.totals .col em { font-size:10px; line-height:1.2; font-weight:500; white-space:nowrap; margin:0; }
.gifts { margin-top:6px; }
.gift { aspect-ratio:1; background:var(--surface); }
.gift .bg { background:var(--surface) !important; }
.gift .bg::after { display:none; }
.gift .glyph { width:85%; height:85%; right:-10%; bottom:-13%; display:grid; place-items:center; font-size:44px; }
.gift .glyph img { width:100%; height:100%; object-fit:contain; }
.gift .name { top:10px; font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gift .chg { top:29px; padding:0; background:none; border-radius:0; font-size:11px; }
.gift .chg .arrow { display:none; }
.badge-card { min-height:178px; padding:11px 9px; gap:7px; }
.badge-card .nm { font-size:10px; font-weight:500; }
.badge-card .lvl { font-size:10px; }
.badge-card .lvl i,.trophy .lvl i { border-radius:0; clip-path:polygon(50% 0,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%); }
.badge-hex { width:62px; }
.rail .fill { background:linear-gradient(90deg,#377f25,#79c61b); }
.trophy .big { margin-top:30px; }
.trophy h1 { font-size:24px; max-width:250px; margin:4px auto 0; }
.trophy .rail { padding:16px 10px 0; }
.trophy .rail .track { height:20px; }
.sale .who { margin:0; text-align:left; }
.sale { padding:6px 10px; border-radius:14px; gap:7px; }
.sale .who b,.sale .price b { font-size:12px; font-weight:500; }
.sale .who small,.sale .price small { font-size:9px; }
.sale .round { width:25px; height:25px; }
.venue,.venue-logo { width:25px; height:25px; border-radius:8px; }
.card-top .row { width:100%; }
#deck .card-top { display:flex; align-items:flex-end; height:115px; padding:0 0 10px; background:none; }
#deck .card-top::before,#deck .ghost { display:none; }
#deck h2 { font-size:16px; }
#deck .round { width:30px; height:30px; }
#deck .vol b { font-size:14px; }
.chips { display:flex; overflow-x:auto; scrollbar-width:none; }
.chip { border-radius:14px; flex:0 0 118px; padding:8px 10px; text-align:left; }
.chip:first-child { flex-basis:158px; }
.chip b { font-size:11px; }
.chip small { font-size:9px; }
.plot { padding:10px 9px; margin-top:8px; }
.tabs { gap:8px; margin:14px 0 8px; }
.tab { font-size:20px; font-weight:600; }
.filters { display:flex; gap:6px; flex-wrap:wrap; margin:16px 0; }
.filters button { padding:6px 10px; background:var(--surface); border-radius:999px; font-size:12px; }
.filters button[aria-pressed=true] { background:#fff; color:#000; }
.search { width:100%; border:1px solid var(--hairline); padding:11px 12px; border-radius:12px; background:var(--surface); color:var(--ink); font:inherit; }
.status { font-size:12px; color:var(--ink-dim); padding:10px 0; }
.card-glyph img { width:160px; height:160px; object-fit:contain; }
@media(max-width:360px) { :root { --gut:16px; } .badges { grid-template-columns:repeat(3,minmax(0,1fr)); } .wordmark { font-size:14px; } }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
:root { --gut:clamp(16px,6.15vw,24px); }
body.in-telegram .phone { padding-top:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)); padding-bottom:calc(104px + var(--tg-safe-area-inset-bottom,0px) + var(--tg-content-safe-area-inset-bottom,0px)); }
body.in-telegram #close,body.in-telegram #back { display:none; }
body.in-telegram .bar { padding-top:10px; }
.kind .art > span { display:block; flex:0 0 36px; width:36px; height:42px; }
.kind .art > span+span { margin-left:-10px; }
.gift-animation { position:relative; contain:layout paint style; }
.gift-animation > svg,.gift-animation > canvas { width:100% !important; height:100% !important; display:block; }
.card-glyph.gift-animation { width:160px; height:160px; margin-inline:auto; }
.totals .col b { letter-spacing:-.15px; }
.totals .col em { white-space:normal; overflow-wrap:normal; }
.kind { min-width:0; }
.kind .art { max-width:100%; overflow:visible; padding-inline:3px; }
.kind .art { display:flex; align-items:center; gap:2px; width:100%; }
.kind:disabled { opacity:1; cursor:default; }
.kind .art > span { flex:1 1 0; width:0; min-width:0; max-width:36px; height:36px; transform:rotate(-12deg); transform-origin:center; }
.kind .art > span:nth-child(2) { transform:rotate(9deg); }
.kind .art > span:nth-child(3) { transform:rotate(-8deg); }
.kind .art > span+span { margin-left:0; }
.kind .art img { width:100%; height:100%; transform:none; }
.head [data-fold] { display:grid; place-items:center; margin-left:auto; padding:0; flex:0 0 24px; width:24px; height:24px; border-radius:50%; }
.head [data-fold] svg { display:block; }
#gift-top { position:relative; margin-top:0; border-radius:0; }
#gift-top::before { display:none; }
.nft-pattern { position:absolute; inset:0; pointer-events:none; opacity:.25; }
.nft-pattern span { position:absolute; width:7%; aspect-ratio:1; transform:translate(-50%,-50%); background:var(--symbol-color); mask:var(--symbol-image) center / contain no-repeat; -webkit-mask:var(--symbol-image) center / contain no-repeat; }
#gift-glyph { z-index:1; }
.hex img,.badge-hex img,.trophy .big img { width:70%; height:70%; object-fit:contain; position:relative; z-index:1; filter:drop-shadow(0 2px 2px #0003); }
.badge-hex { position:relative; background:#fff !important; }
.badge-hex::before { content:''; position:absolute; inset:3px; clip-path:inherit; background:var(--badge-tint,#111); }
.badge-hex,.trophy .big { clip-path:url(#rounded-hex); }
.sale .who { flex:1; min-width:0; }
.sale .who b,.sale .who small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sale .price { flex-shrink:0; }
.sale .round { width:36px; height:36px; }
.collection-selectors { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
.market-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:10px 0 12px; }
.market-stat { min-width:0; padding:10px 7px; border:1px solid rgba(255,255,255,.055); border-radius:13px; background:#191919; }
.market-stat small,.market-stat b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.market-stat small { color:#77777d; font-size:8px; font-weight:700; }.market-stat b { margin-top:4px; color:#f2f2f2; font-size:11px; }
body.awaiting-portfolio #s-profile > :not(.hero) { display:none; }
.portfolio-age { font-size:10px; color:var(--ink-dim); text-align:right; margin:6px 0; }
.gift .trend-chart { position:absolute; left:0; bottom:0; width:100%; height:58%; opacity:.9; pointer-events:none; }
.gift .glyph { z-index:1; }.gift .name,.gift .chg { z-index:2; }
.value-history { margin:14px 0; padding:14px; overflow:hidden; border:1px solid rgba(255,255,255,.065); border-radius:20px; background:linear-gradient(160deg,#1c1d20,#151515 72%); color:var(--ink-dim); font-size:11px; }
.market-head { display:flex; align-items:flex-start; gap:9px; }
.market-head > span { flex:1; color:#a8a8ad; font-size:10px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.market-head strong { color:#fff; font-size:21px; line-height:1; letter-spacing:-.04em; }
.market-change { padding:4px 7px; border-radius:999px; font-size:10px; font-weight:850; font-style:normal; line-height:1; }
.market-change.up { color:#72dd93; background:#46b87b1c; }.market-change.down { color:#ff7588; background:#ed727f1c; }
.portfolio-candles { display:block; width:100%; height:auto; margin:9px 0 2px; overflow:visible; border-radius:14px; background:linear-gradient(180deg,#111315 0%,#0e0f11 100%); }
.portfolio-candles .grid { stroke:#ffffff0d; stroke-width:1; vector-effect:non-scaling-stroke; }
.portfolio-candles .wick { stroke-width:1.05; vector-effect:non-scaling-stroke; }
.portfolio-candles .last-price { stroke:#ffffff20; stroke-width:1; stroke-dasharray:3 4; vector-effect:non-scaling-stroke; }
.portfolio-candles .candle { cursor:pointer; outline:none; }
.portfolio-candles .candle rect { transition:filter .14s ease,stroke .14s ease; vector-effect:non-scaling-stroke; }
.portfolio-candles .candle:hover rect:not(.hit),.portfolio-candles .candle:focus rect:not(.hit),.portfolio-candles .candle.selected rect:not(.hit) { filter:brightness(1.2); stroke:#ffffffb8; stroke-width:.8; }
.portfolio-candles .sample-point { stroke:#111315; stroke-width:2; vector-effect:non-scaling-stroke; }
.portfolio-candles .candle.selected .sample-point { stroke:#fff; stroke-width:2.5; }
.portfolio-candles .sample-join { fill:none; stroke:#969aa5; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.78; vector-effect:non-scaling-stroke; }
.portfolio-candles text { fill:#77777e; font-family:inherit; font-size:9px; }
.candle-readout { min-height:18px; display:flex; align-items:center; justify-content:space-between; gap:6px; padding:7px 9px; border-radius:10px; background:#101113; color:#aaaab0; font-size:9px; }
.candle-readout b { color:#eee; font-size:10px; }.candle-readout span { white-space:nowrap; }
.market-foot { display:flex; align-items:center; gap:12px; margin-top:9px; color:#77777e; font-size:9px; }
.market-foot .note { margin-left:auto; text-align:right; }
.market-dot { width:6px; height:6px; border-radius:50%; display:inline-block; margin-right:4px; }.market-dot.up { background:#46b87b; }.market-dot.down { background:#ed727f; }
.market-caption { display:block; margin-top:8px; color:#6f6f75; font-size:9px; line-height:1.35; }
.chart-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.chart-toolbar > small { color:#909097; font-size:10px; }
.chart-modes { display:flex; gap:2px; padding:3px; border-radius:10px; background:#0b0c0e; }
.chart-modes button { border:0; border-radius:7px; padding:7px 10px; font-size:10px; color:#98999f; background:transparent; cursor:pointer; }
.chart-modes button[aria-pressed="true"] { background:#303238; color:#fff; }
.portfolio-candles .sample-dot { fill:#15171a; stroke-width:1.5; }
.portfolio-candles .candle.selected .sample-dot { fill:currentColor; }
#s-collection .chips { display:grid; grid-template-columns:1fr 1fr; overflow:visible; gap:8px; }
#s-collection .chip { min-width:0; padding:12px; border-radius:16px; }
#s-collection .chip:first-child { grid-column:1/-1; }
#s-collection .chip .dot { width:34px; height:34px; background:#b5df7014; color:#b5df70; border-radius:11px; }
#s-collection .chip .dot > svg { width:20px; height:20px; }
#s-collection .chip #chip-icon > svg { width:100%; height:100%; }
#s-collection .round { overflow:hidden; background:transparent; }
#s-collection .round img,#s-collection #chip-icon img { width:100%; height:100%; object-fit:contain; }
#s-collection .chip b { font-size:12px; }
#s-collection .chip small { font-size:11px; }
.level-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; margin:16px 0; }
.level-step { background:var(--surface); border:1px solid #333; border-radius:10px; padding:8px 3px; font-size:10px; text-align:center; }
.level-step.earned { border-color:#79b834; color:#b5df70; }.level-step small { display:block; font-size:9px; margin-top:5px; }
.collection-selectors label { min-width:0; color:var(--ink-dim); font-size:11px; }
.collection-selectors select { display:block; width:100%; min-width:0; margin-top:5px; background:var(--surface); color:white; border:1px solid #333; border-radius:12px; padding:10px 6px; font:inherit; font-size:12px; }
.entry { position:fixed; inset:0; z-index:100; background:#080808; display:grid; place-items:center; padding:36px; text-align:center; }
.entry-card { max-width:300px; width:100%; }
.entry-orbit { width:112px; height:112px; margin:0 auto 28px; border:1px solid #b5df7040; border-radius:50%; display:grid; place-items:center; position:relative; }
.entry-orbit::after { content:''; position:absolute; inset:-8px; border:2px solid transparent; border-top-color:#b5df70; border-radius:50%; animation:entry-spin 2s linear infinite; }
.entry-orbit img { width:68px; height:68px; animation:entry-float 2s ease-in-out infinite; }
.entry h2 { font-size:24px; margin:0 0 10px; }.entry p { color:#929292; font-size:13px; line-height:1.6; }
.entry button { margin-top:20px; padding:10px; color:#b5df70; }
.entry.done { animation:entry-out .45s ease forwards; pointer-events:none; }
@keyframes entry-spin { to { transform:rotate(360deg); } }
@keyframes entry-float { 50% { transform:translateY(-7px); } }
@keyframes entry-out { to { opacity:0; transform:scale(1.025); } }
@media(prefers-reduced-motion:reduce) { .entry *,.entry::after { animation:none !important; } }
@media(min-width:400px) { .totals .col b,.totals .col em { font-size:11px; } .totals .col small { font-size:13px; } .totals { padding:10px 9px; gap:5px; grid-template-columns:28px minmax(0,1fr) minmax(0,1fr); } .coin { width:28px; height:28px; } }

/* Product polish: depth without keeping extra composited layers alive. */
.kind,.totals,.plot,.sale,.badge-card {
  border:1px solid rgba(255,255,255,.045);
  box-shadow:0 10px 28px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.025);
}
.gift {
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.gift:active { transform:scale(.965); box-shadow:0 3px 10px rgba(0,0,0,.25); }
.gift[data-animation-state="playing"] { border-color:rgba(181,223,112,.22); }

/* Achievement cards read as collectible objects and expose progress at a glance. */
.badges { perspective:700px; }
.badge-card {
  position:relative; isolation:isolate; overflow:hidden;
  min-height:178px; padding:12px 9px 10px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--badge-tint) 16%,#202020),#151515 58%);
  animation:badge-rise .42s cubic-bezier(.2,.75,.2,1) both;
  animation-delay:var(--badge-delay,0ms);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.badge-card::before {
  content:""; position:absolute; z-index:-1; width:100px; height:100px;
  left:50%; top:-38px; translate:-50% 0; border-radius:50%;
  background:var(--badge-tint); opacity:.14; filter:blur(22px);
}
.badge-card::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.08),transparent 28% 72%,rgba(0,0,0,.18));
}
.badge-card:active { transform:translateY(1px) scale(.975); }
.badge-card .badge-hex { filter:drop-shadow(0 8px 9px rgba(0,0,0,.4)); }
.badge-card .lvl { color:color-mix(in srgb,var(--badge-tint) 68%,white); }
.badge-card .nm { font-size:11px; font-weight:700; min-height:30px; display:grid; place-items:center; }
.badge-progress {
  position:absolute; top:8px; right:8px; min-width:31px; padding:3px 5px;
  border-radius:999px; background:rgba(0,0,0,.35); color:#fff;
  font-size:9px; line-height:1; font-weight:800; backdrop-filter:blur(6px);
}
.badge-lock { position:absolute; top:8px; right:8px; width:29px; height:29px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.13); border-radius:10px; background:rgba(8,8,10,.72); color:#d4d5d8; }
.badge-lock svg { width:15px; height:15px; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.badge-card.is-locked { filter:saturate(.25); opacity:.76; }
.badge-card.is-locked .badge-progress { display:none; }
.badge-card.is-locked .badge-hex img { opacity:.5; }
.badge-card .rail .fill { width:var(--badge-progress); box-shadow:0 0 10px color-mix(in srgb,var(--badge-tint) 65%,transparent); }
.sale,.badge-card { content-visibility:auto; contain-intrinsic-size:auto 60px; }
.badge-card { contain-intrinsic-size:auto 174px; }
@keyframes badge-rise { from { opacity:0; transform:translateY(10px) scale(.97); } }
@media (hover:hover) {
  .gift:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.13); box-shadow:0 12px 26px rgba(0,0,0,.32); }
  .badge-card:hover { transform:translateY(-3px) rotateX(1.5deg); border-color:color-mix(in srgb,var(--badge-tint) 35%,#333); box-shadow:0 15px 28px rgba(0,0,0,.28); }
}
@media (pointer:coarse), (max-width:600px) {
  .tabbar { background:#1c1c20; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .badge-progress { background:#242428; -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (prefers-reduced-motion:reduce) {
  .gift,.badge-card { transition:none; }
  .badge-card { animation:none; }
}
@media (max-width:360px) {
  .ach-hero { padding:16px 14px; }
  .ach-hero-main { grid-template-columns:minmax(0,1fr) 70px; gap:9px; }
  .ach-ring { width:68px; height:68px; }
  .ach-toolbar { align-items:stretch; flex-direction:column; }
  .ach-filters button { flex:1; }
}

/* Inventory and catalogue alignment with the 390px source layout. */
.tiles-3 { gap:8px; }
.kind {
  aspect-ratio:1.04; min-height:112px; padding:12px 11px 11px;
  border-radius:18px; justify-content:flex-end;
  background:linear-gradient(155deg,#202020,#191919 72%);
}
.kind .art { height:42px; margin:0 0 auto; padding:1px 1px 0; overflow:visible; }
.kind .art > span { flex:0 0 39px; width:39px; max-width:none; height:39px; }
.kind .art > span + span { margin-left:-10px; }
.kind b { margin-top:8px; font-size:14px; line-height:1.15; font-weight:700; letter-spacing:-.025em; }
.kind > span:last-child { margin-top:3px; font-size:11px; line-height:1.15; }
.kind:active { transform:scale(.975); }
.tiles-3.two .kind { aspect-ratio:1.42; min-height:118px; }
.tiles-3.two .kind .art { width:118px; max-width:100%; }

.totals {
  min-height:72px; padding:12px 13px; gap:10px; border-radius:18px;
  grid-template-columns:32px minmax(0,1fr) minmax(0,1fr); align-items:center;
  background:linear-gradient(160deg,#202020,#1a1a1a);
}
.coin { width:32px; height:32px; align-self:start; margin-top:1px; }
.totals .col { line-height:1.18; padding-block:1px; }
.totals .col:last-child { border-left:1px solid rgba(255,255,255,.07); padding-left:10px; }
.totals .col small { font-size:12px; font-weight:650; line-height:1.2; }
.totals .col b,.totals .col em { display:block; font-size:11px; line-height:1.28; font-weight:600; letter-spacing:-.015em; }
.totals .col b { margin-top:3px; }
.totals .col em { color:#f4f4f4; }

#s-catalogue #inventory-filters { display:none; }
#s-catalogue .filters button { min-height:34px; padding:7px 14px; font-size:13px; font-weight:650; }
.catalogue-controls { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin:12px 0 16px; }
.catalogue-controls .filters { flex:none; margin:0; }
.portfolio-controls { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin:14px 0 6px; }
.portfolio-controls .filters { margin:0; flex:none; }
.portfolio-controls .sort-control select { min-width:132px; }
.sort-control { display:grid; gap:4px; min-width:0; }
.sort-control > span { padding-left:3px; color:var(--ink-dim); font-size:9px; font-weight:650; }
.sort-control select {
  min-width:150px; height:34px; padding:0 28px 0 11px;
  border:1px solid rgba(255,255,255,.07); border-radius:999px;
  background:#1d1d1d; color:#fff; font:inherit; font-size:11px; font-weight:650;
  outline:none; color-scheme:dark;
}
.sort-control select:focus-visible { border-color:rgba(255,255,255,.2); box-shadow:0 0 0 3px rgba(255,255,255,.035); }
.catalogue-search {
  position:relative; display:block; margin:0 0 22px; color:#737373;
}
.catalogue-search > svg { position:absolute; z-index:1; left:15px; top:50%; width:19px; height:19px; transform:translateY(-50%); pointer-events:none; }
.catalogue-search .search {
  height:54px; padding:0 16px 0 44px; border-radius:17px;
  border-color:rgba(255,255,255,.065); background:#1d1d1d;
  font-size:14px; font-weight:550; outline:none;
}
.catalogue-search .search:focus { border-color:rgba(255,255,255,.18); box-shadow:0 0 0 3px rgba(255,255,255,.035); }
#s-catalogue .head { margin:24px 0 12px; }
#s-catalogue .head h2 { font-size:21px; font-weight:650; letter-spacing:-.035em; }
#s-catalogue .head .more { width:30px; height:30px; background:#202020; }
#s-catalogue .head [data-fold] { transition:transform .18s ease,background .18s ease; }
#s-catalogue .gifts { gap:10px; }
#s-catalogue .gift { aspect-ratio:.98; border-radius:19px; background:#1d1d1d; }
#s-catalogue .gift .name { top:12px; left:12px; right:8px; font-size:13px; font-weight:700; }
#s-catalogue .gift .chg { top:32px; left:12px; font-size:10px; font-weight:750; }
#s-catalogue .gift .glyph { width:88%; height:76%; right:-5%; bottom:-6%; }

@media(max-width:360px) {
  .kind { min-height:102px; padding:10px 8px; }
  .kind .art > span { flex-basis:33px; width:33px; height:35px; }
  .kind .art > span + span { margin-left:-9px; }
  .totals { grid-template-columns:28px minmax(0,1fr) minmax(0,1fr); padding:11px 9px; gap:6px; }
  .coin { width:28px; height:28px; }
  .totals .col:last-child { padding-left:6px; }
  .totals .col b,.totals .col em { font-size:9.5px; }
  .catalogue-controls { align-items:stretch; flex-direction:column; }
  .portfolio-controls { align-items:stretch; flex-direction:column; }
  .sort-control select { width:100%; }
}

/* ------------------------------------------------ свечи (assets/charts.js) */
.nc-host { position:relative; margin-top:10px; min-height:120px; }
.nc-sparse-hint { color:#a2a5ae; font-size:10px; font-weight:650; line-height:1.4; padding:0 2px 4px; }
.nc-svg { display:block; width:100%; height:auto; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.nc-grid { stroke:#ffffff0f; stroke-width:1; vector-effect:non-scaling-stroke; }
.nc-axis { fill:#7c7d84; font-family:Manrope,system-ui,sans-serif; font-size:8.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.nc-tag { fill:#0c0d0f; font-family:Manrope,system-ui,sans-serif; font-size:8.5px; font-weight:800; font-variant-numeric:tabular-nums; }
.nc-last { stroke-width:1; stroke-dasharray:2 3; opacity:.7; vector-effect:non-scaling-stroke; }
.nc-cross { stroke:#ffffff55; stroke-width:1; stroke-dasharray:1 2; vector-effect:non-scaling-stroke; pointer-events:none; }
.nc-candle { transition:opacity .12s ease; }
/* Приглушаем остальные свечи, только пока палец/мышь выбирает свечу. Раньше
   :hover на телефоне «залипал», и после тапа весь график оставался серым. */
.nc-svg.picking .nc-candle:not(.on) { opacity:.72; }
.nc-gap { stroke:#8a8d96; stroke-width:1; stroke-dasharray:2 3; opacity:.45; }
.nc-flat { fill:#8a8d96; opacity:.55; }
.nc-readout { display:flex; flex-direction:column; gap:4px; margin-top:6px; padding:8px 10px; border-radius:12px; background:#0e0f11; color:#a3a4aa; font-size:10.5px; min-height:58px; box-sizing:border-box; contain:layout; }
.nc-readout b { color:#eceef2; font-size:11px; font-weight:800; }
.nc-ohlc { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-variant-numeric:tabular-nums; }
.nc-ohlc i { margin-right:3px; color:#6e6f76; font-style:normal; font-weight:800; }
.nc-ohlc em { margin-left:auto; font-style:normal; font-weight:800; }
.nc-ohlc em.up { color:#4fd18d; } .nc-ohlc em.down { color:#ff6f7d; }
.nc-empty { display:grid; place-items:center; min-height:120px; padding:14px; border-radius:14px; background:#0e0f11; color:#8b8c92; font-size:12px; font-weight:600; text-align:center; line-height:1.4; }
.nc-skeleton { position:relative; height:170px; overflow:hidden; border-radius:14px; background:#17181a; }
.nc-skeleton::after { content:""; position:absolute; inset:0 auto 0 -55%; width:55%; transform:translateX(0); background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent); animation:nc-shimmer 1.6s ease-in-out infinite; }
@keyframes nc-shimmer { to { transform:translateX(280%); } }
@media (prefers-reduced-motion: reduce) { .nc-skeleton { animation:none; } }
.plot-modes { width:max-content; margin:8px 0 0 auto; }
.value-history .chart-modes button, .plot-modes button { padding:6px 9px; white-space:nowrap; }

/* ------------------------------------------ сделки и путь на карточке */
.gift-market { margin-top:12px; padding:14px; border:1px solid #ffffff10; border-radius:20px; background:linear-gradient(160deg,#1c1d20,#151516 72%); }
.gm-scope { margin:6px 0 0; color:#85868c; font-size:11px; font-weight:600; }
.gm-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:10px; }
.gm-stats:empty { display:none; }
.gm-stats div { padding:8px 8px 7px; border-radius:12px; background:#0f1012; min-width:0; }
.gm-stats small { display:block; color:#76777d; font-size:9.5px; font-weight:700; }
.gm-stats b { display:block; margin-top:2px; overflow:hidden; color:#f1f2f5; font-size:12px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; }
#gm-sales { margin-top:10px; }
.owner-path { position:relative; margin:12px 0 0; padding:0; list-style:none; display:grid; gap:2px; }
.owner-path::before { content:""; position:absolute; left:15px; top:14px; bottom:14px; width:2px; border-radius:2px; background:linear-gradient(#c6f36b55,#ffffff12); }
.owner-path li { position:relative; display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:10px; row-gap:4px; align-items:start; min-width:0; min-height:44px; padding:6px 0; }
.op-wait { color:#8b8c92; font-size:12px; font-weight:600; padding:10px 0 !important; }
.op-dot { position:relative; z-index:1; grid-column:1; grid-row:1 / span 2; display:grid; place-items:center; width:32px; height:32px; overflow:hidden; border-radius:50%; background:#26272c; color:#e9eaee; font-size:12px; font-weight:800; box-shadow:0 0 0 3px #17181a; }
.op-dot img { width:100%; height:100%; object-fit:cover; }
.op-owner.now .op-dot { background:#c6f36b; color:#11140a; }
.op-owner.market .op-dot { background:#2a2d38; }
.op-owner.hidden .op-dot { background:#1f2024; color:#6f7076; }
.op-sale .op-dot { width:24px; height:24px; margin:0 4px; background:#10261a; color:#4fd18d; }
.op-body { grid-column:2; display:flex; flex-direction:column; min-width:0; }
.op-body b { overflow:hidden; color:#eef0f3; font-size:13px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.op-body b a { color:inherit; text-decoration:none; }
.op-body small { color:#7e7f86; font-size:10.5px; font-weight:600; overflow-wrap:anywhere; }
.op-sale .op-body b { color:#b9ecce; font-size:12px; }
.op-price { grid-column:2; justify-self:end; max-width:100%; overflow-wrap:anywhere; color:#4fd18d; font-size:13px; font-weight:800; font-variant-numeric:tabular-nums; }
/* Keep a long confidence reason below the owner, never beside the date. */
.op-tag { grid-column:2; justify-self:start; min-width:0; max-width:100%; padding:3px 7px; border-radius:12px; background:#ffffff0d; color:#b7b8be; font-size:9.5px; font-style:normal; font-weight:800; line-height:1.4; white-space:normal; overflow-wrap:anywhere; }
#go-count { max-width:100%; margin-left:auto; font-size:12px; font-weight:800; color:#c9cace; letter-spacing:0; line-height:1.3; white-space:normal; text-align:right; }
#gift-owners .market-head { align-items:center; flex-wrap:wrap; }
#gift-owners .market-head > span { min-width:0; flex-basis:140px; }

/* ------------------------------------------------ сравнение: арена */
.compare-art { height:124px; padding:10px; }
.compare-art > img, .compare-art > canvas { width:100% !important; height:100% !important; max-width:104px; max-height:104px; object-fit:contain; }
.compare-pick { transition:transform .32s cubic-bezier(.2,.8,.25,1), opacity .22s ease, box-shadow .22s ease, border-color .22s ease; }
.compare-pick .crown { position:absolute; z-index:3; top:9px; right:9px; padding:4px 7px; border-radius:8px; background:#b7ff4a; color:#142000; font-size:9px; font-weight:950; letter-spacing:.06em; opacity:0; transform:translateY(-6px) scale(.8); transition:opacity .25s ease .1s, transform .35s cubic-bezier(.2,.9,.25,1.4) .1s; }
.compare-grid.arena-in .pick-a { animation:arena-left .5s cubic-bezier(.2,.9,.25,1.15) both; }
.compare-grid.arena-in .pick-b, .compare-pick.enter-b { animation:arena-right .5s cubic-bezier(.2,.9,.25,1.15) both; }
.compare-grid.arena-in .compare-vs { animation:vs-pop .55s cubic-bezier(.2,.9,.25,1.5) .18s both; }
@keyframes arena-left { from { opacity:0; transform:translateX(-26px) rotate(-3deg); } to { opacity:1; transform:none; } }
@keyframes arena-right { from { opacity:0; transform:translateX(26px) rotate(3deg); } to { opacity:1; transform:none; } }
@keyframes vs-pop { from { transform:translate(-50%,-50%) scale(0) rotate(-120deg); } to { transform:translate(-50%,-50%) scale(1) rotate(0); } }
.pick-a.clash { transform:translateX(9px) rotate(1.5deg); }
.pick-b.clash { transform:translateX(-9px) rotate(-1.5deg); }
.compare-vs.flash { animation:vs-flash .52s ease both; }
@keyframes vs-flash { 0% { transform:translate(-50%,-50%) scale(1); filter:brightness(1); } 45% { transform:translate(-50%,-50%) scale(1.32); filter:brightness(1.18); } 100% { transform:translate(-50%,-50%) scale(1); filter:brightness(1); } }
.compare-pick.won { transform:translateY(-6px); border-color:#b7ff4a88; box-shadow:0 14px 30px #0008, 0 0 0 1px #b7ff4a55, 0 0 34px #b7ff4a22; }
.compare-pick.won .crown { opacity:1; transform:none; }
.compare-pick.lost { opacity:.55; transform:scale(.97); }
.compare-result:not([hidden]) { animation:result-rise .4s cubic-bezier(.2,.9,.25,1.1) both; }
@keyframes result-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) {
  .compare-grid.arena-in .pick-a, .compare-grid.arena-in .pick-b, .compare-pick.enter-b, .compare-grid.arena-in .compare-vs, .compare-vs.flash, .compare-result:not([hidden]) { animation:none; }
  .compare-pick { transition:none; }
}

/* ------------------------------------------------ реакции: как это работает */
.reaction-howto { display:grid; gap:6px; margin:12px 0 0; padding:0; list-style:none; counter-reset:how; }
.reaction-howto li { position:relative; display:grid; gap:2px; padding:9px 10px 9px 38px; border-radius:12px; background:#151515; counter-increment:how; }
.reaction-howto li::before { content:counter(how); position:absolute; left:10px; top:9px; width:20px; height:20px; display:grid; place-items:center; border-radius:7px; background:#ff865a24; color:#ffb08c; font-size:10px; font-weight:900; }
.reaction-howto b { color:#f2e9e5; font-size:11.5px; }
.reaction-howto span { color:#a39a97; font-size:10.5px; line-height:1.4; }
.reaction-actions { display:flex; margin-top:9px; }
.reaction-share { flex:1; min-height:40px; border-radius:12px; background:linear-gradient(135deg,#ff9368,#ff6f5a); color:#2a120b; font-size:12px; font-weight:900; }
.reaction-buttons button.readonly { opacity:.82; }
.reaction-note.nudge { color:#ffb08c; animation:nudge .36s ease; }
@keyframes nudge { 25% { transform:translateX(-4px); } 50% { transform:translateX(4px); } 75% { transform:translateX(-2px); } }
.hype-how { margin:9px 0 0 !important; padding:9px 10px; border-radius:12px; background:#ffffff0a; color:#d6c8c2 !important; font-size:11px !important; line-height:1.45; }

/* ------------------------------------------------ вишлист: приколотая карточка */
.wishlist-hero { padding-right:132px; min-height:150px; }
.wishlist-hero::after { display:none; }
.wishlist-pin { position:absolute; right:18px; top:50%; width:104px; height:104px; transform:translateY(-46%) rotate(7deg); border:1px solid #b7ff4a38; border-radius:26px; background:radial-gradient(circle at 30% 25%,#3a4a26,#1b2114 75%); box-shadow:0 16px 28px #0009, inset 0 1px 0 #ffffff14; display:grid; place-items:center; }
.wishlist-pin-art { width:78px; height:78px; display:grid; place-items:center; font-size:46px; }
.wishlist-pin-art img, .wishlist-pin-art canvas { width:100% !important; height:100% !important; object-fit:contain; filter:drop-shadow(0 8px 8px #0008); }
.wishlist-pin::before { content:""; position:absolute; z-index:2; top:-9px; left:50%; width:18px; height:18px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle at 35% 30%,#e8ffb8,#b7ff4a 45%,#6e9c24); box-shadow:0 3px 5px #0009; }
.wishlist-pin::after { content:""; position:absolute; top:6px; left:50%; width:2px; height:8px; transform:translateX(-50%); background:#0006; border-radius:1px; }
@media (max-width:360px) { .wishlist-hero { padding-right:112px; } .wishlist-pin { width:88px; height:88px; right:12px; } .wishlist-pin-art { width:64px; height:64px; } }
.nc-note { display:block; margin-top:6px; color:#6f7076; font-size:9.5px; line-height:1.35; }

/* ------------------------------------------------ инвентарь: веер из трёх подарков
   Раньше на миниатюры действовали три слоя правил: поворот обёртки, поворот
   картинки внутри неё и картинка 42px в обёртке 36px. Подарки съезжали по
   высоте и обрезались по-разному. Теперь один размер, общий низ, лёгкий веер. */
.kind .art { position:relative; display:flex; align-items:flex-end; justify-content:flex-start; gap:0; height:40px; width:100%; max-width:100%; padding:0 0 0 2px; margin-bottom:12px; overflow:visible; }
.kind .art > span { position:relative; display:grid; place-items:center; flex:0 1 38px; width:38px; min-width:26px; max-width:38px; height:auto; aspect-ratio:1; margin-left:-9px; transform:rotate(0deg); transform-origin:50% 90%; }
.kind .art > span:first-child { margin-left:0; transform:rotate(-9deg); z-index:1; }
.kind .art > span:nth-child(2) { transform:translateY(-2px); z-index:2; }
.kind .art > span:nth-child(3) { transform:rotate(9deg); z-index:3; }
.kind .art > span > img, .kind .art > span > canvas { display:block; width:100% !important; height:100% !important; object-fit:contain; transform:none !important; margin:0 !important; border-radius:0; filter:drop-shadow(0 3px 4px #0008); }
.nc-cross-tag { fill:#3a3c44; }
.nc-cross-text { fill:#f2f3f6; font-family:Manrope,system-ui,sans-serif; font-size:8.5px; font-weight:800; font-variant-numeric:tabular-nums; }
.nc-crosshair { pointer-events:none; }
.compare-result-option .mini-art { overflow:hidden; padding:3px; }
.compare-result-option .mini-art > img, .compare-result-option .mini-art > canvas { width:100% !important; height:100% !important; object-fit:contain; }
.portfolio-controls, .catalogue-controls { justify-content:flex-end; }
.hype-found { display:grid; gap:8px; margin:0 0 14px; }
.hype-found-head { color:#c9cace; font-size:11px; font-weight:800; letter-spacing:.02em; padding:2px 2px 0; }
/* v421: узор за шапкой снова виден. С v418 стили живут в assets/app.css, и
   адрес «assets/portfolio-pattern.png» стал считаться от файла стилей —
   assets/assets/…, картинка не грузилась. */
/* v422: узор — один раз за шапкой, как в макете, и тает книзу. Повтор по
   вертикали давал видимый шов через весь экран и слишком плотную сетку. */
.phone::before {
  inset:24px 0 auto !important; height:560px !important;
  background:url("portfolio-pattern.webp") top center / 112% auto no-repeat !important;
  opacity:.14;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.alert-status:not(:empty) { display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:8px; color:#cfd3c8; font-size:11.5px; line-height:1.4; }
.watch-open { min-height:34px; padding:0 14px; border-radius:10px; background:#b7ff4a; color:#142000; font-size:12px; font-weight:900; }

/* ------------------------------------------------ карточка коллекционера */
.pc { position:relative; overflow:hidden; padding:14px; border-radius:22px; border:1px solid #ffffff12;
  background:radial-gradient(120% 90% at 100% 0%,#ff865a1c,transparent 55%),linear-gradient(160deg,#232326,#18181a 70%);
  box-shadow:0 14px 30px #0006; animation:pc-in .45s cubic-bezier(.2,.9,.25,1.1) both; }
.pc.medal-1 { border-color:#ffd16a66; background:radial-gradient(120% 90% at 100% 0%,#ffd16a2e,transparent 55%),linear-gradient(160deg,#2b2618,#18181a 70%); }
.pc.medal-2 { border-color:#d8e1ee55; background:radial-gradient(120% 90% at 100% 0%,#d8e1ee24,transparent 55%),linear-gradient(160deg,#24262b,#18181a 70%); }
.pc.medal-3 { border-color:#e0996155; background:radial-gradient(120% 90% at 100% 0%,#e0996128,transparent 55%),linear-gradient(160deg,#2a221c,#18181a 70%); }
@keyframes pc-in { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
.pc-head { display:grid; grid-template-columns:auto 52px minmax(0,1fr) auto; gap:10px; align-items:center; }
.pc-rank { min-width:30px; height:26px; padding:0 7px; display:grid; place-items:center; border-radius:9px; background:#ffffff0e; color:#b9b9c0; font-size:12px; font-weight:900; }
.pc.medal-1 .pc-rank { background:linear-gradient(135deg,#ffe28a,#e8a93b); color:#3a2600; }
.pc.medal-2 .pc-rank { background:linear-gradient(135deg,#f1f5fb,#a9b4c4); color:#1d2430; }
.pc.medal-3 .pc-rank { background:linear-gradient(135deg,#f2b27d,#b86a36); color:#2e1507; }
.pc-avatar { position:relative; width:52px; height:52px; display:grid; place-items:center; overflow:hidden; border-radius:50%;
  background:linear-gradient(145deg,#4a3329,#262224); color:#ffd7c0; font-size:20px; font-weight:900;
  box-shadow:0 0 0 2px #18181a, 0 0 0 4px #ff865a88; }
.pc.medal-1 .pc-avatar { box-shadow:0 0 0 2px #18181a, 0 0 0 4px #ffd16a; }
.pc.medal-2 .pc-avatar { box-shadow:0 0 0 2px #18181a, 0 0 0 4px #d8e1ee; }
.pc.medal-3 .pc-avatar { box-shadow:0 0 0 2px #18181a, 0 0 0 4px #e09961; }
.pc-avatar img { width:100%; height:100%; object-fit:cover; }
.pc-person { min-width:0; }
.pc-person b, .pc-person small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-person b { font-size:14.5px; letter-spacing:-.01em; }
.pc-person small { margin-top:2px; color:#8f8f96; font-size:11px; }
.pc-worth { text-align:right; }
.pc-worth b { display:block; color:#fff; font-size:16px; font-weight:900; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.pc-worth small { display:block; margin-top:2px; color:#8f8f96; font-size:10px; font-weight:700; }
.pc-shelf { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:12px; }
.pc-gift { position:relative; aspect-ratio:1; overflow:hidden; border-radius:15px; display:grid; place-items:center;
  isolation:isolate; box-shadow:none; background:var(--surface); }
.pc-gift::after { content:none; }
.pc-gift>.gift-visual { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; border-radius:inherit; }
.pc-gift .gift-visual>.bg { position:absolute; inset:0; }
.pc-gift .gift-pattern { z-index:0; border-radius:inherit; }
.pc-art { position:relative; z-index:1; width:78%; height:78%; display:grid; place-items:center; filter:none; }
.pc-gift[data-gift-style="android"] .pc-art { width:74%; height:74%; }
.pc-gift[data-gift-style="ios"] .pc-art { width:75.8621%; height:75.8621%; }
.pc-art > img, .pc-art > canvas { width:100% !important; height:100% !important; object-fit:contain; filter:none; }
.pc-gift small { position:absolute; z-index:2; left:5px; bottom:5px; max-width:calc(100% - 10px); padding:2px 4px; border-radius:5px; background:#0005; color:#fff; font-size:10px; font-weight:700; line-height:1.2; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-shadow:none; font-variant-numeric:tabular-nums; }
.pc-gift small:empty { display:none; }
.pc-actions { margin-top:11px; }
.pc-actions button.pop { animation:pc-pop .35s cubic-bezier(.2,.9,.25,1.6); }
@keyframes pc-pop { 40% { transform:scale(1.18); } }
.pc-open { padding:0 12px; color:#ffab82 !important; font-size:11px !important; font-weight:900; }
.public-banner button { margin-left:10px; min-height:28px; padding:0 10px; border-radius:9px; background:#b7ff4a; color:#142000; font-size:11px; font-weight:900; }
@media (prefers-reduced-motion: reduce) { .pc, .pc-actions button.pop { animation:none; } }
/* v425: «Оценка / Флор» снова слева от сортировки: оценка — по сделкам и
   складывается в сумму портфеля, флор — самый дешёвый такой же лот. */
.portfolio-controls { justify-content:space-between; }
.price-modes { display:flex; gap:4px; padding:3px; border-radius:12px; background:#141416; }
.price-modes button { min-height:34px; padding:0 13px; border-radius:9px; color:#9a9aa1; font-size:12px; font-weight:800; }
.price-modes button[aria-pressed="true"] { background:#2c2d33; color:#fff; box-shadow:inset 0 0 0 1px #ffffff14; }

/* ------------------------------------------------ арена: вызовы, история, итог */
.larp-inbox { display:grid; gap:8px; margin:12px 0 0; }
.larp-call { display:grid; grid-template-columns:36px minmax(0,1fr) auto auto; gap:9px; align-items:center; padding:11px 12px;
  border:1px solid #b7ff4a40; border-radius:16px; background:linear-gradient(135deg,#26301b,#1a1b17 70%); animation:pc-in .4s ease both; }
.larp-call.focus { box-shadow:0 0 0 2px #b7ff4a, 0 10px 26px #b7ff4a22; }
.larp-call.waiting { border-color:#ffffff12; background:#1c1c1e; grid-template-columns:36px minmax(0,1fr); }
.larp-call-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; background:#ffffff0d; font-size:18px; }
.larp-call-text b, .larp-call-text small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.larp-call-text b { font-size:13.5px; }
.larp-call-text small { margin-top:2px; color:#a3aa98; font-size:10.5px; }
.larp-accept { min-height:36px; padding:0 14px; border-radius:11px; background:#b7ff4a; color:#142000; font-size:12px; font-weight:900; }
.larp-decline { width:36px; height:36px; border-radius:11px; background:#ffffff0d; color:#b9b9bf; font-size:14px; }
.larp-accept:disabled, .larp-decline:disabled { opacity:.5; }
.larp-history { display:grid; gap:6px; margin-bottom:18px; }
.larp-past { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 11px; border-radius:13px; background:#1b1b1d; border:1px solid #ffffff0b; }
.larp-past em { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; font-style:normal; font-weight:950; font-size:12px; }
.larp-past.won em { background:#2fc27a22; color:#4fd18d; }
.larp-past.lost em { background:#ef5a6722; color:#ff7584; }
.larp-past b, .larp-past small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.larp-past b { font-size:12.5px; }
.larp-past small { margin-top:2px; color:#85858c; font-size:10px; }
.larp-past strong { font-size:12px; font-variant-numeric:tabular-nums; color:#d9d9de; }
.larp-result.boom { animation:larp-boom .7s cubic-bezier(.2,.9,.25,1.3); box-shadow:0 0 0 1px #b7ff4a66, 0 18px 40px #b7ff4a22; }
.larp-result.bust { animation:larp-bust .5s ease; box-shadow:0 0 0 1px #ef5a6755; }
@keyframes larp-boom { 0% { transform:scale(.94); opacity:0; } 60% { transform:scale(1.02); opacity:1; } 100% { transform:none; } }
@keyframes larp-bust { 20% { transform:translateX(-6px); } 40% { transform:translateX(6px); } 60% { transform:translateX(-3px); } 80% { transform:translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .larp-result.boom, .larp-result.bust, .larp-call { animation:none; } }
.larp-call-text small { white-space:normal; line-height:1.35; }
/* The light palette reuses the same layout and gift artwork; only interface
   surfaces and text change, so collection colors remain true to Telegram. */
html[data-theme="light"] {
  background:#eaf2fa;
  color-scheme:light;
  --ground:#eaf2fa;
  --ink:#1d2b3a;
  --ink-dim:#5b6c7e;
  --ink-faint:#7b8b9b;
  --surface:#f3f8fd;
  --deep:#dce9f5;
  --hairline:#cbdbea;
  --grid:#bacddd;
  --up:#347eb5;
  --up-bg:#e0eef9;
  --bar:#4b91d1;
  --avg:#4d79c7;
  --floor:#c25e91;
  --hex:#bfd2e4;
}
html[data-theme="light"] body { background:var(--ground); color:var(--ink); color-scheme:light; }
html[data-theme="light"] .phone::before {
  background:url("portfolio-pattern.webp") top center / 112% auto no-repeat !important;
  opacity:.16 !important;
  filter:brightness(0) saturate(100%) invert(50%) sepia(31%) saturate(1008%) hue-rotate(166deg) brightness(94%) contrast(88%);
}
html[data-theme="light"] .tabbar { background:rgba(241,248,255,.94); box-shadow:inset 0 1px 0 #f3f8fd, inset 0 0 0 1px #cfdeec, 0 8px 24px #304b6520; }
html[data-theme="light"] .tabbar button::before { background:#dce9f5; box-shadow:inset 0 1px 0 #f3f8fd; }
html[data-theme="light"] .bar .pill { background:#dce9f5; }
html[data-theme="light"] .bar .side.right .pill { background:transparent; }
html[data-theme="light"] .wordmark { background:#4b91d1; color:#fff; }
html[data-theme="light"] .menu,
html[data-theme="light"] .card,
html[data-theme="light"] .facts,
html[data-theme="light"] .alert-editor,
html[data-theme="light"] .wishlist-stat,
html[data-theme="light"] .badge-card,
html[data-theme="light"] .profile-reactions,
html[data-theme="light"] .plot,
html[data-theme="light"] .sale,
html[data-theme="light"] .market-card,
html[data-theme="light"] .value-history,
html[data-theme="light"] .gift-market { background-color:var(--surface); }
html[data-theme="light"] .menu { box-shadow:0 16px 36px #304b6524; }
html[data-theme="light"] .menu button:hover { background:#e5eff8; }
html[data-theme="light"] .language-picker,
html[data-theme="light"] .theme-picker { border-color:#cfdeec; }
html[data-theme="light"] .language-toggle,
html[data-theme="light"] .theme-picker > button,
html[data-theme="light"] .ach-filters,
html[data-theme="light"] .price-modes { background:#dce9f5; }
html[data-theme="light"] .menu .language-toggle button[aria-pressed="true"],
html[data-theme="light"] .ach-filters button[aria-pressed="true"] { color:#1d2b3a; background:#f3f8fd; box-shadow:0 2px 8px #20242c18; }
html[data-theme="light"] .kind,
html[data-theme="light"] .totals,
html[data-theme="light"] .gift-action,
html[data-theme="light"] .wishlist-row,
html[data-theme="light"] .wishlist-empty,
html[data-theme="light"] .compare-pick,
html[data-theme="light"] .compare-result,
html[data-theme="light"] .pc,
html[data-theme="light"] .reaction-howto li { background:#f4f8fc; color:var(--ink); }
html[data-theme="light"] .kind:hover,
html[data-theme="light"] .badge-card:hover,
html[data-theme="light"] .gift-action:hover { background:#e8f0f8; }
html[data-theme="light"] .totals,
html[data-theme="light"] .kind,
html[data-theme="light"] .plot,
html[data-theme="light"] .sale,
html[data-theme="light"] .wishlist-row,
html[data-theme="light"] .compare-pick,
html[data-theme="light"] .badge-card,
html[data-theme="light"] .gift-market,
html[data-theme="light"] .pc { border-color:#cfdeec; }
html[data-theme="light"] .gift-action.on { color:#1d582e; background:#eaf6ed; }
html[data-theme="light"] .gift-action.compare,
html[data-theme="light"] .wishlist-hero,
html[data-theme="light"] .compare-hero,
html[data-theme="light"] .ach-hero,
html[data-theme="light"] .pc { background-color:#f3f8fd; }
html[data-theme="light"] .wishlist-hero,
html[data-theme="light"] .compare-hero,
html[data-theme="light"] .ach-hero,
html[data-theme="light"] .compare-result { box-shadow:0 8px 22px #20242c0c; }
html[data-theme="light"] .wishlist-filters button,
html[data-theme="light"] .wishlist-sort,
html[data-theme="light"] .compare-search input,
html[data-theme="light"] .compare-price input,
html[data-theme="light"] .alert-fields input,
html[data-theme="light"] .sort-control select,
html[data-theme="light"] .catalogue-search .search,
html[data-theme="light"] .search,
html[data-theme="light"] .hype-search { background:#e8f0f8; color:var(--ink); border-color:#cfdeec; color-scheme:light; }
html[data-theme="light"] input::placeholder { color:#718397; }
html[data-theme="light"] .wishlist-row .thumb,
html[data-theme="light"] .compare-art,
html[data-theme="light"] .compare-results,
html[data-theme="light"] .compare-result-option .mini-art,
html[data-theme="light"] .nc-readout,
html[data-theme="light"] .nc-empty,
html[data-theme="light"] .gm-stats div { background:#e8f0f8; }
html[data-theme="light"] .compare-result-option:hover,
html[data-theme="light"] .compare-result-option:focus-visible { background:#e1edf7; }
html[data-theme="light"] .compare-vs { border-color:var(--ground); }
html[data-theme="light"] .portfolio-candles { background:linear-gradient(180deg,#e8f0f8,#f5f9fd); }
html[data-theme="light"] .portfolio-candles .grid,
html[data-theme="light"] .nc-grid { stroke:#1d2b3a16; }
html[data-theme="light"] .portfolio-candles .last-price { stroke:#1d2b3a38; }
html[data-theme="light"] .nc-tag { fill:#f3f8fd; }
html[data-theme="light"] .nc-cross { stroke:#536b83aa; }
html[data-theme="light"] .nc-cross-tag { fill:#30465c; }
html[data-theme="light"] .nc-cross-text { fill:#f3f8fd; }
html[data-theme="light"] .nc-skeleton { background:#dce9f5; }
html[data-theme="light"] .nc-skeleton::after { background:linear-gradient(90deg,transparent,#ffffffa8,transparent); }
html[data-theme="light"] .gift-market { background:linear-gradient(160deg,#f3f8fd,#edf4fb 72%); }
html[data-theme="light"] .op-dot { box-shadow:0 0 0 3px #f3f8fd; }
html[data-theme="light"] .op-body b,
html[data-theme="light"] .pc-worth b,
html[data-theme="light"] .reaction-howto b { color:var(--ink); }
html[data-theme="light"] .reaction-howto span,
html[data-theme="light"] .reaction-share + small { color:#5b6c7e; }
html[data-theme="light"] .pc-person small,
html[data-theme="light"] .pc-worth small { color:#5b6c7e; }
html[data-theme="light"] .pc-avatar { box-shadow:0 0 0 2px #f3f8fd,0 0 0 4px #5b9ed588; }
html[data-theme="light"] .entry { background:#eaf2fa; color:#1d2b3a; }
html[data-theme="light"] .entry-card { background:#f3f8fd; box-shadow:0 16px 44px #20242c16; }
html[data-theme="light"] .ach-hero p,
html[data-theme="light"] .ach-stats small,
html[data-theme="light"] .ach-showcase-head small,
html[data-theme="light"] .trophy .note,
html[data-theme="light"] .alert-status:not(:empty),
html[data-theme="light"] .wishlist-filters button,
html[data-theme="light"] .gm-scope,
html[data-theme="light"] .nc-note,
html[data-theme="light"] .status,
html[data-theme="light"] .portfolio-age,
html[data-theme="light"] .sale .who small,
html[data-theme="light"] .sale .price small,
html[data-theme="light"] .op-body small,
html[data-theme="light"] #go-count { color:#5b6c7e; }
html[data-theme="light"] .ach-ring > span { background:#f3f8fd; }
html[data-theme="light"] .ach-emoji-pack { background:#f1f5eb; }
html[data-theme="light"] .ach-emoji-pack b { color:#253222; }
html[data-theme="light"] .ach-emoji-pack small { color:#5d6759; }
html[data-theme="light"] .hype-search input { color:var(--ink); }
html[data-theme="light"] .totals .col em { color:#30465c; }
html[data-theme="light"] .reaction-note.nudge { color:#a94d30; }
html[data-theme="light"] .pc-open { color:#a64b25 !important; }
html[data-theme="light"] .pc-rank { color:#555a62; }
html[data-theme="light"] .menu:not([hidden]) { animation:menu-in .14s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion:reduce) {
  .menu:not([hidden]) { animation:none; }
  .nc-skeleton::after { animation:none; }
}

/* Cool blue accents keep the light theme soft and consistent. */
html[data-theme="light"] .kind,
html[data-theme="light"] .totals,
html[data-theme="light"] .gift-action,
html[data-theme="light"] .wishlist-row,
html[data-theme="light"] .wishlist-empty,
html[data-theme="light"] .compare-pick,
html[data-theme="light"] .compare-result,
html[data-theme="light"] .pc,
html[data-theme="light"] .reaction-howto li { background:#f3f8fd; }
html[data-theme="light"] .kind:hover,
html[data-theme="light"] .badge-card:hover,
html[data-theme="light"] .gift-action:hover,
html[data-theme="light"] .compare-result-option:hover,
html[data-theme="light"] .compare-result-option:focus-visible { background:#e5eff8; }
html[data-theme="light"] .wishlist-filters button[aria-pressed="true"],
html[data-theme="light"] .compare-run,
html[data-theme="light"] .watch-open,
html[data-theme="light"] .public-banner button { background:#4b91d1; color:#fff; }
html[data-theme="light"] .gift-action.compare,
html[data-theme="light"] .wishlist-hero,
html[data-theme="light"] .compare-hero,
html[data-theme="light"] .ach-hero { background-color:#edf5fc; }
html[data-theme="light"] .ach-ring { background:conic-gradient(#4b91d1 var(--ach-angle),#dce9f5 0); }
html[data-theme="light"] .ach-ring > span { background:#f3f8fd; }
html[data-theme="light"] .ach-emoji-pack { background:#e2effa; }
html[data-theme="light"] .ach-emoji-pack b { color:#294b6c; }
html[data-theme="light"] .ach-emoji-pack small { color:#5b6c7e; }
html[data-theme="light"] .reaction-share { background:linear-gradient(135deg,#68afe7,#4388c8); color:#fff; }
html[data-theme="light"] .wishlist-hero { border-color:#bdd6ed; }
html[data-theme="light"] .entry-card { background:#f3f8fd; }
html[data-theme="light"] .gift-actions {
  border-color:#c5d9eb;
  background:radial-gradient(circle at 100% 0,#7bb9ed20,transparent 48%),linear-gradient(145deg,#f5f9fd,#e7f0f9 78%);
  box-shadow:0 10px 28px #45678612;
}
html[data-theme="light"] .gift-action,
html[data-theme="light"] .gift-action.compare {
  border:1px solid #d2e1ee;
  color:#1d2b3a;
  background:#f3f8fd;
}
html[data-theme="light"] .gift-action:hover { background:#e5eff8; }
html[data-theme="light"] .gift-action .action-icon { color:#4d79a0; background:#dce9f5; }
html[data-theme="light"] .gift-action.on { color:#1d2b3a; background:#e4f0fb; box-shadow:inset 0 0 0 1px #4b91d155; }
html[data-theme="light"] .gift-action.on .action-icon,
html[data-theme="light"] .gift-action.compare .action-icon { color:#fff; background:#4b91d1; }
html[data-theme="light"] #gift-open { color:#fff; background:linear-gradient(135deg,#68afe7,#4388c8); box-shadow:0 10px 26px #4b91d124; }
html[data-theme="light"] #s-collection .market-stat { border-color:#cfdeec; background:#f3f8fd; }
html[data-theme="light"] #s-collection .market-stat small { color:#718397; }
html[data-theme="light"] #s-collection .market-stat b { color:#1d2b3a; }
html[data-theme="light"] #s-collection .collection-selectors select { border-color:#cbdbea; background:#f3f8fd; color:#1d2b3a; color-scheme:light; }
html[data-theme="light"] #s-collection .collection-selectors option { background:#f3f8fd; color:#1d2b3a; }
html[data-theme="light"] #s-collection .gift-actions.collection-watch-actions { border-color:#c5d9eb; background:radial-gradient(circle at 100% 0,#7bb9ed20,transparent 48%),linear-gradient(145deg,#f5f9fd,#e7f0f9 78%); box-shadow:0 10px 28px #45678612; }
html[data-theme="light"] #s-collection .collection-watch-actions .gift-action { border:1px solid #d2e1ee; color:#1d2b3a; background:#f3f8fd; }
html[data-theme="light"] #s-collection .collection-watch-actions .action-icon { color:#fff; background:#4b91d1; }
html[data-theme="light"] #s-collection .collection-watch-actions .gift-action:hover { background:#e5eff8; }
html[data-theme="light"] #s-collection .periods button[aria-current="true"] { background:#4b91d1; color:#fff; }
html[data-theme="light"] #s-collection .chart-modes { background:#dce9f5; }
html[data-theme="light"] #s-collection .chart-modes button { color:#60768b; }
html[data-theme="light"] #s-collection .chart-modes button[aria-pressed="true"] { background:#4b91d1; color:#fff; }
html[data-theme="light"] #s-collection .chart-toolbar > small { color:#60768b; }
html[data-theme="light"] .price-modes button { color:#60768b; }
html[data-theme="light"] .price-modes button[aria-pressed="true"] { color:#fff; background:#4b91d1; box-shadow:0 2px 8px #4b91d124; }
html[data-theme="light"] .compare-hero {
  border-color:#c5d9eb;
  background:radial-gradient(circle at 84% 18%,#7bb9ed22,transparent 38%),linear-gradient(145deg,#f5f9fd,#e7f0f9 72%);
  box-shadow:0 14px 34px #45678612,inset 0 1px #ffffffb8;
}
html[data-theme="light"] .compare-hero span { color:#4b82b4; }
html[data-theme="light"] .compare-hero h1 { color:#1d2b3a; }
html[data-theme="light"] .compare-hero p { color:#5b6c7e; }
html[data-theme="light"] .hype-hero {
  border-color:#c5d9eb;
  background:radial-gradient(circle at 90% 5%,#7bb9ed20,transparent 45%),linear-gradient(145deg,#f5f9fd,#e7f0f9 72%);
  box-shadow:0 14px 34px #45678612,inset 0 1px #ffffffb8;
}
html[data-theme="light"] .hype-hero::after { border-color:#4b91d112; box-shadow:0 0 0 27px #4b91d10a,0 0 0 57px #4b91d108; }
html[data-theme="light"] .hype-hero h1 { color:#1d2b3a; }
html[data-theme="light"] .hype-hero p { color:#5b6c7e; }
html[data-theme="light"] .hype-how { background:#e2edf7; color:#405c76 !important; }
html[data-theme="light"] .hype-stat { border-color:#cfdeec; }
html[data-theme="light"] .hype-refresh { color:#426b8e; background:#dce9f5; }
html[data-theme="light"] .hype-search:focus-within { border-color:#4b91d1; box-shadow:0 0 0 3px #4b91d11a; }
html[data-theme="light"] .hype-card { border-color:#cfdeec; background:linear-gradient(145deg,#f5f9fd,#e8f1f9); }
html[data-theme="light"] .hype-card.top { border-color:#a9c9e5; background:linear-gradient(145deg,#eaf4fc,#f3f8fd 75%); }
html[data-theme="light"] .hype-rank { color:#60768b; }
html[data-theme="light"] .hype-card.top .hype-rank { color:#3478b2; }
html[data-theme="light"] .hype-avatar { background:linear-gradient(145deg,#d9eafa,#c7def2); color:#315d83; }
html[data-theme="light"] .hype-score { color:#397fb8; }
html[data-theme="light"] .hype-actions button,
html[data-theme="light"] .hype-actions a { border-color:#cfdeec; background:#e6f0f9; color:#35516d; }
html[data-theme="light"] .hype-actions button.selected { border-color:#68a8dc; background:#d5e9f8; color:#245e91; }
html[data-theme="light"] .hype-actions a { color:#3478b2; }
html[data-theme="light"] .hype-empty { border-color:#bdd2e4; color:#5b6c7e; background:#f3f8fd; }
html[data-theme="light"] .hype-empty button { color:#fff; background:#4b91d1; }
html[data-theme="light"] .hype-found-head { color:#405c76; }
html[data-theme="light"] .head .more,
html[data-theme="light"] .tabs .more,
html[data-theme="light"] #s-catalogue .head .more { color:#426b8e; background:#dce9f5; box-shadow:inset 0 0 0 1px #cfdeec; }
html[data-theme="light"] .head .more:hover,
html[data-theme="light"] .tabs .more:hover,
html[data-theme="light"] #s-catalogue .head .more:hover { background:#cfe3f4; }
html[data-theme="light"] .head .more svg path,
html[data-theme="light"] .tabs .more svg path { stroke:#567fa4; }
html[data-theme="light"] .ach-hero {
  border-color:#c5d9eb;
  background:radial-gradient(circle at 84% 13%,#80b9e51e,transparent 34%),radial-gradient(circle at 16% 4%,#83a9ec20,transparent 36%),linear-gradient(145deg,#f5f9fd,#e7f0f9 72%);
  box-shadow:0 14px 34px #45678612,inset 0 1px #ffffffb8;
}
html[data-theme="light"] .ach-hero::after { border-color:#4b91d10b; }
html[data-theme="light"] .ach-kicker { color:#4b82b4; }
html[data-theme="light"] .ach-hero h1 { color:#1d2b3a; }
html[data-theme="light"] .ach-hero p { color:#5b6c7e; }
html[data-theme="light"] .ach-stat { border-color:#cfdeec; background:#edf4fa; }
html[data-theme="light"] .ach-stat b { color:#27425d; }
html[data-theme="light"] .ach-stat small { color:#60768b; }
html[data-theme="light"] .ach-ring { box-shadow:0 0 24px #4b91d11a; }
html[data-theme="light"] .ach-ring > span { background:#f3f8fd; }
html[data-theme="light"] .ach-ring b { color:#1d2b3a; }
html[data-theme="light"] .ach-ring small { color:#718397; }
html[data-theme="light"] .wishlist-hero {
  border-color:#c5d9eb;
  background:radial-gradient(circle at 92% 12%,#7bb9ed22,transparent 40%),linear-gradient(145deg,#f5f9fd,#e7f0f9 72%);
  box-shadow:0 14px 34px #45678612,inset 0 1px #ffffffb8;
}
html[data-theme="light"] .wishlist-hero h1 { color:#1d2b3a; }
html[data-theme="light"] .wishlist-hero p { color:#5b6c7e; }
html[data-theme="light"] .wishlist-hero-mark { color:#fff; background:#4b91d1; }
html[data-theme="light"] .wishlist-pin { border-color:#bdd6ed; background:radial-gradient(circle at 30% 25%,#e5f2fc,#d7e8f7 76%); box-shadow:0 14px 24px #45678620,inset 0 1px 0 #ffffffb8; }
html[data-theme="light"] .wishlist-pin::before { background:radial-gradient(circle at 35% 30%,#c6e7ff,#69afe8 48%,#4388c8); box-shadow:0 3px 5px #45678635; }
html[data-theme="light"] .wishlist-stat { border-color:#cfdeec; }
html[data-theme="light"] .value-history {
  border-color:#c5d9eb;
  background:radial-gradient(circle at 100% 0,#7bb9ed20,transparent 48%),linear-gradient(145deg,#f5f9fd,#e7f0f9 78%);
  box-shadow:0 10px 28px #45678612;
  color:#5b6c7e;
}
html[data-theme="light"] .value-history .chart-modes { background:#dce9f5; }
html[data-theme="light"] .value-history .chart-modes button { color:#60768b; }
html[data-theme="light"] .value-history .chart-modes button[aria-pressed="true"] { background:#4b91d1; color:#fff; }
html[data-theme="light"] .value-history .portfolio-candles text { fill:#60768b; }
html[data-theme="light"] .share-actions .primary { color:#fff; }
html[data-theme="light"] .larp-entry {
  border-color:#bdd6ed;
  color:var(--ink);
  background:radial-gradient(circle at 100% 0,#7bb9ed20,transparent 48%),linear-gradient(145deg,#f5f9fd,#e7f0f9 78%);
  box-shadow:0 10px 28px #45678612;
}
html[data-theme="light"] .larp-entry span { color:#4388c8; }
html[data-theme="light"] .larp-entry small { color:#5b6c7e; }
html[data-theme="light"] .profile-reactions {
  border-color:#c5d9eb;
  background:radial-gradient(circle at 100% 0,#7bb9ed20,transparent 48%),linear-gradient(145deg,#f5f9fd,#e7f0f9 78%);
  box-shadow:0 10px 28px #45678612;
}
html[data-theme="light"] .reaction-heading-icon { color:#fff; background:#4b91d1; }
html[data-theme="light"] .reaction-head small { color:#3e78ac; background:#d9eafa; }
html[data-theme="light"] .reaction-sub { color:#637a90; }
html[data-theme="light"] .reaction-buttons button { border-color:#d2e1ee; background:#edf4fa; }
html[data-theme="light"] .reaction-label { color:#35516d; }
html[data-theme="light"] .reaction-count { color:#1d2b3a; }
html[data-theme="light"] .reaction-buttons button.selected { border-color:#64a5dc; background:#dcecf9; box-shadow:inset 0 0 0 1px #4b91d126; }
html[data-theme="light"] .reaction-buttons button.selected .reaction-label { color:#245e91; }
html[data-theme="light"] .reaction-buttons button:focus-visible { outline-color:#4b91d1; }
html[data-theme="light"] .reaction-howto li::before { color:#28699f; background:#d7eafa; }
.reaction-collapse { width:28px; height:28px; flex:none; display:grid; place-items:center; padding:0; border:1px solid #ffffff18; border-radius:9px; color:#c7d8e6; background:#242b32; }
.reaction-collapse svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease; }
.profile-reactions.collapsed .reaction-collapse svg { transform:rotate(-90deg); }
html[data-theme="light"] .reaction-collapse { border-color:#cbdbea; color:#426b8e; background:#e4eff9; }
.profile-reactions.collapsed .reaction-content { display:none; }
@media (prefers-reduced-motion:reduce) { html[data-theme="light"] .reaction-collapse svg { transition:none; } }

/* v428: светлая тема (PR #1) поверх блоков v420-v427.
   Арена остаётся ночной сценой: её тёмные панели держат свои тёмные токены,
   иначе заголовок и ники темнели вместе со страницей и пропадали. */
html[data-theme="light"] .larp-hero,
html[data-theme="light"] .larp-call,
html[data-theme="light"] .larp-past { --ink:#ffffff; --ink-dim:#a3a4aa; --ink-faint:#6b6c72; color:#fff; }
html[data-theme="light"] .gift-market .market-head strong { color:var(--ink); }
html[data-theme="light"] .gm-stats b { color:var(--ink); }
html[data-theme="light"] .price-modes button[aria-pressed="true"] { background:#ffffff; color:var(--ink); box-shadow:0 1px 4px #1d2b3a1f; }

/* v428: картинка в кружке сделки. Размер задавался только на экране коллекции,
   а в блоке «Сделки» на карточке подарка картинка вставала в натуральную
   величину и вылезала из кружка, обрезанная сбоку. */
.round.gift-animation { overflow:hidden; }
.round img,.round canvas,.round svg { width:100%; height:100%; object-fit:contain; display:block; }

/* ---------------------------------------------------------------------------
   v428: светлая тема начисто. Владелец: тёмных плашек в светлой теме быть не
   должно, акцент нежно-голубой, как у логотипа (#4b91d1); тени мягкие.
   --------------------------------------------------------------------------- */
.gift { container-type:inline-size; }
.gift .tile-price { position:absolute; left:8px; bottom:8px; z-index:3; display:flex; align-items:baseline; gap:4px;
  max-width:calc(100% - 16px); padding:3px 7px; border-radius:7px; white-space:nowrap;
  background:#161616d9; color:#fff; font-size:10px; line-height:1.2; font-variant-numeric:tabular-nums; }
.gift .tile-price small { min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:9px; font-weight:600; opacity:.85; }
.gift .tile-price b { flex:none; font-weight:800; }
.catalogue-price-status { margin:0 0 12px; color:var(--ink-dim); font-size:10px; line-height:1.5; }
.gift[data-price-status="snapshot"] .tile-price,
.gift[data-price-status="stale"] .tile-price { outline:1px solid rgba(255,190,95,.28); }
.gift[data-price-status="snapshot"] .tile-price,
.gift[data-price-status="stale"] .tile-price { flex-direction:column; align-items:flex-start; gap:1px; }
.gift[data-price-status="snapshot"] .tile-price small,
.gift[data-price-status="stale"] .tile-price small { display:block !important; max-width:82px; font-size:8px; line-height:1.2; }
/* Плитка уже 118 px: подпись «Оценка/Флор» лишняя, её и так видно на экране. */
@container (max-width:118px) { .gift .tile-price small { display:none; } }
html[data-theme="light"] {
  --soft-blue:#4b91d1;
  --soft-tint:#e4effa;
  --soft-line:#d5e4f2;
  --lift:0 1px 2px rgba(29,43,58,.05),0 4px 14px rgba(69,103,134,.08);
  --lift-strong:0 2px 4px rgba(29,43,58,.05),0 8px 22px rgba(69,103,134,.11);
}
/* Цена на плитке: была тёмная плашка с тёмным же текстом. */
html[data-theme="light"] .gift .tile-price { background:var(--soft-blue); color:#fff; box-shadow:0 2px 6px rgba(75,145,209,.28); }

/* Тени: одна мягкая голубоватая вместо чёрных ореолов. */
html[data-theme="light"] .gift { border-color:var(--soft-line); box-shadow:var(--lift); }
html[data-theme="light"] .gift:active { box-shadow:0 1px 3px rgba(29,43,58,.08); }
html[data-theme="light"] .gift[data-animation-state="playing"] { border-color:#b9d4ee; }
html[data-theme="light"] .gift .name { text-shadow:none; color:var(--ink); }
html[data-theme="light"] .gift .glyph { filter:drop-shadow(0 4px 8px rgba(29,43,58,.16)); }
html[data-theme="light"] .kind,
html[data-theme="light"] .totals,
html[data-theme="light"] .sale,
html[data-theme="light"] .profile-reactions,
html[data-theme="light"] .value-history,
html[data-theme="light"] .larp-entry,
html[data-theme="light"] .gift-actions,
html[data-theme="light"] .ach-hero,
html[data-theme="light"] .wishlist-hero,
html[data-theme="light"] .hype-hero { box-shadow:var(--lift); }
html[data-theme="light"] .wishlist-pin { box-shadow:var(--lift-strong); }
html[data-theme="light"] #gift-open { box-shadow:0 6px 16px rgba(75,145,209,.22); }

/* Достижения: светлые карточки с оттенком своего значка вместо тёмных. */
html[data-theme="light"] .badge-card {
  background:linear-gradient(165deg,color-mix(in srgb,var(--badge-tint) 14%,#ffffff),#f1f6fc 62%);
  border:1px solid var(--soft-line); box-shadow:var(--lift); color:var(--ink);
}
html[data-theme="light"] .badge-card:hover { background:linear-gradient(165deg,color-mix(in srgb,var(--badge-tint) 20%,#ffffff),#eaf2fb 62%); }
html[data-theme="light"] .badge-card::before { opacity:.22; }
html[data-theme="light"] .badge-card::after { background:linear-gradient(125deg,rgba(255,255,255,.7),transparent 30% 70%,rgba(75,145,209,.05)); }
html[data-theme="light"] .badge-card .badge-hex { filter:drop-shadow(0 4px 6px rgba(29,43,58,.18)); }
html[data-theme="light"] .badge-card .lvl { color:color-mix(in srgb,var(--badge-tint) 72%,#1d2b3a); }
html[data-theme="light"] .badge-card .nm { color:var(--ink); }
html[data-theme="light"] .badge-card.is-locked { filter:saturate(.3); opacity:.78; }
html[data-theme="light"] .badge-progress { background:var(--soft-blue); color:#fff; backdrop-filter:none; }
html[data-theme="light"] .rail .track { background:#dbe8f5; }

/* Кнопки ссылки на портфель: вторая была почти чёрной. */
html[data-theme="light"] .share-actions button { background:var(--soft-tint); color:#2f6fae; box-shadow:inset 0 0 0 1px var(--soft-line); }
html[data-theme="light"] .share-actions .primary { background:linear-gradient(135deg,#68afe7,#4388c8); color:#fff; box-shadow:0 4px 12px rgba(75,145,209,.25); }

/* v428: веер миниатюр в плитках «NFT-подарки / Неулучшенные» собран заново.
   Одиночная картинка стояла с наклоном и выглядела криво, веер был
   несимметричный, а тень #0008 на светлой теме давала грязный ореол. */
.kind .art { display:flex; align-items:flex-end; justify-content:flex-start; gap:0; width:auto; max-width:100%;
  height:44px; margin:2px 0 auto; padding:0 0 0 2px; overflow:visible; }
.kind .art > span { position:relative; flex:0 0 40px; width:40px; height:40px; min-width:0; max-width:none;
  aspect-ratio:auto; margin-left:-12px; transform-origin:50% 100%; transform:none; }
.kind .art > span:first-child { margin-left:0; transform:rotate(-7deg); z-index:1; }
.kind .art > span:nth-child(2) { transform:translateY(-3px); z-index:2; }
.kind .art > span:nth-child(3) { transform:rotate(7deg); z-index:3; }
.kind .art > span:only-child { transform:none; }
.kind .art > span > img,.kind .art > span > canvas { filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
html[data-theme="light"] .kind .art > span > img,
html[data-theme="light"] .kind .art > span > canvas { filter:drop-shadow(0 2px 3px rgba(29,43,58,.14)); }
@media (max-width:360px) { .kind .art > span { flex-basis:34px; width:34px; height:34px; margin-left:-10px; } }

/* v428: раздел «Неулучшенные подарки» в каталоге. */
.plain-shelf { display:grid; gap:10px; }
.plain-note { margin:0; color:var(--ink-dim); font-size:11px; line-height:1.4; }
.plain-sort { margin:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
.plain-sort::-webkit-scrollbar { display:none; }
.plain-sort button { flex:none; white-space:nowrap; }
.gift .meta { position:absolute; top:46px; left:10px; right:8px; z-index:2; overflow:hidden; color:var(--ink-dim);
  font-size:9.5px; font-weight:650; white-space:nowrap; text-overflow:ellipsis; }


/* v437: «Webview crashed» у части людей. На телефонах снимаем то, что
   держит видеопамять: размытие под нижней панелью, тени-фильтры на каждой
   плитке и размытые пятна за карточками. Плитки вне экрана не рисуются. */
html.lite-gpu .tabbar { -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(22,22,26,.96); }
html.lite-gpu[data-theme="light"] .tabbar { background:rgba(243,248,253,.97); }
html.lite-gpu .gift .glyph,
html.lite-gpu[data-theme="light"] .gift .glyph,
html.lite-gpu .kind .art > span > img,
html.lite-gpu .kind .art > span > canvas,
html.lite-gpu .badge-card .badge-hex { filter:none !important; }
html.lite-gpu .badge-card::before { filter:none; opacity:.08; }
html.lite-gpu .badge-progress { backdrop-filter:none; }
.gifts .gift { content-visibility:auto; contain-intrinsic-size:auto 120px; }

/* Плитка без истории цены: снизу плашка, как в портфеле. */
.gift.no-chg .meta { top:30px; }

/* Collection detail: artwork → real trade chart → live venues → models. */
#s-collection .collection-hero { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:205px; padding:18px 8px 8px; text-align:center; }
#s-collection .collection-hero-art { display:grid; place-items:center; width:154px; height:154px; margin:0 auto 3px; font-size:82px; }
#s-collection .collection-hero-art > img,
#s-collection .collection-hero-art > canvas,
#s-collection .collection-hero-art > svg { width:100%; height:100%; object-fit:contain; }
#s-collection .collection-hero h1 { margin:0; color:var(--ink); font-size:20px; font-weight:800; line-height:1.22; letter-spacing:-.035em; }
#s-collection .collection-hero p { margin:4px 0 0; color:var(--ink-dim); font-size:11px; }
#s-collection #collection-freshness { margin:0 0 8px; padding:0; text-align:center; font-size:10px; }
#s-collection #collection-status:empty { display:none; }
#s-collection .collection-chart { margin:10px 0 0; padding:16px 13px 12px; border:1px solid #ffffff0a; border-radius:22px; background:#151a25; }
#s-collection .collection-chart-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#s-collection .collection-chart-heading small { display:block; color:#939dab; font-size:10px; font-weight:700; }
#s-collection .collection-chart-heading strong { display:block; margin-top:2px; color:#f5f7fb; font-size:24px; line-height:1.15; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
#s-collection .collection-chart-floor { margin-top:2px; color:#8e98a7; font-size:10px; }
#s-collection .collection-chart-floor b { color:#c6d0dc; font-variant-numeric:tabular-nums; }
#s-collection .collection-chart .plot-modes { flex:none; width:auto; margin:0; background:#0d121b; }
#s-collection .collection-chart .plot-modes button { min-width:48px; padding:8px 9px; }
#s-collection .collection-chart .plot-modes button[aria-pressed="true"] { background:#2d384a; }
#s-collection .collection-chart .nc-host { margin-top:10px; }
#s-collection .nc-single { display:flex; flex-direction:column; justify-content:center; gap:7px; min-height:172px; padding:20px; border-radius:16px; background:#0d121b; color:#f5f7fb; }
#s-collection .nc-single strong { color:#a8b2c1; font-size:12px; font-weight:700; }
#s-collection .nc-single b { font-size:34px; line-height:1.1; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
#s-collection .nc-single span { color:#d0d7e1; font-size:12px; }
#s-collection .nc-single small { margin-top:5px; color:#8e98a7; font-size:11px; line-height:1.4; }
#s-collection .collection-chart .nc-readout { background:#0d121b; }
#s-collection .collection-chart .periods { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:3px; margin:9px 0 0; padding:3px; border-radius:12px; background:#0d121b; }
#s-collection .collection-chart .periods button { margin:0; padding:9px 2px; border-radius:9px; background:transparent; color:#8792a3; font-size:10px; white-space:nowrap; }
#s-collection .collection-chart .periods button[aria-current="true"] { background:#202b3d; color:#f4f8ff; }
#s-collection .collection-venues { margin-top:14px; padding:14px 14px 4px; border:1px solid #ffffff0a; border-radius:22px; background:#151a25; }
#s-collection .collection-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; }
#s-collection .collection-section-head h2 { margin:0; font-size:16px; font-weight:800; letter-spacing:-.03em; }
#s-collection .collection-section-head small { color:#8993a2; font-size:10px; text-align:right; }
#s-collection .collection-venue { display:flex; align-items:center; gap:9px; min-height:45px; padding:6px 0; border-top:1px solid #ffffff10; }
#s-collection .collection-venue:first-child { border-top:0; }
#s-collection .collection-venue-icon { flex:none; display:grid; place-items:center; width:27px; height:27px; }
#s-collection .collection-venue-icon img { width:27px; height:27px; border-radius:9px; object-fit:contain; }
#s-collection .collection-venue-fallback { display:grid; place-items:center; width:27px; height:27px; border-radius:9px; background:#293950; color:#fff; font-weight:800; }
#s-collection .collection-venue-name { display:block; flex:1; min-width:0; }
#s-collection .collection-venue-name b,#s-collection .collection-venue-name small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#s-collection .collection-venue-name b { font-size:12px; }
#s-collection .collection-venue-name small,#s-collection .collection-venue-count { color:#7f8a9b; font-size:10px; }
#s-collection .collection-venue strong { margin-left:auto; font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; }
#s-collection .collection-models { margin-top:18px; }
#s-collection .collection-model-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
#s-collection .collection-model { min-width:0; padding:8px 5px 9px; border:1px solid #ffffff0c; border-radius:15px; background:#191d24; color:var(--ink); text-align:center; }
#s-collection .collection-model[aria-pressed="true"] { border-color:#b5df70; background:#b5df7015; }
#s-collection .collection-model-art { display:grid; place-items:center; width:100%; aspect-ratio:1; font-size:36px; }
#s-collection .collection-model-art > img,
#s-collection .collection-model-art > canvas,
#s-collection .collection-model-art > svg { width:100%; height:100%; object-fit:contain; }
#s-collection .collection-model b { display:block; overflow:hidden; font-size:10px; white-space:nowrap; text-overflow:ellipsis; }
#s-collection .collection-empty { margin:0; padding:12px 2px; color:#8993a2; font-size:11px; }
#s-collection .chips { display:none; }
#s-collection .market-stats { margin-top:15px; }
#s-collection .market-stat { background:#191d24; }
html[data-theme="light"] #s-collection .collection-chart,
html[data-theme="light"] #s-collection .collection-venues { border-color:#d5e1ec; background:#edf3f9; }
html[data-theme="light"] #s-collection .collection-chart-heading strong { color:#1d2b3a; }
html[data-theme="light"] #s-collection .nc-single { background:#dce8f4; color:#1d2b3a; }
html[data-theme="light"] #s-collection .nc-single strong,
html[data-theme="light"] #s-collection .nc-single small { color:#60768b; }
html[data-theme="light"] #s-collection .nc-single span { color:#31475b; }
html[data-theme="light"] #s-collection .collection-chart-heading small,
html[data-theme="light"] #s-collection .collection-chart-floor,
html[data-theme="light"] #s-collection .collection-venue-name small,
html[data-theme="light"] #s-collection .collection-venue-count { color:#687d91; }
html[data-theme="light"] #s-collection .collection-chart-floor b { color:#31475b; }
html[data-theme="light"] #s-collection .collection-chart .periods,
html[data-theme="light"] #s-collection .collection-chart .plot-modes { background:#dce8f4; }
html[data-theme="light"] #s-collection .collection-chart .periods button[aria-current="true"],
html[data-theme="light"] #s-collection .collection-chart .plot-modes button[aria-pressed="true"] { background:#4b91d1; color:#fff; }
html[data-theme="light"] #s-collection .collection-venue { border-color:#d3dfeb; }
html[data-theme="light"] #s-collection .collection-model { border-color:#d5e1ec; background:#f3f8fd; }
html[data-theme="light"] #s-collection .collection-model[aria-pressed="true"] { border-color:#4b91d1; background:#e5f1fb; }
@media(max-width:360px) { #s-collection .collection-model-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } #s-collection .collection-venue-count { display:none; } }
/* Verified profile attributes are separate from gift prices. */
.profile-badges{color:#a6bf8b;font-size:12px;margin-top:8px}
#profile-assets{--asset-bg:#1b1b1b;--asset-border:#3c3c3f;--asset-ink:#fff;--asset-dim:#c2c5cc;--asset-chip:#252529;margin:16px 0;padding:0;background:var(--asset-bg);color:var(--asset-ink);border:1px solid var(--asset-border);border-radius:20px;overflow:hidden}
.profile-assets summary{display:flex;align-items:center;gap:12px;min-height:70px;padding:13px 14px;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.profile-assets summary::-webkit-details-marker{display:none}
.profile-assets summary::marker{content:""}
.profile-assets summary:focus-visible{outline:2px solid var(--asset-ink);outline-offset:-4px;border-radius:18px}
.profile-assets-heading{flex:1;min-width:0}
#profile-assets .profile-assets-heading strong{display:block;color:var(--asset-ink);text-align:left;font-size:15px;line-height:1.4;font-weight:750;overflow-wrap:anywhere}
#profile-assets-summary{display:block;margin-top:3px;color:var(--asset-dim);font-size:12px;line-height:1.4}
.profile-assets-chevron{width:19px;height:19px;flex-shrink:0;color:var(--asset-dim);transition:transform .12s ease}
.profile-assets[open] .profile-assets-chevron{transform:rotate(180deg)}
#profile-assets-rows{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 12px}
.profile-asset-chip{display:inline-block;max-width:100%;padding:7px 10px;background:var(--asset-chip);border:1px solid var(--asset-border);border-radius:11px;color:var(--asset-ink);font-size:13px;line-height:1.4;text-decoration:none;overflow-wrap:anywhere}
a.profile-asset-chip:focus-visible{outline:2px solid var(--asset-ink);outline-offset:2px}
#profile-assets p{padding:0 14px 14px;margin:0;color:var(--asset-dim);font-size:11px;line-height:1.5}
html[data-theme="light"] #profile-assets{--asset-bg:#f4f9fd;--asset-border:#cfdeeb;--asset-ink:#20394c;--asset-dim:#546979;--asset-chip:#e7f0f7}
html[data-theme="pink"] #profile-assets{--asset-bg:#fff0f5;--asset-border:#e4b9cc;--asset-ink:#71334b;--asset-dim:#795668;--asset-chip:#f9dde8}
@media (prefers-reduced-motion:reduce){.profile-assets-chevron{transition:none}}
/* Static placeholder while a real, full-quality gift poster is pending. */
.gift-animation:empty[data-animation-state]::after{content:"";display:block;width:70%;height:70%;margin:15%;border-radius:28%;background:linear-gradient(135deg,#88888808,#88888820 50%,#88888808);}
.gift-animation:empty[data-animation-state=error]::after{background:#8888880c;border:1px dashed var(--hairline,#88888826);}