/* Guarant. Палитра StaticUP, язык TIER: шапка с аватаром, кнопки действий, вкладки,
   карточки подарков, inset-списки, шторка, таблица атрибутов. */
:root {
  --page: #1c1c1e;
  --cell: #2c2c2e;
  --well: #3a3a3c;
  --edge: #48484a;
  --text: #fafafa;
  --hint: #8e8e93;
  --sep: rgba(255, 255, 255, .1);
  --press: rgba(255, 255, 255, .06);
  --accent: #ff453a;
  --on-accent: #fff;
  --ok: #30d158;
  --warn: #ff9f0a;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --tap: cubic-bezier(.22, 1, .36, 1);
  --safe-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--page); overscroll-behavior: none; }
* { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
body {
  color: var(--text);
  font: 400 17px/22px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Roboto", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none; user-select: none;
}
input { -webkit-user-select: text; user-select: text; font: inherit; color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }
.i { display: inline-grid; place-items: center; flex: none; }
.i svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.page { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }
.scroller { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.screen { padding-bottom: calc(var(--safe-bottom) + 40px); }

/* ---------- шапка ---------- */
.phead { position: relative; display: flex; flex-direction: column; align-items: center; padding: max(44px, calc(var(--safe-top) + 12px)) 0 4px; }
.phead-bg {
  position: absolute; top: 0; right: 0; bottom: -64px; left: 0; pointer-events: none;
  background:
    radial-gradient(circle at 50% 96px, rgba(255, 69, 58, .30), rgba(255, 69, 58, 0) 170px),
    linear-gradient(#2a1513, var(--page) 78%);
}
.phead .avatar { position: relative; width: 92px; height: 92px; border-radius: 50%; overflow: hidden; box-shadow: 0 8px 28px rgba(0, 0, 0, .35); background: var(--cell); }
.avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.phead-title { position: relative; display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 22px; line-height: 28px; font-weight: 600; }
.verified { width: 20px; height: 20px; }
.verified svg { stroke: none; }
.phead-sub { position: relative; margin-top: 2px; font-size: 15px; line-height: 20px; color: var(--hint); }

.actions { position: relative; align-self: stretch; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; padding: 0 16px; }
.action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  height: 64px; min-width: 0; border-radius: 16px; background: rgba(255, 255, 255, .08);
  font-size: 12px; line-height: 15px; font-weight: 500; text-align: center;
  transition: transform .2s var(--tap), background-color .15s;
}
.action .i { width: 24px; height: 24px; color: var(--accent); }
.action:active { transform: scale(.96); background: rgba(255, 255, 255, .13); }

/* ---------- вкладки ---------- */
.tabs { position: relative; display: flex; margin-top: 18px; padding: 0 8px; box-shadow: inset 0 -.5px 0 var(--sep); }
.tab { position: relative; padding: 10px 14px 11px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--hint); transition: color .2s; }
.tab b { font-weight: 600; opacity: .55; margin-left: 4px; font-variant-numeric: tabular-nums; }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }

