:root {
    --ink: #19231f;
    --muted: #6f7b76;
    --line: #d6e0db;
    --primary: #087d58;
    --primary-dark: #056544;
    --primary-soft: #e3f5ed;
}
html { font-size: 16px; height: 100%; overflow: hidden; }
body { background: #eef5f1; color: var(--ink); font-family: "Nunito", "Segoe UI", sans-serif; font-size: 1rem; font-weight: 600; height: 100%; letter-spacing: 0; overflow: hidden; }
body, button, input, select, textarea { font-family: "Nunito", "Segoe UI", sans-serif; letter-spacing: 0; }
.auth-shell {
    align-items: center;
    display: flex;
    height: 100vh;
    overflow: hidden;
    padding: 1rem;
    position: relative;
}
.auth-layout {
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(198,214,207,.86);
    border-radius: 8px;
    box-shadow: 0 22px 70px rgba(25,35,31,.11);
    display: grid;
    grid-template-columns: 440px minmax(420px, 1fr);
    gap: 0;
    margin: 0 auto;
    max-width: 1080px;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}
.auth-form-panel { align-items: center; background: #fff; display: flex; height: min(690px, calc(100vh - 2rem)); padding: 1.35rem; }
.auth-form-wrap { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0; width: 100%; }
.login-brand { align-items: center; color: var(--ink); display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.05rem; text-align: center; }
.login-brand a:hover { text-decoration: none; }
.login-brand-logo { display: block; }
.login-brand img { display: block; height: auto; max-width: 230px; object-fit: contain; width: 230px; }
.login-brand-text { display: block; line-height: 1.08; }
.login-brand-name { color: var(--ink); display: block; font-size: 1.36rem; font-weight: 900; }
.login-brand-name:hover { color: var(--ink); }
.login-brand-subtitle { color: var(--muted); display: block; font-size: .86rem; font-weight: 800; margin-top: .2rem; }
.login-brand-subtitle:hover { color: var(--muted); }
.demo-login-card {
    background: linear-gradient(135deg, #e5f6ee 0%, #f6fbf8 100%);
    border: 1px solid #cae3d8;
    border-radius: 8px;
    display: grid;
    gap: .55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: .9rem;
    padding: .68rem .75rem;
}
.demo-login-card span { color: var(--muted); display: block; font-size: .68rem; font-weight: 900; margin-bottom: .08rem; text-transform: uppercase; }
.demo-login-card strong { color: var(--ink); display: block; font-size: .88rem; font-weight: 900; overflow-wrap: anywhere; }
.auth-visual {
    align-items: stretch;
    background:
        radial-gradient(circle at 78% 4%, rgba(255,255,255,.13) 0 1px, transparent 2px 100%),
        linear-gradient(145deg, #10241c 0%, #0b6547 62%, #0f8d64 100%);
    border-radius: 0;
    box-shadow: none;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: min(690px, calc(100vh - 2rem));
    overflow: hidden;
    padding: 1.35rem;
    position: relative;
}
.auth-visual::before { border: 1px solid rgba(255,255,255,.11); border-radius: 50%; content: ""; height: 290px; position: absolute; right: -92px; top: -100px; width: 290px; }
.auth-visual::after { background: rgba(255,206,84,.22); bottom: -70px; content: ""; height: 130px; opacity: .75; position: absolute; right: -42px; transform: rotate(-14deg); width: 290px; }
.auth-visual-top { align-items: center; display: flex; justify-content: flex-end; min-height: 34px; position: relative; z-index: 1; }
.auth-visual-top span { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #e8fff7; font-size: .72rem; font-weight: 900; padding: .38rem .64rem; text-transform: uppercase; }
.auth-logo-hero { align-items: center; display: flex; flex: 1 1 auto; justify-content: center; min-height: 0; padding: .45rem 0 .85rem; position: relative; z-index: 1; }
.auth-logo-hero img { display: block; filter: none; height: auto; image-rendering: auto; max-height: 350px; max-width: min(90%, 540px); object-fit: contain; width: 540px; }
.auth-visual-content { max-width: 470px; position: relative; z-index: 1; }
.auth-visual h2 { color: #fff; font-size: 1.52rem; font-weight: 900; letter-spacing: 0; line-height: 1.16; margin-bottom: .5rem; }
.auth-visual p { color: #d7e7e1; font-size: .88rem; line-height: 1.45; margin: 0; }
.auth-shell label { color: #34413c; font-size: .82rem; font-weight: 900; margin-bottom: .28rem; }
.auth-shell .form-group { margin-bottom: .68rem; }
.auth-shell .form-control { border: 1.5px solid #c5d1cb; border-radius: 8px; color: var(--ink); font-size: .9rem; font-weight: 700; height: 42px; padding: .5rem .72rem; }
.auth-shell .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(8,125,88,.12); }
.auth-shell .btn-primary { background: var(--primary); border-color: var(--primary); border-radius: 8px; box-shadow: 0 8px 18px rgba(8,125,88,.16); font-size: .94rem; font-weight: 900; min-height: 44px; }
.auth-shell .btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.auth-shell .form-check-label { color: var(--muted); font-size: .82rem; font-weight: 700; }
.auth-link { color: var(--primary); font-size: .8rem; font-weight: 900; }
.auth-link:hover { color: var(--primary-dark); }
.auth-shell > .container { align-items: center; display: flex; justify-content: center; min-height: calc(100vh - 2.3rem); padding-top: 4rem; }
.auth-shell > .container .card { border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 20px 55px rgba(25,35,31,.09); }
.auth-shell > .container .card-header { background: #fff; border-bottom: 1px solid var(--line); font-size: 1.3rem; font-weight: 900; padding: 1.5rem; }
.auth-shell > .container .card-body { padding: 1.7rem; }
@media (max-width: 980px) {
    html { min-height: 100%; overflow: auto; }
    body { min-height: 100%; overflow: auto; }
    .auth-shell { align-items: flex-start; height: auto; min-height: 100dvh; overflow: visible; padding: 1rem; }
    .auth-layout { grid-template-columns: 1fr; margin: 0 auto; max-width: 480px; overflow: visible; }
    .auth-form-panel { align-items: flex-start; height: auto; min-height: 0; padding: 1.2rem; }
    .auth-visual { display: none; }
}
@media (max-width: 575.98px) {
    html { font-size: 16px; }
    .auth-shell { padding: .7rem; }
    .auth-layout { border-radius: 8px; box-shadow: 0 14px 42px rgba(25,35,31,.1); }
    .auth-form-panel { padding: 1rem; }
    .login-brand { gap: .52rem; margin-bottom: .95rem; }
    .login-brand img { max-width: 190px; width: 190px; }
    .login-brand-name { font-size: 1.26rem; }
    .login-brand-subtitle { font-size: .8rem; }
    .demo-login-card { gap: .45rem; grid-template-columns: 1fr; margin-bottom: .8rem; padding: .62rem .68rem; }
    .demo-login-card strong { font-size: .84rem; }
    .auth-shell .form-group { margin-bottom: .62rem; }
    .auth-shell .form-control { font-size: .88rem; height: 40px; padding: .46rem .68rem; }
    .auth-shell .btn-primary { min-height: 42px; }
}