:root { color-scheme: light; font-family: Nunito, ui-rounded, "Avenir Next", system-ui, sans-serif; color: #29485d; background: #dff8f3; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; }
button, input { font: inherit; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 15%, #fffceb 0 9%, transparent 28%), linear-gradient(180deg, #b8eeeb 0%, #e8fbf1 64%, #a8dd8a 64% 100%); }
.auth-page::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -13vw; height: 31vw; border-radius: 50% 50% 0 0; background: #70c87a; opacity: .75; }
.cloud { position: absolute; width: 140px; height: 42px; border-radius: 40px; background: rgba(255,255,255,.82); filter: drop-shadow(0 8px 10px rgba(40,90,100,.07)); }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 58px; height: 58px; left: 22px; bottom: 2px; }.cloud::after { width: 76px; height: 76px; right: 18px; bottom: 0; }
.cloud-one { top: 13%; left: 7%; }.cloud-two { top: 24%; right: 7%; transform: scale(.75); }
.auth-card { position: relative; z-index: 2; width: min(480px, 100%); padding: 30px 38px 34px; border-radius: 32px; background: rgba(255,255,255,.96); box-shadow: 0 24px 70px rgba(34,77,91,.2), inset 0 0 0 3px rgba(255,255,255,.75); text-align: center; }
.brand-icon { width: 76px; height: 76px; filter: drop-shadow(0 7px 8px rgba(41,72,93,.15)); }
.eyebrow { margin: 8px 0 2px; color: #178c7c; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; }
h1 { margin: 0; font-size: clamp(30px, 5vw, 40px); line-height: 1.1; }.intro { margin: 10px 0 22px; font-size: 17px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px; margin-bottom: 20px; border-radius: 18px; background: #eaf5f4; }
.tab { min-height: 46px; border: 0; border-radius: 13px; background: transparent; color: #52707f; font-weight: 900; cursor: pointer; }.tab.active { color: #174d55; background: #fff; box-shadow: 0 5px 12px rgba(41,72,93,.12); }
form { text-align: left; } label { display: block; margin: 14px 3px 7px; font-size: 16px; font-weight: 900; }
input { width: 100%; min-height: 52px; border: 2px solid #c5ddd9; border-radius: 15px; padding: 0 15px; color: #29485d; background: #fbfffe; font-size: 18px; outline: none; }
input:focus { border-color: #34ab9b; box-shadow: 0 0 0 4px rgba(52,171,155,.15); }
.password-row { display: flex; gap: 8px; }.show-password { flex: 0 0 72px; border: 0; border-radius: 15px; color: #20786e; background: #dff5f1; font-weight: 900; cursor: pointer; }
.password-help { margin: 8px 3px 14px; color: #65808d; font-size: 14px; line-height: 1.35; }
#turnstile-slot { display: flex; justify-content: center; margin: 8px 0; }.error { min-height: 22px; margin: 8px 3px; color: #b94253; font-weight: 800; }
.submit-button { width: 100%; min-height: 56px; border: 0; border-radius: 18px; color: #173f43; background: linear-gradient(180deg, #ffdd73, #ffc84d); box-shadow: 0 7px 0 #e2a92b; font-size: 18px; font-weight: 1000; cursor: pointer; }.submit-button:active { transform: translateY(4px); box-shadow: 0 3px 0 #e2a92b; }.submit-button:disabled { opacity: .65; cursor: wait; }
@media (max-height: 700px) and (orientation: landscape) { .auth-page { padding: 18px; }.auth-card { width: min(720px, 94vw); padding: 20px 32px; }.brand-icon { width: 58px; height: 58px; } h1 { font-size: 30px; }.intro { margin: 6px 0 12px; }.tabs { margin-bottom: 10px; } form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }.tabs, #turnstile-slot, .error, .submit-button, .password-help { grid-column: 1 / -1; } }