/* СЕТКА — мини-ап телеграма. Ночная тема прибита намеренно.
   Материал — матовое стекло (blur + saturate) поверх цветного неонового фона.
   Кромочной линзы нет: на телефонах она не живёт, остаётся ровное стекло. */

@font-face{font-family:Disp;src:url(fonts/unbounded-cyrillic-wght-normal.woff2)format('woff2');font-weight:200 900;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Disp;src:url(fonts/unbounded-latin-wght-normal.woff2)format('woff2');font-weight:200 900;font-display:swap}
@font-face{font-family:UI;src:url(fonts/onest-cyrillic-wght-normal.woff2)format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:UI;src:url(fonts/onest-latin-wght-normal.woff2)format('woff2');font-weight:100 900;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#08060F;
  --ink:#FFFFFF; --ink-2:#B9B4CC; --ink-3:#8A85A0;
  --violet:#8B5CF6; --blue:#3B82F6; --cyan:#22D3EE; --pink:#E879F9;
  --glow:#A78BFA;
  --tint:rgba(255,255,255,.055);
  --tint-2:rgba(255,255,255,.085);
  --blur:22px;
  --pad:16px; --gap:8px;
  --r:16px; --r-sm:12px; --r-pill:999px;
  --tap:42px; --tap-sm:38px;
  --nav-h:54px;
  --top-h:48px;
  --ease:cubic-bezier(.23,1,.32,1);
  --num:"tnum" 1,"lnum" 1;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:UI,system-ui,sans-serif; font-size:13.5px; line-height:1.38;
  -webkit-font-smoothing:antialiased;
}
/* ── неоновый фон: цветные пятна, которые стекло подхватывает блюром ── */
.amb{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:var(--bg)}
.amb i{position:absolute;display:block;border-radius:50%;filter:blur(58px);opacity:.9}
.amb .b1{width:78vw;height:78vw;left:-26vw;top:-14vh;background:radial-gradient(circle,#7C3AED,transparent 68%)}
.amb .b2{width:70vw;height:70vw;right:-24vw;top:16vh;background:radial-gradient(circle,#2563EB,transparent 68%)}
.amb .b3{width:64vw;height:64vw;left:-16vw;bottom:2vh;background:radial-gradient(circle,#0EA5E9,transparent 66%);opacity:.7}
.amb .b4{width:52vw;height:52vw;right:-12vw;bottom:20vh;background:radial-gradient(circle,#C026D3,transparent 66%);opacity:.6}
.amb .b5{width:66vw;height:66vw;left:8vw;top:34vh;background:radial-gradient(circle,#6D28D9,transparent 68%);opacity:.6}
.amb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,6,15,.12),rgba(8,6,15,.34) 44%,rgba(8,6,15,.58));}
/* зерно — снимает ощущение шаблонной заливки */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/></filter><rect width='150' height='150' filter='url(%23n)'/></svg>")}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

/* ── МАТЕРИАЛ: стекло. Без рамок и полос по кромке. ── */
.lg{
  position:relative;border-radius:var(--r);isolation:isolate;
  background:linear-gradient(148deg,rgba(139,92,246,.13),rgba(59,130,246,.09) 55%,rgba(34,211,238,.07));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(175%);
  backdrop-filter:blur(var(--blur)) saturate(175%);
}
.lg::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 88% at 30% -10%,rgba(255,255,255,.10),transparent 58%)}
.lg>*{position:relative;z-index:1}

/* ── каркас ── */
.top{position:sticky;top:0;z-index:8;display:flex;align-items:center;gap:8px;
  padding:5px var(--pad);height:var(--top-h);
  background:linear-gradient(180deg,rgba(8,6,15,.86),rgba(8,6,15,.3));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.wm{font-family:Disp;font-size:17px;font-weight:700;letter-spacing:.02em;line-height:1;
  background:linear-gradient(92deg,#fff,#C4B5FD 60%,#7DD3FC);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.demo{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:#E9D5FF;background:rgba(139,92,246,.22);padding:4px 8px;border-radius:var(--r-pill)}
.top .sp{margin-left:auto}
.chip-status{font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:#fff;padding:7px 13px;border-radius:var(--r-pill);
  background:linear-gradient(96deg,rgba(139,92,246,.5),rgba(59,130,246,.5));
  box-shadow:0 0 18px -4px rgba(167,139,250,.65)}
main{padding:2px var(--pad) calc(var(--nav-h) + 22px);display:grid;gap:11px}

.tabs{position:fixed;left:18px;right:18px;bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:10;height:var(--nav-h);border-radius:var(--r-pill);
  /* Не равные ячейки с центрированным текстом: слова разной ширины, и крайние
     зазоры получаются разными (слева 23 px, справа 16 — панель читается косой).
     Ячейки по содержимому + равные промежутки дают симметрию при ЛЮБЫХ словах. */
  display:flex;justify-content:space-between;align-items:center;padding:0 14px;
  background:rgba(16,12,28,.82);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 14px 40px -14px rgba(0,0,0,.75)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  flex:0 0 auto;padding:0 5px;min-width:var(--tap-sm);
  min-height:var(--tap);color:var(--ink-3);border-radius:var(--r-pill);transition:color .2s}
.tab b{font-size:9.5px;font-weight:600;letter-spacing:.01em}
.tab svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab[aria-current="page"]{color:#fff}
.tab[aria-current="page"] svg{filter:drop-shadow(0 0 7px var(--glow))}

/* ── типографика ── */
h1{font-family:Disp;font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.16;max-width:16ch}
h2{font-family:Disp;font-size:13.5px;font-weight:600;letter-spacing:-.005em}
.lab{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.num{font-feature-settings:var(--num);font-variant-numeric:tabular-nums}
.note{font-size:12px;color:var(--ink-2);line-height:1.4}
.meta{font-size:11px;color:var(--ink-2);font-feature-settings:var(--num)}
.muted{color:var(--ink-2)}
.sect{display:grid;gap:var(--gap)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sect-h{display:flex;align-items:center;gap:8px}
.sect-h .lab + .lab,
.sect-h h1 + .lab,
.sect-h h2 + .lab,
.sect-h span + .lab{margin-left:auto}
.panel{padding:12px}

/* ── карточка человека ── */
.card{display:grid;grid-template-columns:44px 1fr;gap:11px;padding:11px 12px;align-items:start}
.ava{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-family:Disp;font-size:17px;font-weight:600;color:#fff;
  background:linear-gradient(145deg,rgba(139,92,246,.55),rgba(59,130,246,.5));
  box-shadow:0 0 20px -6px rgba(167,139,250,.8)}
.ava.sm{width:36px;height:36px;font-size:14px}
.card .nm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.card .nm b{font-size:15px;font-weight:600;min-width:0}
.pill{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  color:var(--ink-2);background:rgba(255,255,255,.07);padding:4px 8px;border-radius:var(--r-pill);white-space:nowrap}
.pill.on{color:#F3E8FF;background:linear-gradient(96deg,rgba(139,92,246,.42),rgba(59,130,246,.42))}
.plan{margin-top:5px;display:grid;gap:3px}
.plan .club{font-family:Disp;font-size:17px;font-weight:600;letter-spacing:-.01em;
  background:linear-gradient(92deg,#fff,#DDD6FE);-webkit-background-clip:text;background-clip:text;color:transparent}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.quote{margin-top:6px;font-size:12.5px;color:var(--ink-2);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .act{grid-column:1/-1;display:flex;gap:8px;margin-top:7px}

/* ── кнопки ── */
.btn{height:var(--tap);padding:0 18px;border-radius:var(--r-pill);
  font-weight:700;font-size:13.5px;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(96deg,#8B5CF6,#3B82F6);
  box-shadow:0 8px 26px -10px rgba(139,92,246,.95);
  transition:transform .18s var(--ease),box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:rgba(255,255,255,.08);box-shadow:none;color:var(--ink);font-weight:600;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn.wide{width:100%}
.btn[disabled]{opacity:.42;pointer-events:none;box-shadow:none}
.btn.sm{height:var(--tap-sm);padding:0 13px;font-size:12px}

/* ── переключатель ── */
.sw-hit{min-height:var(--tap);display:flex;align-items:center;gap:14px;width:100%;text-align:left}
.sw-hit .txt{flex:1;min-width:0}
.sw-hit .txt b{display:block;font-size:15.5px;font-weight:600}
.sw{flex:none;width:58px;height:33px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);
  position:relative;transition:background .22s var(--ease),box-shadow .22s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:27px;height:27px;border-radius:50%;
  background:#B9B4CC;transition:transform .22s var(--ease),background .22s}
.sw-hit[aria-checked="true"] .sw{background:linear-gradient(96deg,#8B5CF6,#3B82F6);
  box-shadow:0 0 20px -3px rgba(139,92,246,.9)}
.sw-hit[aria-checked="true"] .sw::after{transform:translateX(25px);background:#fff}

/* ── фильтры ── */
.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  margin:0 calc(var(--pad)*-1);padding:2px var(--pad)}
.filters::-webkit-scrollbar{display:none}
.filters{-webkit-mask:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent);mask:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent)}
.fchip{flex:none;height:var(--tap-sm);padding:0 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);color:var(--ink-2);display:inline-flex;align-items:center;
  font-size:13.5px;font-weight:600;transition:color .18s,background .18s}
.fchip[aria-pressed="true"]{color:#fff;background:linear-gradient(96deg,#8B5CF6,#3B82F6);
  box-shadow:0 6px 20px -8px rgba(139,92,246,.95)}

/* ── карта-пропуск в профиле ── */
.pass{padding:16px;display:grid;gap:13px;overflow:hidden;position:relative}
.pass .head{display:flex;align-items:center;gap:14px}
.pass .who{min-width:0;flex:1}
.pass .who b{display:block;font-family:Disp;font-size:19px;font-weight:600;line-height:1.16}
.pass .ring{position:relative;width:74px;height:74px;flex:none;display:grid;place-items:center}
.pass .ring svg{position:absolute;inset:0;width:74px;height:74px;transform:rotate(-90deg)}
.pass .ring .v{font-family:Disp;font-size:23px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.pass .ring .u{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pass .lvl{font-family:Disp;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(92deg,#C4B5FD,#7DD3FC);-webkit-background-clip:text;background-clip:text;color:transparent}
.marks{display:flex;gap:6px;flex-wrap:wrap}
.mark{padding:6px 11px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;
  background:rgba(255,255,255,.06);color:var(--ink-3)}
.mark[data-lit="1"]{color:#fff;background:rgba(139,92,246,.26);box-shadow:0 0 16px -6px rgba(167,139,250,.9)}
.mark small{font-size:11px;opacity:.75;margin-left:5px;font-variant-numeric:tabular-nums}

/* ── строки статистики ── */
.kv{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:baseline}
.kv dt{color:var(--ink-2);font-size:13px}
.kv dd{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.private{color:var(--ink-2);font-size:12.5px;line-height:1.45}
.lg .private{opacity:.92}

/* ── значки ── */
.bgrid{display:grid;gap:6px}
.bitem{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  border-radius:var(--r-sm);padding:9px 11px;min-height:var(--tap);
  background:rgba(255,255,255,.05);text-align:left;width:100%;transition:background .18s}
.bitem[aria-pressed="true"]{background:rgba(139,92,246,.2)}
.bitem .t{font-family:Disp;font-size:13px;font-weight:600}
.bitem .d{font-size:11.5px;color:var(--ink-2)}
.bitem .st{font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ink-3)}
.bitem[aria-pressed="true"] .st{color:#DDD6FE}

/* ── QR ── */
.qr{display:grid;gap:14px;justify-items:center;text-align:center;padding:20px}
.qr canvas{width:214px;height:214px;image-rendering:pixelated;background:#fff;padding:12px;border-radius:var(--r-sm)}
.qr .code{font-size:14px;letter-spacing:.22em;font-weight:700;
  background:linear-gradient(92deg,#C4B5FD,#7DD3FC);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── формы ── */
.field{display:grid;gap:8px}
.field input,.field textarea{min-height:var(--tap);background:rgba(255,255,255,.07);
  border-radius:var(--r-sm);padding:12px 15px;font-size:16px;width:100%;border:0}
.field textarea{min-height:76px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.seats{display:flex;gap:8px;flex-wrap:wrap}
.seat{min-width:var(--tap);height:var(--tap);padding:0 17px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);font-size:15px;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.seat[aria-pressed="true"]{background:linear-gradient(96deg,#8B5CF6,#3B82F6);color:#fff;
  box-shadow:0 6px 20px -8px rgba(139,92,246,.95)}

/* ── пустые состояния ── */
.empty{display:grid;gap:12px;justify-items:start;padding:22px}
.empty h2{font-size:18px}
.empty p{color:var(--ink-2);font-size:13.5px;max-width:34ch}

/* ── шторка ── */
.sheet-bg{position:fixed;inset:0;background:rgba(6,4,12,.66);z-index:20;display:grid;align-items:end;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sheet{background:rgba(24,19,40,.86);-webkit-backdrop-filter:blur(30px) saturate(170%);
  backdrop-filter:blur(30px) saturate(170%);
  border-radius:26px 26px 0 0;padding:var(--pad);
  padding-bottom:calc(var(--pad) + env(safe-area-inset-bottom));
  display:grid;gap:15px;max-height:88vh;overflow-y:auto}
.grab{width:40px;height:4px;border-radius:var(--r-pill);background:rgba(255,255,255,.22);justify-self:center}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 26px);z-index:30;
  color:#fff;font-weight:700;font-size:13.5px;padding:13px 20px;border-radius:var(--r-pill);
  background:linear-gradient(96deg,#8B5CF6,#3B82F6);box-shadow:0 12px 34px -12px rgba(139,92,246,1);
  max-width:calc(100vw - 36px);text-align:center}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ═══ ПЛИТКА ЧЕЛОВЕКА: кадр фоном, подписи и неон поверх ═══ */
.tile{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;
  display:block;width:100%;text-align:left;padding:0;isolation:isolate}
.tile .ph{position:absolute;inset:0;z-index:0}
.tile .ph::after{content:"";position:absolute;inset:0;opacity:.14;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
.tile .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,6,15,.05) 34%,rgba(8,6,15,.72) 68%,rgba(8,6,15,.95))}
.tile .info{position:absolute;left:10px;right:10px;bottom:9px;z-index:2;display:grid;gap:3px}
.tile .nm2{font-family:Disp;font-size:15px;font-weight:600;line-height:1.1;
  text-shadow:0 1px 10px rgba(0,0,0,.6)}
.tile .cl{font-family:Disp;font-size:13px;font-weight:600;line-height:1.1;
  background:linear-gradient(92deg,#fff,#C4B5FD);-webkit-background-clip:text;background-clip:text;color:transparent}
.tile .dt{font-size:10.5px;color:#CFC9E0;font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.7)}
/* неоновая метка статуса — внахлёст на кадр */
.tile .tag{position:absolute;top:9px;left:9px;z-index:2;
  font-size:9px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;color:#fff;
  padding:4px 9px;border-radius:var(--r-pill);
  background:linear-gradient(96deg,rgba(139,92,246,.92),rgba(59,130,246,.92));
  box-shadow:0 0 16px -2px rgba(167,139,250,.9)}
.tile .seats{position:absolute;top:9px;right:9px;z-index:2;display:block;
  font-size:10px;font-weight:700;color:#fff;padding:4px 8px;border-radius:var(--r-pill);
  background:rgba(8,6,15,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-variant-numeric:tabular-nums}
.tile[data-sent="1"]::after{content:"запрос отправлен";position:absolute;inset:auto 0 0;z-index:3;
  padding:7px;text-align:center;font-size:10.5px;font-weight:700;color:#fff;
  background:linear-gradient(96deg,rgba(139,92,246,.95),rgba(59,130,246,.95))}
.tile:active{transform:scale(.985);transition:transform .12s}
/* кадр как фон карты-пропуска */
.pass .bg{position:absolute;inset:0;z-index:0;opacity:.5}
.pass .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(8,6,15,.55),rgba(8,6,15,.88))}
.pass>*{position:relative;z-index:1}

/* ═══ ПРОФИЛЬ: кадр во всю ширину, имя и цифры внахлёст ═══ */
.hero{position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;isolation:isolate}
.hero .ph{position:absolute;inset:0;z-index:0}
.hero .ph::after{content:"";position:absolute;inset:0;opacity:.13;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
.hero .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,6,15,.05) 38%,rgba(8,6,15,.74) 70%,rgba(8,6,15,.96))}
.hero .tag{position:absolute;top:12px;left:12px;z-index:3;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:#fff;
  padding:6px 13px;border-radius:var(--r-pill);
  background:linear-gradient(96deg,rgba(139,92,246,.95),rgba(59,130,246,.95));
  box-shadow:0 0 22px -2px rgba(167,139,250,1)}
.hero .ring{position:absolute;top:12px;right:12px;z-index:3;width:60px;height:60px;display:grid;place-items:center}
.hero .ring svg{position:absolute;inset:0;width:60px;height:60px;transform:rotate(-90deg);
  filter:drop-shadow(0 0 8px rgba(167,139,250,.9))}
.hero .rv{font-family:Disp;font-size:19px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 8px rgba(0,0,0,.7)}
.hero .hinfo{position:absolute;left:14px;right:14px;bottom:13px;z-index:3;display:grid;gap:3px}
.hero .hn{font-family:Disp;font-size:20px;font-weight:600;line-height:1.08;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.hero .hs{font-size:12px;color:#D6D0E6;text-shadow:0 1px 8px rgba(0,0,0,.8)}

/* полоса цифр, наезжающая на кадр */
.strip{margin-top:-22px;position:relative;z-index:4;display:grid;grid-template-columns:repeat(4,1fr);
  padding:11px 8px;border-radius:var(--r-sm)}
.strip span{display:grid;justify-items:center;gap:1px}
.strip b{font-family:Disp;font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.strip i{font-style:normal;font-size:9.5px;letter-spacing:.06em;color:var(--ink-3)}

/* кнопка закрытия шторки */
.xbtn{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-2);background:rgba(255,255,255,.09);z-index:5}
.sheet{position:relative}

/* ═══ раскрывающиеся цифры профиля ═══ */
.strip{margin-top:-22px;position:relative;z-index:4;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sbox{display:grid;justify-items:center;gap:1px;padding:8px 4px;border-radius:var(--r-sm);min-height:42px}
.sbox b{font-family:Disp;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.sbox i{font-style:normal;font-size:9.5px;letter-spacing:.05em;color:var(--ink-3)}
.sbox:active{transform:scale(.97);transition:transform .12s}

/* ═══ иконки клубов ═══ */
.clubs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cbox{position:relative;aspect-ratio:16/10;border-radius:var(--r-sm);display:grid;
  place-content:center;justify-items:center;gap:4px;overflow:hidden;
  background:rgba(255,255,255,.05)}
.cbox[data-lit="1"]{
  background:
    radial-gradient(120% 100% at 50% 8%, rgba(167,139,250,calc(.30 * var(--k) + .10)), transparent 62%),
    linear-gradient(150deg, rgba(139,92,246,calc(.26 * var(--k) + .06)), rgba(59,130,246,calc(.20 * var(--k) + .05)));
  box-shadow:0 0 calc(20px * var(--k)) -6px rgba(167,139,250,calc(.9 * var(--k)))}
.cbox .cw{font-family:Disp;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink-3);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 6px}
.cbox[data-lit="1"] .cw{color:#fff}
.cbox .cn{font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cbox[data-lit="1"] .cn{color:#C4B5FD}

/* высокий кадр в шторке */
.tile.tall{aspect-ratio:4/5}
/* в высоком кадре метка мест уходит вниз — вверху справа стоит крестик закрытия */
.tile.tall .seats{top:auto;bottom:11px;right:12px}

/* ═══ ГЛАВНАЯ: витрина и новости ═══ */
/* при первом заходе шапка большая — это витрина; при возвращении ужимается,
   чтобы новости были сразу, а не под сгибом */
.hero.home{aspect-ratio:16/11}
.hero.home.compact{aspect-ratio:16/6}
.hero.home.compact .hw{font-size:25px}
.hero.home.compact .hs2{font-size:12px}
.hero .hw{font-family:Disp;font-size:30px;font-weight:700;letter-spacing:.06em;line-height:1;
  text-shadow:0 2px 20px rgba(0,0,0,.6)}
.hero .hs2{font-size:13.5px;color:#E6E1F2;margin-top:5px;text-shadow:0 1px 10px rgba(0,0,0,.8)}

.introbar{display:flex;align-items:center;justify-content:space-between;width:100%;
  min-height:40px;padding:0 2px;font-size:13px;font-weight:600;color:var(--ink-2)}
.introbar svg{transition:transform .2s var(--ease)}
.introbar[aria-expanded="true"] svg{transform:rotate(180deg)}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.scard{display:grid;justify-items:start;gap:4px;padding:11px;border-radius:var(--r-sm);
  text-align:left;min-height:92px;align-content:start}
.scard svg{width:22px;height:22px;color:#C4B5FD;filter:drop-shadow(0 0 8px rgba(167,139,250,.7))}
.scard .sn{font-family:Disp;font-size:14.5px;font-weight:600;margin-top:2px}
.scard .sd{font-size:11.5px;color:var(--ink-2);line-height:1.35}
.scard:active{transform:scale(.98);transition:transform .12s}

.ncard{display:grid;grid-template-columns:104px 1fr;gap:10px;align-items:center}
.ncard.big{grid-template-columns:1fr;gap:9px}
.ncard .np{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--r-sm);overflow:hidden}
.ncard.big .np{aspect-ratio:16/9;border-radius:var(--r)}
.ncard .np::after{content:"";position:absolute;inset:0;opacity:.12;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='110' height='110' filter='url(%23n)'/></svg>")}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(10,7,20,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 0 22px -4px rgba(167,139,250,.9)}
.ncard.big .play{width:54px;height:54px}
.ncard.big .play svg{width:24px;height:24px}
.dur,.kind{position:absolute;right:7px;bottom:7px;z-index:2;font-size:10px;font-weight:700;
  color:#fff;padding:3px 7px;border-radius:var(--r-pill);background:rgba(8,6,15,.66);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-variant-numeric:tabular-nums}
.ncard .ni{display:grid;gap:4px;min-width:0}
.ncard .nt{font-family:Disp;font-size:14px;font-weight:600;line-height:1.22}
.ncard.big .nt{font-size:17px}
.ncard .nm{font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ═══ МОНЕТЫ В ШАПКЕ ═══ */
.coins{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;
  border-radius:var(--r-pill);color:#fff;font-weight:700;font-size:13.5px;
  background:linear-gradient(96deg,rgba(139,92,246,.55),rgba(59,130,246,.55));
  box-shadow:0 0 18px -4px rgba(167,139,250,.7)}
.coins b{font-variant-numeric:tabular-nums}
.coins:active{transform:scale(.96);transition:transform .12s}
.erow{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;padding:9px 0}
.erow .ec{font-weight:700;color:#C4B5FD;font-variant-numeric:tabular-nums;min-width:38px}
.erow .d{font-size:12px;color:var(--ink-2)}
.price{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:15px}
.price.ok{color:#C4B5FD}

/* ═══ «ИДЁТ В БЛИЖАЙШЕЕ ВРЕМЯ» ═══ */
.going{display:inline-flex;align-items:center;gap:6px;justify-self:start;align-self:start;width:max-content;
  font-size:11px;font-weight:700;color:#0C0A16;padding:4px 10px;border-radius:var(--r-pill);
  background:linear-gradient(96deg,#C4B5FD,#7DD3FC);box-shadow:0 0 16px -3px rgba(167,139,250,.9);
  margin-bottom:6px;white-space:nowrap}
.going i{width:6px;height:6px;border-radius:50%;background:#0C0A16;display:block}

/* ═══ ЭКРАН АНКЕТ: одна карточка во весь экран ═══
   Колода — не список: считаем бюджет высоты, а не пропорцию. Кнопки живут
   ВНУТРИ карточки, поэтому уезжать под панель нечему по построению. */
main[data-tab="swipe"]{
  height:calc(100dvh - var(--top-h) - var(--nav-h) - 26px);
  padding:0;overflow:hidden}
main[data-tab="swipe"] > .sect{height:100%;gap:0}
.deck{position:relative;height:100%;min-height:0;margin:0}
.swipecard{position:absolute;inset:0;border-radius:22px;overflow:hidden;
  touch-action:none;cursor:grab;will-change:transform;
  transform:translateY(calc(var(--i) * 7px)) scale(calc(1 - var(--i) * .03));
  box-shadow:0 20px 50px -22px rgba(0,0,0,.9)}
.swipecard:active{cursor:grabbing}
.swipecard.behind{pointer-events:none}
.swipecard .ph{position:absolute;inset:0}
.swipecard .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,6,15,.10) 34%,rgba(8,6,15,.72) 62%,rgba(8,6,15,.97))}

.swipecard .tag{position:absolute;top:14px;left:14px;z-index:3;
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:#fff;
  padding:5px 12px;border-radius:var(--r-pill);
  background:linear-gradient(96deg,rgba(139,92,246,.95),rgba(59,130,246,.95));
  box-shadow:0 0 20px -3px rgba(167,139,250,1)}
.swipecard .count{position:absolute;top:14px;right:14px;z-index:3;
  font-size:11px;font-weight:700;color:#E8E3F5;font-variant-numeric:tabular-nums;
  padding:5px 11px;border-radius:var(--r-pill);background:rgba(8,6,15,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* подписи: имя, под ним плашки, под ними своя фраза */
.swipecard .info{position:absolute;left:18px;right:18px;bottom:88px;z-index:3;display:grid;gap:8px}
.swipecard .nm2{font-family:Disp;font-size:29px;font-weight:600;line-height:1.05;
  text-shadow:0 2px 18px rgba(0,0,0,.75)}
.swipecard .chips{display:flex;flex-wrap:wrap;gap:6px}
.chip2{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#E8E3F5;
  padding:5px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap}
.swipecard .quote{margin:0;font-size:13.5px;color:#DCD6EA;line-height:1.32;
  text-shadow:0 1px 10px rgba(0,0,0,.7);-webkit-line-clamp:2}

/* кнопки внутри карточки */
.swipecard .acts{position:absolute;left:0;right:0;bottom:18px;z-index:4;
  display:flex;justify-content:center;gap:24px}
.rbtn{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  transition:transform .16s var(--ease)}
.rbtn:active{transform:scale(.9)}
.rbtn.no{color:#fff;background:rgba(12,9,22,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.rbtn.yes{color:#0C0A16;background:linear-gradient(140deg,#A7F3D0,#7EE7C4);
  box-shadow:0 12px 32px -10px rgba(126,231,196,.95)}

.stamp{position:absolute;top:64px;z-index:5;opacity:0;pointer-events:none;
  font-family:Disp;font-size:24px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 16px;border-radius:12px}
.stamp.yes{left:16px;transform:rotate(-11deg);color:#0C0A16;background:#8BE9C8;
  box-shadow:0 0 26px -4px rgba(139,233,200,.9)}
.stamp.no{right:16px;transform:rotate(11deg);color:#fff;background:#F4436B;
  box-shadow:0 0 26px -4px rgba(244,67,107,.9)}

/* подсказка: карточка чуть качается, если человек замер */
.hintbar{position:absolute;left:50%;transform:translateX(-50%);bottom:84px;z-index:5;
  font-size:11.5px;font-weight:600;color:#E8E3F5;padding:6px 13px;border-radius:var(--r-pill);
  background:rgba(12,9,22,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
.swipecard.hinting .hintbar{opacity:1}
.swipecard.hinting{animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{
  0%,100%{transform:translateX(0) rotate(0)}
  12%{transform:translateX(-16px) rotate(-2deg)}
  24%{transform:translateX(0) rotate(0)}
  36%{transform:translateX(16px) rotate(2deg)}
  48%{transform:translateX(0) rotate(0)}
}
@media (prefers-reduced-motion:reduce){
  .swipecard.hinting{animation:none}
  .swipecard.hinting .hintbar{opacity:1}
}
@media (max-height:600px){
  .swipecard .nm2{font-size:25px}
  .swipecard .info{bottom:80px}
  .rbtn{width:50px;height:50px}
}

/* ═══ БАЛАНС МОНЕТ: жёлтый неон, компактнее ═══ */
.coins{display:inline-flex;align-items:center;gap:6px;height:var(--tap-sm);padding:0 11px 0 7px;
  border-radius:var(--r-pill);font-weight:700;font-size:13px;
  color:#FFE9A3;background:rgba(255,196,0,.12);
  box-shadow:0 0 16px -4px rgba(255,205,60,.75), inset 0 0 0 1px rgba(255,205,60,.28)}
.coins .cn{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:Disp;font-size:11px;font-weight:700;color:#3A2B00;
  background:radial-gradient(circle at 32% 28%,#FFF0B8,#FFC629 62%,#E8A200);
  box-shadow:0 0 12px -1px rgba(255,205,60,.95)}
.coins b{font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(255,205,60,.6)}
.coins:active{transform:scale(.95);transition:transform .12s}
.erow .ec{color:#FFD75E}
.price.ok{color:#FFD75E}
.kv .sub{display:block;font-size:11px;color:var(--ink-3);font-weight:400}
.kv dt.tot{font-weight:700;color:var(--ink)}
.kv dd.tot{font-weight:700;color:#FFD75E}