:root{
  --bg:#000;
  --surface:rgba(255,255,255,.05);
  --raised:rgba(255,255,255,.085);
  --hover:rgba(255,255,255,.13);
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.15);
  --text:#f4f7fb;
  --muted:#9aa6b8;
  --dim:#6b7789;
  --accent-wash:rgba(47,111,235,.2);
  --r-s:14px;
  --r-m:22px;
  --r-l:30px;
  --tab-h:84px;
  --spring:cubic-bezier(.34,1.5,.5,1);
  --glass:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));
  --rim:inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(255,255,255,.04),inset 0 0 0 .5px rgba(255,255,255,.06);
  --lift:0 14px 34px -14px rgba(0,0,0,.9);
}
html,body{background:#000}
.shell{position:relative;background:transparent}
.shell::before,.shell::after{content:"";position:fixed;z-index:0;pointer-events:none;border-radius:50%;filter:blur(70px);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.shell::before{width:340px;height:340px;left:-120px;top:-90px;background:rgba(47,111,235,.38);transform:translate(calc(var(--shift,0)*60px),calc(var(--shift,0)*30px))}
.shell::after{width:300px;height:300px;right:-130px;bottom:60px;background:rgba(98,64,232,.26);transform:translate(calc(var(--shift,0)*-50px),calc(var(--shift,0)*-24px))}
.app{background:transparent;border-inline:0;z-index:1}

.top{transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent;position:relative;z-index:5}
.top.scrolled{background:rgba(0,0,0,.55);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom-color:rgba(255,255,255,.07)}

.card,.group,.hero,.chip,.seg,.plan,.loc,.method,.kv,.notice,.empty,.mono,.item,.facts,.bal,.faq{
  background:var(--glass);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  box-shadow:var(--rim),var(--lift);
}
.empty{border-style:solid}
.hero{background:linear-gradient(160deg,rgba(91,155,255,.2) 0%,rgba(255,255,255,.05) 45%,rgba(255,255,255,.025) 100%)}
.hero::after{background:radial-gradient(closest-side,rgba(91,155,255,.3),transparent)}
.facts{gap:1px;background:rgba(255,255,255,.07)}
.facts div{background:transparent}
.facts{backdrop-filter:blur(22px) saturate(170%)}
.row{border-top-color:rgba(255,255,255,.07)}
button.row:hover,a.row:hover{background:rgba(255,255,255,.06)}
button.row:active,a.row:active{background:rgba(255,255,255,.1)}
.row .ic,.method .ic{border-radius:13px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);width:38px;height:38px}
.cc{border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.tag{border-radius:999px;padding:3px 10px}
.save{border-radius:999px;padding:2px 8px}

.chip{border-radius:999px;height:38px;padding:0 15px}
.btn{border-radius:999px;height:50px;padding:0 22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.btn:hover{background:rgba(255,255,255,.15)}
.btn.pri{background:linear-gradient(180deg,#5b9bff 0%,#2f6feb 55%,#2358d6 100%);border-color:rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 26px -8px rgba(47,111,235,.8)}
.btn.pri:hover{background:linear-gradient(180deg,#6aa5ff 0%,#3b7bf7 55%,#2a62e4 100%)}
.btn.ghost{background:transparent;box-shadow:none;backdrop-filter:none}
.btn.sm{height:40px;padding:0 16px}
.links button{border-radius:999px}

.seg{border-radius:999px;padding:4px}
.seg button{border-radius:999px;height:40px}
.seg i{border-radius:999px;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/var(--n,2));background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 14px -4px rgba(0,0,0,.7);transition:transform .5s var(--spring)}

.plan.on,.loc.on{border-color:rgba(120,170,255,.65);background:linear-gradient(180deg,rgba(91,155,255,.3),rgba(47,111,235,.1));box-shadow:var(--rim),0 0 0 1px rgba(91,155,255,.25),0 12px 34px -10px rgba(47,111,235,.55)}
.plan:active,.loc:active,.method:active,.card:active{transform:scale(.985)}
.plan,.loc,.method{transition:border-color .25s,background .25s,transform .35s var(--spring),box-shadow .25s}
.gauge i{background:rgba(255,255,255,.1)}

.buy{border-radius:26px;background:rgba(16,20,28,.6);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);border-color:rgba(255,255,255,.14);box-shadow:var(--rim),0 18px 40px -12px rgba(0,0,0,.9)}

.veil{background:rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sheet{background:linear-gradient(180deg,rgba(40,46,60,.78),rgba(14,17,24,.88));backdrop-filter:blur(44px) saturate(190%);-webkit-backdrop-filter:blur(44px) saturate(190%);border:1px solid rgba(255,255,255,.14);border-bottom:0;border-radius:36px 36px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 -20px 60px -10px rgba(0,0,0,.8);transition:transform .55s var(--spring)}
.grab{background:rgba(255,255,255,.3);width:38px}
.sheet-h .x{border-radius:50%;background:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.sheet-h .x:hover{background:rgba(255,255,255,.18)}
.toast{border-radius:999px;background:rgba(30,36,48,.7);backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);border-color:rgba(255,255,255,.16);box-shadow:var(--rim),0 14px 34px -10px rgba(0,0,0,.85)}
.qrbox{border-radius:22px}
.av{border-radius:50%}

.ei{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;position:relative;vertical-align:middle}
.ei>svg.i{grid-area:1/1;width:100%;height:100%}
.ei>video,.ei>img,.ei>.lot{grid-area:1/1;width:100%;height:100%;object-fit:contain;pointer-events:none;display:none}
.ei.m>svg.i{display:none}
.ei.m>video,.ei.m>img,.ei.m>.lot{display:block}
.ei>.lot svg{width:100%;height:100%;display:block}
.row .ic .ei,.method .ic .ei{width:26px;height:26px}
.btn .ei{width:21px;height:21px}
.links .ei{width:18px;height:18px}
.chip .ei{width:20px;height:20px}
.seg .ei{width:20px;height:20px}

.bar{left:14px;right:14px;bottom:calc(10px + var(--safe-b));height:68px;padding:5px;border:1px solid rgba(255,255,255,.14);border-radius:40px;background:linear-gradient(180deg,rgba(60,66,82,.42),rgba(16,19,27,.5));backdrop-filter:blur(30px) saturate(200%);-webkit-backdrop-filter:blur(30px) saturate(200%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(255,255,255,.05),0 22px 50px -12px rgba(0,0,0,.95),0 0 0 .5px rgba(0,0,0,.6);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;max-width:452px;margin-inline:auto}
.bar button{position:relative;z-index:2;gap:1px;font-size:10.5px;font-weight:600;letter-spacing:.01em;color:var(--muted);transition:color .25s}
.bar button.on{color:#fff}
.bar button.on svg.i{color:var(--accent-hi)}
.bar .ei{width:28px;height:28px;transition:transform .45s var(--spring),filter .3s,opacity .3s}
.bar button:not(.on) .ei{filter:grayscale(1) brightness(.85);opacity:.62}
.bar button.on .ei{transform:translateY(-1px) scale(1.14)}
.bar{grid-template-columns:repeat(var(--n,4),1fr)}
.bar .thumb{--tx:0px;--sx:1;--sy:1;position:absolute;z-index:1;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/var(--n,4));border-radius:36px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.09));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -8px 14px -8px rgba(91,155,255,.35),0 6px 18px -6px rgba(0,0,0,.8);
  translate:var(--tx) 0;scale:var(--sx) var(--sy);
  transition:translate .55s var(--spring),scale .4s var(--spring),background .3s,box-shadow .3s}
.bar .thumb.drag{transition:scale .4s var(--spring),background .3s,box-shadow .3s}
.bar .thumb.lift{--sx:1.16;--sy:1.12;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.14));box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -10px 18px -8px rgba(91,155,255,.5),0 14px 32px -8px rgba(47,111,235,.55)}
.bar.pressed .ei{transition-duration:.2s}

.tab.on.r{animation:slideR .42s cubic-bezier(.2,.8,.2,1)}
.tab.on.l{animation:slideL .42s cubic-bezier(.2,.8,.2,1)}
@keyframes slideR{from{opacity:0;transform:translateX(34px) scale(.985)}to{opacity:1;transform:none}}
@keyframes slideL{from{opacity:0;transform:translateX(-34px) scale(.985)}to{opacity:1;transform:none}}
.scroll .tab{transition:transform .35s var(--spring)}

.ptr{position:fixed;left:50%;top:calc(var(--safe-t) + 60px);z-index:30;width:40px;height:40px;margin-left:-20px;border-radius:50%;display:grid;place-items:center;background:rgba(40,46,60,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.18);box-shadow:var(--rim),0 10px 24px -8px rgba(0,0,0,.8);opacity:0;transform:translateY(-30px) scale(.6);transition:opacity .25s,transform .35s var(--spring);pointer-events:none}
.ptr.go{color:var(--accent-hi)}
.ptr.spin svg{animation:rot .8s linear infinite}
.ptr svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}

@media (prefers-reduced-motion:reduce){
  .shell::before,.shell::after{transition:none}
  .bar .thumb,.bar .ei,.sheet,.seg i,.tab.on.r,.tab.on.l{transition:none;animation:none}
}
@supports not (backdrop-filter:blur(1px)) and (not (-webkit-backdrop-filter:blur(1px))){
  .card,.group,.hero,.item,.bar,.sheet,.buy{background:#0d1118}
}

/* flags */
.fl{width:40px;height:40px;border-radius:13px;flex:none;position:relative;overflow:hidden;display:inline-grid;place-items:center;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 6px 14px -6px rgba(0,0,0,.85);font-weight:650;font-size:13px;letter-spacing:.02em;color:var(--accent-hi);perspective:140px;isolation:isolate}
.fl.lg{width:48px;height:48px;border-radius:16px}
.fl.sm{width:28px;height:28px;border-radius:9px;font-size:10px}
.fl img{position:absolute;left:-10%;top:-10%;width:120%;height:120%;max-width:none;object-fit:cover;display:block;animation:flagWave 3.8s ease-in-out infinite;transform-origin:50% 50%}
.fl:not(.nf)::before{content:"";position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 5px,rgba(255,255,255,.1) 5px 10px,rgba(0,0,0,.2) 10px 15px);background-size:30px 100%;mix-blend-mode:soft-light;animation:flagRipple 2.4s linear infinite}
.fl:not(.nf)::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.42) 48%,transparent 64%);background-size:280% 100%;animation:flagSheen 3.8s ease-in-out infinite}
@keyframes flagWave{0%,100%{transform:rotateY(-12deg) skewY(-3deg) scale(1.02)}50%{transform:rotateY(12deg) skewY(3deg) scale(1.07)}}
@keyframes flagRipple{to{background-position:30px 0}}
@keyframes flagSheen{0%{background-position:135% 0}100%{background-position:-70% 0}}
.loc .fl{width:32px;height:32px;border-radius:11px;font-size:11px}
.row .fl{width:36px;height:36px;border-radius:12px}
.flagrow{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.cc.lg{width:48px;height:48px}

/* manage sheet */
.manage{display:flex;align-items:center;gap:10px;width:100%;height:46px;margin-top:10px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--muted);font-weight:550;font-size:14.5px;transition:background .2s,color .2s,transform .3s var(--spring)}
.manage>span:not(.ei){flex:1;text-align:left;white-space:nowrap}
.manage:hover{background:rgba(255,255,255,.1);color:var(--text)}
.manage:active{transform:scale(.98)}
.manage .ei{width:20px;height:20px}
.manage>svg:last-child{width:16px;height:16px;color:var(--dim)}
.mg-h{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.mg-h .tx{flex:1;min-width:0}
.mg-h .tx b{display:block;font-size:17px;font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-h .tx small{color:var(--muted);font-size:13px}
.live{display:flex;align-items:center;gap:10px;padding:10px 14px;margin:0 0 14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:13.5px;color:var(--muted)}
.row.danger .ic{background:rgba(255,102,116,.14);box-shadow:inset 0 1px 0 rgba(255,102,116,.25)}
.warnbox{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:20px;border:1px solid rgba(240,178,75,.35);background:linear-gradient(180deg,rgba(240,178,75,.14),rgba(240,178,75,.05))}
.warnbox>.ei,.warnbox>svg{margin-top:2px}
.warnbox b{display:block;font-weight:620}
.warnbox small{display:block;color:var(--muted);font-size:13.5px;margin-top:3px}
.why{margin:14px 0 0;padding:0 0 0 18px;color:var(--muted);font-size:13.5px;display:grid;gap:6px}

/* roulette */
.rl{display:grid;gap:4px}
.rl-stage{position:relative;width:min(300px,76vw,44vh);aspect-ratio:1;margin:8px auto 14px;filter:drop-shadow(0 22px 44px rgba(47,111,235,.4))}
.rl-spin{position:absolute;inset:0}
.rl-spin.idle{animation:rlIdle 36s linear infinite}
.rl-spin.off{filter:saturate(.35) brightness(.75)}
@keyframes rlIdle{to{transform:rotate(360deg)}}
.rl-wheel{width:100%;height:100%;will-change:transform}
.wheel-svg{width:100%;height:100%;display:block}
.bulb{fill:#fff;opacity:.9;animation:bulb 1.3s ease-in-out infinite alternate}
@keyframes bulb{from{opacity:.25}to{opacity:1}}
.rl-pin{position:absolute;left:50%;top:-8px;width:28px;height:34px;margin-left:-14px;z-index:4;background:linear-gradient(180deg,#fff,#b8c4d8);clip-path:polygon(50% 100%,2% 22%,16% 0,84% 0,98% 22%);filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.rl-hub{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;z-index:3;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 20px -6px rgba(0,0,0,.8);transition:transform .3s var(--spring)}
.rl-hub:active{transform:scale(.92)}
.rl-hub[disabled]{opacity:.6}
.rl-hub .ei{width:28px;height:28px}
.prize{text-align:center;margin-bottom:12px;min-height:56px}
.prize b{display:block;font-size:19px;font-weight:650;letter-spacing:-.01em}
.prize b.win{font-size:24px;color:#fff;text-shadow:0 0 24px rgba(91,155,255,.8);animation:winPop .6s var(--spring)}
@keyframes winPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.confetti{position:absolute;inset:0;pointer-events:none;z-index:6}
.confetti i{position:absolute;left:50%;top:40%;border-radius:2px;animation:conf 1.4s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes conf{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(var(--dx),calc(var(--dy) + 150px)) rotate(var(--r));opacity:0}}
.sheet{position:relative}

/* promo */
.promo{display:grid;gap:4px;min-width:0}
.promo>*{min-width:0}
.promo-ic{width:72px;height:72px;margin:6px auto 10px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(180deg,rgba(91,155,255,.35),rgba(47,111,235,.12));border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 34px -12px rgba(47,111,235,.7);animation:float 4s ease-in-out infinite}
.promo-ic .ei{width:40px;height:40px}
@keyframes float{50%{transform:translateY(-5px) rotate(-3deg)}}
.ticket{position:relative;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 18px;border-radius:22px;background:rgba(255,255,255,.06);border:1.5px dashed rgba(255,255,255,.22);transition:border-color .25s,box-shadow .25s}
.ticket:focus-within{border-color:rgba(120,170,255,.8);box-shadow:0 0 0 4px rgba(91,155,255,.18)}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#0b0e15;border:1px solid rgba(255,255,255,.14)}
.ticket::before{left:-8px}.ticket::after{right:-8px}
.ticket .code{flex:1;min-width:0;width:0;height:48px;background:transparent;border:0;outline:0;color:var(--text);font:600 19px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase}
.ticket .code::placeholder{color:var(--dim);letter-spacing:.2em}
.ticket .paste{height:40px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);font-weight:600;font-size:13.5px;color:var(--accent-hi)}
.ticket.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.field{border-radius:18px}

/* adaptive */
:root{
  --gut:clamp(12px,4.2vw,20px);
  --safe-t:calc(env(safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px));
  --safe-b:max(env(safe-area-inset-bottom,0px),var(--tg-safe-area-inset-bottom,0px));
}
html,body{height:100dvh}
.shell,.app{height:100dvh;height:var(--tg-viewport-stable-height,100dvh)}
.top{padding-inline:var(--gut)}
.tab{padding-inline:var(--gut)}
.bar{left:max(var(--gut),env(safe-area-inset-left,0px));right:max(var(--gut),env(safe-area-inset-right,0px))}
@media (max-width:360px){
  body{font-size:14px}
  .h1{font-size:23px}
  .big strong{font-size:46px}
  .btn{height:46px;padding:0 16px;font-size:14.5px}
  .btns>.btn{flex-basis:100%}
  .plan{padding:11px 12px}
  .locs{grid-template-columns:1fr}
  .facts b{font-size:13.5px}
  .bar{height:62px}
  .bar button{font-size:10px}
  .bar .ei{width:25px;height:25px}
  .sheet-b{padding-inline:14px}
  .row{padding:9px 12px;gap:10px}
}
@media (max-width:320px){
  .brand{font-size:15px}
  .chip{padding:0 11px}
  .links button{font-size:12.5px}
  .buy .btn{min-width:108px}
}
@media (max-height:560px){
  :root{--tab-h:68px}
  .bar{height:54px;bottom:calc(6px + var(--safe-b))}
  .bar button{font-size:0;gap:0}
  .bar .ei{width:26px;height:26px}
  .rl-stage{width:min(220px,50vh)}
  .big strong{font-size:44px}
  .top{padding-top:calc(6px + var(--safe-t));padding-bottom:6px}
}
@media (min-width:700px){
  .app{max-width:560px}
  .bar{max-width:520px}
  .veil{align-items:center}
  .sheet{max-width:520px;border-radius:34px;border-bottom:1px solid rgba(255,255,255,.14);max-height:86%}
  .tab{padding-top:14px}
}
@media (min-width:1100px){
  body{font-size:16px}
  .app{max-width:600px}
  .shell::before{left:12%}
}
@media (hover:none){button.row:hover,a.row:hover,.btn:hover,.manage:hover{background:inherit}}
@media (prefers-reduced-motion:reduce){
  .fl img,.fl::before,.fl::after,.rl-spin.idle,.bulb,.promo-ic{animation:none}
}

/* performance: blur only on floating layers */
.card,.group,.hero,.chip,.seg,.plan,.loc,.method,.kv,.notice,.empty,.mono,.item,.facts,.bal,.faq,.btn,.buy{-webkit-backdrop-filter:none;backdrop-filter:none}
.card,.group,.hero,.plan,.loc,.method,.kv,.notice,.empty,.item,.bal,.faq{background:rgba(30,34,44,.78)}
.btn{background:rgba(255,255,255,.12)}.btn.pri{background:var(--accent)}
.buy{background:rgba(20,24,32,.94)}
.veil{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.6)}
.sheet{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:linear-gradient(180deg,rgba(38,43,56,.94),rgba(14,17,24,.97))}
.bar{-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)}
.tab{contain:layout style}
.scroll{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.fl img{animation:none}
.fl::before,.fl::after{display:none!important}
.hero .fl img,.fl.lg img{animation:flagWave 4s ease-in-out infinite;will-change:transform}
.hero .fl.lg::after{display:block!important;animation:flagSheen 4s ease-in-out infinite}
.item .fl img{animation:none}
.gauge.live i{animation-delay:0ms}
@media (hover:none){.tab.on.r,.tab.on.l{animation-duration:.3s}}
.hidden{display:none!important}

/* brand mark */
.brand .mk{width:30px;height:30px;flex:none;display:block}
.brand{gap:9px}

/* auth */
.auth{position:relative;z-index:1;min-height:100%;display:grid;grid-template-columns:minmax(0,480px);justify-content:center;align-items:center;padding:24px 16px calc(24px + var(--safe-b))}
.auth-card{width:100%;max-width:480px;min-height:640px;display:flex;flex-direction:column;justify-content:flex-start;padding:44px 32px 34px;border-radius:34px;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04) 60%);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 40px 80px -30px rgba(0,0,0,.8),0 5px 0 rgba(0,0,0,.3)}
.auth .mk{width:76px;height:76px;margin:0 auto 22px;display:block;filter:drop-shadow(0 10px 24px rgba(47,111,235,.55))}
.auth h1{text-align:center;font-size:30px;margin:0 0 26px;letter-spacing:-.02em}
.auth p.sub{text-align:center;margin:0 0 26px;font-size:16px;min-height:22px}
.auth .seg{margin-bottom:20px!important}
.auth .fld{width:100%;height:58px;border-radius:18px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:var(--text);padding:0 18px;font:inherit;font-size:17px;margin-bottom:12px;outline:none;transition:border-color .2s,background .2s}
@media (max-width:520px){.auth{padding:12px}.auth-card{min-height:calc(100dvh - 24px);border-radius:28px;padding:36px 22px 28px}}
.auth .fld:focus{border-color:var(--accent-hi)}
.auth .code{text-align:center;letter-spacing:.5em;font-size:24px;font-weight:600}
.auth .btn{width:100%;height:56px;font-size:17px;margin-top:4px;justify-content:center}
.auth .or{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:13px;margin:16px 0}
.auth .or::before,.auth .or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.1)}
.auth .err{color:var(--bad);font-size:14px;text-align:center;min-height:20px;margin:2px 0 6px}
.auth .lnk{background:none;border:0;color:var(--accent-hi);font:inherit;font-size:14px;margin:12px auto 0;display:block;cursor:pointer}

