/* PMII Rayon Perjuangan Ibnu Aqil · Unified mobile-first authentication v4.0
   Scope: unauthenticated sign-in, sign-up, OTP, recovery, details, invitation.
   No changes to authorization, registration validation, or submission endpoints. */
.raMobileHeroContent{display:none}
.raMobileFieldLabel{display:none!important}
.raAuthScreen .raAuthPane{isolation:isolate}
.raAuthPane .raAuthSubmit,.raAuthPane .raAuthSecondary{transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
.raAuthPane .raAuthSubmit:active,.raAuthPane .raAuthSecondary:active{transform:scale(.99)}
.raAuthPane :is(a,button,input,select,textarea):focus-visible,
.raInviteStandalone :is(a,button):focus-visible{outline:3px solid #f3c316!important;outline-offset:3px!important}

/* Invitation view, desktop and tablets in landscape. */
html:has(.raInviteStandalone){scroll-behavior:smooth}
body.raInviteStandalone{min-height:100dvh;margin:0;background:radial-gradient(circle at 14% 12%,#e5f1ff 0,transparent 30%),radial-gradient(circle at 86% 84%,#fff1ba 0,transparent 33%),#eff5fa;color:#14253b;font:400 15px/1.6 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.raInviteStandalone *{box-sizing:border-box}
.raInviteShell{width:min(100% - 48px,940px);min-height:min(640px,calc(100dvh - 60px));margin:30px auto;display:grid;grid-template-columns:47% 53%;border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 28px 80px rgba(11,42,79,.13)}
.raInviteVisual{position:relative;overflow:hidden;background:radial-gradient(circle at 75% 15%,#267ed3 0,transparent 45%),linear-gradient(150deg,#0871c3 0%,#06498e 65%,#0a3568 100%)}
.raInviteVisual:before{content:"";position:absolute;width:300px;height:300px;border:1px solid rgba(255,255,255,.13);border-radius:50%;left:-120px;bottom:-180px}
.raInviteVisual .raMobileHeroContent{display:block;position:absolute;inset:0}
.raMobileHeroBrand{position:absolute;top:30px;left:28px;right:26px;z-index:2;display:flex;align-items:center;gap:12px;color:white;text-decoration:none;line-height:1.25}
.raMobileHeroBrand img{width:43px;height:43px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 10px rgba(0,0,0,.12))}
.raMobileHeroBrand b{display:block;font-weight:850;max-width:250px;font-size:13px;letter-spacing:-.01em}
.raMobileHeroBrand small{display:block;margin-top:4px;color:#d9eeff;letter-spacing:.16em;font-size:9px;font-weight:800}
.raMobileHeroArt{position:absolute;z-index:1;left:50%;top:55%;width:min(112%,530px);height:auto;max-height:80%;object-fit:contain;transform:translate(-50%,-44%);filter:drop-shadow(0 14px 17px rgba(2,29,62,.10))}
.raInvitePane{min-width:0;padding:clamp(30px,5vw,64px);display:flex;flex-direction:column;justify-content:center;background:#fff}
.raInviteEyebrow{font-size:10px;line-height:1.5;color:#0759a5;font-weight:900;letter-spacing:.14em}
.raInvitePane h1{margin:11px 0 9px;line-height:1.08;letter-spacing:-.045em;font-size:clamp(31px,3.5vw,43px);font-weight:900}
.raInviteLead{color:#63768c;margin:0 0 24px;line-height:1.65;font-size:13px}
.raInviteIdentity{display:flex;gap:13px;align-items:center;min-width:0;padding:17px;border-radius:17px;background:#f0f7fd;border:1px solid #d9e9f5}
.raInviteAvatar{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:16px;background:#dceeff;color:#06589e;font-size:20px;font-weight:900}
.raInviteIdentity b{font-size:16px;line-height:1.35;display:block;overflow-wrap:anywhere}
.raInviteIdentity small{display:block;margin-top:5px;color:#677c90;font-size:12px;line-height:1.45}
.raInviteActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.raInviteActions form{margin:0}
.raInviteActions button{width:100%;min-height:51px;border-radius:13px;border:1px solid transparent;font-family:inherit;font-size:13px;font-weight:800;line-height:1.2;cursor:pointer;transition:filter .18s,transform .18s}
.raInviteActions button:active{transform:scale(.99)}
.raInviteYes{background:#f3c928;color:#142844;box-shadow:0 7px 17px rgba(225,171,0,.20)}
.raInviteNo{background:#f7f9fc;border-color:#d6e2ed!important;color:#2c4963}
.raInviteNote{margin:17px 0 0;font-size:11px;line-height:1.65;color:#718296}
.raInviteActions button:disabled{cursor:not-allowed;opacity:.66}
html[data-theme="dark"] body.raInviteStandalone{background:#0f1c2c;color:#eaf3fd}
html[data-theme="dark"] .raInviteShell,html[data-theme="dark"] .raInvitePane{background:#162738}
html[data-theme="dark"] .raInvitePane h1{color:#f2f7fd}
html[data-theme="dark"] .raInviteEyebrow{color:#9ad2ff}
html[data-theme="dark"] .raInviteLead,html[data-theme="dark"] .raInviteNote{color:#b2c5d6}
html[data-theme="dark"] .raInviteIdentity{background:#20374c;border-color:#36546c}
html[data-theme="dark"] .raInviteIdentity b{color:#f1f7fd}
html[data-theme="dark"] .raInviteIdentity small{color:#b6c8d6}
html[data-theme="dark"] .raInviteAvatar{background:#335675;color:#e8f3ff}
html[data-theme="dark"] .raInviteNo{background:#243c51;border-color:#41617a!important;color:#e8f2fa}

/* Portrait phone and tablet: a single visual header with a connected bottom sheet. */
@media (max-width:620px), (max-width:1024px) and (orientation:portrait){
  html{overflow-x:hidden}
  body.raAuthMode,body.raAuthMode:has(.raAuthScreen--register),body.raAuthMode:has(.raAuthScreen--login){
    min-height:100dvh!important;height:auto!important;
    overflow-x:hidden!important;overflow-y:auto!important;
    background:#0757a6!important;
  }
  body.raAuthMode:before,body.raAuthMode:after{display:none!important}
  body.raAuthMode .raAuthMain,body.raAuthMode:has(.raAuthScreen--register) .raAuthMain,body.raAuthMode:has(.raAuthScreen--login) .raAuthMain{
    position:relative!important;width:100%!important;min-height:100dvh!important;height:auto!important;
    display:block!important;overflow:visible!important;max-width:none!important;
    margin:0!important;padding:0!important;
  }
  body.raAuthMode .raAuthScreen,body.raAuthMode .raAuthScreen--login,body.raAuthMode .raAuthScreen--register{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    width:min(100%,720px)!important;max-width:720px!important;
    min-height:100dvh!important;height:auto!important;
    margin:0 auto!important;padding:0!important;gap:0!important;
    border:0!important;border-radius:0!important;overflow:visible!important;
    background:transparent!important;box-shadow:none!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  body.raAuthMode .raAuthScreen .raAuthVisual,
  body.raAuthMode .raAuthScreen--login .raAuthVisual,
  body.raAuthMode .raAuthScreen--register .raAuthVisual{
    display:block!important;position:relative!important;order:0!important;
    flex:0 0 auto!important;align-self:stretch!important;
    width:100%!important;height:clamp(220px,31dvh,350px)!important;
    min-height:220px!important;max-height:none!important;
    margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
    overflow:hidden!important;box-shadow:none!important;
    background:radial-gradient(circle at 85% 16%,rgba(118,189,248,.35),transparent 43%),linear-gradient(151deg,#1777c9 0%,#0757a6 49%,#073f7d 100%)!important;
    transform:none!important;
  }
  body.raAuthMode .raAuthScreen .raAuthVisual:before,
  body.raAuthMode .raAuthScreen .raAuthVisual:after{display:none!important}
  body.raAuthMode .raAuthScreen .raMobileHeroContent{display:block!important;position:absolute;inset:0}
  body.raAuthMode .raAuthScreen .raMobileHeroBrand{top:calc(18px + env(safe-area-inset-top,0px));left:clamp(18px,4.5vw,32px)}
  body.raAuthMode .raAuthScreen .raMobileHeroBrand b{font-size:clamp(11px,2.1vw,14px)}
  body.raAuthMode .raAuthScreen .raMobileHeroArt{top:60%;height:auto;width:min(85%,410px);max-height:76%;transform:translate(-50%,-44%)}
  body.raAuthMode .raAuthScreen .raAuthPane,
  body.raAuthMode .raAuthScreen--login .raAuthPane,
  body.raAuthMode .raAuthScreen--register .raAuthPane{
    position:relative!important;z-index:2!important;order:1!important;
    display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:stretch!important;
    flex:1 0 auto!important;width:100%!important;max-width:none!important;
    min-height:calc(69dvh + 26px)!important;height:auto!important;
    margin:-27px 0 0!important;padding:clamp(26px,5vw,40px) clamp(22px,6vw,46px) calc(38px + env(safe-area-inset-bottom,0px))!important;
    border:0!important;border-radius:30px 30px 0 0!important;overflow:visible!important;
    background:#fff!important;box-shadow:0 -16px 38px rgba(4,25,55,.12)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  }
  body.raAuthMode .raAuthScreen .raAuthPane>.raPmiiBrand{display:none!important}
  body.raAuthMode .raAuthScreen .raAuthPane h1,
  body.raAuthMode .raAuthScreen--register .raRegisterTitle,
  body.raAuthMode .raAuthScreen--login .raSharedAuthTitle{
    display:block!important;width:100%!important;max-width:none!important;
    margin:0 0 19px!important;padding:0!important;text-align:left!important;
    color:#132e4a!important;font-size:clamp(27px,5.2vw,36px)!important;line-height:1.16!important;
    letter-spacing:-.04em!important;font-weight:900!important;
  }
  body.raAuthMode .raAuthScreen .raAuthForm,
  body.raAuthMode .raAuthScreen--register .raRegisterForm{
    display:block!important;width:100%!important;max-width:none!important;
    margin:0!important;padding:0!important;
  }
  body.raAuthMode .raAuthScreen .raMobileFieldLabel{
    display:block!important;margin:15px 0 6px!important;
    font-size:12px!important;line-height:1.4!important;font-weight:800!important;color:#395068!important;
  }
  body.raAuthMode .raAuthScreen .raAuthForm :is(.raSharedAuthField,.raRegisterField){
    display:block!important;width:100%!important;min-width:0!important;max-width:none!important;
    margin:0!important;
  }
  body.raAuthMode .raAuthScreen .raAuthForm .raPasswordWrap{width:100%!important;min-width:0!important;max-width:none!important;margin:0 0 5px!important}
  body.raAuthMode .raAuthScreen .raAuthForm input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
  body.raAuthMode .raAuthScreen--register .raAuthForm .raRegisterField input:not([type=checkbox]):not([type=radio]):not([type=range]),
  body.raAuthMode .raAuthScreen--login .raAuthForm .raSharedAuthField input:not([type=checkbox]):not([type=radio]):not([type=range]){
    display:block!important;width:100%!important;height:52px!important;min-height:52px!important;
    max-width:none!important;margin:0!important;padding:0 16px!important;
    border:1px solid #dce5ee!important;border-radius:13px!important;
    background:#f5f7fa!important;color:#1a2a41!important;
    font-size:16px!important;font-weight:600!important;line-height:1.35!important;
    box-shadow:none!important;outline:none!important;letter-spacing:0!important;
  }
  body.raAuthMode .raAuthScreen :is(.raRegisterField input,.raSharedAuthField input)::placeholder{
    color:#8d9bac!important;font-size:14px!important;font-weight:500!important;opacity:1!important;
  }
  body.raAuthMode .raAuthScreen .raAuthForm input:focus,
  body.raAuthMode .raAuthScreen .raAuthForm input:focus-visible{
    border-color:#2b82c7!important;background:white!important;
    box-shadow:0 0 0 3px rgba(43,130,199,.12)!important;
  }
  body.raAuthMode .raAuthScreen .raPasswordField input[type=password],
  body.raAuthMode .raAuthScreen .raPasswordField input[type=text]{padding-right:48px!important}
  body.raAuthMode .raAuthScreen .raPasswordField .raPasswordEye,
  body.raAuthMode .raAuthScreen .raPasswordField .globalPasswordEyeToggle{
    display:block!important;position:absolute!important;right:13px!important;top:50%!important;bottom:auto!important;
    transform:translateY(-50%)!important;width:30px!important;height:30px!important;
    min-width:30px!important;min-height:30px!important;z-index:2!important;
  }
  body.raAuthMode .raAuthScreen .raAuthOptions{
    width:100%!important;display:flex!important;align-items:center!important;
    justify-content:space-between!important;margin:16px 0!important;gap:10px!important;font-size:12px!important;
  }
  body.raAuthMode .raAuthScreen .raAuthOptions :is(a,label){font-size:12px!important}
  body.raAuthMode .raAuthScreen .raAuthSubmit,
  body.raAuthMode .raAuthScreen .raAuthSecondary{
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:100%!important;height:auto!important;min-height:52px!important;max-height:none!important;
    padding:12px 16px!important;margin:18px 0 0!important;border-radius:13px!important;
    font-size:14px!important;font-weight:850!important;line-height:1.4!important;
  }
  body.raAuthMode .raAuthScreen .raAuthSubmit{background:#f3c928!important;color:#1a2b41!important;border:1px solid #efc118!important;box-shadow:0 6px 14px rgba(239,179,25,.19)!important}
  body.raAuthMode .raAuthScreen .raAuthSubmit:hover{background:#ffdc59!important;box-shadow:0 6px 14px rgba(239,179,25,.26)!important}
  body.raAuthMode .raAuthScreen .raAuthSecondary{margin-top:9px!important;background:#f6f9fc!important;color:#264963!important;border:1px solid #d8e3ef!important}
  body.raAuthMode .raAuthScreen .raAuthFoot{
    width:100%!important;margin:18px 0 0!important;padding:0!important;font-size:12px!important;
    text-align:center!important;line-height:1.6!important;color:#61778e!important;
  }
  body.raAuthMode .raAuthScreen .raAuthFoot a{color:#0758a6!important;font-size:inherit!important}
  body.raAuthMode .raAuthScreen .raOtpEmail{margin:0 0 17px!important;color:#728499!important;font-size:13px!important;overflow-wrap:anywhere}
  body.raAuthMode .raAuthScreen .raOtpGrid{gap:clamp(4px,1.8vw,11px)!important;margin:8px 0 18px!important}
  body.raAuthMode .raAuthScreen .raOtpGrid input{width:100%!important;min-width:0!important;height:clamp(45px,10vw,59px)!important;min-height:45px!important;border-radius:12px!important;padding:0!important;font-size:clamp(19px,5vw,25px)!important;text-align:center!important}
  body.raAuthMode .raAuthScreen .raOtpMiniLinks{margin-top:15px!important;gap:10px!important;font-size:12px!important}
  body.raAuthMode .raAuthScreen .raOtpMiniLinks a{font-size:12px!important}
  body.raAuthMode .raAuthScreen .raPasswordStrength{width:100%!important;max-width:none!important;margin:10px 0 6px!important;padding:10px 12px!important}
  body.raAuthMode .raAuthScreen .raPasswordRules{font-size:11px!important}
  body.raAuthMode .raAuthScreen .raRegisterConsent{max-width:none!important;margin:15px 0 0!important;font-size:11px!important;line-height:1.6!important;text-align:center!important}
  body.raAuthMode .raAuthScreen .raRegisterConsent a{color:#0758a6!important}
  body.raAuthMode .raAuthScreen .raRobotCheck{width:100%!important;min-height:48px!important;margin:14px 0 0!important}
  body.raAuthMode .raAuthScreen .raVisualCaptcha{width:100%!important;max-width:none!important;margin:14px 0 0!important}
  body.raAuthMode .raAuthScreen .raVisualCaptcha .raRobotCheck{margin:0!important}
  body.raAuthMode .raAuthScreen .raPengurusInviteNotice{margin:0 0 14px!important;padding:14px 15px!important;border-radius:14px!important;background:#eff7fe!important}
  body.raAuthMode .raAuthScreen .raPengurusInviteNotice b{font-size:15px!important}
  body.raAuthMode .raAuthScreen .raInviteDecision{grid-template-columns:1fr!important;gap:10px!important}
  body.raAuthMode .raAuthScreen .raInviteLead{font-size:13px!important;line-height:1.65!important;margin:0 0 16px!important}
  body.raAuthMode .raAuthScreen .raInviteWarning{font-size:12px!important}
  body.raAuthMode .raAuthScreen .raAuthForm label:not(.raMobileFieldLabel){font-size:13px!important;line-height:1.5!important}
  body.raAuthMode .raAuthScreen .raAuthForm label:not(.raMobileFieldLabel)>input{margin-top:7px!important}
  body.raAuthMode .raAlert,body.raAuthMode .raError{top:calc(env(safe-area-inset-top,0px) + 8px)!important;z-index:999!important;max-height:50dvh;overflow:auto}
  body.raAuthMode .raAuthDetails--refined{width:100%!important;max-width:820px!important;margin:0 auto!important;background:transparent!important}
  body.raAuthMode .raAuthDetails--refined .raAuthDetailsHead{
    width:100%!important;display:flex!important;flex-direction:column!important;justify-content:center!important;
    align-items:center!important;margin:0!important;padding:29px 20px 57px!important;
    border:0!important;border-radius:0!important;min-height:176px!important;
    background:radial-gradient(circle at 90% 15%,rgba(142,212,250,.3),transparent 35%),linear-gradient(145deg,#1a78c8,#0756a5 64%,#063b76)!important;
    color:#fff!important;
  }
  body.raAuthMode .raAuthDetails--refined .raAuthDetailsHead span{color:#f4d053!important;letter-spacing:.16em!important;font-size:10px!important}
  body.raAuthMode .raAuthDetails--refined .raAuthDetailsHead h1{
    margin:7px 0!important;color:#fff!important;font-size:clamp(26px,5vw,34px)!important;line-height:1.2!important;
  }
  body.raAuthMode .raAuthDetails--refined .raAuthDetailsHead p{margin:2px 0!important;font-size:12px!important;color:#dceeff!important;overflow-wrap:anywhere}
  body.raAuthMode .raAuthDetails--refined .raDetailsPanel{
    position:relative!important;z-index:2!important;margin:-24px 0 0!important;padding:clamp(21px,4vw,40px)!important;
    width:100%!important;max-width:none!important;border:0!important;border-radius:28px 28px 0 0!important;
    box-shadow:none!important;background:#fff!important;
  }
  body.raAuthMode .raAuthDetails--refined :is(.raDetailsGrid,.raGrid.raTwo){grid-template-columns:minmax(0,1fr)!important;gap:13px!important}
  body.raAuthMode .raAuthDetails--refined :is(input,select,textarea){max-width:100%;font-size:16px!important}
  body.raAuthMode .raAuthDetails--refined .raDetailsPanel :is(button,input,select,textarea){touch-action:manipulation}
  body.raAuthMode .raAuthDetails--refined .raDetailsSection{min-width:0!important}
  body.raAuthMode .raAuthDetails--refined .raDetailsField{min-width:0!important}
  body.raAuthMode .raAuthDetails--refined .raDetailsSectionHead h2{font-size:18px!important;line-height:1.3!important}
  body.raAuthMode .raAuthDetails--refined .raProfilePhotoEditor{min-width:0!important;max-width:100%!important}
  body.raAuthMode .raAuthDetails--refined .raDetailsForm{min-width:0!important;width:100%!important}
  .raInviteShell{display:flex;flex-direction:column;width:min(100%,720px);margin:0 auto;min-height:100dvh;border-radius:0;box-shadow:none;background:transparent}
  body.raInviteStandalone{background:#0757a6}
  .raInviteVisual{height:clamp(220px,31dvh,350px);min-height:220px;flex:none}
  .raInviteVisual .raMobileHeroBrand{top:calc(18px + env(safe-area-inset-top,0px));left:clamp(18px,4.5vw,32px)}
  .raInviteVisual .raMobileHeroArt{top:60%;width:min(85%,410px);max-height:76%;transform:translate(-50%,-44%)}
  .raInvitePane{position:relative;flex:1;margin:-27px 0 0;padding:clamp(28px,5.4vw,42px) clamp(22px,6vw,46px) calc(36px + env(safe-area-inset-bottom,0px));border-radius:30px 30px 0 0;background:#fff;justify-content:flex-start}
  .raInvitePane h1{margin:12px 0 8px;font-size:clamp(29px,5.2vw,38px)}
  .raInviteLead{font-size:13px;margin-bottom:18px}
  .raInviteActions{grid-template-columns:1fr;gap:9px}
  .raInviteActions button{min-height:52px;font-size:14px}
  .raInviteNote{font-size:11px}
  html[data-theme="dark"] body.raAuthMode,html[data-theme="dark"] body.raAuthMode:has(.raAuthScreen--login),html[data-theme="dark"] body.raAuthMode:has(.raAuthScreen--register),html[data-theme="dark"] body.raInviteStandalone{background:#082947!important}
  html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthPane,
  html[data-theme="dark"] body.raAuthMode .raAuthScreen--login .raAuthPane,
  html[data-theme="dark"] body.raAuthMode .raAuthScreen--register .raAuthPane,
  html[data-theme="dark"] body.raAuthMode .raAuthDetails--refined .raDetailsPanel{background:#152a3d!important;color:#eaf4fc!important}
  html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthPane h1{color:#edf6ff!important}
  html[data-theme="dark"] body.raAuthMode .raAuthScreen .raMobileFieldLabel{color:#d1e0ef!important}
  html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthForm input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]){background:#20384e!important;border-color:#3c5870!important;color:#f3f8fd!important}
  html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthForm input:focus{background:#274863!important}
  html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthForm label{color:#d1e0ef!important}
  html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthFoot,
  html[data-theme="dark"] body.raAuthMode .raAuthScreen .raOtpEmail{color:#b4c4d1!important}
  html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthFoot a{color:#a8d7fb!important}
  html[data-theme="dark"] body.raAuthMode .raAuthScreen .raAuthSecondary{background:#29445c!important;color:#ebf4ff!important;border-color:#45647d!important}
  html[data-theme="dark"] body.raAuthMode .raAuthScreen .raPengurusInviteNotice{background:#20394c!important;color:#edf8ff!important;border-color:#46637b!important}
  html[data-theme="dark"] body.raAuthMode .raAuthScreen .raRegisterConsent{color:#bbcbd9!important}
  html[data-theme="dark"] body.raAuthMode .raAuthDetails--refined .raDetailsPanel h2{color:#ecf5ff!important}
}
/* Narrow landscape: no squeezed desktop columns and full-page scrolling. */
@media (orientation:landscape) and (max-height:580px) and (max-width:950px){
  body.raAuthMode{overflow-x:hidden!important;overflow-y:auto!important}
  body.raAuthMode:has(.raAuthScreen--login),body.raAuthMode:has(.raAuthScreen--register){overflow-y:auto!important}
  body.raAuthMode .raAuthMain,body.raAuthMode:has(.raAuthScreen--login) .raAuthMain,body.raAuthMode:has(.raAuthScreen--register) .raAuthMain{display:block!important;height:auto!important;min-height:100dvh!important;overflow:visible!important;padding:16px!important}
  body.raAuthMode .raAuthScreen{display:block!important;width:min(520px,100%)!important;height:auto!important;min-height:0!important;overflow:visible!important;margin:0 auto!important;grid-template-columns:1fr!important}
  body.raAuthMode .raAuthScreen .raAuthVisual{display:none!important}
  body.raAuthMode .raAuthScreen .raAuthPane{display:block!important;width:100%!important;height:auto!important;min-height:0!important;overflow:visible!important;margin:0!important;padding:28px!important;border-radius:21px!important}
  body.raAuthMode .raAuthScreen .raAuthPane :is(input,button){font-size:max(14px,1rem)!important}
}
@media(max-width:390px) and (orientation:portrait){
  body.raAuthMode .raAuthScreen .raAuthVisual,.raInviteVisual{height:210px!important;min-height:210px!important}
  body.raAuthMode .raAuthScreen .raAuthPane,.raInvitePane{padding-left:18px!important;padding-right:18px!important}
  body.raAuthMode .raAuthScreen .raMobileHeroArt,.raInviteVisual .raMobileHeroArt{width:84%!important;max-height:73%!important}
  body.raAuthMode .raAuthScreen .raMobileHeroBrand b,.raInviteVisual .raMobileHeroBrand b{font-size:10.5px!important}
}
@media(prefers-reduced-motion:reduce){
  .raMobileHeroArt,.raAuthPane .raAuthSubmit,.raAuthPane .raAuthSecondary,.raInviteActions button{transition:none!important;animation:none!important}
}

/* Long-form registration must also break out of the desktop viewport/card rules. */
@media (max-width:620px), (max-width:1024px) and (orientation:portrait){
  body.raAuthMode:has(.raAuthDetails--refined){
    min-height:100dvh!important;height:auto!important;overflow-x:hidden!important;overflow-y:auto!important;
    background:#0757a6!important;
  }
  body.raAuthMode:has(.raAuthDetails--refined) .raAuthMain{
    display:block!important;width:100%!important;max-width:none!important;
    height:auto!important;min-height:100dvh!important;
    margin:0!important;padding:0!important;overflow:visible!important;
  }
  body.raAuthMode .raAuthDetails--refined .raDetailsPanel{
    min-height:74dvh!important;padding-bottom:calc(42px + env(safe-area-inset-bottom,0px))!important;
  }
  body.raAuthMode .raAuthDetails--refined .raDetailsPanel :is(input,select,textarea){
    min-height:44px;
  }
  body.raAuthMode .raAuthDetails--refined .raDetailsPanel textarea{
    height:auto!important;min-height:88px;
  }
  body.raAuthMode .raAuthDetails--refined .raDetailsPanel :is(input,select,textarea):focus-visible{
    outline:2px solid #1b70bc!important;outline-offset:2px!important;
  }
  html[data-theme="dark"] body.raAuthMode:has(.raAuthDetails--refined){background:#082947!important}
}

/* Accessible focus, legible captcha, and OTP dimensions must outrank legacy compact-input rules. */
@media (max-width:620px), (max-width:1024px) and (orientation:portrait){
  body.raAuthMode .raAuthScreen .raVisualCaptcha .raRobotLabel{
    font-size:13px!important;font-weight:750!important;line-height:1.4!important;letter-spacing:0!important;
  }
  body.raAuthMode .raAuthScreen .raVisualCaptcha .raRobotCheck{
    display:grid!important;align-items:center!important;
    width:100%!important;min-height:50px!important;
    border:1px solid #dce5ee!important;border-radius:13px!important;
    background:#f6f8fb!important;box-shadow:none!important;
  }
  body.raAuthMode .raAuthScreen .raAuthForm .raPasswordField input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]){
    padding-right:52px!important;
  }
  body.raAuthMode .raAuthScreen .raAuthForm .raOtpGrid input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]){
    width:100%!important;min-width:0!important;
    height:clamp(46px,10vw,58px)!important;min-height:46px!important;
    padding:0!important;text-align:center!important;
    font-size:clamp(19px,4.8vw,25px)!important;font-weight:850!important;
    border-radius:12px!important;
  }
  body.raAuthMode .raAuthScreen .raAuthForm input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):focus-visible{
    outline:2px solid #2784c8!important;outline-offset:1px!important;
    border-color:#2784c8!important;
    box-shadow:0 0 0 4px rgba(39,132,200,.12)!important;
  }
  html[data-theme="dark"] body.raAuthMode .raAuthScreen .raVisualCaptcha .raRobotCheck{
    background:#20384e!important;border-color:#446179!important;color:#f3f8ff!important;
  }
  html[data-theme="dark"] body.raAuthMode .raAuthScreen .raVisualCaptcha .raRobotLabel{color:#e7f3ff!important}
}