*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#020b18;color:#eef6ff;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{min-height:100vh;overflow-x:hidden}#spaceCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;background:radial-gradient(circle at 50% 72%,rgba(0,115,255,.20),transparent 24%),radial-gradient(circle at 50% 25%,rgba(0,48,105,.35),transparent 40%),linear-gradient(#020814,#031329 58%,#020814)}.planet-glow{position:fixed;z-index:0;left:50%;bottom:-36vw;width:min(1100px,110vw);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 50% 34%,rgba(0,151,255,.25),rgba(0,47,116,.18) 34%,rgba(0,10,30,.95) 65%);box-shadow:0 -24px 90px rgba(0,123,255,.35),inset 0 22px 55px rgba(0,168,255,.18);filter:saturate(1.2)}.horizon-ring{position:fixed;left:50%;bottom:4vh;z-index:1;width:min(1150px,110vw);height:140px;border:2px solid rgba(0,136,255,.26);border-radius:50%;transform:translateX(-50%) perspective(500px) rotateX(68deg);box-shadow:0 0 30px rgba(0,127,255,.34),inset 0 0 30px rgba(0,127,255,.22);animation:ringPulse 5s ease-in-out infinite}.ring-b{width:min(850px,88vw);bottom:7vh;animation-delay:-2.2s}.auth-screen{position:relative;z-index:4;min-height:100vh;width:min(520px,100%);margin:0 auto;padding:32px 18px 56px;display:flex;flex-direction:column;justify-content:center}.auth-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.auth-back,.auth-language{height:40px;border-radius:10px;border:1px solid rgba(74,147,216,.32);background:rgba(13,39,70,.76);color:#edf6ff;backdrop-filter:blur(12px);box-shadow:0 8px 30px rgba(0,0,0,.18);font-weight:700}.auth-back{width:42px;font-size:20px}.auth-language{padding:0 14px;color:#39e5dc}.brand-row{display:flex;align-items:center;justify-content:center;gap:11px;margin:6px 0 18px;font-size:22px;text-shadow:0 0 18px rgba(98,180,255,.45)}.brand-coin{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#20a8ff,#7246ff);box-shadow:0 0 30px rgba(35,159,255,.45),inset 0 0 18px rgba(255,255,255,.18);font-size:28px}.auth-panel{width:100%;background:linear-gradient(180deg,rgba(14,42,75,.91),rgba(6,27,52,.93));border:1px solid rgba(55,145,225,.48);border-radius:16px;padding:24px;box-shadow:0 0 0 1px rgba(0,157,255,.06),0 24px 70px rgba(0,0,0,.46),0 0 55px rgba(0,104,255,.10);backdrop-filter:blur(18px)}.auth-panel h1{text-align:center;margin:0 0 24px;font-size:24px}.auth-panel form{display:flex;flex-direction:column;gap:9px}.auth-panel label{font-size:14px;color:#cfdbeb;margin-top:5px}.auth-panel input{width:100%;height:50px;border-radius:10px;border:1px solid #345878;background:rgba(4,22,43,.88);color:#fff;padding:0 14px;outline:none;font-size:16px}.auth-panel input:focus{border-color:#2ee6da;box-shadow:0 0 0 2px rgba(46,230,218,.13),0 0 22px rgba(46,173,230,.12)}#registerFields{display:contents}.auth-primary{height:50px;margin-top:13px;border:0;border-radius:10px;background:linear-gradient(90deg,#28d2c9,#2dcfd1);color:#031827;font-size:18px;font-weight:800;cursor:pointer}.auth-bottom{display:grid;grid-template-columns:1fr;margin-top:18px;gap:12px}.auth-bottom.two{grid-template-columns:1fr 1fr}.auth-bottom button{min-height:46px;border-radius:9px;border:1px solid #31587b;background:rgba(24,53,83,.82);color:#edf4ff;font-size:16px;font-weight:700}.auth-hint{text-align:center;color:#869bb2;font-size:12px;margin:18px 0 0}.language-sheet{position:fixed;inset:0;z-index:20;background:rgba(1,7,16,.72);backdrop-filter:blur(8px);display:grid;place-items:center;padding:18px}.language-sheet[hidden]{display:none}.language-card{width:min(460px,100%);max-height:78vh;overflow:auto;background:#0b1b30;border:1px solid #31577c;border-radius:16px;padding:16px;box-shadow:0 28px 90px rgba(0,0,0,.6)}.language-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:18px}.language-head button{border:0;background:#17304c;color:#fff;border-radius:8px;width:36px;height:36px}.language-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.language-grid button{height:44px;border-radius:9px;border:1px solid #284b6e;background:#102943;color:#dce9f7;font-weight:700}.language-grid button.active{border-color:#27d7ce;color:#2ce5dc;background:#12384a}.toast{position:fixed;left:50%;bottom:28px;z-index:30;transform:translateX(-50%);background:#102741;border:1px solid #315b83;color:#fff;padding:10px 16px;border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.35)}@keyframes ringPulse{0%,100%{opacity:.38;filter:blur(.2px)}50%{opacity:.8;filter:blur(0)}}@media(max-width:560px){.auth-screen{justify-content:flex-start;padding:14px 10px 30px}.auth-top{margin-bottom:5px}.brand-row{margin:2px 0 10px}.auth-panel{padding:20px 15px;border-radius:13px}.auth-panel h1{font-size:21px;margin-bottom:20px}.auth-bottom.two{grid-template-columns:1fr}.planet-glow{width:170vw;bottom:-38vw}.horizon-ring{width:155vw;bottom:2vh}}
/* =========================================================
CINEMATIC CRYPTO SCENE — animated decorative layers
========================================================= */
.crypto-scene{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.portal-core{position:absolute;left:50%;top:18%;width:clamp(170px,24vw,330px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(35,150,255,.30) 0 12%,rgba(18,92,225,.16) 24%,rgba(15,63,163,.10) 45%,transparent 69%);box-shadow:0 0 34px rgba(36,173,255,.28),0 0 100px rgba(69,54,255,.18);animation:portalFloat 6s ease-in-out infinite alternate}
.portal-core::before,.portal-core::after{content:"";position:absolute;border-radius:50%;inset:9%;border:1px solid rgba(59,188,255,.62);box-shadow:0 0 16px rgba(25,180,255,.52),inset 0 0 20px rgba(62,97,255,.18);animation:portalSpin 12s linear infinite}
.portal-core::after{inset:22%;border-style:dashed;border-color:rgba(142,92,255,.66);animation-duration:7s;animation-direction:reverse}
.portal-core span{font-size:clamp(58px,9vw,126px);font-weight:900;color:#dff8ff;text-shadow:0 0 8px #fff,0 0 22px #16a9ff,0 0 54px #7045ff;filter:drop-shadow(0 0 24px rgba(51,157,255,.65));animation:btcPulse 2.8s ease-in-out infinite}
.portal-orbit{position:absolute;left:50%;top:18%;width:clamp(205px,29vw,395px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(65,164,255,.22);transform:translateX(-50%) rotateX(68deg);box-shadow:0 0 18px rgba(0,157,255,.22)}
.orbit-1{animation:orbitTwist 8s linear infinite}.orbit-2{width:clamp(245px,34vw,455px);animation:orbitTwist 13s linear infinite reverse}.orbit-3{width:clamp(285px,39vw,520px);animation:orbitTwist 18s linear infinite}
.eth-crystal{position:absolute;right:clamp(3vw,9vw,160px);top:40%;width:clamp(76px,9vw,135px);height:clamp(132px,17vw,235px);display:grid;place-items:center;filter:drop-shadow(0 0 18px rgba(40,145,255,.8));animation:ethFloat 5s ease-in-out infinite alternate}
.eth-crystal b{font-size:clamp(90px,12vw,175px);font-family:serif;line-height:1;color:#a8d9ff;text-shadow:0 0 10px #fff,0 0 28px #1a94ff,0 0 54px #2344ff;transform:scaleX(.72) rotate(45deg);opacity:.9}
.eth-crystal i{position:absolute;inset:10% 22%;clip-path:polygon(50% 0,100% 49%,50% 100%,0 49%);background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(59,164,255,.28) 35%,rgba(20,67,217,.45) 68%,rgba(116,41,255,.22));border:1px solid rgba(140,218,255,.7);box-shadow:inset 0 0 18px rgba(255,255,255,.15);animation:ethShimmer 2.6s ease-in-out infinite}
.btc-orb{position:absolute;width:clamp(46px,5vw,74px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,196,70,.55);background:radial-gradient(circle at 35% 30%,#ffdd82,#af6d08 47%,#4f2d00 75%);color:#251400;font-weight:900;font-size:clamp(24px,3vw,38px);box-shadow:0 0 22px rgba(255,174,39,.38);animation:orbDrift 8s ease-in-out infinite alternate}
.btc-orb-a{left:8%;top:58%}.btc-orb-b{right:13%;top:15%;transform:scale(.68);animation-delay:-3.2s}
.energy-platform{position:absolute;left:50%;bottom:-2vh;width:min(760px,94vw);height:210px;transform:translateX(-50%) perspective(650px) rotateX(67deg);transform-origin:center bottom;animation:platformBob 5s ease-in-out infinite alternate}
.platform-ring{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);border:2px solid rgba(43,186,255,.68);box-shadow:0 0 18px #0a8fff,inset 0 0 28px rgba(27,92,255,.28);animation:platformSpin 7s linear infinite}
.pr1{width:94%;height:62%}.pr2{width:72%;height:47%;animation-direction:reverse;animation-duration:5s}.pr3{width:49%;height:31%;animation-duration:3.8s}.platform-core{position:absolute;left:50%;top:50%;width:38%;height:22%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(224,252,255,.88),rgba(25,189,255,.52) 25%,rgba(12,78,220,.28) 55%,transparent 72%);box-shadow:0 0 55px rgba(28,178,255,.65);animation:corePulse 2.3s ease-in-out infinite}
@keyframes portalFloat{to{transform:translateX(-50%) translateY(14px) scale(1.035)}}
@keyframes portalSpin{to{transform:rotate(360deg)}}
@keyframes btcPulse{50%{transform:scale(1.07);filter:brightness(1.2)}}
@keyframes orbitTwist{to{transform:translateX(-50%) rotateX(68deg) rotateZ(360deg)}}
@keyframes ethFloat{to{transform:translate3d(-14px,-20px,0) rotate(3deg)}}
@keyframes ethShimmer{50%{filter:brightness(1.55) saturate(1.35);transform:scale(.96)}}
@keyframes orbDrift{to{transform:translate3d(26px,-28px,0) rotate(24deg)}}
@keyframes platformBob{to{bottom:0vh;filter:brightness(1.13)}}
@keyframes platformSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes corePulse{50%{opacity:.72;transform:translate(-50%,-50%) scale(1.12)}}
/* keep form fully readable above cinematic effects */
.auth-screen{z-index:5}.auth-panel{box-shadow:0 0 0 1px rgba(0,190,255,.12),0 26px 78px rgba(0,0,0,.55),0 0 48px rgba(0,129,255,.18)}
.auth-primary,.auth-bottom button,.auth-back,.auth-language{transition:color .16s ease,box-shadow .16s ease,filter .16s ease,transform .16s ease}
.auth-bottom button,.auth-back,.auth-language{color:#58f3ff!important;text-shadow:0 0 10px rgba(52,227,255,.28)}
.auth-primary:hover,.auth-primary:focus-visible,.auth-bottom button:hover,.auth-bottom button:focus-visible,.auth-back:hover,.auth-language:hover{box-shadow:0 0 0 1px rgba(74,235,255,.38),0 0 22px rgba(40,210,255,.42);filter:brightness(1.12)}
.auth-primary:active,.auth-bottom button:active,.auth-back:active,.auth-language:active{transform:scale(.985);box-shadow:0 0 0 1px #65f6ff,0 0 30px rgba(62,230,255,.72)}
@media(max-width:560px){
.portal-core{top:16%;width:190px;opacity:.72}.portal-orbit{top:16%}.orbit-2{width:250px}.orbit-3{width:300px}
.eth-crystal{right:-14px;top:41%;width:62px;height:118px;opacity:.78}
.btc-orb-a{left:-8px;top:57%}.btc-orb-b{right:5px;top:13%}
.energy-platform{bottom:-5vh;width:150vw;height:155px;opacity:.85}
}
@media(prefers-reduced-motion:reduce){.portal-core,.portal-core::before,.portal-core::after,.portal-orbit,.eth-crystal,.eth-crystal i,.btc-orb,.energy-platform,.platform-ring,.platform-core{animation:none!important}}
/* =========================================================
AUTH FORM FORMAT RESTORE — keep original login/register card layout
Dynamic crypto background remains; only the card/chrome is restored.
========================================================= */
.auth-screen{
width:min(540px,100%)!important;
min-height:100vh!important;
margin:0 auto!important;
padding:6px 4px 28px!important;
justify-content:center!important;
}
/* The old screenshots do not have a CryptoPro brand row above the form. */
.brand-row{display:none!important}
/* Keep language switching available, but outside the form so it cannot alter form layout. */
.auth-top{
position:fixed!important;
z-index:25!important;
top:12px!important;
right:12px!important;
left:auto!important;
margin:0!important;
width:auto!important;
display:block!important;
background:transparent!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
.auth-back{display:none!important}
.auth-language{
height:38px!important;
padding:0 12px!important;
border-radius:9px!important;
background:rgba(11,35,59,.84)!important;
border:1px solid rgba(67,133,188,.42)!important;
color:#33ded7!important;
font-size:14px!important;
box-shadow:0 5px 18px rgba(0,0,0,.22)!important;
}
.auth-panel{
width:100%!important;
border-radius:15px!important;
padding:28px 30px 28px!important;
background:#142a43!important;
border:1px solid #284c6d!important;
box-shadow:0 20px 55px rgba(0,0,0,.36)!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
}
.auth-panel h1{
margin:0 0 32px!important;
text-align:center!important;
font-size:28px!important;
line-height:1.2!important;
color:#eef4fb!important;
text-shadow:none!important;
}
.auth-panel form{gap:10px!important}
.auth-panel label{
margin-top:6px!important;
color:#d0dae6!important;
font-size:15px!important;
}
.auth-panel input{
width:100%!important;
height:60px!important;
border-radius:12px!important;
border:1px solid #3b607f!important;
background:#0b1e32!important;
color:#fff!important;
padding:0 17px!important;
font-size:17px!important;
box-shadow:none!important;
}
.auth-panel input::placeholder{color:#748494!important}
.auth-panel input:focus{
border-color:#35d9d0!important;
box-shadow:0 0 0 2px rgba(53,217,208,.12)!important;
}
.auth-primary{
width:100%!important;
height:60px!important;
margin-top:17px!important;
border-radius:11px!important;
background:#2ed0c8!important;
color:#061927!important;
font-size:20px!important;
font-weight:800!important;
box-shadow:none!important;
}
.auth-bottom{
margin-top:22px!important;
gap:12px!important;
}
.auth-bottom.two{
grid-template-columns:1fr 1fr!important;
}
.auth-bottom button{
min-height:56px!important;
border-radius:11px!important;
border:1px solid #345b7e!important;
background:#18324f!important;
color:#edf4fb!important;
font-size:18px!important;
font-weight:700!important;
text-shadow:none!important;
box-shadow:none!important;
}
#registerBottom{
display:block!important;
}
#registerBottom[hidden]{display:none!important}
#registerBottom #loginBtn{
width:232px!important;
max-width:72%!important;
}
.auth-hint{display:none!important}
/* Do not let cinematic decoration recolor or resize the original form controls. */
.auth-primary:hover,.auth-primary:focus-visible{
filter:brightness(1.06)!important;
box-shadow:0 0 18px rgba(46,208,200,.28)!important;
}
.auth-bottom button:hover,.auth-bottom button:focus-visible{
color:#fff!important;
filter:brightness(1.07)!important;
box-shadow:0 0 14px rgba(63,179,255,.18)!important;
}
.auth-primary:active,.auth-bottom button:active{
transform:scale(.992)!important;
}
@media(max-width:560px){
.auth-screen{
width:100%!important;
padding:5px 4px 22px!important;
justify-content:flex-start!important;
}
.auth-panel{
padding:26px 30px 24px!important;
border-radius:14px!important;
margin-top:0!important;
}
.auth-panel h1{
font-size:28px!important;
margin-bottom:30px!important;
}
.auth-panel input{height:60px!important}
.auth-primary{height:60px!important}
.auth-bottom.two{grid-template-columns:1fr 1fr!important}
.auth-bottom button{min-height:56px!important;font-size:18px!important}
#registerBottom #loginBtn{width:232px!important;max-width:72%!important}
.auth-language{height:34px!important;font-size:13px!important;opacity:.90!important}
}
/* =========================================================
AUTH LOGIN FIELD / CLOSE / BRAND LOGO / BTC ROTOR FINAL
========================================================= */
/* hidden must win over #registerFields{display:contents}; login only shows account + password */
#registerFields[hidden]{display:none!important}
#loginBottom[hidden],#registerBottom[hidden]{display:none!important}
/* top-left close button: returns to platform home */
.auth-top{
position:fixed!important;
top:8px!important;
right:8px!important;
left:8px!important;
width:auto!important;
display:flex!important;
justify-content:space-between!important;
align-items:center!important;
z-index:40!important;
pointer-events:none!important;
}
.auth-back,.auth-language{pointer-events:auto!important}
.auth-back{
display:grid!important;
place-items:center!important;
width:36px!important;
height:36px!important;
padding:0!important;
border-radius:9px!important;
color:#72f7ff!important;
font-size:24px!important;
line-height:1!important;
background:rgba(8,31,57,.88)!important;
border:1px solid rgba(70,188,237,.48)!important;
box-shadow:0 0 16px rgba(32,191,255,.18)!important;
}
.auth-back:hover,.auth-back:focus-visible{
color:#fff!important;
border-color:#45efff!important;
box-shadow:0 0 22px rgba(47,226,255,.55)!important;
}
/* logo sits immediately to the left of Account Login / Email Registration */
.auth-title-row{
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:12px!important;
margin:0 0 32px!important;
min-height:46px!important;
}
.auth-title-row h1{
margin:0!important;
text-align:left!important;
}
.auth-brand-logo,.auth-brand-logo-fallback{
width:44px!important;
height:44px!important;
flex:0 0 44px!important;
border-radius:12px!important;
}
.auth-brand-logo{
display:block!important;
object-fit:contain!important;
background:rgba(4,21,41,.68)!important;
border:1px solid rgba(55,203,255,.52)!important;
box-shadow:0 0 18px rgba(41,187,255,.28)!important;
padding:3px!important;
}
.auth-brand-logo[hidden]{display:none!important}
.auth-brand-logo-fallback{
display:grid;
place-items:center;
color:#0d2034;
font-size:27px;
font-weight:900;
background:radial-gradient(circle at 35% 30%,#ffe7a2,#f5a623 50%,#b96704 76%);
border:1px solid rgba(255,215,104,.75);
box-shadow:0 0 18px rgba(255,177,40,.32);
}
/* animated BTC rotor below the form, in the energy-platform area */
.login-btc-wheel{
position:relative!important;
z-index:3!important;
width:118px!important;
height:118px!important;
margin:20px auto 2px!important;
display:grid!important;
place-items:center!important;
border-radius:50%!important;
background:radial-gradient(circle,rgba(16,122,255,.18),rgba(4,28,64,.34) 50%,transparent 72%)!important;
filter:drop-shadow(0 0 22px rgba(24,169,255,.45))!important;
animation:authBtcFloat 4.4s ease-in-out infinite alternate!important;
}
.login-btc-wheel span{
position:relative!important;
z-index:4!important;
width:66px!important;
height:66px!important;
display:grid!important;
place-items:center!important;
border-radius:50%!important;
color:#301900!important;
font-size:39px!important;
font-weight:900!important;
background:radial-gradient(circle at 35% 28%,#fff0ae,#ffb32c 46%,#b76000 76%)!important;
border:2px solid rgba(255,223,135,.90)!important;
box-shadow:0 0 16px rgba(255,187,55,.58),inset 0 0 10px rgba(255,255,255,.34)!important;
animation:authBtcCoinSpin 6s linear infinite!important;
}
.login-btc-wheel i,.login-btc-wheel b{
position:absolute!important;
inset:7px!important;
border-radius:50%!important;
border:2px dashed rgba(57,215,255,.72)!important;
box-shadow:0 0 16px rgba(42,185,255,.42),inset 0 0 14px rgba(40,104,255,.18)!important;
animation:authBtcRingSpin 8s linear infinite!important;
}
.login-btc-wheel b{
inset:-5px!important;
border-style:solid!important;
border-color:rgba(83,103,255,.20) rgba(43,230,255,.68) rgba(83,103,255,.20) rgba(43,230,255,.68)!important;
animation-duration:11s!important;
animation-direction:reverse!important;
}
@keyframes authBtcCoinSpin{to{transform:rotateY(360deg) rotateZ(360deg)}}
@keyframes authBtcRingSpin{to{transform:rotate(360deg)}}
@keyframes authBtcFloat{to{transform:translateY(-9px) scale(1.035);filter:drop-shadow(0 0 30px rgba(24,169,255,.68))}}
@media(max-width:560px){
.auth-title-row{margin-bottom:30px!important;gap:10px!important}
.auth-brand-logo,.auth-brand-logo-fallback{width:38px!important;height:38px!important;flex-basis:38px!important;border-radius:10px!important}
.auth-brand-logo-fallback{font-size:24px!important}
.login-btc-wheel{width:104px!important;height:104px!important;margin-top:18px!important}
.login-btc-wheel span{width:58px!important;height:58px!important;font-size:34px!important}
}
@media(prefers-reduced-motion:reduce){.login-btc-wheel,.login-btc-wheel span,.login-btc-wheel i,.login-btc-wheel b{animation:none!important}}
/* =========================================================
3D METALLIC BTC DISPLAY - FINAL
========================================================= */
.login-btc-wheel{
perspective:900px!important;
width:170px!important;
height:132px!important;
margin:18px auto 0!important;
background:radial-gradient(ellipse at center,rgba(16,148,255,.20),rgba(4,28,64,.18) 48%,transparent 72%)!important;
overflow:visible!important;
}
.btc-coin-3d{
position:absolute!important;
left:50%!important;
top:5px!important;
width:86px!important;
height:86px!important;
transform-style:preserve-3d!important;
transform:translateX(-50%) rotateX(-8deg)!important;
animation:btcCoin3DRotate 5.8s linear infinite!important;
z-index:8!important;
filter:drop-shadow(0 13px 10px rgba(0,0,0,.42)) drop-shadow(0 0 22px rgba(255,178,35,.54))!important;
}
.btc-face{
position:absolute!important;
inset:0!important;
display:grid!important;
place-items:center!important;
border-radius:50%!important;
backface-visibility:hidden!important;
font-size:49px!important;
line-height:1!important;
font-weight:1000!important;
font-family:Arial Black,Arial,sans-serif!important;
color:#5c3000!important;
border:5px double #ffd76a!important;
background:
radial-gradient(circle at 31% 24%,rgba(255,255,255,.94) 0 3%,transparent 4%),
repeating-conic-gradient(from 0deg,rgba(255,235,146,.28) 0 5deg,rgba(133,67,0,.08) 5deg 10deg),
radial-gradient(circle at 36% 30%,#fff2aa 0 8%,#ffd35b 25%,#f6a91a 54%,#b96807 77%,#704000 100%)!important;
box-shadow:inset 0 0 0 4px #a75a05,inset 0 0 0 7px rgba(255,224,116,.72),inset -9px -10px 18px rgba(83,34,0,.32),inset 9px 8px 16px rgba(255,255,255,.24)!important;
text-shadow:1px 1px 0 #ffd66a,-1px -1px 0 #7d4300,0 0 6px rgba(255,207,82,.48)!important;
}
.btc-front{transform:translateZ(7px)!important}
.btc-back{transform:rotateY(180deg) translateZ(7px)!important}
.btc-edge{
position:absolute!important;
left:4px!important;right:4px!important;top:50%!important;height:14px!important;
transform:translateY(-50%) rotateX(90deg)!important;
border-radius:50%!important;
background:repeating-linear-gradient(90deg,#8b4a03 0 3px,#f9bf35 3px 6px,#6d3800 6px 8px)!important;
box-shadow:0 0 8px rgba(255,183,43,.36)!important;
}
.btc-orbit-ring{
position:absolute!important;
left:50%!important;top:40px!important;
width:126px!important;height:50px!important;
border-radius:50%!important;
border:1.5px solid rgba(49,213,255,.78)!important;
box-shadow:0 0 12px rgba(24,187,255,.56),inset 0 0 10px rgba(36,95,255,.22)!important;
transform:translateX(-50%) rotateX(69deg)!important;
animation:btcOrbitSweep 4.5s linear infinite!important;
z-index:4!important;
}
.btc-orbit-ring.ring-two{width:148px!important;height:62px!important;top:35px!important;border-style:dashed!important;border-color:rgba(70,103,255,.52)!important;animation-duration:7.6s!important;animation-direction:reverse!important}
.btc-floor-glow{
position:absolute!important;
left:50%!important;bottom:4px!important;
width:154px!important;height:34px!important;
transform:translateX(-50%)!important;
border-radius:50%!important;
background:radial-gradient(ellipse,rgba(27,209,255,.68),rgba(26,87,255,.24) 48%,transparent 72%)!important;
box-shadow:0 0 24px rgba(30,183,255,.52)!important;
animation:btcFloorPulse 2.3s ease-in-out infinite alternate!important;
}
@keyframes btcCoin3DRotate{
0%{transform:translateX(-50%) rotateX(-8deg) rotateY(0deg) rotateZ(-2deg)}
50%{transform:translateX(-50%) rotateX(5deg) rotateY(180deg) rotateZ(2deg)}
100%{transform:translateX(-50%) rotateX(-8deg) rotateY(360deg) rotateZ(-2deg)}
}
@keyframes btcOrbitSweep{to{transform:translateX(-50%) rotateX(69deg) rotateZ(360deg)}}
@keyframes btcFloorPulse{to{transform:translateX(-50%) scale(1.13);opacity:.74}}
@media(max-width:560px){
.login-btc-wheel{width:150px!important;height:122px!important;margin-top:14px!important}
.btc-coin-3d{width:78px!important;height:78px!important}
.btc-face{font-size:43px!important}
.btc-orbit-ring{width:116px!important}.btc-orbit-ring.ring-two{width:136px!important}
}
@media(prefers-reduced-motion:reduce){.btc-coin-3d,.btc-orbit-ring,.btc-floor-glow{animation:none!important}}
/* =========================================================
BRAND LOGO REPLACE MODE - FINAL
Uploaded platform logo replaces the default BTC icon.
Never display two logos side by side.
========================================================= */
.auth-title-row .auth-brand-logo-fallback,
.auth-title-row .auth-brand-logo{
display:none!important;
}
.auth-brand-logo-slot{
width:44px!important;
height:44px!important;
flex:0 0 44px!important;
display:grid!important;
place-items:center!important;
overflow:hidden!important;
border-radius:12px!important;
}
.auth-brand-logo-default{
width:100%!important;
height:100%!important;
display:grid!important;
place-items:center!important;
color:#0d2034!important;
font-size:27px!important;
font-weight:900!important;
background:radial-gradient(circle at 35% 30%,#ffe7a2,#f5a623 50%,#b96704 76%)!important;
border:1px solid rgba(255,215,104,.75)!important;
box-shadow:0 0 18px rgba(255,177,40,.32)!important;
box-sizing:border-box!important;
}
.auth-brand-logo-image{
width:100%!important;
height:100%!important;
display:block!important;
object-fit:contain!important;
border-radius:10px!important;
background:rgba(4,21,41,.68)!important;
border:1px solid rgba(55,203,255,.52)!important;
box-shadow:0 0 18px rgba(41,187,255,.28)!important;
box-sizing:border-box!important;
}
@media(max-width:560px){
.auth-brand-logo-slot{width:38px!important;height:38px!important;flex-basis:38px!important;border-radius:10px!important}
.auth-brand-logo-default{font-size:24px!important}
}
/* =========================================================
COIN + PEDESTAL / LARGE 800x800 BRAND LOGO - FINAL
========================================================= */
.auth-title-row{gap:14px!important}
.auth-brand-logo-slot{
width:60px!important;height:60px!important;flex:0 0 60px!important;
border-radius:15px!important;
}
.auth-brand-logo-image{
border-radius:14px!important;
padding:2px!important;
object-fit:contain!important;
background:rgba(3,18,37,.52)!important;
box-shadow:0 0 22px rgba(35,205,255,.38),0 0 0 1px rgba(68,214,255,.28)!important;
}
.auth-brand-logo-default{font-size:36px!important;border-radius:14px!important}
.login-btc-wheel{
width:230px!important;height:175px!important;margin:16px auto 0!important;
perspective:1100px!important;background:none!important;overflow:visible!important;
}
.btc-coin-3d{
top:2px!important;width:94px!important;height:94px!important;
transform-origin:50% 50%!important;
animation:btcPhysicalCoinRotate 5.2s cubic-bezier(.42,0,.58,1) infinite!important;
filter:drop-shadow(0 12px 9px rgba(0,0,0,.48)) drop-shadow(0 0 20px rgba(255,173,25,.48))!important;
}
.btc-face{
border-radius:50%!important;border:4px solid #ffd86c!important;
box-shadow:inset 0 0 0 3px #9b5000,inset 0 0 0 7px rgba(255,225,121,.68),inset -12px -12px 20px rgba(83,34,0,.36),inset 10px 9px 18px rgba(255,255,255,.28)!important;
background:
radial-gradient(circle at 30% 22%,rgba(255,255,255,.96) 0 3%,transparent 4%),
repeating-conic-gradient(from 0deg,rgba(255,239,167,.22) 0 4deg,rgba(120,57,0,.06) 4deg 8deg),
radial-gradient(circle at 38% 31%,#fff5ba 0 7%,#ffd35c 24%,#f3a417 52%,#b86405 78%,#713900 100%)!important;
font-size:50px!important;
}
.btc-front{transform:translateZ(8px)!important}
.btc-back{transform:rotateY(180deg) translateZ(8px)!important}
.btc-edge{
left:2px!important;right:2px!important;height:16px!important;
background:repeating-linear-gradient(90deg,#713600 0 3px,#ffc94e 3px 5px,#8c4800 5px 8px)!important;
box-shadow:inset 0 2px 2px rgba(255,240,165,.55),0 0 10px rgba(255,176,31,.4)!important;
}
@keyframes btcPhysicalCoinRotate{
0%{transform:translateX(-50%) translateY(0) rotateX(-7deg) rotateY(0deg)}
24%{transform:translateX(-50%) translateY(-5px) rotateX(-4deg) rotateY(86deg)}
50%{transform:translateX(-50%) translateY(0) rotateX(3deg) rotateY(180deg)}
76%{transform:translateX(-50%) translateY(-5px) rotateX(-3deg) rotateY(274deg)}
100%{transform:translateX(-50%) translateY(0) rotateX(-7deg) rotateY(360deg)}
}
.btc-pedestal{
position:absolute!important;left:50%!important;bottom:13px!important;
width:205px!important;height:64px!important;transform:translateX(-50%)!important;
z-index:3!important;filter:drop-shadow(0 18px 15px rgba(0,0,0,.54))!important;
}
.pedestal-top{
position:absolute!important;left:50%!important;top:0!important;width:190px!important;height:47px!important;
transform:translateX(-50%) perspective(300px) rotateX(66deg)!important;border-radius:50%!important;
background:radial-gradient(ellipse at center,rgba(4,15,31,.95) 0 31%,rgba(15,124,218,.64) 40%,#071a31 55%,#1387cf 65%,#020914 75%)!important;
border:2px solid rgba(44,194,255,.8)!important;
box-shadow:0 0 18px rgba(0,175,255,.58),inset 0 0 18px rgba(14,151,255,.45)!important;
}
.pedestal-body{
position:absolute!important;left:50%!important;top:28px!important;width:174px!important;height:29px!important;transform:translateX(-50%)!important;
border-radius:0 0 50% 50% / 0 0 70% 70%!important;
background:linear-gradient(180deg,#0a3156,#041222 60%,#020812)!important;
border-left:2px solid rgba(31,168,241,.6)!important;border-right:2px solid rgba(31,168,241,.6)!important;border-bottom:2px solid rgba(42,195,255,.72)!important;
box-shadow:0 9px 22px rgba(0,0,0,.5),0 0 14px rgba(17,141,255,.28)!important;
}
.pedestal-ring{
position:absolute!important;left:50%!important;border-radius:50%!important;transform:translateX(-50%) rotateX(68deg)!important;
border:1.5px solid rgba(38,213,255,.78)!important;box-shadow:0 0 12px rgba(35,180,255,.55)!important;
animation:pedestalRingSpin 5.2s linear infinite!important;
}
.pedestal-ring.ring-a{top:-8px!important;width:220px!important;height:58px!important}
.pedestal-ring.ring-b{top:-15px!important;width:238px!important;height:68px!important;border-style:dashed!important;animation-duration:8.2s!important;animation-direction:reverse!important}
@keyframes pedestalRingSpin{to{transform:translateX(-50%) rotateX(68deg) rotateZ(360deg)}}
.btc-orbit-ring{top:52px!important;opacity:.7!important}.btc-orbit-ring.ring-two{top:46px!important}
.btc-floor-glow{bottom:1px!important;width:210px!important;height:34px!important}
@media(max-width:560px){
.auth-brand-logo-slot{width:52px!important;height:52px!important;flex-basis:52px!important}
.auth-brand-logo-default{font-size:31px!important}
.login-btc-wheel{width:210px!important;height:160px!important;margin-top:12px!important}
.btc-coin-3d{width:84px!important;height:84px!important}
.btc-face{font-size:44px!important}
.btc-pedestal{transform:translateX(-50%) scale(.9)!important;transform-origin:center bottom!important}
}
/* =========================================================
BTC PHYSICAL COIN + PEDESTAL V2
Uses unique DIV-only markup to avoid collisions with legacy
.login-btc-wheel span/i/b rules.
========================================================= */
.btc-showcase-v2{
position:relative!important;
width:300px!important;
height:205px!important;
margin:18px auto 0!important;
overflow:visible!important;
perspective:1200px!important;
transform-style:preserve-3d!important;
z-index:5!important;
filter:none!important;
background:transparent!important;
}
.btc-stage-v2{
position:absolute!important;
left:50%!important;
top:0!important;
width:128px!important;
height:128px!important;
transform:translateX(-50%)!important;
perspective:1000px!important;
transform-style:preserve-3d!important;
z-index:20!important;
}
.btc-medallion-v2{
position:absolute!important;
left:50%!important;
top:4px!important;
width:112px!important;
height:112px!important;
transform-style:preserve-3d!important;
transform-origin:50% 50%!important;
animation:btcMedallionTurnV2 5.6s linear infinite!important;
filter:drop-shadow(0 14px 10px rgba(0,0,0,.58)) drop-shadow(0 0 22px rgba(255,177,39,.52))!important;
}
.btc-face-v2{
position:absolute!important;
inset:0!important;
border-radius:50%!important;
display:grid!important;
place-items:center!important;
backface-visibility:hidden!important;
overflow:hidden!important;
border:5px ridge #ffce57!important;
background:
radial-gradient(circle at 29% 22%,rgba(255,255,255,.92) 0 3%,transparent 4%),
repeating-conic-gradient(from 0deg,rgba(255,240,174,.23) 0 3deg,rgba(111,52,0,.08) 3deg 7deg),
radial-gradient(circle at 38% 32%,#fff6c0 0 8%,#ffd967 21%,#f1a419 50%,#bd6809 74%,#743900 100%)!important;
box-shadow:
inset 0 0 0 4px #8f4700,
inset 0 0 0 9px rgba(255,222,113,.72),
inset -15px -14px 23px rgba(81,31,0,.42),
inset 12px 11px 20px rgba(255,255,255,.27)!important;
}
.btc-front-v2{transform:translateZ(9px)!important}
.btc-back-v2{transform:rotateY(180deg) translateZ(9px)!important}
.btc-side-v2{
position:absolute!important;
left:50%!important;
top:50%!important;
width:18px!important;
height:101px!important;
transform:translate(-50%,-50%) rotateY(90deg)!important;
border-radius:8px!important;
background:repeating-linear-gradient(180deg,#6b3300 0 4px,#f9c443 4px 7px,#8b4800 7px 10px)!important;
box-shadow:inset 2px 0 3px rgba(255,235,153,.6),inset -2px 0 3px rgba(65,25,0,.7)!important;
}
.btc-symbol-v2{
width:66px!important;
height:66px!important;
border-radius:50%!important;
display:grid!important;
place-items:center!important;
color:#5b2e00!important;
font:900 57px/1 Arial Black,Arial,sans-serif!important;
text-shadow:1px 1px 0 #ffe08b,-1px -1px 0 #7f3f00,0 0 5px rgba(255,212,93,.5)!important;
border:2px solid rgba(126,66,3,.7)!important;
box-shadow:inset 0 0 0 3px rgba(255,230,133,.55)!important;
background:rgba(255,202,62,.18)!important;
}
@keyframes btcMedallionTurnV2{
0%{transform:translateX(-50%) translateY(0) rotateX(-7deg) rotateY(0deg)}
22%{transform:translateX(-50%) translateY(-6px) rotateX(-3deg) rotateY(79deg)}
25%{transform:translateX(-50%) translateY(-7px) rotateX(0deg) rotateY(90deg)}
50%{transform:translateX(-50%) translateY(0) rotateX(5deg) rotateY(180deg)}
75%{transform:translateX(-50%) translateY(-7px) rotateX(0deg) rotateY(270deg)}
100%{transform:translateX(-50%) translateY(0) rotateX(-7deg) rotateY(360deg)}
}
.btc-pedestal-v2{
position:absolute!important;
left:50%!important;
top:103px!important;
width:278px!important;
height:88px!important;
transform:translateX(-50%)!important;
z-index:8!important;
filter:drop-shadow(0 18px 15px rgba(0,0,0,.65))!important;
}
.btc-platform-top-v2{
position:absolute!important;
left:50%!important;
top:10px!important;
width:245px!important;
height:67px!important;
transform:translateX(-50%) rotateX(67deg)!important;
border-radius:50%!important;
background:radial-gradient(ellipse at center,#06101d 0 28%,#0a3459 37%,#138fd0 48%,#07192c 57%,#20c5ff 66%,#03101d 74%)!important;
border:3px solid rgba(43,203,255,.9)!important;
box-shadow:0 0 24px rgba(0,173,255,.68),inset 0 0 24px rgba(0,144,255,.52)!important;
}
.btc-platform-body-v2{
position:absolute!important;
left:50%!important;
top:43px!important;
width:220px!important;
height:37px!important;
transform:translateX(-50%)!important;
border-radius:3px 3px 50% 50% / 3px 3px 78% 78%!important;
background:linear-gradient(180deg,#0d416c 0,#081f37 32%,#03101f 70%,#020812 100%)!important;
border-left:3px solid rgba(35,180,246,.7)!important;
border-right:3px solid rgba(35,180,246,.7)!important;
border-bottom:3px solid rgba(39,205,255,.82)!important;
box-shadow:0 12px 28px rgba(0,0,0,.58),0 0 19px rgba(20,151,255,.38)!important;
}
.btc-platform-lip-v2{
position:absolute!important;
left:50%!important;
bottom:1px!important;
width:235px!important;
height:20px!important;
transform:translateX(-50%)!important;
border-radius:50%!important;
border-bottom:4px solid #20cfff!important;
background:linear-gradient(180deg,rgba(9,49,82,.7),rgba(1,8,16,.96))!important;
box-shadow:0 7px 17px rgba(0,0,0,.55),0 0 15px rgba(26,191,255,.55)!important;
}
.btc-platform-ring-v2{
position:absolute!important;
left:50%!important;
border-radius:50%!important;
transform-style:preserve-3d!important;
border:2px solid rgba(40,220,255,.72)!important;
box-shadow:0 0 14px rgba(21,184,255,.65)!important;
z-index:13!important;
}
.ring-outer-v2{
top:-6px!important;width:290px!important;height:80px!important;
animation:btcPlatformRingOuterV2 7.5s linear infinite!important;
border-style:dashed!important;
}
.ring-inner-v2{
top:5px!important;width:256px!important;height:66px!important;
animation:btcPlatformRingInnerV2 5.4s linear infinite reverse!important;
}
@keyframes btcPlatformRingOuterV2{to{transform:translateX(-50%) rotateX(67deg) rotateZ(360deg)}}
@keyframes btcPlatformRingInnerV2{to{transform:translateX(-50%) rotateX(67deg) rotateZ(-360deg)}}
.btc-ground-glow-v2{
position:absolute!important;
left:50%!important;
bottom:0!important;
width:275px!important;
height:38px!important;
transform:translateX(-50%)!important;
border-radius:50%!important;
background:radial-gradient(ellipse,rgba(49,227,255,.72),rgba(27,96,255,.28) 44%,transparent 72%)!important;
filter:blur(3px)!important;
animation:btcGroundPulseV2 2.2s ease-in-out infinite alternate!important;
z-index:2!important;
}
@keyframes btcGroundPulseV2{to{transform:translateX(-50%) scaleX(1.12);opacity:.65}}
@media(max-width:560px){
.btc-showcase-v2{width:280px!important;height:192px!important;margin-top:12px!important}
.btc-stage-v2{width:115px!important;height:115px!important}
.btc-medallion-v2{width:100px!important;height:100px!important}
.btc-symbol-v2{width:59px!important;height:59px!important;font-size:51px!important}
.btc-pedestal-v2{top:93px!important;transform:translateX(-50%) scale(.92)!important;transform-origin:center top!important}
}
@media(prefers-reduced-motion:reduce){
.btc-medallion-v2,.ring-outer-v2,.ring-inner-v2,.btc-ground-glow-v2{animation:none!important}
}
/* =========================================================
BTC PHYSICAL COIN V3 — TRUE DEPTH / BEVELED METAL
========================================================= */
.btc-stage-v2{perspective:760px!important;perspective-origin:50% 42%!important;}
.btc-medallion-v2{display:none!important;}
.btc-medallion-v3{
position:absolute!important;
left:50%!important;
top:-2px!important;
width:124px!important;
height:124px!important;
transform-style:preserve-3d!important;
transform-origin:50% 50%!important;
animation:btcPhysicalDepthTurnV3 6.8s cubic-bezier(.42,0,.58,1) infinite!important;
filter:drop-shadow(0 16px 12px rgba(0,0,0,.62)) drop-shadow(0 0 25px rgba(255,173,28,.52))!important;
will-change:transform!important;
}
.btc-edge-stack-v3,
.btc-edge-stack-v3 i,
.btc-face-v3{position:absolute!important;inset:0!important;border-radius:50%!important;transform-style:preserve-3d!important;}
.btc-edge-stack-v3{z-index:1!important;}
.btc-edge-stack-v3 i{
display:block!important;
transform:translateZ(var(--z))!important;
border:5px solid #9a5206!important;
background:
repeating-conic-gradient(from 0deg,#f7c64f 0 2deg,#8f4700 2deg 4deg,#e69a13 4deg 6deg,#6f3300 6deg 8deg)!important;
box-shadow:
inset 0 0 0 2px rgba(255,224,130,.72),
inset 0 0 10px rgba(73,25,0,.78),
0 0 2px rgba(255,214,94,.45)!important;
}
.btc-face-v3{
z-index:6!important;
display:grid!important;
place-items:center!important;
overflow:hidden!important;
backface-visibility:hidden!important;
border:5px ridge #ffd66a!important;
background:
radial-gradient(circle at 28% 20%,rgba(255,255,255,.98) 0 2.5%,transparent 3.6%),
repeating-conic-gradient(from 0deg,rgba(255,249,196,.22) 0 2.2deg,rgba(91,38,0,.08) 2.2deg 5.5deg),
radial-gradient(circle at 38% 31%,#fff8c6 0 7%,#ffe080 16%,#f6b52a 43%,#d27c08 67%,#743600 100%)!important;
box-shadow:
inset 0 0 0 3px #8d4500,
inset 0 0 0 7px rgba(255,224,117,.72),
inset 13px 10px 17px rgba(255,255,255,.28),
inset -20px -16px 27px rgba(76,25,0,.55),
0 0 3px rgba(255,232,161,.8)!important;
}
.btc-front-v3{transform:translateZ(15px)!important;}
.btc-back-v3{transform:rotateY(180deg) translateZ(15px)!important;}
.btc-rim-v3{
position:absolute!important;
inset:10px!important;
border-radius:50%!important;
border:3px double rgba(116,55,0,.82)!important;
box-shadow:
inset 0 0 0 3px rgba(255,225,126,.58),
0 0 0 2px rgba(255,220,105,.35)!important;
}
.btc-rim-v3:before,
.btc-rim-v3:after{
content:""!important;
position:absolute!important;
inset:8px!important;
border-radius:50%!important;
border:1px dashed rgba(103,45,0,.72)!important;
}
.btc-rim-v3:after{inset:15px!important;border-style:solid!important;border-color:rgba(255,229,133,.62)!important;}
.btc-symbol-v3{
position:relative!important;
z-index:4!important;
width:71px!important;
height:71px!important;
display:grid!important;
place-items:center!important;
border-radius:50%!important;
color:#542700!important;
font:900 61px/1 "Arial Black",Arial,sans-serif!important;
text-shadow:
2px 2px 0 #ffdf78,
-2px -2px 0 #6f3100,
0 2px 3px rgba(58,19,0,.62)!important;
background:radial-gradient(circle,#ffd964 0 44%,#dda00f 70%,#a65c02 100%)!important;
border:2px solid rgba(115,53,0,.8)!important;
box-shadow:
inset 4px 4px 7px rgba(255,245,185,.45),
inset -6px -6px 10px rgba(94,35,0,.36)!important;
}
.btc-specular-v3{
position:absolute!important;
z-index:8!important;
width:44%!important;
height:135%!important;
left:-55%!important;
top:-18%!important;
transform:rotate(18deg)!important;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent)!important;
filter:blur(2px)!important;
animation:btcSpecularSweepV3 3.4s ease-in-out infinite!important;
pointer-events:none!important;
}
@keyframes btcSpecularSweepV3{
0%,18%{left:-65%;opacity:0}
38%{opacity:.75}
58%{left:125%;opacity:.12}
100%{left:125%;opacity:0}
}
@keyframes btcPhysicalDepthTurnV3{
0%{transform:translateX(-50%) translateY(1px) rotateX(-10deg) rotateY(-24deg) rotateZ(-2deg)}
16%{transform:translateX(-50%) translateY(-5px) rotateX(-6deg) rotateY(34deg) rotateZ(1deg)}
28%{transform:translateX(-50%) translateY(-7px) rotateX(-1deg) rotateY(83deg) rotateZ(2deg)}
34%{transform:translateX(-50%) translateY(-6px) rotateX(2deg) rotateY(101deg) rotateZ(2deg)}
50%{transform:translateX(-50%) translateY(0) rotateX(9deg) rotateY(156deg) rotateZ(0deg)}
66%{transform:translateX(-50%) translateY(-5px) rotateX(3deg) rotateY(214deg) rotateZ(-2deg)}
78%{transform:translateX(-50%) translateY(-7px) rotateX(-2deg) rotateY(263deg) rotateZ(-2deg)}
84%{transform:translateX(-50%) translateY(-5px) rotateX(-5deg) rotateY(282deg) rotateZ(-1deg)}
100%{transform:translateX(-50%) translateY(1px) rotateX(-10deg) rotateY(336deg) rotateZ(-2deg)}
}
@media(max-width:560px){
.btc-medallion-v3{width:112px!important;height:112px!important;top:1px!important;}
.btc-front-v3{transform:translateZ(14px)!important;}
.btc-back-v3{transform:rotateY(180deg) translateZ(14px)!important;}
.btc-symbol-v3{width:64px!important;height:64px!important;font-size:55px!important;}
}
/* =========================================================
BTC TRUE 3D TEXTURED COIN V4
- metallic texture from reference image
- visibly thick extruded edge
- complete centered energy rings
========================================================= */
/* Remove the old full-screen platform loop that was visually cut off on mobile. */
.crypto-scene .energy-platform{display:none!important;}
.btc-showcase-v2{display:none!important;}
.btc-showcase-v4{
position:relative!important;
width:min(360px,calc(100vw - 12px))!important;
height:235px!important;
margin:12px auto 0!important;
overflow:visible!important;
perspective:1100px!important;
transform-style:preserve-3d!important;
z-index:7!important;
}
.btc-coin-scene-v4{
position:absolute!important;
left:50%!important;
top:0!important;
width:148px!important;
height:148px!important;
transform:translateX(-50%)!important;
perspective:780px!important;
perspective-origin:50% 48%!important;
transform-style:preserve-3d!important;
z-index:30!important;
}
.btc-coin-v4{
position:absolute!important;
left:50%!important;
top:2px!important;
width:136px!important;
height:136px!important;
transform-style:preserve-3d!important;
transform-origin:50% 50%!important;
animation:btcTrue3DRockV4 5.8s ease-in-out infinite alternate!important;
filter:drop-shadow(0 18px 12px rgba(0,0,0,.68)) drop-shadow(0 0 28px rgba(255,174,35,.58))!important;
will-change:transform!important;
}
.btc-edge-v4,.btc-edge-v4 i,.btc-face-v4{
position:absolute!important;
inset:0!important;
border-radius:50%!important;
transform-style:preserve-3d!important;
}
.btc-edge-v4{z-index:2!important;}
.btc-edge-v4 i{
display:block!important;
transform:translateZ(var(--z))!important;
border:7px solid transparent!important;
background:
radial-gradient(circle at 50% 50%,transparent 0 78%,rgba(255,228,127,.92) 79% 82%,rgba(113,51,0,.95) 83% 86%,rgba(255,191,45,.95) 87% 92%,rgba(81,31,0,.98) 93% 100%)!important;
box-shadow:
inset 0 0 0 1px rgba(255,241,184,.45),
0 0 1px rgba(255,214,99,.5)!important;
}
.btc-edge-v4 i:nth-child(odd){filter:brightness(.76) saturate(1.25)!important;}
.btc-edge-v4 i:nth-child(even){filter:brightness(1.13) saturate(1.12)!important;}
.btc-face-v4{
z-index:10!important;
overflow:hidden!important;
backface-visibility:hidden!important;
background-image:url("assets/btc_coin_face_v4.webp")!important;
background-size:cover!important;
background-position:center!important;
border:4px solid #ffd96d!important;
box-shadow:
inset 9px 8px 18px rgba(255,255,255,.22),
inset -13px -12px 22px rgba(77,27,0,.46),
inset 0 0 0 3px rgba(112,48,0,.68),
0 0 4px rgba(255,224,130,.85)!important;
}
.btc-front-v4{transform:translateZ(20px)!important;}
.btc-back-v4{transform:rotateY(180deg) translateZ(20px)!important;}
.btc-face-shine-v4{
position:absolute!important;
top:-15%!important;
left:-58%!important;
width:42%!important;
height:135%!important;
transform:rotate(17deg)!important;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.66),rgba(255,244,190,.22),transparent)!important;
filter:blur(1.3px)!important;
animation:btcFaceShineV4 3.2s ease-in-out infinite!important;
}
@keyframes btcFaceShineV4{
0%,18%{left:-60%;opacity:0}
35%{opacity:.82}
60%{left:120%;opacity:.12}
100%{left:120%;opacity:0}
}
@keyframes btcTrue3DRockV4{
0%{transform:translateX(-50%) translateY(1px) rotateX(-8deg) rotateY(-34deg) rotateZ(-2deg)}
25%{transform:translateX(-50%) translateY(-7px) rotateX(-4deg) rotateY(-13deg) rotateZ(1deg)}
50%{transform:translateX(-50%) translateY(-10px) rotateX(1deg) rotateY(8deg) rotateZ(2deg)}
75%{transform:translateX(-50%) translateY(-6px) rotateX(5deg) rotateY(26deg) rotateZ(0deg)}
100%{transform:translateX(-50%) translateY(0) rotateX(8deg) rotateY(38deg) rotateZ(-2deg)}
}
.btc-pedestal-v4{
position:absolute!important;
left:50%!important;
top:119px!important;
width:344px!important;
height:105px!important;
transform:translateX(-50%)!important;
z-index:12!important;
overflow:visible!important;
}
.btc-ring-v4{
position:absolute!important;
left:50%!important;
border-radius:50%!important;
transform:translateX(-50%) rotateX(68deg)!important;
transform-style:preserve-3d!important;
border:2px solid rgba(39,218,255,.88)!important;
box-shadow:0 0 15px rgba(28,190,255,.82),inset 0 0 12px rgba(16,128,255,.28)!important;
transform-origin:center center!important;
}
.btc-ring-v4-a{
top:-9px!important;width:330px!important;height:92px!important;
border-style:dashed!important;
animation:btcRingFullA4 8s linear infinite!important;
}
.btc-ring-v4-b{
top:1px!important;width:292px!important;height:79px!important;
animation:btcRingFullB4 5.8s linear infinite reverse!important;
}
.btc-ring-v4-c{
top:12px!important;width:246px!important;height:64px!important;
border-color:rgba(72,240,255,.95)!important;
animation:btcRingFullC4 4.2s linear infinite!important;
}
@keyframes btcRingFullA4{to{transform:translateX(-50%) rotateX(68deg) rotateZ(360deg)}}
@keyframes btcRingFullB4{to{transform:translateX(-50%) rotateX(68deg) rotateZ(-360deg)}}
@keyframes btcRingFullC4{to{transform:translateX(-50%) rotateX(68deg) rotateZ(360deg)}}
.btc-base-top-v4{
position:absolute!important;
left:50%!important;top:22px!important;
width:260px!important;height:72px!important;
transform:translateX(-50%) rotateX(67deg)!important;
border-radius:50%!important;
background:radial-gradient(ellipse,#04101d 0 23%,#0b3760 34%,#159fdf 46%,#05213a 56%,#24cfff 64%,#061321 72%)!important;
border:3px solid rgba(66,218,255,.9)!important;
box-shadow:0 0 26px rgba(10,174,255,.75),inset 0 0 30px rgba(0,139,255,.46)!important;
}
.btc-base-body-v4{
position:absolute!important;
left:50%!important;top:57px!important;
width:240px!important;height:38px!important;
transform:translateX(-50%)!important;
border-radius:5px 5px 50% 50% / 5px 5px 78% 78%!important;
background:linear-gradient(180deg,#0b4b79,#06233d 38%,#03111f 74%,#010812)!important;
border-left:3px solid rgba(44,192,255,.72)!important;
border-right:3px solid rgba(44,192,255,.72)!important;
border-bottom:4px solid #1bc7ff!important;
box-shadow:0 14px 26px rgba(0,0,0,.62),0 0 18px rgba(19,170,255,.5)!important;
}
.btc-base-light-v4{
position:absolute!important;
left:50%!important;bottom:1px!important;
width:255px!important;height:18px!important;
transform:translateX(-50%)!important;
border-radius:50%!important;
background:radial-gradient(ellipse,rgba(99,238,255,.95),rgba(27,145,255,.45) 40%,transparent 72%)!important;
filter:blur(2px)!important;
animation:btcBasePulseV4 2s ease-in-out infinite alternate!important;
}
@keyframes btcBasePulseV4{to{transform:translateX(-50%) scaleX(1.1);opacity:.7}}
.btc-floor-glow-v4{
position:absolute!important;
left:50%!important;bottom:0!important;
width:330px!important;height:38px!important;
transform:translateX(-50%)!important;
border-radius:50%!important;
background:radial-gradient(ellipse,rgba(46,221,255,.42),rgba(15,83,255,.2) 48%,transparent 76%)!important;
filter:blur(4px)!important;
z-index:3!important;
}
@media(max-width:560px){
.btc-showcase-v4{width:calc(100vw - 8px)!important;max-width:350px!important;height:220px!important;margin-top:8px!important;}
.btc-coin-scene-v4{width:136px!important;height:136px!important;}
.btc-coin-v4{width:124px!important;height:124px!important;top:1px!important;}
.btc-front-v4{transform:translateZ(18px)!important;}
.btc-back-v4{transform:rotateY(180deg) translateZ(18px)!important;}
.btc-pedestal-v4{top:108px!important;width:340px!important;transform:translateX(-50%) scale(.94)!important;transform-origin:center top!important;}
.btc-ring-v4-a{width:326px!important;}
.btc-ring-v4-b{width:288px!important;}
.btc-ring-v4-c{width:242px!important;}
}
@media(prefers-reduced-motion:reduce){
.btc-coin-v4,.btc-face-shine-v4,.btc-ring-v4-a,.btc-ring-v4-b,.btc-ring-v4-c,.btc-base-light-v4{animation:none!important;}
}
/* =========================================================
BTC V5 — EXTRA ANIMATED HALOS AROUND THE 3D COIN
========================================================= */
.btc-coin-scene-v4{overflow:visible!important;}
.btc-halo-v5{
position:absolute!important;
left:50%!important;
top:50%!important;
border-radius:50%!important;
pointer-events:none!important;
transform-style:preserve-3d!important;
z-index:8!important;
opacity:.88!important;
}
.halo-v5-a{
width:182px!important;height:182px!important;
margin:-91px 0 0 -91px!important;
border:2px solid rgba(49,218,255,.78)!important;
border-left-color:rgba(44,121,255,.15)!important;
border-bottom-color:rgba(100,244,255,.28)!important;
box-shadow:0 0 18px rgba(29,190,255,.58),inset 0 0 20px rgba(19,113,255,.16)!important;
animation:btcHaloSpinV5A 7.4s linear infinite!important;
}
.halo-v5-b{
width:198px!important;height:112px!important;
margin:-56px 0 0 -99px!important;
border:2px dashed rgba(68,136,255,.72)!important;
box-shadow:0 0 16px rgba(44,110,255,.52)!important;
animation:btcHaloSpinV5B 5.2s linear infinite reverse!important;
}
.halo-v5-c{
width:162px!important;height:205px!important;
margin:-102px 0 0 -81px!important;
border:1px solid rgba(58,235,255,.62)!important;
border-right-width:3px!important;
box-shadow:0 0 14px rgba(44,220,255,.38)!important;
animation:btcHaloSpinV5C 9s linear infinite!important;
}
@keyframes btcHaloSpinV5A{to{transform:rotateZ(360deg) rotateX(58deg)}}
@keyframes btcHaloSpinV5B{to{transform:rotateZ(-360deg) rotateY(63deg)}}
@keyframes btcHaloSpinV5C{to{transform:rotateZ(360deg) rotateY(-54deg)}}
.btc-spark-v5{
position:absolute!important;
width:6px!important;height:6px!important;
border-radius:50%!important;
z-index:32!important;
pointer-events:none!important;
background:#a8f7ff!important;
box-shadow:0 0 8px #5eeaff,0 0 18px #159cff!important;
animation:btcSparkPulseV5 1.8s ease-in-out infinite alternate!important;
}
.spark-v5-1{left:2px!important;top:30px!important;animation-delay:-.4s!important}
.spark-v5-2{right:1px!important;top:78px!important;animation-delay:-1.1s!important}
.spark-v5-3{left:28px!important;bottom:2px!important;animation-delay:-.8s!important}
@keyframes btcSparkPulseV5{from{opacity:.2;transform:scale(.55)}to{opacity:1;transform:scale(1.4)}}
@media(max-width:560px){
.halo-v5-a{width:166px!important;height:166px!important;margin:-83px 0 0 -83px!important}
.halo-v5-b{width:182px!important;height:100px!important;margin:-50px 0 0 -91px!important}
.halo-v5-c{width:150px!important;height:188px!important;margin:-94px 0 0 -75px!important}
}
@media(prefers-reduced-motion:reduce){.btc-halo-v5,.btc-spark-v5{animation:none!important}}
/* =========================================================
AUTH CRYPTO FIELD V6 — textured side BTC + more currencies
Fixes the old white ETH rectangle and keeps decorations visible on mobile.
========================================================= */
.eth-crystal{display:none!important;}
/* Side BTC coins use the same textured face as the main 3D BTC. */
.btc-orb{
width:clamp(58px,5.8vw,88px)!important;
height:clamp(58px,5.8vw,88px)!important;
border-radius:50%!important;
font-size:0!important;
background-image:url("assets/btc_coin_face_v4.webp")!important;
background-size:cover!important;
background-position:center!important;
border:3px solid #d89823!important;
box-shadow:inset -8px 0 10px rgba(85,42,0,.7),inset 7px 0 8px rgba(255,240,160,.4),0 0 24px rgba(255,181,37,.55)!important;
transform-style:preserve-3d!important;
backface-visibility:visible!important;
animation:sideBtc3DSpinV6 6.4s linear infinite!important;
overflow:visible!important;
}
.btc-orb::before{
content:""!important;position:absolute!important;inset:-4px!important;border-radius:50%!important;
border:4px ridge rgba(255,202,77,.82)!important;transform:translateZ(-7px)!important;
box-shadow:inset 0 0 10px #5b3000!important;
}
.btc-orb::after{
content:""!important;position:absolute!important;inset:4px!important;border-radius:50%!important;
background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 47%,transparent 62%)!important;
mix-blend-mode:screen!important;animation:sideBtcShineV6 2.8s ease-in-out infinite!important;
}
.btc-orb-a{left:6%!important;top:55%!important;}
.btc-orb-b{right:10%!important;top:14%!important;animation-delay:-2.1s!important;}
@keyframes sideBtc3DSpinV6{0%{transform:rotateY(-32deg) rotateX(7deg)}50%{transform:rotateY(32deg) rotateX(-5deg)}100%{transform:rotateY(-32deg) rotateX(7deg)}}
@keyframes sideBtcShineV6{0%,100%{opacity:.12;transform:translateX(-16%)}50%{opacity:.9;transform:translateX(16%)}}
.float-crypto-coin{
position:absolute!important;z-index:3!important;width:clamp(44px,4.6vw,70px)!important;height:clamp(44px,4.6vw,70px)!important;
border-radius:50%!important;display:grid!important;place-items:center!important;pointer-events:none!important;
transform-style:preserve-3d!important;border:2px solid rgba(255,255,255,.22)!important;
box-shadow:inset -7px -5px 11px rgba(0,0,0,.42),inset 5px 4px 9px rgba(255,255,255,.22),0 0 22px currentColor!important;
animation:floatCryptoCoinV6 7s ease-in-out infinite alternate!important;
}
.float-crypto-coin::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(255,255,255,.18);transform:translateZ(-6px)}
.float-crypto-coin span{font-size:clamp(24px,2.7vw,40px)!important;font-weight:900!important;text-shadow:0 2px 6px rgba(0,0,0,.45)!important;}
.float-eth{left:12%!important;top:24%!important;color:#a9c9ff!important;background:radial-gradient(circle at 32% 26%,#ecf5ff,#7088c9 42%,#263b7d 72%)!important;animation-delay:-1.8s!important;}
.float-usdt{right:7%!important;top:49%!important;color:#78ffe0!important;background:radial-gradient(circle at 32% 26%,#cafff3,#2dbf9e 45%,#08745f 74%)!important;animation-delay:-4.1s!important;}
.float-bnb{left:18%!important;top:72%!important;color:#ffe36b!important;background:radial-gradient(circle at 32% 26%,#fff5aa,#e5b51e 45%,#795800 74%)!important;animation-delay:-2.7s!important;}
.float-sol{right:19%!important;top:74%!important;color:#be7cff!important;background:linear-gradient(145deg,#00f2d6,#6558ff 52%,#c43cff)!important;animation-delay:-5.2s!important;}
@keyframes floatCryptoCoinV6{0%{transform:translate3d(0,0,0) rotateY(-22deg) rotateZ(-5deg)}50%{transform:translate3d(12px,-20px,0) rotateY(30deg) rotateZ(7deg)}100%{transform:translate3d(-8px,12px,0) rotateY(-14deg) rotateZ(-8deg)}}
@media(max-width:560px){
/* Keep half of each coin visible along the edge above the opaque form card. */
.btc-orb,.float-crypto-coin{z-index:7!important;width:38px!important;height:38px!important;opacity:.93!important;}
.btc-orb{border-width:2px!important;}
.btc-orb-a{left:-19px!important;top:35%!important;}
.btc-orb-b{right:-19px!important;top:20%!important;}
.float-crypto-coin span{font-size:20px!important;}
.float-eth{left:-19px!important;top:49%!important;}
.float-usdt{right:-19px!important;top:54%!important;}
.float-bnb{left:-19px!important;top:68%!important;}
.float-sol{right:-19px!important;top:72%!important;}
}
@media(prefers-reduced-motion:reduce){.btc-orb,.float-crypto-coin,.btc-orb::after{animation:none!important}}
/* ===== V7 AUTH GLASS PANEL — translucent so animated background remains visible ===== */
.auth-panel{
background:linear-gradient(180deg,rgba(12,39,70,.62),rgba(5,24,46,.58))!important;
border-color:rgba(64,162,235,.52)!important;
box-shadow:0 0 0 1px rgba(0,190,255,.08),0 24px 68px rgba(0,0,0,.36),0 0 42px rgba(0,118,255,.12)!important;
-webkit-backdrop-filter:blur(11px) saturate(125%)!important;
backdrop-filter:blur(11px) saturate(125%)!important;
}
.auth-panel input{
background:rgba(4,22,43,.70)!important;
}
.auth-bottom button{
background:rgba(24,53,83,.64)!important;
-webkit-backdrop-filter:blur(8px)!important;
backdrop-filter:blur(8px)!important;
}
@media(max-width:560px){
.auth-panel{background:linear-gradient(180deg,rgba(12,39,70,.58),rgba(5,24,46,.54))!important;}
}
/* =========================================================
V8 AUTH CRYSTAL GLASS — lighter transparent panel
Background animation remains clearly visible while text fields stay readable.
========================================================= */
.auth-panel{
background:
linear-gradient(180deg,rgba(10,38,68,.34),rgba(3,22,42,.27))!important;
border:1px solid rgba(77,188,255,.44)!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 18px 52px rgba(0,0,0,.26),
0 0 36px rgba(0,154,255,.10)!important;
-webkit-backdrop-filter:blur(5px) saturate(116%)!important;
backdrop-filter:blur(5px) saturate(116%)!important;
}
.auth-panel::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:
linear-gradient(125deg,rgba(102,216,255,.07),transparent 30%,transparent 72%,rgba(59,149,255,.05));
}
.auth-panel form,.auth-title-row,.auth-bottom,.auth-hint{position:relative;z-index:1;}
.auth-panel input{
background:rgba(2,19,37,.58)!important;
border-color:rgba(89,169,228,.46)!important;
box-shadow:inset 0 0 18px rgba(0,0,0,.10)!important;
}
.auth-panel input:focus{
background:rgba(3,25,46,.66)!important;
border-color:rgba(58,226,255,.80)!important;
box-shadow:0 0 0 2px rgba(38,222,255,.10),0 0 18px rgba(0,196,255,.16)!important;
}
.auth-bottom button{
background:rgba(19,54,84,.46)!important;
border-color:rgba(89,169,228,.42)!important;
}
@media(max-width:560px){
.auth-panel{
background:linear-gradient(180deg,rgba(10,38,68,.30),rgba(3,22,42,.24))!important;
-webkit-backdrop-filter:blur(4px) saturate(112%)!important;
backdrop-filter:blur(4px) saturate(112%)!important;
}
.auth-panel input{background:rgba(2,19,37,.55)!important;}
}
/* =========================================================
V9 BRAND LOGO: NO OLD-LOGO FLASH + BORDERLESS 3D DISPLAY
========================================================= */
.auth-title-row{
overflow:visible!important;
}
.auth-brand-logo-slot{
position:relative!important;
width:64px!important;
height:64px!important;
flex:0 0 64px!important;
display:grid!important;
place-items:center!important;
overflow:visible!important;
border:0!important;
outline:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
perspective:700px!important;
opacity:1!important;
}
.auth-brand-logo-slot.is-loading:empty{
visibility:hidden!important;
}
.auth-brand-logo-slot.has-logo::before,
.auth-brand-logo-slot.has-logo::after{
content:"";
position:absolute;
inset:10% 12% 6% 12%;
pointer-events:none;
border-radius:24%;
background:rgba(0,0,0,.32);
filter:blur(9px);
transform:translate3d(7px,9px,-12px) rotate(-3deg);
opacity:.72;
z-index:0;
}
.auth-brand-logo-slot.has-logo::after{
inset:16% 18% 10% 18%;
background:rgba(0,210,255,.22);
filter:blur(12px);
transform:translate3d(-3px,3px,-16px);
opacity:.58;
}
.auth-brand-logo-image{
position:relative!important;
z-index:2!important;
width:100%!important;
height:100%!important;
display:block!important;
object-fit:contain!important;
padding:0!important;
margin:0!important;
border:0!important;
outline:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
transform-style:preserve-3d!important;
transform-origin:50% 50%!important;
filter:
drop-shadow(0 10px 8px rgba(0,0,0,.46))
drop-shadow(0 0 10px rgba(52,211,255,.25))
contrast(1.06) saturate(1.08)!important;
animation:authBrandLogo3DV9 7.2s ease-in-out infinite!important;
backface-visibility:visible!important;
}
.auth-brand-logo-slot.logo-ready .auth-brand-logo-image{
animation:authBrandLogoArriveV9 .34s ease-out both,authBrandLogo3DV9 7.2s .34s ease-in-out infinite!important;
}
@keyframes authBrandLogoArriveV9{
from{opacity:0;transform:translateY(2px) scale(.93) rotateY(-8deg)}
to{opacity:1;transform:translateY(0) scale(1) rotateY(0deg)}
}
@keyframes authBrandLogo3DV9{
0%,100%{transform:rotateX(3deg) rotateY(-7deg) translateZ(8px) translateY(0)}
25%{transform:rotateX(-2deg) rotateY(5deg) translateZ(13px) translateY(-2px)}
50%{transform:rotateX(4deg) rotateY(9deg) translateZ(10px) translateY(-1px)}
75%{transform:rotateX(-3deg) rotateY(-4deg) translateZ(14px) translateY(-3px)}
}
.auth-brand-logo-default{
border:0!important;
outline:0!important;
border-radius:50%!important;
box-shadow:0 8px 18px rgba(0,0,0,.42),0 0 18px rgba(255,177,40,.32)!important;
}
@media(max-width:560px){
.auth-brand-logo-slot{
width:58px!important;
height:58px!important;
flex-basis:58px!important;
}
}
@media(prefers-reduced-motion:reduce){
.auth-brand-logo-image{animation:none!important;transform:none!important}
}
/* =========================================================
V10 BRAND LOGO: SOFT CORNERS + BEVELED 3D DEPTH
Keep uploaded logo borderless; soften the image silhouette
and create depth with highlights/shadows only.
========================================================= */
.auth-brand-logo-slot{
perspective:900px!important;
transform-style:preserve-3d!important;
}
.auth-brand-logo-slot.has-logo::before{
inset:5px 4px 2px 7px!important;
border-radius:20px!important;
background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(0,0,0,.36) 58%,rgba(0,0,0,.5))!important;
filter:blur(5px)!important;
transform:translate3d(5px,7px,-14px) rotateY(-5deg) rotateX(3deg)!important;
opacity:.78!important;
}
.auth-brand-logo-slot.has-logo::after{
inset:7px 7px 5px 5px!important;
border-radius:18px!important;
background:linear-gradient(135deg,rgba(78,220,255,.24),rgba(48,116,255,.05) 46%,rgba(255,196,68,.14))!important;
filter:blur(10px)!important;
transform:translate3d(-2px,2px,-18px)!important;
opacity:.72!important;
}
.auth-brand-logo-image{
border:0!important;
outline:0!important;
border-radius:17px!important;
overflow:hidden!important;
clip-path:inset(0 round 17px)!important;
transform-style:preserve-3d!important;
filter:
drop-shadow(0 11px 9px rgba(0,0,0,.5))
drop-shadow(4px 4px 4px rgba(0,0,0,.22))
drop-shadow(-2px -2px 3px rgba(255,255,255,.12))
drop-shadow(0 0 12px rgba(52,211,255,.22))
contrast(1.07) saturate(1.1)!important;
animation:authBrandLogoSoft3DV10 7.6s ease-in-out infinite!important;
}
.auth-brand-logo-slot.logo-ready .auth-brand-logo-image{
animation:authBrandLogoArriveV10 .32s ease-out both,authBrandLogoSoft3DV10 7.6s .32s ease-in-out infinite!important;
}
@keyframes authBrandLogoArriveV10{
from{opacity:0;transform:translateY(3px) scale(.92) rotateX(7deg) rotateY(-12deg) translateZ(0)}
to{opacity:1;transform:translateY(0) scale(1) rotateX(2deg) rotateY(-5deg) translateZ(12px)}
}
@keyframes authBrandLogoSoft3DV10{
0%,100%{transform:rotateX(3deg) rotateY(-7deg) translateZ(12px) translateY(0)}
25%{transform:rotateX(-3deg) rotateY(6deg) translateZ(18px) translateY(-2px)}
50%{transform:rotateX(4deg) rotateY(9deg) translateZ(14px) translateY(-1px)}
75%{transform:rotateX(-2deg) rotateY(-5deg) translateZ(19px) translateY(-3px)}
}
@media(max-width:560px){
.auth-brand-logo-image{
border-radius:15px!important;
clip-path:inset(0 round 15px)!important;
}
.auth-brand-logo-slot.has-logo::before{border-radius:18px!important}
.auth-brand-logo-slot.has-logo::after{border-radius:16px!important}
}
@media(prefers-reduced-motion:reduce){
.auth-brand-logo-image{animation:none!important;transform:translateZ(10px)!important}
}
.toast.account-abnormal{left:50%!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important;z-index:2147483647!important;max-width:min(88vw,420px)!important;padding:16px 22px!important;font-size:16px!important;font-weight:800!important;text-align:center!important;background:rgba(10,28,48,.96)!important;border:1px solid rgba(52,224,216,.7)!important;box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 28px rgba(41,218,209,.22)!important;}
/* ===== V8 AUTH CENTER TOAST ===== */
.toast{position:fixed!important;left:50%!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important;z-index:2147483647!important;min-width:180px!important;max-width:min(88vw,520px)!important;padding:16px 22px!important;border-radius:13px!important;font-size:16px!important;line-height:1.45!important;font-weight:800!important;text-align:center!important;background:rgba(6,28,44,.97)!important;border:1px solid rgba(45,235,214,.72)!important;box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 30px rgba(26,218,208,.28)!important;backdrop-filter:blur(12px)!important;}
@media(max-width:560px){.toast{font-size:15px!important;max-width:86vw!important;padding:14px 18px!important;}}
/* =========================================================
V25 PLATFORM LOGO BLEND
Black/very dark backgrounds visually dissolve into the
registration/login panel while the gold/blue artwork stays crisp.
========================================================= */
.auth-title-row{gap:10px!important;}
.auth-brand-logo-slot{
width:56px!important;
height:56px!important;
flex:0 0 56px!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
overflow:visible!important;
}
.auth-brand-logo-slot.has-logo::before{
inset:7px!important;
border-radius:50%!important;
background:radial-gradient(circle,rgba(0,207,255,.18) 0%,rgba(0,136,255,.08) 42%,transparent 72%)!important;
filter:blur(8px)!important;
transform:none!important;
opacity:.82!important;
}
.auth-brand-logo-slot.has-logo::after{
inset:12px!important;
border-radius:50%!important;
background:radial-gradient(circle,rgba(255,188,62,.12),transparent 68%)!important;
filter:blur(7px)!important;
transform:none!important;
opacity:.72!important;
}
.auth-brand-logo-image{
width:100%!important;
height:100%!important;
object-fit:contain!important;
padding:0!important;
margin:0!important;
border:0!important;
border-radius:0!important;
clip-path:none!important;
background:transparent!important;
box-shadow:none!important;
mix-blend-mode:screen!important;
filter:
drop-shadow(0 0 5px rgba(56,218,255,.34))
drop-shadow(0 3px 7px rgba(0,0,0,.34))
contrast(1.04) saturate(1.08)!important;
animation:authBrandLogoBlendV25 6.8s ease-in-out infinite!important;
}
.auth-brand-logo-slot.logo-ready .auth-brand-logo-image{
animation:authBrandLogoArriveV25 .28s ease-out both,authBrandLogoBlendV25 6.8s .28s ease-in-out infinite!important;
}
@keyframes authBrandLogoArriveV25{
from{opacity:0;transform:scale(.92) translateY(2px)}
to{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes authBrandLogoBlendV25{
0%,100%{transform:translateY(0) scale(1)}
50%{transform:translateY(-1px) scale(1.015)}
}
@media(max-width:560px){
.auth-brand-logo-slot{width:50px!important;height:50px!important;flex-basis:50px!important}
}
@media(prefers-reduced-motion:reduce){
.auth-brand-logo-image{animation:none!important;transform:none!important}
}
/* V25.1 - Make platform logo larger and sharper */
.auth-brand img,
.auth-logo img,
.brand-logo img,
.platform-logo img,
[data-auth-brand-logo] {
width: 78px !important;
height: 78px !important;
max-width: 78px !important;
max-height: 78px !important;
object-fit: contain !important;
image-rendering: auto !important;
filter:
contrast(1.08)
saturate(1.08)
drop-shadow(0 0 5px rgba(0,210,255,.20)) !important;
transform: translateZ(0);
backface-visibility: hidden;
}
/* avoid oversized dark background box */
.auth-brand,
.auth-logo,
.brand-logo,
.platform-logo {
background: transparent !important;
}
/* =========================================================
V25.2 PLATFORM LOGO - LARGE + SHARP
Must stay at the END of auth.css
========================================================= */
.auth-brand-logo-slot{
width:82px !important;
height:82px !important;
min-width:82px !important;
min-height:82px !important;
flex:0 0 82px !important;
background:transparent !important;
border:none !important;
box-shadow:none !important;
overflow:visible !important;
border-radius:18px !important;
filter:none !important;
backdrop-filter:none !important;
}
/* Remove extra blur/glass layers around uploaded logo */
.auth-brand-logo-slot.has-logo::before,
.auth-brand-logo-slot.has-logo::after{
display:none !important;
content:none !important;
}
/* The real uploaded logo image */
.auth-brand-logo-image{
display:block !important;
width:78px !important;
height:78px !important;
min-width:78px !important;
min-height:78px !important;
max-width:78px !important;
max-height:78px !important;
object-fit:contain !important;
opacity:1 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
image-rendering:auto !important;
transform:none !important;
animation:none !important;
filter:
contrast(1.12)
saturate(1.10)
brightness(1.04)
drop-shadow(0 0 3px rgba(0,190,255,.25))
!important;
}
/* Keep title aligned with larger logo */
.auth-title-row{
display:flex !important;
align-items:center !important;
gap:14px !important;
}
/* Mobile */
@media(max-width:560px){
.auth-brand-logo-slot{
width:70px !important;
height:70px !important;
min-width:70px !important;
min-height:70px !important;
flex-basis:70px !important;
}
.auth-brand-logo-image{
width:66px !important;
height:66px !important;
min-width:66px !important;
min-height:66px !important;
max-width:66px !important;
max-height:66px !important;
}
}
/* Never shift the complete document */
body{
padding:0 !important;
}
/*
* Only the actual login/register screen receives safe area.
* Keep existing geometry and add system-area space.
*/
html[data-gtam-safe-mode="installed"] .auth-screen{
box-sizing:border-box !important;
min-height:100vh !important;
min-height:100dvh !important;
padding-top:
calc(32px + var(--gt-auth-safe-top)) !important;
padding-right:
calc(18px + var(--gt-auth-safe-right)) !important;
padding-bottom:
calc(56px + var(--gt-auth-safe-bottom)) !important;
padding-left:
calc(18px + var(--gt-auth-safe-left)) !important;
}
@media(max-width:560px){
html[data-gtam-safe-mode="installed"] .auth-screen{
padding-top:
calc(14px + var(--gt-auth-safe-top)) !important;
padding-right:
calc(10px + var(--gt-auth-safe-right)) !important;
padding-bottom:
calc(30px + var(--gt-auth-safe-bottom)) !important;
padding-left:
calc(10px + var(--gt-auth-safe-left)) !important;
}
}
/* Background artwork still fills the whole physical screen */
#spaceCanvas,
.planet-glow,
.crypto-scene,
.horizon-ring{
box-sizing:border-box;
}
/* Desktop / larger screens */
.auth-screen{
box-sizing:border-box !important;
min-height:100vh !important;
min-height:100dvh !important;
padding-top:
calc(32px + var(--gt-auth-safe-top)) !important;
padding-right:
calc(18px + var(--gt-auth-safe-right)) !important;
padding-bottom:
calc(56px + var(--gt-auth-safe-bottom)) !important;
padding-left:
calc(18px + var(--gt-auth-safe-left)) !important;
}
/* Mobile */
@media(max-width:560px){
.auth-screen{
justify-content:flex-start !important;
padding-top:
calc(14px + var(--gt-auth-safe-top)) !important;
padding-right:
calc(10px + var(--gt-auth-safe-right)) !important;
padding-bottom:
calc(30px + var(--gt-auth-safe-bottom)) !important;
padding-left:
calc(10px + var(--gt-auth-safe-left)) !important;
}
}
/*
* Give the actual control row a second line of protection.
* This ensures close/language buttons sit below the iOS status bar.
*/
.auth-top{
box-sizing:border-box !important;
margin-top:0 !important;
}
/*
* In case iOS reports safe-area but another late rule overrides
* .auth-screen padding, force the top controls themselves down.
*/
@supports (padding-top: env(safe-area-inset-top)){
.auth-top{
padding-top:env(safe-area-inset-top) !important;
}
@media(max-width:560px){
.auth-screen{
padding-top:14px !important;
}
.auth-top{
padding-top:env(safe-area-inset-top) !important;
}
}
}
/* =========================================================
GTAM AUTH SAFE AREA CLEAN FINAL
One safe-area owner only: .auth-screen
========================================================= */
:root{
--auth-safe-top:env(safe-area-inset-top,0px);
--auth-safe-right:env(safe-area-inset-right,0px);
--auth-safe-bottom:env(safe-area-inset-bottom,0px);
--auth-safe-left:env(safe-area-inset-left,0px);
}
html,
body{
margin:0 !important;
padding:0 !important;
background:#020b18 !important;
}
/*
* Only auth-screen handles the system safe area.
* auth-top stays in normal document flow.
*/
.auth-screen{
position:relative !important;
box-sizing:border-box !important;
width:min(520px,100%) !important;
margin:0 auto !important;
min-height:100vh !important;
min-height:100dvh !important;
padding-top:
calc(32px + var(--auth-safe-top)) !important;
padding-right:
calc(18px + var(--auth-safe-right)) !important;
padding-bottom:
calc(56px + var(--auth-safe-bottom)) !important;
padding-left:
calc(18px + var(--auth-safe-left)) !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
}
/*
* IMPORTANT:
* top controls must remain a normal row above the panel.
* No safe-area padding / no negative margin / no absolute positioning.
*/
.auth-top{
position:relative !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
width:100% !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
padding:0 !important;
margin:
0 0 12px 0 !important;
flex:0 0 auto !important;
z-index:10 !important;
}
/*
* Make sure neither top button is positioned independently.
*/
.auth-back,
.auth-language{
position:relative !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
transform:none !important;
flex:0 0 auto !important;
}
/*
* Panel stays below auth-top.
*/
.auth-panel{
position:relative !important;
top:auto !important;
margin-top:0 !important;
flex:0 0 auto !important;
}
/* Mobile */
@media(max-width:560px){
.auth-screen{
justify-content:flex-start !important;
padding-top:
calc(12px + var(--auth-safe-top)) !important;
padding-right:
calc(10px + var(--auth-safe-right)) !important;
padding-bottom:
calc(30px + var(--auth-safe-bottom)) !important;
padding-left:
calc(10px + var(--auth-safe-left)) !important;
}
.auth-top{
min-height:40px !important;
margin-bottom:10px !important;
}
.auth-back{
width:42px !important;
height:40px !important;
}
.auth-language{
height:40px !important;
}
}
/* =========================================================
GTAM IOS HOME SCREEN AUTH FIX
========================================================= */
/*
* iPhone Add-to-Home-Screen only.
* Reserve a real status-bar zone before any interactive control.
*/
html.gtam-ios-standalone .auth-screen{
box-sizing:border-box !important;
justify-content:flex-start !important;
padding-top:64px !important;
padding-left:10px !important;
padding-right:10px !important;
padding-bottom:30px !important;
}
/*
* Top controls stay on their own row.
*/
html.gtam-ios-standalone .auth-top{
position:relative !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
width:100% !important;
min-height:44px !important;
top:auto !important;
left:auto !important;
right:auto !important;
padding:0 !important;
margin:0 0 14px 0 !important;
transform:none !important;
z-index:20 !important;
}
/*
* Do not let either button escape the row.
*/
html.gtam-ios-standalone .auth-back,
html.gtam-ios-standalone .auth-language{
position:relative !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
margin:0 !important;
transform:none !important;
}
/*
* Login/Register card must begin after the control row.
*/
html.gtam-ios-standalone .auth-panel{
position:relative !important;
top:auto !important;
width:100% !important;
margin:0 !important;
transform:none !important;
}
/*
* Title/logo remain completely inside the card,
* centered independently of the close/language row.
*/
html.gtam-ios-standalone .auth-title-row{
position:relative !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
margin:0 0 24px 0 !important;
transform:none !important;
z-index:2 !important;
}
html.gtam-ios-standalone .auth-title-row h1{
margin:0 !important;
}
/*
* The standalone background can still fill the complete screen.
*/
html.gtam-ios-standalone body{
padding:0 !important;
background:#020b18 !important;
}