/* chat */
.tchat{display:flex;flex-direction:column;height:min(70vh,560px)}
.tchat-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 2px 10px;overscroll-behavior:contain}
.cm{max-width:82%;padding:9px 13px;border-radius:19px;font-size:15px;line-height:1.35;white-space:pre-wrap;word-break:break-word;animation:msgIn .22s var(--ease)}
.cm time{display:block;font-size:11px;opacity:.55;margin-top:3px}
.cm.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:6px}
.cm.them{align-self:flex-start;background:rgba(255,255,255,.1);border-bottom-left-radius:6px}
.cm.pend{opacity:.55}
.tchat-empty{margin:auto;text-align:center;color:var(--muted);font-size:14px;padding:0 20px}
.typing{height:18px;font-size:12px;color:var(--muted);padding-left:6px}
.typing i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--muted);margin-right:3px;animation:tdot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
.tchat-in{display:flex;gap:8px;align-items:flex-end;padding-top:6px}
.tchat-in textarea{flex:1;min-width:0;max-height:110px;resize:none;border-radius:20px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:var(--text);font:inherit;font-size:16px;padding:11px 15px;outline:none;line-height:1.3}
.tchat-in button{width:44px;height:44px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.tchat-in button svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dim);margin-right:6px}
.live-dot.on{background:var(--ok)}
@keyframes msgIn{from{opacity:0;transform:translateY(6px) scale(.97)}}
@keyframes tdot{0%,60%,100%{opacity:.3}30%{opacity:1}}
.cm{display:flex;flex-direction:column}
.cm time{white-space:nowrap;align-self:flex-end}

