:root { --login-green:#194b3b; --login-dark:#0b2e24; --login-accent:#3b8068; --login-pale:#edf5f1; --login-text:#16231d; --login-muted:#75817b; }
* { box-sizing: border-box; }
html,body { min-height:100%; }
.login-body { margin:0; font-family:Inter,sans-serif; color:var(--login-text); background:linear-gradient(135deg,#dfe9e4,#f4f6f3); }
.login-page { display:grid; place-items:center; min-height:100vh; padding:34px; }
.login-shell { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr); width:min(1180px,100%); min-height:690px; overflow:hidden; background:#fff; border-radius:24px; box-shadow:0 28px 80px rgba(15,45,34,.19); }
.login-welcome { position:relative; display:flex; min-width:0; overflow:hidden; color:#fff; background-image:url('../images/bglogin.png'); background-position:center; background-size:cover; }
.welcome-overlay { position:absolute; inset:0; background:linear-gradient(145deg,rgba(5,39,29,.18),rgba(4,33,25,.48)); }
.welcome-brand { position:absolute; z-index:2; top:34px; left:38px; display:flex; align-items:center; gap:12px; font-size:.68rem; font-weight:700; letter-spacing:.16em; }
.welcome-brand img { width:48px; height:48px; object-fit:contain; filter:brightness(0) invert(1); }
.welcome-content { position:relative; z-index:2; align-self:center; max-width:555px; padding:70px 58px 50px; }
.welcome-kicker,.form-kicker { display:block; margin-bottom:15px; color:#a4e5c4; font-size:.66rem; font-weight:700; letter-spacing:.18em; }
.welcome-content h1 { margin:0 0 24px; font-size:clamp(2.7rem,5vw,4.5rem); font-weight:650; letter-spacing:-.045em; line-height:.98; }
.welcome-content p { max-width:520px; margin:0 0 13px; color:rgba(255,255,255,.82); font-size:.96rem; line-height:1.65; }
.welcome-access { display:flex; align-items:center; gap:10px; margin-top:28px; padding-top:23px; color:#d4f2e2; border-top:1px solid rgba(255,255,255,.20); font-size:.84rem; font-weight:500; }
.welcome-access i { font-size:1.15rem; }
.login-form-panel { display:flex; align-items:center; justify-content:center; padding:55px 58px; background:#fff; }
.login-form-wrap { width:100%; max-width:390px; }
.login-mobile-brand { display:none; align-items:center; gap:10px; margin-bottom:36px; font-weight:700; }
.login-mobile-brand img { width:42px; height:42px; object-fit:contain; }
.form-kicker { margin-bottom:10px; color:var(--login-accent); }
.login-form-wrap h2 { margin:0 0 10px; font-size:2rem; font-weight:650; letter-spacing:-.035em; }
.form-subtitle { margin:0 0 34px; color:var(--login-muted); font-size:.88rem; }
.login-field { margin-bottom:20px; }
.login-field label { display:block; margin:0 0 8px; font-size:.78rem; font-weight:600; }
.login-input { position:relative; display:flex; align-items:center; }
.login-input > i { position:absolute; left:17px; color:#7c8e85; font-size:1rem; }
.login-input input { width:100%; height:52px; padding:0 48px; color:var(--login-text); background:#fbfcfb; border:1px solid #dce4df; border-radius:13px; outline:none; font-size:.88rem; transition:.2s; }
.login-input input::placeholder { color:#a2ada7; }
.login-input input:focus { background:#fff; border-color:var(--login-accent); box-shadow:0 0 0 4px rgba(59,128,104,.11); }
.password-toggle { position:absolute; right:10px; display:grid; place-items:center; width:36px; height:36px; padding:0; color:#78877f; background:transparent; border:0; border-radius:8px; }
.password-toggle:hover { color:var(--login-green); background:var(--login-pale); }
.field-error { display:block; min-height:16px; margin-top:5px; color:#b42318; font-size:.70rem; }
.login-submit { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; height:53px; margin-top:8px; color:#fff; background:linear-gradient(135deg,#285f4d,#143d30); border:0; border-radius:13px; font-size:.88rem; font-weight:650; box-shadow:0 12px 25px rgba(25,75,59,.20); transition:.2s; }
.login-submit:hover { transform:translateY(-1px); box-shadow:0 15px 30px rgba(25,75,59,.28); }
.login-submit i { transition:transform .2s; }
.login-submit:hover i { transform:translateX(3px); }
.login-support { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:28px; color:var(--login-muted); font-size:.70rem; text-align:center; }
.login-alert { display:flex; align-items:flex-start; gap:9px; margin-bottom:20px; padding:11px 13px; border-radius:10px; font-size:.76rem; line-height:1.4; }
.login-alert:empty { display:none; }
.login-alert-info { color:#285943; background:#edf7f1; border:1px solid #d4eadc; }
.login-alert-error { color:#8f271e; background:#fff1ef; border:1px solid #f5d4cf; }
.login-alert-error ul { margin:0; padding-left:16px; }
@media (max-width:900px) {
    .login-page { padding:20px; }
    .login-shell { grid-template-columns:1fr; width:min(530px,100%); min-height:0; }
    .login-welcome { min-height:245px; }
    .welcome-brand { display:none; }
    .welcome-content { align-self:end; padding:38px 38px 32px; }
    .welcome-content h1 { margin-bottom:12px; font-size:2.35rem; }
    .welcome-content p { display:none; }
    .welcome-access { margin-top:14px; padding-top:14px; }
    .login-form-panel { padding:38px; }
    .login-mobile-brand { display:flex; }
}
@media (max-width:520px) {
    .login-page { display:block; padding:0; background:#fff; }
    .login-shell { min-height:100vh; border-radius:0; box-shadow:none; }
    .login-welcome { min-height:205px; }
    .welcome-content { padding:30px 25px 25px; }
    .welcome-content h1 { font-size:2rem; }
    .welcome-access { font-size:.74rem; }
    .login-form-panel { padding:32px 25px 38px; }
    .login-mobile-brand { margin-bottom:28px; }
}