/* ═══════════════════════════════════════════════════════════════════
   Uchqun — anor va latun.

   Температура от граната: база вишнёво-бордовая, ни одного серого
   оттенка. Дисциплина от ташкентского метро: латунный профиль
   держит стыки зон, свет падает сверху одним источником.
   Форма зерна — скругление с одной острой вершиной — проходит
   через знак, кнопки и метки.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --deep:    #17090E;
  --base:    #241016;
  --raise:   #33161F;
  --raise-2: #43202B;
  --line:    rgba(246,231,228,.12);

  --brass:     #C69A5E;
  --brass-lit: #E5C088;
  --brass-dim: #7C5F3A;

  --juice:     #E23E58;
  --juice-lit: #FF6C82;
  --juice-mid: #F4506A;

  --text:   #F6E7E4;
  --text-2: #D3B4B8;
  --text-3: #A98A91;

  --ok:   #6FA88A;
  --warn: #D79A4C;

  /* Зерно граната: три угла скруглены, четвёртый — вершина */
  --seed:    22px 22px 22px 6px;
  --seed-l:  22px 22px 6px 22px;
  --seed-up: 6px 22px 22px 22px;

  --font-display:'Unbounded',system-ui,-apple-system,sans-serif;
  --font-text:'Golos Text',system-ui,-apple-system,sans-serif;

  --step:4px;
  --pad:16px;

  --safe-top:    var(--tg-safe-top, 0px);
  --safe-bottom: var(--tg-safe-bottom, 0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overscroll-behavior:none}
body{
  background:var(--deep);
  color:var(--text);
  font-family:var(--font-text);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font-family:inherit}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.app{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  max-width:520px;margin:0 auto;
  background:var(--base);
  padding-top:var(--safe-top);
}

/* ── Латунный профиль ─────────────────────────────────────────────
   В метро латунью обшивают стыки: полоса, под ней ритм заклёпок. */
.rail{
  height:6px;flex:none;position:relative;
  background:linear-gradient(180deg,var(--brass-lit) 0 1px,var(--brass) 1px 3.5px,var(--brass-dim) 3.5px 100%);
}
.rail::after{
  content:'';position:absolute;left:0;right:0;top:8px;height:3px;
  background:radial-gradient(circle at 1.5px 1.5px,var(--brass-dim) 1.4px,transparent 1.6px) 0 0/17px 3px repeat-x;
  opacity:.8;
}
.rail--soft{opacity:.45}

/* ── Шапка ────────────────────────────────────────────────────────── */
.bar{
  flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px var(--pad) 12px;
}
.mark{
  font-family:var(--font-display);font-weight:700;font-size:18px;
  letter-spacing:-.03em;margin:0;
  display:flex;align-items:center;gap:8px;
}
.mark .pip{
  width:10px;height:10px;border-radius:var(--seed);
  background:var(--juice);transform:rotate(-12deg);flex:none;
}
.bar__title{
  font-family:var(--font-display);font-weight:700;font-size:17px;
  letter-spacing:-.03em;margin:0;
}
.chip{
  font-size:13px;color:var(--text-3);
  border:1px solid rgba(198,154,94,.28);
  border-radius:var(--seed-l);
  padding:5px 12px 5px 10px;
  background:rgba(198,154,94,.07);
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;cursor:pointer;
}
.chip svg{width:13px;height:13px;color:var(--brass);flex:none}
.chip:active{background:rgba(198,154,94,.14)}

/* ── Экраны ───────────────────────────────────────────────────────── */
.screen{
  flex:1;min-height:0;
  display:none;
  flex-direction:column;
  padding:0 var(--pad);
}
.screen[data-active]{display:flex}
.scroll{
  flex:1;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:12px;
}

/* ── Колода ───────────────────────────────────────────────────────── */
.deck{
  position:relative;flex:1;min-height:0;
  margin-top:12px;
  touch-action:none;
}
.deck__empty{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:0 24px;
  color:var(--text-3);
}
.deck__empty svg{width:48px;height:48px;color:var(--brass-dim)}
.deck__empty p{margin:0;font-size:15px;line-height:1.5}
.deck__empty b{display:block;color:var(--text);font-size:17px;font-weight:600;margin-bottom:4px}

.card{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  will-change:transform,opacity;
}
.card[data-behind]{pointer-events:none}

