: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; }
.verification-feedback { grid-column:1 / -1; text-align:center; font-size:14px; color:#b94253; }
#verification-status { margin:4px 0; }
#verification-status:empty { display:none; }
#verification-retry { border:0; border-radius:12px; padding:10px 16px; background:#dff5f1; color:#20786e; font-weight:900; cursor:pointer; }
@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; } }
@media (orientation:landscape) and (max-height:500px) {
  .auth-page { min-height:100dvh; padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); overflow:visible; }
  .auth-card { width:min(880px,100%); display:grid; grid-template-columns:150px minmax(0,1fr); column-gap:24px; padding:16px 20px; border-radius:24px; text-align:left; }
  .auth-brand { grid-column:1; grid-row:1/3; align-self:center; text-align:center; }
  .brand-icon { width:55px; height:55px; }
  .eyebrow { font-size:12px; }
  h1 { font-size:25px; }
  .intro { font-size:15px; line-height:1.3; }
  .tabs { grid-column:2; grid-row:1; padding:3px; margin-bottom:4px; }
  .tab { min-height:44px; font-size:16px; }
  form { grid-column:2; grid-row:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5px 12px; }
  .email-field { grid-column:1; grid-row:1; }
  .password-field { grid-column:2; grid-row:1; }
  label { margin:4px 0; font-size:15px; }
  input { min-width:0; min-height:44px; padding:0 10px; font-size:16px; border-radius:12px; }
  .password-row { gap:4px; }
  .show-password { flex-basis:48px; font-size:13px; }
  .invite-field { grid-column:1/-1; }
  .password-help { margin:3px 0; font-size:13px; }
  #turnstile-slot { min-width:0; margin:3px 0; }
  .error { min-height:0; margin:0; font-size:14px; }
  .error:empty { display:none; }
  .submit-button { min-height:44px; font-size:17px; }
}