.hero .btns{display:flex;gap:10px}.hero .btns .btn{flex:1 1 0;min-width:0;padding:0 14px;white-space:nowrap;justify-content:center}

/* wordmark */
.wm{display:inline-flex;align-items:baseline;white-space:nowrap;letter-spacing:-.02em}
.brand .wm span{color:var(--accent-hi);font-weight:700}
.brand .role{margin-left:4px;padding:2px 9px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--muted);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
.logo .wm span{color:var(--blue);font-weight:700}

/* custom scrollbars: no arrows, thin pill thumb */
*{scrollbar-width:none}
*::-webkit-scrollbar{width:0;height:0}
textarea,.tchat-log{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
textarea::-webkit-scrollbar,.tchat-log::-webkit-scrollbar{width:6px;height:6px}
textarea::-webkit-scrollbar-button,.tchat-log::-webkit-scrollbar-button{display:none;width:0;height:0}
textarea::-webkit-scrollbar-track,.tchat-log::-webkit-scrollbar-track{background:transparent}
textarea::-webkit-scrollbar-thumb,.tchat-log::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
textarea{resize:none;overflow-y:auto}
textarea::-webkit-resizer{display:none}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

/* close ticket */
.tclose{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:var(--muted);font:500 14.5px/1 inherit;font-family:inherit;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s}
.tclose .ei,.tclose svg{width:18px;height:18px}
.tclose:hover{background:rgba(255,255,255,.1);color:var(--text)}
.tclose:active{transform:scale(.98)}
.tclose.arm{background:rgba(63,214,163,.14);border-color:rgba(63,214,163,.45);color:var(--ok)}
.tclose:disabled{opacity:.5}
.cm{flex:none}.tchat-log{min-height:0}.tclose .tt{min-width:0}

.apps{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 6px}
.appb{display:flex;align-items:center;justify-content:center;height:50px;padding:0 10px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);font-weight:600;font-size:15px;transition:background .2s,transform .15s}
.appb:hover{background:rgba(255,255,255,.12)}.appb:active{transform:scale(.97)}.appb:disabled{opacity:.4}
.hint{color:var(--muted);font-size:13.5px;margin:12px 0 0;line-height:1.4}
.apps .appb:last-child:nth-child(odd){grid-column:1/-1}