/* ---------- арт подарка: статичная карточка, поверх неё живая модель на подложке ---------- */
.art { position: relative; overflow: hidden; background: var(--well); }
.art--sq { width: 100%; height: 0; padding-top: 100%; }
.art > .art-static, .art > .art-bg, .art > .art-anim, .art > .art-letter { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.art-letter { display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: rgba(255, 255, 255, .5); }
.art-static { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.art-static.is-ready { opacity: 1; }
.art-bg { background-position: center; background-size: cover; opacity: 0; transition: opacity .3s; }
.art > .art-anim { top: 8%; right: 8%; bottom: 8%; left: 8%; opacity: 0; transition: opacity .3s; }
.art-anim svg { display: block; }
.art.is-live .art-bg, .art.is-live .art-anim { opacity: 1; }
.art.is-live .art-static { opacity: 0; }

/* ---------- лента: карточки в две колонки ---------- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px; }
.card { position: relative; display: block; min-width: 0; padding: 6px 6px 10px; border-radius: 24px; background: var(--cell); text-align: left; transition: transform .2s var(--tap); }
.card:active { transform: scale(.97); }
.card .art { border-radius: 19px; }
.card-title { margin: 10px 6px 0; font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-want { display: flex; align-items: center; gap: 4px; margin: 3px 6px 0; min-height: 18px; font-size: 13px; line-height: 18px; color: var(--hint); white-space: nowrap; overflow: hidden; }
.card-want span { overflow: hidden; text-overflow: ellipsis; }
.mini { flex: none; width: 18px; height: 18px; object-fit: contain; }
.card-mine { position: absolute; z-index: 2; top: 14px; left: 14px; height: 22px; padding: 0 8px; border-radius: 11px; display: flex; align-items: center; font-size: 11px; font-weight: 600; color: #fff; background: var(--accent); }
.card-num { position: absolute; z-index: 2; top: 14px; right: 14px; height: 22px; padding: 0 8px; border-radius: 11px; display: flex; align-items: center; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .38); font-variant-numeric: tabular-nums; }
.card.sk .art { animation: shimmer 1.4s linear infinite; background: linear-gradient(100deg, var(--well) 30%, #444446 50%, var(--well) 70%) 0 0 / 300% 100%; }
.card.sk .card-title { height: 16px; width: 70%; border-radius: 8px; background: var(--well); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* ---------- сетка своих подарков ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 16px; }
.tile { position: relative; display: block; min-width: 0; border-radius: 20px; overflow: hidden; transition: transform .2s var(--tap); }
.tile:active { transform: scale(.96); }
.tile-num { position: absolute; z-index: 2; left: 50%; bottom: 8px; transform: translateX(-50%); height: 22px; padding: 0 8px; border-radius: 11px; display: flex; align-items: center; font-size: 11px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .42); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile.sk .art { animation: shimmer 1.4s linear infinite; background: linear-gradient(100deg, var(--cell) 30%, #343437 50%, var(--cell) 70%) 0 0 / 300% 100%; }

/* ---------- списки ---------- */
.list-label { margin: 22px 32px 7px; font-size: 13px; line-height: 16px; color: var(--hint); text-transform: uppercase; }
.list { position: relative; margin: 0 16px; border-radius: 26px; background: var(--cell); overflow: hidden; }
.list-note { margin: 8px 32px 0; font-size: 13px; line-height: 18px; color: var(--hint); }
.cell { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 16px; text-align: left; transition: background-color .12s; }
.cell + .cell::before { content: ""; position: absolute; top: 0; right: 0; left: 58px; height: .5px; background: var(--sep); }
.cell--deal { min-height: 68px; }
.cell--deal + .cell--deal::before { left: 76px; }
button.cell:active { background: var(--press); }
.cell-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--text); font-size: 13px; font-weight: 600; overflow: hidden; }
.cell-ico .i { width: 17px; height: 17px; }
.cell-ico.is-done { background: var(--ok); color: #062a12; }
.cell-ico.is-now { background: var(--accent); color: #fff; }
.cell-ico img { width: 100%; height: 100%; display: block; }
.cell-body { flex: 1; min-width: 0; }
.cell-title { font-size: 17px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-sub { font-size: 14px; line-height: 19px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell input { flex: 1; min-width: 0; height: 32px; border: 0; outline: 0; background: none; font-size: 17px; }
.cell input::placeholder { color: var(--hint); }
.chev { width: 8px; height: 14px; color: var(--hint); opacity: .6; }
.chev svg { stroke-width: 2.2; }
.st--ok { color: var(--ok); }
.st--warn { color: var(--warn); }
.st--ink { color: var(--accent); }

/* две миниатюры сделки внахлёст */
.pair { position: relative; flex: none; width: 48px; height: 48px; }
.pair .thumb { position: absolute; width: 36px; height: 36px; border-radius: 11px; overflow: hidden; box-shadow: 0 0 0 2px var(--cell); }
.pair .thumb:first-child { left: 0; top: 0; }
.pair .thumb:last-child { right: 0; bottom: 0; }
.pair--one .thumb { width: 48px; height: 48px; border-radius: 14px; }
.thumb .art { width: 100%; height: 100%; }
.thumb-empty { background: var(--well); display: flex; align-items: center; justify-content: center; color: var(--hint); }
.thumb-empty .i { width: 16px; height: 16px; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 44px 32px 8px; text-align: center; }
.empty-title { font-size: 17px; line-height: 22px; font-weight: 600; }
.empty-text { font-size: 15px; line-height: 20px; color: var(--hint); }

/* ---------- кнопки ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 17px; font-weight: 600; transition: opacity .15s, transform .2s var(--tap); }
.btn:active { transform: scale(.98); opacity: .88; }
.btn[disabled] { opacity: .45; }
.btn--ghost { background: rgba(255, 255, 255, .1); color: var(--text); }
.btn--text { background: none; color: var(--accent); height: 44px; font-weight: 500; }
.btn--small { width: auto; height: 36px; margin-top: 16px; padding: 0 18px; font-size: 15px; }
.btn .i { width: 20px; height: 20px; }

/* ---------- шторка ---------- */
.sheet-layer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; }
.sheet-scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .3s ease; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: calc(100% - var(--safe-top) - 40px);
  display: flex; flex-direction: column;
  border-radius: 32px 32px 0 0; background: var(--page); overflow: hidden;
  transform: translateY(102%); transition: transform .45s var(--ease); will-change: transform;
}
.sheet-layer.is-open .sheet-scrim { opacity: 1; }
.sheet-layer.is-open .sheet { transform: none; }
.sheet.is-drag { transition: none; }
.sheet-grabber { position: absolute; z-index: 5; top: 7px; left: 50%; margin-left: -18px; width: 36px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .45); pointer-events: none; }
.sheet-btn { position: absolute; z-index: 5; top: 14px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, .28); }
.sheet-btn .i { width: 16px; height: 16px; }
.sheet-btn:active { opacity: .7; }
.sheet-close { right: 12px; }
.sheet-back { left: 12px; }
.sheet-body { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; }
.sheet-foot { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px calc(var(--safe-bottom) + 12px); background: var(--page); box-shadow: 0 -.5px 0 var(--sep); }
.sheet-foot:empty { display: none; }
.sheet-head { padding: 30px 16px 4px; text-align: center; }
.sheet-title { font-size: 22px; line-height: 28px; font-weight: 700; }
.sheet-sub { margin-top: 4px; font-size: 15px; line-height: 20px; color: var(--hint); }

