:root { --login-ink:#102622; --login-cream:#f4f1e9; --login-lime:#d7ee91; --login-blue:#177c82; --login-coral:#e36d55; --login-muted:#52635f; --login-border:#d8ded4; --login-bg:#f4f1e9; }
html, body { min-height:100%; }
body { margin:0; color:var(--login-ink); background:var(--login-bg); }
body > .container-fluid { padding:0; }
.login-page { display:flex; min-height:100vh; width:100%; }
.login-hero { flex:1 1 50%; display:flex; align-items:center; justify-content:center; padding:48px 56px; color:#fff; background:linear-gradient(135deg,#102622 0%,#245b55 100%); animation:login-panel-in .65s ease-out both; }
.login-hero__content { width:100%; max-width:520px; }
.login-brand { display:flex; align-items:center; gap:16px; margin-bottom:42px; }
.login-brand__logo { max-height:52px; width:auto; filter:brightness(0) invert(1); }
.login-brand__name { font-size:1.05rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--login-lime); }
.login-hero h1 { margin:0 0 12px; font-size:clamp(2rem,4vw,2.75rem); line-height:1.15; font-weight:700; }
.login-hero h2 { margin:0 0 20px; color:var(--login-lime); font-size:1.15rem; line-height:1.45; font-weight:500; }
.login-hero__description { max-width:470px; margin:0 0 34px; color:rgba(255,255,255,.76); line-height:1.65; }
.login-confidential { display:block; padding-top:20px; border-top:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.58); font-size:.8rem; }
.login-panel { flex:1 1 50%; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:40px 32px; background-color:var(--login-bg); background-image:radial-gradient(circle,rgba(23,124,130,.2) 1px,transparent 1px); background-size:18px 18px; }
.login-card { width:100%; max-width:440px; padding:42px; border-radius:18px; background:#fff; box-shadow:0 18px 45px rgba(15,42,63,.12); animation:login-card-in .6s .08s ease-out both; }
.login-card__header { margin-bottom:30px; text-align:center; }
.login-card__logo { max-width:190px; max-height:72px; margin-bottom:22px; object-fit:contain; }
.login-card__header h2 { margin:0 0 8px; color:var(--login-ink); font-size:1.625rem; font-weight:700; }
.login-card__header p, .login-card__extra { color:var(--login-muted); font-size:.9rem; }
.login-card .form-group { margin-bottom:20px; }
.login-card .form-label { display:block; margin-bottom:6px; color:var(--login-ink); font-size:.875rem; font-weight:600; }
.login-card .form-control { min-height:46px; border:1px solid var(--login-border); border-radius:10px; color:var(--login-ink); transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease; }
.login-card .form-control:focus { border-color:var(--login-blue); box-shadow:0 0 0 3px rgba(23,124,130,.16); }
.login-card .input-group .form-control { border-radius:10px 0 0 10px; }
.btn-password-toggle { border:1px solid var(--login-border); border-left:0; border-radius:0 10px 10px 0; color:var(--login-blue); background:#fff; transition:color .2s ease,background-color .2s ease; }
.btn-password-toggle:hover { color:var(--login-ink); background:var(--login-cream); }
.login-remember { display:flex; align-items:center; gap:8px; }
.login-remember .form-check-input { margin:0; }
.btn-login { width:100%; padding:12px 18px; border:0; border-radius:999px; color:var(--login-ink); background:var(--login-lime); font-weight:700; transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease; }
.btn-login:hover { color:var(--login-ink); background:#c9e27b; transform:translateY(-1px); }
.btn-login:focus-visible { outline:3px solid rgba(23,124,130,.35); outline-offset:3px; }
.login-card .alert { border:0; border-radius:10px; font-size:.875rem; }
.login-card__extra { margin-top:24px; padding-top:16px; border-top:2px solid var(--login-coral); text-align:center; }
.login-back-link { display:flex; align-items:center; justify-content:center; margin-top:18px; color:var(--login-blue); font-size:.9rem; font-weight:700; text-decoration:none; }
.login-back-link { transition:color .2s ease,transform .2s ease; }
.login-back-link:hover { color:var(--login-ink); text-decoration:underline; transform:translateX(-2px); }
.login-footer { margin-top:24px; color:var(--login-muted); font-size:.78rem; }
@keyframes login-panel-in { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:translateX(0); } }
@keyframes login-card-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { .login-hero,.login-card { animation:none; } *,*::before,*::after { transition-duration:.01ms !important; } }
@media (max-width:800px) { .login-page{display:block;} .login-hero{display:none;} .login-panel{min-height:100vh;padding:36px 20px 28px;} .login-card{padding:30px 24px;} }