/* RANDE ID - Auth / RDS Vertice 2.2. All workflows and JS hooks preserved. */
:root{
 --bg:#0B0B0C;--surface:#151618;--raised:#1D1F23;--border:#30343A;
 --text:#F5F7FA;--muted:#B8C2CE;--dim:#929CA8;--soft:#DDE8F0;
 --control:#24282E;--control-hover:#2D333A;--focus:#86B8FA;
 --radius-sm:6px;--radius-md:8px;--radius-lg:10px;--radius-xl:10px;
}
html,body{background:#0B0B0C}
body{font-family:var(--v-ui);background:#0B0B0C;letter-spacing:-.015em}
#app{isolation:isolate}
.shell{width:100%;max-width:480px;padding:0 20px max(9px,env(safe-area-inset-bottom))}
.auth-card{background:transparent;padding:calc(22px + env(safe-area-inset-top)) 0 8px}
.brand,.boot-brand{font-family:var(--v-display);font-size:18px;font-weight:650;letter-spacing:-.07em;color:#F5F7FA;line-height:1.2}
.brand-accent{color:#AFCBEE;font:600 12px/1 var(--v-ui);letter-spacing:.01em;margin-left:5px}
.topline .brand{font-size:17px}
.topline{min-height:45px}
.back{width:44px;height:44px;border-radius:6px;color:#B8C2CE;min-width:44px}
.back:hover{background:#1D2126}
.heading h1{font-family:var(--v-display);font-size:clamp(24px,5.6vw,32px);line-height:1.13;letter-spacing:-.058em;font-weight:650;color:#F5F7FA;text-wrap:balance}
.heading p{color:#B8C2CE;font-size:13px;line-height:1.55;margin-top:8px}
.section-label,.field-label{font:650 11px/1.4 var(--v-ui);letter-spacing:.055em;color:#C0C8D2}
.field-inner,.screen-login .field-inner,.screen-register .field-inner,.screen-mfa .field-inner{
 background:#191C21;border:1px solid #373D45;border-radius:8px;height:49px;padding:0 13px;color:#9FAAB7;
}
.field-inner:focus-within,.screen-login .field-inner:focus-within{border-color:#71A6F3;box-shadow:0 0 0 3px rgba(86,153,248,.13);background:#1D2127}
.field-inner input,.field-inner select,.screen-login .field-inner input{font-family:var(--v-ui);font-size:16px;color:#F5F7FA;letter-spacing:0}
.field-inner input::placeholder{color:#8693A1}
.field-inner svg{width:17px;height:17px}
.field-inner.locked{opacity:.88}
select{color-scheme:dark}
.btn,.screen-login .login-actions .btn,.screen-register .bottom-actions .btn,.screen-mfa .bottom-actions .btn{
 min-height:48px;border-radius:8px;font:650 13px/1.3 var(--v-ui);letter-spacing:0;padding:11px 16px;justify-content:center;
}
.btn.primary{background:#DDE8F0;color:#101820;border:1px solid #E9F0F7;box-shadow:inset 0 1px rgba(255,255,255,.55),0 2px 7px rgba(0,0,0,.16)}
.btn.primary:hover{background:#F2F7FC}
.btn.outline{background:#22272D;border-color:#414852;color:#F5F7FA}
.btn.outline:hover{background:#2C333B}
.text-button{color:#CBD5E0;font-size:12px;font-weight:600;border-radius:6px}
.text-button:hover{color:#fff;background:#1D2228}
.bottom-actions{gap:12px;padding-top:18px}
.bottom-actions .btn{min-width:0}
.google-button,.screen-login .google-button,.screen-register .google-button{
 min-height:45px;border-radius:8px;background:#E9EFF5;color:#16212E;border:1px solid #F1F5F9;font:650 13px/1.4 var(--v-ui);
}
.google-button:hover{background:#fff;color:#101820}
.google-button:disabled{background:#333840;color:#A5AEB8;border-color:#454A52;filter:none;opacity:.65}
.google-divider{color:#909CA9;font-size:11px}
.google-divider:before,.google-divider:after{background:#30343A}
.screen-login .login-form{gap:11px}
.screen-login .login-method-title{font:650 11px/1.4 var(--v-ui);letter-spacing:.045em;color:#C0C8D2}
.screen-login .login-methods{background:#15181C;border:1px solid #303741;border-radius:8px;padding:3px;gap:4px}
.screen-login .login-methods::before{border-radius:6px!important;background:#2F3640!important;border:1px solid #54616F!important;box-shadow:inset 0 1px rgba(255,255,255,.06)}
.screen-login .login-methods button{border-radius:6px;min-height:40px;font-size:12px;font-weight:600;color:#ADB8C5}
.screen-login .login-methods button[aria-pressed=true]{color:#F4F7FA}
.screen-login .login-password-toggle{font-size:12px;color:#C7D6E7}
.screen-login .login-actions .btn{width:100%;font-size:13px}
.screen-login .login-signup{color:#A9B4C1;font-size:12px}
.screen-login .login-signup .text-button{font-size:12px;text-decoration:none;color:#D5E5FA}
.screen-login .login-signup .text-button:hover{text-decoration:underline}
.account-list{border-radius:10px;border:1px solid #333B45;background:#15181C}
.account-choice,.account-row{border-color:#292E35}
.account-row{min-height:67px;padding:12px;gap:13px}
.account-row:hover{background:#20252B}
.account-meta strong{font-size:13px;color:#EEF3F8}
.account-meta small{color:#97A4B1;font-size:11px}
.account-forget{border-radius:6px;color:#ABB7C3}
.list-action{border-bottom:1px solid #2C323A;min-height:49px;font-size:12px;color:#D1DCE7}
.list-action:hover{color:#fff;background:#1B1F24}
.avatar{border:1px solid #434D59;background:#303741;color:#E5EDF5;font-family:var(--v-display)}
.empty{border-radius:10px;border-color:#303741;background:#15181C}
.progress span{border-radius:4px;background:#303943}
.progress span.on{background:#9FC5F9}
.signup-option{background:#181B20;border:1px solid #343B44;border-radius:10px;min-height:75px;padding:14px;gap:14px}
.signup-option:hover{border-color:#657383;background:#232930}
.signup-option strong{font-size:13px;font-weight:650}
.signup-option small{font-size:11px;color:#ADB6C0}
.photo-control,.otp-channel,.otp-hero,.oauth-selected,.oauth-permissions,.service-item,.service-created,.debug-lines,.profile-summary{
 border-radius:10px!important;background:#15181C!important;border-color:#303741!important;
}
.photo-control:hover{background:#20252C!important}
.profile-summary{padding:17px}
.profile-summary strong{font-family:var(--v-ui)}
.info-line{border-color:#293038}
.info-line strong,.debug-line strong{font-variant-numeric:tabular-nums}
.connected{color:#7CDAAF}
.oauth-permission{border-color:#2D343D;gap:10px}
.oauth-permission svg{color:#A0C3EE}
.oauth-actions{gap:10px}
.scope-choices label{border-radius:8px;border-color:#303741}
.service-item code,.service-created code,.debug-line strong{font-family:var(--v-mono);font-size:11px}
.mini-button,.permanent-logout,.photo-choice,.otp-retry{border-radius:8px}
.mini-button:hover,.permanent-logout:hover{background:#292E34}
.foot{border-top:1px solid #292F35;color:#8D99A6;min-height:58px;font-size:11px}
.foot-link{color:#AEBBC9}
.boot-screen{background:#0B0B0C}
.boot-indicator{color:#9AA5B1;font-size:11px}
.boot-spinner,.inline-spinner{border-top-color:#99BFEF}
.auth-inline-error{border-radius:8px}
.auth-inline-error:not([hidden]){border-color:#7D444A;color:#FFD3D5;background:#301F23}
.footnote,.otp-note,.login-hint{color:#A3ADBA;font-size:11px}
#toast{border-radius:8px}
.vertice-auth-aside{display:none}
@media(min-width:920px) and (min-height:620px){
 html,body{overflow:hidden}
 #app{min-height:100dvh}
 .shell{
   max-width:1120px;display:grid;grid-template-columns:minmax(0,1fr) 470px;
   grid-template-rows:minmax(0,1fr) auto;column-gap:72px;
   padding:0 30px;align-items:stretch;
 }
 .vertice-auth-aside{
   display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;
   grid-column:1;grid-row:1 / span 2;position:relative;
   min-height:0;padding:clamp(35px,5vh,64px) 30px 38px 4px;
   border-right:1px solid #252B33;overflow:hidden
 }
 .vertice-auth-aside:before{
   content:'';position:absolute;left:4px;top:28%;width:min(40vw,410px);height:min(40vw,410px);
   border:1px solid rgba(135,165,208,.16);
   background:repeating-linear-gradient(0deg,transparent 0 43px,rgba(130,160,196,.035) 44px),
   repeating-linear-gradient(90deg,transparent 0 43px,rgba(130,160,196,.035) 44px);
   transform:rotate(-13deg);pointer-events:none;mask-image:linear-gradient(135deg,transparent,#000 28%,#000 64%,transparent)
 }
 .vertice-aside-brand{font:700 21px/1 var(--v-display);letter-spacing:-.07em}
 .vertice-aside-brand span{font:600 11px/1 var(--v-mono);letter-spacing:.08em;color:#A7C4E9;margin-left:9px}
 .vertice-aside-copy{position:relative;z-index:1;margin:auto 0 15%;max-width:445px}
 .vertice-aside-kicker{font:500 10px/1.5 var(--v-mono);letter-spacing:.15em;color:#99AEC8;margin-bottom:26px}
 .vertice-aside-copy h2{font:600 clamp(41px,4.4vw,66px)/1.06 var(--v-display);letter-spacing:-.065em;margin:0;color:#F5F7FA}
 .vertice-aside-copy h2 em{font-style:normal;color:#9ABDE9}
 .vertice-aside-copy p{font:400 15px/1.7 var(--v-ui);color:#A8B4C2;margin:25px 0 0;max-width:340px}
 .vertice-aside-foot{font:500 10px/1.5 var(--v-mono);letter-spacing:.05em;color:#788694}
 .auth-card{grid-column:2;grid-row:1;max-width:470px;width:100%;min-height:0;padding:clamp(38px,6vh,85px) 0 18px}
 .shell>.foot{grid-column:2;grid-row:2}
 .screen-login .heading h1,.screen-register .heading h1{font-size:29px}
 .screen-login .heading{margin-top:26px}
}
@media(max-width:919px){
 .shell{max-width:474px}
}
@media(max-width:390px){
 .shell{padding-inline:16px}
 .heading h1{font-size:24px}
 .signup-option{min-height:68px}
}
@media(max-height:620px){
 .auth-card.screen-login,.auth-card.screen-register,.auth-card.screen-signup-choice,.auth-card.screen-mfa{padding-top:calc(6px + env(safe-area-inset-top))}
 .screen-login .field-inner,.screen-register .field-inner,.screen-mfa .field-inner{height:40px}
 .screen-login .login-methods button{min-height:36px}
 .screen-login .login-actions .btn{min-height:40px}
}
@media(prefers-reduced-transparency:reduce){.btn.primary{box-shadow:none}}