:root{
  color-scheme:dark;
  --bg:#07090d;--bg2:#0c1118;--panel:rgba(15,19,27,.78);--panel-solid:#11161f;
  --text:#f5f7fb;--muted:#8e98a9;--line:rgba(255,255,255,.095);
  --blue:#2aabee;--blue2:#4cc2ff;--cyan:#7be1ff;--green:#46d69a;--red:#ff7584;
  --mx:50%;--my:50%;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{min-height:100vh;overflow-x:hidden}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
.splash{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#07090d;transition:opacity .55s cubic-bezier(.22,1,.36,1),visibility .55s}
.splash-core{position:relative;width:180px;height:180px;display:grid;place-items:center}
.splash-logo{position:relative;z-index:3;width:62px;height:62px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(145deg,#4dc8ff,#209fe7);color:white;box-shadow:0 18px 50px rgba(42,171,238,.25);animation:logoIn .75s cubic-bezier(.2,.9,.2,1) both}
.splash-logo svg{width:34px;height:34px}
.splash-ring{position:absolute;inset:38px;border:1px solid rgba(76,194,255,.25);border-radius:50%;animation:ring 1.7s cubic-bezier(.2,.8,.2,1) infinite}
.splash-ring.r2{inset:22px;animation-delay:.32s;opacity:.45}
.splash-word{position:absolute;top:132px;font-size:18px;font-weight:800;letter-spacing:.02em;opacity:0;animation:wordIn .5s .45s ease forwards}
.splash-line{position:absolute;top:164px;width:76px;height:2px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.splash-line i{display:block;width:44%;height:100%;background:linear-gradient(90deg,transparent,var(--blue2),transparent);animation:load 1.1s ease-in-out infinite}
body.ready .splash{opacity:0;visibility:hidden;pointer-events:none}
@keyframes logoIn{0%{opacity:0;transform:scale(.45) rotate(-12deg);filter:blur(10px)}70%{transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:none;filter:none}}
@keyframes ring{0%{transform:scale(.6);opacity:.55}75%,100%{transform:scale(1.55);opacity:0}}
@keyframes wordIn{to{opacity:1;transform:translateY(-2px)}}
@keyframes load{0%{transform:translateX(-160%)}100%{transform:translateX(280%)}}

.motion-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.20;will-change:transform}
.orb-a{width:440px;height:440px;left:-120px;top:-100px;background:#164b92;animation:floatA 16s ease-in-out infinite alternate}
.orb-b{width:520px;height:520px;right:-180px;top:20%;background:#0aa6b8;animation:floatB 20s ease-in-out infinite alternate}
.orb-c{width:360px;height:360px;left:38%;bottom:-160px;background:#4d2a9b;animation:floatC 18s ease-in-out infinite alternate}
.mesh{position:absolute;inset:0;background:
  radial-gradient(circle at var(--mx) var(--my),rgba(42,171,238,.105),transparent 20%),
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:auto,44px 44px,44px 44px;
  mask-image:linear-gradient(to bottom,transparent,#000 13%,#000 86%,transparent)}
.noise{position:absolute;inset:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
@keyframes floatA{to{transform:translate(90px,80px) scale(1.08)}}
@keyframes floatB{to{transform:translate(-120px,-60px) scale(.88)}}
@keyframes floatC{to{transform:translate(70px,-80px) scale(1.14)}}

.app-shell{position:relative;z-index:2;min-height:100vh;opacity:0;transform:translateY(14px);transition:opacity .7s .18s ease,transform .7s .18s cubic-bezier(.2,.8,.2,1)}
body.ready .app-shell{opacity:1;transform:none}
.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,56px);border-bottom:1px solid rgba(255,255,255,.055);backdrop-filter:blur(18px);background:rgba(7,9,13,.38)}
.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(145deg,#48c6ff,#1e9add);color:white;box-shadow:0 10px 30px rgba(42,171,238,.17)}
.brand-mark svg{width:23px;height:23px}
.brand-copy{display:flex;align-items:baseline;gap:5px}
.brand-copy b{font-size:17px;letter-spacing:-.02em}
.brand-copy small{font-size:12px;color:var(--muted);font-weight:650}
.top-actions{display:flex;align-items:center;gap:10px}
.secure-badge{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.035);font-size:12px;color:#b7c0ce}
.secure-badge i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(70,214,154,.08)}
.lang{height:34px;min-width:42px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.035);color:#d8dee8;font-size:12px;font-weight:800}

.main{min-height:calc(100vh - 78px);display:grid;place-items:start center;padding:clamp(26px,5vw,64px) 18px 52px}
.connect-wrap{width:min(100%,580px)}
.connect-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.105);border-radius:30px;background:linear-gradient(180deg,rgba(18,24,34,.86),rgba(11,15,22,.84));box-shadow:0 32px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(26px);transform-origin:50% 20%;animation:cardIn .75s .42s cubic-bezier(.18,.9,.22,1) both}
@keyframes cardIn{0%{opacity:0;transform:translateY(26px) scale(.965)}100%{opacity:1;transform:none}}
.card-glow{position:absolute;width:280px;height:280px;right:-110px;top:-140px;border-radius:50%;background:rgba(42,171,238,.13);filter:blur(30px);pointer-events:none}
.card-head{position:relative;display:flex;align-items:center;justify-content:space-between;padding:28px 28px 22px}
.overline{display:block;font-size:10px;font-weight:850;letter-spacing:.16em;color:#6f7d90;margin-bottom:8px}
.card-head h1{margin:0;font-size:28px;line-height:1.05;letter-spacing:-.04em}
.card-head p{margin:8px 0 0;color:var(--muted);font-size:13px}
.telegram-orbit{position:relative;width:64px;height:64px;display:grid;place-items:center;flex:none}
.orbit-track{position:absolute;inset:3px;border:1px solid rgba(76,194,255,.18);border-radius:50%;animation:orbitPulse 3s ease-in-out infinite}
.tg-disc{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#3ebcf7,#1e96dc);color:white;box-shadow:0 13px 30px rgba(42,171,238,.2)}
.tg-disc svg{width:24px;height:24px}
@keyframes orbitPulse{50%{transform:scale(1.14);opacity:.35}}

.method-tabs{position:relative;margin:0 22px;padding:4px;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:16px;background:rgba(3,5,8,.42);overflow:hidden}
.method-tab{position:relative;z-index:2;height:46px;display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-radius:12px;background:transparent;color:#7f8a9a;font-size:13px;font-weight:800;transition:color .25s ease}
.method-tab svg{width:19px;height:19px}
.method-tab.active{color:#f6f8fb}
.tab-slider{position:absolute;z-index:1;left:4px;top:4px;width:calc(50% - 4px);height:46px;border-radius:12px;background:linear-gradient(180deg,rgba(55,72,94,.70),rgba(32,42,57,.78));box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 24px rgba(0,0,0,.22);transition:transform .36s cubic-bezier(.2,.85,.2,1)}
.method-tabs.qr .tab-slider{transform:translateX(100%)}

.method-area{position:relative;min-height:358px;padding:24px 28px 28px}
.method-panel,.success-panel{display:none}
.method-panel.active{display:block;animation:panelIn .35s cubic-bezier(.2,.8,.2,1)}
@keyframes panelIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.stage,.qr-stage{display:none}
.stage.active,.qr-stage.active{display:block;animation:stageIn .36s cubic-bezier(.2,.8,.2,1)}
@keyframes stageIn{from{opacity:0;transform:translateY(12px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.stage-title{margin-bottom:21px}
.stage-title.centered{text-align:center}
.stage-title.compact{margin-bottom:14px}
.stage-title h2{font-size:20px;letter-spacing:-.025em;margin:0 0 7px}
.stage-title p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.stage-back{display:inline-flex;align-items:center;gap:5px;padding:0;margin:0 0 18px;border:0;background:transparent;color:#8290a2;font-size:12px;font-weight:750}
.stage-back svg{width:16px;height:16px}
.step-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;margin-bottom:16px;background:rgba(42,171,238,.11);border:1px solid rgba(42,171,238,.18);color:#55c5ff}
.step-icon svg{width:22px;height:22px}
.step-icon.pulse{animation:softPulse 2s ease-in-out infinite}
.step-icon.warning{margin-left:auto;margin-right:auto;color:#ffc56f;background:rgba(255,177,80,.09);border-color:rgba(255,177,80,.2);font-weight:900;font-size:19px}
@keyframes softPulse{50%{box-shadow:0 0 0 9px rgba(42,171,238,.04)}}
.field{display:block;margin-bottom:14px}
.field>span{display:block;margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.02em;color:#aab4c3}
.input-shell{position:relative}
.input-shell>svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#687589;pointer-events:none}
input{width:100%;height:56px;border:1px solid rgba(255,255,255,.10);border-radius:15px;background:rgba(3,6,10,.46);color:#f8fafc;outline:none;padding:0 16px;font-size:15px;transition:border .2s,box-shadow .2s,background .2s}
.input-shell input{padding-left:45px}
input::placeholder{color:#556070}
input:focus{border-color:rgba(76,194,255,.55);background:rgba(9,15,22,.68);box-shadow:0 0 0 4px rgba(42,171,238,.075)}
.code-input{text-align:center;font-size:22px;font-weight:800;letter-spacing:.26em;padding-left:28px}
.eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:#738095}
.primary{width:100%;height:54px;border:0;border-radius:15px;background:linear-gradient(180deg,#3ab9f3,#229adf);color:#fff;font-weight:850;font-size:14px;box-shadow:0 14px 30px rgba(24,142,206,.17),inset 0 1px 0 rgba(255,255,255,.17);transition:transform .18s,filter .18s,box-shadow .18s}
.primary:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 18px 34px rgba(24,142,206,.22),inset 0 1px 0 rgba(255,255,255,.18)}
.primary:active{transform:scale(.985)}
.primary:disabled{opacity:.55;cursor:wait;transform:none}
.action{display:flex;align-items:center;justify-content:center;gap:9px}
.action>svg{width:17px;height:17px;transition:transform .2s}
.action:hover>svg{transform:translateX(2px)}
.inline-status{display:none;margin-top:12px;padding:11px 13px;border-radius:12px;font-size:12px;line-height:1.45;border:1px solid transparent}
.inline-status.show{display:block;animation:statusIn .22s ease}
.inline-status.info{color:#a9ddf7;background:rgba(42,171,238,.07);border-color:rgba(42,171,238,.14)}
.inline-status.error{color:#ffb5bd;background:rgba(255,117,132,.07);border-color:rgba(255,117,132,.16)}
.inline-status.ok{color:#9aebc6;background:rgba(70,214,154,.07);border-color:rgba(70,214,154,.15)}
@keyframes statusIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.busy-dot{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.qr-preview{position:relative;width:190px;height:190px;margin:0 auto 20px;border-radius:26px;display:grid;place-items:center}
.idle-preview{background:linear-gradient(145deg,rgba(22,31,43,.72),rgba(8,12,18,.72));border:1px solid rgba(255,255,255,.08)}
.scan-corners i{position:absolute;width:30px;height:30px;border-color:#4cc2ff;opacity:.72}
.scan-corners i:nth-child(1){left:16px;top:16px;border-left:2px solid;border-top:2px solid;border-radius:7px 0 0 0}
.scan-corners i:nth-child(2){right:16px;top:16px;border-right:2px solid;border-top:2px solid;border-radius:0 7px 0 0}
.scan-corners i:nth-child(3){left:16px;bottom:16px;border-left:2px solid;border-bottom:2px solid;border-radius:0 0 0 7px}
.scan-corners i:nth-child(4){right:16px;bottom:16px;border-right:2px solid;border-bottom:2px solid;border-radius:0 0 7px 0}
.qr-mini{display:grid;grid-template-columns:repeat(3,18px);gap:7px;opacity:.30;animation:qrFloat 3s ease-in-out infinite}
.qr-mini span{width:18px;height:18px;background:#d4e7f5;border-radius:3px}
.qr-mini span:nth-child(2),.qr-mini span:nth-child(4),.qr-mini span:nth-child(8){opacity:.18}
@keyframes qrFloat{50%{transform:scale(1.05);opacity:.45}}
.live-preview{width:284px;height:284px;max-width:100%;background:#fff;padding:10px;border:1px solid rgba(255,255,255,.15);box-shadow:0 20px 50px rgba(0,0,0,.32);overflow:hidden}
.live-preview canvas{display:block;width:100%!important;height:100%!important;border-radius:15px}
.scan-line{position:absolute;z-index:3;left:18px;right:18px;height:2px;background:linear-gradient(90deg,transparent,#3ec4ff,transparent);box-shadow:0 0 15px rgba(62,196,255,.6);animation:scan 2.1s ease-in-out infinite alternate}
@keyframes scan{from{top:18px}to{top:calc(100% - 20px)}}
.secondary-action{display:flex;align-items:center;justify-content:center;width:100%;min-height:49px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.045);color:#e4e9f0;text-decoration:none;font-size:13px;font-weight:800;transition:.2s}
.secondary-action:hover{background:rgba(255,255,255,.075)}
.text-action{display:block;margin:12px auto 0;border:0;background:transparent;color:#718095;font-size:12px;font-weight:750}

.success-panel.active{display:block;text-align:center;padding:20px 0 4px;animation:successIn .55s cubic-bezier(.18,.9,.22,1)}
@keyframes successIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:none}}
.success-mark{width:68px;height:68px;margin:0 auto 18px;border-radius:22px;display:grid;place-items:center;background:rgba(70,214,154,.10);border:1px solid rgba(70,214,154,.20);color:var(--green);box-shadow:0 0 0 0 rgba(70,214,154,.12);animation:successPulse 1.4s .2s ease-out}
.success-mark svg{width:32px;height:32px}
@keyframes successPulse{0%{box-shadow:0 0 0 0 rgba(70,214,154,.20)}100%{box-shadow:0 0 0 22px rgba(70,214,154,0)}}
.success-panel h2{font-size:22px;margin:0 0 7px}
.success-panel>p{margin:0 0 18px;color:var(--muted);font-size:13px}
.account-card{margin:0 auto 18px;padding:14px 16px;text-align:left;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.035)}
.account-card b{display:block;font-size:14px}
.account-card span{display:block;margin-top:3px;color:var(--muted);font-size:11px}

.micro-info{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:14px}
.micro-info>span{display:flex;align-items:center;gap:7px;height:30px;padding:0 10px;border:1px solid rgba(255,255,255,.065);border-radius:999px;background:rgba(8,11,16,.42);color:#687588}
.micro-info svg{width:13px;height:13px}
.micro-info b{font-size:10px;font-weight:750}
.micro-info .green{width:6px;height:6px;border-radius:50%;background:var(--green)}
.micro-info .red{width:6px;height:6px;border-radius:50%;background:var(--red)}
.micro-info .checking{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:pulseDot 1s ease-in-out infinite}
@keyframes pulseDot{50%{opacity:.35}}

@media(max-width:640px){
  .topbar{height:68px;padding:0 15px}
  .secure-badge span{display:none}.secure-badge{width:34px;padding:0;justify-content:center}
  .main{min-height:calc(100vh - 68px);padding:22px 12px 34px;place-items:start center}
  .connect-card{border-radius:25px}
  .card-head{padding:23px 20px 19px}
  .card-head h1{font-size:25px}
  .card-head p{max-width:250px}
  .telegram-orbit{width:55px;height:55px}
  .tg-disc{width:42px;height:42px;border-radius:14px}
  .method-tabs{margin:0 16px}
  .method-area{min-height:365px;padding:22px 20px 24px}
  .live-preview{width:252px;height:252px}
  .micro-info{gap:6px}.micro-info>span{padding:0 8px}.micro-info b{font-size:9px}
}
@media(max-width:390px){
  .brand-copy small{display:none}
  .telegram-orbit{display:none}
  .card-head p{max-width:none}
  .method-area{padding-left:17px;padding-right:17px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Final motion polish */
.method-area{transition:filter .18s ease}
.inline-status.show{display:flex;align-items:flex-start;gap:9px;box-shadow:inset 0 1px rgba(255,255,255,.025)}
.inline-status.show:before{width:19px;height:19px;flex:0 0 19px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:950;margin-top:-1px}
.inline-status.info:before{content:"↗";background:rgba(42,171,238,.11);color:#67cfff}
.inline-status.error:before{content:"!";background:rgba(255,117,132,.12);color:#ff9ba7}
.inline-status.ok:before{content:"✓";background:rgba(70,214,154,.12);color:#81e4ba}
.inline-status.error.status-shake{animation:statusShake .34s cubic-bezier(.36,.07,.19,.97)}
@keyframes statusShake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}

#codeStage.code-received .step-icon{animation:codeIconPop .65s cubic-bezier(.16,1,.3,1),softPulse 2s .65s ease-in-out infinite}
#codeStage.code-received .code-input{animation:codeFieldGlow .9s cubic-bezier(.2,.8,.2,1)}
#codeStage.code-received .stage-title h2{animation:codeTitleIn .5s .06s cubic-bezier(.2,.8,.2,1) both}
@keyframes codeIconPop{0%{transform:scale(.55) rotate(-9deg);opacity:.15}60%{transform:scale(1.12) rotate(2deg)}100%{transform:none;opacity:1}}
@keyframes codeFieldGlow{0%{box-shadow:0 0 0 0 rgba(76,194,255,0)}35%{box-shadow:0 0 0 5px rgba(76,194,255,.09);border-color:rgba(76,194,255,.7)}100%{box-shadow:none}}
@keyframes codeTitleIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.code-input.code-pulse{animation:digitPulse .22s ease}
@keyframes digitPulse{50%{transform:scale(1.025);letter-spacing:.29em}}

.success-transfer{width:210px;height:72px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;gap:12px;position:relative}
.success-node{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-weight:950;position:relative;z-index:2;opacity:0}
.nex-node{background:linear-gradient(145deg,#5b687c,#2a3341);color:#f7f9fc;animation:nodeNex .6s .08s cubic-bezier(.16,1,.3,1) forwards}
.tg-node{background:linear-gradient(145deg,#49c4fb,#1c99df);color:#fff;box-shadow:0 12px 28px rgba(42,171,238,.18);animation:nodeTg .6s .46s cubic-bezier(.16,1,.3,1) forwards}
.tg-node svg{width:24px;height:24px}
.success-path{width:78px;height:20px;position:relative;display:block}
.success-path:before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(76,194,255,.55),rgba(255,255,255,.08));transform:scaleX(0);transform-origin:left;animation:pathDraw .48s .28s ease forwards}
.success-path i,.success-path b{position:absolute;top:5px;width:10px;height:10px;border-radius:50%;background:#62d0ff;box-shadow:0 0 14px rgba(76,194,255,.8);opacity:0}
.success-path i{animation:dataPacket 1.15s .45s cubic-bezier(.4,0,.2,1) forwards}
.success-path b{animation:dataPacket 1.15s .68s cubic-bezier(.4,0,.2,1) forwards}
@keyframes nodeNex{from{opacity:0;transform:translateX(10px) scale(.78)}to{opacity:1;transform:none}}
@keyframes nodeTg{from{opacity:0;transform:translateX(-10px) scale(.78)}to{opacity:1;transform:none}}
@keyframes pathDraw{to{transform:scaleX(1)}}
@keyframes dataPacket{0%{left:0;opacity:0;transform:scale(.55)}18%{opacity:1}82%{opacity:1}100%{left:68px;opacity:0;transform:scale(1.15)}}
.success-panel.active .success-mark{animation:successPop .52s .92s cubic-bezier(.16,1,.3,1) both,successPulse 1.4s 1.25s ease-out}
@keyframes successPop{from{opacity:0;transform:scale(.45) rotate(-8deg)}70%{transform:scale(1.08) rotate(2deg)}to{opacity:1;transform:none}}
.success-panel.active h2{animation:successTextIn .45s 1.02s ease both}
.success-panel.active>p{animation:successTextIn .45s 1.10s ease both}
.success-panel.active .account-card{animation:successTextIn .45s 1.18s ease both}
.success-panel.active .secondary-action{animation:successTextIn .45s 1.26s ease both}
@keyframes successTextIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.connect-card.success-glow{animation:connectedGlow 1.4s ease}
@keyframes connectedGlow{0%{box-shadow:0 32px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.04)}35%{box-shadow:0 32px 90px rgba(0,0,0,.42),0 0 0 1px rgba(70,214,154,.22),0 0 58px rgba(70,214,154,.10)}100%{box-shadow:0 32px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.04)}}
@media(prefers-reduced-motion:reduce){
  .success-node,.success-path:before,.success-path i,.success-path b{animation:none!important;opacity:1!important;transform:none!important}
  .success-path:before{transform:scaleX(1)!important}
}


/* Public side menu */
.top-left{display:flex;align-items:center;gap:14px;min-width:0}
.menu-toggle{width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.035);display:grid;place-content:center;gap:4px;padding:0;position:relative;z-index:72;transition:background .22s,border-color .22s,transform .22s}
.menu-toggle:hover{background:rgba(255,255,255,.065);border-color:rgba(76,194,255,.22)}
.menu-toggle span{display:block;width:17px;height:1.6px;border-radius:99px;background:#d7e0eb;transform-origin:center;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .2s,width .25s}
body.menu-open .menu-toggle span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
body.menu-open .menu-toggle span:nth-child(2){opacity:0;width:5px}
body.menu-open .menu-toggle span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

.menu-layer{position:fixed;inset:0;z-index:68;visibility:hidden;pointer-events:none;transition:visibility .38s}
.menu-layer.open{visibility:visible;pointer-events:auto}
.menu-backdrop{position:absolute;inset:0;border:0;background:rgba(2,5,9,.0);backdrop-filter:blur(0);transition:background .38s ease,backdrop-filter .38s ease}
.menu-layer.open .menu-backdrop{background:rgba(2,5,9,.58);backdrop-filter:blur(8px)}
.side-menu{position:absolute;left:0;top:0;bottom:0;width:min(410px,91vw);display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(13,18,26,.985),rgba(7,10,15,.985));border-right:1px solid rgba(255,255,255,.08);box-shadow:30px 0 90px rgba(0,0,0,.42);transform:translateX(-102%);transition:transform .46s cubic-bezier(.16,1,.3,1);overflow:hidden}
.menu-layer.open .side-menu{transform:none}
.side-menu:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 3%,rgba(42,171,238,.10),transparent 28%)}
.side-menu-head{position:relative;height:78px;flex:0 0 78px;display:flex;align-items:center;justify-content:space-between;padding:0 20px 0 68px;border-bottom:1px solid rgba(255,255,255,.055)}
.side-menu-brand{display:flex;align-items:center;gap:10px;min-width:0}.side-brand-mark{width:35px;height:35px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,#48c6ff,#1e9add);font-weight:900;box-shadow:0 9px 24px rgba(42,171,238,.16)}
.side-menu-brand b{display:block;font-size:13px}.side-menu-brand small{display:block;color:#647082;font-size:8px;margin-top:2px;letter-spacing:.04em}
.menu-status{display:flex;align-items:center;gap:6px;color:#718094;font-size:8px;font-weight:800}.menu-status i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(70,214,154,.5)}
.side-sections{position:relative;flex:1;min-height:0;overflow-y:auto;padding:14px 13px 20px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}
.side-sections::-webkit-scrollbar{width:5px}.side-sections::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px}
.side-section{border-bottom:1px solid rgba(255,255,255,.055)}
.section-trigger{width:100%;height:55px;padding:0 9px;border:0;background:transparent;display:flex;align-items:center;justify-content:space-between;text-align:left;font-size:14px;font-weight:800;color:#dce3ec;letter-spacing:-.01em}
.section-trigger:hover{color:#fff}.section-chevron{font-style:normal;color:#677386;font-size:16px;transition:transform .32s cubic-bezier(.2,.8,.2,1),color .2s}.section-trigger.active .section-chevron{transform:rotate(180deg);color:#61cdfd}
.section-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .42s cubic-bezier(.2,.8,.2,1),opacity .28s ease}.section-panel>*{min-height:0;overflow:hidden}.section-panel.open{grid-template-rows:1fr;opacity:1;padding-bottom:10px}
.about-card{margin:0 4px 8px;padding:16px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.025)}.about-kicker{display:block;color:#55c7fb;font-size:8px;font-weight:900;letter-spacing:.15em;margin-bottom:8px}.about-card p{margin:0;color:#97a2b1;font-size:11px;line-height:1.58}.about-sign{display:block;margin-top:12px;color:#687588;font-size:8.5px;font-weight:750}
.menu-list{padding:0 3px}.menu-item{min-height:61px;display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;padding:8px 7px;border-bottom:1px solid rgba(255,255,255,.048);border-radius:10px;transition:background .18s,transform .18s}.menu-item:last-child{border-bottom:0}.menu-item:hover{background:rgba(255,255,255,.035);transform:translateX(2px)}
.project-icon,.network-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.075);background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));color:#9bdcff;font-size:11px;font-weight:900;overflow:hidden}
.project-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.icon-download{font-size:22px}.icon-sticker{font-size:17px;color:#d6bbff}.icon-ai{color:#7fdcff;background:linear-gradient(145deg,rgba(42,171,238,.14),rgba(42,171,238,.035))}
.stacy-avatar{padding:0;background:linear-gradient(145deg,#1c2633,#0a0e14);position:relative}.stacy-avatar img{display:block;width:100%;height:100%;object-fit:cover}.stacy-avatar.image-fallback:after{content:"S";font-size:16px;color:#ffc2dd;font-weight:900}
.telegram-icon{border-radius:50%;background:linear-gradient(145deg,#3dbcf6,#1b91d5);color:white;font-size:15px;transform:rotate(-15deg)}.whatsapp-icon{border-radius:50%;background:linear-gradient(145deg,#40d77a,#20aa5a);color:white;font-size:13px}
.menu-item-copy{min-width:0;flex:1}.menu-item-copy b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu-item-copy small{display:block;margin-top:3px;color:#647184;font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu-arrow{color:#465365;font-size:12px;transition:transform .18s,color .18s}.menu-item:hover .menu-arrow{transform:translate(2px,-2px);color:#81d8ff}
.menu-reveal{opacity:0;transform:translateY(7px);transition:opacity .34s ease,transform .4s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 32ms)}
.section-panel.open .menu-reveal{opacity:1;transform:none}
.side-menu-foot{position:relative;flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-top:1px solid rgba(255,255,255,.055);color:#485463;font-size:8px}
body.menu-open{overflow:hidden}
@media(max-width:640px){.side-menu-head{height:68px;flex-basis:68px;padding-left:64px}.top-left{gap:10px}.menu-toggle{width:34px;height:34px;border-radius:11px}.menu-toggle span{width:16px}.side-menu{width:min(390px,94vw)}}
@media(prefers-reduced-motion:reduce){.side-menu,.menu-backdrop,.section-panel,.menu-reveal,.menu-toggle span,.section-chevron{transition-duration:.001ms!important}}

.menu-close{position:absolute;z-index:5;left:clamp(18px,4vw,56px);top:20px;width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);display:grid;place-content:center;padding:0;opacity:0;transform:scale(.85) rotate(-18deg);transition:opacity .25s .14s,transform .38s .08s cubic-bezier(.16,1,.3,1),background .2s}
.menu-layer.open .menu-close{opacity:1;transform:none}.menu-close:hover{background:rgba(255,255,255,.075)}
.menu-close span{position:absolute;left:10px;top:17px;width:17px;height:1.6px;border-radius:99px;background:#d7e0eb}.menu-close span:first-child{transform:rotate(45deg)}.menu-close span:last-child{transform:rotate(-45deg)}
@media(max-width:640px){.menu-close{left:15px;top:17px;width:34px;height:34px;border-radius:11px}.menu-close span{left:9px;top:15px;width:16px}}

/* NexAI drawer refinement 2026-09-27 */
.menu-layer.open .menu-backdrop{
  background:rgba(2,5,9,.44);
  backdrop-filter:blur(12px) saturate(.84);
  -webkit-backdrop-filter:blur(12px) saturate(.84);
}
.side-menu{
  width:clamp(300px,34vw,370px);
  border-right:1px solid rgba(255,184,83,.14);
  border-radius:0 26px 26px 0;
  background:
    radial-gradient(circle at 5% 3%,rgba(255,155,48,.14),transparent 28%),
    radial-gradient(circle at 100% 23%,rgba(55,178,240,.08),transparent 36%),
    linear-gradient(180deg,rgba(12,17,24,.985),rgba(6,9,14,.99));
  box-shadow:28px 0 80px rgba(0,0,0,.52),inset -1px 0 rgba(255,255,255,.025);
}
.side-menu:before{
  background:linear-gradient(120deg,rgba(255,189,91,.035),transparent 34%,rgba(73,191,244,.025) 75%,transparent);
}
.side-menu-head{
  padding-right:14px;
  border-bottom:1px solid rgba(255,255,255,.065);
}
.side-menu-brand{gap:9px}
.side-menu-brand>span:last-child{min-width:0}
.side-brand-mark{
  width:42px;height:42px;flex:0 0 42px;padding:2px;border-radius:14px;
  background:linear-gradient(145deg,rgba(255,188,80,.95),rgba(44,171,235,.58));
  border:1px solid rgba(255,209,130,.25);
  box-shadow:0 10px 30px rgba(255,143,35,.14),0 0 0 3px rgba(255,255,255,.025);
  overflow:hidden;
}
.side-brand-mark img{
  display:block;width:100%;height:100%;object-fit:cover;border-radius:11px;
}
.side-menu-brand b,.side-menu-brand small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-menu-brand b{font-size:12px;letter-spacing:-.01em}
.side-menu-brand small{font-size:7.5px;color:#778396}
.menu-status{color:#8794a7}
.side-sections{padding:12px 10px 18px}
.side-section{border-bottom:0;margin-bottom:7px}
.section-trigger{
  height:48px;padding:0 10px;border:1px solid rgba(255,255,255,.055);
  border-radius:13px;background:rgba(255,255,255,.018);
  font-size:13px;transition:background .22s,border-color .22s,color .22s,transform .22s;
}
.section-trigger:hover{background:rgba(255,255,255,.04);transform:translateX(1px)}
.section-trigger.active{
  background:linear-gradient(90deg,rgba(255,160,45,.075),rgba(42,171,238,.045));
  border-color:rgba(255,184,83,.10);color:#f5f7fb;
}
.section-chevron{
  width:7px;height:7px;flex:0 0 7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  color:#758195;font-size:0;transform:rotate(45deg);transition:transform .3s cubic-bezier(.2,.8,.2,1),color .2s;
}
.section-trigger.active .section-chevron{transform:rotate(225deg);color:#ffbd68}
.section-panel.open{padding:7px 0 4px}
.about-card{
  margin:0;padding:13px;border-radius:13px;border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.018));
}
.about-kicker{color:#ffb354}
.about-card p{font-size:10px;line-height:1.55}
.menu-list{display:grid;gap:6px;padding:0}
.menu-item{
  min-height:54px;gap:9px;padding:7px 8px;border:1px solid rgba(255,255,255,.055);
  border-radius:13px;background:linear-gradient(145deg,rgba(255,255,255,.033),rgba(255,255,255,.014));
}
.menu-item:last-child{border-bottom:1px solid rgba(255,255,255,.055)}
.menu-item:hover{
  background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(42,171,238,.025));
  border-color:rgba(255,255,255,.09);transform:translateX(2px);
}
.project-icon,.network-icon{
  width:34px;height:34px;flex:0 0 34px;border-radius:11px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 7px 16px rgba(0,0,0,.13);
  transform:none;
}
.project-icon svg,.network-icon svg{
  width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.icon-ai{color:#ffd08a;background:linear-gradient(145deg,rgba(255,153,38,.22),rgba(121,69,23,.08))}
.icon-channel{color:#7ed7ff;background:linear-gradient(145deg,rgba(42,171,238,.18),rgba(42,171,238,.045))}
.icon-download{color:#88e7bc;background:linear-gradient(145deg,rgba(70,214,154,.17),rgba(70,214,154,.04));font-size:0}
.icon-group{color:#c1a7ff;background:linear-gradient(145deg,rgba(148,112,255,.18),rgba(148,112,255,.04))}
.icon-sticker{color:#ffafd1;background:linear-gradient(145deg,rgba(244,111,177,.18),rgba(244,111,177,.04));font-size:0}
.icon-game{color:#ffd17c;background:linear-gradient(145deg,rgba(255,178,74,.18),rgba(255,178,74,.04))}
.icon-whisper{color:#8fe8ef;background:linear-gradient(145deg,rgba(69,210,224,.17),rgba(69,210,224,.04))}
.telegram-icon{color:#fff;background:linear-gradient(145deg,#38bdf4,#197fc0)}
.whatsapp-icon{color:#fff;background:linear-gradient(145deg,#42d77d,#1b9a50)}
.menu-item-copy b{font-size:10.5px}
.menu-item-copy small{font-size:7.8px;color:#768296}
.menu-arrow{
  width:18px;height:18px;display:grid;place-items:center;flex:0 0 18px;border-radius:7px;
  color:#5e6b7d;background:rgba(255,255,255,.025);
}
.menu-arrow svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu-item:hover .menu-arrow{color:#9fdfff;background:rgba(42,171,238,.07);transform:none}
.side-menu-foot{padding:12px 14px;border-top:1px solid rgba(255,255,255,.055)}
@media(max-width:640px){
  .side-menu{width:clamp(205px,58vw,250px);border-radius:0 22px 22px 0}
  .side-menu-head{height:68px;flex-basis:68px;padding-left:58px;padding-right:10px}
  .side-brand-mark{width:38px;height:38px;flex-basis:38px;border-radius:12px}
  .side-brand-mark img{border-radius:9px}
  .side-menu-brand{gap:7px}
  .side-menu-brand b{font-size:11px}
  .side-menu-brand small{font-size:6.8px}
  .menu-status{font-size:0;gap:0}
  .menu-status i{width:7px;height:7px}
  .side-sections{padding:9px 8px 14px}
  .section-trigger{height:45px;padding:0 9px;font-size:12px;border-radius:12px}
  .about-card{padding:11px}
  .about-card p{font-size:9px}
  .menu-list{gap:5px}
  .menu-item{min-height:50px;gap:7px;padding:6px;border-radius:12px}
  .project-icon,.network-icon{width:31px;height:31px;flex-basis:31px;border-radius:10px}
  .project-icon svg,.network-icon svg{width:16px;height:16px}
  .menu-item-copy b{font-size:9.5px}
  .menu-item-copy small{font-size:7px}
  .menu-arrow{width:16px;height:16px;flex-basis:16px}
  .side-menu-foot{font-size:6.8px;padding:10px}
}
@media(max-width:350px){
  .side-menu{width:64vw;min-width:200px;max-width:220px}
  .side-menu-head{padding-left:56px}
  .side-menu-brand small{display:none}
}

/* NexAI logo + Android rendering stability 2026-09-27 */
.splash-logo{
  padding:2px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,188,80,.96),rgba(44,171,235,.62));
  border:1px solid rgba(255,209,130,.28);
}
.splash-logo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:19px}

.brand-mark{
  padding:2px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,188,80,.96),rgba(44,171,235,.62));
  border:1px solid rgba(255,209,130,.24);
  box-shadow:0 10px 30px rgba(255,143,35,.14),0 0 0 3px rgba(255,255,255,.025);
}
.brand-mark img{display:block;width:100%;height:100%;object-fit:cover;border-radius:10px}
.brand-mark svg{display:none}

.nex-node{
  padding:2px;
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,188,80,.96),rgba(44,171,235,.62));
  border:1px solid rgba(255,209,130,.24);
}
.nex-node img{display:block;width:100%;height:100%;object-fit:cover;border-radius:13px}

.stacy-avatar{
  color:#ffc1dc;
  background:linear-gradient(145deg,rgba(244,111,177,.18),rgba(125,68,124,.07));
  padding:0;
}
.stacy-avatar svg{
  width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.stacy-avatar img{display:none!important}

/* Avoid Android/WebView GPU corruption caused by a full-screen backdrop-filter layer. */
.menu-backdrop,
.menu-layer.open .menu-backdrop{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.menu-layer.open .menu-backdrop{
  background:rgba(2,5,9,.48);
}
body.menu-open .app-shell{
  filter:blur(6px) brightness(.72);
  transform:scale(1.006);
  transform-origin:50% 50%;
}
.side-menu,
.side-menu *,
.menu-item,
.project-icon,
.network-icon{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.side-menu{
  contain:layout paint;
  isolation:isolate;
  transform:translate3d(-102%,0,0);
  will-change:transform;
}
.menu-layer.open .side-menu{transform:translate3d(0,0,0)}
.menu-item{
  contain:paint;
  transform:translateZ(0);
}
.menu-reveal{
  transform:translate3d(0,7px,0);
}
.section-panel.open .menu-reveal{
  transform:translate3d(0,0,0);
}
@media(max-width:640px){
  .brand-mark{width:40px;height:40px;border-radius:13px}
  .brand-mark img{border-radius:10px}
  body.menu-open .app-shell{filter:blur(5px) brightness(.7)}
}
@media(prefers-reduced-motion:reduce){
  body.menu-open .app-shell{transform:none}
}

/* Telegram profile photos 2026-09-27 */
.project-icon,.network-icon{position:relative}
.profile-photo{
  position:absolute;
  inset:0;
  z-index:3;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:inherit;
  background:#0a0f16;
}
.project-icon>.profile-photo+svg,
.network-icon>.profile-photo+svg{position:relative;z-index:1}
.stacy-avatar .profile-photo{display:block!important}