/* ---------- сцена ---------- */
.stage { position: relative; display: flex; height: 280px; background: var(--cell); overflow: hidden; touch-action: none; }
.stage--solo { height: 320px; }
.stage-side { position: relative; flex: 1; min-width: 0; height: 100%; }
.stage-side .art { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.stage-side .art > .art-anim { top: 14%; right: 6%; bottom: 14%; left: 6%; }
.stage--solo .stage-side .art > .art-anim { top: 10%; right: 16%; bottom: 10%; left: 16%; }
.stage-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--hint); font-size: 14px; line-height: 18px; text-align: center; padding: 0 16px; }
.stage-wait .i { width: 32px; height: 32px; padding: 6px; border-radius: 50%; border: 1.5px dashed var(--edge); }
.stage-swap {
  position: absolute; z-index: 3; left: 50%; top: 50%; margin: -22px 0 0 -22px;
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--page); color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 0, 0, .18), 0 6px 18px rgba(0, 0, 0, .35);
}
.stage-swap .i { width: 22px; height: 22px; }
.stage-cap { position: absolute; z-index: 3; left: 0; right: 0; bottom: 12px; text-align: center; font-size: 12px; line-height: 16px; font-weight: 600; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }

.ghead { display: flex; flex-direction: column; align-items: center; padding: 16px 16px 4px; text-align: center; }
.ghead-title { font-size: 20px; line-height: 25px; font-weight: 600; }
.ghead-sub { margin-top: 2px; font-size: 15px; line-height: 20px; color: var(--hint); }

/* ---------- выбор коллекций ---------- */
.colls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 16px; }
.coll { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 10px 4px 9px; border-radius: 18px; background: var(--cell); transition: transform .2s var(--tap), box-shadow .2s; }
.coll:active { transform: scale(.95); }
.coll img, .coll .coll-any { width: 46px; height: 46px; object-fit: contain; }
.coll .coll-any { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--accent); }
.coll .coll-any .i { width: 24px; height: 24px; }
.coll-name { max-width: 100%; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coll.is-on { box-shadow: inset 0 0 0 2px var(--accent); background: rgba(255, 69, 58, .12); }
.coll.is-on .coll-name { color: var(--text); }
.coll-check { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; display: none; align-items: center; justify-content: center; }
.coll-check .i { width: 12px; height: 12px; }
.coll-check .i svg { stroke-width: 3; }
.coll.is-on .coll-check { display: flex; }

/* что хочет взамен в карточке сделки */
.wants { margin: 12px 16px 0; padding: 12px 14px; border-radius: 18px; background: var(--cell); }
.wants-k { font-size: 13px; line-height: 16px; color: var(--hint); }
.wants-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.want-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 5px; border-radius: 15px; background: rgba(255, 255, 255, .08); font-size: 14px; font-weight: 500; }
.want-chip img { width: 22px; height: 22px; object-fit: contain; }
.wants-text { margin-top: 8px; font-size: 15px; line-height: 20px; }

/* ---------- таблица атрибутов ---------- */
.table { margin: 0 16px; border: .5px solid var(--sep); border-radius: 20px; overflow: hidden; font-size: 15px; line-height: 20px; }
.tr { display: flex; min-height: 40px; }
.tr + .tr { border-top: .5px solid var(--sep); }
.td-key { flex: none; width: 34%; padding: 10px 14px; color: var(--hint); background: rgba(255, 255, 255, .04); border-right: .5px solid var(--sep); }
.td-val { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip { flex: none; padding: 1px 7px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--accent); background: rgba(255, 69, 58, .15); }

/* ---------- тост ---------- */
.toast {
  position: fixed; z-index: 200; left: 16px; right: 16px; top: calc(var(--safe-top) + 12px);
  padding: 12px 16px; border-radius: 16px; background: var(--well); color: var(--text);
  font-size: 15px; line-height: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  animation: toast .35s var(--ease) both;
}
.toast--err { color: #ffb3ad; }
@keyframes toast { from { opacity: 0; transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}