:root {
    --navy: #072f5f;
    --blue: #0a4a8a;
    --sky: #1e88e5;
    --orange: #f57c00;
    --ink: #10243e;
    --muted: #607d8b;
    --border: #d9e4ef;
    --surface: rgba(255,255,255,.94);
}
* { box-sizing: border-box; }
html, body { min-height:100%; }
body {
    margin:0;
    font-family:"Segoe UI", Arial, sans-serif;
    color:var(--ink);
    background:
      radial-gradient(circle at 85% 18%, rgba(30,136,229,.18), transparent 33%),
      linear-gradient(135deg, #eef6fd 0%, #f9fbfd 48%, #e4eef8 100%);
}
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(320px, 46%) 1fr; }
.login-brand-panel {
    position:relative; overflow:hidden; padding:54px clamp(34px,6vw,82px);
    background:linear-gradient(150deg, rgba(7,47,95,.98), rgba(10,74,138,.94));
    color:#fff; display:flex; flex-direction:column; justify-content:center;
}
.login-brand-panel:before, .login-brand-panel:after {
    content:""; position:absolute; border:1px solid rgba(255,255,255,.1); border-radius:24px; transform:rotate(-8deg);
}
.login-brand-panel:before { width:420px; height:190px; right:-150px; top:90px; }
.login-brand-panel:after { width:520px; height:230px; right:-190px; bottom:70px; }
.brand-content { position:relative; z-index:1; max-width:560px; }
.brand-logo { width:150px; height:150px; border-radius:32px; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.brand-title { margin:28px 0 8px; font-size:clamp(38px,5vw,62px); line-height:1; letter-spacing:.8px; }
.brand-title span { color:#48a8ff; }
.brand-payoff { margin:0; max-width:530px; font-size:clamp(19px,2vw,27px); line-height:1.4; font-weight:400; color:#e8f2fc; }
.brand-kicker { margin-top:36px; display:inline-flex; align-items:center; gap:10px; color:#d7e8f8; font-size:15px; }
.brand-kicker:before { content:""; width:34px; height:3px; border-radius:3px; background:var(--orange); }
.login-form-panel { padding:38px; display:flex; align-items:center; justify-content:center; }
.login-card {
    width:min(100%, 460px); padding:38px; border:1px solid rgba(217,228,239,.9); border-radius:24px;
    background:var(--surface); box-shadow:0 25px 65px rgba(7,47,95,.14); backdrop-filter:blur(14px);
}
.mobile-logo { display:none; text-align:center; margin-bottom:18px; }
.mobile-logo img { width:98px; height:98px; border-radius:22px; }
.login-card h1 { margin:0; font-size:31px; color:var(--navy); }
.login-intro { margin:8px 0 28px; color:var(--muted); font-size:16px; line-height:1.5; }
.field { margin-top:18px; }
.field label { display:block; margin-bottom:7px; font-size:14px; font-weight:600; color:#27415d; }
.field input { width:100%; min-height:52px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:#fff; color:var(--ink); font-size:17px; outline:none; transition:.18s; }
.field input:focus { border-color:var(--sky); box-shadow:0 0 0 4px rgba(30,136,229,.12); }
.login-btn { width:100%; min-height:54px; margin-top:26px; padding:13px 20px; border:0; border-radius:12px; background:linear-gradient(90deg,var(--blue),var(--sky)); color:#fff; font-size:17px; font-weight:700; letter-spacing:.35px; cursor:pointer; box-shadow:0 10px 24px rgba(10,74,138,.25); }
.login-btn:hover { filter:brightness(1.04); }
.login-btn:active { transform:translateY(1px); }
.error { margin-top:18px; padding:13px 14px; background:#fff1f1; border:1px solid #efb6b6; color:#9e2222; border-radius:10px; line-height:1.4; }
.login-footer { margin-top:24px; text-align:center; color:#7890a6; font-size:13px; }
@media (max-width: 850px) {
    .login-shell { display:block; min-height:100vh; }
    .login-brand-panel { display:none; }
    .login-form-panel { min-height:100vh; padding:24px; }
    .login-card { padding:28px 24px; border-radius:22px; }
    .mobile-logo { display:block; }
    .login-card h1, .login-intro { text-align:center; }
}
@media (max-width: 430px) {
    .login-form-panel { padding:16px; align-items:flex-start; padding-top:28px; }
    .login-card { padding:24px 20px; }
}