.shot{
  position:relative;flex:1;min-height:200px;
  border-radius:26px 26px 8px 8px;
  overflow:hidden;background:var(--raise);
}
.shot__img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  background-color:var(--raise-2);
}
.shot__lamp{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 55% at 50% -8%,rgba(229,192,136,.15),transparent 62%);
}
.shot__sink{
  position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:linear-gradient(to top,var(--base) 4%,rgba(36,16,22,.74) 52%,transparent);
}
.frames{
  position:absolute;top:12px;left:12px;right:12px;
  display:flex;gap:4px;z-index:2;
}
.frames i{flex:1;height:3px;border-radius:2px;background:rgba(246,231,228,.22)}
.frames i[data-on]{background:var(--brass-lit)}

/* Половинки для перелистывания фото касанием */
.taps{position:absolute;inset:0;display:flex;z-index:1}
.taps button{flex:1;background:none;border:0;cursor:pointer}

.who{position:absolute;left:16px;right:16px;bottom:14px;z-index:2}
.who__name{
  font-family:var(--font-display);font-weight:700;
  font-size:25px;line-height:1.08;letter-spacing:-.035em;margin:0 0 3px;
}
.who__name em{
  font-style:normal;font-weight:500;font-size:16px;
  color:var(--brass-lit);margin-left:8px;letter-spacing:-.01em;
}
.who__where{
  margin:0;font-size:13px;color:var(--text-2);
  display:flex;align-items:center;gap:6px;
}
.who__where::before{content:'';width:14px;height:1px;background:var(--brass);flex:none}

.about{
  flex:none;background:var(--raise);
  border-radius:8px 8px 26px 26px;
  padding:14px 16px 16px;margin-top:2px;
}
.about p{margin:0 0 10px;font-size:14.5px;line-height:1.5;color:var(--text-2)}
.about p:last-child{margin-bottom:0}
.marks{display:flex;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.marks li{
  font-size:12px;padding:5px 10px;
  border-radius:var(--seed-l);
  background:rgba(198,154,94,.1);
  border:1px solid rgba(198,154,94,.2);
  color:#E0C3A2;
}
.marks li:first-child{
  background:rgba(226,62,88,.14);
  border-color:rgba(226,62,88,.3);
  color:#FFB0BC;border-radius:var(--seed);
}

/* Штамп решения — появляется при протягивании карточки */
.stamp{
  position:absolute;top:26px;z-index:3;
  font-family:var(--font-display);font-weight:700;font-size:17px;
  letter-spacing:-.02em;padding:8px 16px;
  opacity:0;pointer-events:none;
}
.stamp--yes{
  left:18px;transform:rotate(-9deg);
  color:#1B040A;background:var(--juice-lit);
  border-radius:var(--seed-up);
}
.stamp--no{
  right:18px;transform:rotate(9deg);
  color:var(--text);background:rgba(23,9,14,.86);
  border:1px solid var(--line);border-radius:var(--seed);
}

/* ── Действия ─────────────────────────────────────────────────────── */
.acts{
  flex:none;
  display:grid;grid-template-columns:54px 1fr 54px;
  gap:10px;align-items:center;padding:14px 0 10px;
}
.act{
  height:54px;width:54px;
  border:1px solid var(--line);
  background:var(--raise);color:var(--text-3);
  display:grid;place-items:center;cursor:pointer;
  transition:color .14s,border-color .14s,background .14s;
}
.act--undo{border-radius:var(--seed-l)}
.act--skip{border-radius:var(--seed)}
.act svg{width:20px;height:20px}
.act:active{background:var(--raise-2);color:var(--text)}
.act:disabled{opacity:.35;cursor:default}
.act:focus-visible{outline:2px solid var(--brass-lit);outline-offset:3px}

.spark{
  height:54px;border:0;cursor:pointer;
  border-radius:var(--seed-up);
  font-family:var(--font-display);font-weight:700;font-size:15px;
  letter-spacing:-.02em;color:#1B040A;
  background:linear-gradient(168deg,var(--juice-lit),var(--juice-mid) 46%,var(--juice));
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26);
  transition:filter .14s,transform .12s;
}
.spark svg{width:16px;height:16px}
.spark:active{transform:scale(.985);filter:brightness(1.06)}
.spark:focus-visible{outline:2px solid var(--brass-lit);outline-offset:3px}
.spark:disabled{opacity:.4;cursor:default}

