:root { --ink:#151515; --muted:#858585; --line:#e6e6e6; --accent:#2563eb; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','PingFang SC','Helvetica Neue',sans-serif; color:var(--ink); }
body { background:#080a12; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.login-visual { position:relative; overflow:hidden; min-height:100vh; color:#fff; background:linear-gradient(145deg,#07152f 0%,#152f62 45%,#091020 100%); isolation:isolate; }
.login-visual::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.18; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); pointer-events:none; }
.visual-orb { position:absolute; border-radius:50%; filter:blur(3px); z-index:-2; animation:float 12s ease-in-out infinite; }
.orb-one { width:52vw; height:52vw; max-width:760px; max-height:760px; top:-25%; left:-18%; background:radial-gradient(circle at 45% 45%,rgba(86,148,255,.75),rgba(86,148,255,0) 68%); }
.orb-two { width:42vw; height:42vw; max-width:580px; max-height:580px; right:-15%; bottom:-20%; background:radial-gradient(circle at 40% 40%,rgba(93,226,203,.35),rgba(93,226,203,0) 70%); animation-delay:-5s; }
.visual-grid { position:absolute; inset:0; z-index:-1; opacity:.14; background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 75%,transparent 100%); }
@keyframes float { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(3%,4%,0) scale(1.05)} }
.visual-brand { position:absolute; top:34px; left:38px; display:flex; gap:10px; align-items:center; color:rgba(255,255,255,.82); font-size:15px; font-weight:600; letter-spacing:.01em; }
.visual-mark { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:linear-gradient(135deg,#6ea8ff,#59d6c4); color:#fff; font-size:13px; font-weight:800; box-shadow:0 6px 24px rgba(37,99,235,.35); }
.visual-copy { position:absolute; left:clamp(38px,8vw,120px); right:clamp(38px,8vw,120px); top:50%; transform:translateY(-48%); max-width:640px; }
.kicker,.eyebrow { margin:0 0 18px; font-size:11px; letter-spacing:.18em; font-weight:700; }
.kicker { color:#8ab6ff; }
.visual-copy h1 { margin:0 0 22px; max-width:620px; font-size:clamp(34px,4.5vw,62px); line-height:1.08; letter-spacing:-.045em; font-weight:700; }
.visual-copy p:not(.kicker) { margin:0; max-width:480px; color:rgba(255,255,255,.63); font-size:16px; line-height:1.8; }
.visual-foot { position:absolute; left:38px; bottom:30px; color:rgba(255,255,255,.44); font-size:11px; letter-spacing:.06em; }
.pulse { display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:#63e6be; box-shadow:0 0 0 5px rgba(99,230,190,.12); vertical-align:1px; }
.login-panel { display:flex; align-items:center; justify-content:center; padding:56px clamp(28px,7vw,96px); background:#fff; }
.login-card { width:100%; max-width:380px; }
.mobile-brand { display:none; align-items:center; gap:9px; margin-bottom:48px; font-size:15px; font-weight:600; }
.eyebrow { color:var(--accent); }
.login-card h2 { margin:0 0 10px; font-size:34px; letter-spacing:-.04em; }
.subtitle { margin:0 0 34px; color:var(--muted); font-size:14px; }
.field { display:block; margin-bottom:19px; }
.field span { display:block; margin:0 0 8px 2px; color:#555; font-size:12px; font-weight:600; }
.field input { width:100%; height:50px; padding:0 15px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; font:inherit; font-size:14px; outline:none; transition:border-color .2s,box-shadow .2s; }
.field input::placeholder { color:#b7b7b7; }
.field input:focus { border-color:#8aaef8; box-shadow:0 0 0 4px rgba(37,99,235,.1); }
.message { min-height:20px; margin:-3px 0 7px; color:#d43838; font-size:12px; line-height:1.5; }
.submit { width:100%; height:50px; display:flex; align-items:center; justify-content:center; gap:12px; border:0; border-radius:9px; background:#111827; color:#fff; font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:transform .15s,background .2s,opacity .2s; }
.submit:hover { background:#1f2937; transform:translateY(-1px); }
.submit:disabled { cursor:wait; opacity:.55; transform:none; }
.arrow { font-size:19px; line-height:1; }
.security-note { margin:25px 0 0; color:#b0b0b0; font-size:11px; text-align:center; }
@media (max-width:800px) { .login-shell{grid-template-columns:1fr}.login-visual{display:none}.login-panel{min-height:100vh;padding:38px 28px}.mobile-brand{display:flex}.login-card h2{font-size:30px} }
@media (prefers-reduced-motion:reduce) { .visual-orb{animation:none} }