:root { --brand: #0f766e; --brand-dark: #0b2e33; }
body.auth-body { min-height: 100vh; margin: 0; background: #f1f5f4; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.auth-card { width: 100%; max-width: 980px; display: flex; background: #fff; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 30px 80px rgba(11, 46, 51, .25); }

.auth-brand { position: relative; flex: 1 1 45%; padding: 3rem 2.5rem; color: #fff; overflow: hidden;
    background: radial-gradient(circle at 20% 15%, #14a79a 0%, transparent 45%), linear-gradient(160deg, #0f766e 0%, var(--brand-dark) 100%); }
.auth-brand::before, .auth-brand::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.auth-brand::before { width: 320px; height: 320px; right: -110px; bottom: -110px; }
.auth-brand::after { width: 180px; height: 180px; left: -60px; bottom: 80px; }
.auth-brand > * { position: relative; z-index: 1; }
.auth-logo { width: 64px; height: 64px; border-radius: 1.1rem; display: grid; place-items: center; font-size: 2rem; background: rgba(255, 255, 255, .16); backdrop-filter: blur(4px); margin-bottom: 1.5rem; }
.auth-logo img { max-width: 80%; max-height: 80%; object-fit: contain; }
.auth-brand h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: .5rem; }
.auth-brand p.tagline { color: rgba(255, 255, 255, .8); margin-bottom: 2rem; }
.auth-features { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.auth-features li { display: flex; align-items: center; gap: .75rem; font-size: .95rem; }
.auth-features i { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: .6rem; background: rgba(255, 255, 255, .15); }

.auth-form { flex: 1 1 55%; padding: 3rem 2.75rem; display: flex; flex-direction: column; justify-content: center; }
.auth-form h2 { font-weight: 700; color: var(--brand-dark); margin-bottom: .25rem; }
.auth-form .sub { color: #6b7c7a; margin-bottom: 2rem; }

.field { position: relative; margin-bottom: 1.1rem; }
.field > i.lead { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #8aa09d; font-size: 1.05rem; pointer-events: none; }
.field .form-control { height: 3.1rem; padding-left: 2.8rem; border-radius: .8rem; border: 1.5px solid #dbe5e3; background: #f7faf9; }
.field .form-control:focus { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 .25rem rgba(15, 118, 110, .15); }
.field .form-control:focus ~ i.lead { color: var(--brand); }
.field .toggle { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #8aa09d; padding: .5rem .7rem; }
.field .toggle:hover { color: var(--brand); }
.field .form-control.is-invalid { background-image: none; }
.field-label { font-size: .85rem; font-weight: 600; color: #3b4f4c; margin-bottom: .4rem; display: block; }

.auth-submit { height: 3.1rem; border: 0; border-radius: .8rem; font-weight: 600; color: #fff; width: 100%;
    background: linear-gradient(135deg, #14a79a, var(--brand)); transition: transform .15s, box-shadow .15s; }
.auth-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(15, 118, 110, .35); color: #fff; }
.auth-form .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

@media (max-width: 767.98px) {
    .auth-card { flex-direction: column; max-width: 440px; }
    .auth-brand { padding: 2rem 1.75rem; }
    .auth-features { display: none; }
    .auth-brand p.tagline { margin-bottom: 0; }
    .auth-form { padding: 2rem 1.75rem; }
}