/* ── Каталог ──────────────────────────────────────────────────────── */
.grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:10px;padding:12px 0 4px;
  list-style:none;margin:0;
}
.tile{
  position:relative;aspect-ratio:3/4.1;
  border-radius:20px 20px 6px 20px;
  overflow:hidden;background:var(--raise);
  cursor:pointer;border:0;padding:0;
  display:block;width:100%;
  text-align:left;
}
.tile:nth-child(even){border-radius:20px 20px 20px 6px}
.tile__img{position:absolute;inset:0;background-size:cover;background-position:center}
.tile__sink{
  position:absolute;left:0;right:0;bottom:0;height:56%;
  background:linear-gradient(to top,rgba(23,9,14,.94) 8%,transparent);
}
.tile__who{position:absolute;left:10px;right:10px;bottom:9px}
.tile__name{
  font-family:var(--font-display);font-weight:700;font-size:15px;
  letter-spacing:-.03em;margin:0;color:var(--text);
  display:flex;align-items:baseline;gap:6px;
}
.tile__name em{font-style:normal;font-weight:500;font-size:12.5px;color:var(--brass-lit)}
.tile__where{margin:2px 0 0;font-size:11.5px;color:var(--text-2)}
.tile__flag{
  position:absolute;top:9px;right:9px;
  width:22px;height:22px;border-radius:var(--seed);
  background:rgba(23,9,14,.7);
  display:grid;place-items:center;
}
.tile__flag svg{width:12px;height:12px;color:var(--juice-lit)}

