@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');
:root{
  --ink:#e8f4ef;--muted:#8aa89c;--em:#2ecf9a;--em2:#1aa87a;--gold:#dcc56f;
  --panel:rgba(12,28,24,.72);--stroke:rgba(46,207,154,.22);--field:rgba(6,18,15,.55);
}
*{box-sizing:border-box}
html,body.qx-auth{margin:0;min-height:100%;font-family:Sora,system-ui,sans-serif;color:var(--ink);background:#0a1714}
body.qx-auth{min-height:100dvh}
.qx-scene{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px 16px 30px;position:relative;overflow:hidden}
.qx-scene::before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse 90% 60% at 50% -10%,rgba(46,207,154,.18),transparent 58%),radial-gradient(ellipse 55% 45% at 15% 90%,rgba(220,197,111,.08),transparent 55%),radial-gradient(ellipse 50% 40% at 90% 75%,rgba(34,158,217,.07),transparent 50%),linear-gradient(168deg,#081512 0%,#0d221c 45%,#0a1815 100%)}
.qx-scene::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.03),transparent 28%),radial-gradient(circle at 70% 80%,rgba(46,207,154,.04),transparent 32%)}
.qx-orb{position:fixed;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:-1;opacity:.2;animation:qxFloat 16s ease-in-out infinite}
.qx-orb-a{width:340px;height:340px;background:#2ecf9a;top:4%;left:4%}
.qx-orb-b{width:280px;height:280px;background:#dcc56f;bottom:6%;right:6%;opacity:.14;animation-delay:-5s}
@keyframes qxFloat{50%{transform:translate(12px,-14px) scale(1.04)}}
.qx-panel{width:min(420px,100%);background:var(--panel);border:1px solid var(--stroke);border-radius:26px;backdrop-filter:blur(22px) saturate(1.1);-webkit-backdrop-filter:blur(22px) saturate(1.1);box-shadow:0 28px 64px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.04) inset;padding:26px 26px 22px;position:relative;animation:qxRise .55s cubic-bezier(.22,1,.36,1) both}
.qx-panel--wide{width:min(540px,100%)}
@keyframes qxRise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.qx-panel::before{content:"";position:absolute;left:20%;right:20%;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--em),var(--gold),transparent);border-radius:2px;opacity:.85}

.qx-lang{position:absolute;top:12px;right:12px;height:34px;padding:0 10px 0 8px;border-radius:999px;border:1px solid rgba(220,197,111,.35);background:rgba(10,24,20,.75);color:var(--gold);cursor:pointer;display:inline-flex;align-items:center;gap:6px;z-index:5;overflow:visible;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.qx-lang i{font-size:15px;position:relative;z-index:1}
.qx-lang-chip{position:relative;z-index:1;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--ink);opacity:.9;white-space:nowrap}
.qx-hand{position:absolute;left:50%;bottom:-40px;width:54px;height:54px;margin-left:-20px;z-index:7;pointer-events:none;transform-origin:37% 6%;filter:drop-shadow(0 6px 6px rgba(80,40,20,.3));animation:qxHandTap 1.4s ease-in-out infinite}
.qx-hand svg{width:54px;height:54px;display:block;overflow:visible}
.qx-hand::after{content:"";position:absolute;left:37%;top:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;border:2px solid rgba(255,248,242,0);animation:qxHandRipple 1.4s ease-out infinite}
.qx-lang.is-tapped .qx-hand{animation:none;opacity:0;visibility:hidden}
@keyframes qxHandTap{0%,100%{transform:translateY(14px)}40%{transform:translateY(0)}52%{transform:translateY(2px)}66%{transform:translateY(0)}}
@keyframes qxHandRipple{0%,34%{opacity:0;transform:scale(.25)}48%{opacity:.8;transform:scale(1);border-color:rgba(255,244,236,.95)}100%{opacity:0;transform:scale(1.7);border-color:rgba(46,207,154,.15)}}
@media (prefers-reduced-motion:reduce){.qx-hand,.qx-hand::after{animation:none}.qx-hand{transform:none}}
.qx-lang-ring{position:absolute;inset:-4px;border-radius:999px;border:1.5px solid rgba(220,197,111,.55);animation:qxLangPulse 2.2s ease-out infinite;pointer-events:none}
.qx-lang::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(220,197,111,.35);animation:qxLangGlow 2.2s ease-out infinite;pointer-events:none}
.qx-lang:hover{transform:scale(1.05);border-color:rgba(220,197,111,.7);box-shadow:0 8px 20px rgba(220,197,111,.18)}
.qx-lang:hover .qx-lang-ring,.qx-lang:hover::after,.qx-lang.is-tapped .qx-lang-ring{animation:none;opacity:0}
@keyframes qxLangPulse{0%{transform:scale(.92);opacity:.85}70%{transform:scale(1.28);opacity:0}100%{transform:scale(1.28);opacity:0}}
@keyframes qxLangGlow{0%{box-shadow:0 0 0 0 rgba(220,197,111,.4)}70%{box-shadow:0 0 0 12px rgba(220,197,111,0)}100%{box-shadow:0 0 0 0 rgba(220,197,111,0)}}

