:root { color:#1c2b3a; background:#eef3f6; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; }
a { color:inherit; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(330px,.9fr) minmax(430px,1.1fr); }
.brand-panel { position:relative; display:flex; flex-direction:column; min-height:100vh; padding:42px clamp(34px,6vw,86px); overflow:hidden; color:#fff; background:radial-gradient(circle at 82% 20%,rgba(121,189,209,.2),transparent 28%),linear-gradient(145deg,#0b2740,#143f60 60%,#1f6279); }
.brand-panel::after { content:""; position:absolute; width:440px; height:440px; right:-220px; bottom:-210px; border:1px solid rgba(255,255,255,.15); border-radius:50%; box-shadow:0 0 0 75px rgba(255,255,255,.025),0 0 0 150px rgba(255,255,255,.018); }
.methodmore { position:relative; z-index:1; width:max-content; font-size:19px; font-weight:800; letter-spacing:-.03em; text-decoration:none; }
.brand-copy { position:relative; z-index:1; margin:auto 0; max-width:510px; }
.brand-mark { display:grid; place-items:center; width:64px; height:64px; margin-bottom:28px; border-radius:19px; background:#f1f7fb; color:#123b60; font-size:20px; font-weight:850; letter-spacing:-.04em; box-shadow:0 14px 34px rgba(2,17,29,.18); }
.eyebrow { margin:0 0 10px; color:#9fd0df; font-size:11px; font-weight:800; letter-spacing:.18em; }
.brand-copy h1 { margin:0; max-width:470px; font-size:clamp(38px,5vw,66px); line-height:1.12; letter-spacing:-.065em; }
.brand-copy p:last-child { max-width:500px; margin:25px 0 0; color:#d4e4ed; font-size:14px; line-height:1.9; }
.fictional-note { position:relative; z-index:1; margin:0; color:#a9c7d5; font-size:11px; }
.form-panel { display:grid; place-items:center; min-height:100vh; padding:44px clamp(24px,7vw,92px); background:linear-gradient(145deg,#f8fafb,#edf3f6); }
.form-card { width:min(100%,460px); padding:42px; border:1px solid #dce5ea; border-radius:20px; background:#fff; box-shadow:0 22px 60px rgba(22,53,76,.09); }
.demo-label { display:inline-flex; align-items:center; gap:8px; min-height:29px; padding:0 11px; border:1px solid #d5e4ec; border-radius:999px; color:#537184; background:#f4f8fa; font-size:10px; font-weight:750; letter-spacing:.04em; }
.demo-label i { width:7px; height:7px; border-radius:50%; background:#5b9bb1; box-shadow:0 0 0 4px rgba(91,155,177,.13); }
h2 { margin:24px 0 5px; color:#17334d; font-size:30px; letter-spacing:-.04em; }
.form-card>p { margin:0 0 25px; color:#6d7b88; font-size:12px; line-height:1.7; }
form { display:grid; }
label { margin:14px 0 7px; color:#344f64; font-size:11px; font-weight:750; }
input { width:100%; height:49px; padding:0 14px; border:1px solid #ccd8df; border-radius:9px; outline:none; color:#1d3446; background:#fbfcfd; font:inherit; }
input:focus { border-color:#4b89aa; box-shadow:0 0 0 3px rgba(75,137,170,.13); background:#fff; }
.password-field { position:relative; }
.password-field input { padding-right:62px; }
.password-field button { position:absolute; top:6px; right:6px; height:37px; padding:0 11px; border:0; border-radius:7px; color:#2e6688; background:#eaf2f7; font-size:10px; font-weight:750; cursor:pointer; }
.submit-button { min-height:51px; margin-top:27px; border:0; border-radius:10px; color:#fff; background:#18577f; font:inherit; font-size:12px; font-weight:800; cursor:pointer; box-shadow:0 10px 22px rgba(24,87,127,.18); }
.submit-button:hover { background:#12496d; }
.back-link { display:block; margin-top:21px; color:#557184; font-size:10px; text-align:center; text-decoration:none; }
.back-link:hover { text-decoration:underline; }
.error-message { margin:0 0 9px; padding:11px 13px; border:1px solid #eccbc8; border-radius:8px; color:#9e4945; background:#fff2f1; font-size:11px; line-height:1.5; }
@media (max-width:800px) { .login-shell{grid-template-columns:1fr}.brand-panel{min-height:310px;padding:30px 25px}.brand-copy{margin:50px 0 40px}.brand-mark{width:49px;height:49px;margin-bottom:19px;border-radius:14px;font-size:15px}.brand-copy h1{font-size:38px}.brand-copy p:last-child{margin-top:16px;font-size:12px}.fictional-note{display:none}.form-panel{min-height:0;padding:28px 16px 48px}.form-card{padding:29px 23px;border-radius:16px} }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }