/* Rande ID — fixed shared header / segmented-progress / account expansion
   Development auth only. No account-management selectors or assets. */
#app .auth-card{position:relative;isolation:isolate}
#app .auth-card>.screen-head{
 position:relative!important;top:0!important;left:0!important;
 flex:0 0 auto!important;z-index:10!important;
 margin:0!important;transform:none!important;
 transition:none!important;animation:none!important;
 background:#0B0B0C!important
}
#app .auth-card>.screen-head .topline{
 position:relative!important;transform:none!important;animation:none!important
}
#app .auth-card .auth-slide-ghost{
 display:flex;flex-direction:column;box-sizing:border-box;
 background:#0B0B0C!important;overflow:hidden!important;
 user-select:none!important;-webkit-user-select:none!important
}
#app .auth-card .auth-slide-ghost *{pointer-events:none!important}
#app .auth-card>.screen-body{
 position:relative;z-index:1;min-height:0
}
#app .auth-card>.bottom-actions{position:relative;z-index:3}
#app .screen-choose>.screen-head .topline{min-height:43px;display:flex;align-items:center;justify-content:center}
#app .screen-choose>.screen-head .topline .brand{margin:0}
#app .auth-card>.screen-head .progress.progress-continuous{
 display:block!important;position:relative!important;
 width:100%!important;height:6px!important;min-height:6px!important;
 flex:none!important;margin:13px 0 0!important;
 background:#343A43!important;border-radius:5px!important;
 overflow:hidden!important
}
#app .auth-card>.screen-head .progress.progress-continuous>span.progress-fill{
 display:block!important;position:absolute!important;
 inset:0 auto 0 0!important;
 height:100%!important;min-height:0!important;max-height:100%!important;
 flex:none!important;border-radius:0!important;
 background:#B9CFE9!important;
 width:100%!important;min-width:0!important;max-width:none!important;
 right:auto!important;
 transform-origin:0 50%!important;
 transform:scaleX(var(--ratio,0))!important;
 z-index:1!important;
 transition:transform 350ms cubic-bezier(.22,.72,.25,1)!important
}
#app .auth-card>.screen-head .progress.progress-continuous>span.progress-cuts{
 display:block!important;position:absolute!important;
 top:0!important;right:0!important;bottom:0!important;left:0!important;
 width:100%!important;height:100%!important;min-height:0!important;
 flex:none!important;border-radius:0!important;
 background:transparent!important;
 z-index:2!important;overflow:visible!important;
 pointer-events:none!important
}
#app .auth-card>.screen-head .progress.progress-continuous>.progress-cuts>i{
 display:block!important;position:absolute!important;
 top:-1px!important;bottom:-1px!important;
 width:3px!important;height:auto!important;
 margin-left:-1.5px!important;
 background:#0B0B0C!important;
 opacity:1!important;z-index:5!important;
 pointer-events:none!important
}
/* A 14 px inter-slide gutter is included in the JS translate distance. */
#app .screen-login .login-identifier-slot{overflow:hidden!important}
#app .screen-login .login-identifier-track{
 display:flex!important;flex-direction:row!important;
 width:100%!important;gap:14px!important;
 align-items:stretch!important;
}
#app .screen-login .login-identifier-track>.login-identifier-field{
 display:grid!important;flex:0 0 100%!important;
 width:100%!important;max-width:100%!important;
 margin:0!important;box-sizing:border-box!important
}
/* Height-based expansion: closed actions remain in the DOM for animation. */
#app .screen-choose .account-choice{
 overflow:hidden!important;
 border-bottom:1px solid #2A323B
}
#app .screen-choose .account-expand-actions,
#app .screen-choose .account-expand-actions[hidden]{
 display:grid!important;
 grid-template-rows:0fr!important;
 opacity:0;visibility:hidden;
 width:100%;min-height:0!important;
 padding:0!important;border:0!important;
 overflow:hidden!important;
 background:#15191D!important;
 transition:grid-template-rows 290ms cubic-bezier(.22,.72,.25,1),
            opacity 210ms ease,visibility 0s linear 290ms!important;
 pointer-events:none
}
#app .screen-choose .account-expand-actions.is-open{
 grid-template-rows:1fr!important;
 opacity:1!important;visibility:visible!important;
 transition:grid-template-rows 290ms cubic-bezier(.22,.72,.25,1),
            opacity 240ms ease,visibility 0s!important;
 pointer-events:auto
}
#app .screen-choose .account-expand-content{
 display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 gap:9px;width:100%;min-width:0;min-height:0;overflow:hidden;
 padding:0 12px!important;box-sizing:border-box;
 transition:padding-bottom 290ms cubic-bezier(.22,.72,.25,1)!important
}
#app .screen-choose .account-expand-actions.is-open .account-expand-content{
 padding-bottom:13px!important
}
#app .screen-choose .account-expand-actions button{
 width:100%;min-width:0;min-height:42px;
 display:flex;align-items:center;justify-content:center;gap:8px;
 background:#262D35;color:#EDF2F8;border:1px solid #414B57;border-radius:8px;
 font:600 12px/1.35 var(--v-ui)
}
#app .screen-choose .account-expand-actions button[data-forget]{
 color:#F7C5CD;background:#302227;border-color:#724650
}
#app .screen-choose .account-row[aria-expanded=true]{
 background:#222830
}
@media(prefers-reduced-motion:reduce){
 #app .auth-card>.screen-head .progress.progress-continuous>span.progress-fill,
 #app .screen-choose .account-expand-actions,
 #app .screen-choose .account-expand-content{
 transition:none!important
 }
}

