: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;}
.form-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 0px 18px;}
.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;}}
@media (max-width: 560px) {.form-grid{grid-template-columns: 1fr;}}
.auth-center{display: grid; place-items: center; padding: 44px 20px; flex: 1 0 auto;}
#screen-signup.active{display: flex; flex-direction: column; min-height: 100vh;}
.auth-center-wide{padding-block: 28px;}
.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-divider{display: flex; align-items: center; gap: 12px; color: rgb(139, 151, 146); font-size: 12px; margin: 22px 0px;}
.auth-divider::before, .auth-divider::after{content: ""; height: 1px; background: rgb(223, 229, 226); flex: 1 1 0%;}
.auth-footer{text-align: center; padding: 20px; color: rgb(124, 137, 131); font-size: 12px;}
.agreement-check{margin-top: 7px;}
.password-rules{list-style: none; padding: 0px; margin: -5px 0px 22px; color: rgb(113, 128, 121); font-size: 13px;}
.password-rules li{padding: 3px 0px;}
.password-rules li::before{content: "○"; margin-right: 8px;}
.password-rules li.done::before{content: "✓"; color: rgb(42, 174, 97);}
@media (max-width: 680px) {.auth-card{padding: 26px 20px;}}
.btn-primary{background: rgb(23, 143, 80);}
.btn-primary:hover{background: rgb(17, 121, 67);}
: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);}
.password-rules li.done::before{color: rgb(0, 184, 93);}
: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;}
html body .auth-card{border-radius: 18px;}
html body .btn, html body button.btn, html body a.btn{border-radius: 12px;}
html body .field input{border-radius: 12px;}
html body .agreement-check{margin: 14px 0px 18px;}
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;}
.password-rules li:not(.done){color: rgb(180, 56, 43);}