:root { --bg:#090a0f; --surface:#13151d; --surface-2:#191c25; --line:rgba(255,255,255,.1); --text:#f5f6f8; --muted:#969baa; --dim:#666b78; --lime:#c6ff4a; --violet:#a786ff; --danger:#f07b82; --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"SFMono-Regular",Consolas,monospace; }
* { box-sizing:border-box; } body { min-width:320px; min-height:100vh; margin:0; padding:28px; color:var(--text); background:radial-gradient(circle at 18% 20%,rgba(167,134,255,.1),transparent 28%),radial-gradient(circle at 85% 80%,rgba(198,255,74,.07),transparent 25%),var(--bg); font-family:var(--sans); -webkit-font-smoothing:antialiased; } body::before { content:""; position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:60px 60px; mask-image:linear-gradient(to bottom,black,transparent 75%); } a { color:inherit; text-decoration:none; } button,input { font:inherit; }
.auth-brand { position:relative; z-index:2; display:inline-flex; align-items:center; gap:10px; font-size:13px; }.auth-brand > span { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; color:#0b0c0e; background:var(--lime); font:800 11px var(--mono); }.auth-brand strong { letter-spacing:-.02em; }.auth-brand b { color:var(--lime); }
.auth-shell { width:min(100%,1080px); min-height:calc(100vh - 115px); margin:30px auto 0; display:grid; grid-template-columns:1fr 440px; gap:110px; align-items:center; position:relative; z-index:1; }.auth-copy { padding-bottom:50px; }.auth-eyebrow { color:var(--lime); font:700 10px var(--mono); letter-spacing:.13em; }.auth-copy h1 { max-width:570px; margin:17px 0 22px; font-size:clamp(48px,6vw,76px); line-height:.96; letter-spacing:-.065em; }.auth-copy > p { max-width:520px; margin:0; color:var(--muted); font-size:15px; line-height:1.72; }.auth-benefits { margin-top:35px; display:grid; gap:14px; color:#b6bac4; font-size:11px; }.auth-benefits span { display:flex; align-items:center; gap:10px; }.auth-benefits i { width:25px; height:25px; display:grid; place-items:center; border-radius:6px; color:var(--lime); background:rgba(198,255,74,.08); font:700 8px var(--mono); font-style:normal; }
.auth-card { padding:35px; border:1px solid var(--line); border-radius:20px; background:rgba(19,21,29,.88); box-shadow:0 30px 90px rgba(0,0,0,.3); backdrop-filter:blur(18px); }.auth-card-heading > span { color:var(--violet); font:700 8px var(--mono); letter-spacing:.12em; }.auth-card-heading h2 { margin:9px 0 7px; font-size:25px; letter-spacing:-.04em; }.auth-card-heading p { margin:0 0 24px; color:var(--muted); font-size:10px; }.google-button { height:47px; display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid var(--line); border-radius:9px; background:#fff; color:#252b38; font-size:11px; font-weight:700; transition:transform .2s,box-shadow .2s; }.google-button:hover { transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.15); }.google-mark { width:23px; height:23px; display:grid; place-items:center; border:1px solid #e0e3e8; border-radius:50%; color:#4285f4; font-weight:850; }
.auth-divider { margin:22px 0; display:flex; align-items:center; gap:10px; color:var(--dim); font:8px var(--mono); text-transform:uppercase; }.auth-divider::before,.auth-divider::after { content:""; height:1px; flex:1; background:var(--line); }.auth-form { display:grid; }.auth-form label { margin:0 0 7px; color:#c5c8d0; font-size:9px; font-weight:700; }.auth-form label:not(:first-of-type) { margin-top:14px; }.auth-form label span { float:right; color:var(--dim); font-weight:500; }.auth-form input { width:100%; height:43px; padding:0 12px; border:1px solid var(--line); border-radius:8px; outline:0; color:var(--text); background:rgba(255,255,255,.025); font-size:10px; transition:border-color .2s,box-shadow .2s; }.auth-form input:focus { border-color:rgba(198,255,74,.42); box-shadow:0 0 0 3px rgba(198,255,74,.06); }.auth-form input::placeholder { color:#5c616e; }.auth-submit { height:45px; margin-top:20px; padding:0 9px 0 15px; display:flex; align-items:center; justify-content:space-between; border:0; border-radius:9px; color:#0a0b0d; background:var(--lime); font-size:10px; font-weight:800; cursor:pointer; }.auth-submit span { width:29px; height:29px; display:grid; place-items:center; border-radius:6px; background:rgba(0,0,0,.09); font-size:14px; }.auth-switch { margin:22px 0 0; text-align:center; color:var(--muted); font-size:9px; }.auth-switch a { color:var(--lime); font-weight:700; }.auth-alert { margin:0 0 16px; padding:10px 12px; border-radius:7px; font-size:9px; line-height:1.5; }.auth-alert.error { color:#ffc6ca; background:rgba(240,123,130,.1); border:1px solid rgba(240,123,130,.18); }.auth-alert.success { color:#c8ffdc; background:rgba(87,207,140,.1); border:1px solid rgba(87,207,140,.18); }
:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
@media(max-width:850px){ body{padding:20px}.auth-shell{grid-template-columns:1fr;gap:45px;max-width:500px;margin-top:70px}.auth-copy{text-align:center;padding:0}.auth-copy h1{font-size:50px}.auth-copy>p{margin:auto}.auth-benefits{display:none}.auth-card{padding:29px 24px;margin-bottom:40px} }
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important}}