/* Segmented single-surface progress: directly painted to avoid legacy span sizing. */
@property --progress{
  syntax:'<percentage>';
  inherits:false;
  initial-value:0%;
}
#app .auth-card>.screen-head .progress.progress-continuous{
  background-color:#343A43!important;
  background-image:linear-gradient(to right,
    #B9CFE9 0%,#B9CFE9 var(--progress,0%),
    #343A43 var(--progress,0%),#343A43 100%)!important;
  transition:--progress 360ms cubic-bezier(.22,.72,.25,1)!important;
}
#app .auth-card>.screen-head .progress.progress-continuous>span.progress-fill{
  display:none!important;
}
@media(prefers-reduced-motion:reduce){
  #app .auth-card>.screen-head .progress.progress-continuous{
    transition:none!important
  }
}

/* Fill uses DIV, never SPAN: old Rande auth CSS globally sets .progress span width:auto. */
#app .auth-card>.screen-head .progress.progress-continuous>div.progress-fill{
 display:block!important;position:absolute!important;
 left:0!important;top:0!important;bottom:0!important;right:auto!important;
 height:100%!important;max-height:100%!important;
 width:auto;flex:none!important;min-width:0!important;
 margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
 background:#B9CFE9!important;z-index:1!important;
 transition:width 350ms cubic-bezier(.22,.72,.25,1)!important
}

/* Full-width paint surface, clipped instead of resized; avoids initial zero-width flex animation. */
#app .auth-card>.screen-head .progress.progress-continuous>div.progress-fill{
 display:block!important;position:absolute!important;
 top:0!important;left:0!important;bottom:0!important;right:0!important;
 width:100%!important;min-width:100%!important;max-width:100%!important;
 height:100%!important;min-height:100%!important;
 opacity:1!important;background:#B9CFE9!important;
 transform:none!important;transform-origin:left center!important;
 transition:clip-path 350ms cubic-bezier(.22,.72,.25,1)!important
}

/* Final progress motion: inline-important transform wins over inherited legacy transforms. */
#app .auth-card>.screen-head .progress.progress-continuous>div.progress-fill{
 transform-origin:left center!important;
 transition:transform 360ms cubic-bezier(.22,.72,.25,1)!important
}

/* Geometric progress: legacy .progress span styling cannot affect SVG elements. */
#app .auth-card>.screen-head .progress.progress-continuous>.progress-svg{
 display:block!important;width:100%!important;height:100%!important;
 position:absolute!important;inset:0!important;margin:0!important;
 overflow:hidden!important;z-index:4!important
}
#app .auth-card>.screen-head .progress.progress-continuous>.progress-svg rect{
 stroke:none!important
}
#app .auth-card>.screen-head .progress.progress-continuous>.progress-svg .progress-svg-cuts{
 opacity:1!important
}

/* Atualização de permissões: o app pede só o que mudou. */
.oauth-permission.is-new{border-color:#4E79B4}
.oauth-permission .oauth-new{display:inline-block;align-self:flex-start;width:auto;margin:6px 0 0;padding:2px 6px;border-radius:6px;background:#243142;color:#AFCBEE;font:650 10px/1.3 var(--v-ui);font-style:normal;letter-spacing:.03em;vertical-align:1px}
.oauth-kept-label{margin-top:16px}
.oauth-kept .oauth-permission{opacity:.62}

/* Etapa opcional vazia: "Pular" com peso secundário; ao preencher vira "Continuar" principal (mesmo botão, sem mudar tamanho). */
#app .auth-card .btn.primary.is-skip{background:#1D1F23!important;color:#F5F7FA!important;border-color:#3A4048!important;box-shadow:none!important}
@media (hover:hover) and (pointer:fine){#app .auth-card .btn.primary.is-skip:hover{background:#262A30!important}}