:root { color-scheme: light; --navy:#071f33; --navy-soft:#0b2e47; --yellow:#f4c400; --line:#d7e1e7; --muted:#6f8390; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; display:grid; place-items:center; padding:24px; color:#18384d; background:radial-gradient(circle at 15% 18%,#164e70 0,transparent 31%),linear-gradient(135deg,#041726,#0b2e47 58%,#10293a); font-family:"DM Sans",sans-serif; }
.login-shell { display:grid; grid-template-columns:minmax(330px,.95fr) minmax(360px,1.05fr); width:min(980px,100%); min-height:600px; overflow:hidden; border:1px solid rgba(255,255,255,.2); border-radius:25px; background:#fff; box-shadow:0 32px 100px rgba(0,0,0,.38); }
.login-brand-panel { display:flex; flex-direction:column; justify-content:space-between; gap:45px; padding:48px; color:#fff; background:linear-gradient(145deg,rgba(11,46,71,.97),rgba(7,31,51,.99)),url('/assets/taxote-car.png') center/cover; }
.login-brand { display:flex; align-items:center; gap:12px; font:700 25px/1 "Outfit",sans-serif; letter-spacing:.5px; }
.login-brand span { display:grid; place-items:center; width:38px; height:38px; border:2px solid #fff; border-radius:10px; color:var(--yellow); }
.login-brand-panel small,.login-card-heading small { color:var(--yellow); font-size:10px; font-weight:800; letter-spacing:1.5px; }
.login-brand-panel h1 { max-width:430px; margin:9px 0 12px; font:700 42px/1.03 "Outfit",sans-serif; }
.login-brand-panel p { max-width:430px; color:#c8d7e0; line-height:1.6; }
.security-note { padding-top:18px; border-top:1px solid rgba(255,255,255,.16); font-size:12px; }
.login-card { align-self:center; width:min(470px,calc(100% - 56px)); margin:auto; padding:38px 34px; }
.login-card-heading small { color:#927800; }
.login-card-heading h2 { margin:7px 0 5px; color:var(--navy); font:700 38px/1.05 "Outfit",sans-serif; }
.login-card-heading p { margin:0 0 29px; color:var(--muted); }
form { display:grid; gap:18px; }
label { display:grid; gap:7px; color:#3f596a; font-size:12px; font-weight:700; }
input { width:100%; height:52px; padding:0 14px; border:1px solid var(--line); border-radius:10px; color:var(--navy); outline:0; background:#fbfdfe; font:500 15px "DM Sans",sans-serif; }
input:focus { border-color:#0f5b83; box-shadow:0 0 0 4px rgba(15,91,131,.11); background:#fff; }
.password-control { position:relative; }
.password-control input { padding-right:67px; }
.password-control button { position:absolute; top:7px; right:7px; height:38px; padding:0 12px; border:0; border-radius:7px; color:var(--navy); background:#edf3f6; font-size:10px; font-weight:800; }
.login-submit { min-height:54px; margin-top:5px; border:0; border-radius:10px; color:#fff; background:var(--navy-soft); box-shadow:0 11px 25px rgba(7,31,51,.2); font-weight:800; letter-spacing:.5px; }
.login-submit:hover { background:#114866; transform:translateY(-1px); }
.login-submit:disabled { opacity:.65; cursor:wait; }
.login-error { margin:0; padding:11px 13px; border:1px solid #efb2b2; border-radius:8px; color:#a63131; background:#fff2f2; font-size:12px; }
@media(max-width:760px){ body{padding:12px}.login-shell{grid-template-columns:1fr;min-height:0}.login-brand-panel{padding:29px;gap:28px}.login-brand-panel h1{font-size:31px}.security-note{display:none}.login-card{width:100%;padding:32px 26px 38px}.login-card-heading h2{font-size:32px} }