body.auth-gated { overflow: hidden; }
.auth-gate { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: minmax(380px, 47%) 1fr; min-height: 100vh; background: #f6f7f5; color: #333; }
.auth-gate[aria-hidden="true"] { display: none; }
.auth-panel { display: flex; flex-direction: column; justify-content: center; padding: 54px clamp(30px, 8vw, 116px); background: #fff; }
.auth-brand, .brand { display: flex; align-items: center; gap: 8px; width: max-content; border-radius: 10px; padding: 6px 9px; background: #080808; }
.auth-brand { margin-bottom: 48px; }
.logo-symbol-wrap { width: 31px; height: 31px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; background: #f7f7f3; }
.logo-symbol { width: 27px; height: 27px; object-fit: contain; }
.logo-copy { display: flex; align-items: baseline; gap: 4px; color: #f7f7f3; font: 800 17px/1 Manrope, sans-serif; letter-spacing: -1.1px; }
.logo-copy strong { color: #42c70d; }
.auth-eyebrow { margin: 0 0 10px; color: #16841e; font: 10px 'DM Mono', monospace; letter-spacing: 1.2px; }
.auth-panel h2 { max-width: 390px; margin: 0; font-size: clamp(29px, 3vw, 38px); line-height: 1.08; letter-spacing: -1.8px; }
.auth-subtitle { max-width: 360px; margin: 12px 0 28px; color: #6f7671; font-size: 13px; line-height: 1.6; }
.auth-form { width: min(100%, 380px); }
.auth-field { display: block; margin: 0 0 14px; color: #48504b; font-size: 11px; font-weight: 700; }
#authNameField[hidden] { display: none; }
.auth-field[hidden], .auth-resend[hidden], .auth-switch-row[hidden] { display: none !important; }
.auth-field input { width: 100%; margin-top: 7px; border: 1px solid #c5c3c3; border-radius: 8px; padding: 12px 13px; color: #333; font: 500 13px Manrope, sans-serif; outline: none; }
.password-input { position: relative; display: block; margin-top: 7px; }
.auth-field .password-input input { margin-top: 0; padding-right: 65px; }
.password-toggle { position: absolute; top: 50%; right: 6px; display: inline-flex; align-items: center; gap: 4px; transform: translateY(-50%); border: 0; border-radius: 6px; padding: 6px 7px; background: transparent; color: #637068; cursor: pointer; font: 700 10px Manrope, sans-serif; }
.password-toggle:hover { background: #edf4ef; color: #16841e; }
.password-toggle:focus-visible { outline: 2px solid #02b30e; outline-offset: 1px; }
.password-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.auth-field input:focus { border-color: #02b30e; box-shadow: 0 0 0 3px #02b30e1f; }
.auth-submit { width: 100%; margin-top: 5px; border: 0; border-radius: 8px; padding: 13px 15px; background: #02b30e; color: #fff; cursor: pointer; font: 700 12px Manrope, sans-serif; }
.auth-submit:disabled { cursor: wait; opacity: .7; }
.auth-resend { display: inline-flex; margin: 14px 0 0; border: 0; padding: 0; background: transparent; color: #16841e; cursor: pointer; font: 700 11px Manrope, sans-serif; }
.auth-resend:disabled { cursor: wait; opacity: .6; }
#authOtpField input { letter-spacing: .42em; font: 700 18px 'DM Mono', monospace; text-align: center; }
.auth-message { min-height: 20px; margin: 12px 0 0; color: #5d6861; font-size: 11px; line-height: 1.5; }
.auth-message[data-kind="error"] { color: #b42318; }
.auth-message[data-kind="warning"] { color: #a15c00; }
.auth-switch-row { margin: 18px 0 0; color: #737b76; font-size: 11px; }
.auth-switch { margin-left: 4px; border: 0; padding: 0; background: transparent; color: #16841e; cursor: pointer; font: 700 11px Manrope, sans-serif; }
.auth-footnote { max-width: 380px; margin: 30px 0 0; color: #8b928d; font-size: 10px; line-height: 1.55; }
.auth-aside { display: grid; align-content: center; gap: 25px; padding: clamp(40px, 8vw, 120px); background: linear-gradient(145deg, #333 0%, #242724 100%); color: #fff; overflow: hidden; }
.auth-aside h3 { max-width: 510px; margin: 0; font-size: clamp(31px, 4vw, 52px); line-height: 1.02; letter-spacing: -2.6px; }
.auth-aside h3 em { color: #8ad325; font-style: normal; }
.auth-aside p { max-width: 470px; margin: 0; color: #c5c3c3; font-size: 14px; line-height: 1.65; }
.auth-points { display: grid; gap: 11px; max-width: 440px; margin: 10px 0 0; }
.auth-point { display: flex; gap: 10px; align-items: center; color: #e7ece7; font-size: 12px; }
.auth-point i { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: #8ad325; color: #263300; font-style: normal; font-size: 12px; font-weight: 800; }
body.dark .auth-gate { background: #000; }
body.dark .auth-panel { background: #080808; color: #f7f7f3; }
body.dark .auth-aside { background: linear-gradient(145deg, #151515 0%, #303030 100%); }
body.dark .auth-submit { background: #42c70d; color: #071004; }
body.dark .auth-eyebrow, body.dark .auth-switch { color: #78d62e; }
body.dark .auth-aside h3 em { color: #42c70d; }
body.dark .auth-aside p { color: #aaa; }
body.dark .auth-point i { background: #40522f; color: #78d62e; }
body.dark .auth-subtitle, body.dark .auth-field, body.dark .auth-switch-row { color: #aaa; }
body.dark .auth-field input { border-color: #4a4a4a; background: #303030; color: #f7f7f3; }
body.dark .auth-field input:focus { border-color: #42c70d; box-shadow: 0 0 0 3px #42c70d26; }
body.dark .auth-resend { color: #78d62e; }
body.dark .password-toggle { color: #b9b9b5; }
body.dark .password-toggle:hover { background: #40522f; color: #e5f9dc; }
.profile { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }
.profile:hover { opacity: .82; }
@media (max-width: 980px) { .sidebar .brand { width: 42px; margin: 0 auto 25px; padding: 5px; } .sidebar .brand .logo-copy { display: none; } }
@media (max-width: 760px) { .auth-gate { display: block; overflow: auto; } .auth-panel { min-height: 100vh; padding: 35px 26px; } .auth-brand { margin-bottom: 38px; } .auth-aside { display: none; } }

/* Wordmark-only brand: no logo image, uppercase split-color name. */
.auth-brand, .brand { background: transparent; padding: 0; border-radius: 0; }
.logo-copy { gap: 7px; color: var(--ink, #192824); font: 800 23px/1 Manrope, sans-serif; letter-spacing: 0.4px; text-transform: uppercase; white-space: nowrap; }
.logo-copy strong { color: #16841e; }
.auth-brand .logo-copy { font-size: 32px; letter-spacing: 0.6px; }
.logo-monogram { display: none; font: 800 19px/1 Manrope, sans-serif; color: var(--ink, #192824); }
.logo-monogram strong { color: #16841e; }
body.dark .logo-copy, body.dark .logo-monogram { color: var(--text); }
body.dark .logo-monogram strong { color: var(--brand); }
.sidebar .brand { padding: 4px 10px 26px; }