.qx-brand{text-align:center;padding:2px 4px 10px}
.qx-brand h1,.qx-brand h2{margin:12px 0 2px;font-size:1.18rem;font-weight:800;letter-spacing:.02em;color:#fff6cf!important;text-shadow:0 1px 0 rgba(0,0,0,.45),0 0 18px rgba(255,214,102,.55)}

/* Transparent logo only — no plate / no white box */
.qx-logo{display:block;margin:0 auto;width:auto;height:76px;max-width:300px;object-fit:contain;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;filter:drop-shadow(0 10px 18px rgba(0,0,0,.32)) drop-shadow(0 0 18px rgba(46,207,154,.14));animation:qxLogoFloat 4.8s ease-in-out infinite;-webkit-user-drag:none}
@keyframes qxLogoFloat{
  0%,100%{transform:translateY(0);filter:drop-shadow(0 10px 18px rgba(0,0,0,.3)) drop-shadow(0 0 16px rgba(46,207,154,.14))}
  50%{transform:translateY(-5px);filter:drop-shadow(0 16px 24px rgba(0,0,0,.34)) drop-shadow(0 0 28px rgba(220,197,111,.22))}
}

.qx-field{margin-bottom:13px}
.qx-label{display:block;margin-bottom:6px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.qx-control{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:14px;background:var(--field);border:1px solid rgba(46,207,154,.5);box-shadow:inset 0 0 0 1px rgba(46,207,154,.08),0 0 0 rgba(46,207,154,0);transition:border-color .25s ease,box-shadow .25s ease;animation:qxFieldPulse 3.6s ease-in-out infinite}
.qx-control:hover{border-color:rgba(46,207,154,.78)}
.qx-control:focus-within{border-color:rgba(46,207,154,.95);box-shadow:inset 0 0 0 1px rgba(46,207,154,.22),0 0 0 3px rgba(46,207,154,.16),0 0 18px rgba(46,207,154,.28);animation:none}
@keyframes qxFieldPulse{0%,100%{border-color:rgba(46,207,154,.4);box-shadow:inset 0 0 0 1px rgba(46,207,154,.07),0 0 0 rgba(46,207,154,0)}50%{border-color:rgba(46,207,154,.82);box-shadow:inset 0 0 0 1px rgba(46,207,154,.16),0 0 16px rgba(46,207,154,.24)}}
@media (prefers-reduced-motion:reduce){.qx-control{animation:none;border-color:rgba(46,207,154,.62)}}
.qx-control>i{display:none}
.qx-control input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;padding:12px 0}
.qx-control input::placeholder{color:#6d8a80}
.qx-eye{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:4px}
.qx-eye:hover{color:var(--gold)}
.qx-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 15px}
.qx-check{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer}
.qx-check input{accent-color:var(--em)}
.qx-link{color:var(--gold);text-decoration:none;font-size:13px;font-weight:600}
.qx-link:hover{text-decoration:underline}

.qx-btn{position:relative;overflow:hidden;width:100%;min-height:48px;border:0;cursor:pointer;border-radius:14px;font:inherit;font-weight:700;letter-spacing:.02em;color:#06241c;background:linear-gradient(120deg,#efd58a 0%,#2ecf9a 45%,#1aa87a 100%);background-size:200% 100%;box-shadow:0 12px 28px rgba(46,207,154,.26),0 1px 0 rgba(255,255,255,.35) inset;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,background-position .45s ease;animation:qxBtnGlow 3.2s ease-in-out infinite}
.qx-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-140%);animation:qxBtnShine 3.4s ease-in-out infinite}
.qx-btn:hover{transform:translateY(-2px) scale(1.01);background-position:100% 0;box-shadow:0 16px 34px rgba(46,207,154,.36),0 1px 0 rgba(255,255,255,.4) inset;animation:none}
.qx-btn:hover::before{animation-duration:1.2s}
.qx-btn:active{transform:translateY(0) scale(.985)}
@keyframes qxBtnGlow{0%,100%{box-shadow:0 12px 28px rgba(46,207,154,.24),0 1px 0 rgba(255,255,255,.3) inset}50%{box-shadow:0 14px 34px rgba(46,207,154,.38),0 0 24px rgba(239,213,138,.18),0 1px 0 rgba(255,255,255,.4) inset}}
@keyframes qxBtnShine{0%,55%{transform:translateX(-140%);opacity:0}62%{opacity:1}82%{transform:translateX(140%);opacity:.9}100%{transform:translateX(140%);opacity:0}}

