:root{--ink:#0d1633;--muted:#5a6787;--line:#e6ecfb;--radius:16px;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#0d1633;background:#eff4ff}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(80% 60% at 10% 10%,#bfe3ff33 0%,transparent 60%),radial-gradient(80% 60% at 90% 20%,#e2d3ff33 0%,transparent 60%),linear-gradient(#f9fbff,#eff4ff);overflow-x:hidden;transition:background .55s ease}
body.spaceprod-mode{background:radial-gradient(70% 55% at 15% 10%,#81d8ff30 0%,transparent 62%),radial-gradient(70% 60% at 85% 20%,#866bff30 0%,transparent 62%),linear-gradient(#f8fbff,#e9f0ff)}
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;gap:0;padding:0}
header.logoTop{width:100%;max-width:min(900px,92vw);display:flex;align-items:center;justify-content:center;margin:1cm auto 4px;overflow:visible}
.logo-flip-container{width:58.8%;perspective:1200px;cursor:pointer}.logo-flip-inner{position:relative;width:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.logo-flip-container:hover .logo-flip-inner{transition:transform .8s cubic-bezier(.4,0,.2,1) 1s;transform:rotateY(180deg)}
.logo-face{width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}.logo-face img{width:100%;height:auto;display:block;object-fit:contain}.logo-face-front{position:relative}.logo-face-back{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:rotateY(180deg)}.logo-face-back img{max-width:100%;max-height:100%;width:auto;filter:drop-shadow(0 0 20px rgba(100,180,255,.4))}
#auth.card{width:min(760px,92vw);min-height:276px;display:grid;place-items:center;background:rgba(255,255,255,.78);backdrop-filter:saturate(120%) blur(8px);border:1px solid var(--line);border-radius:22px;box-shadow:0 1px 5px rgba(20,40,100,.05);padding:26px;transform-origin:50% 0;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1),filter .5s ease}
#auth.card.leave{opacity:0;transform:perspective(900px) rotateX(7deg) translateY(-14px) scale(.98);filter:blur(4px)}
.card-rotator{position:relative;width:min(440px,100%);min-height:224px;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.75,.2,1)}.card-rotator.flipped{transform:rotateY(180deg)}
.auth-panel{position:absolute;inset:0;display:flex;align-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}.auth-panel-2fa{transform:rotateY(180deg)}
.auth-form{display:grid;gap:14px;width:100%}.field{display:grid;gap:6px}.field label{font-size:12px;color:#6b7694}.input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #dbe2f3;background:#fbfcff;color:#0e1836;outline:none;font:inherit}.input:focus{border-color:#7aa2ff;box-shadow:0 0 0 4px #7aa2ff33}.row{display:flex;justify-content:space-between;align-items:center;gap:10px}.hint{font-size:12px;color:#6b7694}.remember{display:flex;align-items:center;gap:8px}.remember input{accent-color:#6d8aff}
.btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:12px 16px;border-radius:12px;font-weight:800;color:#1a2454;background:#eef3ff;border:1px solid #d5def7;box-shadow:0 1px 3px rgba(20,40,100,.05);transition:transform .12s ease,background .2s ease,box-shadow .2s ease}.btn:hover{transform:translateY(-1px);background:#e6ecff;box-shadow:0 2px 6px rgba(20,40,100,.08)}button:disabled{opacity:.6;cursor:wait;transform:none}.back{border:0;background:none;color:#5a6787;cursor:pointer;padding:8px 0;font:600 12px inherit}
.tfa-header{display:flex;align-items:center;gap:12px}.tfa-header h1{font-size:16px;margin:0;color:#0d1633}.tfa-header p{font-size:12px;margin:3px 0 0;color:#5a6787;line-height:1.4}.shield{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:#e8f0ff;color:#315fc2;font-weight:900}.tfa-code{text-align:center;font-size:26px;font-weight:700;letter-spacing:8px}.status{position:absolute;left:26px;right:26px;bottom:8px;min-height:18px;margin:0;text-align:center;color:#e02424;font-size:13px}.status.ok{color:#166534}
@media(max-width:600px){header.logoTop{margin-top:24px}.logo-flip-container{width:min(74%,360px)}#auth.card{width:min(92vw,520px);padding:22px;min-height:290px}.row{align-items:stretch}.btn{min-height:44px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}