*{box-sizing:border-box}
body{margin:0;background:#090C10;color:#eafaf3;font-family:'JetBrains Mono',monospace;min-height:100vh;overflow-x:hidden}
.bg-orb{position:fixed;border-radius:999px;filter:blur(40px);pointer-events:none;opacity:.35;z-index:0;animation:floatOrb 9s ease-in-out infinite}
.bg-orb.a{width:360px;height:360px;left:-120px;top:-90px;background:#00ffa3}
.bg-orb.b{width:300px;height:300px;right:-90px;bottom:-120px;background:#21c9ff;animation-delay:1.2s}
@keyframes floatOrb{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-24px) translateX(12px)}}
.scanlines{position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.015) 0,rgba(255,255,255,.015) 1px,transparent 2px,transparent 4px)}
.split-layout{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.brand-panel{padding:56px;background:radial-gradient(circle at 20% 20%,rgba(0,255,163,.12),transparent 48%),#0b0f14;border-right:1px solid rgba(0,255,163,.18);position:relative;z-index:1}
.logo{font-family:'Syne',sans-serif;font-size:88px;line-height:1;font-weight:800;letter-spacing:4px;margin:0 0 14px;color:#00FFA3}
.glitch:hover{animation:glitch .28s steps(2,end) 2}
@keyframes glitch{0%{transform:translate(0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-1px)}100%{transform:translate(0)}}
.tagline{max-width:520px;color:#9dcab9;margin:0 0 30px}
.terminal{border:1px solid rgba(0,255,163,.3);border-radius:10px;background:#070b0f;overflow:hidden;transform-origin:50% 50%;animation:terminalReveal .9s ease-out both}
@keyframes terminalReveal{0%{opacity:0;transform:translateY(12px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
.term-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid rgba(0,255,163,.2)}
.dot{width:10px;height:10px;border-radius:50%}.red{background:#ff5f56}.yellow{background:#ffbd2e}.green{background:#27c93f}
.term-title{margin-left:6px;color:#87b8a6;font-size:12px}
.term-body{margin:0;padding:14px 14px 18px;min-height:220px;color:#00FFA3;font-size:12px;white-space:pre-wrap}
.term-body::after{content:"_";animation:blink .9s step-end infinite}
@keyframes blink{50%{opacity:0}}
.badges{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.badge{padding:8px 12px;border:1px solid rgba(0,255,163,.25);border-radius:999px;color:#9ce5cb;font-size:12px;animation:badgeIn .7s ease both}
.badge:nth-child(2){animation-delay:.12s}.badge:nth-child(3){animation-delay:.24s}
@keyframes badgeIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}
.form-panel{display:flex;align-items:center;justify-content:center;padding:24px;position:relative;z-index:1}
.form-card{width:100%;max-width:440px;padding:32px;border:1px solid rgba(0,255,163,.2);border-radius:14px;background:#0c1117;box-shadow:0 0 50px rgba(0,0,0,.35);animation:cardIn .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes cardIn{0%{opacity:0;transform:translateY(18px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
.form-card:hover{box-shadow:0 18px 60px rgba(0,255,163,.12),0 0 0 1px rgba(0,255,163,.2)}
h2{font-family:'Syne',sans-serif;font-size:38px;margin:0 0 8px}
.sub{margin:0 0 22px;color:#9ab7aa}
.f-group{margin-bottom:14px}.f-label{display:block;font-size:12px;color:#8fb7a6;margin-bottom:6px}
.f-input-wrap{display:flex;align-items:center;border:1px solid rgba(0,255,163,.22);border-radius:10px;background:#090e13}
.f-input-wrap:focus-within{border-color:#00FFA3;box-shadow:0 0 0 3px rgba(0,255,163,.12)}
.f-icon{padding:0 10px;color:#67dcb0}
.f-input{flex:1;background:transparent;border:none;outline:none;color:#effff8;padding:12px 10px;font-family:'JetBrains Mono',monospace}
.f-input::placeholder{color:#6f8d80}
.f-toggle{border:none;background:transparent;color:#87d8b8;padding:0 10px;cursor:pointer;font-family:'JetBrains Mono',monospace}
.f-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.remember{display:flex;gap:8px;align-items:center;font-size:12px;color:#95c8b3}
.f-link{font-size:12px;color:#00FFA3;text-decoration:none}
.sign-btn{width:100%;padding:12px;border:none;border-radius:10px;background:#00FFA3;color:#03120d;font-weight:700;font-family:'Syne',sans-serif;cursor:pointer;position:relative;transition:transform .2s ease,box-shadow .2s ease}
.sign-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,255,163,.32)}
.sign-btn:active{transform:translateY(0)}
.btn-spinner{display:none;position:absolute;right:14px;top:50%;width:16px;height:16px;margin-top:-8px;border:2px solid rgba(3,18,13,.4);border-top-color:#03120d;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.state{display:none;margin-top:10px;padding:10px;border-radius:8px;font-size:12px}
.state-loading{background:rgba(0,255,163,.1);color:#8ef8ce}
.state-error{background:rgba(255,76,76,.12);border:1px solid rgba(255,76,76,.4);color:#ff9d9d}
.state-success{background:rgba(34,197,94,.18);color:#b7ffd1}
.error-shake{animation:shake .28s linear 1}
@keyframes shake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-3px)}}
.divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:#719486;font-size:12px}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:rgba(0,255,163,.15)}
.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.social-btn{padding:10px;border:1px solid rgba(0,255,163,.2);background:#0a1116;color:#bbecdb;border-radius:10px;cursor:pointer;transition:all .2s ease}
.social-btn:hover{transform:translateY(-1px);border-color:rgba(0,255,163,.45)}
.signup{margin:16px 0 0;color:#86a89a;font-size:12px}
.signup a{color:#00FFA3;text-decoration:none}
@media (prefers-reduced-motion: reduce){.bg-orb,.form-card,.terminal,.badge,.glitch:hover{animation:none!important}.sign-btn,.social-btn{transition:none}}
@media (max-width:960px){.split-layout{grid-template-columns:1fr}.brand-panel{border-right:none;border-bottom:1px solid rgba(0,255,163,.18)}.logo{font-size:64px}}