.qx-foot{text-align:center;margin:14px 0 0;font-size:13px;color:var(--muted)}
.qx-foot a{color:var(--em);font-weight:700;text-decoration:none}
.qx-foot a:hover{color:var(--gold)}
.qx-otp-head{text-align:center;margin-bottom:12px}
.qx-otp-icon{width:48px;height:48px;margin:0 auto 10px;border-radius:16px;display:grid;place-items:center;color:var(--em);background:rgba(46,207,154,.12);border:1px solid var(--stroke)}
.qx-otp-head h2{margin:0;font-size:1.05rem}
.qx-otp-head p{margin:6px 0 0;color:var(--muted);font-size:13px}
.qx-otp{display:flex;justify-content:center;gap:8px;margin-bottom:14px}
.otp-input{width:42px;height:48px;text-align:center;border-radius:12px;border:1px solid rgba(46,207,154,.2);background:var(--field);color:var(--ink);font-size:1.15rem;font-weight:700}
.otp-input:focus{outline:none;border-color:var(--em);box-shadow:0 0 0 3px rgba(46,207,154,.12)}
.qx-otp-help{text-align:center;font-size:12px;color:var(--muted);margin:10px 0}
.qx-otp-help a{color:var(--em);font-weight:700;text-decoration:none}
.qx-back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-size:13px}
.qx-back:hover{color:var(--gold)}

.qx-dock{width:min(268px,72%);margin:14px auto 0;transform:translateX(-8px);animation:qxRise .6s .1s cubic-bezier(.22,1,.36,1) both}
.qx-dock-tg{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:40px;padding:8px 14px;text-decoration:none;color:#fff;border-radius:12px;background:linear-gradient(145deg,rgba(255,255,255,.16),transparent 42%),linear-gradient(135deg,#34b4ec 0%,#229ED9 48%,#1a7fb0 100%);border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 22px rgba(34,158,217,.28),0 1px 0 rgba(255,255,255,.22) inset;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,filter .22s ease;animation:qxTgPulse 2.8s ease-in-out infinite}
.qx-dock-tg::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-140%);animation:qxTgShine 3s ease-in-out infinite}
.qx-dock-tg>*{position:relative;z-index:1}
.qx-dock-tg:hover{transform:translateY(-2px) scale(1.02);animation:none;filter:brightness(1.05);box-shadow:0 16px 32px rgba(34,158,217,.4),0 1px 0 rgba(255,255,255,.28) inset}
.qx-dock-tg:hover::before{animation-duration:1.1s}
.qx-dock-tg:active{transform:scale(.98)}
.qx-dock-ico{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:rgba(255,255,255,.2);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset}
.qx-dock-ico svg{width:15px;height:15px;display:block}
.qx-dock-txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.1}
.qx-dock-txt strong{font-size:13px;font-weight:700;color:#fff}
.qx-dock-txt small{font-size:9px;color:rgba(255,255,255,.78);font-weight:500;letter-spacing:.02em}
@keyframes qxTgPulse{0%,100%{box-shadow:0 10px 22px rgba(34,158,217,.26),0 1px 0 rgba(255,255,255,.2) inset;transform:translateY(0)}50%{box-shadow:0 14px 28px rgba(34,158,217,.4),0 0 20px rgba(34,158,217,.2),0 1px 0 rgba(255,255,255,.28) inset;transform:translateY(-1px)}}
@keyframes qxTgShine{0%,58%{transform:translateX(-140%);opacity:0}65%{opacity:1}85%{transform:translateX(140%);opacity:.95}100%{transform:translateX(140%);opacity:0}}

.qx-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.alert{border-radius:12px;font-size:13px}
@media (max-width:900px){
  html,body.qx-auth{height:100%;max-height:100dvh;overflow:hidden}
  body.qx-auth.qx-auth-register{overflow:auto;max-height:none;height:auto}
  .qx-scene{min-height:100dvh;height:100dvh;max-height:100dvh;padding:12px 14px 18px;gap:12px;justify-content:center}
  body.qx-auth-register .qx-scene{height:auto;max-height:none;min-height:100dvh}
  .qx-panel{padding:20px 16px 16px;border-radius:22px}
  .qx-logo{height:64px;max-width:260px}
  .qx-control,.qx-btn{min-height:44px}
  .qx-dock{width:min(248px,70%);margin-top:12px;transform:translateX(-6px)}
  .qx-dock-tg{min-height:38px;padding:7px 12px;gap:9px;border-radius:11px}
  .qx-dock-ico{width:26px;height:26px}
  .qx-dock-ico svg{width:14px;height:14px}
  .qx-lang{top:10px;right:10px;height:32px}
  .qx-grid-2{grid-template-columns:1fr}
  .otp-input{width:38px;height:44px}
  .qx-orb{opacity:.14}
}
@media (prefers-reduced-motion:reduce){
  .qx-orb,.qx-panel,.qx-dock,.qx-logo,.qx-btn,.qx-btn::before,.qx-dock-tg,.qx-dock-tg::before,.qx-lang-ring,.qx-lang::after{animation:none!important}
}