.reg-error{display:block;min-height:16px;color:#b42318;font-size:12px;font-weight:800;margin-top:4px}.field.invalid input,.field.invalid select{border-color:#d92d20!important;background:#fff8f7}.reg-required-note{grid-column:1/-1;padding:10px 12px;border-radius:10px;background:#eef8f1;color:#176b4d;font-size:13px;font-weight:700}.profile-completion-warning{display:flex;gap:8px;flex-direction:column;padding:12px 14px;margin-bottom:14px;border:1px solid #f2c46d;border-radius:12px;background:#fff8e7;color:#7a4d00}.profile-completion-warning b{color:#9a5b00}

#regBirthday{font-variant-numeric:tabular-nums;letter-spacing:.02em}
#regBirthday::placeholder{letter-spacing:0;color:#87958d}

/* A registration form is deliberately longer than the login card.  The page,
   not an inaccessible centered card, owns the vertical scroll in this mode. */
.auth{min-height:100dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;touch-action:pan-y}
.auth.auth-mode-register{display:block;padding:24px 16px 44px;-webkit-overflow-scrolling:touch}
.auth.auth-mode-register .auth-card{width:min(560px,calc(100vw - 32px));margin:0 auto;text-align:left}
.auth.auth-mode-register .formgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.auth.auth-mode-register .formgrid>.full{grid-column:1/-1}
.auth.auth-mode-register #regBtn{position:relative;z-index:1;width:100%;min-height:46px;margin-top:4px}
#ecoapp.auth-register-active{height:100dvh!important;overflow:hidden!important}
/* The app shell intentionally locks its own viewport.  Make the registration
   view the one and only scroll container so mouse-wheel, trackpad and touch
   scrolling can always reach the remaining required fields and submit button. */
#ecoapp.auth-register-active .auth.auth-mode-register{display:block!important;height:100dvh!important;min-height:100dvh!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
@media(max-width:760px){.auth.auth-mode-register{padding:0 0 32px}.auth.auth-mode-register .auth-card{width:100%;min-height:100dvh;padding:24px 18px;border-radius:0}.auth.auth-mode-register .formgrid{grid-template-columns:1fr}.auth.auth-mode-register .formgrid>.full{grid-column:auto}}
/* Legacy customer rank onboarding: an easy-to-scan choice block that remains
   compact in the desktop form and turns into full-width touch targets on mobile. */
.reg-legacy-rank{display:grid;gap:14px;padding:17px 16px 16px;border:1px solid #d7e8dc;border-radius:14px;background:linear-gradient(135deg,#fbfefc 0%,#f4fbf6 100%);box-shadow:0 1px 2px rgba(20,78,47,.04)}
.reg-rank-heading{display:grid;gap:4px}.reg-rank-heading>span{color:#168b4c;font-size:11px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}.reg-rank-heading>b{color:#173a2a;font-size:14px;line-height:1.35}.reg-rank-heading p{margin:0;color:#65766d;font-size:12px;line-height:1.5}
.reg-rank-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.reg-rank-option{display:flex;align-items:flex-start;gap:10px;min-width:0;min-height:64px;padding:11px 12px;border:1px solid #d8e6dc;border-radius:11px;background:#fff;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.reg-rank-option:hover{border-color:#8dccaa;background:#fcfffd}.reg-rank-option:has(input:checked){border-color:#159553;background:#effaf3;box-shadow:0 0 0 2px rgba(21,149,83,.1)}.reg-rank-option input{flex:0 0 auto;width:16px;height:16px;margin:3px 0 0;accent-color:#159553}.reg-rank-option span{display:grid;gap:2px;min-width:0}.reg-rank-option strong{color:#244335;font-size:13px;line-height:1.3}.reg-rank-option small{color:#738279;font-size:11px;line-height:1.35}
.reg-rank-select{display:grid;gap:8px;padding:13px;border:1px solid #cde4d5;border-radius:11px;background:rgba(255,255,255,.72)}.reg-rank-select>label{color:#244335;font-size:13px;font-weight:800}.reg-rank-select select{width:100%;min-width:0;min-height:46px;padding:0 13px;border-color:#93cdae;background:#fff}.reg-rank-hint{color:#687a70;font-size:12px;line-height:1.5}.reg-rank-retry{justify-self:start;min-height:36px;padding-inline:14px}
@media(max-width:560px){.reg-legacy-rank{gap:12px;padding:14px 13px}.reg-rank-choice{grid-template-columns:1fr;gap:8px}.reg-rank-option{min-height:58px;padding:10px 11px}.reg-rank-select{padding:11px}.reg-rank-select select{min-height:44px}}

/* The global registration input rule styles every input inside .field.  A
   radio is not a text field: explicitly reset it so iOS keeps a compact
   control instead of expanding it to the full option-card width. */
.reg-legacy-rank .reg-rank-option{display:flex!important;text-transform:none!important;letter-spacing:normal!important}
.reg-legacy-rank .reg-rank-option input[type="radio"]{appearance:auto!important;-webkit-appearance:radio!important;box-sizing:border-box!important;display:block!important;flex:0 0 18px!important;width:18px!important;min-width:18px!important;max-width:18px!important;height:18px!important;min-height:18px!important;max-height:18px!important;margin:3px 0 0!important;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;outline:0!important;accent-color:#159553}