@keyframes drift-a{0%,100%{translate:0 0}33%{translate:90px 60px}66%{translate:40px 140px}}
@keyframes drift-b{0%,100%{translate:0 0}40%{translate:-80px -70px}75%{translate:-30px -130px}}
.shell::before{animation:drift-a 22s ease-in-out infinite;will-change:translate}
.shell::after{animation:drift-b 28s ease-in-out infinite;will-change:translate}
@media (prefers-reduced-motion:reduce){.shell::before,.shell::after{animation:none}}

.appb{gap:10px;justify-content:flex-start;padding:0 12px 0 10px}
.appb .al{width:34px;height:34px;border-radius:10px;flex:none;object-fit:cover}
.appb .al.mono{display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;background:linear-gradient(145deg,var(--a),var(--b));box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.appb span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* скроллбар */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{min-height:44px;border-radius:999px;border:3px solid transparent;background:linear-gradient(180deg,#5b9bff,#2358d6) padding-box}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#7db0ff,#2f6feb) padding-box}
@supports not selector(::-webkit-scrollbar){html,*{scrollbar-width:thin;scrollbar-color:#3f78e0 transparent}}

.bgnet{display:none}

.al.mono{position:relative;overflow:hidden}
.al.mono img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.al.mono.has{background:none!important;box-shadow:none!important;border:0!important;color:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}