:root { color-scheme:dark; --bg:#06100e; --panel:#0a1714; --line:rgba(178,255,225,.11); --text:#e9fff5; --muted:#73968a; --green:#51f2a5; --cyan:#4ddde4; --red:#ff647d; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { display:grid; place-items:center; margin:0; overflow-x:hidden; background:radial-gradient(circle at 22% 20%,rgba(81,242,165,.07),transparent 30%),var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
button,input { font:inherit; }
.login-ambient { position:fixed; width:340px; height:340px; border-radius:50%; opacity:.1; filter:blur(110px); pointer-events:none; }.login-ambient.one { top:-120px; right:5%; background:var(--cyan); }.login-ambient.two { bottom:-170px; left:8%; background:var(--green); }
.login-shell { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(350px,470px); align-items:center; gap:clamp(45px,8vw,120px); width:min(1120px,calc(100% - 40px)); min-height:100vh; padding:70px 0; }
.brand { display:flex; align-items:center; gap:12px; margin-bottom:80px; }.brand>span { display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(81,242,165,.28); border-radius:11px; background:rgba(81,242,165,.08); color:var(--green); font-weight:800; box-shadow:0 0 30px rgba(81,242,165,.08); }.brand strong,.brand small { display:block; }.brand strong { letter-spacing:.02em; }.brand small { margin-top:2px; color:var(--muted); font-size:.68rem; }
.eyebrow { margin:0 0 15px; color:var(--green); font:700 .68rem/1.2 ui-monospace,monospace; letter-spacing:.2em; }.login-intro h1 { margin:0; font-size:clamp(3.2rem,6vw,5.7rem); line-height:.94; letter-spacing:-.065em; }.login-intro h1 em { color:var(--green); font-style:normal; }.description { max-width:550px; margin:28px 0; color:#8ba99e; font-size:1rem; line-height:1.7; }.features { display:flex; flex-wrap:wrap; gap:18px; color:var(--muted); font:600 .65rem ui-monospace,monospace; }.features span::first-letter { color:var(--green); }
.login-card { padding:36px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(150deg,rgba(14,32,27,.95),rgba(7,18,15,.95)); box-shadow:0 30px 90px rgba(0,0,0,.35); backdrop-filter:blur(24px); }.card-heading { display:flex; align-items:center; gap:14px; margin-bottom:32px; }.lock { display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:rgba(81,242,165,.08); color:var(--green); font-size:1.3rem; }.card-heading p { margin:0 0 4px; color:var(--green); font:700 .58rem ui-monospace,monospace; letter-spacing:.16em; }.card-heading h2 { margin:0; font-size:1.55rem; letter-spacing:-.03em; }
form>label { display:block; margin:18px 0 8px; color:#a4bcb3; font-size:.72rem; font-weight:650; }.field { display:flex; align-items:center; height:51px; border:1px solid var(--line); border-radius:10px; background:rgba(0,0,0,.18); transition:.18s; }.field:focus-within { border-color:rgba(81,242,165,.4); box-shadow:0 0 0 3px rgba(81,242,165,.05); }.field>span { padding-left:15px; color:#4e7568; }.field input { min-width:0; flex:1; height:100%; border:0; outline:0; padding:0 13px; background:transparent; color:var(--text); }.field button { align-self:stretch; border:0; padding:0 14px; background:transparent; color:var(--muted); cursor:pointer; font-size:.65rem; }
#login-error { min-height:21px; margin:12px 0 3px; color:var(--red); font-size:.68rem; }.submit { display:flex; justify-content:space-between; align-items:center; width:100%; height:52px; border:1px solid rgba(81,242,165,.2); border-radius:10px; padding:0 18px; background:linear-gradient(100deg,rgba(81,242,165,.18),rgba(77,221,228,.1)); color:var(--green); cursor:pointer; font-weight:750; }.submit:hover { border-color:rgba(81,242,165,.38); transform:translateY(-1px); }.submit:disabled { opacity:.55; cursor:wait; transform:none; }.submit b { font-size:1.15rem; }
.login-card footer { display:flex; align-items:center; gap:10px; margin-top:27px; color:#55766b; font:600 .57rem ui-monospace,monospace; text-align:center; }.login-card footer span { flex:1; height:1px; background:var(--line); }
@media (max-width:800px) { .login-shell { grid-template-columns:1fr; gap:45px; padding:36px 0; }.brand { margin-bottom:45px; }.login-intro h1 { font-size:clamp(3rem,15vw,5rem); }.login-card { padding:28px; } }