/* Recallary — макет мини-аппа. Токены из дизайн-кода: #7555F6 · #1C1438 · #F2EEFF · #B9A7FF */
:root{
  --violet:#7555F6; --violet-2:#8D72FF; --night:#1C1438; --mist:#F2EEFF; --lilac:#B9A7FF;
  --bg:#110C24; --bg-2:#1C1438; --surface:#1A1433; --surface-2:#231B42; --raise:#2B2250;
  --line:rgba(185,167,255,.13); --line-2:rgba(185,167,255,.22);
  --ink:#F2EEFF; --muted:#9C93C2; --faint:#6F6796;
  --ok:#5BE3B0; --warn:#FFB86B; --danger:#FF6B8B; --ice:#86B6FF;
  --c0:#7555F6; --c1:#B9A7FF; --c2:#5BE3B0; --c3:#FFB86B;
  --r-lg:26px; --r-md:20px; --r-sm:14px;
  --spring:cubic-bezier(.2,.9,.25,1.12); --ease:cubic-bezier(.22,.8,.24,1);
  --font:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:"Unbounded","Onest",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:#0A0718;color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input{font:inherit;color:inherit}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ───────── стенд макета (вне телефона) ───────── */
.stage{height:100%;display:grid;grid-template-columns:minmax(260px,320px) auto;justify-content:center;align-items:center;gap:56px;padding:24px;
  background:radial-gradient(900px 600px at 70% 30%,#2A1C6022,transparent),radial-gradient(700px 500px at 20% 80%,#7555F618,transparent),#0A0718}
.harness{display:flex;flex-direction:column;gap:22px}
.harness .h-brand{display:flex;align-items:center;gap:12px}
.harness .h-brand b{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em}
.harness .h-brand small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.h-group label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:0 0 9px 2px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{padding:9px 13px;border-radius:11px;background:#ffffff08;border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:600;transition:all .25s var(--ease)}
.seg button:hover{color:var(--ink);border-color:var(--line-2)}
.seg button.on{background:var(--violet);border-color:var(--violet);color:#fff;box-shadow:0 6px 20px #7555F655}
.h-note{font-size:12.5px;line-height:1.55;color:var(--muted);border-left:2px solid var(--line-2);padding-left:12px}
.h-note b{color:var(--ink);font-weight:600}
.h-toggle{display:none}

.phone{width:390px;height:844px;border-radius:54px;padding:11px;background:linear-gradient(160deg,#3a335a,#16122a 40%,#2a2448);box-shadow:0 40px 90px #0008,0 0 0 1px #ffffff14 inset}
.screen{position:relative;width:100%;height:100%;border-radius:44px;overflow:hidden;background:var(--bg);isolation:isolate}

@media (max-width:760px){
  body{background:var(--bg)}
  .stage{display:block;padding:0;background:none}
  .phone{width:100%;height:100dvh;border-radius:0;padding:0;background:none;box-shadow:none}
  .screen{border-radius:0}
  .harness{position:fixed;z-index:100;left:10px;right:10px;top:10px;padding:16px;border-radius:20px;background:#1A1433f2;border:1px solid var(--line-2);backdrop-filter:blur(18px);box-shadow:0 20px 50px #000a;transform:translateY(-130%);transition:transform .5s var(--spring)}
  .harness.open{transform:none}
  .harness .h-note{display:none}
  .h-toggle{display:flex;position:fixed;z-index:101;right:0;top:42%;width:26px;height:46px;border-radius:12px 0 0 12px;opacity:.7;align-items:center;justify-content:center;background:#ffffff14;border:1px solid var(--line-2);backdrop-filter:blur(10px);color:var(--lilac)}
}
body.in-telegram .harness,body.in-telegram .h-toggle,body.in-telegram .tg-chrome{display:none!important}

/* ───────── фальшивая шапка Telegram ───────── */
.tg-chrome{position:absolute;z-index:40;inset:0 0 auto;height:92px;padding:46px 18px 0;display:flex;align-items:center;gap:12px;background:linear-gradient(#110C24,#110C24ee 70%,#110C2400);pointer-events:none}
.tg-chrome b{font-size:17px;font-weight:650;flex:1}
.tg-chrome span{color:var(--muted);display:flex;gap:20px}
@media (max-width:760px){.tg-chrome{display:none}}

/* ───────── приложение ───────── */
.app{position:absolute;inset:0;z-index:1;transform-origin:50% 0;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-radius .3s cubic-bezier(.2,.8,.2,1),filter .22s;overflow:hidden;background:var(--bg)}
.screen.sheet-open .app{transform:scale(.93) translateY(14px);border-radius:28px;filter:brightness(.7)}
.aurora{position:absolute;inset:-20% -30% auto;height:620px;pointer-events:none;z-index:0;opacity:.9}
.aurora i{position:absolute;border-radius:50%;filter:blur(60px);will-change:transform}
.aurora i:nth-child(1){width:340px;height:340px;left:10%;top:0;background:#7555F6;opacity:.32;animation:drift1 18s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:280px;height:280px;right:8%;top:60px;background:#B9A7FF;opacity:.16;animation:drift2 22s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:220px;height:220px;left:45%;top:200px;background:#4B2FD0;opacity:.28;animation:drift3 15s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(90px,60px) scale(1.15)}}
@keyframes drift2{to{transform:translate(-80px,90px) scale(.9)}}
@keyframes drift3{to{transform:translate(-60px,-40px) scale(1.2)}}

.scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;z-index:1;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{display:none}
.view{padding:104px 18px calc(124px + env(safe-area-inset-bottom));min-height:100%}
@media (max-width:760px){.view{padding-top:calc(18px + env(safe-area-inset-top))}}
.view.no-tabs{padding-bottom:40px}

/* шапка */
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.brand{display:flex;align-items:center;gap:11px}
.brand b{font-size:17px;font-weight:700;letter-spacing:-.01em;display:block}
.brand small{font-size:12px;color:var(--muted)}
.tile{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#8F73FF,#5B3CEB);box-shadow:0 8px 22px #7555F64d,inset 0 1px 0 #ffffff40;flex:none}
.logo-r{display:block;width:62%;height:62%;background:#fff;-webkit-mask:url(assets/brand-r.png) center/contain no-repeat;mask:url(assets/brand-r.png) center/contain no-repeat}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;background:linear-gradient(140deg,#3A2E6B,#2A2150);border:1px solid var(--line-2);flex:none}
.page-h{margin:2px 2px 20px}
.page-h h1{font-family:var(--display);font-weight:600;font-size:27px;letter-spacing:-.03em;line-height:1.1}
.page-h p{color:var(--muted);font-size:14px;margin-top:7px;line-height:1.4}
.cap{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:26px 4px 11px;display:flex;justify-content:space-between;align-items:center}
.cap button{letter-spacing:0;text-transform:none;font-size:13px;color:var(--lilac);font-weight:600}

/* карточки */
.card{position:relative;background:linear-gradient(180deg,#ffffff0a,#ffffff04);border:1px solid var(--line);border-radius:var(--r-md);padding:18px}
.card+.card{margin-top:10px}
.hero{border-radius:var(--r-lg);padding:20px;overflow:hidden;background:linear-gradient(150deg,#2E2160 0%,#1D1640 55%,#18122F 100%);border:1px solid #8C71FF3a;box-shadow:0 24px 50px #05021499,inset 0 1px 0 #ffffff14}
.hero:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--a,0deg),transparent 0 70%,#B9A7FF99 80%,transparent 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinA 7s linear infinite;pointer-events:none}
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spinA{to{--a:360deg}}
.hero .wm{position:absolute;right:-46px;bottom:-60px;width:210px;height:210px;background:#B9A7FF;opacity:.07;-webkit-mask:url(assets/brand-r.png) center/contain no-repeat;mask:url(assets/brand-r.png) center/contain no-repeat;animation:wm 14s ease-in-out infinite alternate;pointer-events:none}
@keyframes wm{to{transform:translate(-14px,-10px) rotate(-6deg)}}
.hero-main{display:flex;gap:18px;align-items:center;position:relative}
.rings{position:relative;width:132px;height:132px;flex:none}
.rings svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.rings circle{fill:none;stroke-linecap:round}
.rings .trk{stroke:#ffffff0d}
.rings .frz{stroke:var(--ice);stroke-dasharray:2 6;opacity:.55}
.rings-c{position:absolute;inset:0;display:grid;place-items:center;text-align:center;align-content:center}
.rings-c b{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.04em;line-height:1}
.rings-c small{font-size:11px;color:var(--muted);margin-top:4px}
.hero-info{flex:1;min-width:0}
.hero-info h2{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:10px 0 10px}
.kv{display:grid;gap:7px;font-size:13px}
.kv div{display:flex;justify-content:space-between;gap:8px}
.kv span{color:var(--muted)}
.kv b{font-weight:600;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-actions{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:18px;position:relative}

.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:30px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#ffffff0d;color:var(--lilac)}
.pill.ok{background:#5BE3B01a;color:var(--ok)}
.pill.warn{background:#FFB86B1c;color:var(--warn)}
.pill.ice{background:#86B6FF1c;color:var(--ice)}
.pill.bad{background:#FF6B8B1c;color:var(--danger)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;position:relative;flex:none}
.dot.live:after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;animation:ping 2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(3.2);opacity:0}}

/* кнопки */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 20px;border-radius:16px;font-weight:650;font-size:15.5px;transition:transform .45s var(--spring),background .3s,box-shadow .3s,opacity .3s;overflow:hidden;white-space:nowrap}
.btn:active{transform:scale(.965);transition-duration:.12s}
.btn.full{width:100%}
.btn.primary{color:#fff;background:linear-gradient(115deg,#8467FF,#6A48F5 60%,#5B39EE);box-shadow:0 12px 28px #7555F655,inset 0 1px 0 #ffffff3a}
.btn.primary:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,#ffffff40 48%,transparent 66%);transform:translateX(-120%);animation:shine 5s 1.2s var(--ease) infinite}
@keyframes shine{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}
.btn.ghost{background:#ffffff0c;border:1px solid var(--line-2)}
.btn.ice{background:#86B6FF22;color:#CFE1FF;border:1px solid #86B6FF44}
.btn.sm{min-height:40px;padding:0 14px;font-size:13.5px;border-radius:12px}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn .i{width:19px;height:19px}

/* быстрые плитки */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}
.tile-a{display:flex;flex-direction:column;align-items:center;gap:9px;padding:15px 4px 13px;border-radius:18px;background:#ffffff08;border:1px solid var(--line);font-size:12px;font-weight:600;transition:transform .45s var(--spring),background .3s;position:relative}
.tile-a:active{transform:scale(.94);transition-duration:.12s}
.tile-a .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#7555F622;color:var(--lilac)}
.tile-a .ic.g{background:#5BE3B01c;color:var(--ok)}
.tile-a .ic.o{background:#FFB86B1c;color:var(--warn)}
.tile-a .ic.b{background:#86B6FF1c;color:var(--ice)}
.badge{position:absolute;top:8px;right:10px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--violet);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 3px var(--bg)}

/* баннеры */
.banner{display:flex;gap:13px;align-items:center;padding:14px 14px 14px 15px;border-radius:18px;margin-bottom:12px;border:1px solid;cursor:pointer;transition:transform .45s var(--spring)}
.banner:active{transform:scale(.98)}
.banner .ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none}
.banner b{display:block;font-size:14.5px;font-weight:650}
.banner small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.35}
.banner>div{flex:1;min-width:0}
.banner.gift{background:linear-gradient(110deg,#7555F633,#B9A7FF14);border-color:#B9A7FF40}
.banner.gift .ic{background:var(--violet);color:#fff;animation:wiggle 3.2s ease-in-out infinite}
@keyframes wiggle{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-12deg)}88%{transform:rotate(10deg)}92%{transform:rotate(-6deg)}96%{transform:rotate(3deg)}}
.banner.frozen{background:linear-gradient(110deg,#86B6FF22,#86B6FF08);border-color:#86B6FF3a}
.banner.frozen .ic{background:#86B6FF2a;color:var(--ice)}
.banner.trial{background:linear-gradient(110deg,#FFB86B1f,#FFB86B06);border-color:#FFB86B33}
.banner.trial .ic{background:#FFB86B26;color:var(--warn)}
.banner .chev{color:var(--faint)}

/* устройства */
.dev{display:flex;align-items:center;gap:13px;padding:14px;border-radius:18px;background:#ffffff07;border:1px solid var(--line);transition:transform .45s var(--spring),background .3s,border-color .3s,opacity .3s;cursor:pointer;position:relative}
.dev+.dev{margin-top:9px}
.dev:active{transform:scale(.98);transition-duration:.12s}
.dev .mini{position:relative;width:46px;height:46px;flex:none}
.dev .mini>svg:first-child{width:100%;height:100%;transform:rotate(-90deg)}
.dev .mini circle{fill:none;stroke-width:4;stroke-linecap:round}
.dev .mini .i{position:absolute;inset:0;margin:auto;width:20px;height:20px;color:var(--ink)}
.dev .txt{flex:1;min-width:0}
.dev .txt b{display:block;font-size:15px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev .txt small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.dev .end{text-align:right;flex:none}
.dev .end b{display:block;font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.03em}
.dev .end small{font-size:11px;color:var(--muted)}
.dev.is-frozen{background:repeating-linear-gradient(135deg,#86B6FF08 0 10px,transparent 10px 20px),#ffffff05;border-color:#86B6FF30}
.dev.is-frozen .txt b{color:#C9DBFF}
.dev.is-frozen .end b{color:var(--ice)}
.check{width:0;height:24px;border-radius:8px;border:1.6px solid var(--line-2);flex:none;display:grid;place-items:center;opacity:0;margin-right:-13px;transition:width .4s var(--spring),opacity .3s,margin .4s var(--spring),background .25s,border-color .25s;color:#fff}
.check .i{width:15px;height:15px;stroke-width:3;transform:scale(0);transition:transform .35s var(--spring)}
.selecting .check{width:24px;opacity:1;margin-right:0}
.dev.sel{border-color:#7555F6aa;background:#7555F614}
.dev.sel .check{background:var(--violet);border-color:var(--violet)}
.dev.sel .check .i{transform:scale(1)}
.add-dev{width:100%;margin-top:9px;display:flex;align-items:center;gap:13px;padding:14px;border-radius:18px;border:1.5px dashed var(--line-2);color:var(--lilac);font-weight:600;font-size:15px;transition:transform .45s var(--spring),background .3s}
.add-dev:active{transform:scale(.98)}
.add-dev .ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#7555F620}
.add-dev small{display:block;color:var(--muted);font-weight:500;font-size:12.5px;margin-top:2px;text-align:left}
.summary{display:flex;align-items:center;justify-content:space-between;gap:10px}
.summary .stat b{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.03em}
.summary .stat small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
.note{font-size:12.5px;line-height:1.5;color:var(--muted);padding:0 4px;margin-top:14px}

/* панель оплаты выбранных */
.paybar{position:absolute;z-index:30;left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;padding:10px 10px 10px 18px;border-radius:20px;background:#2A2052f0;border:1px solid #8C71FF55;backdrop-filter:blur(20px);box-shadow:0 18px 40px #0009;transform:translateY(150%);opacity:0;transition:transform .6s var(--spring),opacity .3s}
.paybar.show{transform:none;opacity:1}
.paybar div{flex:1}
.paybar b{font-size:16px;display:block}
.paybar small{color:var(--muted);font-size:12px}

/* инвайты */
.inv-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.inv-dots{display:flex;gap:6px}
.inv-dots i{width:30px;height:8px;border-radius:4px;background:#ffffff12;transition:background .4s}
.inv-dots i.on{background:var(--violet);box-shadow:0 0 12px #7555F6aa}
.inv-head b{font-size:14px;font-weight:600}
.inv-head small{color:var(--muted);font-size:12.5px;display:block;margin-top:2px}
.ticket-wrap{perspective:900px}
.ticket-wrap+.ticket-wrap{margin-top:12px}
.ticket{position:relative;display:flex;min-height:118px;border-radius:22px;transform-style:preserve-3d;transition:transform .6s var(--spring);--mx:50%;--my:50%;
  -webkit-mask:radial-gradient(circle 11px at calc(100% - 92px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at calc(100% - 92px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 11px at calc(100% - 92px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at calc(100% - 92px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.ticket .body{flex:1;padding:17px 16px 16px 18px;min-width:0;display:flex;flex-direction:column}
.ticket .stub{width:92px;flex:none;border-left:2px dashed #ffffff26;display:grid;place-items:center;align-content:center;gap:4px;text-align:center;padding:10px 6px}
.ticket .stub b{font-family:var(--display);font-size:22px;font-weight:600}
.ticket .stub small{font-size:10.5px;color:inherit;opacity:.75;line-height:1.25}
.ticket .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.7}
.ticket .t{font-size:16.5px;font-weight:700;margin-top:6px;letter-spacing:-.01em}
.ticket .s{font-size:12.5px;opacity:.75;margin-top:3px}
.ticket .row{display:flex;gap:7px;margin-top:auto;padding-top:12px}
.ticket .sheen{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(260px circle at var(--mx) var(--my),#ffffff2a,transparent 60%);opacity:0;transition:opacity .3s}
.ticket:hover .sheen{opacity:1}
.t-empty{background:linear-gradient(120deg,#2A2050,#1E1740);border:1px solid var(--line-2);color:var(--ink)}
.t-issued{color:#fff;background:linear-gradient(120deg,#6E4CF7,#8B6CFF 45%,#5A3AE6)}
.t-issued:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent 20%,#ffffff22 30%,#B9F3FF22 36%,#FFC9F522 42%,transparent 52%);background-size:250% 100%;animation:holo 4.5s linear infinite;mix-blend-mode:screen}
@keyframes holo{from{background-position:120% 0}to{background-position:-130% 0}}
.t-used{background:linear-gradient(120deg,#1E3B3A,#173030);border:1px solid #5BE3B033;color:#DFFBF1}
.t-trial{background:linear-gradient(120deg,#3B2F1E,#2A2218);border:1px solid #FFB86B33;color:#FFEBD3}
.t-burned{background:repeating-linear-gradient(135deg,#ffffff05 0 8px,transparent 8px 16px),#1A1530;border:1px solid #FF6B8B30;color:#8D85AA}
.t-burned .t{text-decoration:line-through;text-decoration-color:#FF6B8B99}
.t-locked{background:linear-gradient(120deg,#231B42,#1A1433);border:1px solid var(--line);color:var(--faint)}
.code{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:.06em;margin-top:6px;display:flex}
.code span{display:inline-block;min-width:.62em;text-align:center}
.tbtn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:11px;background:#ffffff22;font-size:12.5px;font-weight:650;transition:transform .4s var(--spring),background .2s}
.tbtn:active{transform:scale(.93)}
.tbtn .i{width:15px;height:15px}
.tbtn.dark{background:#ffffff10}
.tbtn.hot{background:#fff;color:var(--violet)}
.ava{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none;background:linear-gradient(140deg,#5BE3B0,#2B9C7A);color:#0B2A22}
.locked-wrap{position:relative}
.locked-wrap .ticket-wrap{filter:blur(2px) saturate(.3);opacity:.32}
.lock-over{position:absolute;inset:-10px;background:radial-gradient(closest-side,#110C24f0 35%,#110C2400);display:grid;place-items:center;align-content:center;gap:12px;text-align:center;padding:20px}
.lock-ic{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;background:#1C1438ee;border:1px solid var(--line-2);color:var(--lilac);box-shadow:0 14px 40px #000a;animation:bob 3.6s ease-in-out infinite}
.lock-ic .i{width:28px;height:28px}
@keyframes bob{50%{transform:translateY(-6px)}}
.lock-over b{font-size:17px}
.lock-over small{color:var(--muted);font-size:13px;max-width:250px;line-height:1.45}
.steps{display:grid;gap:12px}
.step{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.45}
.step i{font-style:normal;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:#7555F622;color:var(--lilac);font-weight:700;font-size:12.5px;flex:none}
.step span{color:var(--muted)}
.step b{color:var(--ink);font-weight:600}

/* «ещё» */
.list{border-radius:var(--r-md);background:#ffffff07;border:1px solid var(--line);overflow:hidden}
.li{display:flex;align-items:center;gap:13px;padding:14px 15px;width:100%;text-align:left;transition:background .2s}
.li:active{background:#ffffff0a}
.li+.li{border-top:1px solid var(--line)}
.li .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#7555F620;color:var(--lilac);flex:none}
.li .ic .i{width:19px;height:19px}
.li div{flex:1;min-width:0}
.li b{display:block;font-size:15px;font-weight:600}
.li small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.li .chev{color:var(--faint);width:18px;height:18px}
.profile{display:flex;align-items:center;gap:14px}
.profile .avatar{width:54px;height:54px;font-size:20px;background:linear-gradient(140deg,#8467FF,#5B39EE);border:0}
.profile b{font-size:18px;font-weight:700;display:block}
.profile small{color:var(--muted);font-size:13px}
.srv-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.srv{display:flex;align-items:center;gap:12px;padding:12px 0}
.srv+.srv{border-top:1px solid var(--line)}
.flag{width:30px;height:22px;border-radius:6px;flex:none;box-shadow:0 0 0 1px #ffffff1a inset}
.flag.nl{background:linear-gradient(#AE1C28 0 33.3%,#fff 0 66.6%,#21468B 0)}
.flag.de{background:linear-gradient(#111 0 33.3%,#DD0000 0 66.6%,#FFCE00 0)}
.flag.fi{background:linear-gradient(90deg,transparent 0 30%,#003580 0 45%,transparent 0),linear-gradient(transparent 0 38%,#003580 0 62%,transparent 0),#fff}
.flag.ru{background:linear-gradient(#fff 0 33.3%,#0039A6 0 66.6%,#D52B1E 0)}
.srv div{flex:1;min-width:0}
.srv b{font-size:14.5px;font-weight:600;display:block}
.srv small{font-size:12px;color:var(--muted)}
.load{height:4px;border-radius:2px;background:#ffffff10;margin-top:7px;overflow:hidden}
.load i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ok),#9CF0D0);transition:width 1.2s var(--ease)}
.load i.mid{background:linear-gradient(90deg,var(--warn),#FFD6A6)}
.ms{font-family:var(--display);font-size:14px;font-weight:600;text-align:right;min-width:62px;font-variant-numeric:tabular-nums}
.ms small{font-family:var(--font);font-weight:500;color:var(--muted)}

/* таббар */
.tabbar{position:absolute;z-index:35;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));height:68px;border-radius:24px;display:grid;grid-template-columns:repeat(4,1fr);padding:6px;background:#1D1640e6;border:1px solid var(--line-2);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);box-shadow:0 18px 40px #0008;transition:transform .6s var(--spring),opacity .3s}
.tabbar.hidden{transform:translateY(140%);opacity:0;pointer-events:none}
.tab-ind{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/4);border-radius:18px;background:linear-gradient(160deg,#7555F64d,#7555F626);border:1px solid #8C71FF55;transition:transform .6s var(--spring);pointer-events:none}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:600;color:var(--faint);transition:color .3s}
.tab .i{width:22px;height:22px;transition:transform .5s var(--spring)}
.tab.on{color:var(--ink)}
.tab.on .i{color:var(--lilac);transform:translateY(-1px) scale(1.08)}
.tab .badge{top:2px;right:calc(50% - 22px);box-shadow:0 0 0 3px #1D1640}
.tab .lock{position:absolute;top:6px;right:calc(50% - 18px);width:14px;height:14px;color:var(--faint)}

/* шторки */
.backdrop{position:absolute;inset:0;z-index:50;background:#05021499;opacity:0;pointer-events:none;transition:opacity .22s}
.screen.sheet-open .backdrop{opacity:1;pointer-events:auto}
.sheet{position:absolute;z-index:60;left:0;right:0;bottom:0;max-height:88%;display:flex;flex-direction:column;border-radius:30px 30px 0 0;background:linear-gradient(180deg,#241C48,#1A1433 40%);border:1px solid var(--line-2);border-bottom:0;box-shadow:0 -20px 60px #0009;transform:translateY(105%);will-change:transform}
.sheet .grab{padding:10px 0 4px;display:grid;place-items:center;cursor:grab;touch-action:none;flex:none}
.sheet .grab i{width:40px;height:5px;border-radius:3px;background:#ffffff2a}
.sheet .sc{overflow-y:auto;padding:8px 20px calc(24px + env(safe-area-inset-bottom));scrollbar-width:none}
.sheet h3{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.03em;margin-bottom:6px}
.sheet .sub{color:var(--muted);font-size:13.5px;line-height:1.45;margin-bottom:18px}
.opt{display:flex;align-items:center;gap:13px;width:100%;padding:14px;border-radius:16px;background:#ffffff07;border:1.5px solid var(--line);text-align:left;transition:border-color .25s,background .25s,transform .4s var(--spring)}
.opt+.opt{margin-top:8px}
.opt:active{transform:scale(.98)}
.opt.on{border-color:var(--violet);background:#7555F617}
.opt .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#ffffff0d;flex:none;font-weight:700}
.opt div{flex:1;min-width:0}
.opt b{display:block;font-size:14.5px;font-weight:600}
.opt small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.opt .rad{width:22px;height:22px;border-radius:50%;border:1.6px solid var(--line-2);flex:none;position:relative;transition:border-color .25s}
.opt .rad:after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--violet);transform:scale(0);transition:transform .35s var(--spring)}
.opt.on .rad{border-color:var(--violet)}
.opt.on .rad:after{transform:scale(1)}
.lines{border-radius:16px;background:#ffffff06;border:1px solid var(--line);padding:4px 14px;margin-bottom:16px}
.line{display:flex;justify-content:space-between;gap:10px;padding:11px 0;font-size:14px}
.line+.line{border-top:1px solid var(--line)}
.line span{color:var(--muted)}
.line.total{font-size:16px}
.line.total b{font-family:var(--display);font-weight:600}
.segc{display:flex;padding:4px;border-radius:14px;background:#ffffff08;border:1px solid var(--line);position:relative;margin-bottom:16px}
.segc button{flex:1;position:relative;z-index:1;padding:10px 4px;font-size:13px;font-weight:600;color:var(--muted);transition:color .3s}
.segc button.on{color:#fff}
.segc .ind{position:absolute;top:4px;bottom:4px;left:4px;border-radius:10px;background:var(--raise);border:1px solid var(--line-2);transition:transform .55s var(--spring),width .55s var(--spring)}
.field{width:100%;height:50px;border-radius:14px;background:#ffffff08;border:1.5px solid var(--line);padding:0 15px;font-size:15px;outline:none;transition:border-color .25s}
.field:focus{border-color:var(--violet)}
.happ{display:flex;gap:13px;align-items:center;margin-bottom:14px}
.happ img{width:48px;height:48px;border-radius:13px}
.happ b{font-size:16px;display:block}
.happ small{color:var(--muted);font-size:12.5px}
.stores{border-radius:16px;overflow:hidden;border:1px solid var(--line);margin-bottom:16px}
.stores a{display:flex;align-items:center;justify-content:space-between;padding:14px 15px;font-size:14px;font-weight:600;color:var(--lilac);text-decoration:none;background:#ffffff06}
.stores a+a{border-top:1px solid var(--line)}
.stores .i{width:17px;height:17px}

/* успех оплаты */
.done{display:grid;place-items:center;text-align:center;padding:14px 0 6px}
.done-ring{position:relative;width:96px;height:96px;margin-bottom:18px}
.done-ring svg{width:100%;height:100%}
.done-ring circle{fill:none;stroke:var(--ok);stroke-width:5;stroke-linecap:round}
.done-ring path{fill:none;stroke:var(--ok);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.done h3{margin-bottom:6px}
.spin{width:22px;height:22px;border-radius:50%;border:2.5px solid #ffffff44;border-top-color:#fff;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* тост */
.toast{position:absolute;z-index:90;left:50%;top:calc(102px + env(safe-area-inset-top));display:flex;align-items:center;gap:10px;padding:11px 16px 11px 12px;border-radius:16px;background:#2C2356f2;border:1px solid var(--line-2);backdrop-filter:blur(18px);box-shadow:0 14px 34px #000a;font-size:13.5px;font-weight:600;white-space:nowrap;transform:translate(-50%,-180%);opacity:0;pointer-events:none}
.toast .ic{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:#5BE3B022;color:var(--ok)}
.toast .ic .i{width:16px;height:16px;stroke-width:2.4}
@media (max-width:760px){.toast{top:calc(14px + env(safe-area-inset-top))}}

/* частицы */
.burst{position:absolute;z-index:95;pointer-events:none;width:0;height:0}
.burst i{position:absolute;width:8px;height:8px;border-radius:2px;left:-4px;top:-4px}

/* ───────── лист ожидания ───────── */
.wait{min-height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:118px 22px 32px}
@media (max-width:760px){.wait{padding-top:calc(40px + env(safe-area-inset-top))}}
.orb{position:relative;width:180px;height:180px;display:grid;place-items:center;margin-bottom:26px}
.orb .tile{width:84px;height:84px;border-radius:26px;box-shadow:0 20px 60px #7555F688,inset 0 1px 0 #ffffff50;z-index:2;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.05);box-shadow:0 26px 80px #7555F6aa,inset 0 1px 0 #ffffff50}}
.orb .o{position:absolute;inset:0;border-radius:50%;border:1px solid #B9A7FF26}
.orb .o:nth-child(2){inset:22px;border-color:#B9A7FF33}
.orb .o i{position:absolute;top:-4px;left:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:var(--lilac);box-shadow:0 0 14px var(--lilac)}
.orb .o.spin1{animation:sp 9s linear infinite}
.orb .o.spin2{animation:sp 6s linear infinite reverse}
.orb .o.spin2 i{background:var(--ok);box-shadow:0 0 14px var(--ok);width:6px;height:6px}
.orb .halo{position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(#7555F640,transparent 65%);animation:breathe 4s ease-in-out infinite}
.wait h1{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.03em;line-height:1.15;margin:14px 0 10px}
.wait>p{color:var(--muted);font-size:14.5px;line-height:1.5;max-width:300px}
.queue{width:100%;margin:24px 0 12px;padding:18px;border-radius:22px;background:#ffffff07;border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;text-align:left}
.queue small{color:var(--muted);font-size:12.5px;display:block}
.queue b{font-family:var(--display);font-size:34px;font-weight:600;letter-spacing:-.04em;display:block;margin-top:2px}
.queue .q-r{text-align:right;font-size:12.5px;color:var(--muted);line-height:1.5}
.codebox{width:100%;padding:18px;border-radius:22px;background:linear-gradient(160deg,#2A1F5A,#1D1640);border:1px solid #8C71FF40;text-align:left}
.codebox>b{font-size:15.5px;display:block}
.codebox>small{color:var(--muted);font-size:12.5px;display:block;margin-top:3px}
.cells{position:relative;display:flex;align-items:center;gap:7px;margin:16px 0 14px}
.cells .pre{font-family:var(--display);font-weight:600;font-size:20px;color:var(--lilac);margin-right:3px}
.cell{flex:1;height:56px;border-radius:14px;background:#0E0A1F99;border:1.5px solid var(--line-2);display:grid;place-items:center;font-family:var(--display);font-size:22px;font-weight:600;transition:border-color .2s,background .3s,transform .35s var(--spring)}
.cell.cur{border-color:var(--violet);box-shadow:0 0 0 4px #7555F625}
.cell.cur:empty:after{content:"";width:2px;height:24px;background:var(--lilac);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.cell.ok{border-color:var(--ok);background:#5BE3B015;color:var(--ok)}
.cell.bad{border-color:var(--danger);color:var(--danger)}
.cells input{position:absolute;inset:0;opacity:0;font-size:16px;text-transform:uppercase}
.err{color:var(--danger);font-size:12.5px;min-height:18px;margin:-6px 0 8px 2px}
.reveal{position:absolute;inset:0;z-index:80;pointer-events:none;background:radial-gradient(circle at var(--x,50%) var(--y,70%),#8D72FF,#5B39EE);clip-path:circle(0 at var(--x,50%) var(--y,70%))}

/* ───────── чат бота ───────── */
.chat{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;background:#0E1621;opacity:0;pointer-events:none;transition:opacity .35s}
.chat.show{opacity:1;pointer-events:auto}
.chat-top{flex:none;display:flex;align-items:center;gap:11px;padding:54px 14px 10px;background:#17212B;border-bottom:1px solid #0008}
@media (max-width:760px){.chat-top{padding-top:calc(12px + env(safe-area-inset-top))}}
.chat-top .tile{width:40px;height:40px;border-radius:50%}
.chat-top b{display:block;font-size:16px;font-weight:600;color:#fff}
.chat-top small{font-size:13px;color:#7D8B99}
.chat-top .back{color:#6AB2F2}
.chat-body{flex:1;overflow-y:auto;padding:12px 10px 14px;display:flex;flex-direction:column;gap:6px;scrollbar-width:none;
  background:radial-gradient(circle at 20% 20%,#ffffff06 0 2px,transparent 3px) 0 0/34px 34px,radial-gradient(circle at 70% 60%,#ffffff05 0 1.5px,transparent 2.5px) 0 0/46px 46px,#0E1621}
.day{align-self:center;font-size:12.5px;font-weight:600;color:#fff;background:#1E2C3A;padding:4px 10px;border-radius:12px;margin:8px 0 4px}
.msg{max-width:84%;align-self:flex-start;transform-origin:0 100%}
.msg.me{align-self:flex-end;transform-origin:100% 100%}
.bub{position:relative;padding:8px 11px 7px;border-radius:16px 16px 16px 5px;background:#182533;color:#F5F5F5;font-size:14.5px;line-height:1.42;white-space:pre-line}
.me .bub{background:#2B5278;border-radius:16px 16px 5px 16px}
.bub b{font-weight:650}
.bub .tm{float:right;font-size:11px;color:#7D8B99;margin:8px 0 -3px 10px}
.me .bub .tm{color:#7DA8D3}
.kb{display:grid;gap:3px;margin-top:3px}
.kb button{padding:9px;border-radius:9px;background:#22303Fcc;color:#fff;font-size:14px;font-weight:600;transition:background .2s,transform .35s var(--spring)}
.kb button:active{transform:scale(.97);background:#2B3D50}
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;border-radius:16px 16px 16px 5px;background:#182533}
.typing i{width:7px;height:7px;border-radius:50%;background:#7D8B99;animation:ty 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.chat-foot{flex:none;display:flex;gap:8px;align-items:center;padding:8px 10px calc(10px + env(safe-area-inset-bottom));background:#17212B}
.chat-foot .menu{display:flex;align-items:center;gap:6px;height:38px;padding:0 13px;border-radius:19px;background:#7555F6;color:#fff;font-weight:650;font-size:14px}
.chat-foot .inp{flex:1;height:38px;border-radius:19px;background:#0E1621;color:#5D6B78;display:flex;align-items:center;padding:0 14px;font-size:14px}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.15s!important}
}

/* боевой мини-апп: всегда на весь экран, без рамки телефона и стенда */
.stage{display:block;padding:0;background:none;height:100dvh}
.phone{width:100%;height:100dvh;border-radius:0;padding:0;background:none;box-shadow:none}
.screen{border-radius:0}
.boot{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:14px;text-align:center;padding:24px}

/* быстрее: бар реагирует сразу, без долгой пружины */
.tab-ind{transition:transform .26s cubic-bezier(.2,.8,.2,1)}
.tab{transition:color .12s}
.tab .i{transition:transform .2s cubic-bezier(.2,.8,.2,1)}

/* мастер подключения */
.wz-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:2px 0 14px}
.wz-bar i{height:4px;border-radius:2px;background:#ffffff14;transition:background .25s}
.wz-bar i.on{background:var(--violet)}
.wz-k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lilac)}
.wz-ic{width:72px;height:72px;margin:16px auto 14px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(160deg,#7555F633,#7555F611);border:1px solid #8C71FF55;color:var(--lilac)}
.wz-ic .i{width:32px;height:32px}
.wz-ic.ok{background:#5BE3B022;border-color:#5BE3B055;color:var(--ok)}
.wz-h{text-align:center;margin:0 0 6px}
.wz-sub{text-align:center;margin-bottom:16px}
.wz-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}
.wz-opt{display:flex;align-items:center;gap:10px;padding:15px 14px;border-radius:16px;background:#ffffff07;border:1.5px solid var(--line);font-weight:650;font-size:15px;color:var(--ink);text-align:left;transition:border-color .2s,background .2s,transform .15s}
.wz-opt:active{transform:scale(.97)}
.wz-opt .i{width:20px;height:20px;color:var(--muted)}
.wz-opt.on{border-color:var(--violet);background:#7555F61f}
.wz-opt.on .i{color:var(--lilac)}
.wz-note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:#7555F614;border:1px solid #8C71FF33;font-size:13.5px;line-height:1.4;color:var(--ink);margin-bottom:12px}
.wz-note .i{width:18px;height:18px;flex:none;color:var(--lilac);margin-top:1px}
.wz-apps{display:grid;gap:9px;margin-bottom:16px}
.wz-app{width:46px;height:46px;border-radius:13px;flex:none;object-fit:cover}
.wz-app.incy{display:grid;place-items:center;background:linear-gradient(160deg,#1d3b1f,#0c1a0d);border:1px solid #6BE36B55;color:#9CF07A;font:800 12px/1 var(--display,system-ui);letter-spacing:.04em}
.wz-tag{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:7px;background:#5BE3B022;color:var(--ok);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;vertical-align:2px}
.wz-stores{display:grid;gap:9px;margin-bottom:9px}
.wz-back{display:block;width:100%;margin-top:6px;padding:12px;color:var(--muted);font-weight:600;font-size:14.5px}