:root { font-family: Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:#172033; background:#f5f7fa; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100dvh; }
.login-layout { display:grid; min-height:100dvh; grid-template-columns:minmax(380px,46%) 1fr; }
.login-visual { position:relative; display:flex; overflow:hidden; padding:48px; flex-direction:column; color:white; background:radial-gradient(circle at 75% 24%,#5bb7ff 0 7%,transparent 7.5%),radial-gradient(circle at 25% 72%,#8459e9 0 11%,transparent 11.5%),linear-gradient(145deg,#10234a,#1c6fbe 62%,#733f9c); }
.login-visual::after { position:absolute; inset:0; content:""; opacity:.24; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,black,transparent 85%); }
.visual-brand,.mobile-brand { position:relative; z-index:2; display:flex; align-items:center; gap:11px; font-size:18px; font-weight:800; }
.visual-brand span,.mobile-brand span { display:grid; width:34px; height:34px; place-items:center; border-radius:11px; color:#2688eb; background:white; font-size:13px; }
.story-stack { position:absolute; z-index:1; top:50%; left:50%; width:240px; height:410px; transform:translate(-50%,-54%); }
.story-stack i { position:absolute; inset:0; display:block; border:1px solid rgba(255,255,255,.34); border-radius:32px; background:linear-gradient(160deg,rgba(255,255,255,.22),rgba(255,255,255,.04)); box-shadow:0 25px 60px rgba(4,15,38,.25); backdrop-filter:blur(10px); }
.story-stack i:nth-child(2) { transform:rotate(9deg) translate(42px,8px); }
.story-stack i:nth-child(3) { transform:rotate(-8deg) translate(-42px,10px); }
.visual-copy { z-index:2; margin-top:auto; }
.visual-copy strong,.visual-copy span { display:block; }
.visual-copy strong { font-size:27px; letter-spacing:-.04em; }
.visual-copy span { margin-top:8px; color:rgba(255,255,255,.72); font-size:13px; }
.login-panel { display:grid; place-items:center; padding:32px; background:#f7f9fb; }
.login-card { width:min(100%,390px); padding:34px; border:1px solid #e5eaf0; border-radius:20px; background:white; box-shadow:0 18px 55px rgba(30,51,80,.09); }
.mobile-brand { display:none; margin-bottom:36px; color:#172033; }
.mobile-brand span { color:white; background:#2688eb; }
.eyebrow { margin:0; color:#2688eb; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
h1 { margin:8px 0 8px; font-size:30px; letter-spacing:-.04em; }
.lead { margin:0 0 27px; color:#707b8d; font-size:13px; line-height:1.6; }
label { display:grid; gap:7px; margin-top:15px; color:#414c5c; font-size:11px; font-weight:700; }
input { width:100%; height:48px; padding:0 13px; border:1px solid #dbe1e8; border-radius:11px; color:#172033; background:#fff; font:inherit; outline:none; }
input:focus { border-color:#2688eb; box-shadow:0 0 0 3px rgba(38,136,235,.14); }
.error { min-height:20px; margin:10px 0 0; color:#c7353f; font-size:10px; }
button { display:flex; width:100%; min-height:48px; align-items:center; justify-content:center; gap:9px; margin-top:4px; border:0; border-radius:11px; color:white; background:#2688eb; box-shadow:0 7px 18px rgba(38,136,235,.24); font:700 13px inherit; cursor:pointer; transition:background .2s,transform .15s; }
button:hover { background:#1675d1; }
button:active { transform:scale(.985); }
button:disabled { opacity:.65; cursor:wait; }
button i { display:none; width:15px; height:15px; border:2px solid rgba(255,255,255,.45); border-top-color:white; border-radius:50%; animation:spin .7s linear infinite; }
button.loading i { display:block; }
button.loading span { display:none; }
small { display:block; margin-top:20px; color:#9aa3af; font-size:9px; text-align:center; }
@keyframes spin { to { transform:rotate(360deg); } }
@media(max-width:760px){.login-layout{display:block}.login-visual{display:none}.login-panel{min-height:100dvh;padding:20px}.login-card{padding:28px 22px}.mobile-brand{display:flex}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}