:root{--navy: #003b56; --navy-2: #004f70; --navy-3: #082f43; --green: #3ac76d; --green-dark: #25a959; --sky: #eaf6fa; --ink: #1f3440; --muted: #6f8089; --line: #dce5e9; --soft: #f5f8f9; --white: #fff; --amber: #eeaa32; --red: #d95a5a; --blue: #2f88b7; --shadow: 0 16px 44px rgba(4,48,70,.12); --max: 1160px; --radius: 4px;}
*{box-sizing: border-box;}
html{scroll-behavior: smooth;}
body{margin: 0px; color: var(--ink); font: 15px / 1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; background: rgb(255, 255, 255);}
button, input{font: inherit;}
button, a{transition: 0.18s;}
a{color: inherit; text-decoration: none;}
button{cursor: pointer;}
button:disabled{cursor: not-allowed; opacity: 0.48;}
.btn{border: 1px solid rgb(201, 214, 219); background: rgb(255, 255, 255); color: rgb(37, 65, 79); padding: 10px 17px; border-radius: 3px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; gap: 7px;}
.btn:hover{border-color: rgb(147, 170, 181); background: rgb(248, 251, 252);}
.btn-primary{background: var(--green); border-color: var(--green); color: rgb(255, 255, 255);}
.btn-primary:hover{background: var(--green-dark); border-color: var(--green-dark);}
.btn-block{width: 100%;}
.field{margin-bottom: 18px;}
.field label{display: block; color: rgb(83, 103, 112); font-size: 13px; margin-bottom: 7px; font-weight: 650;}
.field input{width: 100%; border: 1px solid rgb(207, 218, 221); border-radius: 2px; padding: 12px 13px; outline: 0px; background: rgb(255, 255, 255); color: var(--ink);}
.field input:focus{border-color: rgb(77, 159, 186); box-shadow: rgba(61, 151, 181, 0.12) 0px 0px 0px 3px;}
.check{display: flex; align-items: center; gap: 8px;}
.screen{display: none; min-height: 100vh; animation: auto ease 0s 1 normal none running none;}
.screen.active{display: block;}
@media (prefers-reduced-motion: reduce) {.screen{animation: auto ease 0s 1 normal none running none;}
html{scroll-behavior: auto;}}
.auth-center{display: grid; place-items: center; padding: 44px 20px; flex: 1 0 auto;}
#screen-forgot.active{display: flex; flex-direction: column; min-height: 100vh;}
.auth-card{width: min(430px, 100%); background: rgb(255, 255, 255); border: 1px solid rgb(220, 227, 223); box-shadow: rgba(20, 54, 47, 0.08) 0px 8px 30px; padding: 36px;}
.auth-card h1{font-size: 28px; color: rgb(24, 61, 56); margin: 0px 0px 6px; text-align: center;}
.auth-card > .sub{text-align: center; color: var(--muted); margin: 0px 0px 28px;}
.auth-main-btn{min-height: 46px;}
.captcha-demo{border: 1px solid rgb(207, 216, 212); background: rgb(247, 248, 247); padding: 15px; margin: 6px 0px 16px; display: flex; align-items: center; justify-content: space-between;}
.captcha-demo span{font-size: 10px; color: rgb(135, 147, 141);}
.auth-footer{text-align: center; padding: 20px; color: rgb(124, 137, 131); font-size: 12px;}
.forgot-success{border-top: 1px solid var(--line); margin-top: 25px; padding-top: 24px; text-align: center;}
.forgot-success[hidden]{display: none;}
.mail-circle{width: 58px; height: 58px; border-radius: 50%; background: rgb(232, 248, 238); color: rgb(37, 169, 89); display: grid; place-items: center; font-size: 25px; margin: 0px auto 15px;}
.back-link{border: 0px; background: none; padding: 0px; color: rgb(38, 124, 103); font-weight: 700; margin-bottom: 14px;}
@media (max-width: 680px) {.auth-card{padding: 26px 20px;}}
.forgot-success:not([hidden]){position: fixed; inset: 0px; background: rgba(5, 31, 43, 0.5); z-index: 90; display: grid; place-items: center; padding: 22px;}
.forgot-success-card{width: min(620px, 100%); background: rgb(255, 255, 255); padding: 48px 36px; text-align: center; box-shadow: var(--shadow);}
.forgot-success-card h2{color: var(--navy); font-size: 28px; margin: 18px 0px 6px;}
.forgot-success-card .btn{min-width: 180px; margin-top: 18px;}
.btn-primary{background: rgb(23, 143, 80);}
.btn-primary:hover{background: rgb(17, 121, 67);}
[hidden]{display: none !important;}
:root{--green: #00D16A; --green-dark: #00B85D;}
.btn-primary{background: rgb(0, 209, 106); border-color: rgb(0, 209, 106); color: rgb(255, 255, 255);}
.btn-primary:hover{background: rgb(0, 184, 93); border-color: rgb(0, 184, 93); color: rgb(255, 255, 255);}
.field input:focus{border-color: rgb(0, 209, 106); box-shadow: rgba(0, 209, 106, 0.18) 0px 0px 0px 3px;}
input[type="checkbox"]{accent-color: rgb(0, 209, 106);}
.back-link{color: rgb(0, 143, 73);}
.mail-circle{background: rgb(232, 255, 243); color: rgb(0, 143, 73);}
:root{--brand: #00D16A; --brand-hover: #00BF61; --brand-press: #00A855; --brand-ink: #04321C; --brand-text: #007A3E; --brand-soft: #E6FBF0; --brand-soft-2: #CCF6E1; --ink: #0F1F19; --muted-ink: #5B6B64; --line-soft: #E4EAE7;}
.btn-primary, .btn.btn-primary{box-shadow: rgba(0, 209, 106, 0.22) 0px 6px 16px; background: var(--brand) !important; border-color: var(--brand) !important; color: var(--brand-ink) !important;}
.btn-primary:hover, .btn.btn-primary:hover{background: var(--brand-hover) !important; border-color: var(--brand-hover) !important;}
.btn-primary:active{background: var(--brand-press) !important;}
.btn-primary:disabled{box-shadow: none; background: rgb(184, 239, 211) !important; border-color: rgb(184, 239, 211) !important; color: rgb(61, 107, 85) !important;}
.back-link{color: var(--brand-text);}
.mail-circle{display: grid; place-items: center; color: var(--brand-text);}
html body .auth-card, html body .forgot-success-card{border-radius: 18px;}
html body .btn, html body button.btn{border-radius: 12px;}
html body .field input{border-radius: 12px;}
html body .captcha-demo{margin-bottom: 6px; border-radius: 12px; overflow: hidden;}
.auth-feedback{margin-top: 16px; padding: 12px; border-radius: 12px; background: rgb(230, 251, 240); color: rgb(4, 50, 28); font-size: 13px;}
.auth-feedback:empty{display: none;}