/* ── Искры ────────────────────────────────────────────────────────── */
.sparks{list-style:none;margin:0;padding:12px 0 4px;display:flex;flex-direction:column;gap:8px}
.spark-row{
  display:grid;grid-template-columns:56px 1fr auto;
  gap:12px;align-items:center;
  background:var(--raise);
  border-radius:20px 20px 6px 20px;
  padding:10px 12px 10px 10px;
}
.spark-row__face{
  width:56px;height:56px;border-radius:var(--seed);
  background-size:cover;background-position:center;
  background-color:var(--raise-2);
}
.spark-row__face--locked{filter:blur(7px) saturate(.7)}
.spark-row__body{min-width:0;display:block}
.spark-row__body > span{display:block}
.spark-row__name{
  font-family:var(--font-display);font-weight:700;font-size:15px;
  letter-spacing:-.03em;margin:0 0 2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.spark-row__note{
  margin:0;font-size:12.5px;color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.spark-row__cta{
  border:0;cursor:pointer;flex:none;
  border-radius:var(--seed-up);
  padding:9px 14px;font-size:13px;font-weight:600;
  color:#1B040A;
  background:linear-gradient(168deg,var(--juice-lit),var(--juice));
  white-space:nowrap;
}
.spark-row__cta:active{filter:brightness(1.07)}
.spark-row__cta--muted{
  background:none;color:var(--text-3);
  border:1px solid var(--line);
}

/* ── Своя анкета ──────────────────────────────────────────────────── */
.me{padding:12px 0 4px}
.me__shots{display:flex;gap:8px;margin:0 0 14px}
.me__shot{
  flex:1;aspect-ratio:3/4;
  border-radius:18px 18px 5px 18px;
  background:var(--raise);background-size:cover;background-position:center;
  border:1px solid var(--line);
  position:relative;
}
.me__shot--add{
  display:grid;place-items:center;color:var(--text-3);
  border-style:dashed;cursor:pointer;
}
.me__shot--add svg{width:22px;height:22px}

.state{
  display:flex;align-items:center;gap:9px;
  padding:11px 13px;margin:0 0 14px;
  border-radius:var(--seed-l);
  font-size:13.5px;line-height:1.4;
}
.state--ok{background:rgba(111,168,138,.13);border:1px solid rgba(111,168,138,.3);color:#A5D2BC}
.state--wait{background:rgba(215,154,76,.13);border:1px solid rgba(215,154,76,.3);color:#EDC489}
.state--no{background:rgba(226,62,88,.13);border:1px solid rgba(226,62,88,.3);color:#FFB0BC}
.state svg{width:17px;height:17px;flex:none}

.rows{list-style:none;margin:0 0 16px;padding:0;background:var(--raise);border-radius:20px 20px 6px 20px;overflow:hidden}
.rows li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px}
.rows li + li{border-top:1px solid rgba(246,231,228,.07)}
.rows dt,.rows .k{margin:0;font-size:13.5px;color:var(--text-3)}
.rows dd,.rows .v{margin:0;font-size:14px;color:var(--text);text-align:right;font-weight:500}

.bio-box{
  background:var(--raise);border-radius:20px 20px 6px 20px;
  padding:14px 15px;margin:0 0 16px;
}
.bio-box h3{margin:0 0 7px;font-size:12.5px;color:var(--text-3);font-weight:500}
.bio-box p{margin:0;font-size:14.5px;line-height:1.5;color:var(--text-2)}

.wide{
  width:100%;height:50px;border:1px solid var(--line);
  background:var(--raise);color:var(--text);
  border-radius:var(--seed-l);
  font-size:14.5px;font-weight:500;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:9px;
}
.wide svg{width:17px;height:17px;color:var(--brass)}
.wide:active{background:var(--raise-2)}
.wide--warn{color:#FFB0BC;border-color:rgba(226,62,88,.28)}

/* ── Нижняя навигация ─────────────────────────────────────────────── */
.tabs{
  flex:none;
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:6px var(--pad) calc(10px + var(--safe-bottom));
}
.tab{
  background:none;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 0 4px;color:var(--text-3);font-size:11.5px;
  position:relative;transition:color .14s;
}
.tab svg{width:20px;height:20px}
.tab[aria-current]{color:var(--brass-lit)}
.tab[aria-current]::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:2px;background:var(--brass);
}
.tab:focus-visible{outline:2px solid var(--brass-lit);outline-offset:2px;border-radius:6px}
.tab__dot{
  position:absolute;top:6px;right:calc(50% - 17px);
  min-width:17px;height:17px;padding:0 4px;
  border-radius:var(--seed);
  background:var(--juice);color:#1B040A;
  font-size:11px;font-weight:700;
  display:grid;place-items:center;
}

/* ── Лист снизу ───────────────────────────────────────────────────── */
.sheet{
  position:fixed;inset:0;z-index:40;
  display:none;
}
.sheet[data-open]{display:block}
.sheet__veil{position:absolute;inset:0;background:rgba(10,4,7,.72)}
.sheet__body{
  position:absolute;left:0;right:0;bottom:0;
  max-width:520px;margin:0 auto;
  background:var(--base);
  border-radius:26px 26px 0 0;
  padding:0 var(--pad) calc(28px + var(--safe-bottom));
  max-height:86vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  animation:rise .22s ease-out;
}
@keyframes rise{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
.sheet__grip{
  width:38px;height:4px;border-radius:2px;
  background:var(--brass-dim);
  margin:10px auto 14px;
}
.sheet h2{
  font-family:var(--font-display);font-weight:700;font-size:19px;
  letter-spacing:-.03em;margin:0 0 6px;
}
.sheet p{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--text-2)}

.price{
  display:flex;align-items:baseline;gap:8px;
  margin:0 0 4px;
}
.price b{
  font-family:var(--font-display);font-weight:700;font-size:26px;
  letter-spacing:-.03em;color:var(--text);
}
.price span{font-size:13px;color:var(--text-3)}

.opts{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.opt{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 15px;border-radius:var(--seed-l);
  background:var(--raise);border:1px solid var(--line);
  cursor:pointer;width:100%;text-align:left;color:inherit;font-family:inherit;
}
.opt[data-picked]{border-color:var(--juice);background:rgba(226,62,88,.1)}
.opt__t{margin:0;font-size:14.5px;font-weight:500}
.opt__s{margin:2px 0 0;font-size:12.5px;color:var(--text-3)}
.opt__p{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.02em;white-space:nowrap}

.city-list{list-style:none;margin:0;padding:0 0 8px}
.city-list button{
  width:100%;text-align:left;background:none;border:0;color:var(--text);
  padding:13px 4px;font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(246,231,228,.07);
}
.city-list button[aria-current]{color:var(--brass-lit)}
.city-list svg{width:16px;height:16px}

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

/* ── Оплата ───────────────────────────────────────────────────────── */
.pay{
  background:var(--raise);
  border-radius:20px 20px 6px 20px;
  overflow:hidden;
  margin:0 0 12px;
}
.pay__row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:13px 15px;
  background:none;border:0;color:inherit;font-family:inherit;text-align:left;
}
.pay__row + .pay__row{border-top:1px solid rgba(246,231,228,.07)}
.pay__row[data-copy]{cursor:pointer}
.pay__row[data-copy]:active{background:var(--raise-2)}
.pay__k{font-size:13px;color:var(--text-3)}
.pay__v{
  font-size:15px;color:var(--text);font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.pay__row--sum .pay__v{
  font-family:var(--font-display);font-weight:700;font-size:17px;
  letter-spacing:-.02em;color:var(--brass-lit);
}
.pay__note{font-size:13px;color:var(--text-3);line-height:1.5;margin:0 0 14px}
.pay__upload{
  width:100%;cursor:pointer;
  /* Это подпись поверх скрытого поля выбора файла */
  position:relative;
}
.pay__upload.is-busy{opacity:.6;pointer-events:none}

/* Номер карты с кнопкой копирования: по одному нажатию по строке
   догадывались не все, поэтому кнопка стоит явно */
.pay__num{display:flex;align-items:center;gap:10px}
.pay__copy{
  display:flex;align-items:center;gap:5px;
  border:1px solid rgba(198,154,94,.32);
  background:rgba(198,154,94,.1);
  color:var(--brass-lit);
  border-radius:var(--seed-l);
  padding:5px 10px;font-size:12px;font-family:inherit;
  cursor:pointer;flex:none;
}
.pay__copy svg{width:13px;height:13px}
.pay__copy:active{background:rgba(198,154,94,.2)}

/* Что даёт подписка — списком, а не одной строкой */
.why{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:9px}
.why li{
  display:flex;align-items:flex-start;gap:9px;
  font-size:14.5px;line-height:1.4;color:var(--text-2);
}
.why li::before{
  content:'';flex:none;margin-top:6px;
  width:7px;height:7px;border-radius:var(--seed);
  background:var(--juice);transform:rotate(-12deg);
}

.spark.is-loading{opacity:.75}

/* Предложение подписки в списке искр */
.pitch{
  display:flex;flex-direction:column;gap:3px;
  padding:13px 15px;margin:0 0 4px;
  border-radius:20px 20px 6px 20px;
  background:linear-gradient(150deg,rgba(226,62,88,.16),rgba(198,154,94,.09));
  border:1px solid rgba(226,62,88,.28);
  cursor:pointer;list-style:none;
}
.pitch:active{filter:brightness(1.1)}
.pitch__t{font-family:var(--font-display);font-weight:700;font-size:14.5px;letter-spacing:-.02em}
.pitch__s{font-size:12.5px;color:var(--text-2)}

/* Человек без фотографии: буква имени на ровном цвете вместо пустоты */
.noshot{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;
  font-size:96px;color:rgba(246,231,228,.16);
  letter-spacing:-.04em;pointer-events:none;
}
.noshot--tile{font-size:44px}

/* Заголовок группы в листе выбора места */
.sub-h{
  font-size:12.5px;font-weight:500;color:var(--text-3);
  margin:14px 0 4px;
}
.sub-h:first-of-type{margin-top:0}

/* Подсказка, когда чего-то не хватает для работы раздела */
.hint{
  display:flex;flex-direction:column;gap:4px;
  padding:13px 15px;margin:0 0 4px;
  border-radius:var(--seed-l);
  background:rgba(198,154,94,.09);
  border:1px solid rgba(198,154,94,.22);
}
.hint b{font-size:14px;font-weight:600;color:var(--text)}
.hint span{font-size:12.5px;line-height:1.45;color:var(--text-2)}

/* Поля правки анкеты */
.fld{display:block;margin:0 0 12px}
.fld__k{
  display:block;font-size:12.5px;color:var(--text-3);
  margin:0 0 5px;padding-left:2px;
}
.fld__i{
  width:100%;
  background:var(--raise);
  border:1px solid var(--line);
  border-radius:var(--seed-l);
  color:var(--text);
  font-family:var(--font-text);font-size:15px;
  padding:12px 14px;
  -webkit-appearance:none;appearance:none;
}
.fld__i:focus{
  outline:none;
  border-color:rgba(198,154,94,.5);
  background:var(--raise-2);
}
.fld__i--area{resize:none;line-height:1.45}
select.fld__i{
  /* Стрелка списка своя: системная не попадает в палитру */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C69A5E' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
}