.login-page { min-height: calc(100vh - 66px); background: #f6f8fc; }
.login-shell { display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,.78fr); width:min(1040px,calc(100% - 32px)); margin:0 auto; padding:54px 0 70px; gap:34px; align-items:stretch; }
.login-story { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; min-height:560px; padding:54px; border-radius:24px; color:#fff; background:linear-gradient(140deg,#0d2854,#155eef 72%,#4d8dff); box-shadow:0 22px 55px rgba(21,94,239,.2); }
.login-story::after { content:""; position:absolute; width:340px; height:340px; right:-120px; top:-160px; border-radius:50%; background:#ffffff14; }
.login-story .eyebrow { margin:0 0 12px; color:#cfe0ff; font-size:12px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.login-story h1 { max-width:560px; margin:0; color:#fff; font-size:clamp(34px,4.5vw,52px); line-height:1.05; letter-spacing:-.03em; }
.login-story > p:last-of-type { max-width:560px; margin:18px 0 0; color:#e8f0ff; font-size:17px; line-height:1.65; }
.login-benefits { display:grid; gap:14px; margin:34px 0 0; padding:0; list-style:none; }
.login-benefits li { display:flex; gap:11px; align-items:center; color:#edf3ff; }.login-benefits li::before { content:"✓"; display:grid; flex:0 0 28px; width:28px; height:28px; place-items:center; border-radius:9px; background:#ffffff20; font-weight:900; }
.login-card { align-self:center; padding:34px; border:1px solid #e1e7f0; border-radius:20px; background:#fff; box-shadow:0 12px 38px rgba(20,33,61,.08); }
.login-card h2 { margin:0; color:#14213d; font-size:29px; }.login-card .intro { margin:8px 0 26px; color:#667085; }
.login-form { display:grid; gap:17px; }.login-field { display:grid; gap:7px; }.login-field label { margin:0; color:#344054; font-size:13px; font-weight:800; }
.login-field input { box-sizing:border-box; width:100%; min-height:48px; padding:11px 12px; border:1px solid #cfd8e6; border-radius:10px; background:#fff; color:#14213d; font-size:15px; }.login-field input:focus { border-color:#155eef; outline:3px solid #dbe8ff; }
.password-wrap { position:relative; }.password-wrap input { padding-right:70px; }.password-toggle { position:absolute; right:7px; top:7px; width:auto; min-height:34px; padding:6px 9px; border:0; background:transparent; color:#155eef; font-size:12px; font-weight:800; cursor:pointer; }
.login-submit { width:100%; min-height:48px; margin-top:3px; font-size:15px; font-weight:850; }.login-message { min-height:20px; margin:0; color:#b42318; font-size:13px; font-weight:650; line-height:1.4; }.login-message.success { color:#067647; }
.login-links { display:flex; justify-content:space-between; gap:14px; margin-top:20px; color:#667085; font-size:14px; }.login-links button { width:auto; padding:0; border:0; background:none; color:#155eef; font:inherit; cursor:pointer; text-decoration:underline; }
.reset-panel { margin-top:20px; padding-top:20px; border-top:1px solid #e4eaf2; }.reset-panel p { margin:0 0 12px; color:#667085; font-size:14px; line-height:1.5; }
.login-security { margin:24px 0 0; color:#98a2b3; text-align:center; font-size:12px; }
@media(max-width:820px){.login-shell{grid-template-columns:1fr;max-width:600px;padding-top:24px}.login-story{min-height:0;padding:34px}.login-benefits{margin-top:24px}.login-card{width:100%;box-sizing:border-box}}
@media(max-width:500px){.login-shell{width:calc(100% - 24px)}.login-story{padding:28px 22px}.login-story h1{font-size:34px}.login-card{padding:27px 20px}.login-links{flex-direction:column}}