*{box-sizing:border-box}
:root{--purple:#5d18ed;--purple2:#7d25ff;--ink:#15151d;--muted:#73737e;--line:#dfe0e7}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff;min-height:100vh}
.bg-lines{position:fixed;inset:0;pointer-events:none;overflow:hidden;background:radial-gradient(circle at 50% 40%,#faf7ff 0,#fff 58%);z-index:-1}
.bg-lines:before,.bg-lines:after{content:"";position:absolute;width:150%;height:80px;border:1px solid #d9c7ff;opacity:.45;transform:rotate(-27deg);left:-20%;top:18%}
.bg-lines:after{top:65%;transform:rotate(28deg);opacity:.3}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:28px 16px}
.auth-card{width:min(100%,540px);background:rgba(255,255,255,.92);border:1px solid #e0e0e5;border-radius:28px;padding:28px 32px 30px;box-shadow:0 20px 70px rgba(83,45,160,.10);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px}
.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#8d51ff,#4b12dd);color:white;font-size:26px;font-weight:900;box-shadow:0 8px 22px rgba(93,24,237,.28)}
.brand-name{font-size:27px;font-weight:800;letter-spacing:-1px}.brand-name span{color:var(--purple)}
.tabs{height:58px;border:1px solid #dedee4;border-radius:32px;padding:4px;display:flex;margin-bottom:22px;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.tab{flex:1;border:0;background:transparent;border-radius:28px;font-size:18px;font-weight:700;color:#222;cursor:pointer;transition:.25s}
.tab.active{color:#fff;background:linear-gradient(100deg,#5313e6,#7c28ff);box-shadow:0 8px 20px rgba(93,24,237,.25)}
.hero-art{height:150px;position:relative;display:grid;place-items:center;margin-bottom:6px;overflow:hidden}
.main-icon{width:92px;height:92px;border-radius:28px;background:linear-gradient(145deg,#8550ff,#4d14df);color:#fff;display:grid;place-items:center;font-size:56px;font-weight:800;box-shadow:0 18px 38px rgba(92,27,231,.28);animation:float 3.4s ease-in-out infinite;z-index:2}
.orbit{position:absolute;border:1px solid #d9c9ff;border-radius:50%;animation:spin 9s linear infinite}.orbit-a{width:250px;height:82px}.orbit-b{width:300px;height:110px;transform:rotate(18deg);animation-duration:12s}
.float-icon{position:absolute;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:19px;box-shadow:0 8px 20px rgba(0,0,0,.13);animation:float 3s ease-in-out infinite}
.instagram{background:#e33a83;left:13%;top:26%}.tiktok{background:#111;right:15%;top:17%;animation-delay:.3s}.facebook{background:#2475ed;left:19%;bottom:17%;animation-delay:.7s}.youtube{background:#f22c2c;right:22%;bottom:20%;animation-delay:1s}.telegram{background:#25a8e8;right:9%;bottom:37%;animation-delay:1.3s}
.spark{position:absolute;color:#6b21ff;animation:pulse 1.8s infinite}.s1{left:32%;top:18%}.s2{right:30%;top:34%;animation-delay:.5s}.s3{left:27%;bottom:24%;animation-delay:.9s}
h1{text-align:center;font-size:32px;letter-spacing:-1px;margin:4px 0 8px}.intro{text-align:center;color:var(--muted);font-size:15px;line-height:1.6;margin:0 auto 25px;max-width:470px}
form label{display:block;font-size:14px;font-weight:650;margin:0 0 8px}.input-wrap{height:58px;border:1.5px solid var(--line);border-radius:13px;display:flex;align-items:center;padding:0 14px;margin-bottom:17px;transition:.2s;background:#fff}.input-wrap:focus-within{border-color:#8b55ff;box-shadow:0 0 0 4px rgba(113,41,255,.08)}.line-icon{color:#6a24e9;font-size:24px;width:32px}.input-wrap input{border:0;outline:0;flex:1;font-size:16px;min-width:0;background:transparent;color:#222}.input-wrap input::placeholder{color:#a0a0aa}.eye{border:0;background:transparent;color:#858591;cursor:pointer;font-size:15px}
.row-between{display:flex;justify-content:space-between;align-items:center;margin:1px 0 20px}.check{display:flex!important;align-items:center;gap:7px;font-weight:500!important;margin:0!important}.check input{accent-color:var(--purple);width:17px;height:17px}.text-btn,.link-btn{border:0;background:none;color:#6120e8;font-weight:650;cursor:pointer;padding:0;font-size:14px}
.primary{width:100%;height:58px;border:0;border-radius:13px;color:#fff;background:linear-gradient(100deg,#5212e4,#8227ff);font-size:17px;font-weight:750;cursor:pointer;box-shadow:0 12px 25px rgba(93,24,237,.23);transition:.2s}.primary:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(93,24,237,.28)}.primary span{margin-left:10px;font-size:23px}
.divider{display:flex;align-items:center;gap:12px;color:#9898a1;font-size:13px;margin:22px 0}.divider:before,.divider:after{content:"";height:1px;background:#e3e3e7;flex:1}.google{height:52px;width:100%;background:#fff;border:1px solid #dedee4;border-radius:12px;font-size:15px;font-weight:650;cursor:pointer}.google b{color:#4285f4;font-size:20px;margin-right:10px}.switch-copy{text-align:center;color:#666673;font-size:14px;margin:20px 0 0}.terms{font-size:13px!important;line-height:1.5;margin:3px 0 18px!important}.terms a{color:#6120e8;text-decoration:none}.hidden{display:none}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:#17151f;color:#fff;padding:11px 16px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
@media(max-width:560px){.auth-shell{padding:14px 10px}.auth-card{padding:20px 18px 24px;border-radius:22px}.brand-name{font-size:24px}.tabs{height:54px}.hero-art{height:125px}.main-icon{width:78px;height:78px;font-size:48px}.float-icon{width:32px;height:32px;font-size:16px}h1{font-size:30px}.intro{font-size:14px}.input-wrap{height:56px}.primary{height:56px}}

/* V10 shared motion tokens */
:root{--brand:#6a20e8;--brand-2:#8a45ff;--surface:#fff;--bg:#f7f7fb;--text:#171721;--muted:#85828f;--line:#e7e5ec;--radius:15px;--ease:cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
button,.nav,.a-nav,.primary,.a-primary,.ghost,.action{transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),color .18s var(--ease)}
button:hover,.nav:hover,.a-nav:hover,.primary:hover,.a-primary:hover,.ghost:hover,.action:hover{transform:translateY(-1px)}
button:active,.nav:active,.a-nav:active,.primary:active,.a-primary:active,.ghost:active,.action:active{transform:translateY(0) scale(.98)}
.brand-mark,.mark,.avatar{animation:softFloat 4s ease-in-out infinite}
@keyframes softFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.icon-badge{width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center;background:#f2edff;color:var(--brand);transition:transform .2s var(--ease)}
.card-icon:hover .icon-badge{transform:rotate(-4deg) scale(1.05)}