:root { color-scheme: dark; --bg:#07111f; --surface:#0c1a2b; --border:rgba(148,170,199,.16); --text:#f4f8fb; --muted:#91a6be; --subtle:#647b95; --cyan:#42dbcf; --red:#ff6f7d; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hidden { display:none!important; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(500px,1.18fr) minmax(430px,.82fr); }
.login-visual { position:relative; min-height:100vh; padding:50px clamp(40px,6vw,100px); overflow:hidden; background:radial-gradient(circle at 25% 10%,rgba(55,214,202,.13),transparent 32%),linear-gradient(145deg,#07111f,#0b1b2f); }
.visual-grid { position:absolute; inset:0; opacity:.22; background-image:linear-gradient(rgba(148,170,199,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(148,170,199,.08) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 85%); }
.visual-orb { position:absolute; border-radius:50%; filter:blur(1px); }
.visual-orb.one { width:400px;height:400px;right:-120px;top:15%;background:radial-gradient(circle,rgba(55,214,202,.13),transparent 65%); }
.visual-orb.two { width:320px;height:320px;left:10%;bottom:-130px;background:radial-gradient(circle,rgba(152,124,255,.09),transparent 67%); }
.visual-content { position:relative; z-index:1; min-height:calc(100vh - 100px); display:flex; flex-direction:column; }
.visual-logo { display:flex;align-items:center;gap:12px;font-weight:750;letter-spacing:-.015em; }
.visual-logo svg,.mobile-logo svg { width:38px;height:38px;fill:rgba(66,219,207,.09);color:var(--cyan);stroke-width:2; }
.visual-logo .check,.mobile-logo .check { fill:none;stroke-width:2.4; }
.visual-copy { margin:auto 0; max-width:700px; }
.eyebrow { display:block;color:var(--cyan);font-size:10px;font-weight:850;letter-spacing:.15em; }
.visual-copy h1 { margin:18px 0 20px;font-size:clamp(49px,5.4vw,82px);line-height:.98;letter-spacing:-.065em; }
.visual-copy p { max-width:560px;margin:0;color:var(--muted);font-size:15px;line-height:1.7; }
.visual-features { display:flex;gap:25px;flex-wrap:wrap;color:var(--muted);font-size:11px; }
.visual-features div { display:flex;align-items:center;gap:8px; }
.visual-features i { width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px rgba(66,219,207,.7); }
.login-panel { min-height:100vh;display:grid;place-items:center;padding:34px;background:#091421; }
.login-card { width:min(410px,100%); }
.mobile-logo { display:none;align-items:center;gap:10px;margin-bottom:44px;font-weight:750; }
.login-heading { margin-bottom:32px; }
.login-heading h2 { margin:8px 0 7px;font-size:31px;letter-spacing:-.045em; }
.login-heading p { margin:0;color:var(--muted);font-size:12px; }
.login-card label { display:block;margin-bottom:17px; }
.login-card label>span { display:block;margin-bottom:7px;color:var(--muted);font-size:10px;font-weight:700; }
.field { height:50px;display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid var(--border);border-radius:13px;background:rgba(12,26,43,.76);transition:.2s; }
.field:focus-within { border-color:rgba(66,219,207,.52);box-shadow:0 0 0 4px rgba(66,219,207,.07); }
.field>svg { width:18px;height:18px;color:var(--subtle); }
.field input { min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);font-size:13px; }
.field input::placeholder { color:#536b84; }
.field button { width:32px;height:32px;display:grid;place-items:center;border:0;background:transparent;color:var(--subtle);cursor:pointer; }
.field button svg { width:18px;height:18px; }
.login-error { margin:-2px 0 15px;padding:10px 12px;border:1px solid rgba(255,111,125,.22);border-radius:10px;background:rgba(255,111,125,.08);color:#ff9ca5;font-size:10.5px; }
.login-button { width:100%;height:51px;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:7px;border:0;border-radius:13px;background:linear-gradient(135deg,var(--cyan),#1aa9a2);color:#031918;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 12px 30px rgba(66,219,207,.16);transition:.2s; }
.login-button:hover { filter:brightness(1.08);transform:translateY(-1px); }
.login-button:disabled { opacity:.65;cursor:wait;transform:none; }
.login-button svg { width:17px;height:17px;stroke-width:2.2; }
.login-security { display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;color:var(--subtle);font-size:9.5px;text-align:center; }
.login-security svg { width:16px;height:16px;color:var(--cyan); }
@media(max-width:880px){.login-shell{grid-template-columns:1fr}.login-visual{display:none}.login-panel{padding:28px 20px;background:radial-gradient(circle at 50% 0,rgba(55,214,202,.08),transparent 35%),var(--bg)}.mobile-logo{display:flex}.login-card{width:min(420px,100%)} }
@media(max-width:430px){.login-panel{place-items:start center;padding-top:44px}.login-heading h2{font-size:27px}.mobile-logo{margin-bottom:55px}}